lcw

src/views/home/components/Checkpoint.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="mian_box">
-    <div class="item" v-for="item in dataList" :key="item">{{ item.zdmc }}:<span
-        @click="openDialog(item.dm)">{{ item.num }}</span></div>
+    <div class="item" v-for="item in dataList" :key="item">
+      <img :src="item.img" alt="" class="item-img" />
+      <div class="item-content">
+        <div class="item-title">{{ item.zdmc }}</div>
+        <div @click="openDialog(item.dm)" class="item-num">{{ item.num }}</div>
+      </div>
+    </div>
   </div>
   <pointList v-model="pointListShow" :lxType="lxType" />
 </template>
 <script setup>
 import pointList from "./pointList.vue";
 import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { divide } from "lodash";
 import { ref, onMounted, reactive } from "vue";
 const lxType = ref();
 const pointListShow = ref(false);
@@ -23,9 +29,37 @@ const openDialog = (val) => {
 onMounted(() => {
   getTotal()
 })
+
+const dataContent = [
+  {
+    key: '临时交通卡点',
+    img: require('@/assets/images/lsjt.png'),
+  },
+  {
+    key: '智能抓拍',
+    img: require('@/assets/images/znzp.png'),
+  },
+  {
+    key: '公安检查站',
+    img: require('@/assets/images/jc.png'),
+  }, {
+    key: '临时治安卡点',
+    img: require('@/assets/images/lsza.png'),
+  },
+]
+
+
 const getTotal = () => {
   qcckGet({}, "/mosty-jcz/jcztj/jczZqlxtj").then(res => {
-    dataList.value = res;
+    dataList.value = res.map(item => {
+      const content = dataContent.findIndex(items => items.key == item.zdmc)
+      return {
+        ...item,
+        img: dataContent[content].img
+      }
+    });
+    console.log(dataList.value);
+
   })
 }
 </script>
@@ -37,5 +71,35 @@ const getTotal = () => {
   color: #fff;
   align-items: center;
   height: 100%;
+  flex-wrap: wrap;
+width: 90%;
+margin: auto;
+  .item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: 50%;
+  }
+
+  .item-img {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+  }
+
+  .item-content {
+    flex: 1;
+  }
+
+  .item-title {
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .item-num {
+    text-align: center;
+    color: #00f0ff;
+    cursor: pointer;
+  }
 }
 </style>