blindDate/pages/my/memberVip.vue

<template>
	<view class="lf-w-100 lf-h-100">
		<view class="head-top">
			<view class="head-top-wrap lf-w-100 lf-h-100">
				<view class="lf-w-100 tips-wrap">
					<view class="tips">
						<view class="lf-flex lf-w-100 lf-h-100 lf-p-b-12 lf-p-l-30">
							<view>
								<image src="../../static/logo.png" mode="aspectFill" class="vip-head"></image>
							</view> 
							<view class="lf-p-l-20">
								<view class="lf-font-32 lf-color-white">编号：73894</view>
								<view class="lf-color-white lf-font-28 lf-m-t-20">尚未加入会员</view>
							</view>
						</view>
						<view class="banner-flag">
							<view class="lf-m-b-22">
								限时特惠
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="vip-content">
			<view class="lf-font-36 lf-color-222 lf-m-l-32 lf-m-b-30" style="font-weight: 500;">
				VIP会员专属特权
			</view>
			<view class="vip-tag">
				<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 个人形象升级</view>
				<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 专属会员身份标识</view>
				<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 免费上头条N次</view>
				<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 免费朋友圈转发N次</view>
				<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 解锁访客记录/收藏我</view>
				<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 发表更多动态/评论</view>
				<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 每月系统自动推送4名异性</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	
	.vip-content {
		position: relative;
		top: -130px;
	}
	
	.vip-tag {
		width: 686rpx;
		height: 100%;
		padding: 0 30rpx 30rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	
	.banner-flag {
		width: 82rpx;
		height: 134rpx;
		background: #FE7B43;
		position: absolute;
		right: 30rpx;
		top: 0;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 28rpx;
	}
	
	.banner-flag::after {
		content: '';
		width: 0;
		height: 0;
		border-left: 40rpx solid transparent;
		border-right: 40rpx solid transparent;
		border-bottom: 26rpx solid #314177;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.vip-head {
		width: 120rpx;
		height: 120rpx;
		border: 5rpx solid #FFFFFF;
		border-radius: 50%;
	}
	
	.head-top {
		width: 100%;
		height: 562rpx;
		position: relative;
		z-index: 9;
		/* background-color: red; */
	}
	
	.head-top-wrap {
		width: 100%;
		height: 656rpx;
		/* z-index: -1; */
		overflow: hidden;
		position: relative;
	}
	
	.head-top::after {
		content: '';
		width: 100%;
		height: 272rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		border-radius: 0 586px 586px/0 0 320rpx 320rpx;
		background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
	}
	
	.tips-wrap {
		overflow: hidden;
		height: 754rpx;
		border-radius: 0 586px 586px/0 0 320rpx 320rpx;
		position: absolute;
		top: -481rpx;
	}
	
	.tips {
		width: 686rpx;
		height: 242rpx;
		background-color: #314177;
		border-radius: 20rpx;
		position: relative;
		bottom: -510rpx;
		left: 0;
		margin: 0 auto;
	}
	
	.span-btn {
		border-radius: 25rpx;
		width: 149rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #314177;
	}
</style>