Przeglądaj źródła

feat(map): 增加空白

gemercheung 1 rok temu
rodzic
commit
6456bcfbb0
2 zmienionych plików z 23 dodań i 1 usunięć
  1. 23 1
      src/app/map/App.vue
  2. BIN
      src/assets/image/empty__empty.png

+ 23 - 1
src/app/map/App.vue

@@ -22,7 +22,7 @@
   <div ref="mapEl" class="map-container" v-show="currentType(0)"></div>
   <div class="card-container" v-show="currentType(1)">
     <div class="card-list">
-      <template v-for="item of list">
+      <template v-for="item of list" v-if="list.length > 0 && false">
         <el-card
           style="width: 480px"
           shadow="hover"
@@ -44,6 +44,12 @@
           </div>
         </el-card>
       </template>
+      <template v-else>
+        <div class="no-data">
+          <img :src="emptyBG" />
+          <span>暂无数据</span>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -60,6 +66,7 @@ import { watch } from "vue";
 import { ElLoading } from "element-plus";
 import linkIco from "@/assets/image/fire.ico";
 import { useUrlSearchParams } from "@vueuse/core";
+import emptyBG from "@/assets/image/empty__empty.png";
 
 const params = useUrlSearchParams("history");
 console.log("params", params.caseId);
@@ -285,6 +292,8 @@ body {
 
 .cover {
   cursor: pointer;
+  max-height: 220px;
+  object-fit: cover;
 }
 
 .card {
@@ -302,4 +311,17 @@ body {
 .amap-ctrl-list-layer {
   z-index: 100000;
 }
+.no-data {
+  width: 100%;
+  height: 100%;
+  /* background: red; */
+  min-height: 530px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.no-data span {
+  color: #999;
+}
 </style>

BIN
src/assets/image/empty__empty.png