初始提交

src/pages/newHome/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <ul>
+    <li v-for="item in listData" :key="item" @click="changeOpen(item)">
+      <img :src="item.imgUrl" alt="">
+      <div class="text">{{ item.text }}</div>
+    </li>
+  </ul>
+  <PrpcPopup ref="prpc" :key="pcKey + 'pc'" />
+</template>
+<script setup>
+import { ref, onMounted,nextTick  } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import PrpcPopup from "../spsHome/components/prpcPopup.vue";
+const router = useRouter();
+const pcKey = ref(0);
+const prpc = ref(null);
+const listData = ref([
+  {
+    text: '勤务报备',
+    imgUrl: require("@/assets/home/qwbb.png"),
+    type: 'qwbb',
+    path: '/yyzx/xfbb/addXfbb'
+  },
+  {
+    text: '人车盘查',
+    imgUrl: require("@/assets/home/rcpc.png"),
+    type: 'rcpc',
+    path: '/yyzx/xfbb/addXfbb'
+  },
+  {
+    text: '巡逻打卡',
+    imgUrl: require("@/assets/home/xldk.png"),
+    type: 'xldk',
+    path: '/clock'
+  },
+  {
+    text: '信息交互',
+    imgUrl: require("@/assets/home/zllz.png"),
+    type: 'zllz',
+    path: '/yyzx/zlzx/zlzxIndex'
+  },
+  {
+    text: '处警报送',
+    imgUrl: require("@/assets/home/dqwz.png"),
+    type: 'cjbs',
+    path: '/cjbsPage'
+  },
+  {
+    text: '个人信息',
+    imgUrl: require("@/assets/home/grxx.png"),
+    type: 'grxx',
+    path: '/my'
+  }
+])
+const changeOpen = (val) => {
+  switch (val.type) {
+    case 'qwbb':
+    case 'xldk':
+    case 'zllz':
+    case 'grxx':
+    case 'cjbs':
+      router.push(val.path)
+      break
+    case 'rcpc':
+      pcKey.value++;
+      nextTick(() => {
+        prpc.value.handleOpen();
+      });
+      break;
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 100vh;
+
+  li {
+    width: 48%;
+    height: 31.5vh;
+    text-align: center;
+    padding-top: 80px;
+    box-sizing: border-box;
+    border: 1px solid #E5E5E5;
+    border-radius: 10px;
+    margin-bottom: 10px;
+  }
+}
+</style>