开门红需求-电投提示:UI样式调整 --提交人:阳华祥

This commit is contained in:
yang.huaxiang
2020-11-13 11:24:00 +08:00
parent fba510b83f
commit 86f72aa58a
3 changed files with 150 additions and 36 deletions

View File

@@ -33,25 +33,32 @@
</div>
</div>
<van-dialog v-model="active_show" :show-confirm-button="false">
<div class="pl20 pr20 mt20">
<p class="fs14 black">请选择</p>
<van-radio-group v-model="active_radio">
<van-radio name="1" icon-size="14px" class="radio_class">
<div class="flex justify-content-fs align-items-c pl10 fs18">
<van-image round width="1.5rem" height="1.5rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<div class="fs18 fwb pl10">开门红产品</div>
<van-dialog v-model="active_show" :show-confirm-button="false" class="dialog_class">
<div class="flex justify-content-fe">
<van-image :src="this.$assetsUrl + 'images/kmh/cancel.png'" class="fr mt15 mr15 icon_image" @click="active_show = false"></van-image>
</div>
<div class="pl20 pr20 mt30">
<p class="fs16 black fw400">请选择</p>
<van-radio-group v-model="active_radio" style="align-items: center;">
<van-radio name="1" class="radio_class ml60">
<template #icon="props">
<img class="img-icon radio_icon_image" :src="props.checked ? checkedUrl : noCheckedUrl" />
</template>
<div class="flex justify-content-fs align-items-c pl5">
<div class="fs16 fw400">开门红产品</div>
</div>
</van-radio>
<van-radio name="2" icon-size="14px" class="radio_class">
<div class="flex justify-content-fs align-items-c pl10 fs18">
<van-image round width="1.5rem" height="1.5rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<div class="fs18 fwb pl10">普通产品</div>
<van-radio name="2" class="radio_class ml60">
<template #icon="props">
<img class="img-icon radio_icon_image" :src="props.checked ? checkedUrl : noCheckedUrl" />
</template>
<div class="flex justify-content-fs align-items-c pl5">
<div class="fs16 fw400">普通产品</div>
</div>
</van-radio>
</van-radio-group>
<div class="flex justify-content-c bg-white mt20 mb20 align-items-c">
<van-button type="danger" size="normal" class="dialog-comfirm-button" @click="comfirmCheckActive" v-no-more-click="1000">确认</van-button>
<div class="flex justify-content-c bg-white mt20 mb40 align-items-c">
<van-button type="danger" class="dialog-comfirm-button" @click="comfirmCheckActive" v-no-more-click="1000">确认</van-button>
</div>
</div>
</van-dialog>
@@ -89,7 +96,9 @@ export default {
isFrom: localStorage.isFrom,
salePageFlag: '3',
active_show: false,
active_radio: ''
active_radio: '1',
checkedUrl: this.$assetsUrl + 'images/kmh/kmhCheked.png',
noCheckedUrl: this.$assetsUrl + 'images/kmh/kmhNoCheked.png'
}
},
components: {
@@ -459,6 +468,7 @@ export default {
}
</script>
<style lang="scss" scoped>
@import '@/assets/sass/variables.scss';
.select-product-container {
.border-dotted {
border: 1px dashed #999;
@@ -477,12 +487,27 @@ export default {
font-size: 15px;
}
.radio_class {
height: 80px;
border-bottom: 1px solid #8e8d8d;
height: 60px;
}
.dialog-comfirm-button {
width: 50%;
width: 167px;
height: 36px;
line-height: 36px;
border-radius: 6px;
text-align: center;
vertical-align: center;
}
.icon_image {
width: 12px;
height: 12px;
}
.radio_icon_image {
width: 16px;
height: 16px;
padding-top: 3px;
}
.dialog_class {
width: 290px;
}
}
</style>