hlt_app/pages/index/components/inspectionFunc.vue

<template>
	<!-- 巡查管护功能区 -->
	<view class="inspection-func-box">
		<view class="inspection-func-title">
			巡查管护
		</view>
		<view class="inspection-func-items">
			<view class="inspection-func-item" v-for="(item,index) in inspectionFuncList" :key="index"
				@tap="handleClick(item)">
				<view class="icon">
					<image style="width: 120rpx; height: 120rpx" :src="`/static/images/index/${item.icon}.svg`"
						mode="scaleToFill"></image>
				</view>
				<view class="title">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const inspectionFuncList = [{
			title: "考勤打卡",
			icon: "考勤打卡",
			bgc: 0
		},
		{
			title: "巡检任务",
			icon: "巡检任务",
			bgc: 0
		},
		{
			title: "临时巡检",
			icon: "临时巡检",
			bgc: 0
		},
		{
			title: "备用发电",
			icon: "备用发电",
			bgc: 0
		},
		{
			title: "指标记录",
			icon: "指标记录",
			bgc: 0
		},
		{
			title: "工程检查",
			icon: "工程检查",
			bgc: 1
		},
		{
			title: "安全检查",
			icon: "安全检查",
			bgc: 1
		},
		{
			title: "河湖长巡河",
			icon: "河湖长巡河",
			bgc: 1
		},
		{
			title: "水库管理",
			icon: "水库管理",
			bgc: 1
		}
	]
	const handleClick = (item) => {
		uni.switchTab({
			url: '/pages/map/index'
		})
	}
</script>

<style lang="scss" scoped>
	.inspection-func-box {
		margin-top: 24rpx;
		
		.inspection-func-title {
			font-family: Source Han Sans;
			font-size: 40rpx;
			font-weight: 500;
			font-feature-settings: "kern" on;
			color: $uni-text-color;
			margin-bottom: 16rpx;
		}

		.inspection-func-items {
			padding: 40rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.inspection-func-item {
				display: flex;
				flex-direction: column;
				margin-bottom: 40rpx;
				align-items: center;
				flex: 0 0 33%;

				&:nth-last-of-type(-n+3) {
					margin-bottom: 0;
				}

				.icon {
					width: 120rpx;
					height: 120rpx;
				}

				.title {
					font-family: Source Han Sans;
					font-size: 36rpx;
					font-weight: 500;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
				}
			}
		}


	}
</style>