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.
226 lines
6.7 KiB
226 lines
6.7 KiB
<template>
|
|
<view class="flex fld-c p15">
|
|
<u-sticky>
|
|
<view class="flex ai-c">
|
|
<view v-for="(item,index) in list" :key="index" class="km-item" :class="{ actived: index==current }"
|
|
@click="current=index">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
<view class="mt15">
|
|
<swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
|
|
:disable-programmatic-animation="true" @change="onChange">
|
|
<swiper-item v-for="(item,index) in list" :key="index">
|
|
<view class="relative">
|
|
<image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
|
|
<view class="vip-info">
|
|
<u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
|
|
<view class="ml10">
|
|
<view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
|
|
{{item.name}}尊享VIP
|
|
</view>
|
|
<view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
|
|
2024-12-12到期
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="corner">
|
|
VIP已开通
|
|
</view>
|
|
<view class="renew">
|
|
98元立即续费
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="mt20">
|
|
<swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
|
|
:disable-programmatic-animation="true" @change="onChange">
|
|
<swiper-item v-for="(item,index) in list" :key="index">
|
|
<view v-if="index == 0 || index == 3" class="p15 br8 cor-fff">
|
|
<view class="fs18 cor-000 fwb">
|
|
3步轻松学{{item.name}}
|
|
</view>
|
|
<view class="mt25 flex ai-c jc-sb">
|
|
<view class="flex ai-c">
|
|
<image src="../../static/image/mine/1.png" mode="widthFix" style="width:25px;"></image>
|
|
<view class="ml7">
|
|
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
|
|
精简500题
|
|
</view>
|
|
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
|
|
题目全部做对，视为完成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="study">
|
|
去学习
|
|
</view>
|
|
</view>
|
|
<view class="mt45 flex ai-c jc-sb">
|
|
<view class="flex ai-c">
|
|
<image src="../../static/image/mine/2.png" mode="widthFix" style="width:25px;"></image>
|
|
<view class="ml7">
|
|
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
|
|
真实考场模拟
|
|
</view>
|
|
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
|
|
10次95分以上，视为完成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="study">
|
|
去学习
|
|
</view>
|
|
</view>
|
|
<view class="mt45 flex ai-c jc-sb">
|
|
<view class="flex ai-c">
|
|
<image src="../../static/image/mine/3.png" mode="widthFix" style="width:25px;"></image>
|
|
<view class="ml7">
|
|
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
|
|
考前密卷
|
|
</view>
|
|
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
|
|
2套试卷95分以上，视为完成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="study">
|
|
去学习
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else style="margin-top: 30rpx;">
|
|
<view class="video-box">
|
|
<view class="flex jc-sb ai-c wp100">
|
|
<text style="color: #873E1D;font-size: 36rpx;">考场实况</text>
|
|
<text class="cor-666 fs12">全部 ></text>
|
|
</view>
|
|
<view class="flex ai-c mt20">
|
|
<image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image>
|
|
<view class="ml18 text-center">
|
|
<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
|
|
text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle">
|
|
</u-button>
|
|
<view class="cor-333 fs15 mt17">真实考场模拟</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [{
|
|
name: '科一'
|
|
}, {
|
|
name: '科二'
|
|
}, {
|
|
name: '科三'
|
|
}, {
|
|
name: '科四'
|
|
}],
|
|
current: 0
|
|
}
|
|
},
|
|
methods: {
|
|
onChange(e) {
|
|
this.current = e.detail.current
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.km-item {
|
|
margin-right: 8px;
|
|
width: 72px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 12px;
|
|
color: #333;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
border: 1px solid #CCCCCC;
|
|
}
|
|
|
|
.actived {
|
|
background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.km-item:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.vip-info {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.corner {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 77px;
|
|
height: 23px;
|
|
background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
|
|
opacity: 0.86;
|
|
border-radius: 0px 8px 0px 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
|
|
.renew {
|
|
position: absolute;
|
|
right: 10%;
|
|
bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 185rpx;
|
|
height: 52rpx;
|
|
background: #873E1D;
|
|
border-radius: 26rpx;
|
|
font-size: 12px;
|
|
color: #F6E99F;
|
|
}
|
|
|
|
.study {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 161rpx;
|
|
height: 67rpx;
|
|
background: #F6E99F;
|
|
border-radius: 34rpx;
|
|
font-size: 12px;
|
|
color: #873E1D;
|
|
}
|
|
.video-box {
|
|
padding: 20rpx;
|
|
width: 694rpx;
|
|
height: 369rpx;
|
|
background: #F9F3E7;
|
|
border: 2rpx solid #CF8B6D;
|
|
border-radius: 16rpx;
|
|
}
|
|
</style> |