DAY 27 文章列表

嗨，今天来完成底下文章的部分，金嗨，内容越写越多，因为快要完赛了节奏没抓好ＸＤ，前面都是分开解析的，结果後面变成一个 section 一大包，真是抱歉ＱＱ

再放一个广告版位

乳题，接下来再放一个广告版位，这边就复制之前写好的内容即可

// Article.js

import React from "react";

export default function Article() {
  return (
    <div>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
      <div className="post">
        // ...
      </div>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
    </div>
  );
}

Attention 文章

基本上版位的配置也跟 Hot Now 相似，只有文章的排列方式不同，这边出现的其他文章图片，一样会有红色的 filter，所以我更改一下之前设定的做法，改在 post 下的 img 来统一设定

.post
    padding: 0 5vw
    border-top: 1px solid $primary-color
    @extend %link-font
    font-weight: 100

    img
        &:hover
            color: $dark-gray
            cursor: pointer
            transition: .1s ease
            filter: url(#red-filter)

接下来排版内容，会有四篇～分别是长方跟正方形的图片

// Article.js

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

export default function Article() {
  return (
    <div>
      // ...
      <div className="post">
        <h2 className="post-headline">attention</h2>
        <div className="post-section">
          <div className="post-column">
            <div className="rectangle-img">
              <img
                alt="post-img"
                src="https://media.vogue.com.tw/photos/60b9a4fcf37df9e2f39b0216/2:3/w_2880%2cc_limit/29711-1_V.jpg"
              />
            </div>
            <div className="post-paper">
              ENTERTAINMENT
              <div className="post-subtitle">
                宝藏男孩持修：「对我来说男子气概无关外表，而是要负责任。」
              </div>
              <hr className="brown-hr" />
              BY NICOLE LEE 2021年6月7日
            </div>
          </div>
          <div className="post-column">
            <div className="square-img">
              <img
                alt="post-img"
                src="https://media.vogue.com.tw/photos/60b9a4fcf37df9e2f39b0216/2:3/w_2880%2cc_limit/29711-1_V.jpg"
              />
            </div>
            <div className="post-paper">
              ENTERTAINMENT
              <div className="post-subtitle">
                宝藏男孩持修：「对我来说男子气概无关外表，而是要负责任。」
              </div>
              <hr className="brown-hr" />
              BY NICOLE LEE 2021年6月7日
            </div>
          </div>
						// ...
        </div>
      </div>
    </div>
  );
}

// article.sass

.post
    padding: 0 5vw 64px
    border-top: 1px solid $primary-color
    @extend %link-font
    font-weight: 100
    //...
    &-section
        display: flex
        justify-content: space-between

    &-column
        width: (100vw-20vw)/4
        display: inline-block
        overflow: hidden

        &:hover
            @extend %text-hover

        img
            max-width: 100%
            overflow: hidden

        .square-img
            width: 340px
            height: 340px
            overflow: hidden

        .rectangle-img
            width: 340px
            height: 460px
            overflow: hidden

    &-title
        @extend %logo-font
        font-size: 48px
        padding: 16px 0

    &-subtitle
        @extend %logo-font
        font-size: 22px
        padding: 4px 0

    &-paper
        position: relative
        padding: 24px
        margin-left: 24px
        top: -40px
        background-color: $primary-background-color

.brown-hr
    margin: 24px 0 12px 0
    border-top: 5px solid #b89a6a
    width: 40px
    &:hover
        border-top: 5px solid $secondary-color

.more-info
    text-align: center
    margin: auto
    border-top: 2px solid $gray

button
    cursor: pointer
    border: none
    background-color: $primary-background-color
    margin: 8px 32px
    padding: 32px
    text-transform: uppercase
    @extend %link-font
    .red-icon
        color: $primary-background-color
        background-color: $secondary-color
        border-radius: 50%
        padding: 16px 18px
        margin: 16px
    &:hover
        color: $secondary-color

一下子爆产好多 code XD，待我细细解释！

post-section 是为了套用 flex 属性而包的 container
column 则是 section 中四篇文章的位置，透过 flew 的做法来完成平均分配栏宽，宽度则是透过 sass 的计算方式来扣掉编框比例的 vw 後所获得的宽，overflow: hidden 的部分主要是遮盖掉图片超出的范围
title、subtitle 的部分一样沿用之前 extend 设定过的字型
paper 利用 relative 属性将整体文字区块往上抬，形成覆盖的样式

内容大概是这样～比较细节基本的地方就不介绍了，有问题欢迎底下留言～

除此之外，也欢迎大家走走逛逛关於我们团队夥伴的文章

lu23770127 - SASS 基础初学三十天

10u1 - 糟了！是世界奇观！

juck30808 - Python - 数位行销分析与 Youtube API 教学

HLD - 浅谈物件导向与Design Pattern介绍

SiQing47 - 前端？後端？你早晚都要全端的，何不从现在开始？

<<: Day30 Try catch

>>: [Day 29] 应用三：开发Easy Eye App