questionbankvue3/pages/index/index.vue

<template>
	<view class="content">
		<up-navbar title="选择类型" @rightClick="rightClick" :autoBack="true"></up-navbar>
		<view class="tit">请选择需要学习的题库类型</view>
		<view class="ul">
			<view class="li" v-for="(item,index) in tabData" :key="index" @click="chooseCar(item)" :class="{active: item.name==currentCar}">
				<view class="checkBox" v-if="item.name==currentCar">
					<image src="@/static/images/dg.png" mode=""></image>
				</view>
				<view class="icon" :style="item.style">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="name">{{item.name}}</view>
				<view class="carType">{{ item.type }}</view>
			</view>
		</view>
		
		<view class="btnBox">
			<oneBtn text="确 定" @oneBtnClick="oneBtnClick"></oneBtn>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	
	const rightClick = () => {  
	    console.log('rightClick');  
	};  
	const tabData = ref([
		{name: '小车',  type: 'C1/C2/C3', style: 'width: 114rpx;height: 61rpx;', icon: new URL('@/static/images/car4.png', import.meta.url).href, id: '1'},
		{name: '货车',  type: 'A2/B2', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car2.png', import.meta.url).href, id: '1'},
		{name: '客车',  type: 'A1/B1/A3', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car1.png', import.meta.url).href, id: '1'},
		{name: '摩托车',  type: 'D/E/F', style: 'width: 102rpx;height: 73rpx;', icon: new URL('@/static/images/car3.png', import.meta.url).href, id: '1'},
	])
	const currentCar = ref('小车')
	function chooseCar(item) {
		currentCar.value = item.name
	}
	
	function oneBtnClick() {
		uni.navigateTo({
			url: '/pages/exercises/theoryStudy/theoryStudy'
		})
	}
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.btnBox {
		position: fixed;
		bottom: 70rpx;
		left: 0;
		padding: 20px;
		width: 100%;
	}
	.content {
		width: 100%;
		
	  up-navbar {
	
	  }
	
	  .tit {
		padding: 40rpx 0;
		font-size: 36rpx;
		color: #333;
		font-weight: 700;
	  }
	
	  .ul {
		  display: flex;
		  flex-wrap: wrap;
		  padding: 0 20px;
		  justify-content: space-between;
	    .li {
			width: 190rpx;
			height: 190rpx;
			border-radius: 10rpx;
			padding-top: 20rpx;
			position: relative;
			display: flex;align-items: center;justify-content: center;margin: 30rpx 0rpx 0 0 ;flex-direction: column;
			&.active {
				background: #EDF8FF;
			}
	      .checkBox {
			  position: absolute;
			  top: 0;
			  right: 0;
			  width: 36rpx;
			  height: 36rpx;
			  background: #4DBEFF;
			  border-radius: 0px 10rpx 0px 10rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
	        image {
				display: block;
				width: 32rpx;
				height: 23rpx;
	        }
	      }
	
	      .icon {
	        
	      }
	
	      .name {
			font-size: 28rpx;
			margin: 4rpx 0;
			
	      }
	
	      .carType {
			font-size: 24rpx;
			color: #ccc;
	      }
	    }
	  }
	}
</style>