<template>
	<div style="padding-top: 13vw;">
		<TopNav navTitle="收藏应用" />
		<div class="function_item_box">
			<div @click="routerPush(item.path)" class="function_item" v-for="item in zhxfList.list" :key="item">
				<van-image width="55px" height="55px" fit="contain" :src="item.imgUrl">
					<template v-slot:loading>
						<van-loading type="spinner" size="20" />
					</template>
				</van-image>
				<div class="item_name">{{item.name}}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import TopNav from '../../../components/topNav.vue';
	import {
		ref,
		reactive
	} from 'vue';
import router from '../../../router';
	//智慧巡防
	const zhxfList = reactive({
		list: [{
				name: '巡防报告',
				imgUrl: require('../../../assets/images/menu-rwzx.png'),
				path: ''
			},
			{
				name: '盘查物品',
				imgUrl: require('../../../assets/images/home/FXYJ@3x.png'),
				path: ''
			}, {
				name: '指令信息',
				imgUrl: require('../../../assets/images/menu-zlzx.png'),
				path: ''
			},
			{
				name: '报备信息',
				imgUrl: require('../../../assets/images/menu-qwzx.png'),
				path: ''
			},
			{
				name: '指令设置',
				imgUrl: require('../../../assets/images/menu-qwzx.png'),
				path: ''
			},
			{
				name: '巡防区',
				imgUrl: require('../../../assets/images/11.png'),
				path: '/scyy/xfq'
			},
			{
				name: '警务站',
				imgUrl: require('../../../assets/images/2.png'),
				path: '/scyy/jwz'
			},
			{
				name: '快反点',
				imgUrl: require('../../../assets/images/3.png'),
				path: '/scyy/kfd'
			},
			{
				name: '巡防力量',
				imgUrl: require('../../../assets/images/4.png'),
				path: '/scyy/xfll'
			},
			{
				name: '车辆',
				imgUrl: require('../../../assets/images/5.png'),
				path: '/scyy/cl'
			},
			{
				name: '装备',
				imgUrl: require('../../../assets/images/6.png'),
				path: '/scyy/zb'
			}
		]
	})
function routerPush(url){
	router.push(url)
}
</script>

<style lang="scss" scoped>
	@import "../../../assets/styles/mixin.scss";
	.function_item_box {
		display: flex;
		flex-wrap: wrap;
		@include font_color($font-color-theme);
		.function_item {
			// border: 1px solid red;
			width: 25%;
			text-align: center;
			margin-top: 4vw;
	
			.item_name {
				margin-top: 1.5vw;
				@include font_size($font_medium_s);
			}
		}
	
	}
</style>
