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.
132 lines
3.0 KiB
132 lines
3.0 KiB
<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>
|