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

<template>
	<view class="content">
		<ul>
			<li @click="jumpPage('storageDistrbution')">
				<uni-icons type="home" size="120" color="#409EFF" />
				<p>仓容分布</p>
			</li>
			<li @click="jumpPage('purchaseDetails')">
				<uni-icons type="wallet" size="120" color="#E6A23C" />
				<p>收购详情查询</p>
			</li>
			<li @click="jumpPage('emergencyInfo')">
				<uni-icons type="info" size="120" color="#F56C6C" />
				<p>应急信息查询</p>
			</li>
			<li @click="jumpPage('todayInfo')">
				<uni-icons type="calendar" size="120" color="#67C23A" />
				<p>当日信息查询</p>
			</li>
		</ul>
	</view>
</template>

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

		methods: {
			jumpPage(path) {
				uni.navigateTo({
					url: `/pages/queryStatistics/${path}/index`
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 30px;

		ul {
			li {
				width: 20%;
				float: left;
				padding: 30px 0;
				list-style: none;
				text-align: center;
				border-radius: 8px;
				margin: 30px calc(40%/8);
				border: 1px solid #F2F6FC;
				box-shadow: 0 15px 20px rgba(0, 0, 0, .4);

				p {
					font-size: 20px;
					line-height: 32px;
					font-weight: bold;
				}
			}
		}
	}
</style>