|
|
|
@ -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> |
