hlt_app/pages/index/components/reservoirFunc.vue

<template>
	<!-- 水库功能区 -->
	<view class="reservoir-func-box">
		<view class="reservoir-func-item" v-for="(item,index) in reserviorFuncList" :key="index" :style="{'background-color': bgcList[item.bgc]}" @tap="handleClick(item)">
			<view class="left">
				<view class="title">
					{{item.title}}
				</view>
				<view class="btn">
					查看 >
				</view>
			</view>
			<view class="right">
				<uni-badge :is-dot="true" :text="news[item.icon]" absolute="rightTop" :offset="[10, -5]">
					<image style="width: 80rpx; height: 80rpx" :src="`/static/images/index/${item.icon}.svg`" mode="scaleToFill"></image>
				</uni-badge>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const bgcList = ['#F7F9FD', '#FFF9EE']
	const reserviorFuncList = [{
			title: "调配计划",
			icon: "plan",
			page: 'Deploy',
			bgc: 0
		},
		{
			title: "调度指令",
			icon: "command",
			page: 'Deploy',
			bgc: 0
		},
		{
			title: "水库水情",
			icon: "reservoir",
			page: 'Reservoir',
			bgc: 0
		},
		{
			title: "引水日志",
			icon: "log",
			page: 'WaterLog',
			bgc: 0
		},
		{
			title: "渠道水情",
			icon: "ditch",
			page: 'Ditch',
			bgc: 0
		},
		{
			title: "供水分析",
			icon: "analyse",
			page: 'Analyse',
			bgc: 1
		},
		{
			title: "灌溉进度",
			icon: "progress",
			page: 'Progress',
			bgc: 1
		}
	]
	const news = reactive({
		plan: 0,
		command: 0,
		reservoir: 10,
		log: 0,
		ditch: 0,
		analyse: 0,
		process: 0
	})
	const handleClick = (item) => {
		uni.navigateTo({
			url:`/pages/index/pages/${item.page}/index`
		})
	}
</script>

<style lang="scss" scoped>
	.reservoir-func-box {
		padding: 40rpx 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border-radius: 24rpx;
		background: #FFFFFF;
		
		.reservoir-func-item{
			width: 306rpx;
			height: 130rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
			
			&:nth-last-of-type(-n+2){
				margin-bottom: 0;
			}
			
			.left{
				margin-left: 20rpx;
				
				.title{
					font-family: Source Han Sans;
					font-size: 36rpx;
					font-weight: 500;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
				}
				.btn{
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-feature-settings: "kern" on;
					color: $uni-text-color-grey;
				}
			}
			
			.right{
				margin-top: 20rpx;
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>