初始提交

src/pages/my/views/scyy.vue

@@ -0,0 +1,106 @@
+<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>