XEH-miniProgram/pages/self/coupon/detail.vue

<template>
	<view class="page-wrap">
		<view class="header-panel">
			<view class="price">38</view>
			<view class="text">三八女神节特惠券【通用券】</view>
			<view class="text">满100元可用</view>
			<view class="time">有效期：至 2023.12.31</view>
			<button class="btn">立即使用</button>
		</view>
		<view class="desc-panel">
			<view class="title">使用说明：</view>
			<view class="text">1、使用范围：所有品类可用。</view>
			<view class="text">2、可用于带<view class="tag">可用优惠券</view>标签的产品使用。</view>
			<view class="text">3、满足使用条件使用时，可享受对应的价格优惠。</view>
			<view class="text">4、一个订单仅限使用一张。</view>
			<view class="text">5、优惠券不能与其他优惠同时享用。</view>
			<view class="text">6、请注意使用日期，避免失效。</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	min-height: 100%;
	background: #fff;
}
.header-panel{
	height: 494.51rpx;
	background: #ff6e6e;
	text-align: center;
	color: #fff;
	.price{
		font-size: 137.36rpx;
		&:before{
			content: '￥';
			font-size: 76.92rpx;
		}
	}
	.text{
		font-size: 27.47rpx;
		line-height: 1.5;
		margin-bottom: 13.74rpx;
	}
	.time{
		font-size: 27.47rpx;
		color: #B63F40;
		line-height: 1.5;
		margin-bottom: 20.6rpx;
	}
	.btn{
		width: 384.62rpx;
		height: 89.29rpx;
		background: #fff;
		border: none;
		border-radius: 13.74rpx;
		font-size: 32.97rpx;
		color: #FF6E6E;
		line-height: 89.29rpx;
	}
}
.desc-panel{
	padding: 41.21rpx 31.59rpx;
	.title{
		font-size: 32.97rpx;
	}
	.text{
		font-size: 27.47rpx;
		word-break: break-all;
		line-height: 49.45rpx;
	}
	.tag{
		display: inline-block;
		font-size: 21.98rpx;
		color: #F97631;
		line-height: 34.34rpx;
		border: 1rpx solid #F97631;
		padding: 0 13.74rpx;
		vertical-align: text-bottom;
		margin: 0 13.74rpx;
	}
}
</style>