svip第一版（未完全完成）

common/styles/global/pages.scss

@@ -613,4 +613,45 @@
 	content: '';width: 279rpx;height: 250rpx;display:block;
 	position: absolute;top:calc(20rpx - var(--status-bar-height));right:20rpx;
 	@include ezy-no-repeat-cover;background-image: url("@/static/images/my/my-page-img.png");
+}
+
+// SVIP
+.ezy-svip-page{
+	width: 100%;height: 100vh;background-color: #23befb;position: relative;
+	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
+	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/pay/svip-page-bj.png");
+	.svip-login{
+		width: 673rpx;height: 269rpx;margin: 0 auto;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/svip-logo.png");
+	}
+	.svip-list-box{
+		margin: 0 auto;
+		.list-item-box{display: flex;align-items: center;color: #fff;margin-bottom: 24rpx;}
+		.list-icon{
+			width: 96rpx;height: 106rpx;@include ezy-no-repeat-cover;margin-right: 16rpx;
+		}
+		.list-title{
+			font-size: 28rpx;font-weight: 600;margin-bottom: 10rpx;
+		}
+		.list-content{font-size: 25rpx;}
+		
+	}
+	.open-svip-box{
+		width: 702rpx;height:413rpx;margin: 0 auto;box-sizing: border-box;padding: 0 16rpx;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/svip-block-bj.png");
+		.svip-price-box{
+			display: flex;justify-content: space-between;border-bottom: 2rpx solid #efd774;
+			margin-top: 120rpx;box-sizing: border-box;padding:0 24rpx 24rpx;color: #87664d;
+			.original-price{text-decoration: line-through;}
+			.discount-price{color: #ff0101;}
+		}
+		.pay-type-box{
+			display: flex;align-items: center;
+		}
+		.type-radio-box{display: flex;align-items: center;}
+		.open-svip-btn{
+			width: 333rpx;height: 88rpx;line-height: 88rpx;text-align: center;color: #fff;
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/svip-btn-bj.png");
+		}
+	}
 }

pages/pay/svip.vue

@@ -1,8 +1,69 @@
+<!-- svip页面 -->
 <template>
-	<view>svip页面</view>
+	<view class="ezy-svip-page">
+		<view class="icon-title-navBar-box">
+			<!-- 返回按钮 ↓ -->
+			<view class="nav-bar-icon"></view>
+			<view class="nav-bar-title">开通svip</view>
+		</view>
+		<icon class="svip-login"></icon>
+		<view class="svip-list-box">
+			<view v-for="(item, index) in svipArr" :key="index" class="list-item-box">
+				<icon class="list-icon" :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></icon>
+				<view>
+					<view class="list-title">{{item.title}}</view>
+					<view class="list-content">{{item.content}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="open-svip-box">
+			<view class="svip-price-box">
+				<view>原价：<text class="original-price">¥598</text></view>
+				<view class="discount-price">活动价：¥198</view>
+			</view>
+			<radio-group @change="radioChange" class="pay-type-box">
+				<view>支付方式</view>
+				<view class="type-radio-box">
+					<icon></icon>
+					<text>微信</text>
+					<radio value="weixin" :checked="payType==='weixin'" />
+				</view>
+				<view class="type-radio-box">
+					<icon></icon>
+					<text>支付宝</text>
+					<radio value="zhifubao" :checked="payType==='zhifubao'" />
+				</view>
+			</radio-group>
+			<view class="open-svip-btn">立即开通</view>
+		</view>
+	</view>
 </template>
 
-<script>
+<script setup>
+import {ref} from "vue";
+let payType = ref('weixin')
+const svipArr = [
+    {
+        iconPath: 'static/images/pay/svip-list-icon1.png',
+		title:'学习资源，随心畅学',
+        content: '解锁全年级数学优质学习资源，满足多样学习需求'
+    },
+    {
+        iconPath: 'static/images/pay/svip-list-icon2.png',
+        title:'名师打造，优质路径',
+        content: '资深名师精心规划学习路径，引领高效提升方向'
+    },
+    {
+        iconPath: 'static/images/pay/svip-list-icon3.png',
+        title:'进度分析，个性贴心',
+        content: '优先参与丰富真题测试，精准洞察学习状况'
+    },
+    {
+        iconPath: 'static/images/pay/svip-list-icon4.png',
+        title:'真题测试，优先体验',
+        content: '成为会员，即刻畅享专属权益，开启无忧学习之旅'
+    }
+];
 </script>
 
 <style>