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

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

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

效果图：

页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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>
    );
}

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

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*/