vip静态页面

App.vue

@@ -17,5 +17,27 @@
 <style lang="scss">
 	/*每个页面公共css */
 	@import "@/uni_modules/uview-plus/index.scss";
-	@import '@/static/css/app.scss'
+	@import '@/static/css/app.scss';
+	.h1 {
+		text {
+			position: relative;
+			color: #999;
+			font-weight: 700;
+			&.active {
+				color: #333;
+				&::before {
+					position: absolute;
+					content: '';
+					width: 54rpx;
+					height: 12rpx;
+					background: url('./static/images/h1Active.png') #F6F7FA no-repeat;
+					background-size: 100% 100%;
+					left: 50%;
+					transform: translateX(-50%);
+					bottom: -20rpx;
+				}
+			}
+		}
+	}
+
 </style>

main.js

@@ -13,6 +13,7 @@ import { goPage } from '@/utils/utils.js'
 // app.$mount()
 // // #endif 
 
+
 // #ifdef VUE3
 import { createSSRApp } from 'vue'
 export function createApp() {

pages/vip/vipEntry/vipEntry.vue

@@ -3,16 +3,18 @@
 		<view class="topBg">
 			<view class="tag">XXXX成为VIP会员</view>
 			<view class="tag">一次搞定</view>
-			<view class="tag">常见问题</view>
 			<view class="tag">五大特权</view>
 			<view class="tag">最低仅需xx元/天</view>
+			<view class="tag">常见问题</view>
 		</view>
 		
-		<view class="allVip">
-			<view class="vipItem" v-for="(item,index) in 3" :key="index">
+		<view class="padding">
+			
+		<view class="allVip flex-b">
+			<view class="vipItem" v-for="(item,index) in 3" :key="index" :class="{active: index==1}">
 				<view class="lab">全科VIP</view>
 				<view class="redT flex">
-					<view class="price">￥<text>15</text></view>
+					<view class="price">￥<text>15/</text></view>
 					<view class="day">100天</view>
 				</view>
 			</view>
@@ -20,53 +22,55 @@
 		
 		<view class="btnBox flex-b">
 			<view class="whiteT flex">
-				<view class="price">￥<text>15</text></view>
+				<view class="price">￥<text>15/</text></view>
 				<view class="day">100天</view>
 			</view>
 			<view class="upgra">升级为VIP</view>
 		</view>
 		
-		<view class="card">
-			<view class="h1_row">
-				<view class="h1">尊享权益</view>
+		<view class="h1_row flex-b">
+			<view class="h1" ><text class="active">尊享权益</text></view>
 			<view class="moreBox">
 				<moreRight text="查看全部"/>
 			</view>
 		</view>
+		<view class="card">
 			<view class="tit_row flex">
 				<view class="round">
-					<image src="" mode=""></image>
+					<image src="@/static/images/vip/leftq.png" mode=""></image>
 				</view>
 				<view class="tit">五大权益助力高效领证</view>
 				<view class="round">
-					<image src="" mode=""></image>
+					<image src="@/static/images/vip/rightq.png" mode=""></image>
 				</view>
 			</view>
 			<view class="tps">180天内无限使用</view>
 			
 			<view class="ul">
-				<view class="li" v-for="(item,index) in 5" :key="index">
+				<view class="li" v-for="(item,index) in tabData" :key="index">
 					<view class="icon">
-						<image src="" mode=""></image>
+						<image :src="item.icon" mode=""></image>
 					</view>
-					<view class="txt">精选试题</view>
+					<view class="txt">{{item.name}}</view>
 				</view>
 			</view>
 		</view>
 		
 		<view class="learning">
-			<view class="h1">四步高效学习法</view>
+			<view class="h1_box">
+				<view class="h1"> <text class="active">四步高效学习法</text> </view>
+			</view>
 			<view class="blueBg">
 				<view class="blueTxt">拒绝费时费力  高效备考理论</view>
 				<view class="ul">
-					<view class="li">
+					<view class="li" v-for="(item,index) in stepData" :key="index">
 						<view class="flex">
-							<view class="step">第一步</view>
-							<view class="unit">练</view>
+							<view class="step">第{{ item.num }}步</view>
+							<view class="unit">{{ item.oneTxt }}</view>
 						</view>
 						<view class="flex-b">
 							<view class="leftImg">
-								<image src="" mode=""></image>
+								<image :src="item.icon" mode=""></image>
 							</view>
 							<view class="rightTxt">
 								<view class="lab">精选试题</view>
@@ -79,131 +83,350 @@
 			</view>
 		</view>
 		
+		<view class="comment">
+			<view class="h1_row flex-b">
+				<view class="h1" ><text class="active">VIP学员之声</text></view>
+				<view class="moreBox">
+					<moreRight text="查看全部"/>
+				</view>
+			</view>
+			
+			<swiper next-margin="60rpx" previous-margin="20rpx">
+				<swiper-item v-for="(item,index) in 6" :key="index">
+					<view class="commentItem">
+						<view class="flex">
+							<view class="avatar">
+								<image src="@/static/images/avatarbg.png" mode=""></image>
+							</view>
+							<view class="name">关系很好</view>
+							<view class="tag">7天通过科目一</view>
+						</view>
+						<view class="text">
+							抱着"花钱买个心安" 的想法买了VIP，后面果然很快就通过考试了，比我预想的考试分高！
+						</view>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+		</view>
 	</view>
 </template>
 
 <script setup>
-	
+	import { ref } from 'vue'
+	const tabData = ref([
+		{name: '精选试题', icon: new URL('@/static/images/vip/vipicon2.png', import.meta.url).href, id: '1'},
+		{name: '仿真考试', icon: new URL('@/static/images/vip/vipicon3.png', import.meta.url).href, id: '1'},
+		{name: '考前密卷', icon: new URL('@/static/images/vip/vipicon4.png', import.meta.url).href, id: '1'},
+		{name: '高频错题', icon: new URL('@/static/images/vip/vipicon5.png', import.meta.url).href, id: '1'},
+		{name: '语音讲解', icon: new URL('@/static/images/vip/vipicon1.png', import.meta.url).href, id: '1'}
+	])
+	
+	const stepData = ref([
+		{name: '精选试题', num: '一', oneTxt: '练', txt: '提炼易错、易考试题，减少相似题目练习，缩短备考时间', icon: new URL('@/static/images/vip/coveb.png', import.meta.url).href, id: '1'},
+		{name: '还原真实考场', num: '二', oneTxt: '考', txt: '100%还原考试界面，磨练考试技巧、增强心理素质、提高考试成绩', icon: new URL('@/static/images/vip/covec.png', import.meta.url).href, id: '1'},
+		{name: '考前秘卷', num: '三', oneTxt: '冲', txt: '考前精选   高频难题  直击考点   稳上高分', icon: new URL('@/static/images/vip/coved.png', import.meta.url).href, id: '1'},
+		{name: '温故高频错题', num: '四', oneTxt: '复', txt: '汇总您的专属高频错题，全力攻破最后的难关', icon: new URL('@/static/images/vip/covea.png', import.meta.url).href, id: '1'},
+	])
 </script>
 
 <style lang="scss" scoped>
+	.comment {
+  .h1_row.flex-b {
+    .h1 {
+      text.active {
+
+      }
+    }
+
+    .moreBox {
+      moreright {
+
+      }
+    }
+  }
+
+  .commentItem {
+    .flex {
+      .avatar {
+        img {
+
+        }
+      }
+
+      .name {
+
+      }
+
+      .tag {
+
+      }
+    }
+
+    .text {
+
+    }
+  }
+}
+	image {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
 	.content {
+		width: 100%;
 	  .topBg {
+		  width: 100%;
+		  height: 550rpx;
+		  background: url('../../../static/images/vip/vipbg.png') no-repeat;
+		  background-size: 100% 100%;
+		  position: relative;
 	    .tag {
+			position: absolute;
+			font-size: 24rpx;
+			color: #FFF9F3;
+			padding: 9rpx;
+			background: url('../../../static/images/vip/tagbg.png') no-repeat;
+			background-size: 100% 100%;
+			&:nth-child(1) {
+				left: 50rpx;
+				top: 152rpx;
+			}
+			&:nth-child(2) {
+				right: 78rpx;
+				top: 182rpx;
+			}
+			&:nth-child(3) {
+				left: 20rpx;
+				top: 280rpx;
+			}
+			&:nth-child(4) {
+				right: 20rpx;
+				top: 406rpx;
+			}
+			&:nth-child(5) {
+				right: 0;
+				top: 225rpx;
+				width: 48rpx;
+				height: 176rpx;
+				padding-top: 20rpx;
+				background: url('../../../static/images/vip/qustr.png') no-repeat;
+				background-size: 100% 100%;
 				
 			}
 	    }
+	  }
 	
 	  .allVip {
-	    .vipItem {
-	      .lab {
+		  transform: translateY(-96rpx);
+		  // position: relative;
+		  // top: -96rpx;
 		  
+	    .vipItem {
+			width: 28%;
+			height: 180rpx;
+			background: #FFFFFF;
+			border-radius: 10rpx;
+			border: 2px solid #FDD5B7;
+			&.active {
+				transform: scale(1.3);
+				background-color: #FDF5E4;
+				border: 4px solid #EAA270;
+				border-radius: 10px;
 			}
-	
-	      .redT.flex {
+	      .lab {
+			height: 96rpx;
+			line-height: 96rpx;
+			text-align: center;
+			font-size: 28rpx;
+			font-weight: 500;
+	      }
+	
+	      .redT {
+			  padding-top: 16rpx;
+			  text-align: center;
+			  width: 100%;
+			  justify-content: center;
+			  border-top: 1px solid #eee;
 	        .price {
+				color: #DA492D;
+				font-size: 24rpx;
 	          text {
-	
+				font-size: 36rpx;
 	          }
 	        }
 	
 	        .day {
-	
+				font-size: 24rpx;
+				color: #9E492D;
 	        }
 	      }
 	    }
 	  }
 	
 	  .btnBox.flex-b {
+		  width: 100%;
+		  height: 100rpx;
+		  background: #3776FF;
+		  border-radius: 50rpx;
+		  padding: 10rpx 10rpx 10rpx 32rpx;
+		  margin-top: -50rpx;
 	    .whiteT.flex {
+			color: #fff;
 	      .price {
+			  font-size: 24rpx;
 	        text {
-	
+				font-size: 36rpx;
+				font-weight: 700;
 	        }
 	      }
 	
 	      .day {
-	
+			font-size: 24rpx;
 	      }
 	    }
 	
 	    .upgra {
-	
+			width: 230rpx;
+			height: 80rpx;
+			background: linear-gradient(0deg, #F7D0A5 0%, #FCEDD1 100%);
+			border-radius: 40rpx;
+			font-size: 36rpx;
+			line-height: 80rpx;
+			text-align: center;
+			font-weight: 500;
 	    }
 	  }
 	
-	  .card {
 	.h1_row {
-	      .h1 {
-	
-	      }
-	
-	      .moreBox {
-	        
-	      }
+		height: 118rpx;
 	}
-	
+	  .card {
+		  background: #FFFFFF;
+		  box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.04);
+		  border-radius: 20px;
+		  padding: 30rpx 20rpx;
 	    .tit_row.flex {
+			width: 100%;
+			justify-content: center;
 	      .round {
-	        
+	        width: 24rpx;
+			height: 24rpx;
 	      }
 	
 	      .tit {
-	
+			font-size: 28rpx;
+			color: #333;
+			padding: 0 20rpx;
 	      }
 	    }
 		
 	    .tps {
-	
+			font-size: 24rpx;
+			color: #ccc;
+			padding: 20rpx 0 32rpx 0;
+			text-align: center;
 	    }
 	
 	    .ul {
+			display: flex;
 	      .li {
+			  width: 20%;
+			  display: flex;
+			  flex-direction: column;
+			  align-items: center;
+			  justify-content: center;
 	        .icon {
-	          
+	          width: 84rpx;
+			  height: 84rpx;
 	        }
 	
 	        .txt {
-	
+				font-size: 28rpx;
+				margin-top: 14rpx;
 	        }
 	      }
 	    }
 	  }
 	
 	  .learning {
+		  .h1_box {
+			  padding: 20rpx 0;
+		  }
 	    .h1 {
 	
 	    }
 	
 	    .blueBg {
+			background: linear-gradient(180deg, #E3FEFF 0%, #F2FEFF 100%);
+			border-radius: 20px;
+			padding: 0 20rpx 20rpx 20rpx;
+			margin-top: 20rpx;
 	      .blueTxt {
-	
+			line-height: 68rpx;
+			text-align: center;
+			font-size: 30rpx;
+			font-weight: 700;
+			color: $themC;
 	      }
 	
 	      .ul {
+			  width: 100%;
+			  background: #FFFFFF;
+			  border-radius: 20px;
 	        .li {
+				width: 100%;
+				padding: 30rpx 0rpx;
+				border-bottom: 1px solid #F4F4F4;
 	          .flex {
 	            .step {
-	
+					width: 125rpx;
+					height: 42rpx;
+					font-size: 28rpx;
+					background: #3776FF;
+					border-radius: 0px 0px 30rpx 0px;
+					line-height: 42rpx;
+					color: #fff;
+					text-align: center;
 	            }
 	
 	            .unit {
-	
+					font-family: PingFang SC;
+					font-weight: bold;
+					font-size: 36rpx;
+					color: #333333;
+					margin-left: 20rpx;
 	            }
 	          }
 	
 	          .flex-b {
+				  padding-top: 30rpx;
+				  padding: 30rpx 20rpx 0 20rpx;
 	            .leftImg {
-	              
+					width: 360rpx;
+					height: 200rpx;
+					background: #F4EED8;
+					border-radius: 20rpx;
+					overflow: hidden;
 	            }
 	
 	            .rightTxt {
+					padding-left: 20rpx;
+					flex: 1;
+					width: 0;
 	              .lab {
-	
+					font-weight: bold;
+					font-size: 28rpx;
+					color: #333333;
+					line-height: 66rpx;
 	              }
 	
 	              .txt {
-	
+					font-weight: 500;
+					font-size: 24rpx;
+					color: #666666;
+					line-height: 34rpx;
+	              }
 	            }
 	          }
 	        }
@@ -211,5 +434,46 @@
 	    }
 	  }
 	}
+	
+	.comment {
+		margin-top: 20rpx;
+	  .commentItem {
+		  width: 630rpx;
+		  height: 236rpx;
+		  background: #FFFFFF;
+		  box-shadow: 0px 0px 18rpx 0px rgba(0,0,0,0.04);
+		  border-radius: 10rpx;
+		  padding: 40rpx;
+	    .flex {
+	      .avatar {
+			  width: 40rpx;
+			  height: 40rpx;
+			  border-radius: 50%;
+	      }
+	
+	      .name {
+			font-size: 28rpx;
+			font-weight: 500;
+			padding: 0 10rpx;
+	      }
+	
+	      .tag {
+			min-width: 159rpx;
+			height: 36rpx;
+			background: linear-gradient(135deg, #F9E4B1 0%, #F1C477 100%);
+			border-radius: 6rpx;
+			line-height: 36rpx;
+			text-align: center;
+			padding: 0 10rpx;
+			font-size: 20rpx;
+	      }
+	    }
+	
+	    .text {
+			margin-top: 26rpx;
+			font-size: 24rpx;
+			color: #2D1306;
+	    }
+	  }
 	}
 </style>

unpackage/dist/cache/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "b0d0ffe5",
+  "configHash": "51797bb4",
+  "lockfileHash": "d536e6bf",
+  "browserHash": "1988e6cd",
+  "optimized": {},
+  "chunks": {}
+}

unpackage/dist/cache/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}