wangxiaowei/jianbing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面

Browse Source
This commit is contained in:
wangxiaowei
2025-08-11 14:06:42 +08:00
parent 462073058e
commit 9c0be00fbd
31 changed files with 1180 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

472
bundle/pages/coupon/coupon.vue
View File

@ -1,199 +1,331 @@
<template>
<view class="coupon">
<view>
<u-tabs :list="tab" :is-scroll="false" :current="current" @change="change" :active-color="themeColor" height="96"></u-tabs>
</view>
<mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
<view class="content">
<view class="bg-white u-p-b-36 rounded-20">
<view class="title row-between" @click="toCouponList">
<view>优惠券</view>
<view>
可用 <text class="num">13</text> 张
<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
</view>
</view>
<view class="u-relative" v-if="current === 0">
<view class="package u-text-center u-p-t-22 u-p-b-28">
<view class="bold-500">超级省钱券包</view>
<view>超值权益一单回本</view>
</view>
<view class="list u-absolute left-0 right-0">
<view class="block br20">
<view class="row-between">
<view>
<view class="row">
<u-image :src="cloudPath + 'img/icon_package1.png'" width="34" height="28"></u-image>
<view class="text-333 u-m-l-10 nr">券包</view>
</view>
<view class="text-755023 xs u-m-t-10">
<text>2元最低可抵111元/共<text class="primary">1</text>张券</text>
</view>
</view>
<view class="u-relative">
<u-image :src="cloudPath + 'img/icon_package2.png'" width="220" height="60"></u-image>
<view class="text-755023 u-absolute price xs">￥2.00</view>
</view>
<view class="u-m-l-32">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
<view class="scroll-view-item_H coupon" v-for="(item, index) in couponList" :key="index">
<view class="coupon-top">
<text>满减券x{{item.num}}</text>
</view>
<view class="coupon-bg u-m-t-32">
<view class="xxs u-text-center u-p-t-4 text-845F2E">满减券x1</view>
<view class="bold-600 u-text-center u-p-t-26">
<price-format color="#FF0000" :price="121.99" :subscriptSize="32" :firstSize="52" :secondSize="52"></price-format>
</view>
<view class="text-D8A658 u-text-center u-p-t-32">满11元可用</view>
<view class="u-m-t-50 u-text-center primary">
<price-format :subscript-size="34" :first-size="60" :second-size="50" :price="item.price" :weight="500"></price-format>
</view>
<view class="dashed"></view>
<view class="coupon-tips">
满{{item.full_price}}元可用
</view>
</view>
</scroll-view>
</view>
<view class="coupon-btn">领取优惠券</view>
</view>
<view class="bg-white u-p-b-36 rounded-20 u-m-t-24">
<view class="title row-between" @click="toCouponPackage">
<view>优惠券包</view>
<view>
可用 <text class="num">13</text> 张
<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
</view>
</view>
<view class="coupon-list u-m-t-12" v-if="current === 1">
<view class="coupon-list-bg row-between" v-for="(item, index) in list" :key="index">
<view class="row-start row-column u-row-center u-text-center">
<view>
<price-format :color="themeColor" :price="item.money" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
<view class="u-m-l-32">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
<view class="scroll-view-item_H coupon2" v-for="(item, index) in couponPackageList" :key="index">
<view class="coupon-top2">
<text>优惠券专享</text>
</view>
<view class="full">{{ item.use_condition }}</view>
</view>
<view class="flex1 u-m-l-80 row-between">
<view>
<view class="coupon-text bold-600">优惠券</view>
<view class="xs u-m-t-20 date">有效期 {{ item.use_time_tips }}天</view>
<view class="unit">
<view>{{item.price}}</view>
<view>元</view>
<view class="u-m-l-10 u-m-r-10">x</view>
<view>{{item.num}}</view>
<view>张</view>
</view>
<view>
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
<view class="coupon-tips2">
{{item.full_price == 0 ? '无门槛' : '满' + item.full_price + '元可用'}}
</view>
</view>
</scroll-view>
</view>
</view>
<view class="bg-white u-p-b-36 rounded-20 u-m-t-24">
<view class="title row-between" @click="toCouponExchange">
<view>兑换券</view>
<view>
可用 <text class="num">13</text> 张
<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
</view>
</view>
</mescroll-body>
<view class="u-m-l-32">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
<view class="scroll-view-item_H coupon" v-for="(item, index) in 10" :key="index">
<view class="coupon-top">
<text>满减券x1</text>
</view>
<view class="u-m-t-50 u-text-center primary">
<price-format :subscript-size="34" :first-size="60" :second-size="50" :price="18" :weight="500"></price-format>
</view>
<view class="dashed"></view>
<view class="coupon-tips">
满11元可用
</view>
</view>
</scroll-view>
</view>
<view class="coupon-btn">立即兑换</view>
</view>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
import { getCoupon } from "@/api/user"
import { getCouponList } from '@/api/activity';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
import { getCoupon } from "@/api/user"
import { getCouponList } from '@/api/activity'
export default {
mixins: [MescrollMixin],
data() {
return {
tab: [
{
name: '购买'
},
{
name: '兑换'
}
],
current: 0,
upOption:{
noMoreSize: 4,
empty:{
tip: '~ 空空如也 ~', // 提示
btnText: '',
},
textNoMore: '没有更多了'
export default {
mixins: [MescrollMixin],
data() {
return {
tab: [
{
name: '购买'
},
list: []
}
{
name: '兑换'
}
],
current: 0,
upOption: {
noMoreSize: 4,
empty: {
tip: '~ 空空如也 ~', // 提示
btnText: '',
},
textNoMore: '没有更多了'
},
list: [],
couponList: [
{price: 2, full_price: 9, num: 1},
{price: 3, full_price: 15, num: 3},
{price: 4, full_price: 18, num: 4},
{price: 2, full_price: 0, num: 4},
],
couponPackageList: [
{price: 2, full_price: 9, num: 1},
{price: 3, full_price: 15, num: 3},
{price: 4, full_price: 18, num: 4},
{price: 2, full_price: 0, num: 4},
]
}
},
methods: {
change(index) {
this.current = index
},
methods: {
change(index) {
this.current = index
},
// 初始化数据
upCallback(page) {
getCouponList({
page: page.num,
current: this.current,
}).then(res => {
const {data} = res
this.mescroll.endSuccess(data.length, data.totalPages);
//设置列表数据
if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
this.list = this.list.concat(data); //追加新数据
}).catch(()=>{
this.mescroll.endErr();
})
},
// 初始化数据
upCallback(page) {
getCouponList({
page: page.num,
current: this.current,
}).then(res => {
const { data } = res
this.mescroll.endSuccess(data.length, data.totalPages);
//设置列表数据
if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
this.list = this.list.concat(data); //追加新数据
}).catch(() => {
this.mescroll.endErr();
})
},
// 优惠券列表
toCouponList() {
uni.navigateTo({ url: '/bundle/pages/coupon/coupon_list' })
},
// 优惠券包列表
toCouponPackage() {
uni.navigateTo({ url: '/bundle/pages/coupon/coupon_package' })
},
// 兑换券列表
toCouponExchange() {
uni.navigateTo({ url: '/bundle/pages/coupon/coupon_exchange' })
}
}
}
</script>
<style lang="scss">
.text-755023 {color: #755023;}
.text-845F2E {color: #845F2E;}
.text-D8A658 {color: #D8A658;}
.coupon {
.package {
background-color: #2D2622;
height: 180rpx;
.rounded-20 {
border-radius: 20rpx;
}
& > view:first-child {
font-size: 64rpx;
background: linear-gradient(90deg, #FDE0B4 0%, #FFC07F 100%);
letter-spacing: 1px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
& > view:last-child {
font-size: 30rpx;
background: linear-gradient(270deg, #FDE0B4 0%, #FFC07F 100%);
letter-spacing: 1px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.list {
background-color: #F6F6F6;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
top: 160rpx;
padding: 30rpx 24rpx;
.block {
height: 386rpx;
background: #FBE9CC;
border: 2rpx solid #E0B66C;
padding: 24rpx 36rpx 24rpx;
.price {
left: 22rpx;
top: 50%;
transform: translateY(-50%);
}
.coupon-bg {
width: 207rpx;
height: 196rpx;
background: url(#{$cloudPath}img/icon_package3.png) no-repeat;
background-size: cover;
}
}
}
.coupon-list {
.coupon-list-bg {
height: 176rpx;
background: url(#{$cloudPath}img/icon_coupon2.png) no-repeat;
background-size: cover;
margin: 0 32rpx 32rpx;
padding: 0 32rpx;
.full {
font-size: 20rpx;
color: rgba(0, 0, 0, .4);
}
.coupon-text {
color: #1D2129;
font-size: 40rpx;
}
.date {
color: rgba(0, 0, 0, .4);
}
}
}
}
.content {
margin: 26rpx;
}
.title {
padding: 26rpx 32rpx;
}
.num {
color: #E80E0F;
margin: 0 10rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item_H {
display: inline-block;
width: 206rpx;
height: 196rpx;
}
.coupon {
position: relative;
background: #FFF5F3;
border-radius: 8px;
margin-right: 22rpx;
height: 100px;
}
.coupon::before,
.coupon::after {
content: "";
position: absolute;
top: 70%;
width: 32rpx;
/* 控制凹口大小 */
height: 32rpx;
background: #fff;
/* 与页面背景色一致 */
border-radius: 50%;
transform: translateY(-70%);
z-index: 2;
}
.coupon::before {
left: -16rpx;
}
.coupon::after {
right: -16rpx;
}
.coupon-top {
width: 165rpx;
height: 40rpx;
background: linear-gradient( 180deg, #FC7001 0%, #FE00B0 100%);
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
text-align: center;
border-bottom-left-radius: 24rpx;
border-bottom-right-radius: 24rpx;
color: #fff;
font-size: 22rpx;
line-height: 40rpx;
}
.dashed {
position: absolute;
top: 66%;
left: 0;
right: 0;
transform: translateY(-66%);
border: 2rpx dashed #E0B66C;
}
.coupon-tips {
color: #E0B66C;
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -90%);
font-size: 22rpx;
}
.coupon-btn {
width: 554rpx;
height: 68rpx;
font-size: 28rpx;
line-height: 68rpx;
font-weight: 400;
color: #fff;
text-align: center;
margin: 44rpx auto 0;
background: linear-gradient( 90deg, #FC680E 0%, #FE02AC 100%);
border-radius: 116rpx 116rpx 116rpx 116rpx;
}
.coupon2 {
margin-right: 20rpx;
position: relative;
width: 258rpx;
height: 161rpx;
background: #FFF5F3;
border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.curved-rect {
width: 258rpx;
height: 64rpx;
}
.coupon-top2 {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 136rpx;
height: 30rpx;
background: #FFEBE3;
text-align: center;
border-bottom-left-radius: 24rpx;
border-bottom-right-radius: 24rpx;
color: #F1BFB6;
font-size: 22rpx;
line-height: 27rpx;
}
.unit {
display: flex;
justify-content: center;
align-items: center;
font-size: 40rpx;
color: #F90004;
font-weight: 600;
margin-top: 40rpx;
text-align: center;
}
.coupon-tips2 {
background-image: url('/static/coupon_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 66rpx;
text-align: center;
padding-top: 20rpx;
color: #fff;
}
</style>

198
bundle/pages/coupon/coupon_20250718.vue Normal file
View File

@ -0,0 +1,198 @@
<template>
<view class="coupon">
<view>
<u-tabs :list="tab" :is-scroll="false" :current="current" @change="change" :active-color="themeColor" height="96"></u-tabs>
</view>
<mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
<view class="u-relative" v-if="current === 0">
<view class="package u-text-center u-p-t-22 u-p-b-28">
<view class="bold-500">超级省钱券包</view>
<view>超值权益一单回本</view>
</view>
<view class="list u-absolute left-0 right-0">
<view class="block br20">
<view class="row-between">
<view>
<view class="row">
<u-image :src="cloudPath + 'img/icon_package1.png'" width="34" height="28"></u-image>
<view class="text-333 u-m-l-10 nr">券包</view>
</view>
<view class="text-755023 xs u-m-t-10">
<text>2元最低可抵111元/共<text class="primary">1</text>张券</text>
</view>
</view>
<view class="u-relative">
<u-image :src="cloudPath + 'img/icon_package2.png'" width="220" height="60"></u-image>
<view class="text-755023 u-absolute price xs">￥2.00</view>
</view>
</view>
<view class="coupon-bg u-m-t-32">
<view class="xxs u-text-center u-p-t-4 text-845F2E">满减券x1</view>
<view class="bold-600 u-text-center u-p-t-26">
<price-format color="#FF0000" :price="121.99" :subscriptSize="32" :firstSize="52" :secondSize="52"></price-format>
</view>
<view class="text-D8A658 u-text-center u-p-t-32">满11元可用</view>
</view>
</view>
</view>
</view>
<view class="coupon-list u-m-t-12" v-if="current === 1">
<view class="coupon-list-bg row-between" v-for="(item, index) in list" :key="index">
<view class="row-start row-column u-row-center u-text-center">
<view>
<price-format :color="themeColor" :price="item.money" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
</view>
<view class="full">{{ item.use_condition }}</view>
</view>
<view class="flex1 u-m-l-80 row-between">
<view>
<view class="coupon-text bold-600">优惠券</view>
<view class="xs u-m-t-20 date">有效期 {{ item.use_time_tips }}天</view>
</view>
<view>
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
</view>
</view>
</view>
</view>
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
import { getCoupon } from "@/api/user"
import { getCouponList } from '@/api/activity';
export default {
mixins: [MescrollMixin],
data() {
return {
tab: [
{
name: '购买'
},
{
name: '兑换'
}
],
current: 0,
upOption:{
noMoreSize: 4,
empty:{
tip: '~ 空空如也 ~', // 提示
btnText: '',
},
textNoMore: '没有更多了'
},
list: []
}
},
methods: {
change(index) {
this.current = index
},
// 初始化数据
upCallback(page) {
getCouponList({
page: page.num,
current: this.current,
}).then(res => {
const {data} = res
this.mescroll.endSuccess(data.length, data.totalPages);
//设置列表数据
if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
this.list = this.list.concat(data); //追加新数据
}).catch(()=>{
this.mescroll.endErr();
})
},
}
}
</script>
<style lang="scss">
.text-755023 {color: #755023;}
.text-845F2E {color: #845F2E;}
.text-D8A658 {color: #D8A658;}
.coupon {
.package {
background-color: #2D2622;
height: 180rpx;
& > view:first-child {
font-size: 64rpx;
background: linear-gradient(90deg, #FDE0B4 0%, #FFC07F 100%);
letter-spacing: 1px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
& > view:last-child {
font-size: 30rpx;
background: linear-gradient(270deg, #FDE0B4 0%, #FFC07F 100%);
letter-spacing: 1px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.list {
background-color: #F6F6F6;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
top: 160rpx;
padding: 30rpx 24rpx;
.block {
height: 386rpx;
background: #FBE9CC;
border: 2rpx solid #E0B66C;
padding: 24rpx 36rpx 24rpx;
.price {
left: 22rpx;
top: 50%;
transform: translateY(-50%);
}
.coupon-bg {
width: 207rpx;
height: 196rpx;
background: url(#{$cloudPath}img/icon_package3.png) no-repeat;
background-size: cover;
}
}
}
.coupon-list {
.coupon-list-bg {
height: 176rpx;
background: url(#{$cloudPath}img/icon_coupon2.png) no-repeat;
background-size: cover;
margin: 0 32rpx 32rpx;
padding: 0 32rpx;
.full {
font-size: 20rpx;
color: rgba(0, 0, 0, .4);
}
.coupon-text {
color: #1D2129;
font-size: 40rpx;
}
.date {
color: rgba(0, 0, 0, .4);
}
}
}
}
</style>

89
bundle/pages/coupon/coupon_exchange.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<view class="content">
<view class="item row">
<view class="price">
<view class="primary">
<price-format :subscript-size="40" :first-size="70" :second-size="70" :price="18"></price-format>
</view>
<view class="full">满20元可用</view>
</view>
<view class="dashed"> </view>
<view class="flex1 u-m-l-40 row-between">
<view>
<view class="title">优惠券</view>
<view class="u-m-t-20 full">有效期3天</view>
</view>
<view class="exchange">立即兑换</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.content {
margin: 24rpx 24rpx 0;
padding-bottom: 12rpx;
}
.item {
position: relative;
width: 100%;
height: 176rpx;
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 24rpx;
box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.04);
padding: 24rpx;
}
.item::before,
.item::after {
content: "";
position: absolute;
left: 210rpx;
width: 20rpx;
height: 20rpx;
background: #F6F6F6;
border-radius: 50%;
z-index: 2;
}
.item::before {
top: -10rpx;
}
.item::after {
bottom: -10rpx;
}
.price {
width: 194rpx;
text-align: center;
}
.full {
color: rgba(0,0,0,0.4);
}
.dashed {
border-right: 2px dashed #254062;
height: 176rpx;
}
.title {
font-size: 40rpx;
font-weight: 600;
}
.exchange {
width: 159rpx;
height: 56rpx;
line-height: 56rpx;
background: #FD414B;
border-radius: 28rpx;
color: #fff;
text-align: center;
}
</style>

118
bundle/pages/coupon/coupon_list.vue Normal file
View File

@ -0,0 +1,118 @@
<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>

143
bundle/pages/coupon/coupon_package.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<view class="content">
<view class="item row-between" v-for="(item, index) in 10" :key="index">
<view class="coupon2">
<view class="coupon-top2">
<text>优惠券专享</text>
</view>
<view class="unit">
<view>5</view>
<view>元</view>
<view class="u-m-l-10 u-m-r-10">x</view>
<view>6</view>
<view>张</view>
</view>
<view class="coupon-tips2">
满11元可用
</view>
</view>
<view class="u-m-l-18 flex1 row-between">
<view>
<view class="xl bold-600">30元神券包</view>
<view class="surprise">惊喜折扣减12元</view>
<view class="row u-m-t-38">
<view class="primary">
<price-format :subscript-size="26" :first-size="40" :second-size="40" :price="18" :weight="600"></price-format>
</view>
<view class="text-858386 u-m-l-8">
<price-format :subscript-size="22" :first-size="22" :second-size="22" :price="30" :weight="400"></price-format>
</view>
</view>
</view>
<view class="buy" style="align-self: flex-end;">购买</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
checked: false
}
}
}
</script>
<style lang="scss" scoped>
.bold-600 {
font-weight: 600;
}
.text-858386 {
color: #858386;
}
.content {
margin: 24rpx 24rpx 0;
padding-bottom: 12rpx;
}
.item {
width: 100%;
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 24rpx;
box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.04);
padding: 24rpx;
}
.coupon2 {
margin-right: 20rpx;
position: relative;
width: 258rpx;
height: 161rpx;
background: #FFF5F3;
border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.curved-rect {
width: 258rpx;
height: 64rpx;
}
.coupon-top2 {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 136rpx;
height: 30rpx;
background: #FFEBE3;
text-align: center;
border-bottom-left-radius: 24rpx;
border-bottom-right-radius: 24rpx;
color: #F1BFB6;
font-size: 22rpx;
line-height: 27rpx;
}
.unit {
display: flex;
justify-content: center;
align-items: center;
font-size: 40rpx;
color: #F90004;
font-weight: 600;
padding-top: 40rpx;
text-align: center;
}
.coupon-tips2 {
background-image: url('/static/coupon_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 66rpx;
text-align: center;
padding-top: 20rpx;
color: #fff;
}
.surprise {
width: 159rpx;
height: 31rpx;
line-height: 31rpx;
padding: 0 6rpx;
background-color: #FCEEED;
border-radius: 8rpx;
color: #EB441A;
text-align: center;
font-size: 20rpx;
}
.buy {
width: 159rpx;
height: 56rpx;
line-height: 56rpx;
background: #FD414B;
border-radius: 28rpx;
color: #fff;
text-align: center;
}
</style>