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

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/components/Audio.vue

@@ -287,18 +287,35 @@ export default {
 @media screen and (max-width: 1000px) {
   .audiocon {
     width: 100%;
+    top: 43%;
+    > .audiotop {
+      .img-con {
+        margin: 0;
+        .videoTxtInfo {
+          > span {
+          }
+
+          > p {
+            display: none;
+          }
+        }
+      }
+
+      > img {
+        width: 18px;
+        cursor: pointer;
+      }
+    }
+
     .audiobtm {
-      width: 100%;
       height: 33%;
-      margin: 0 auto;
-      padding-left: 13px;
-
+      padding-left: 0;
       .barcon {
         display: flex;
-        justify-content: space-between;
+        flex-direction: column-reverse;
         align-items: center;
         width: 100%;
-        margin: 20px 0;
+        margin: 0 0 45px 0;
         .bar {
           position: relative;
           background: none;
@@ -308,7 +325,7 @@ export default {
           border-radius: 4px;
           margin: 0 10px 0 16px;
           flex: auto;
-
+          width: 84%;
           .activeLine {
             cursor: pointer;
             height: 100%;
@@ -351,7 +368,8 @@ export default {
         .time {
           width: 100px;
           text-align: center;
-          margin: 0 auto;
+          margin-top: 9px;
+          margin-bottom: 49px;
 
           > span {
             font-size: 12px;

code/src/components/mb_select/index.vue

@@ -53,7 +53,6 @@ const emit = defineEmits(['handleOption'])
 const isShow = ref(false)
 
 const onClickOutSide = (e) => {
-  console.log(e, 'e');
   isShow.value = false
 }
 

code/src/components/showCollection/index.vue

@@ -1,29 +1,31 @@
 <template>
-  <div class="wrapper">
-    <showCollection
-      @hideSlide="
-        (data) => {
-          showSidebar = data;
-        }
-      "
-      class="ui-broadcast"
-      :item="cItem"
-    ></showCollection>
+  <div
+    class="wrapper"
+    :class="{
+      mobile: isMobile,
+    }"
+  >
+    <showCollection v-if="isMobile === false" @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="cItem"></showCollection>
+    <showCollectionMobile v-if="isMobile === true" @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="cItem"></showCollectionMobile>
   </div>
 </template>
 <script>
-import showCollection from "./showCollection";
+import showCollection from './showCollection'
+import showCollectionMobile from './showCollectionMobile'
 import { getDetailById } from "@/config/api";
+import browser from '@/utils/browser'
 
 export default {
   props: ["item"],
   components: {
     showCollection,
+    showCollectionMobile,
   },
   data() {
     return {
       cItem: { ...this.item },
       showSidebar: false,
+      isMobile: undefined,
     };
   },
   methods: {
@@ -31,15 +33,20 @@ export default {
       this.cItem = data;
     },
     getCollectionDetail() {
-      getDetailById("goods", { id: this.cItem.id }, (res) => {
+      getDetailById("goods", { id: this.item.id }, (res) => {
         console.log(res.data);
         this.cItem = res.data;
       });
     },
   },
   mounted() {
-    this.getCollectionDetail();
-  },
+    this.getCollectionDetail()
+    if (browser.isMobile()) {
+      this.isMobile = true
+    } else {
+      this.isMobile = false
+    }
+  }
 };
 </script>
 
@@ -61,4 +68,8 @@ export default {
     background: linear-gradient(#595959, #8A8A8A);
   }
 }
+
+.mobile.wrapper {
+  height: calc(100% - 60px);
+}
 </style>

code/src/components/showCollection/showCollectionMobile.vue

@@ -0,0 +1,339 @@
+<template>
+  <div v-if="cItem.entity">
+    <div class="first" v-show="!isShowDesc">
+      
+      <p  class="title" v-if="cItem.entity.type != 'audio'">
+        {{ cItem.entity.name }}
+      </p>
+
+      <template v-if="cItem.entity.type == 'img'">
+        <div class="swcon swiper-container" id="imglist">
+          <ul class="swiper-wrapper">
+            <li
+              class="swiper-slide"
+              v-for="(sub, index) in cItem.file"
+              :key="index"
+            >
+              <div class="sl-item">
+                <img :src="sub.filePath" />
+              </div>
+            </li>
+          </ul>
+        </div>
+        <template v-if="cItem.file.length > 1">
+          <img
+            class="vpagination left"
+            :src="require('@/assets/images/icon/left.png')"
+            @click="slide('slidePrev')"
+            alt=""
+          />
+          <img
+            class="vpagination right"
+            :src="require('@/assets/images/icon/right.png')"
+            @click="slide('slideNext')"
+            alt=""
+          />
+        </template>
+        <!-- <ul class="pagna" v-if="cItem.file.length > 1">
+          <li
+            v-for="(sub, i) in cItem.file"
+            :class="{ active: i == active }"
+            :key="i"
+          ></li>
+        </ul> -->
+      </template>
+
+      <template v-else>
+        <iframe
+          v-if="cItem.entity.type == 'model'"
+          :src="`/model-page/model.html?m=${cItem.entity.filePath}`"
+          frameborder="0"
+        ></iframe>
+        <video
+          ref="itemvideo"
+          controlslist="nodownload noplaybackrate"
+          :disablePictureInPicture="true"
+          v-else-if="cItem.entity.type == 'video'"
+          controls
+          :src="cItem.entity.filePath"
+          loop
+          autoplay
+        ></video>
+
+        <vAudio v-else :adata="cItem.entity"></vAudio>
+      </template>
+
+      <div class="bottom-area">
+        <img
+          class="desc"
+          src="@/assets/images/icon/desc-mobile.png"
+          @click="isShowDesc = true"
+        />
+        <img
+          class="close"
+          @click.stop="hideBroadcast"
+          :src="require(`@/assets/images/icon/close.png`)"
+        />
+      </div>
+
+    </div>
+
+    <div class="second" v-show="isShowDesc">
+      <article>
+        <h1>
+          {{item.entity.name}}
+        </h1>
+        <span class="age">
+        {{item.entity.ageName}}
+        </span>
+        &nbsp;
+        <span class="texture">
+        {{item.entity.textureName}}
+        </span>
+        <p>{{item.entity.description}}</p>
+      </article>
+      <div class="bottom-area">
+        <img
+          class="close"
+          @click="isShowDesc = false"
+          :src="require(`@/assets/images/icon/close.png`)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import emitter from "@/mitt/index";
+import vAudio from "@/components/Audio";
+
+export default {
+  name: "showCollection",
+  props: ["item",],
+  data() {
+    return {
+      isShowDesc: false,
+      active: 0,
+      swInstance: null,
+    };
+  },
+  components: { vAudio },
+  computed: {
+    cItem() {
+      return { ...this.item };
+    },
+  },
+  watch: {
+  },
+  methods: {
+    slide(type) {
+      this.swInstance[type]();
+    },
+    hideBroadcast() {
+      emitter.emit("closeCollection");
+    },
+  },
+  mounted() {
+    console.log('item: ', this.item);
+    let that = this;
+    this.$nextTick(() => {
+      let t = setTimeout(() => {
+        clearTimeout(t);
+        this.swInstance = new Swiper("#imglist", {
+          slidesPerView: "auto",
+          normalizeSlideIndex: false,
+          on: {
+            slideChange() {
+              that.active = this.realIndex;
+              if (this.realIndex > that.cItem.file.length - 1)
+                that.active = that.cItem.file.length - 1;
+            },
+          },
+        });
+      }, 200);
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.first {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: #fff;
+  > .title {
+    position: absolute;
+    top: 33px;
+    left: 27px;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: bold;
+    width: 45%;
+    z-index: 1;
+    word-break: break-all;
+  }
+
+  > .swcon {
+    position: absolute;
+    top: 10%;
+    width: 90%;
+    height: 66%;
+    .swiper-wrapper {
+      padding: 0;
+      width: 100%;
+
+      .swiper-slide {
+        width: 100%;
+        transform-style: preserve-3d;
+        position: relative;
+        height: 100%;
+        margin: 0 auto;
+        transform: translate3d(0, 0, 0);
+
+        .sl-item {
+          width: 100%;
+          height: 90%;
+          position: relative;
+
+          > img {
+            width: auto;
+            max-height: 90vh;
+            max-width: 100%;
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+    }
+  }
+
+  .vpagination {
+    position: absolute;
+    top: 33px;
+    cursor: pointer;
+    width: 40px;
+  }
+  .left {
+    right: calc(23px + 40px + 23px);
+  }
+  .right {
+    right: 23px;
+  }
+
+  .pagna {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    z-index: 999;
+
+    > li {
+      width: 10px;
+      border-radius: 50%;
+      height: 10px;
+      background: rgba(51, 143, 123, 0.24);
+      display: inline-block;
+      margin: 0 4px;
+
+      &.active {
+        background: #338f7b;
+      }
+    }
+  }
+
+  iframe,
+  audio,
+  video {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 45%;
+    left: 50%;
+    width: 90%;
+    height: 66%;
+  }
+
+  audio {
+    width: 50%;
+    height: 20%;
+  }
+
+  > .bottom-area {
+    position: absolute;
+    bottom: 54px;
+    left: 50%;
+    transform: translateX(-50%);
+    .desc {
+      width: 56px;
+      height: 56px;
+      cursor: pointer;
+      z-index: 1;
+    }
+    .close {
+      margin-left: 29px;
+      width: 56px;
+      height: 56px;
+      cursor: pointer;
+      z-index: 1;
+    }
+  }
+}
+
+.second {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: #333;
+  > article {
+    position: absolute;
+    top: 62px;
+    left: 42px;
+    right: 42px;
+    bottom: 144px;
+    background: #FFFEF6;
+    opacity: 0.95;
+    border-radius: 4px 4px 4px 4px;
+    overflow: auto;
+    padding: 55px 28px 28px 28px;
+    word-break: break-all;
+
+    > h1 {
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 24px;
+      margin-bottom: 30px;
+      width: 65%;
+    }
+    > .age {
+      font-weight: bold;
+      font-size: 15px;
+      line-height: 30px;
+    }
+    > .texture {
+      font-weight: bold;
+      font-size: 15px;
+      line-height: 30px;
+      margin-bottom: 8px;
+    }
+    p {
+      line-height: 30px;
+      font-size: 15px;
+    }
+  }
+  > .bottom-area {
+    position: absolute;
+    bottom: 54px;
+    left: 50%;
+    transform: translateX(-50%);
+    .close {
+      width: 56px;
+      height: 56px;
+      cursor: pointer;
+      z-index: 1;
+    }
+  }
+}
+</style>

code/src/pages/index.js

@@ -14,7 +14,7 @@ let uaInfo = uaParser.getResult()
 //     doBrowserTip()
 import Components from "@/components/UI";
 
-console.log('v20220928.1830');
+console.log('v20220929.1830');
 
 let app = createApp(App)
 app.use(Components).use(infiniteScroll).use(VueMasonryPlugin).use(router).mount('#app')

code/src/pages/mobile.js

@@ -11,6 +11,6 @@ import {VueMasonryPlugin} from 'vue-masonry';
 
 import Components from "@/components/UI";
 
-console.log('v20220928.1830');
+console.log('v20220929.1830');
 
 createApp(App).use(Components).use(infiniteScroll).use(VueMasonryPlugin).use(router).directive('clickoutside', ClickOutSide).mount('#app')

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 {