<template>
	<view class="container">
		<view class="containertop">
			<view class="containertopbox">
				<view class="containertopboxone flex-start">
					<view>可使用红包</view>
					<text>200张</text>
				</view>
				<view class="containertopboxitem flex-start">
					<view class="containertopboxitemleft">
						
					</view>
					<view class="containertopboxitemright">

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		}
	};
</script>

<style scoped lang="scss">
	.container {
		.containertop {
			padding: 48rpx 32rpx;

			.containertopbox {
				.containertopboxone {
					view {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					text {
						margin-left: 12rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						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;
					}
				}

			}
		}
	}
</style>