From 007d9e4336985d32c269e545caa800ca3d73169d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=95=BE?= <1144797966@qq.com>
Date: Tue, 16 Apr 2024 10:22:03 +0800
Subject: [PATCH] 11

---
 pages/index/coupons/index.vue | 65 ++++++++++++++++++++++++++++++++---
 1 file changed, 61 insertions(+), 4 deletions(-)

diff --git a/pages/index/coupons/index.vue b/pages/index/coupons/index.vue
index 49c12d8..23e9468 100644
--- a/pages/index/coupons/index.vue
+++ b/pages/index/coupons/index.vue
@@ -4,7 +4,15 @@
 			<view class="containertopbox">
 				<view class="containertopboxone flex-start">
 					<view>可使用红包</view>
-					<view>200张</view>
+					<text>200张</text>
+				</view>
+				<view class="containertopboxitem flex-start">
+					<view class="containertopboxitemleft">
+						
+					</view>
+					<view class="containertopboxitemright">
+
+					</view>
 				</view>
 			</view>
 		</view>
@@ -25,14 +33,15 @@
 			padding: 48rpx 32rpx;
 
 			.containertopbox {
-				.containertopboxone{
-					view{
+				.containertopboxone {
+					view {
 						font-family: Source Han Sans CN, Source Han Sans CN;
 						font-weight: 500;
 						font-size: 32rpx;
 						color: #333333;
 					}
-					text{
+
+					text {
 						margin-left: 12rpx;
 						font-family: Source Han Sans CN, Source Han Sans CN;
 						font-weight: 400;
@@ -40,6 +49,54 @@
 						color: #666666;
 					}
 				}
+
+				.containertopboxitem {
+					width: 100%;
+					position: relative;
+
+					::after {
+						content: '';
+						position: absolute;
+						top: -16rpx;
+						left: 166rpx;
+						background: #f9f9f9;
+						display: inline-block;
+						width: 32rpx;
+						height: 32rpx;
+						border-radius: 50%;
+					}
+
+					::before {
+						content: '';
+						position: absolute;
+						bottom: 0rpx;
+						left: 166rpx;
+						background: #f9f9f9;
+						display: inline-block;
+						width: 32rpx;
+						height: 16rpx;
+						line-height: 32rpx;
+						border-radius: 32rpx 32rpx 0 0;
+
+					}
+
+					.containertopboxitemleft {
+						width: 182rpx;
+						height: 192rpx;
+						background: #F1CB66;
+						border-radius: 18rpx 0rpx 0rpx 18rpx;
+						box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
+					}
+
+					.containertopboxitemright {
+						flex: auto;
+						height: 192rpx;
+						background: #FFFFFF;
+						box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
+						border-radius: 0rpx 18rpx 18rpx 0rpx;
+					}
+				}
+
 			}
 		}
 	}