使用flex佈局構建一個iphone容器---基於react，styled-components

轉自：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*/
複製代碼