iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

SASS 基礎初學三十天系列 第 28

DAY 28 文章列表 - 2

對,他有兩種版型:D

左側的大圖!

不知道為何大標都想加驚嘆號XD

因為文章資料的內容太常用到了,所以把他整理成了 json 方便之後快速使用~


import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";

export default function Article() {
  const articleData = {
    category: "ENTERTAINMENT",
    title: " 寶藏男孩持修:「對我來說男子氣概無關外表,而是要負責任。」",
    writer: "NICOLE LEE",
    dateTime: "2021年6月7日",
    img: "https://media.vogue.com.tw/photos/60b9a4fcf37df9e2f39b0216/2:3/w_2880%2cc_limit/29711-1_V.jpg",
  };
  return (
    <div>
			{/* ... */}
      <div className="post">
        <h2 className="post-headline">fashion</h2>
        <div className="post-section">
          <div className="left-side">
            <img src={articleData.img} alt="img" />
            <div className="overlay-content">
              {articleData.category}
              <div className="post-title">{articleData.title}</div>
              <hr className="white-hr" />
              BY {articleData.writer}
              {articleData.dateTime}
            </div>
          </div>
          <div className="right-side">
          </div>
        </div>
      </div>
    </div>
  );
}

.post

    &-section
        display: flex
        justify-content: space-between
        gap: 2.4vw

        .left-side
            width: (100vw-10vw)/2
            justify-content: center
            height: 100vh
            overflow: hidden

            .overlay-content
                color: $primary-background-color
                position: relative
                bottom: 410px
                left: 0
                padding: 20px 24px 40px
                font-weight: bold

        .right-side
  1. 左側大圖的寬度,扣除左右寬 5vw 後與右邊分別一半,透過運算子計算出精準的寬度
  2. 超過範圍的圖片內容使用 overflow: hidden 來遮蔽
  3. overlay-content 是覆蓋在諞上的文字區塊,透過 position: relative 來覆蓋位置到圖上

右側的 Flex Box!

一樣先排版好~



export default function Article() {
  return (
    <div>
      <div className="post">
        <h2 className="post-headline">fashion</h2>
        <div className="post-section">
          <div className="left-side">
            {/* ... */}
          </div>
          <div className="right-side">
            <div className="row">
              <div className="post-column">
                <div className="square-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="rectangle-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="square-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="rectangle-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
            </div>
            <div className="row">
              <div className="post-column">
                <div className="rectangle-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="square-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="rectangle-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="square-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

這邊在 right-side 下,我使用了兩個 row 的 class 來包裹 column 中的內容,因為後續的 flex box 相關設定無法直接透過 flex box 的屬性讓內容 waterfall 樣式排版(有長有短)


.post
    &-section
        display: flex
        justify-content: space-between
        gap: 2.4vw

        .left-side
          // ...
        .right-side
            width: (100vw-10vw)/2
            height: 100vh
            display: flex
            overflow: scroll
            gap: 2.4vw
            overflow-x: hidden
            scrollbar-width: none

            .row
                flex: 1
                width: (100vw-60vw)/2
  1. 右邊的寬度與上面左邊設定的方式一樣即可
  2. 在右側要先設定 display: flex 讓內容可以使用 flex box 的效果
  3. scroll 的部分是針對超出範圍時,使用 scroll bar 滑動
  4. gap 可以設定物件間的寬度空格
  5. overflow-x: hidden 不使用水平滾動,只使用垂直滾動的方式
  6. row 的 flex 1 指定此 row 只有一欄,讓內容可以望下排序
  7. row 的寬度也使用計算公式的方法來分配

如此一來滾動式卷軸的樣式頁面也完成啦~

感謝大家收看明天見~~~


除此之外,也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了!是世界奇觀!

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端?後端?你早晚都要全端的,何不從現在開始?


上一篇
DAY 27 文章列表
下一篇
DAY 29 真的是 Footer 了
系列文
SASS 基礎初學三十天30

尚未有邦友留言

立即登入留言