From: blog. Zhuliang. LTD / 2018/12 / fro…

The props. Children of the configured component is what the iPhone container screen displays

Overflow-y effect added to style (y axis hidden)

Effect:

Page structure

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>
    );
}
Copy the code

style

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;
`
/* Headset, sensor, front camera head 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;
`
/* Headset, sensor, front camera head end*/
/* Signal, power, etc. 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;
`
/* Signal, power, etc bar end*/
/* Display area start*/
export const ContentWrapper = styled.div`
width:100%;
flex-grow:1;
background-color:gray;
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
`
/* Display area end*/
/* Bottom touch area 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;
`
/* Bottom touch area end*/
Copy the code