pet-front/otherPages/workbenchManage/myLevel/commponents/levelInfo.vue

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