回答

置顶我的小程序在iphonex手机显示排版挤在一起了,其他手机都没问题,什么原因?精选热门

2021-07-201942浏览问题模块：其他开发相关的问题

2 个回答

CarpeDiem
2021-07-21
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
<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">

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

你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2021-07-21
有用
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
微喵网络
2021-07-21
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
没代码，猜不到
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2021-07-21
有用
回复 3
- CarpeDiem
  2021-07-21
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  赋楼下
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  2021-07-21
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
- 微喵网络
  2021-07-21回复CarpeDiem
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  请移步uni-app官方社区
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  2021-07-21
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
- CarpeDiem
  发表于移动端
  2021-07-21
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  真棒👍
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  2021-07-21
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他

请登录后发表内容

置顶我的小程序在iphonex手机显示排版挤在一起了,其他手机都没问题,什么原因?精选热门

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号