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>
	function goPage() {
		uni.navigateTo({
			url: '/pages/exercises/brushQuestions/brushQuestions'
		})
	}
</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>