province-uniapp-qinghai-ipad/pages/index/index.vue

<template>
	<view class="content">
		<view v-for="(item, index) in modules" :key="index" @tap="gotoModule(item)">
			<view v-if="item.icon" class="module-icon">
				<image :src="`/static/${item.icon}`" mode="aspectFit" style="width: 100%; height: 100%;"></image>
			</view>
			<view v-else class="title module">{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modules: [{
						title: '安全生产检查',
						icon: 'icon-1.png',
						url: '/pages/safePruductInspect/safePruductInspect',
					},
					{
						title: '安全储粮检查',
						icon: 'icon-2.png',
						url: '/pages/safeStorageInspect/safeStorageInspect',
					},
					{
						title: '储备粮验收检查',
						icon: 'icon-3.png',
						url: '/pages/storageAcceptanceInspect/storageAcceptanceInspect',
					},
					{
						title: '储备信息统计',
						icon: 'icon-4.png',
						url: '/pages/storageInfoAnalysis/storageInfoAnalysis',
					},
					{
						title: '粮情查询',
						icon: 'icon-5.png',
						url: '/pages/grainInfo/grainInfo',
					},
					{
						title: '视频监控',
						icon: 'icon-6.png',
						url: '',
					},
					{
						title: '查询统计',
						icon: 'icon-7.png',
						url: '/pages/queryStatistics/index',
					},
					{
						title: '智慧安防',
						icon: 'icon-8.png',
						url: '/pages/smartSecurity/index',
					},
					{
						title: '智慧消防',
						icon: 'icon-9.png',
						url: '/pages/fireFighting/index',
					},
					{
						title: '安全预案',
						icon: 'icon-10.png',
						url: '/pages/safetyPlan/safetyPlan',
					},
					{
						title: '价格监测',
						icon: 'icon-11.png',
						url: '',
					},
					{
						title: '消防水源管理',
						icon: 'icon-12.png',
						url: '/pages/fireWaterSource/index',
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			gotoModule(module) {
				uni.navigateTo({
					url: module.url
				})
			}
		}
	}
</script>

<style lang="scss">
	$module_size: 20vw;
	page {
		background-color: #f6f6fe;
	}
	.content {
		padding: 20px;
		// height: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		background-color: #f6f6fe;

		.module {
			min-width: $module_size;
			min-height: $module_size;
			max-width: $module_size;
			max-height: $module_size;
			margin: 10px;
			background-color: #349ed5;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.title {
				font-size: 0.8rem;
			}
		}
		.module-icon {
			margin: 10px;
			height: $module_size;
			width: $module_size;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>