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.
86 lines
1.7 KiB
86 lines
1.7 KiB
<template>
|
|
<view class="my-level">
|
|
<view class="my-level-need">
|
|
<cardTitle :cardTitle="cardName"></cardTitle>
|
|
<view :class="['my-level-content','mt20', baseList.length == 1 ? 'flex-rowc' : 'flex-b']">
|
|
<view :class="i == 1 ? '' : 'flex-colc'" v-for="(item,i) in baseList" :key="i">
|
|
<view class="color-999 size-28">{{item.title}}</view>
|
|
<view class="mt20 size-28">{{item.num}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<up-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="10" height="300rpx"
|
|
@change="swiperChange"></up-swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import cardTitle from '../../components/cardTitle.vue'
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from "vue"
|
|
const cardName = ref("距离下一等级要求")
|
|
const baseList = ref([
|
|
{
|
|
title: '仍需至少注册',
|
|
num: "20人"
|
|
},
|
|
]);
|
|
|
|
const list3 = reactive([
|
|
'/static/images/levelImage/1.jpeg',
|
|
'/static/images/levelImage/2.jpg',
|
|
]);
|
|
|
|
const swiperChange = (index) => {
|
|
switch (index.current) {
|
|
case 0:
|
|
baseList.value = [{
|
|
title: '仍需至少注册',
|
|
num: "20人"
|
|
}]
|
|
break;
|
|
case 1:
|
|
baseList.value = [{
|
|
title: '仍需至少注册',
|
|
num: "20人"
|
|
},
|
|
{
|
|
title: '或',
|
|
num: " "
|
|
},
|
|
{
|
|
title: '仍需至少下单',
|
|
num: "5人"
|
|
}
|
|
]
|
|
break;
|
|
case 2:
|
|
break;
|
|
case 3:
|
|
break;
|
|
case 4:
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../index.scss";
|
|
// .comp-card{
|
|
// &-head{
|
|
// .line{
|
|
// width: 11rpx;
|
|
// height: 38rpx;
|
|
// background-color: #FFBF60;
|
|
// border-radius: 6rpx;
|
|
// }
|
|
// .title{
|
|
// font-weight: bold;
|
|
// }
|
|
// }
|
|
// }
|
|
</style>
|