DAY24-资讯卡页面设计

前言：

昨天我们介绍了一个普通的资讯页面是如何完成的，今天我们要来介绍另一个很常用到的页面种类，资讯卡页面！

那废话不多说，先来看看效果吧！

长这样：

再来是当画面缩小的效果：

最後是手机画面：

这里我透过各种排版，让资讯卡不至於因画面尺寸而出现overflow的状况。

那现在就来看这页面的架构吧！

React架构：

import React from 'react'
import { 
TeamCard, TeamIcon, 
TeamP, TeamWrapper,
TeamContainer, 
TeamTitle, TeamH2 } from './TeamElements'
import rk from '../../images/318.png'
import alu from '../../images/murmur.jpg'
import sen from '../../images/mydino.jpg'
import jc from '../../images/516.png'
import fd from '../../images/713.png'

const Team = () => {
    return (
        <TeamContainer id="Team">
            <TeamTitle>Team</TeamTitle>
            <TeamWrapper>
                    
                    <TeamCard >
                        <TeamIcon src = {rk} />
                        <TeamH2>RK / Project Lead</TeamH2>
                        <TeamP>Functioning 24/7.</TeamP>
                    </TeamCard>

                    <TeamCard >
                        <TeamIcon src = {alu} />
                        <TeamH2>Mur＊＊ / Dev</TeamH2>                       
                        <TeamP>A Schwarzwälder Kirschtorte Lover with a small killifish.</TeamP>
                    </TeamCard>

                    <TeamCard  >
                        <TeamIcon src = {fd} />
                        <TeamH2>Sleepy foodie/ Design</TeamH2>
                        <TeamP>Everything is delicious as long as you add salt.</TeamP>
                    </TeamCard>

                    <TeamCard  >
                        <TeamIcon src = {sen} />
                        <TeamH2>Sen / Dev</TeamH2>
                        <TeamP>Nerdy life struggler.</TeamP>
                    </TeamCard>

                    <TeamCard  >
                        <TeamIcon src = {jc} />
                        <TeamH2>Sleepy J / Design</TeamH2>
                        <TeamP>Need some alcohol.</TeamP>
                    </TeamCard>

                </TeamWrapper>
            
        </TeamContainer>
    )
}

export default Team

以上就大概是这个资讯卡页面的架构，应该很好理解。分别是最大的一个TeamContainer把整个页面包住，里面有Title跟TeamWrapper，後者就是负责包住资讯卡的元件。

而每张资讯卡里都有一个Icon，表示每个成员的图片；H2当大标题，显示成员名称；P则是用来写成员介绍的元件。

接下来重点就是Style-components的写法了。

TeamElements：

import styled from "styled-components";

export const TeamContainer = styled.div`
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000000;
    padding-bottom: 5%;

    @media screen and (max-width: 768px) {
        height: fit-content;
    }    
`

export const TeamWrapper = styled.div`
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    grid-gap: 50px;
    padding: 0 0;
    
    @media screen and (max-width: 1225px) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
`

export const TeamCard = styled.div`
    
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    height: 40vh;
    width: 200px;
    padding: 0px 0px;
    padding-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;

    &:hover {
        transform: scale(1.1);
        transition: all 0.2s ease-in-out;
        
    }
    @media screen and (max-width:1312px){
        height: 300px;
        width: 200px;
        margin: 5% 0;
    }
`

export const TeamIcon = styled.img`
    height: 200px;
    width: auto;    
    border-radius: 10px;

    @media screen and (max-width:768px){
        height: auto;
        width: 200px;
    }
`

export const TeamTitle = styled.h1`
    transform: translateY(0%);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 3%;
    text-align: center;

    @media screen and (max-width:768px) {
        margin-top: 0%;
        font-size: 2rem;
    }
`

export const TeamH2 = styled.h2`
    font-size: 1rem;    
    text-align: center;
    font-weight: 900;
    
`

export const TeamP = styled.p`
    font-size: 1rem;
    text-align: center;
    line-height: 25px;
`

为了达成一开始演示的效果，我在TeamWrapper的地方是这样写的：

export const TeamWrapper = styled.div`
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    grid-gap: 50px;
    padding: 0 0;
    
    @media screen and (max-width: 1225px) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
`

可以看到先试用grid的显示方法，grid-template-columns用成1fr 1fr 1fr 1fr 1fr，达到五张卡并排的效果。

再来是当开启装置宽度小於1225px的时候，这时候会改成每行三张卡的显示方式，也就是最上面的第二张图。

最後是装置宽度小於768px时，就会一次放一张，也就是最後手机开启的效果。

从以上可以看到style components就是利用@media这个方法来做不同宽度时的版面控制，跟css不一样的是他写在每一个Tag里面，不像css是整合成一块，更有前面说过的控制物件的感觉。

小结：

今天我们介绍了资讯卡页面的设计方法，当然这都只是很初阶的样貌，要进一步做更多特效都是可以的。
那今天就先这样！我们明天见。