143 lines
3.2 KiB
Vue
143 lines
3.2 KiB
Vue
<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> |