效果图
html
<!-- 规格选择弹窗 start -->
<view class="Specifications" >
<view class="Specifications-mask"></view>
<view class="Specifications-popup">
<view class="Specifications-popup-colse cuIcon-roundclose"></view>
<view class="Specifications-popup-head">
<view class="Specifications-popup-head-img"><image mode="widthFix" src="/static/admin-nan.png"></image></view>
<view class="Specifications-popup-head-text">
<view class="Specifications-popup-head-text-name">鸡丝拌面</view>
<view class="Specifications-popup-head-text-price"><label for="">¥</label><text>23.00</text></view>
<view class="Specifications-popup-head-text-parameter">
<text>剩余20份</text>
<text>每人限购2份</text>
</view>
</view>
</view>
<scroll-view scroll-y class="Specifications-huadong">
<view class="Specifications-popup-sele" v-for="(item,index) in specifications" :key="index">
<view class="Specifications-popup-sele-name">{{item.name}}</view>
<view class="Specifications-popup-sele-list">
<text :class=" item.start === index2 ?'rmoiu':'' " @click="morloe(index,index2)" v-for="(item2,index2) in item.children" :key="index2">{{item2.title}}</text>
</view>
</view>
</scroll-view>
<view class="Specifications-popup-munbar">
<view class="Specifications-popup-munbar-name">购买数量</view>
<view class="redmunber"><wm-numberBox model="2"></wm-numberBox></view>
</view>
<view class="Specifications-popup-but">
<label @click="Jumpgwc">加入购物车</label>
</view>
</view>
</view>
<!-- 规格选择弹窗 end -->
js
<script>
export default {
data(){
return {
specifications:[
{
id:0,
name:'规格',
start:0,
children:[
{id:101,title:'大份'},
{id:102,title:'中份'},
{id:103,title:'小份'}
]
},
{
id:1,
name:'口味',
start:0,
children:[
{id:101,title:'酸辣'},
{id:102,title:'甜味'},
{id:103,title:'孜然味'},
{id:104,title:'烧烤味'}
]
}
],
}
},
onLoad(){
},
methods: {
morloe(index,index2){
this.specifications[index]['start'] = index2
},
}
}
</script>
css
/* 规格选择弹窗 start */
.Specifications{ width: 100%; height: 100%; position: fixed; bottom: 0px; left: 0px; z-index: 999;}
.Specifications-mask{ width: 100%; height: auto; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: 0px auto; background: rgba(0,0,0,0.4); z-index: 1000;}
.Specifications-popup{ width:100%; height: auto; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 1001; background: #fff; border-radius: 5px 5px 0px 0px; }
.Specifications-popup-colse{ position: absolute; top: 0px; right: 0px; font-size: 30px; color: #999; z-index: 1002; }
.Specifications-popup-head{ width: 94%; height: auto; margin: 0px auto; border-bottom: 1px #eee solid; display: flex; flex-direction: row; padding: 20rpx 0px; }
.Specifications-popup-head-img{ width: 25%;}
.Specifications-popup-head-img image{ width: 100%; height: 200rpx; border: 1px #eee solid; display: block; }
.Specifications-popup-head-text{ width: 75%; display: flex; flex-direction:column; box-sizing: border-box; padding-left: 3%; justify-content: space-around; }
.Specifications-popup-head-text-name{ font-size: 16px; font-weight: bold; width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #444; }
.Specifications-popup-head-text-price{ display: flex; flex-direction: row; color:#eaa02c ;display:table-cell; vertical-align:bottom; }
.Specifications-popup-head-text-price label{ font-size: 12px; font-weight: bold; margin-right: 2%; }
.Specifications-popup-head-text-price text{ font-size: 18px;}
.Specifications-popup-head-text-parameter{ font-size: 13px; color: #888; }
.Specifications-popup-head-text-parameter text{ margin-right: 3%;}
.Specifications-huadong{ width: 100%; max-height: 600rpx; padding-top: 10px; }
.Specifications-popup-sele{ width: 100%; height: auto; box-sizing: border-box; padding: 0px 3%; }
.Specifications-popup-sele-name{ width: 100%; height: auto; font-size: 15px; color: #333; margin-bottom: 15px; }
.Specifications-popup-sele-list{ width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap;}
.Specifications-popup-sele-list text{ color: #fe7b2e; margin:0px 0%; border-radius: 4px; text-align: center; box-sizing: border-box; min-width: 30%; border: 1px #fe7b2e solid; margin-bottom: 15px; font-size: 14px;line-height: 33px; padding: 0px 2%; margin-right: 3%; }
.Specifications-popup-munbar{ width: 100%; height: auto; box-sizing: border-box; padding: 40rpx 5%; display: flex; justify-content: space-between; }
.Specifications-popup-but{ width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; padding: 10px 3%; box-sizing: border-box; border-top: 1px #eee solid;}
.Specifications-popup-but label{ text-align: center; color: #fff; height: 100rpx; line-height: 100rpx;
/* background-image:linear-gradient(#ff4f19,#E33E33); */
background:#E31D1A;
border-radius: 40px; letter-spacing: 3px;
}
.none{ bottom: -100%;}
.none .Specifications-popup{ bottom: -100%; transition: all 0.5s;}
.none .Specifications-mask{ display: none; transition: all 0.5s;}
.show{ bottom: 0px;}
.show .Specifications-popup{ bottom: 0%; transition: all 0.5s;}
.show .Specifications-mask{ display: block; transition: all 0.5s;}
.rmoiu{ background: #ff8d00; color: #fff!important; }
/* 规格选择弹窗 end */