<template>
	<view class="menu">
		<view class="main_title">隐患治理</view>
		<view class="navigator_group">
			<navigator
				class="navigator"
				hover-class="none"
        url=""
				v-if="false"
			>
				<image src="/static/icon-apps/hidden-investigation-1.png" mode=""></image>
				<view class="text">隐患排查</view>
			</navigator>
			<navigator
				class="navigator"
				hover-class="none"
				url="/hiddenManageSubPackages/pages/hidden_report/index"
			>
				<image src="/static/icon-apps/hidden-investigation-2.png" mode=""></image>
				<view class="text">隐患快报</view>
			</navigator>
      <navigator
				class="navigator"
				hover-class="none"
				url=""
				v-if="false"
			>
				<image src="/static/icon-apps/hidden-investigation-3.png" mode=""></image>
				<view class="text">检查记录</view>
			</navigator>
			<navigator
				class="navigator"
				hover-class="none"
				url="/hiddenManageSubPackages/pages/hidden_record/index"
			>
				<image src="/static/icon-apps/hidden-investigation-4.png" mode=""></image>
				<view class="text">隐患记录</view>
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},

	onLoad() {},

	computed: {},

	methods: {},
};
</script>

<style scoped lang="scss">
.menu {
	background-color: #fff;
	padding: 20rpx;
	box-shadow: 0 0 20rpx #cccccc;
	margin: 10rpx 10rpx 20rpx 10rpx;
	border-radius: 10rpx;

	.main_title {
		font-weight: bold;
		display: flex;
		align-items: center;
		color: #989898;
		font-size: 28rpx;

		&::before {
			content: "";
			display: block;
			width: 8rpx;
			height: 28rpx;
			background-color: #6180f1;
			border-radius: 30%;
			margin-right: 14rpx;
		}
	}

	.navigator_group {
		padding: 30rpx 0 20rpx 0;
		display: flex;
		gap: 25rpx;
		flex-wrap: wrap;

		.navigator {
			flex-basis: calc(25% - 25rpx);
			text-align: center;
			position: relative;

			image {
				width: 52rpx;
				height: 52rpx;
			}

			.text {
				font-size: 24rpx;
			}
		}
	}
}
</style>