<template>
<view class="vip">
	<image src="../static/images/img/vipBg.png" mode="" class="vipBg"></image>
	<view class="vipContent">
		<u-navbar  title="超级VIP" :bgColor="'transparent'" :placeholder="true"></u-navbar>
		<view class="contentContainer">
			<view class="section1">
				<view class="left">
					<image src="../static/images/img/u1.png" mode="" class="avatar"></image>
					<view class="personInfo">
						<text>李大花</text>
						<image src="../static/images/img/pvip.png" class="pvip" mode="widthFix"></image>
					</view>
				</view>
				<view class="right">
					<view>
						超级VIP全年预计省
					</view>
					<view class="price">
						￥<text>2980</text>元
					</view>
				</view>
			</view>
			<view class="section2">
				<image src="../static/images/img/vipFlag.png" class="vipFlag" mode="widthFix"></image>
				<view class="title">
					VIP开卡特权大礼
				</view>
				<view class="vipItem" v-for="(item,index) in list" :key="index">
					<view class="titleContainer">
						<image :src="item.pic" mode=""></image>
						<view class="titleInfo">
							<text class="title">{{item.name}}</text>
							<text class="subTitle">{{item.subTitle}}</text>
						</view>
					</view>
					<view class="desc">
						{{item.desc}}
					</view>
				</view>
				<view class="btn">
					立即开通 <text>￥<text>99</text>元/年</text>
				</view>
			</view>
			<view class="section3">
				<view class="title">
					超V专属商品
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
export default{
	data(){
		return{
			list:[
				{pic:'../static/images/img/v1.png',name:'送100元',subTitle:'红包/代金券',desc:'升级VIP会员，再送XXX元红包，红包可用于在商城购买商品时当现金使用。'},
				{pic:'../static/images/img/v2.png',name:'高额红包抵用',subTitle:'更高额度的红包使用',desc:'升级为VIP后，可使用更高额度的红包进行购物抵用，购物更划算，更省钱。'},
				{pic:'../static/images/img/v3.png',name:'分享赚钱',subTitle:'邀请新人赚钱',desc:'邀请新人注册成功，送50元红包，被邀请人升级成为VIP得50元余额。'},
				{pic:'../static/images/img/v4.png',name:'VIP专属活动',subTitle:'专属特别活动',desc:'定期或不定期的VIP专属活动，全额抵用或最低限额购买等VIP专属活动等你来拿。'},
			]
		}
	}
}
</script>

<style scoped lang="scss">
.vip{
	position: relative;
	min-height: calc(100vh);
	.vipBg{
		position: absolute;
		width:100%;
		height: 100%;
		z-index:0;
		
	}
	.vipContent{
		position: relative;
		z-index:1;
		padding: 0 24rpx;
		.contentContainer{
			.section1{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 70rpx;
				.left{
					display: flex;
					align-items: center;
					.avatar{
						width: 100rpx;
						height: 100rpx;
					}
					.personInfo{
						display: flex;
						flex-direction: column;
						margin-left:15rpx;
						text{
							
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #FFFFFF;
						}
						.pvip{
							height: auto;
							width:60rpx;
							margin-top:15rpx;
						}
					}
				}
				.right{
					
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					.price{
						margin-top: 10rpx;
						text{
							font-size: 30rpx;
						}
					}
				}
			}
			.section2{
				
				background: linear-gradient(-90deg, #DFAD71, #FBD9AE);
				border-radius: 20rpx;
				padding:30rpx;
				position: relative;
				.vipFlag{
					position: absolute;
					z-index:0;
					width:147rpx;
					height: auto;
					top:8rpx;
					right:0;
				}
				.title{
					font-weight: 500;
					font-size: 30rpx;
					color: #020202;
				}
				.vipItem{
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					z-index: 1;
					background: linear-gradient(-90deg, #030303, #2F2F2F);
					border-radius: 20rpx;
					padding:20rpx;
					margin-top: 20rpx;
					.titleContainer{
						display: flex;
					}
					image{
						width:100rpx;
						height:100rpx;
						flex-shrink: 0;
					}
					.titleInfo{
						margin-left:15rpx;
						display: flex;
						flex-direction: column;
						.title{
							
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #F0C795;
						}
						.subTitle{
							margin-top:19rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #F0C795;
						}
					}
					.desc{
						width:50%;
						font-family: Source Han Sans SC;
						font-weight: 300;
						font-size: 20rpx;
						color: #F0C795;
						line-height: 30rpx;
						padding-left:21rpx;
						border-left:1px dashed #3A3A3A;
					}
				}
				.btn{
					width:70%;
					margin-left:15%;
					padding:34rpx 0;
					background: linear-gradient(-90deg, #DDA259, #FBBF73);
					border-radius: 50px;
					text-align: center;
					
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #020202;
					margin-top:40rpx;
					&>text{
						color: #C81202;
						text{
							font-size: 36rpx;
						}
					}
				}
				
			}
			.section3{
				
				background: linear-gradient(-90deg, #DFAD71, #FBD9AE);
				border-radius: 20rpx;
				padding:30rpx;
				position: relative;
				.vipFlag{
					position: absolute;
					z-index:0;
					width:147rpx;
					height: auto;
					top:8rpx;
					right:0;
				}
				.title{
					font-weight: 500;
					font-size: 30rpx;
					color: #020202;
				}
			}
		}
		
	}
	::v-deep.u-navbar__content__left{
		display: none;
	}
	::v-deep .u-navbar__content__title{
		font-size: 36rpx;
		color: #FFFFFF;
	}
}
</style>