|
|
<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="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="day">100天</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">升级为VIP</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'}, ]) 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/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 { 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%); 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>
|
