搜索无结果时展示提示信息。

code/src/assets/css/reset.css

@@ -393,22 +393,35 @@ body {
     background-color: #e8e3d1;
 }
 
-.searNone {
+.searchNone {
     width: 100%;
     padding-top: 100px;
     text-align: center;
+    animation: delay-show 1.2s forwards;
 }
 
-.searNone img {
+.searchNone img {
     width: 100px;
 }
 
-.searNone p {
+.searchNone p {
     color: #333333;
     font-size: 18px;
     margin-top: 8px;
 }
 
+@keyframes delay-show {
+  0% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .goodBotInfo {
     overflow: hidden;
     text-overflow: ellipsis;

code/src/views/collection/index.vue

@@ -79,10 +79,9 @@
         </div>
       </div>
 
-      <div class="searNone" style="padding-top: 200px" v-else>
-        <img src="@/assets/images/resource/searNone.svg" alt="" />
+      <div class="searchNone" style="padding-top: 200px" v-else>
+        <img src="@/assets/images/resource/searchNone.svg" alt="" />
         <p>暂时没有数据</p>
-        <p>请试一下其他关键字</p>
       </div>
     </div>
     <transition name="fade">

code/src/views/collection/mobile.vue

@@ -10,7 +10,7 @@
     </div>
 
     <div class="masonrycon">
-      <div v-if="list" class="masonry" v-infinite-scroll="getData" infinite-scroll-disabled="busy"
+      <div v-if="list && list.length > 0" class="masonry" v-infinite-scroll="getData" infinite-scroll-disabled="busy"
         :infinite-scroll-immediate-check="true" infinite-scroll-distance="30" v-masonry="containerId" fit-width="true"
         gutter="10" initLayout="true" transition-duration="0.3s" item-selector=".item">
         <div @click="onClickCollection(item)" v-masonry-tile class="item" :class="{ odd: index % 2 != 0 }"
@@ -21,9 +21,12 @@
           <p class="goodBotInfo">{{ item.name }}</p>
         </div>
       </div>
-    </div>
-
 
+      <div class="searchNone" style="padding-top: 40%" v-else>
+        <img src="@/assets/images/resource/searchNone.svg" alt="" />
+        <p>暂时没有数据</p>
+      </div>
+    </div>
   </div>
 
   <teleport to='body'>

code/src/views/exhibition/exhibition/collections.vue

@@ -78,10 +78,9 @@
       </div>
     </div>
 
-    <div class="searNone" v-else>
-      <img src="@/assets/images/resource/searNone.svg" alt="" />
+    <div class="searchNone" v-else>
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
       <p>暂时没有数据</p>
-      <p>请试一下其他关键字</p>
     </div>
   </div>
   <transition name="fade">

code/src/views/exhibition/exhibition/mobile/collections.vue

@@ -9,7 +9,7 @@
       </ul>
     </div>
 
-    <div v-if="list" class="masonry" v-infinite-scroll="getData" infinite-scroll-disabled="busy"
+    <div v-if="list && list.length > 0" class="masonry" v-infinite-scroll="getData" infinite-scroll-disabled="busy"
       :infinite-scroll-immediate-check="true" infinite-scroll-distance="30" v-masonry="containerId" fit-width="true"
       gutter="10" initLayout="true" transition-duration="0.3s" item-selector=".item">
       <div @click="onClickCollection(item)" v-masonry-tile class="item" :class="{ odd: index % 2 != 0 }" v-for="(item, index) in list" :key="index">
@@ -19,6 +19,11 @@
         <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
+
+    <div class="searchNone" style="padding-top: 20px" v-else>
+      <img src="@/assets/images/resource/searchNone.svg" alt="" style="width: 70px;" />
+      <p style="font-size: 14px;">暂时没有数据</p>
+    </div>
   </div>
 
   <teleport to='body'>

code/src/views/exhibition/exhibition/mobile/permanent.vue

@@ -6,6 +6,10 @@
         <exItem :exData="item" />
       </li>
     </ul>
+    <div class="searchNone" style="padding-top: 10px" v-if="list && list.length === 0">
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
+      <p>暂时没有数据</p>
+    </div>
   </div>
 
   <teleport to='body'>

code/src/views/exhibition/exhibition/permanent.vue

@@ -16,10 +16,9 @@
         :placeholder="'请输入展览名称'"
       ></ui-search>
     </div>
-    <div class="searNone" v-if="list.length === 0">
-      <img src="@/assets/images/resource/searNone.svg" alt="" />
+    <div class="searchNone" v-if="list.length === 0">
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
       <p>暂时没有数据</p>
-      <p>请试一下其他关键字</p>
     </div>
     <ul
       v-else

code/src/views/gdmuseum/exhibition/collections.vue

@@ -67,10 +67,9 @@
         <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
-    <div class="searNone" v-else>
-      <img src="@/assets/images/resource/searNone.svg" alt="" />
+    <div class="searchNone" v-else>
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
       <p>暂时没有数据</p>
-      <p>请试一下其他关键字</p>
     </div>
   </div>
 

code/src/views/gdmuseum/exhibition/mobile/collections.vue

@@ -9,7 +9,7 @@
       </ul>
     </div>
 
-    <div v-if="list" class="masonry" v-infinite-scroll="getData" infinite-scroll-disabled="busy"
+    <div v-if="list && list.length > 0" class="masonry" v-infinite-scroll="getData" infinite-scroll-disabled="busy"
       :infinite-scroll-immediate-check="true" infinite-scroll-distance="30" v-masonry="containerId" fit-width="true"
       gutter="10" initLayout="true" transition-duration="0.3s" item-selector=".item">
       <div @click="onClickCollection(item)" v-masonry-tile class="item" :class="{ odd: index % 2 != 0 }" v-for="(item, index) in list" :key="index">
@@ -19,6 +19,11 @@
         <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
+
+    <div class="searchNone" style="padding-top: 10px" v-else>
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
+      <p>暂时没有数据</p>
+    </div>
   </div>
 
   <teleport to='body'>

code/src/views/gdmuseum/exhibition/mobile/permanent.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="permanent">
-    <ul v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
+    <ul v-if="list.length > 0" v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
       infinite-scroll-distance="30">
       <li v-for="(item,i) in list" :key="i">
         <exItem :exData="item" />
       </li>
     </ul>
+
+    <div class="searchNone" style="padding-top: 10px" v-else>
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
+      <p>暂时没有数据</p>
+    </div>
   </div>
 
   <teleport to='body'>

code/src/views/gdmuseum/exhibition/mobile/review.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="permanent">
-    <ul v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
+    <ul v-if="list.length > 0" v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
       infinite-scroll-distance="30">
       <li v-for="(item,i) in list" :key="i">
         <exItem :exData="item" />
       </li>
     </ul>
+
+    <div class="searchNone" style="padding-top: 10px" v-else>
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
+      <p>暂时没有数据</p>
+    </div>
   </div>
 
   <teleport to='body'>

code/src/views/gdmuseum/exhibition/mobile/temporary.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="permanent">
-    <ul v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
+    <ul v-if="list.length > 0" v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
       infinite-scroll-distance="30">
       <li v-for="(item,i) in list" :key="i">
         <exItem :exData="item" />
       </li>
     </ul>
+
+    <div class="searchNone" style="padding-top: 10px;" v-else>
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
+      <p>暂时没有数据</p>
+    </div>
   </div>
 
   <teleport to='body'>

code/src/views/gdmuseum/exhibition/permanent.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="temporary">
     <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
-    <div class="searNone" v-if="list.length === 0">
-      <img src="@/assets/images/resource/searNone.svg" alt="" />
+    <div class="searchNone" v-if="list.length === 0">
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
       <p>暂时没有数据</p>
-      <p>请试一下其他关键字</p>
     </div>
 
     <ul

code/src/views/gdmuseum/exhibition/review.vue

@@ -9,10 +9,9 @@
 
       <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
     <!-- </div> -->
-    <div class="searNone" v-if="list.length === 0">
-      <img src="@/assets/images/resource/searNone.svg" alt="" />
+    <div class="searchNone" v-if="list.length === 0">
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
       <p>暂时没有数据</p>
-      <p>请试一下其他关键字</p>
     </div>
     <ul v-else v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
       infinite-scroll-distance="30" :key="ran">

code/src/views/gdmuseum/exhibition/temporary.vue

@@ -9,10 +9,9 @@
 
     <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
     <!-- </div> -->
-    <div class="searNone" v-if="list.length === 0">
-      <img src="@/assets/images/resource/searNone.svg" alt="" />
+    <div class="searchNone" v-if="list.length === 0">
+      <img src="@/assets/images/resource/searchNone.svg" alt="" />
       <p>暂时没有数据</p>
-      <p>请试一下其他关键字</p>
     </div>
     <ul
       v-else

code/src/views/home/aside.vue

@@ -25,7 +25,7 @@
             </ul>
           </li>
         </ul>
-        <div class="searNone">暂无数据</div>
+        <div v-else class="searchNone">暂无数据</div>
       </section>
 
       <div class="sidebar">
@@ -251,7 +251,7 @@ onMounted(() => {
           }
         }
       }
-      .searNone{
+      .searchNone{
         color: #999999;
         width: 100%;
         height: 100%;

code/src/views/home/maside.vue

@@ -23,6 +23,7 @@
                 </ul>
               </li>
             </ul>
+            <div v-else class="no-search-result">暂无数据</div>
           </section>
 
           <div class="sidebar">
@@ -236,6 +237,15 @@ onMounted(() => {
             }
           }
         }
+
+        .no-search-result {
+          color: #999999;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
 
       .sidebar {