nurseWeChatAppletUI/pages/coupon/coupon.vue

<template>
	<view class="app">
		<view class="tabs">
			<view class="tab-item">
				<view class="title">
					卷
				</view>
				<view class="text">
					2张
				</view>
			</view>
		</view>
		<view class="content">
			<view class="statuss">
				<view class="statusitem">
					待领取
				</view>
				<span> |</span>
				<view class="statusitem">
					已使用
				</view>
				<span> |</span>
				<view class="statusitem">
					已过期
				</view>
			</view>
			<view class="rollup">
				<view class="item">
					<view class="top">
						<view class="title">
							<span class="text">
								￥
							</span>
							<span class="price">
								6
							</span>
						</view>
						<view class="what">
							商品优惠卷
						</view>
						<view class="texts">
							满60可用
						</view>
						<view class="time">
							有效期至 2023.02.28 23:59
						</view>
						<view class="btn">
							领取
						</view>
					</view>
					<view class="bottom">
						领取来源：首页新人福利
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.app {
		padding: 0;

		.content {
			width: 96%;
			margin: 20rpx auto 0;
			background-color: #fff;
			padding-bottom: 100rpx;

			.rollup {
				border-radius: 5rpx;

				.item {
					width: 94%;
					height: 240rpx;
					margin: 20rpx auto 0;
					border: 1rpx solid #f4f5f7;

					.bottom {
						font-size: 22rpx;
						color: #969394;
						line-height: 60rpx;
						padding-left: 25rpx;
					}

					.top {
						width: 100%;
						height: 180rpx;
						background: #FDE9E8;
						position: relative;
						color: #F44B2F;

						.what {
							width: 120rpx;
							height: 40rpx;
							background: #FED1D2;
							border-radius: 16rpx;
							font-size: 20rpx;
							line-height: 40rpx;
							text-align: center;
							position: absolute;
							top: 120rpx;
							left: 40rpx;
						}

						.btn {
							width: 98rpx;
							height: 50rpx;
							border: 2rpx solid #F44B2F;
							border-radius: 24rpx;
							font-size: 24rpx;
							position: absolute;
							top: 70rpx;
							right: 40rpx;
							text-align: center;
							line-height: 49rpx;
						}

						.time {
							font-size: 24rpx;
							position: absolute;
							top: 120rpx;
							left: 200rpx;
						}

						.texts {
							font-size: 34rpx;
							font-weight: 800;
							position: absolute;
							top: 44rpx;
							left: 200rpx;
						}

						.title {
							position: absolute;
							top: 30rpx;
							left: 50rpx;

							.price {
								font-size: 60rpx;
								font-weight: 700;
							}

							.text {
								font-weight: 600;
								font-size: 34rpx;
							}
						}
					}
				}

			}

			.statuss {
				padding-top: 25rpx;

				span {
					color: #c1c1c1;
					font-size: 18rpx;
					line-height: 60rpx;
				}

				.statusitem {
					text-align: center;
					padding: 0 40rpx;
					display: inline-block;
					height: 60rpx;
					font-size: 30rpx;
					color: #969394;
					line-height: 60rpx;
				}
			}
		}

		.tabs {
			width: 100%;

			.tab-item {
				margin: 20rpx 0 0 24rpx;
				text-align: center;
				width: 20%;

				.text {
					width: 70%;
					margin-left: 15%;
					height: 30rpx;
					background: #F44B2F;
					border-radius: 9rpx;
					color: #fff;
					font-size: 24rpx;
					line-height: 30rpx;
				}

				.title {
					font-size: 40rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #F44B2F;
					line-height: 59rpx;
				}
			}
		}
	}
</style>