theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

弹窗优化

Browse Source
This commit is contained in:
luyuan 2020-07-06 11:42:12 +08:00
parent 709a315403
commit d94fb80ee2
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
2 changed files with 74 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
pageB/components/sdetails/guige.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<view class="guige">
<view class="title">
选择尺码
</view>
<view class="item">
<text>均码</text>
<text :class="select == 1 ? 'xuanzhong' : ''">S</text>
<text>M</text>
</view>
</view>
</template>
<style lang="scss" scoped>
.guige{
margin-top: 30rpx;
padding-bottom: 30rpx;
border-bottom: #ececec solid 2rpx;
.title{
font-size: 28rpx;
color: #333;
margin-bottom: 29rpx;
}
.item{
display: flex;
flex-wrap: wrap;
>text{
min-width: 120rpx;
height: 60rpx;
background-color: #ececec;
color: #999;
text-align: center;
line-height: 60rpx;
box-sizing: border-box;
border-radius: 6rpx;
margin-right: 26rpx;
}
.xuanzhong{
border: #ff780f 1rpx solid;
color: #FF780F;
background-color: #FFF1E6;
}
}
}
</style>
<script>
export default {
name:"guige",
data(){
return {
select:true
}
}
}
</script>

63
pageB/components/sdetails/tloos.vue
View File

@ -16,7 +16,8 @@
</view>
<u-popup v-model="show" mode="bottom">
<view class="popup">
<scroll-view scroll-y="true" class="popup">
<view>
<view class="head">
<image class="image"></image>
<view class="info">
@ -25,29 +26,32 @@
<text>￥99</text>
</view>
</view>
<view class="guige">
<view class="title">
选择尺码
</view>
<view class="item">
<text>均码</text>
<text class="xuanzhong">S</text>
<text>M</text>
</view>
</view>
<guige></guige>
<guige></guige>
<guige></guige>
<guige></guige>
<guige></guige>
<guige></guige>
<guige></guige>
<view class="num">
<text>购买数量</text>
<u-number-box v-model="value" @change="valChange"></u-number-box>
</view>
</view>
<view style="height:180rpx"></view>
</view>
</scroll-view>
</u-popup>
</view>
</template>
<script>
import guige from "./guige"
export default {
name:"tloos",
props: ['id'],
components:{
guige
},
data(){
return {
show:true,
@ -115,7 +119,8 @@ export default {
}
.popup{
padding: 30rpx;
padding-bottom: 180rpx;
box-sizing: border-box;
max-height: 750rpx;
.head{
display: flex;
margin-bottom: 30rpx;
@ -141,37 +146,7 @@ export default {
}
}
}
.guige{
margin-top: 30rpx;
padding-bottom: 30rpx;
border-bottom: #ececec solid 2rpx;
.title{
font-size: 28rpx;
color: #333;
margin-bottom: 29rpx;
}
.item{
display: flex;
flex-wrap: wrap;
>text{
min-width: 120rpx;
height: 60rpx;
background-color: #ececec;
color: #999;
text-align: center;
line-height: 60rpx;
box-sizing: border-box;
border-radius: 6rpx;
margin-right: 26rpx;
}
.xuanzhong{
border: #ff780f 1rpx solid;
color: #FF780F;
background-color: #FFF1E6;
}
}
}
.num{
height: 84rpx;
display: flex;