You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
476 lines
11 KiB
476 lines
11 KiB
<template>
|
|
<view class="content">
|
|
<view class="topBg">
|
|
<view class="tag">XXXX成为VIP会员</view>
|
|
<view class="tag">一次搞定</view>
|
|
<view class="tag">五大特权</view>
|
|
<view class="tag">最低仅需xx元/天</view>
|
|
<view class="tag">常见问题</view>
|
|
</view>
|
|
|
|
<view class="padding">
|
|
<view class="allSubRow">
|
|
<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/allSbuL.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="allsbItem">
|
|
<view class="icon">
|
|
<image src="@/static/images/vip/allsubL.png" mode=""></image>
|
|
</view>
|
|
<view class="text">科四VIP</view>
|
|
</view>
|
|
</view>
|
|
<view class="allVip flex-b">
|
|
<view class="vipItem" v-for="(item,index) in vipItemData" :key="index" :class="{active: index==1}">
|
|
<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>15/</text></view>
|
|
<view class="day">100天</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 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')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
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%;
|
|
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 {
|
|
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: 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|