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: "签到",
			page: 'Deploy',
			bgc: 0
		},
		{
			title: "巡检计划制定",
			icon: "巡检计划制定",
			page: 'InspectionPlan',
			bgc: 0
		},
		{
			title: "巡检任务",
			icon: "巡检任务",
			page: 'Deploy',
			bgc: 0
		},
		{
			title: "巡查",
			icon: "巡查",
			page: 'Deploy',
			bgc: 0
		},
		{
			title: "隐患上报",
			icon: "隐患上报",
			page: 'Deploy',
			bgc: 0
		},
		{
			title: "隐患审核",
			icon: "隐患审核",
			page: 'Deploy',
			bgc: 1
		},
		{
			title: "隐患处理",
			icon: "隐患处理",
			page: 'Deploy',
			bgc: 1
		},
		{
			title: "隐患查询",
			icon: "隐患查询",
			page: 'Deploy',
			bgc: 1
		}
	]
	const handleClick = (item) => {
		uni.navigateTo({
			url:`/pages/index/pages/${item.page}/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;

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

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

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

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


	}
</style>