DAY 28 文章列表 - 2

对，他有两种版型：Ｄ

左侧的大图！

不知道为何大标都想加惊叹号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

左侧大图的宽度，扣除左右宽 5vw 後与右边分别一半，透过运算子计算出精准的宽度
超过范围的图片内容使用 overflow: hidden 来遮蔽
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