3-1 详情页面 布局

上面我们把首页以及首页跳转到详情页面的部分写好了。接下来，我们开始写详情页面。

我们在 src/pages/detail 下新建 style.js 文件。

import styled from 'styled-components';

export const DetailWrapper = styled.div`
    overflow: hidden;
    width: 620px;
    margin: 0 auto;
    padding-bottom: 100px;
`;

export const Header = styled.div`
    margin: 50px 0 20px 0;
    line-height: 44px;
    font-size: 34px;
    color: #333;
    font-weight: bold;
`;

export const Content = styled.div`
    color: #2f2f2f;
    img {
        width: 100%;
    }
    p {
        margin: 25px 0;
        font-size: 16px;
        line-height: 30px;
    }
    b {
        font-weight: bold;
    }
`;

然后 src/pages/detail 下的 index.js 如下。

import React, {Component} from 'react';
import { DetailWrapper,
    Header,
    Content
 } from './style';

class Detail extends Component {
    render () {
        return (
            <DetailWrapper>
                <Header>标题</Header>
                <Content>
                    <img src="//upload-images.jianshu.io/upload_images/2257068-610cbe7de087b61c?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" />
                    <p>说走就走的旅行，不是不管不顾不闻不问的去往某一个地方，而是今晚决定了，就妥善处理好工作，再做好攻略，明天一早就启程。</p>
                    <p>时间像是静止的，而流动的是人群。</p>
                    <p>草地成了孩子们的乐园，擒着心爱的玩具，小跑小闹，这个画面最欢喜。</p>
                    <p><b>当时距离有点远</b>，长焦段下拍的画面，画质不好，但依旧生动，依旧能感受到孩子的那种喜悦。</p>
                </Content>
            </DetailWrapper>
        )
    }
}

export default Detail;