questionbankvue3/pages/exercises/categoryExercises/categoryExercises.vue

<template>
	<view class="content padding">
		<view class="con" v-for="(item,index) in 5" :key="index">
			<view class="h5">交通信息</view>
			<view class="ul">
				<view class="li" v-for="(item,index) in 6" :key="index" @click="goPage">
					<view class="icon">
						<!-- <image src="../../../static/images/avatarbg.png" mode=""></image> -->
					</view>
					<view class="text">交通信号</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import carStore from '@/store/modules/car.js'
	let usecarStore = carStore()
	import { columnFid, columnPid } from '@/config/api.js'
	function goPage() {
		uni.navigateTo({
			url: '/pages/exercises/brushQuestions/brushQuestions'
		})
	}
	
	async function columnFidFn() {
		let obj = {
			type: '3',
			stepType: usecarStore.carInfo.stepType,
			carType: usecarStore.carInfo.carType
		}
		const {data: res} = columnFid(obj)
	}
	columnFidFn()
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
	  .con {
		  padding: 50rpx 0 20rpx 0;
		  
	    .h5 {
			font-weight: bold;
			margin-bottom: 10rpx;
			font-size: 32rpx;
	    }
	
	    .ul {
			display: flex;
			flex-wrap: wrap;
	      .li {
			  width: 25%;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  padding: 30rpx 0;
	        .icon {
	          width: 68rpx;
	          height: 68rpx;
	          background: #EF8F4C;
	          box-shadow: 0px 2rpx 5rpx 0px rgba(239,143,76,0.5);
	          border-radius: 26rpx;
	        }
	
	        .text {
				font-weight: 500;
				margin-top: 20rpx;
				font-size: 28rpx;
	        }
	      }
	    }
	  }
	}
</style>