Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/blindDate

pages.json

@@ -100,6 +100,14 @@
 				"navigationBarTitleText": "设置"
 			}
 		},
+		{
+			"path": "pages/my/memberVip",
+			"style": {
+				"navigationBarTitleText": "VIP会员",
+				"navigationBarBackgroundColor": "#FE3EA5",
+				"navigationBarTextStyle": "white"
+			}
+		},
 		{
 			"path": "pages/userList/userList",
 			"style": {

pages/my/index.vue

@@ -43,7 +43,7 @@
 					<view class="tips">
 						<view class="lf-row-round lf-w-100 lf-h-100 lf-p-b-12">
 							<view class="lf-color-white lf-font-28">VIP会员｜拥有专属权益</view>
-							<view class="lf-bg-white span-btn">
+							<view class="lf-bg-white span-btn" @click="$url('/pages/my/memberVip')">
 								了解详情
 							</view>
 						</view>

pages/my/memberVip.vue

@@ -0,0 +1,153 @@
+<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;
+		/* 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>