From 53ae16f09703532b0b306f8821d6d7b52abbfe07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9F=B3=E5=8F=AF?= <1284707383@qq.com>
Date: Wed, 18 Aug 2021 12:00:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98=E4=B8=AD=E5=BF=83=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json             |   6 +-
 pages/my/index.vue     |   2 +-
 pages/my/memberVip.vue | 153 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 pages/my/memberVip.vue

diff --git a/pages.json b/pages.json
index a7690f2..3c6d98e 100644
--- a/pages.json
+++ b/pages.json
@@ -101,9 +101,11 @@
 			}
 		},
 		{
-			"path": "pages/my/setting",
+			"path": "pages/my/memberVip",
 			"style": {
-				"navigationBarTitleText": "VIP会员"
+				"navigationBarTitleText": "VIP会员",
+				"navigationBarBackgroundColor": "#FE3EA5",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
diff --git a/pages/my/index.vue b/pages/my/index.vue
index bc91164..664187b 100644
--- a/pages/my/index.vue
+++ b/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>
diff --git a/pages/my/memberVip.vue b/pages/my/memberVip.vue
new file mode 100644
index 0000000..1d988e6
--- /dev/null
+++ b/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>