blindDate/pages/my/getRedLine.vue

<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>