Merge branch 'master' of http://face3d.4dage.com:7005/chenzhiguang/guangdongVR_museum

backstage/src/pages/content/collection/componets/audio.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="30" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

backstage/src/pages/content/collection/componets/img.vue

@@ -4,7 +4,7 @@
       <el-input
        class="goodNameInput"
         v-model="form.name"
-        :maxlength="INPUTLENGTH * 5"
+        :maxlength="30"
         show-word-limit
       ></el-input>
     </el-form-item>

backstage/src/pages/content/collection/componets/model.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="30" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

backstage/src/pages/content/collection/componets/video.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="30" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

backstage/src/pages/system/statistics/index.vue

@@ -99,12 +99,14 @@ export default {
     getReport() {
       getReportDetail((data) => {
         this.focus = data.data.ranking.map((item, i) => {
-          return {
-            num: i + 1,
-            zan: item.visit,
-            name: item.exhibitionName,
-            img: item.thumb,
-          };
+          if (i < 3) {
+            return {
+              num: i + 1,
+              zan: item.visit,
+              name: item.exhibitionName,
+              img: item.thumb,
+            };
+          }
         });
 
         let all = 0;
@@ -163,7 +165,7 @@ export default {
 
   .ttop {
     width: 100%;
-    height: 40%;
+    height: 50%;
     display: flex;
     justify-content: space-between;
 
@@ -217,7 +219,7 @@ export default {
 
   .tbottom {
     width: 100%;
-    height: 58%;
+    height: 48%;
     border-radius: 8px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   }

code/src/assets/css/public.css

@@ -1,6 +1,7 @@
-*{
+* {
   /* font-family: '\5B8B\4F53'; */
 }
+
 :root {
   --main-color: #B61E22;
   --font-color: #fff;
@@ -17,9 +18,9 @@
 
 }
 
-*{
+* {
   -webkit-backface-visibility: hidden;
-  -webkit-transform-style: preserve-3d;
+  /* -webkit-transform-style: preserve-3d; */
 }
 
 
@@ -37,10 +38,12 @@
 .right-leave-to {
   transform: translate3d(100%, 0, 0);
 }
+
 .right-leave-from,
 .right-enter-to {
   transform: translate3d(0, 0, 0);
 }
+
 .right-enter-active,
 .right-leave-active {
   transition: all 0.3s;
@@ -51,12 +54,13 @@
 .slide-leave-to {
   max-height: 0;
 }
+
 .slide-leave-from,
 .slide-enter-to {
   max-height: 300px;
 }
+
 .slide-enter-active,
 .slide-leave-active {
   overflow: hidden;
-}
-
+}

code/src/assets/css/reset.css

@@ -366,24 +366,51 @@ progress {
     border-radius: 10px;
     background: transparent;
 }
-.select-float{
+
+.select-float {
     background: rgba(182, 30, 34, 0.9) !important;
     border-radius: 10px !important;
     padding-bottom: 15px !important;
 }
-.select-replace{
+
+.select-replace {
     width: calc(100% - 3px) !important;
     background-color: transparent !important;
 }
+
 .select-replace::-webkit-scrollbar-thumb {
     /*滚动条里面小方块*/
     border-radius: 30px !important;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     background: var(--font-active) !important;
 }
-.gdmuseum{
+
+.gdmuseum {
     width: calc(100% - 3px) !important;
 }
-body{
+
+body {
     background-color: #e8e3d1;
+}
+
+.searNone {
+    width: 100%;
+    padding-top: 100px;
+    text-align: center;
+}
+
+.searNone img {
+    width: 100px;
+}
+
+.searNone p {
+    color: #333333;
+    font-size: 18px;
+    margin-top: 8px;
+}
+
+.goodBotInfo {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

code/src/components/Audio.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="audiocon">
-    <audio id="audioTag" class="noshow" autoplay :src="'http://gdbwg.4dage.com'+adata.filePath"></audio>
+    <audio
+      id="audioTag"
+      class="noshow"
+      autoplay
+      :src="'http://gdbwg.4dage.com' + adata.filePath"
+    ></audio>
     <div class="audiotop">
       <div class="img-con">
-        <span>{{ adata.name }}</span>
-        <p>{{ adata.description }}</p>
+        <div class="videoTxtInfo">
+          <span>{{ adata.name }}</span>
+          <p>{{ adata.description }}</p>
+        </div>
+
         <!-- <img :src="require('@/assets/images/proj2022/icon/voice.png')" alt="" /> -->
       </div>
     </div>
@@ -15,18 +23,25 @@
           <div :style="{ width: currentPosi + '%' }" class="dot"></div>
         </div>
         <div class="time">
-          <span>{{ time }}</span><span> / {{ allTime }}</span>
+          <span>{{ time }}</span
+          ><span> / {{ allTime }}</span>
         </div>
       </div>
 
       <div class="bofang">
         <!-- <img :src="require(`@/assets/images/icon/voice_back.png`)" alt=""> -->
-        <img class="bf" @click="bofang" :src="require(`@/assets/images/icon/${isPlay ? 'voice_stop' : 'voice_play'}.png`)"
-          alt="" />
+        <img
+          class="bf"
+          @click="bofang"
+          :src="
+            require(`@/assets/images/icon/${
+              isPlay ? 'voice_stop' : 'voice_play'
+            }.png`)
+          "
+          alt=""
+        />
         <!-- <img :src="require(`@/assets/images/icon/voice_next.png`)" alt=""> -->
-
       </div>
-
     </div>
   </div>
 </template>
@@ -72,7 +87,8 @@ export default {
       return minute + isM0 + sec;
     },
     updateProgress() {
-      this.currentPosi = (this.i_audio.currentTime / this.i_audio.duration) * 100;
+      this.currentPosi =
+        (this.i_audio.currentTime / this.i_audio.duration) * 100;
       this.time = this.transTime(this.i_audio.currentTime);
     },
 
@@ -139,18 +155,21 @@ export default {
     .img-con {
       align-items: center;
       margin: 20px 0;
-      >span {
-        font-size: 22px;
-        font-weight: bold;
-      }
+      .videoTxtInfo {
+        > span {
+          font-size: 22px;
+          font-weight: bold;
+        }
 
-      >p {
-        margin-top: 12px;
-        color: #D9D9D9;
+        > p {
+          word-break: break-all;
+          margin-top: 12px;
+          color: #d9d9d9;
+        }
       }
     }
 
-    >img {
+    > img {
       width: 18px;
       cursor: pointer;
     }
@@ -161,7 +180,6 @@ export default {
     height: 33%;
     margin: 0 auto;
     padding-left: 13px;
-  
 
     .barcon {
       display: flex;
@@ -184,7 +202,7 @@ export default {
           height: 100%;
           overflow: hidden;
           position: absolute;
-          background: #EBEBEB;
+          background: #ebebeb;
           top: 50%;
           transform: translateY(-50%);
           border-radius: 12px;
@@ -195,7 +213,7 @@ export default {
           display: inline-block;
           position: absolute;
           z-index: 999;
-          background-color: #B61E22;
+          background-color: #b61e22;
           transform: translateY(-50%);
           top: 50%;
           left: 0;
@@ -203,28 +221,27 @@ export default {
           height: 100%;
           cursor: pointer;
           pointer-events: none;
-          &::after{
+          &::after {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
             right: -20px;
             border-radius: 50%;
-            content: '';
+            content: "";
             width: 40px;
             height: 40px;
-            background: #EECC63;
-            border: 5px solid #B61E22;
+            background: #eecc63;
+            border: 5px solid #b61e22;
           }
         }
       }
 
-
       .time {
         width: 100px;
         text-align: center;
         margin: 0 auto;
 
-        >span {
+        > span {
           font-size: 12px;
 
           &:first-of-type {
@@ -238,20 +255,20 @@ export default {
       }
     }
 
-    .bofang{
+    .bofang {
       justify-content: center;
       width: 100%;
       display: flex;
       text-align: center;
       align-items: center;
       margin-top: 20px;
-      >img{
+      > img {
         width: 60px;
         height: 60px;
         margin: 0 20px;
         cursor: pointer;
       }
-      .bf{
+      .bf {
         width: 80px;
         height: 80px;
       }
@@ -268,109 +285,107 @@ export default {
 }
 
 @media screen and (max-width: 1000px) {
-  .audiocon{
+  .audiocon {
     width: 100%;
     .audiobtm {
-    width: 100%;
-    height: 33%;
-    margin: 0 auto;
-    padding-left: 13px;
-  
-
-    .barcon {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
       width: 100%;
-      margin: 20px 0;
-      .bar {
-        position: relative;
-        background: none;
-        display: flex;
-        overflow: visible;
-        height: 14px;
-        border-radius: 4px;
-        margin: 0 10px 0 16px;
-        flex: auto;
-
-        .activeLine {
-          cursor: pointer;
-          height: 100%;
-          overflow: hidden;
-          position: absolute;
-          background: #EBEBEB;
-          top: 50%;
-          transform: translateY(-50%);
-          border-radius: 12px;
-          width: 100%;
-        }
+      height: 33%;
+      margin: 0 auto;
+      padding-left: 13px;
 
-        .dot {
-          display: inline-block;
-          position: absolute;
-          z-index: 999;
-          background-color: #B61E22;
-          transform: translateY(-50%);
-          top: 50%;
-          left: 0;
-          border-radius: 12px;
-          height: 100%;
-          cursor: pointer;
-          pointer-events: none;
-          &::after{
+      .barcon {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin: 20px 0;
+        .bar {
+          position: relative;
+          background: none;
+          display: flex;
+          overflow: visible;
+          height: 14px;
+          border-radius: 4px;
+          margin: 0 10px 0 16px;
+          flex: auto;
+
+          .activeLine {
+            cursor: pointer;
+            height: 100%;
+            overflow: hidden;
             position: absolute;
+            background: #ebebeb;
             top: 50%;
             transform: translateY(-50%);
-            right: -20px;
-            border-radius: 50%;
-            content: '';
-            width: 40px;
-            height: 40px;
-            background: #EECC63;
-            border: 5px solid #B61E22;
+            border-radius: 12px;
+            width: 100%;
           }
-        }
-      }
 
+          .dot {
+            display: inline-block;
+            position: absolute;
+            z-index: 999;
+            background-color: #b61e22;
+            transform: translateY(-50%);
+            top: 50%;
+            left: 0;
+            border-radius: 12px;
+            height: 100%;
+            cursor: pointer;
+            pointer-events: none;
+            &::after {
+              position: absolute;
+              top: 50%;
+              transform: translateY(-50%);
+              right: -20px;
+              border-radius: 50%;
+              content: "";
+              width: 40px;
+              height: 40px;
+              background: #eecc63;
+              border: 5px solid #b61e22;
+            }
+          }
+        }
 
-      .time {
-        width: 100px;
-        text-align: center;
-        margin: 0 auto;
+        .time {
+          width: 100px;
+          text-align: center;
+          margin: 0 auto;
 
-        >span {
-          font-size: 12px;
+          > span {
+            font-size: 12px;
 
-          &:first-of-type {
-            color: #fff;
-          }
+            &:first-of-type {
+              color: #fff;
+            }
 
-          &:last-of-type {
-            color: #fff;
+            &:last-of-type {
+              color: #fff;
+            }
           }
         }
       }
-    }
 
-    .bofang{
-      justify-content: center;
-      width: 100%;
-      display: flex;
-      text-align: center;
-      align-items: center;
-      margin-top: 20px;
-      >img{
-        width: 40px;
-        height: 40px;
-        margin: 0 20px;
-        cursor: pointer;
-      }
-      .bf{
-        width: 60px;
-        height: 60px;
+      .bofang {
+        justify-content: center;
+        width: 100%;
+        display: flex;
+        text-align: center;
+        align-items: center;
+        margin-top: 20px;
+        > img {
+          width: 40px;
+          height: 40px;
+          margin: 0 20px;
+          cursor: pointer;
+        }
+        .bf {
+          width: 60px;
+          height: 60px;
+        }
       }
     }
   }
-  }
 }
 </style>

code/src/components/exItem/index.vue

@@ -4,14 +4,14 @@
     <template v-if="currentRouteName=='gdmuseum'">
       <img :src="`http://gdbwg.4dage.com${exData.thumb}`" alt="" />
       <p class="title">{{ exData.name }}</p>
-      <p v-if="exData.type!='long'" class="date">{{ exData.timeEnd }}</p>
+      <p v-if="exData.type!='long'" class="date">{{exData.timeStart}} 至 {{ exData.timeEnd }}</p>
     </template>
 
     <div v-else class="heng">
       <div class="img" :style="{backgroundImage:`url(http://gdbwg.4dage.com${exData.thumb})`}"></div>
       <div class="info">
         <p class="title">{{ exData.name }}</p>
-        <p v-if="exData.type!='long'" class="date">{{ exData.timeEnd }}</p>
+        <p v-if="exData.type!='long'" class="date">{{exData.timeStart}} 至 {{ exData.timeEnd }}</p>
         <span class="type">{{exData.type=='long'?'常设展览':'临时展览'}}</span>
       </div>
 

code/src/components/showCollection/index.vue

@@ -1,37 +1,45 @@
 <template>
   <div class="wrapper">
-    <showCollection @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="cItem"></showCollection>
+    <showCollection
+      @hideSlide="
+        (data) => {
+          showSidebar = data;
+        }
+      "
+      class="ui-broadcast"
+      :item="cItem"
+    ></showCollection>
   </div>
 </template>
 <script>
-import showCollection from './showCollection'
+import showCollection from "./showCollection";
 import { getDetailById } from "@/config/api";
 
 export default {
-  props: ['item'],
+  props: ["item"],
   components: {
-    showCollection
+    showCollection,
   },
   data() {
     return {
       cItem: { ...this.item },
-      showSidebar: false
+      showSidebar: false,
     };
   },
   methods: {
     handleItem(data) {
-      this.cItem = data
+      this.cItem = data;
     },
     getCollectionDetail() {
       getDetailById("goods", { id: this.cItem.id }, (res) => {
         console.log(res.data);
-        this.cItem = res.data
+        this.cItem = res.data;
       });
-    }
+    },
   },
   mounted() {
-    this.getCollectionDetail()
-  }
+    this.getCollectionDetail();
+  },
 };
 </script>
 
@@ -46,11 +54,11 @@ export default {
   .ui-broadcast {
     width: 100%;
     height: 100%;
-    position: fixed;
+    position: absolute;
     z-index: 99999;
     top: 0;
     left: 0;
-    background: linear-gradient(180deg, #595959 0%, #8A8A8A 100%);
+    background: linear-gradient(#595959, #8A8A8A);
   }
 }
 </style>

code/src/components/showCollection/showCollection.vue

@@ -8,6 +8,11 @@
       />
 
       <template v-if="cItem.entity.type == 'img'">
+        <div class="imgTxtInfo">
+          <h3>{{ cItem.entity.name }}</h3>
+          <p>{{ cItem.entity.description }}</p>
+        </div>
+
         <div class="swcon swiper-container" id="imglist">
           <ul class="swiper-wrapper">
             <li
@@ -17,19 +22,21 @@
             >
               <div class="sl-item">
                 <img :src="sub.filePath" />
-                <p>{{ cItem.entity.name }}</p>
               </div>
             </li>
           </ul>
         </div>
         <template v-if="cItem.file.length > 1">
           <img
+            :class="{ noneAc: active === 0 }"
             class="vpagination left"
             :src="require('@/assets/images/icon/left.png')"
             @click="slide('slidePrev')"
             alt=""
           />
           <img
+            v-if="cItem && cItem.file"
+            :class="{ noneAc: active === cItem.file.length - 1 }"
             class="vpagination right"
             :src="require('@/assets/images/icon/right.png')"
             @click="slide('slideNext')"
@@ -46,6 +53,7 @@
       </template>
 
       <template v-else>
+
         <iframe
           v-if="cItem.entity.type == 'model'"
           :src="`/model-page/model.html?m=${cItem.entity.filePath}`"
@@ -63,9 +71,17 @@
         ></video>
 
         <vAudio v-else :adata="cItem.entity"></vAudio>
-        <p v-if="cItem.entity.type != 'audio'" class="btmname">
-          {{ cItem.entity.name }}
-        </p>
+        <div
+          v-if="cItem.entity.type != 'audio'"
+          class="txtInfo"
+          :class="{ videoInfo: cItem.entity.type == 'video' }"
+        >
+          <h3 class="btmname">
+            {{ cItem.entity.name }}
+          </h3>
+          <div v-if="cItem.entity.type != 'video'">{{cItem.entity.ageName}}&emsp;{{cItem.entity.textureName}}</div>
+          <p>{{ cItem.entity.description }}</p>
+        </div>
       </template>
     </div>
   </div>
@@ -131,6 +147,59 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.noneAc {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.videoInfo {
+  top: auto !important;
+  width: 80% !important;
+  padding: 0 20px;
+  position: absolute;
+  color: #fff;
+  transform: translateX(-50%);
+  left: 50% !important;
+  bottom: 10px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  h3 {
+    max-width: 30%;
+    word-break: break-all;
+    margin-right: 3%;
+  }
+  p {
+    margin-top: 0 !important;
+    max-width: 65%;
+    word-break: break-all;
+  }
+}
+.imgTxtInfo {
+  top: auto !important;
+  width: 80% !important;
+  padding: 0 20px;
+  position: absolute;
+  color: #fff;
+  transform: translateX(-50%);
+  left: 50% !important;
+  bottom: 40px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  h3 {
+    max-width: 30%;
+    word-break: break-all;
+    margin-right: 3%;
+  }
+  p {
+    margin-top: 0 !important;
+    max-width: 65%;
+    word-break: break-all;
+  }
+}
+
 .img-body {
   width: 100%;
   height: 100%;
@@ -152,13 +221,24 @@ export default {
     width: 50%;
     height: 20%;
   }
-
-  .btmname {
-    transform: translateX(-50%);
-    bottom: 30px;
-    left: 50%;
+  .txtInfo {
     position: absolute;
-    font-size: 24px;
+    top: 50px;
+    left: 60px;
+    width: 240px;
+    &>div{
+      margin-top: 15px;
+      font-size: 16px;
+    }
+    .btmname {
+      word-break: break-all;
+      font-size: 24px;
+    }
+    p {
+      margin-top: 15px;
+      word-break: break-all;
+      font-size: 14px;
+    }
   }
 
   .close {
@@ -172,8 +252,9 @@ export default {
 
   .swcon {
     position: relative;
-    width: 40%;
+    width: 60%;
     height: 100%;
+    cursor: grab;
 
     .swiper-wrapper {
       padding: 0;
@@ -194,22 +275,13 @@ export default {
 
           > img {
             width: auto;
-            max-height: 90vh;
+            max-height: 80%;
             max-width: 100%;
-            cursor: pointer;
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-          }
-
-          > p {
-            color: #fff;
-            position: absolute;
-            bottom: 30px;
-            transform: translateX(-50%);
-            left: 50%;
-            font-size: 24px;
+            object-fit: cover;
           }
         }
       }
@@ -228,12 +300,12 @@ export default {
       width: 10px;
       border-radius: 50%;
       height: 10px;
-      background: rgba(51, 143, 123, 0.24);
+      background: rgba(0, 0, 0, 0.3);
       display: inline-block;
       margin: 0 4px;
 
       &.active {
-        background: #338f7b;
+        background: #fff;
       }
     }
   }
@@ -327,14 +399,6 @@ export default {
       height: 20%;
     }
 
-    .btmname {
-      transform: translateX(-50%);
-      bottom: 30px;
-      left: 50%;
-      position: absolute;
-      font-size: 24px;
-    }
-
     .close {
       position: absolute;
       right: 20px;

code/src/views/collection/index.vue

@@ -3,7 +3,11 @@
     <div class="collections">
       <div class="slebar">
         <div class="sleft">
-          <ui-select :options="museumList" :placeholder="'请选择'" v-model="currentMuseum">
+          <ui-select
+            :options="museumList"
+            :placeholder="'请选择'"
+            v-model="currentMuseum"
+          >
             <template v-slot:option="{ raw }">
               <div>{{ raw.label }}</div>
             </template>
@@ -15,40 +19,74 @@
             </template>
           </ui-select>
 
-          <ui-select :options="types" :placeholder="'藏品种类'" v-model="currentType">
+          <ui-select
+            :options="types"
+            :placeholder="'藏品种类'"
+            v-model="currentType"
+          >
             <template v-slot:option="{ raw }">
               <div>{{ raw.label }}</div>
             </template>
           </ui-select>
 
-          <ui-search v-model="searchKey" :placeholder="'请输入藏品名称'"></ui-search>
+          <ui-search
+            v-model="searchKey"
+            :placeholder="'请输入展览名称'"
+          ></ui-search>
         </div>
 
         <div class="sright">
           <div>分类：</div>
           <ul>
-            <li @click="menuActive = item.id" :class="{ active: menuActive == item.id }" v-for="(item, i) in menu"
-              :key="i">
+            <li
+              @click="menuActive = item.id"
+              :class="{ active: menuActive == item.id }"
+              v-for="(item, i) in menu"
+              :key="i"
+            >
               {{ item.name }}
             </li>
           </ul>
         </div>
       </div>
 
-      <div v-if="list" 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="40" 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">
+      <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="40"
+        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"
+        >
           <div class="itemimg">
             <div :style="`background-image:url(${item.thumb})`"></div>
           </div>
-          <p>{{ item.name }}</p>
+          <p class="goodBotInfo">{{ item.name }}</p>
         </div>
       </div>
+
+      <div class="searNone" style="padding-top: 200px" v-else>
+        <img src="@/assets/images/resource/searNone.svg" alt="" />
+        <p>暂时没有数据</p>
+        <p>请试一下其他关键字</p>
+      </div>
     </div>
     <transition name="fade">
-      <teleport to='body'>
+      <teleport to="body">
         <showCollection v-if="activeCollection" :item="activeCollection" />
       </teleport>
     </transition>
@@ -58,20 +96,22 @@
 
 <script>
 import { defineProps, onMounted, watch, nextTick, ref } from "vue";
-import { getCollectionList, getMuseumList, getAge, getType } from "@/config/api";
+import {
+  getCollectionList,
+  getMuseumList,
+  getAge,
+  getType,
+} from "@/config/api";
 import showCollection from "@/components/showCollection/index.vue";
 import emitter from "@/mitt/index";
 
 export default {
-
   setup(props) {
-
     const containerId = ref("vuemasonry");
     const currentMuseum = ref("");
 
     const museumList = ref([]);
 
-
     // const props = defineProps({
     //   currentMuseumItem: {
     //     type: Object,
@@ -81,19 +121,16 @@ export default {
     //   },
     // });
 
-
     const searchKey = ref("");
     const currentAge = ref("");
     const currentType = ref("");
 
-
-    const busy = ref(false)
+    const busy = ref(false);
 
     const ages = ref([]);
 
     const types = ref([]);
 
-
     const menu = ref([
       {
         id: "",
@@ -120,108 +157,127 @@ export default {
     const menuActive = ref("");
 
     onMounted(() => {
-      getAge(data => {
-        ages.value = data.data.data.map(item => {
+      getAge((data) => {
+        ages.value = data.data.data.map((item) => {
           return {
             ...item,
             label: item.name,
-            value: item.id
-          }
-        })
-      })
+            value: item.id,
+          };
+        });
+      });
 
-      getType(data => {
-        types.value = data.data.data.map(item => {
-          return {
-            ...item,
-            label: item.name,
-            value: item.id
-          }
-        })
-      })
-
-      getMuseumList({
-        "cityId": '',
-        "pageNum": 1,
-        "pageSize": 1000,
-      }, data => {
-        museumList.value = data.data.records.map(item => {
+      getType((data) => {
+        types.value = data.data.data.map((item) => {
           return {
             ...item,
             label: item.name,
-            value: item.id
+            value: item.id,
+          };
+        });
+      });
+
+      getMuseumList(
+        {
+          cityId: "",
+          pageNum: 1,
+          pageSize: 1000,
+        },
+        (data) => {
+          museumList.value = data.data.records.map((item) => {
+            return {
+              ...item,
+              label: item.name,
+              value: item.id,
+            };
+          });
+          if (!props.currentMuseumItem) {
+            currentMuseum.value = museumList.value[0].value;
+          } else {
+            currentMuseum.value = props.currentMuseumItem.id;
           }
-        })
-        if (!props.currentMuseumItem) {
-          currentMuseum.value = museumList.value[0].value
-        } else {
-          currentMuseum.value = props.currentMuseumItem.id
         }
-      })
-    })
-
-    return { ages, types, currentMuseum, menu, currentAge, menuActive, currentType, searchKey, busy, museumList }
+      );
+    });
 
+    return {
+      ages,
+      types,
+      currentMuseum,
+      menu,
+      currentAge,
+      menuActive,
+      currentType,
+      searchKey,
+      busy,
+      museumList,
+    };
   },
   components: { showCollection },
   data() {
     return {
-      activeCollection: '',
+      activeCollection: "",
       list: [],
       paging: {
         pageSize: 10,
         pageNum: 1,
         showSize: 4,
         current: 1,
-      }
-    }
+      },
+    };
   },
 
   watch: {
     searchKey() {
-      this.getData(true)
+      this.getData(true);
     },
     currentAge() {
-      this.getData(true)
+      this.getData(true);
     },
     currentType() {
-      this.getData(true)
+      this.getData(true);
     },
     currentMuseum() {
-      this.getData(true)
-      this.$emit('updateMuseum', this.museumList.find((item => item.id == this.currentMuseum)))
+      this.getData(true);
+      this.$emit(
+        "updateMuseum",
+        this.museumList.find((item) => item.id == this.currentMuseum)
+      );
     },
     menuActive() {
-      this.getData(true)
-    }
+      this.getData(true);
+    },
   },
 
   methods: {
     getData(reset) {
       if (reset) {
-        this.list = []
-        this.busy = false
+        this.list = [];
+        this.busy = false;
       }
-      getCollectionList({
-        "ageId": this.currentAge,
-        "museumId": this.currentMuseum,
-        "type": this.menuActive,
-        "pageNum": this.paging.pageNum,
-        "pageSize": this.paging.pageSize,
-        "searchKey": this.searchKey,
-        "textureId": this.currentType,
-      }, data => {
-        if (data.data.total <= this.list.length) {
-          this.busy = true
-          return
-        }
-        this.list = this.list.concat(data.data.records)
-        this.paging.pageNum += 1
+      getCollectionList(
+        {
+          ageId: this.currentAge,
+          museumId: this.currentMuseum,
+          type: this.menuActive,
+          pageNum: this.paging.pageNum,
+          pageSize: this.paging.pageSize,
+          searchKey: this.searchKey,
+          textureId: this.currentType,
+        },
+        (data) => {
+          if (data.data.total <= this.list.length) {
+            this.busy = true;
+            return;
+          }
+          this.list = this.list.concat(data.data.records);
+          this.paging.pageNum += 1;
 
-        this.$nextTick(() => {
-          this.$redrawVueMasonry(this.containerId);
-        });
-      })
+          this.$nextTick(() => {
+            this.$redrawVueMasonry(this.containerId);
+          });
+        }
+      );
 
       // console.log(this);
       // this.list = this.list.concat([]);
@@ -231,14 +287,14 @@ export default {
       // });
     },
     onClickCollection(data) {
-      this.activeCollection = data
+      this.activeCollection = data;
       console.log(this.activeCollection);
-    }
+    },
   },
   mounted() {
-    emitter.on('closeCollection', () => {
-      this.activeCollection = ''
-    })
+    emitter.on("closeCollection", () => {
+      this.activeCollection = "";
+    });
   },
 };
 </script>
@@ -272,11 +328,11 @@ export default {
         align-items: center;
         color: #333;
 
-        >ul {
+        > ul {
           display: flex;
           align-items: center;
 
-          >li {
+          > li {
             text-align: center;
             margin: 0 10px;
             cursor: pointer;
@@ -311,7 +367,7 @@ export default {
           height: calc(100% - 60px);
           width: 100%;
 
-          >div {
+          > div {
             height: 100%;
             width: 100%;
             background-repeat: no-repeat;

code/src/views/collection/mobile.vue

@@ -18,7 +18,7 @@
           <div class="itemimg">
             <div :style="`background-image:url(${item.thumb})`"></div>
           </div>
-          <p>{{ item.name }}</p>
+          <p class="goodBotInfo">{{ item.name }}</p>
         </div>
       </div>
     </div>

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

@@ -2,7 +2,11 @@
   <div class="collections">
     <div class="slebar">
       <div class="sleft">
-        <ui-select :options="museumList" :placeholder="'请选择'" v-model="currentMuseum">
+        <ui-select
+          :options="museumList"
+          :placeholder="'请选择'"
+          v-model="currentMuseum"
+        >
           <template v-slot:option="{ raw }">
             <div>{{ raw.label }}</div>
           </template>
@@ -14,64 +18,99 @@
           </template>
         </ui-select>
 
-        <ui-select :options="types" :placeholder="'藏品种类'" v-model="currentType">
+        <ui-select
+          :options="types"
+          :placeholder="'藏品种类'"
+          v-model="currentType"
+        >
           <template v-slot:option="{ raw }">
             <div>{{ raw.label }}</div>
           </template>
         </ui-select>
 
-        <ui-search v-model="searchKey" :placeholder="'请输入藏品名称1'"></ui-search>
+        <ui-search
+          v-model="searchKey"
+          :placeholder="'请输入藏品名称'"
+        ></ui-search>
       </div>
 
       <div class="sright">
         <div>分类：</div>
         <ul>
-          <li @click="menuActive = item.id" :class="{ active: menuActive == item.id }" v-for="(item, i) in menu"
-            :key="i">
+          <li
+            @click="menuActive = item.id"
+            :class="{ active: menuActive == item.id }"
+            v-for="(item, i) in menu"
+            :key="i"
+          >
             {{ item.name }}
           </li>
         </ul>
       </div>
     </div>
 
-    <div v-if="list" 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="40" 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">
+    <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="40"
+      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"
+      >
         <div class="itemimg">
           <div :style="`background-image:url(${item.thumb})`"></div>
         </div>
-        <p>{{ item.name }}</p>
+        <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
+
+    <div class="searNone" v-else>
+      <img src="@/assets/images/resource/searNone.svg" alt="" />
+      <p>暂时没有数据</p>
+      <p>请试一下其他关键字</p>
+    </div>
   </div>
   <transition name="fade">
-    <teleport to='body'>
+    <teleport to="body">
       <showCollection v-if="activeCollection" :item="activeCollection" />
     </teleport>
   </transition>
-
 </template>
 
 
 <script>
 import { defineProps, onMounted, watch, nextTick, ref } from "vue";
-import { getCollectionList, getMuseumList, getAge, getType } from "@/config/api";
+import {
+  getCollectionList,
+  getMuseumList,
+  getAge,
+  getType,
+} from "@/config/api";
 import showCollection from "@/components/showCollection/index.vue";
 import emitter from "@/mitt/index";
 
 export default {
   props: ["currentMuseumItem"],
   setup(props) {
-
     const containerId = ref("vuemasonry");
     const currentMuseum = ref("");
 
     const museumList = ref([]);
 
-
-
     // const props = defineProps({
     //   currentMuseumItem: {
     //     type: Object,
@@ -81,19 +120,16 @@ export default {
     //   },
     // });
 
-
     const searchKey = ref("");
     const currentAge = ref("");
     const currentType = ref("");
 
-
-    const busy = ref(false)
+    const busy = ref(false);
 
     const ages = ref([]);
 
     const types = ref([]);
 
-
     const menu = ref([
       {
         id: "",
@@ -120,110 +156,131 @@ export default {
     const menuActive = ref("");
 
     onMounted(() => {
-      getAge(data => {
-        ages.value = data.data.data.map(item => {
+      getAge((data) => {
+        ages.value = data.data.data.map((item) => {
           return {
             ...item,
             label: item.name,
-            value: item.id
-          }
-        })
-      })
+            value: item.id,
+          };
+        });
+      });
 
-      getType(data => {
-        types.value = data.data.data.map(item => {
-          return {
-            ...item,
-            label: item.name,
-            value: item.id
-          }
-        })
-      })
-
-      getMuseumList({
-        "cityId": '',
-        "pageNum": 1,
-        "pageSize": 1000,
-      }, data => {
-        museumList.value = data.data.records.map(item => {
+      getType((data) => {
+        types.value = data.data.data.map((item) => {
           return {
             ...item,
             label: item.name,
-            value: item.id
+            value: item.id,
+          };
+        });
+      });
+
+      getMuseumList(
+        {
+          cityId: "",
+          pageNum: 1,
+          pageSize: 1000,
+        },
+        (data) => {
+          museumList.value = data.data.records
+            .map((item) => {
+              return {
+                ...item,
+                label: item.name,
+                value: item.id,
+              };
+            })
+            .filter((item) => {
+              return item.name !== "广东省博物馆";
+            });
+          if (!props.currentMuseumItem) {
+            currentMuseum.value = museumList.value[0].value;
+          } else {
+            currentMuseum.value = props.currentMuseumItem.id;
           }
-        }).filter(item => {
-          return item.name !== '广东省博物馆'
-        })
-        if (!props.currentMuseumItem) {
-          currentMuseum.value = museumList.value[0].value
-        } else {
-          currentMuseum.value = props.currentMuseumItem.id
         }
-      })
-    })
-
-    return { ages, types, currentMuseum, menu, currentAge, menuActive, currentType, searchKey, busy, museumList }
+      );
+    });
 
+    return {
+      ages,
+      types,
+      currentMuseum,
+      menu,
+      currentAge,
+      menuActive,
+      currentType,
+      searchKey,
+      busy,
+      museumList,
+    };
   },
   components: { showCollection },
   data() {
     return {
-      activeCollection: '',
+      activeCollection: "",
       list: [],
       paging: {
         pageSize: 10,
         pageNum: 1,
         showSize: 4,
         current: 1,
-      }
-    }
+      },
+    };
   },
 
   watch: {
     searchKey() {
-      this.getData(true)
+      this.getData(true);
     },
     currentAge() {
-      this.getData(true)
+      this.getData(true);
     },
     currentType() {
-      this.getData(true)
+      this.getData(true);
     },
     currentMuseum() {
-      this.getData(true)
-      this.$emit('updateMuseum', this.museumList.find((item => item.id == this.currentMuseum)))
+      this.getData(true);
+      this.$emit(
+        "updateMuseum",
+        this.museumList.find((item) => item.id == this.currentMuseum)
+      );
     },
     menuActive() {
-      this.getData(true)
-    }
+      this.getData(true);
+    },
   },
 
   methods: {
     getData(reset) {
       if (reset) {
-        this.list = []
-        this.busy = false
+        this.list = [];
+        this.busy = false;
       }
-      getCollectionList({
-        "ageId": this.currentAge,
-        "museumId": this.currentMuseum,
-        "type": this.menuActive,
-        "pageNum": this.paging.pageNum,
-        "pageSize": this.paging.pageSize,
-        "searchKey": this.searchKey,
-        "textureId": this.currentType,
-      }, data => {
-        if (data.data.total <= this.list.length) {
-          this.busy = true
-          return
-        }
-        this.list = this.list.concat(data.data.records)
-        this.paging.pageNum += 1
+      getCollectionList(
+        {
+          ageId: this.currentAge,
+          museumId: this.currentMuseum,
+          type: this.menuActive,
+          pageNum: this.paging.pageNum,
+          pageSize: this.paging.pageSize,
+          searchKey: this.searchKey,
+          textureId: this.currentType,
+        },
+        (data) => {
+          if (data.data.total <= this.list.length) {
+            this.busy = true;
+            return;
+          }
+          this.list = this.list.concat(data.data.records);
+          this.paging.pageNum += 1;
 
-        this.$nextTick(() => {
-          this.$redrawVueMasonry(this.containerId);
-        });
-      })
+          this.$nextTick(() => {
+            this.$redrawVueMasonry(this.containerId);
+          });
+        }
+      );
 
       // console.log(this);
       // this.list = this.list.concat([]);
@@ -233,14 +290,14 @@ export default {
       // });
     },
     onClickCollection(data) {
-      this.activeCollection = data
+      this.activeCollection = data;
       console.log(this.activeCollection);
-    }
+    },
   },
   mounted() {
-    emitter.on('closeCollection', () => {
-      this.activeCollection = ''
-    })
+    emitter.on("closeCollection", () => {
+      this.activeCollection = "";
+    });
   },
 };
 </script>
@@ -269,11 +326,11 @@ export default {
       align-items: center;
       color: #333;
 
-      >ul {
+      > ul {
         display: flex;
         align-items: center;
 
-        >li {
+        > li {
           text-align: center;
           margin: 0 10px;
           cursor: pointer;
@@ -308,7 +365,7 @@ export default {
         height: calc(100% - 60px);
         width: 100%;
 
-        >div {
+        > div {
           height: 100%;
           width: 100%;
           background-repeat: no-repeat;

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

@@ -16,7 +16,7 @@
         <div class="itemimg">
           <div :style="`background-image:url(${item.thumb})`"></div>
         </div>
-        <p>{{ item.name }}</p>
+        <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
   </div>

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

@@ -1,18 +1,35 @@
 <template>
   <div class="temporary">
     <div class="slebar">
-      <ui-select :options="museumList" :placeholder="'请选择'" v-model="currentMuseum">
+      <ui-select
+        :options="museumList"
+        :placeholder="'请选择'"
+        v-model="currentMuseum"
+      >
         <template v-slot:option="{ raw }">
           <div>{{ raw.label }}</div>
         </template>
       </ui-select>
 
-      <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
+      <ui-search
+        v-model="searchKey"
+        :placeholder="'请输入展览名称'"
+      ></ui-search>
     </div>
-
-    <ul v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
-      infinite-scroll-distance="30" :key="ran">
-      <li v-for="(item,i) in list" :key="i">
+    <div class="searNone" v-if="list.length === 0">
+      <img src="@/assets/images/resource/searNone.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"
+    >
+      <li v-for="(item, i) in list" :key="i">
         <exItem :exData="item" />
       </li>
     </ul>
@@ -33,21 +50,19 @@ const props = defineProps({
   currentMuseumItem: {
     type: Object,
     default: () => {
-      return {}
+      return {};
     },
   },
 });
 
-const emit = defineEmits(['updateMuseum'])
-
+const emit = defineEmits(["updateMuseum"]);
 
-const busy = ref(false)
+const busy = ref(false);
 
 const list = ref([]);
 
 const museumList = ref([]);
 
-
 let paging = ref({
   pageSize: 10,
   pageNum: 1,
@@ -55,63 +70,73 @@ let paging = ref({
 });
 
 watch(searchKey, () => {
-  getData(true)
+  getData(true);
 });
 
 watch(currentMuseum, () => {
-  getData(true)
-  emit('updateMuseum', museumList.value.find(item => item.id == currentMuseum.value))
+  getData(true);
+  emit(
+    "updateMuseum",
+    museumList.value.find((item) => item.id == currentMuseum.value)
+  );
 });
 
-
 const getData = (reset = null) => {
   if (reset) {
-    list.value = []
-    busy.value = false
+    list.value = [];
+    busy.value = false;
   }
 
   if (busy.value) {
-    return
+    return;
   }
 
-  getExhibitionList({
-    "pageNum": paging.value.pageNum,
-    "pageSize": paging.value.pageSize,
-    "museumId": currentMuseum.value,
-    "searchKey": searchKey.value,
-    "type": ""
-  }, data => {
-    if (data.data.total <= list.value.length) {
-      busy.value = true
-      return
+  getExhibitionList(
+    {
+      pageNum: paging.value.pageNum,
+      pageSize: paging.value.pageSize,
+      museumId: currentMuseum.value,
+      searchKey: searchKey.value,
+      type: "",
+    },
+    (data) => {
+      if (data.data.total <= list.value.length) {
+        busy.value = true;
+        return;
+      }
+      list.value = list.value.concat(data.data.records);
+      paging.value.pageNum += 1;
     }
-    list.value = list.value.concat(data.data.records)
-    paging.value.pageNum += 1
-  })
-}
+  );
+};
 
 onMounted(() => {
-  getMuseumList({
-    "cityId": '',
-    "pageNum": 1,
-    "pageSize": 1000,
-  }, data => {
-    museumList.value = data.data.records.map(item => {
-      return {
-        ...item,
-        label: item.name,
-        value: item.id
+  getMuseumList(
+    {
+      cityId: "",
+      pageNum: 1,
+      pageSize: 1000,
+    },
+    (data) => {
+      museumList.value = data.data.records
+        .map((item) => {
+          return {
+            ...item,
+            label: item.name,
+            value: item.id,
+          };
+        })
+        .filter((item) => {
+          return item.name !== "广东省博物馆";
+        });
+      if (!props.currentMuseumItem) {
+        currentMuseum.value = museumList.value[0].value;
+      } else {
+        currentMuseum.value = props.currentMuseumItem.id;
       }
-    }).filter(item => {
-      return item.name !== '广东省博物馆'
-    })
-    if (!props.currentMuseumItem) {
-      currentMuseum.value = museumList.value[0].value
-    } else {
-      currentMuseum.value = props.currentMuseumItem.id
     }
-  })
-})
+  );
+});
 </script>
   
 <style lang="scss" scoped>
@@ -122,15 +147,15 @@ onMounted(() => {
   .slebar {
     display: flex;
 
-    >div {
+    > div {
       margin-left: 20px;
     }
   }
 
-  >ul {
+  > ul {
     width: 100%;
 
-    >li {
+    > li {
       width: 100%;
       position: relative;
 

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

@@ -8,74 +8,100 @@
           </template>
         </ui-select>
 
-        <ui-select :options="types" :placeholder="'藏品种类'" v-model="currentType">
+        <ui-select
+          :options="types"
+          :placeholder="'藏品种类'"
+          v-model="currentType"
+        >
           <template v-slot:option="{ raw }">
             <div>{{ raw.label }}</div>
           </template>
         </ui-select>
 
-        <ui-search v-model="searchKey" :placeholder="'请输入藏品名称'"></ui-search>
+        <ui-search
+          v-model="searchKey"
+          :placeholder="'请输入藏品名称'"
+        ></ui-search>
       </div>
 
       <div class="sright">
         <div>分类：</div>
         <ul>
-          <li @click="menuActive = item.id" :class="{ active: menuActive == item.id }" v-for="(item, i) in menu"
-            :key="i">
+          <li
+            @click="menuActive = item.id"
+            :class="{ active: menuActive == item.id }"
+            v-for="(item, i) in menu"
+            :key="i"
+          >
             {{ item.name }}
           </li>
         </ul>
       </div>
     </div>
 
-    <div v-if="list" 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="40" 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">
+    <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="40"
+      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"
+      >
         <div class="itemimg">
           <div :style="`background-image:url(${item.thumb})`"></div>
         </div>
-        <p>{{ item.name }}</p>
+        <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
+    <div class="searNone" v-else>
+      <img src="@/assets/images/resource/searNone.svg" alt="" />
+      <p>暂时没有数据</p>
+      <p>请试一下其他关键字</p>
+    </div>
   </div>
 
   <transition name="fade">
-    <teleport to='body'>
+    <teleport to="body">
       <showCollection v-if="activeCollection" :item="activeCollection" />
     </teleport>
   </transition>
-
-
 </template>
 
 <script>
-
 import { onMounted, watch, nextTick, ref } from "vue";
 import { getCollectionList, getAge, getType } from "@/config/api";
 
 import showCollection from "@/components/showCollection/index.vue";
 import emitter from "@/mitt/index";
 
-
 export default {
   setup() {
-
     const containerId = ref("vuemasonry");
 
     const searchKey = ref("");
     const currentAge = ref("");
     const currentType = ref("");
 
-
-    const busy = ref(false)
+    const busy = ref(false);
 
     const ages = ref([]);
 
     const types = ref([]);
 
-
     const menu = ref([
       {
         id: "",
@@ -102,30 +128,39 @@ export default {
     const menuActive = ref("");
 
     onMounted(() => {
-      getAge(data => {
-        ages.value = data.data.data.map(item => {
+      getAge((data) => {
+        ages.value = data.data.data.map((item) => {
           return {
             ...item,
             label: item.name,
-            value: item.id
-          }
-        })
-      })
+            value: item.id,
+          };
+        });
+      });
 
-      getType(data => {
-        types.value = data.data.data.map(item => {
+      getType((data) => {
+        types.value = data.data.data.map((item) => {
           return {
             ...item,
             label: item.name,
-            value: item.id
-          }
-        })
-      })
-    })
+            value: item.id,
+          };
+        });
+      });
+    });
 
-    return { ages, types, menu,currentAge,menuActive,currentType,searchKey,busy}
+    return {
+      ages,
+      types,
+      menu,
+      currentAge,
+      menuActive,
+      currentType,
+      searchKey,
+      busy,
+    };
   },
-  components:{showCollection},
+  components: { showCollection },
   data() {
     return {
       list: [],
@@ -135,51 +170,54 @@ export default {
         pageNum: 1,
         showSize: 4,
         current: 1,
-      }
-    }
+      },
+    };
   },
 
   watch: {
     searchKey() {
-      this.getData(true)
+      this.getData(true);
     },
     currentAge() {
-      this.getData(true)
+      this.getData(true);
     },
     currentType() {
-      this.getData(true)
+      this.getData(true);
     },
     menuActive() {
-      this.getData(true)
-    }
+      this.getData(true);
+    },
   },
   methods: {
     getData(reset) {
       if (reset) {
-        this.list = []
+        this.list = [];
       }
-      this.busy = true
-      getCollectionList({
-        "ageId": this.currentAge,
-        "museumId": 1,
-        "type": this.menuActive,
-        "pageNum": this.paging.pageNum,
-        "pageSize": this.paging.pageSize,
-        "searchKey": this.searchKey,
-        "textureId": this.currentType,
-      }, data => {
-        this.busy = false
-        if (data.data.total <= this.list.length) {
-          this.busy = true
-          return
-        }
-        this.list = this.list.concat(data.data.records)
-        this.paging.pageNum += 1
+      this.busy = true;
+      getCollectionList(
+        {
+          ageId: this.currentAge,
+          museumId: 1,
+          type: this.menuActive,
+          pageNum: this.paging.pageNum,
+          pageSize: this.paging.pageSize,
+          searchKey: this.searchKey,
+          textureId: this.currentType,
+        },
+        (data) => {
+          this.busy = false;
+          if (data.data.total <= this.list.length) {
+            this.busy = true;
+            return;
+          }
+          this.list = this.list.concat(data.data.records);
+          this.paging.pageNum += 1;
 
-        this.$nextTick(() => {
-          this.$redrawVueMasonry(this.containerId);
-        });
-      })
+          this.$nextTick(() => {
+            this.$redrawVueMasonry(this.containerId);
+          });
+        }
+      );
 
       // console.log(this);
       // this.list = this.list.concat([]);
@@ -189,14 +227,14 @@ export default {
       // });
     },
     onClickCollection(data) {
-      this.activeCollection = data
-    }
+      this.activeCollection = data;
+    },
   },
   mounted() {
-    emitter.on('closeCollection', () => {
-      this.activeCollection = ''
-    })
-    this.getData()
+    emitter.on("closeCollection", () => {
+      this.activeCollection = "";
+    });
+    this.getData();
   },
 };
 </script>
@@ -224,11 +262,11 @@ export default {
       align-items: center;
       color: #333;
 
-      >ul {
+      > ul {
         display: flex;
         align-items: center;
 
-        >li {
+        > li {
           text-align: center;
           margin: 0 10px;
           cursor: pointer;
@@ -263,7 +301,7 @@ export default {
         height: calc(100% - 60px);
         width: 100%;
 
-        >div {
+        > div {
           height: 100%;
           width: 100%;
           background-repeat: no-repeat;

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

@@ -16,7 +16,7 @@
         <div class="itemimg">
           <div :style="`background-image:url(${item.thumb})`"></div>
         </div>
-        <p>{{ item.name }}</p>
+        <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
   </div>

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

@@ -1,9 +1,21 @@
 <template>
   <div class="temporary">
     <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
-    <ul v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
-      infinite-scroll-distance="30" :key="ran">
-      <li v-for="(item,i) in list" :key="i">
+    <div class="searNone" v-if="list.length === 0">
+      <img src="@/assets/images/resource/searNone.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"
+    >
+      <li v-for="(item, i) in list" :key="i">
         <exItem :exData="item" />
       </li>
     </ul>
@@ -18,12 +30,10 @@ import { getExhibitionList } from "@/config/api";
 
 const searchKey = ref("");
 
-
-const busy = ref(false)
+const busy = ref(false);
 
 const list = ref([]);
 
-
 let paging = ref({
   pageSize: 10,
   pageNum: 1,
@@ -31,37 +41,39 @@ let paging = ref({
 });
 
 watch(searchKey, () => {
-  getData(true)
+  getData(true);
 });
 
-
 const getData = (reset = null) => {
   if (reset) {
-    list.value = []
-    busy.value = false
+    list.value = [];
+    busy.value = false;
   }
   if (busy.value) {
-    return
+    return;
   }
-  getExhibitionList({
-    "pageNum": paging.value.pageNum,
-    "pageSize": paging.value.pageSize,
-    "museumId": 1,
-    "searchKey": searchKey.value,
-    "type": "long"
-  }, data => {
-    if (data.data.total <= list.value.length) {
-      busy.value = true
-      return
+  getExhibitionList(
+    {
+      pageNum: paging.value.pageNum,
+      pageSize: paging.value.pageSize,
+      museumId: 1,
+      searchKey: searchKey.value,
+      type: "long",
+    },
+    (data) => {
+      if (data.data.total <= list.value.length) {
+        busy.value = true;
+        return;
+      }
+      list.value = list.value.concat(data.data.records);
+      paging.value.pageNum += 1;
     }
-    list.value = list.value.concat(data.data.records)
-    paging.value.pageNum += 1
-  })
-}
+  );
+};
 
 onMounted(() => {
-  getData()
-})
+  getData();
+});
 </script>
   
 <style lang="scss" scoped>
@@ -72,15 +84,15 @@ onMounted(() => {
   .slebar {
     display: flex;
 
-    >div {
+    > div {
       margin-left: 20px;
     }
   }
 
-  >ul {
+  > ul {
     width: 100%;
 
-    >li {
+    > li {
       width: 100%;
       position: relative;
 

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

@@ -9,8 +9,12 @@
 
       <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
     <!-- </div> -->
-
-    <ul v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
+    <div class="searNone" v-if="list.length === 0">
+      <img src="@/assets/images/resource/searNone.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">
       <li v-for="(item,i) in list" :key="i">
         <exItem :exData="item" />

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

@@ -1,18 +1,28 @@
 <template>
   <div class="temporary">
     <!-- <div class="slebar"> -->
-      <!-- <ui-select :options="ages" :placeholder="'请选择'" v-model="currentAge">
+    <!-- <ui-select :options="ages" :placeholder="'请选择'" v-model="currentAge">
         <template v-slot:option="{ raw }">
           <div>{{ raw.label }}</div>
         </template>
       </ui-select> -->
 
-      <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
+    <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
     <!-- </div> -->
-
-    <ul v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
-      infinite-scroll-distance="30" :key="ran">
-      <li v-for="(item,i) in list" :key="i">
+    <div class="searNone" v-if="list.length === 0">
+      <img src="@/assets/images/resource/searNone.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"
+    >
+      <li v-for="(item, i) in list" :key="i">
         <exItem :exData="item" />
       </li>
     </ul>
@@ -28,15 +38,14 @@ import { getExhibitionList, getAge } from "@/config/api";
 const searchKey = ref("");
 const currentAge = ref("");
 
-const props = defineProps()
+const props = defineProps();
 
-const busy = ref(false)
+const busy = ref(false);
 
 const list = ref([]);
 
 const ages = ref([]);
 
-
 let paging = ref({
   pageSize: 10,
   pageNum: 1,
@@ -45,52 +54,53 @@ let paging = ref({
 });
 
 watch(searchKey, () => {
-  getData(true)
+  getData(true);
 });
 
 watch(currentAge, () => {
-  getData(true)
+  getData(true);
 });
 
-
 const getData = (reset = null) => {
   if (reset) {
-    list.value = []
-    busy.value = false
+    list.value = [];
+    busy.value = false;
   }
   if (busy.value) {
-    return
+    return;
   }
-  getExhibitionList({
-    "cityId": 1,
-    "pageNum": paging.value.pageNum,
-    "pageSize": paging.value.pageSize,
-    "searchKey": searchKey.value,
-    "type": "temp"
-  }, data => {
-    if (data.data.total <= list.value.length) {
-      busy.value = true
-      return
+  getExhibitionList(
+    {
+      cityId: 1,
+      pageNum: paging.value.pageNum,
+      pageSize: paging.value.pageSize,
+      searchKey: searchKey.value,
+      type: "temp",
+    },
+    (data) => {
+      if (data.data.total <= list.value.length) {
+        busy.value = true;
+        return;
+      }
+      list.value = list.value.concat(data.data.records);
+      paging.value.pageNum += 1;
     }
-    list.value = list.value.concat(data.data.records)
-    paging.value.pageNum += 1
-  })
-}
+  );
+};
 
 onMounted(() => {
-
-  getAge(data => {
-    ages.value = data.data.data.map(item => {
+  getAge((data) => {
+    ages.value = data.data.data.map((item) => {
       return {
         ...item,
         label: item.name,
-        value: item.id
-      }
-    })
-  })
+        value: item.id,
+      };
+    });
+  });
 
-  getData()
-})
+  getData();
+});
 </script>
   
 <style lang="scss" scoped>
@@ -101,15 +111,15 @@ onMounted(() => {
   .slebar {
     display: flex;
 
-    >div {
+    > div {
       margin-left: 20px;
     }
   }
 
-  >ul {
+  > ul {
     width: 100%;
 
-    >li {
+    > li {
       width: 100%;
       position: relative;
 

code/src/views/home/aside.vue

@@ -25,6 +25,7 @@
             </ul>
           </li>
         </ul>
+        <div class="searNone">暂无数据</div>
       </section>
 
       <div class="sidebar">
@@ -250,6 +251,14 @@ onMounted(() => {
           }
         }
       }
+      .searNone{
+        color: #999999;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
 
     .sidebar {