手机的原因吧，我用别的手机就可以显示

2.19.5

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