轉自：blog.zhuliang.ltd/front-end/c…

已設定元件的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*/
複製程式碼