<template>
	<view class="content">
		<view class="towcontentitem">
			<image class="towcontentitemimage" src="@/static/1.png" mode="aspectFill"></image>
			<view class="fourcontentitemabsolute">
				年卡会员
			</view>
			<view class="towcontentitemone flex-start">
				<image class="towcontentitemoneimage" src="@/static/logo.png" mode="aspectFill"></image>
				<view class="towcontentitemonetext flex-colum-start">
					<text class="towcontentitemonetextone" style="color: #fff;">剪发卡</text>
					<text class="towcontentitemonetexttow" style="color: #fff;">保洁清洗卡</text>
				</view>
				<view class="towcontentitemoneabsolute">
					加购
				</view>
			</view>
			<view class="towcontentitemprogress">
				<!-- <u-line-progress :percentage="30" activeColor="#ff0000"></u-line-progress> -->
				续费
			</view>
			<view class="towcontentitemtow flex-between">
				<text class="towcontentitemtowetext" style="color: #fff;">VIP202304241154982648</text>
				<text class="towcontentitemtowetext" style="color: #fff;">保洁清洗卡</text>
			</view>
		</view>
		<view class="therecontentitem">
			<view class="therecontentitemtext">
				会员详情
			</view>
			<view class="therecontentitemone">
				<view class="therecontentitemoneiten flex-between" @click="order">
					<text class="therecontentitemoneitentetxt">账单明细</text>
					<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
				</view>
				<view class="therecontentitemoneiten flex-between" @click="overlayshow = true">
					<text class="therecontentitemoneitentetxt">账单明细</text>
					<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
				</view>
			</view>
		</view>
		<u-overlay :show="overlayshow" @click="overlayshow = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="onerect flex-center">
						<view>【洗剪吹】新娘造型</view>
						<u-icon @click="overlayshow = false" class="onerecticon" name="backspace" color="#000000"
							size="28"></u-icon>
					</view>
					<view class="towrect">
						商品
					</view>
					<view class="thererect flex-between">
						<view class="thererectone">
							年卡会员
						</view>
						<view class="thererecttow">
							<text>￥</text>300
						</view>
					</view>
					<view class="fourrect flex-between">
						<view class="fourrectone">
							<text>共计:</text>￥300
						</view>
						<view class="fourrecttow">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				overlayshow: false,
				numberbox: "",
			}
		},
		methods:{
			order(e) {
				uni.pro.navigateTo('my/order/index', {
					e: 0
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 32rpx 28rpx;

		.towcontentitem {
			margin-top: 22rpx;
			width: 100%;
			position: relative;
			padding: 32rpx;
			border-radius: 12rpx;

			.fourcontentitemabsolute {
				z-index: 9;
				position: absolute;
				right: 0;
				top: 0;
				padding: 6rpx 28rpx;
				font-size: 20rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
				background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
				border-radius: 0px 12rpx 0px 12rpx;
				opacity: 1;
			}

			.towcontentitemimage {
				top: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				z-index: 5;
			}

			.towcontentitemone {
				width: 100%;
				position: relative;
				z-index: 9;

				.towcontentitemoneimage {
					width: 76rpx;
					height: 76rpx;
				}

				.towcontentitemoneabsolute {
					position: absolute;
					padding: 8rpx 44rpx;
					right: 0;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
					box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
					border-radius: 28rpx;
				}

				.towcontentitemonetext {
					height: 76rpx;
					margin-left: 16rpx;

					.towcontentitemonetextone {
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #422A07;
					}

					.towcontentitemonetexttow {
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #422A07;
					}

				}
			}

			.towcontentitemprogressa {
				padding: 8rpx 44rpx;
				width: 50%;
				z-index: 10;
				position: relative;
				margin-top: 54rpx;
			}

			.towcontentitemprogress {
				margin-top: 24rpx;
				background: linear-gradient(318deg, #6E6E6E 0%, #404040 100%);
				box-shadow: 0px 4rpx 8rpx 2rpx #8D8D8D;
				border-radius: 28rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
			}

			.towcontentitemtow {
				z-index: 10;
				position: relative;
				margin-top: 68rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #422A07;
			}
		}

		.therecontentitem {
			margin-top: 32rpx;
			width: 100%;
			padding: 32rpx 32rpx 0 32rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.therecontentitemtext {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.therecontentitemone {
				.therecontentitemoneiten:nth-child(1) {
					border-top: none !important;
				}

				.therecontentitemoneiten {
					padding: 32rpx 0;
					border-top: 1px solid #F7F7F7;

					.therecontentitemoneitentetxt {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.warp {
			position: relative;
			height: 100%;

			.rect {
				position: absolute;
				bottom: 0;
				width: 100%;
				background: #FFFFFF;
				border-radius: 60rpx 60rpx 0px 0px;
				padding: 48rpx 32rpx 32rpx 32rpx;

				.onerect {
					position: relative;
					padding-bottom: 48rpx;

					image {
						width: 124rpx;
						height: 124rpx;
					}

					view {
						margin-left: 16rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #1A1A1A;
					}

					.onerecticon {
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				.towrect{
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.thererect{
					margin-top: 16rpx;
					.thererectone{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					.thererecttow{
						text{
							font-size: 16rpx;
						}
						font-size: 32rpx;
						font-family: PingFang SC-Heavy, PingFang SC;
						font-weight: 800;
						color: #333333;
					}
					
				}
				.fourrect{
					margin-top: 44rpx;
					.fourrectone{
						text{
							font-size: 24rpx;
							color: #333333;
						}
						font-size: 40rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FC5F69;
					}
					.fourrecttow{
						background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
						border-radius: 34rpx;
						padding: 10rpx 44rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
		}

	}
</style>