questionbankvue3/pages/vip/vipEntry/vipEntry.vue

<template>
	<view class="content">
		<!-- <up-navbar leftText=" " title="什么东西？" :safeAreaInsetTop="true" :autoBack="true" :fixed="false" :bgColor="'transparent'" ></up-navbar> -->
		<up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" title=" " :fixed="true"
			:bgColor="'transparent'">
		</up-navbar>
		<view class="topBg" :class="{bigBg: curVipItem.name=='全科VIP'}">
			<view class="tag">XXXX成为VIP会员</view>
			<view class="tag">一次搞定</view>
			<view class="tag">五大特权</view>
			<view class="tag">最低仅需xx元/天</view>
			<view class="tag" @click="$goPage('/pages/vip/vipQuestions/vipQuestions')">常见问题</view>
			
			<view class="allSubRow" v-if="curVipItem.name=='全科VIP'">
				<view class="allsbItem">
					<view class="icon">
						<image src="@/static/images/vip/allSbu1.png" mode=""></image>
					</view>
					<view class="text">科一VIP</view>
				</view>
				<view class="allsbItem">
					<view class="icon_arrow">
						<image src="@/static/images/vip/allsubR.png" mode=""></image>
					</view>
				</view>
				<view class="allsbItem">
					<view class="icon">
						<image src="@/static/images/vip/allSbu2.png" mode=""></image>
					</view>
					<view class="text">全科VIP</view>
				</view>
				<view class="allsbItem">
					<view class="icon_arrow">
						<image src="@/static/images/vip/allsubL.png" mode=""></image>
					</view>
				</view>
				<view class="allsbItem">
					<view class="icon">
						<image src="@/static/images/vip/allSbu3.png" mode=""></image>
					</view>
					<view class="text">科四VIP</view>
				</view>
			</view>
			
		</view>
		
		<view class="padding">
			
			
		<view class="allVip flex-b">
			<view class="vipItem" v-for="(item,index) in vipItemData" :key="index" :class="{active: curVipItem.name==item.name}" @click="chooseVip(item)" >
				<view class="lab">{{item.name}}</view>
				<view class="redT flex">
					<view class="price">￥<text>{{item.price}}/</text></view>
					<view class="day">{{item.day}}天</view>
				</view>
			</view>
		</view>
		
		<view class="btnBox flex-b">
			<view class="whiteT flex">
				<view class="price">￥<text>{{ curVipItem.price }}/</text></view>
				<view class="day">{{curVipItem.day}}天</view>
			</view>
			<view class="upgra"></view>
		</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="@/static/images/vip/leftq.png" mode=""></image>
				</view>
				<view class="tit">五大权益助力高效领证</view>
				<view class="round">
					<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 tabData" :key="index">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="txt">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="learning">
			<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" v-for="(item,index) in stepData" :key="index">
						<view class="flex">
							<view class="step">第{{ item.num }}步</view>
							<view class="unit">{{ item.oneTxt }}</view>
						</view>
						<view class="flex-b">
							<view class="leftImg">
								<image :src="item.icon" mode=""></image>
							</view>
							<view class="rightTxt">
								<view class="lab">精选试题</view>
								<view class="txt">提炼易错、易考试题，减少相似题目练习，缩短备考时间</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<view class="comment">
			<view class="h1_row flex-b">
				<view class="h1" ><text class="active">VIP学员之声</text></view>
				<view class="moreBox" @click="lookMore">
					<moreRight text="查看全部" />
				</view>
			</view>
			
			<swiper next-margin="60rpx" previous-margin="20rpx">
				<swiper-item v-for="(item,index) in 6" :key="index">
					<view style="padding: 0 20rpx;">
						<commentItem/>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<up-popup v-model:show="show" mode="bottom" round="20rpx" @close="show=false" closeable>
			<view class="commentbox">
				<view class="tit">VIP学员之声</view>
				<view class="popComment">
					<commentItem v-for="(item,index) in 10" :key="index"></commentItem>
				</view>
			</view>
		</up-popup>
		
		
				
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import commentItem from './comp/commentItem.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'},
	])
	const curVipItem = ref({name: '全科VIP', price: 15, day: 180})
	const vipItemData = ref([
		{name: '全科VIP', price: 15, day: 180},
		{name: '科目一VIP', price: 10, day: 180},
		{name: '科目四VIP', price: 10, day: 180},
	])
	let show = ref(false)
	function lookMore() {
		console.log('我是一个h5')
	}
	function chooseVip(item) {
		curVipItem.value = item
	}
</script>

<style lang="scss" scoped>
	.allSubRow {
		display: flex;
		position: absolute;
		bottom: 160rpx;
		left: 0;
		width: 100%;
		padding: 0 30px;
	  .allsbItem {
		  flex: 1;
		  display: flex;
		  justify-content: center;
		  flex-direction: column;
		  align-items: center;
	    .icon {
			width: 90rpx;
			height: 90rpx;
	      
	    }
		.icon_arrow {
			width: 38rpx;
			height: 36rpx;
			margin: 33rpx auto;
		}
	    .text {
			margin-top: 18rpx;
			font-size: 28rpx;
			color: #fff;
			
	    }
	  }
	}
	
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
	  .topBg {
		  width: 100%;
		  height: 550rpx;
		  background: url('../../../static/images/bigImg/vipbg.png') no-repeat;
		  background-size: 100% 100%;
		  // padding-top: 88rpx;
		  position: relative;
		  &.bigBg {
			  height: 794rpx;
			  background: url('../../../static/images/bigImg/vipallBg.png') no-repeat;
			  background-size: 100% 100%;
		  }
	    .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: 215rpx;
				width: 48rpx;
				height: 176rpx;
				padding-top: 20rpx;
				background: url('../../../static/images/vip/qustr.png') no-repeat;
				background-size: 100% 100%;
				
			}
	    }
	  }
	
	  .allVip {
		  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;
			}
	      .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%);
			background: url('../../../static/images/vipbtn.png') no-repeat; 
			background-size: 100% 100%;
			border-radius: 40rpx;
			font-size: 36rpx;
			line-height: 80rpx;
			text-align: center;
			font-weight: 500;
	    }
	  }
	
	.h1_row {
		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: 50rpx;
					font-size: 28rpx;
					// background: #3776FF;
					// border-radius: 0px 0px 30rpx 0px;
					line-height: 42rpx;
					color: #fff;
					text-align: center;
					background: url('../../../static/images/vip/stepTag.png') no-repeat;
					background-size: 100% 100%;
	            }
	
	            .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;
	              }
	            }
	          }
	        }
	      }
	    }
	  }
	}
	
	.comment {
		margin-top: 20rpx;
	}
	.commentbox {
		position: relative;
		.tit {
			height: 94rpx;
			line-height: 94rpx;
			position: absolute;
			left: 0;
			top: 0;
			border-bottom: 1px solid #F4F4F4;
			width: 100%;
			padding-left: 40rpx;
			font-weight: 700;
			background-color: #fff;
			z-index: 2;
		}
		.popComment {
			max-height: calc(100vh - 400rpx);
			overflow-y: auto;
			padding: 134rpx 40rpx 40rpx 40rpx;
		}
	}
	.u-popup__content__close {
		z-index: 2;
	}
	:deep .u-popup__content__close--top-right {
		z-index: 20;
	}
</style>