You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.3 KiB
107 lines
2.3 KiB
<template>
|
|
<view class="content">
|
|
<view class="card" :class="'bg-color'+ (item+1)" v-for="item in 3" :key="item">
|
|
<view>
|
|
<text class="title">套餐一：实实用用</text>
|
|
<text class="label">6.5折</text>
|
|
</view>
|
|
<view class="lf-m-t-12 lf-font-24 lf-row-between">
|
|
<view class="lf-color-777">红线数：</view>
|
|
<view class="lf-color-222">1根</view>
|
|
</view>
|
|
<view class="lf-m-t-12 lf-font-24 lf-row-between">
|
|
<view class="lf-color-777">有效时间：</view>
|
|
<view class="lf-color-222">3天</view>
|
|
</view>
|
|
<view class="lf-m-t-16 lf-row-between">
|
|
<view>
|
|
<lf-price :price="30.12" color="#E21196"></lf-price>
|
|
<text class="original-price">¥30.00</text>
|
|
</view>
|
|
<view class="btn" hover-class="lf-opacity">立即购买</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lfPrice from '@/components/lf-price/lf-price.vue'
|
|
export default {
|
|
components: { lfPrice },
|
|
data(){
|
|
return {
|
|
|
|
}
|
|
},
|
|
onLoad(){
|
|
// 点击买字按钮直接调取支付
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.content{
|
|
width: 750rpx;
|
|
height: max-content;
|
|
padding: 30rpx 32rpx;
|
|
box-sizing: border-box;
|
|
.card{
|
|
width: 686rpx;
|
|
height: max-content;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.07);
|
|
border-radius: 10rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
&:nth-child(n+2){
|
|
margin-top: 30rpx;
|
|
}
|
|
.title{
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
margin-right: 15rpx;
|
|
}
|
|
.label{
|
|
display: inline-block;
|
|
width: 84rpx;
|
|
height: 33rpx;
|
|
border-radius: 3rpx;
|
|
border: 2rpx solid #E21196;
|
|
font-size: 24rpx;
|
|
color: #E21196;
|
|
text-align: center;
|
|
line-height: 29rpx;
|
|
}
|
|
.original-price{
|
|
margin-left: 15rpx;
|
|
color: #777777;
|
|
font-size: 24rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
.btn{
|
|
width: 130rpx;
|
|
height: 43rpx;
|
|
background: linear-gradient(180deg, #FE3EA5 0%, #FE7350 100%);
|
|
border-radius: 22rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.bg-color1{
|
|
background-color: #FFF7FC;
|
|
}
|
|
.bg-color2{
|
|
background-color: #FFF4F2;
|
|
}
|
|
.bg-color3{
|
|
background-color: #F2FAFF;
|
|
}
|
|
}
|
|
</style>
|