11

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{
+				.containertopboxone {
-					view{
+					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;
+					}
+				}
+
 			}
 		}
 	}