使用flex布局构建一个iphone容器---基于react，styled-components

已设定组件的 props.children 即为 iphone 容器屏幕显示的内容

样式中已增加 overflow-y 效果（已隐藏y轴）

效果图：

页面结构

import React from 'react';
import {
    Container,
    TopContainer,
    CameraPhoneWrapper,
    HeaderWrapper,
    LightSensor,
    CameraFront,
    HeadPhone,
    HeadPhoneSpace,
    HeaderBottomSpace,
    StatusBar,
    SignalWrapper,
    SignalDot,
    LTEWrapper,
    BatteryWrapper,
    BatteryHead,
    BatteryBody,
    BatteryPercentWrapper,
    ContentWrapper,
    BottomWrapper,
    TouchButton
} from './style';
export default (props) => {
    return (
        <Container>
            <TopContainer>
                <HeaderWrapper>
                    <LightSensor></LightSensor>
                    <CameraPhoneWrapper>
                    <CameraFront></CameraFront>
                    <HeadPhone></HeadPhone>
                    <HeadPhoneSpace></HeadPhoneSpace>
                    </CameraPhoneWrapper>
                </HeaderWrapper>
                <HeaderBottomSpace></HeaderBottomSpace>
                <StatusBar>
                    <SignalWrapper>
                        <SignalDot className="hasSignal"></SignalDot>
                        <SignalDot className="hasSignal"></SignalDot>
                        <SignalDot className="hasSignal"></SignalDot>
                        <SignalDot></SignalDot>
                        <SignalDot></SignalDot>
                        <LTEWrapper>4G</LTEWrapper>
                    </SignalWrapper>
                    <BatteryWrapper>
                        <BatteryHead></BatteryHead>
                        <BatteryBody></BatteryBody>
                        <BatteryPercentWrapper>66%</BatteryPercentWrapper>
                    </BatteryWrapper>
                </StatusBar>
            </TopContainer>
            <ContentWrapper>
                 {props.children}
            </ContentWrapper>
            <BottomWrapper>
                <TouchButton></TouchButton>
            </BottomWrapper>
        </Container>
    );
}

样式


import styled from 'styled-components';
export const Container = styled.div`
width: 375px;
height: 750px;
background-color: white;
border-radius: 50px;
border: 7px solid #c0c0c0;
display:flex;
flex-direction:column;
justify-content:space-between;
`
/*听筒、传感器、前置摄像头等头部 start*/
export const TopContainer = styled.div`
`
export const HeaderWrapper = styled.div`
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
`
export const HeaderBottomSpace = styled.div`
height:20px;
`
export const LightSensor = styled.div`
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #000;
margin-top:13px;
margin-bottom:7px;
`
export const CameraPhoneWrapper = styled.div`
display:flex;
`
export const CameraFront = styled.div`
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
margin-right:5px;
`
export const HeadPhone = styled.div`
border-radius: 5px;
width: 100px;
height: 4px;
background-color: #000;
margin-top:3px;
`
export const HeadPhoneSpace = styled.div`
width: 7px;
`
/*听筒、传感器、前置摄像头等头部 end*/
/*信号、电量等bar start*/
export const StatusBar = styled.div`
background-color:black;
display:flex;
align-items:center;
justify-content:space-between;
`
export const SignalWrapper = styled.div`
display:flex;
align-items:center;
:nth-child(1){
margin-left:5px;
}
`
export const SignalDot = styled.div`
width: 7px;
height: 7px;
border: 1px solid #fff;
border-radius: 50%;
display: block;
margin-right: 3px;
&.hasSignal{
background-color: #fff;
}
`
export const LTEWrapper = styled.div`
color: #fff;
`
export const BatteryWrapper = styled.div`
color: #fff;
display:flex;
flex-direction:row-reverse;
align-items:center;
`
export const BatteryHead = styled.span`
width: 3px;
height: 5px;
display: block;
background-color: #fff;
margin-right: 3px;
`
export const BatteryBody = styled.div`
width: 25px;
height: 10px;
border: 1px solid #fff;
&::before{
width: 12px;
height: 9px;
background: #fff;
content: "";
display: block;
}
`
export const BatteryPercentWrapper = styled.div`
color: #fff;
display: block;
margin-right:3px;
`
/*信号、电量等bar end*/
/*屏幕显示区域 start*/
export const ContentWrapper = styled.div`
width:100%;
flex-grow:1;
background-color:gray;
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
`
/*屏幕显示区域 end*/
/*底部touch区域 start*/
export const BottomWrapper = styled.div`
display:flex;
justify-content:center;
align-items:center;
height:85px;
`
export const TouchButton = styled.div`
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #9A7371;
`
/*底部touch区域 end*/