我的微信小程序在模拟器上正常显示,iphonex以上的ui排版没有问题,从iphonex分辨率以及以下的出现了大问题,

<template>
<view>
<u-navbar title="提交订单" :background="backgroundColor" title-color="#000" back-icon-color="#000" :border-bottom ="false"></u-navbar>
<view class="content">
<!-- 地址区域 -->
<view class="address">
<view class="title">收货地址</view>
<view class="addressInfo">
<view class="line">
<view class="text">地址</view>
<view>浙江省杭州市萧山区江南之星小区20幢2单元1903</view>
<u-icon name="map-fill" @click="navigate('/pages/addressList/addressList')"></u-icon>
</view>
<view class="line">
<view class="text">姓名</view>
<view>xxx</view>
</view>
<view class="line">
<view class="text">手机号</view>
<view>2222222222</view>
</view>
</view>
</view>
<!-- 服务选择区域 -->
<view class="choose">
<view class="title">服务时长</view>
<view class="subsection">
<u-subsection :list="list" :current="current" font-size="24" active-color="#f29d38" @change="changeSubsection"></u-subsection>
</view>
</view>
<!-- 服务内容区域 -->
<view class="service_content">
<!-- 头部 -->
<view class="top">
<view class="title">一手环保科技有限公司</view>
<view class="tag">生活服务</view>
</view>
<!-- 分割线 -->
<u-line color="rgba(0,0,0,0.03);" length="660rpx"/>
<!-- 服务商品信息 -->
<view class="service_info">
<!-- 顶部图片以及商品信息 -->
<view class="line">
<view class="left">
<image src="cloud://ohenv-3gfjcna9629d6f9a.6f68-ohenv-3gfjcna9629d6f9a-1306492505/good/30.png" mode="widthFix"></image>
<view class="info">
<view class="name">
垃圾代扔半年服务
</view>
<view class="tag">
x1
</view>
</view>
</view>
<view class="right">
¥ 34.9
</view>
</view>
<!-- 优惠金额 -->
<view class="line">
<view class="left">
<u-icon name="red-packet-fill" color="red" size="30" label="优惠金额" label-pos="right" label-size="26" label-color="#000"></u-icon>
</view>
<view class="right">
<view class="num" style="color:red;font-weight: bold;font-size: 27rpx;">- ¥ 17</view>
</view>
</view>
<!-- 优惠时长 -->
<view class="line">
<view class="left">
<u-icon name="clock-fill" color="red" size="30" label="额外时长" label-pos="right" label-size="26" label-color="#000"></u-icon>
</view>
<view class="right">
<view class="num" style="color:red;font-weight: bold;font-size: 27rpx;">+ 15天</view>
</view>
</view>
<!-- 优惠券 -->
<view class="line">
<view class="left">
<u-icon name="gift-fill" color="red" size="30" label="代金券" label-pos="right" label-size="26" label-color="#000"></u-icon>
</view>
<view class="right">
<view class="num" style="color:#C0C0C0;font-weight: 500;font-size: 27rpx;">暂无可用 ></view>
</view>
</view>
</view>
<!-- 分割线 -->
<u-line color="rgba(0,0,0,0.03);" length="660rpx"/>
<!-- 底部结算金额 -->
<view class="bottom">
<view class="line">
<view class="left">
<u-icon name="question-circle" color="#c0c0c0" size="30" label="代收规则" label-pos="left" label-size="26" label-color="#c0c0c0"></u-icon>
</view>
<view class="right" style="font-size: 24rpx;line-height: 30rpx;">
已优惠<text style="font-size: 24rpx;color:red;padding-right: 10rpx;">¥ 17</text> <text>小计 </text><text style="font-size: 30rpx;"> ¥ 19.9</text>
</view>
</view>
</view>
</view>
<!-- 回收要求 -->

        <view class="tips">  
            <!-- title -->  
            <view class="title">服务要求</view>  
            <!-- 分割线 -->  
            <u-line color="rgba(0,0,0,0.03);" length="660rpx"/>  
            <view class="syn_content">  
                <view class="content1">  
                    <view class="item">  
                        <image src="cloud://ohenv-3gfjcna9629d6f9a.6f68-ohenv-3gfjcna9629d6f9a-1306492505/tip/location.png" mode="widthFix"></image>  
                        <view class="tip">定位清晰</view>  
                    </view>  
                    <view class="item">  
                        <image src="cloud://ohenv-3gfjcna9629d6f9a.6f68-ohenv-3gfjcna9629d6f9a-1306492505/tip/nowater.png" mode="widthFix"></image>  
                        <view class="tip">拒绝掺水</view>  
                    </view>  
                    <view class="item">  
                        <image src="cloud://ohenv-3gfjcna9629d6f9a.6f68-ohenv-3gfjcna9629d6f9a-1306492505/tip/package.png" mode="widthFix"></image>  
                        <view class="tip">包装完整</view>  
                    </view>  
                </view>  

            </view>  
        </view>  
        <view class="agree">  
            <u-checkbox-group size="24">  
                <u-checkbox v-model="checked" shape="circle" size="24" label-size="24">{{agreeStr}}</u-checkbox>  
            </u-checkbox-group>  
        </view>  
        <view class="pay">  
            <view class="btn">购买服务</view>  
        </view>  

    </view>  
</view>  

</template>

<script>
export default {
data() {
return {
backgroundColor : {
background: '#2B7DE1'
},
list: [
{
name: '月度服务'
},
{
name: '季度服务'
},
{
name: '半年服务'
},
{
name: '全年服务'
}
],
current: 0,
agreeStr:'同意《回收协议》',
checked:false
}
},
methods: {
//页面跳转方法
navigate(url){
uni.navigateTo({
url,
})
},
//选择商品方法,修改索引
changeSubsection(index){
console.log(index)
}
}
}
</script>

<style lang="scss">
.content{
// position: relative;
// top: -5rpx;
width: 100%;
height: 30vh;
background: linear-gradient(#2B7DE1,#f3eff5);
display: flex;
flex-direction: column;
align-items: center;
.address{
margin-top: 30rpx;
width: 700rpx;
height: 270rpx;
background: #FFFFFF;
border-radius: 20rpx;
display: flex;
flex-direction: column;
.title{
margin: 20rpx;
font-size: 30rpx;
font-weight: bold;

        }  
        .addressInfo{  
            display: flex;  
            flex-direction: column;  
            font-size: 24rpx;  
            .line{  
                margin: 10rpx 20rpx;  
                display: flex;  
                justify-content: space-between;  
            }  
        }  

    }  
    .choose{  
        margin-top: 30rpx;  
        height: 200rpx;  
        width: 700rpx;  
        border-radius: 20rpx;  
        background: #FFFFFF;  
        .title{  
            margin: 20rpx;  
            font-size: 30rpx;  
            font-weight: bold;  

        }  
        .subsection{  
            width: 700rpx;  
            padding: 20rpx 20rpx;  
            u-subsection{  
                width: 680rpx;  
            }  
        }  
    }  
    .service_content{  
        margin-top: 30rpx;  
        // height: 500rpx;  
        width: 700rpx;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        border-radius: 20rpx;  
        background: #FFFFFF;  
        .top{  
            margin: 20rpx 20rpx 30rpx 20rpx;  
            width: 660rpx;  
            display: flex;  
            justify-content: space-between;  
            .title{  
                font-size: 26rpx;  
            }  
            .tag{  
                background: #f5aa00;  
                border-radius: 15rpx;  
                font-size: 20rpx;  
                width: 100rpx;  
                font-weight: bold;  
                display: flex;  
                justify-content: center;  
                align-items: center;  
                // color: rgba(0,0,0,0.1);  
            }  

        }  
        .service_info{  
            // margin-top: 10rpx;  
            margin-bottom: 30rpx;  
            width: 660rpx;  
            display: flex;  
            flex-direction: column;  
            .line{  
                display: flex;  
                justify-content: space-between;  
                margin: 30rpx 0rpx 0rpx 0rpx;  
                .left{  
                    display: flex;  
                    // width: 300rpx;  
                    image{  
                        width: 100rpx;  
                        border-radius: 10rpx;  
                    }  
                    .info{  
                        display: flex;  
                        flex-direction: column;  
                        justify-content: space-between;  
                        margin-left: 20rpx;  
                        .name{  
                            font-weight: bold;  
                        }  
                        .tag{  
                            font-size: 24rpx;  
                            color: #C0C0C0;  
                        }  

                    }  
                }  
                .right{  
                    font-weight: bold;  
                }  
            }  
        }  
        .bottom{  
            margin: 20rpx 20rpx 30rpx 20rpx;  
            width: 660rpx;  
            .line{  
                display: flex;  
                justify-content: space-between;  
            }  
        }  
    }  
    .tips{  
        margin-top: 30rpx;  
        margin-bottom: 30rpx;  
        width: 700rpx;  
        // height: 270rpx;  
        background: #FFFFFF;  
        border-radius: 20rpx;  
        display: flex;  
        flex-direction: column;  
        .title{  
            margin: 20rpx;  
            font-size: 30rpx;  
            font-weight: bold;  

        }  
        .syn_content{  
            margin: 30rpx 0rpx;  
            display: flex;  
            width: 700rpx;  
            justify-content: space-between;  
            .content1{  
                display: flex;  
                .item{  
                    display: flex;  
                    flex-direction: column;  
                    flex: 1;  
                    image{  
                        padding: 0rpx 77rpx;  
                        width: 80rpx;  
                    }  
                    .tip{  
                        text-align: center;  
                        font-size: 20rpx;  
                    }  
                }  
            }  

        }  
    }  
    .agree{  
        width: 700rpx;  
    }  
    .pay{  
        margin-top: 30rpx;  
        padding-bottom: 100rpx;  
        width: 700rpx;  
        .btn{  
            width: 700rpx;  
            height: 80rpx;  
            border-radius: 50rpx;  
            background-color: #2B7DE1;  
            line-height: 80rpx;  
            color: #FFFFFF;  
            text-align: center;  
        }  
    }  
}  

page{  
    background-color: #f3eff5;  

}  

</style>