123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<template>
|
||
<view>
|
||
<u-popup v-model="showPop" mode="center" :border-radius="16" @close="close">
|
||
<view class="bg-white spec">
|
||
<view class="shop-title bold-600 u-padding-left-40 w-full">商品标题</view>
|
||
<view class="u-m-l-40">
|
||
<scroll-view scroll-y="true" scroll-with-animation="true" style="height: 500rpx;">
|
||
<view>
|
||
<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
|
||
<view class="row wrap">
|
||
<view class="attr-list active">要葱</view>
|
||
<view class="attr-list">要香菜</view>
|
||
<view class="attr-list">葱和香菜多要</view>
|
||
<view class="attr-list">葱和香菜不要</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="attr nr u-m-t-52 u-m-b-20">口味</view>
|
||
<view class="row wrap">
|
||
<view class="attr-list">要葱</view>
|
||
<view class="attr-list">要香菜</view>
|
||
<view class="attr-list">葱和香菜多要</view>
|
||
<view class="attr-list">葱和香菜不要</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="attr nr u-m-t-52 u-m-b-20">口味</view>
|
||
<view class="row wrap">
|
||
<view class="attr-list">要葱</view>
|
||
<view class="attr-list">要香菜</view>
|
||
<view class="attr-list">葱和香菜多要</view>
|
||
<view class="attr-list">葱和香菜不要</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="mt20">
|
||
<view class="u-m-l-40">已选规格：</view>
|
||
<view class="row u-row-center mt20">
|
||
<view class="w-30 u-m-r-25">
|
||
<u-button @click="mobileLogin" hover-class="none" :customStyle="{color: '#000', border: '1px solid #000', padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">取消</u-button>
|
||
</view>
|
||
<view class="w-30 u-m-l-25">
|
||
<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">确定</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "shop-spec",
|
||
props: {
|
||
value: {
|
||
type: Boolean,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mobile: ''
|
||
};
|
||
},
|
||
methods: {
|
||
close() {
|
||
this.showPop = false
|
||
this.$emit('close')
|
||
}
|
||
},
|
||
computed: {
|
||
showPop: {
|
||
get() {
|
||
return this.value
|
||
},
|
||
set(val) {
|
||
this.$emit('input', val)
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.spec {
|
||
width: 600rpx;
|
||
height: 800rpx;
|
||
|
||
.shop-title {
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 36rpx;
|
||
background-color: #FAFAFA;
|
||
}
|
||
|
||
.attr {
|
||
color: #212425;
|
||
}
|
||
|
||
.attr-list {
|
||
color: #37393B;
|
||
background-color: #F9F9F9;
|
||
margin: 0 10rpx 10rpx 0;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #F6F6F7;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.active {
|
||
border: 2rpx solid #FE6004;
|
||
color: #FE6004;
|
||
}
|
||
|
||
.w-30 {
|
||
width: 30%;
|
||
}
|
||
}
|
||
</style> |