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.
142 lines
3.0 KiB
142 lines
3.0 KiB
<template>
|
|
<view class="content">
|
|
<view class="card" v-for="item in 4" :key="item">
|
|
<view class="cover">
|
|
<lf-image src="https://picsum.photos/200"></lf-image>
|
|
<view class="tips">有效3天</view>
|
|
</view>
|
|
<view class="info">
|
|
<view>
|
|
<text class="title" v-if="item == 0">套餐一：实用</text>
|
|
<!-- <text class="title">套餐一：实用</text> -->
|
|
<text class="title" v-else>套餐一：实实用实用实用实用实用实用用</text>
|
|
<text class="label">6.5折</text>
|
|
</view>
|
|
<view class="lf-m-t-12 lf-font-24">
|
|
<text class="lf-color-777">红线数：</text>
|
|
<text>1根</text>
|
|
</view>
|
|
<view class="lf-m-t-16">
|
|
<lf-price :price="30.12" color="#E21196"></lf-price>
|
|
<text class="original-price">¥30.00</text>
|
|
</view>
|
|
<view class="float-btn" hover-class="lf-opacity">
|
|
<button>买</button>
|
|
</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;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.card{
|
|
width: 333rpx;
|
|
height: max-content;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx -2rpx 20rpx 2rpx rgba(0, 0, 0, 0.07);
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
margin-right: 20rpx;
|
|
&:nth-child(2n){
|
|
margin-right: 0;
|
|
}
|
|
&:nth-child(n+3){
|
|
margin-top: 20rpx;
|
|
}
|
|
.cover{
|
|
width: 100%;
|
|
height: 260rpx;
|
|
position: relative;
|
|
.tips{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 111rpx;
|
|
height: 33rpx;
|
|
background: linear-gradient(180deg, #FE3EA5 0%, #FE7350 100%);
|
|
border-radius: 10rpx 0rpx 5rpx 0rpx;
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.info{
|
|
padding: 15rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.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;
|
|
}
|
|
.float-btn{
|
|
position: absolute;
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
padding: 15rpx;
|
|
right: 0;
|
|
bottom: 10rpx;
|
|
box-sizing: content-box;
|
|
button{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: #E21196;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|