118 lines
3.9 KiB
Vue
118 lines
3.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="use">可使用优惠券</view>
|
|
<view class="u-m-b-32">
|
|
<u-checkbox-group style="width: 100%;">
|
|
<view class="use-block u-relative u-p-24">
|
|
<view class="coupon u-absolute top-0 left-0">优券</view>
|
|
<view class="row-between">
|
|
<view class="u-m-t-22">
|
|
<view class="md bold">神优惠券</view>
|
|
<view class="sm u-m-t-8">有效期至2025.04.26</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="primary u-text-center">
|
|
<price-format :subscript-size="34" :first-size="60" :second-size="50" :price="3" :weight="500"></price-format>
|
|
<view>
|
|
满20可用
|
|
</view>
|
|
</view>
|
|
<view class="u-m-l-32">
|
|
<u-checkbox v-model="checked" shape="circle" active-color="#FD414B"></u-checkbox>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dashed u-m-t-22 u-m-b-22"></view>
|
|
<view class="desc">
|
|
限商品现价+打包费-所有优惠金额满20元使用
|
|
</view>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</view>
|
|
|
|
<view class="not-use u-m-t-32">不可使用优惠券</view>
|
|
<view class="opacity5 u-m-b-32">
|
|
<u-checkbox-group style="width: 100%;" :disabled="true">
|
|
<view class="use-block u-relative u-p-24">
|
|
<view class="coupon u-absolute top-0 left-0">优券</view>
|
|
<view class="row-between">
|
|
<view class="u-m-t-22">
|
|
<view class="md bold">神优惠券</view>
|
|
<view class="sm u-m-t-8">有效期至2025.04.26</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="primary u-text-center">
|
|
<price-format :subscript-size="34" :first-size="60" :second-size="50" :price="3" :weight="500"></price-format>
|
|
<view>
|
|
满20可用
|
|
</view>
|
|
</view>
|
|
<view class="u-m-l-32">
|
|
<u-checkbox v-model="checked" shape="circle" active-color="#FD414B"></u-checkbox>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dashed u-m-t-22 u-m-b-22"></view>
|
|
<view class="desc">
|
|
限商品现价+打包费-所有优惠金额满20元使用
|
|
</view>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
checked: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
margin: 24rpx;
|
|
}
|
|
.use,
|
|
.not-use {
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
|
|
.use-block {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.coupon {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #fff;
|
|
width: 73rpx;
|
|
height: 37rpx;
|
|
background: linear-gradient( 90deg, #FE7702 0%, #FF27B9 100%);
|
|
border-radius: 20rpx 0rpx 20rpx 0rpx
|
|
}
|
|
|
|
.dashed {
|
|
border: 2rpx dashed #D6D1D3;
|
|
}
|
|
|
|
.desc {
|
|
color: #858687;
|
|
}
|
|
}
|
|
|
|
.opacity5 {
|
|
opacity: .5;
|
|
}
|
|
</style> |