tremble 3 anos atrás
pai
commit
4a351450e0
64 arquivos alterados com 478 adições e 2228 exclusões
  1. 2 1
      public/static/js/main_2020_show.js
  2. BIN
      src/assets/images/proj2022/bird_view/five.png
  3. BIN
      src/assets/images/proj2022/bird_view/five@2x.png
  4. BIN
      src/assets/images/proj2022/bird_view/four.png
  5. BIN
      src/assets/images/proj2022/bird_view/four@2x.png
  6. BIN
      src/assets/images/proj2022/bird_view/one.png
  7. BIN
      src/assets/images/proj2022/bird_view/one@2x.png
  8. BIN
      src/assets/images/proj2022/bird_view/three.png
  9. BIN
      src/assets/images/proj2022/bird_view/three@2x.png
  10. BIN
      src/assets/images/proj2022/bird_view/two.png
  11. BIN
      src/assets/images/proj2022/bird_view/two@2x.png
  12. BIN
      src/assets/images/proj2022/bird_view/weiting.png
  13. BIN
      src/assets/images/proj2022/bird_view/weiting@2x.png
  14. BIN
      src/assets/images/proj2022/bird_view/xuting.png
  15. BIN
      src/assets/images/proj2022/bird_view/xuting@2x.png
  16. BIN
      src/assets/images/proj2022/pc/enter_five.png
  17. BIN
      src/assets/images/proj2022/pc/enter_four.png
  18. BIN
      src/assets/images/proj2022/pc/enter_one.png
  19. BIN
      src/assets/images/proj2022/pc/enter_three.png
  20. BIN
      src/assets/images/proj2022/pc/enter_two.png
  21. BIN
      src/assets/images/proj2022/pc/enter_weiting.png
  22. BIN
      src/assets/images/proj2022/pc/enter_xuting.png
  23. BIN
      src/assets/images/proj2022/pc/shouqi.png
  24. BIN
      src/assets/images/proj2022/pc/zhankai.png
  25. BIN
      src/assets/images/project/qrcode/104_1.jpg
  26. BIN
      src/assets/images/project/qrcode/136_1.jpg
  27. BIN
      src/assets/images/project/qrcode/148_1.jpg
  28. BIN
      src/assets/images/project/qrcode/191_1.jpg
  29. BIN
      src/assets/images/project/qrcode/193_1.jpg
  30. BIN
      src/assets/images/project/qrcode/1_1.jpg
  31. BIN
      src/assets/images/project/qrcode/203_1.jpg
  32. BIN
      src/assets/images/project/qrcode/21_1.jpg
  33. BIN
      src/assets/images/project/qrcode/234_1.jpg
  34. BIN
      src/assets/images/project/qrcode/237_1.jpg
  35. BIN
      src/assets/images/project/qrcode/24_1.jpg
  36. BIN
      src/assets/images/project/qrcode/37_1.jpg
  37. BIN
      src/assets/images/project/qrcode/41_1.jpg
  38. BIN
      src/assets/images/project/qrcode/46_1.jpg
  39. BIN
      src/assets/images/project/qrcode/70_1.jpg
  40. BIN
      src/assets/images/project/qrcode/71_1.jpg
  41. 28 28
      src/components/bird_view/index.vue
  42. 9 2
      src/components/hotspot/index.vue
  43. 1 1
      src/components/hotspot/title.vue
  44. 21 8
      src/components/hotspot/video.vue
  45. 21 2
      src/components/orientationtip/index.vue
  46. 3 2
      src/components/qrcodetl/index.vue
  47. 15 2014
      src/data/raw.js
  48. 1 3
      src/mixins/index.js
  49. 12 12
      src/pages/mobilescene/birdview/index.vue
  50. 29 1
      src/pages/mobilescene/components/daka.vue
  51. 145 92
      src/pages/mobilescene/components/qrcode.vue
  52. 14 2
      src/pages/mobilescene/index.vue
  53. 4 1
      src/pages/mobilescene/menu/func.vue
  54. 13 3
      src/pages/mobilescene/scene.vue
  55. 34 18
      src/pages/scene/aside.vue
  56. 7 1
      src/pages/scene/components/content.vue
  57. 10 4
      src/pages/scene/components/daka.vue
  58. 29 8
      src/pages/scene/components/qrcode.vue
  59. 12 6
      src/pages/scene/index.vue
  60. 22 4
      src/pages/scene/raside/map.vue
  61. 13 3
      src/pages/scene/scene.vue
  62. 15 2
      src/pages/scene/search/index.vue
  63. 17 9
      src/pages/scene/zhanxiang/index.vue
  64. 1 1
      src/pages/scenePage/views/gui/guide.vue

+ 2 - 1
public/static/js/main_2020_show.js

@@ -8600,7 +8600,8 @@ window.Modernizr = function(n, e, t) {
         }
         function s(e, t) {
             setTimeout(function() {
-                if (h.isHelpEnabled()) {
+                // h.isHelpEnabled()
+                if (false) {
                     if (t(),
                     u.init(),
                     C.addClass("fadeIn landing " + u.deviceType),

BIN
src/assets/images/proj2022/bird_view/five.png


BIN
src/assets/images/proj2022/bird_view/five@2x.png


BIN
src/assets/images/proj2022/bird_view/four.png


BIN
src/assets/images/proj2022/bird_view/four@2x.png


BIN
src/assets/images/proj2022/bird_view/one.png


BIN
src/assets/images/proj2022/bird_view/one@2x.png


BIN
src/assets/images/proj2022/bird_view/three.png


BIN
src/assets/images/proj2022/bird_view/three@2x.png


BIN
src/assets/images/proj2022/bird_view/two.png


BIN
src/assets/images/proj2022/bird_view/two@2x.png


BIN
src/assets/images/proj2022/bird_view/weiting.png


BIN
src/assets/images/proj2022/bird_view/weiting@2x.png


BIN
src/assets/images/proj2022/bird_view/xuting.png


BIN
src/assets/images/proj2022/bird_view/xuting@2x.png


BIN
src/assets/images/proj2022/pc/enter_five.png


BIN
src/assets/images/proj2022/pc/enter_four.png


BIN
src/assets/images/proj2022/pc/enter_one.png


BIN
src/assets/images/proj2022/pc/enter_three.png


BIN
src/assets/images/proj2022/pc/enter_two.png


BIN
src/assets/images/proj2022/pc/enter_weiting.png


BIN
src/assets/images/proj2022/pc/enter_xuting.png


BIN
src/assets/images/proj2022/pc/shouqi.png


BIN
src/assets/images/proj2022/pc/zhankai.png


BIN
src/assets/images/project/qrcode/104_1.jpg


BIN
src/assets/images/project/qrcode/136_1.jpg


BIN
src/assets/images/project/qrcode/148_1.jpg


BIN
src/assets/images/project/qrcode/191_1.jpg


BIN
src/assets/images/project/qrcode/193_1.jpg


BIN
src/assets/images/project/qrcode/1_1.jpg


BIN
src/assets/images/project/qrcode/203_1.jpg


BIN
src/assets/images/project/qrcode/21_1.jpg


BIN
src/assets/images/project/qrcode/234_1.jpg


BIN
src/assets/images/project/qrcode/237_1.jpg


BIN
src/assets/images/project/qrcode/24_1.jpg


BIN
src/assets/images/project/qrcode/37_1.jpg


BIN
src/assets/images/project/qrcode/41_1.jpg


BIN
src/assets/images/project/qrcode/46_1.jpg


BIN
src/assets/images/project/qrcode/70_1.jpg


BIN
src/assets/images/project/qrcode/71_1.jpg


+ 28 - 28
src/components/bird_view/index.vue

@@ -98,34 +98,34 @@ export default {
       width: 100%;
     }
   }
-  .one {
-    top: 48%;
-    left: 49%;
-  }
-  .two {
-    top: 38%;
-    left: 55%;
-  }
-  .three {
-    top: 30%;
-    left: 62%;
-  }
-  .four {
-    top: 15%;
-    left: 47%;
-  }
-  .five {
-    top: 23%;
-    left: 37%;
-  }
-  .xuting {
-    top: 53%;
-    left: 38%;
-  }
-  .weiting {
-    top: 33%;
-    left: 30%;
-  }
+    .one {
+      top: 53%;
+      left: 49%;
+    }
+    .two {
+      top: 43%;
+      left: 57%;
+    }
+    .three {
+      top: 37%;
+      left: 65%;
+    }
+    .four {
+      top: 22%;
+      left: 48%;
+    }
+    .five {
+      top: 27%;
+      left: 40%;
+    }
+    .xuting {
+      top: 59%;
+      left: 41%;
+    }
+    .weiting {
+      top: 33%;
+      left: 33%;
+    }
 }
 
 @keyframes highlight-move {

+ 9 - 2
src/components/hotspot/index.vue

@@ -5,7 +5,7 @@
     :class="{ mbhotspotcon: isMobile }"
     @mousemove.stop
   >
-    <component :type="scene" :is="active" :hotspot="hotspot"></component>
+    <component :is="active" :hotspot="hotspot"></component>
     <div @click="$emit('close')" class="close">
       <img :src="require('@/assets/images/proj2022/pc/cancel_btn.png')" alt="" />
     </div>
@@ -74,6 +74,13 @@ export default {
 <style lang="less" scoped>
 @w: 100%;
 @titleH:100px;
+
+@supports (backdrop-filter: brightness(60%)) {
+  .hotspotconf {
+      backdrop-filter: blur(30px) brightness(60%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+  }
+}
 .hotspotconf {
   position: fixed;
   z-index: 9999;
@@ -81,7 +88,7 @@ export default {
   height: 100%;
   left: 0;
   top: 0;
-  backdrop-filter: blur(30px) brightness(60%);
+  background-color: rgba(0, 0, 0, .8);
   background-repeat: no-repeat;
   background-position: bottom center;
   background-size: 100% auto;

+ 1 - 1
src/components/hotspot/title.vue

@@ -34,7 +34,7 @@
       alt=""
     />
 
-    <div class="mbhcon" :class="{ fullcon: !hotspot.content }">
+    <div v-if="hotspot" class="mbhcon" :class="{ fullcon: !hotspot.content }">
       <div class="img-con">
       </div>
       <div class="desc">

+ 21 - 8
src/components/hotspot/video.vue

@@ -35,22 +35,25 @@
   <div v-else class="mbhotspot">
     <div class="mbhcon">
       <div class="img-con">
-        <img class="aa" v-if="hotspot.video.length > 1" :src="require('@/assets/images/project/icon/hotspot_l.png')" alt="" @click="handlePage('prev')" />
+        <img class="aa" v-if="hotspot.video.length > 1" :src="require('@/assets/images/proj2022/mobile/prev.png')" alt="" @click="handlePage('prev')" />
         <div class="imgmain" :class="{ bigImg: !hotspot.content }">
           <video
+            x5-playsinline="true" playsinline="true" webkit-playsinline="true"
             controlslist="nodownload noremoteplayback"
             disablePictureInPicture
             controls
+            muted
             autoplay
+            ref="videodeo"
+            loop
             :key="active"
-            v-show="isvideoshow"
             @canplaythrough="isvideoshow = true"
             @canplay="isvideoshow = true"
           >
-            <source :src="g_fixUrl(hotspot.video[active].url)" type="video/mp4" />
+          <source :src="g_fixUrl(hotspot.video[active].url)" type="video/mp4" />
           </video>
         </div>
-        <img class="aa" v-if="hotspot.video.length > 1" :src="require('@/assets/images/project/icon/hotspot_r.png')" alt="" @click="handlePage('next')" />
+        <img class="aa" v-if="hotspot.video.length > 1" :src="require('@/assets/images/proj2022/mobile/next.png')" alt="" @click="handlePage('next')" />
       </div>
 
       <div class="desc" v-if="hotspot.title||hotspot.contents[active]">
@@ -95,7 +98,10 @@ export default {
     isvideoshow: {
       handler: function(newVal) {
         if (newVal) {
-          this.$hideLoading();
+          this.$refs.videodeo && this.$refs.videodeo.play();
+          setTimeout(() => {
+            this.$hideLoading();
+          },1000);
         }
       },
     },
@@ -110,6 +116,12 @@ export default {
     this.TO = setTimeout(() => {
       this.$hideLoading();
     }, 10 * 1000);
+    document.addEventListener(
+      "WeixinJSBridgeReady",
+      () => {
+        this.$refs.videodeo.play();
+      },
+    );
   },
   beforeDestroy() {
     this.$bus.$emit("toggleBGM", true);
@@ -158,11 +170,11 @@ export default {
     z-index: 1000;
   }
   .mbhcon {
-    position: absolute;
+    // position: absolute;
     top: 50%;
     width: 100%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    // transform: translate(-50%, -50%);
     height: 100%;
     .img-con {
       display: flex;
@@ -193,7 +205,8 @@ export default {
       @pos: 14px;
       .aa {
         position: absolute;
-        width: 10px;
+        width: 30px;
+        z-index: 99999;
         height: auto;
         cursor: pointer;
         top: 50%;

+ 21 - 2
src/components/orientationtip/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="orientation-tip">
+  <div class="orientation-tip" :class="{ isTip: isTip }">
     <div>
       <img :src="require(`@/assets/images/proj2022/mobile/${isLandscape ? 'tip_heng@2x' : 'tip_shu@2x'}.png`)" alt="" />
       <p>为了更好的体验,请使用{{ isLandscape ? "横屏" : "竖屏" }}锁屏浏览</p>
@@ -14,6 +14,7 @@ export default {
       show: true,
       hideClose: false,
       isLandscape: false,
+      isTip: false,
     };
   },
   methods: {
@@ -21,6 +22,19 @@ export default {
       this.$hideOrientationtip();
     },
   },
+  watch: {
+    isTip: {
+      immediate: true,
+      handler: function(newVal) {
+        if (newVal) {
+          let tt = setTimeout(() => {
+            clearTimeout(tt);
+            this.close();
+          }, 3000);
+        }
+      },
+    },
+  },
 };
 </script>
 
@@ -29,7 +43,7 @@ export default {
 .orientation-tip {
   width: 100%;
   height: 100%;
-  z-index: 10000;
+  z-index: 1000000;
   position: fixed;
   top: 0;
   left: 0;
@@ -54,4 +68,9 @@ export default {
     }
   }
 }
+
+.isTip {
+  background: none;
+  backdrop-filter: none;
+}
 </style>

+ 3 - 2
src/components/qrcodetl/index.vue

@@ -6,13 +6,13 @@
       backgroundImage: `url(${require('@/assets/images/mobile/bgdownload.png')})`,
     }"
   >
-    <div class="h-con" v-if="data">
+    <div class="h-con" v-if="data.panoId||data.id">
       <div class="h-title">
         <!-- <img :src="require('@/assets/images/mobile/qrcodetitle.png')" alt="" /> -->
       </div>
       <div class="qrcodecon">
         <div>扫二维码,立即观展</div>
-        <img :src="require(`@/assets/images/project/qrcode/${data.id}.jpg`)" alt="" />
+        <img :src="require(`@/assets/images/project/qrcode/${data.panoId||data.id}.jpg`)" alt="" />
         <p v-html="`${data.name +(data.desc?` ${data.desc}`:'')}`"></p>
       </div>
     </div>
@@ -23,6 +23,7 @@
 export default {
   props:['id','data'],
   data() {
+    console.log(this.data.id||this.data.panoId);
     return{
 
     }

Diferenças do arquivo suprimidas por serem muito extensas
+ 15 - 2014
src/data/raw.js


+ 1 - 3
src/mixins/index.js

@@ -36,8 +36,6 @@ Vue.mixin({
   },
   mounted() {
     if (this.isMobile) {
-      
-    
       // window.orientation:获取屏幕旋转方向
       window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", ()=> {      
         // 正常方向或屏幕旋转180度
@@ -48,7 +46,7 @@ Vue.mixin({
         // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
         if (window.orientation === 90 || window.orientation === -90) {
           this.g_isLandscape = true;
-          this.$bus.$emit("changeShowfunc", false)
+          this.$bus.$emit("isShowHuDong", false)
         }
       });
     }

+ 12 - 12
src/pages/mobilescene/birdview/index.vue

@@ -89,32 +89,32 @@ export default {
       }
     }
     .one {
-      top: 49%;
-      left: 49%;
+      top: 52%;
+      left: 48%;
     }
     .two {
-      top: 41%;
-      left: 55%;
+      top: 45%;
+      left: 60%;
     }
     .three {
-      top: 35%;
-      left: 62%;
+      top: 39%;
+      left: 70%;
     }
     .four {
-      top: 18%;
+      top: 23%;
       left: 47%;
     }
     .five {
-      top: 26%;
-      left: 37%;
+      top: 28%;
+      left: 35%;
     }
     .xuting {
-      top: 54%;
-      left: 38%;
+      top: 58%;
+      left: 37%;
     }
     .weiting {
       top: 35%;
-      left: 30%;
+      left: 26%;
     }
   }
 }

+ 29 - 1
src/pages/mobilescene/components/daka.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="daka" :style="{backgroundImage:`url(${require(`@/assets/images/proj2022/mobile/tab_shu@2x.png`)})`}">
+  <div class="daka" :class="{heping:g_isLandscape}" :style="{backgroundImage:`url(${require(`@/assets/images/proj2022/mobile/tab_shu@2x.png`)})`}">
     <!-- <svg height="100%" width="100%">
       <defs>
         <clipPath id="svgPathdaka">
@@ -165,4 +165,32 @@ export default {
     
   }
 }
+.heping{
+  .dakacon{
+    .h3line{
+      display: none;
+    }
+    h3{
+      left: 60px;
+    }
+    .dakatitle{
+      position: absolute;
+      writing-mode: vertical-lr;
+      top: 80px;
+      left: 60px;
+      font-size: 18px;
+    }
+    >p{
+      position: absolute;
+      writing-mode: vertical-lr;
+      top: 80px;
+      left: 96px;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    .s-scroll{
+      height: calc(100% - 200px);
+    }
+  }
+}
 </style>

+ 145 - 92
src/pages/mobilescene/components/qrcode.vue

@@ -1,44 +1,44 @@
 <template>
-  <div class="qrcode" :style="{backgroundImage:`url(${require(`@/assets/images/proj2022/mobile/tab_shu@2x.png`)})`}">
+  <div class="qrcode" :class="{ heping: g_isLandscape }" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/mobile/tab_shu@2x.png`)})` }">
     <div class="downloadQrcon">
-      <qrcodetl v-if="tmpPano.id" :id="'qrpg_'+tmpPano.id" :data="tmpPano"/>
-      <qrcodetl v-if="currentItem.id" :id="'qrpgc_'+currentItem.id" :data="currentItem"/>
+      <qrcodetl v-if="tmpPano.panoId" :id="'qrpg_' + tmpPano.panoId" :data="tmpPano" />
+      <qrcodetl v-if="currentItem.id" :id="'qrpgc_' + currentItem.id" :data="currentItem" />
     </div>
-    
 
     <div class="qrcodecon">
       <h3>分享</h3>
+      <div class="h3line"></div>
       <div class="ctitle">
         <span>邀请好友一起观展吧!</span>
         <span>请长按下方图片下载二维码分享给好友</span>
       </div>
       <div class="ul">
         <div class="li" v-if="tmpPano.name">
-          <template  v-if="tmpPano.name">
+        <div class="liimg">
+            <img class="real" v-if="tmpImg" :src="tmpImg" alt="" />
+            <img class="qrc" v-if="tmpPano.panoId" :src="require(`@/assets/images/project/qrcode/${tmpPano.panoId}.jpg`)" alt="" />
+          </div>
+          <template v-if="tmpPano.name">
             <p v-if="!currentPanoArr" v-html="tmpPano.name || ''"></p>
             <div v-else class="xiala">
-              <span @click="isShowUl=!isShowUl">
-                {{tmpPano.name}}
-                <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="">
+              <span @click="isShowUl = !isShowUl">
+                {{ tmpPano.name }}
+                <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="" />
               </span>
               <ul class="brightness" v-if="isShowUl">
-                <li v-html="item.name" @click="isShowUl=false,tmpPano=item" v-for="(item,i) in currentPanoArr" :key="i"></li>
+                <li v-html="item.name" @click="(isShowUl = false), (tmpPano = item)" v-for="(item, i) in currentPanoArr" :key="i"></li>
               </ul>
             </div>
           </template>
           <p v-else></p>
-          <div class="liimg">
-            <img class="real" v-if="tmpImg" :src="tmpImg" alt="">
-            <img class="qrc" v-if="tmpPano.id" :src="require(`@/assets/images/project/qrcode/11.jpg`)" alt="" />
-          </div>
         </div>
 
         <div class="li">
-          <p v-html="currentItem.name"></p>
           <div class="liimg">
-            <img class="real" v-if="tmpcImg" :src="tmpcImg" alt="">
-            <img class="qrc" :src="require(`@/assets/images/project/qrcode/11.jpg`)" alt="" />
+            <img class="real" v-if="tmpcImg" :src="tmpcImg" alt="" />
+            <img class="qrc" :src="require(`@/assets/images/project/qrcode/${currentItem.id}.jpg`)" alt="" />
           </div>
+          <p v-html="currentItem.name"></p>
         </div>
       </div>
     </div>
@@ -46,82 +46,93 @@
 </template>
 
 <script>
-import {Booth} from "@/data/raw.js";
 import domtoimage from "dom-to-image";
 import qrcodetl from "@/components/qrcodetl/index.vue";
+import { Booth } from "@/data/booth.js";
+
+let all_booth = [];
+Booth.forEach((item) => {
+  all_booth = all_booth.concat(item.company);
+});
 
 export default {
-  props:['currentPano','currentItem'],
-  data(){
+  props: ["currentPano", "currentItem"],
+  data() {
     return {
-      isShowUl:false,
-      tmpPano:this.currentPano,
-      tmpImg:'',
-      tmpcImg:'',
-    }
+      isShowUl: false,
+      tmpPano: this.currentPano,
+      tmpImg: "",
+      tmpcImg: "",
+    };
   },
-  components:{qrcodetl},
-  computed:{
-    currentPanoArr:function(){
-      let tmp = Booth.filter(item=>item.panoId == this.currentPano.panoId)
-      return tmp&&tmp.length>1 ? tmp : ''
-    }
+  components: { qrcodetl },
+  computed: {
+    currentPanoArr: function() {
+      let tmp1 = all_booth.filter((item) => item.panoId == this.currentPano.panoId);
+      let tmp = tmp1.map((item, idx) => {
+        return {
+          ...item,
+          panoId: idx > 0 ? `${item.panoId}_${idx}` : item.panoId,
+        };
+      });
+      return tmp && tmp.length > 1 ? tmp : "";
+    },
   },
-  watch:{
-    tmpPano(newVal){
-      console.log(newVal,88888888);
+  watch: {
+    tmpPano(newVal) {
+      console.log(newVal, 88888888);
       setTimeout(() => {
-        this.download(newVal.id,'qrpg_','tmpImg')
+        this.download(newVal.id, "qrpg_", "tmpImg");
       }, 100);
-    }
+    },
   },
-  mounted(){
-    this.$nextTick(()=>{
+  mounted() {
+    this.$nextTick(() => {
       setTimeout(() => {
-        this.download(this.tmpPano.id,'qrpg_','tmpImg')
-        this.download(this.currentItem.id,'qrpgc_','tmpcImg')
+        this.download(this.tmpPano.panoId, "qrpg_", "tmpImg");
+        this.download(this.currentItem.id, "qrpgc_", "tmpcImg");
       }, 100);
       setTimeout(() => {
-        this.download(this.tmpPano.id,'qrpg_','tmpImg')
-        this.download(this.currentItem.id,'qrpgc_','tmpcImg')
+        this.download(this.tmpPano.panoId, "qrpg_", "tmpImg");
+        this.download(this.currentItem.id, "qrpgc_", "tmpcImg");
       }, 400);
-    })
+    });
   },
-  methods:{
-    download(id=null,type='',imgstr='') {
+  methods: {
+    download(id = null, type = "", imgstr = "") {
       if (!id) {
-        return
+        return;
       }
-      let node = document.getElementById(type+id);
-      
+      let node = document.getElementById(type + id);
+
       domtoimage
         .toPng(node)
-        .then((dataUrl) =>{
-          this[imgstr] = dataUrl
+        .then((dataUrl) => {
+          this[imgstr] = dataUrl;
         })
-        .catch((error)=> {
+        .catch((error) => {
           console.error("oops, something went wrong!", error);
         });
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-@w:100%;
-@fixw:8px;
-.qrcode{
+@w: 100%;
+@fixw: 8px;
+.qrcode {
   width: @w;
   height: 100%;
   position: relative;
   background-size: 100% auto;
 
-  .downloadQrcon{
+  .downloadQrcon {
     position: fixed;
     top: 0;
     left: -1500px;
   }
-  .qrcodebg{
+  .qrcodebg {
     width: @w;
     position: absolute;
     z-index: 999;
@@ -129,13 +140,13 @@ export default {
     bottom: 0;
     left: 0;
   }
-  .qrcodecon{
+  .qrcodecon {
     width: 100%;
     height: 100%;
     text-align: center;
     padding: 40px 0 0;
     position: relative;
-    >h3{
+    > h3 {
       font-family: "pangmen";
       font-weight: normal;
       font-size: 24px;
@@ -143,43 +154,43 @@ export default {
       top: 30px;
       left: 20px;
     }
-    .ctitle{
-        margin-top: 40px;
-        text-align: center;
-        >span{
-          display: block;
-          &:first-of-type{
-            font-size: 18px;
-            font-weight: bold;
-            margin-bottom: 2px;
-          }
-          &:last-of-type{
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.7);
-          }
-        }
+    .h3line{
+      width: 94%;
+      height: 1px;
+      background-color: rgba(255, 255, 255, 0.5);
+      margin: 30px auto 0;
+    }
+    .ctitle {
+      margin-top: 40px;
+      text-align: center;
+      > span {
+        display: block;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 1);
       }
-    >.ul{
+    }
+    > .ul {
       width: 100%;
       height: calc(100% - 100px);
       overflow-y: auto;
       padding: 10px;
-      >.li{
+      > .li {
         text-align: center;
         width: 100%;
         margin-top: 10px;
-        >p,.xiala{
+        > p,
+        .xiala {
           font-size: 14px;
           line-height: 1.5;
           display: flex;
           align-items: center;
           justify-content: center;
         }
-        .xiala{
+        .xiala {
           width: 50%;
           margin: 0 auto 10px;
           position: relative;
-          >span{
+          > span {
             border: 1px solid #fff;
             display: inline-block;
             border-radius: 4px;
@@ -188,9 +199,9 @@ export default {
             position: relative;
             cursor: pointer;
             overflow: hidden;
-            text-overflow:ellipsis;
+            text-overflow: ellipsis;
             white-space: nowrap;
-            >img{
+            > img {
               position: absolute;
               right: 12px;
               transform: rotate(90deg);
@@ -198,55 +209,97 @@ export default {
               width: 8px;
             }
           }
-          >ul{
+          > ul {
             position: absolute;
             top: 110%;
             padding: 0 10px;
             width: 100%;
             z-index: 99;
-            clip-path:none!important;
+            clip-path: none !important;
             border-radius: 4px;
             overflow: hidden;
             height: auto;
-            >li{
+            > li {
               text-align: left;
               line-height: 1.5;
               border-bottom: dashed 1px #fff;
               padding: 10px 0;
               cursor: pointer;
               font-size: 16px;
-              &:last-of-type{
+              &:last-of-type {
                 border-bottom: none;
               }
             }
           }
         }
 
-        .liimg{
-          max-width: 150px;
+        .liimg {
+          max-width: 250px;
           width: 50%;
           margin: 10px auto;
           overflow: hidden;
           position: relative;
           font-size: 0;
 
-          .qrc{
+          .qrc {
             width: 100%;
             pointer-events: none;
           }
-          .real{
+          .real {
             z-index: 1;
             left: 50%;
             top: 50%;
             width: 100%;
-            transform: translate(-50%,-50%);
+            transform: translate(-50%, -50%);
             position: absolute;
             opacity: 0;
           }
         }
+      }
+    }
+  }
+}
 
+.heping {
+  .qrcodecon {
+    .h3line {
+      display: none;
+    }
+    h3 {
+      left: 60px;
+    }
+    .ctitle {
+      position: absolute;
+      writing-mode: vertical-lr;
+      top: 30px;
+      left: 60px;
+      font-size: 18px;
+      text-align: left;
+      > span {
+        font-size: 12px;
+      }
+    }
+    .ul {
+      height: 100%;
+      width: 80%;
+      justify-content: center;
+      display: flex;
+      margin: 0 auto;
+      .li{
+        width: 50%;
+        display: flex;
+        margin: 0 auto;
+        justify-content: center;
+        align-items: center;
+        >p{
+          writing-mode: vertical-lr;
+          margin-left: 10px;
+        }
+        .liimg{
+            margin: 0;
+        }
       }
     }
   }
 }
-</style>
+</style>

+ 14 - 2
src/pages/mobilescene/index.vue

@@ -71,7 +71,13 @@ import qrcode from "./components/qrcode.vue";
 import scene from "./scene.vue";
 import vhotspot from "@/components/hotspot/index.vue";
 
-import { region, Booth } from "@/data/raw.js";
+import { region } from "@/data/raw.js";
+import { Booth } from "@/data/booth.js";
+
+let all_booth = []
+Booth.forEach(item => {
+   all_booth = all_booth.concat(item.company)
+});
 
 export default {
   components: {
@@ -95,7 +101,7 @@ export default {
       return this.themes.find((item) => item.id == this.theme);
     },
     currentPano() {
-      return Booth.find((item) => item.panoId == this.currentPanoid) || {};
+      return all_booth.find((item) => item.panoId == this.currentPanoid) || {};
     },
   },
   data() {
@@ -123,6 +129,12 @@ export default {
   },
 
   watch: {
+    g_isLandscape:{
+      immediate:true,
+      handler:function (newVal) {
+        newVal?this.$showOrientationtip({isLandscape:false,isTip:true}):this.$hideOrientationtip()
+      }
+    },
     currentTheme(newVal) {
       if (newVal) {
         let tt = this.currentPanoid;

+ 4 - 1
src/pages/mobilescene/menu/func.vue

@@ -187,7 +187,6 @@ export default {
           localStorage.setItem("g_bgmstatus", this.isBgm ? "open" : "close");
         }
         this.$bus.$on("toggleBGM", (data) => {
-          console.log(data, "datadatadatadatadatadatadatadata");
           if (!data) {
             this.isBgm = data;
           } else {
@@ -198,6 +197,10 @@ export default {
           }
         });
       });
+        this.$bus.$on("isShowHuDong", (data) => {
+          this.isShowHuDong=data
+        })
+
     });
   },
 };

+ 13 - 3
src/pages/mobilescene/scene.vue

@@ -21,6 +21,7 @@ export default {
       firstView,
       viewId: this.$route.params.type,
       boothId: this.$route.query.boothId,
+      boothRepeat: this.$route.query.boothRepeat,
     };
   },
 
@@ -29,17 +30,26 @@ export default {
       let tmp = "";
       if (this.boothId) {
         let tt = ''
+        let cutt = ''
         for (let index = 0; index < Booth.length; index++) {
           const item = Booth[index];
-          tt = item.company.find(sub=>sub.panoId==this.boothId)
+          tt = item.company.filter(sub=>sub.panoId==this.boothId)
+          console.log(tt);
           if (tt) {
+            cutt = tt
             break
           }
         }
 
-        let panoQuat = tt.firstView.split("qua:")[1];
+        if (tt.length>1&&this.boothRepeat) {
+          cutt = tt[this.boothRepeat.split('_')[1]]
+        }
+
+        console.log(cutt);
+
+        let panoQuat = cutt.firstView.split("qua:")[1];
         let [x, y, z, w] = panoQuat.split(",");
-        tmp = `&firstView=pano:${tt.panoId},qua:${x + ", " + y + ", " + z + ", " + w}`;
+        tmp = `&firstView=pano:${cutt.panoId},qua:${x + ", " + y + ", " + z + ", " + w}`;
       }
       return tmp;
     },

+ 34 - 18
src/pages/scene/aside.vue

@@ -10,22 +10,32 @@
       >
         <img :src="require(`@/assets/images/proj2022/pc/diwen.png`)" alt="" />
         <div class="arrow" >
-          <img :src="require(`@/assets/images/proj2022/pc/enter_1.png`)" alt="" />
+          <img :src="require(`@/assets/images/proj2022/pc/enter_${theme}.png`)" alt="" />
         </div>
 
         <div class="txtcon">
           <span class="tag">{{ item.short }}</span>
-          <span class="text" :title="item.desc || item.name">{{ item.desc || item.name }}</span>
+          <span class="text" :title="item.desc || item.name">
+          {{ item.desc || item.name }}
+          <template v-if="item.id!='xuting'&&item.id!='weiting'">
+            展位数量: {{item.company.length}}
+          </template>
+          </span>
+          
         </div>
       </li>
     </ul>
-    <img v-if="ishowzbtn" class="zhankai" @click="zhankai" :src="require(`@/assets/images/proj2022/pc/zhankai.png`)" alt="" />
+
+    <div v-if="ishowzbtn" @click="zhankai"  class="zhankai">
+      <img :src="require(`@/assets/images/proj2022/pc/zhankai.png`)" alt="" />
+      <span>展开展项</span>
+    </div>
   </div>
 </template>
 
 <script>
 import panodata from "@/components/mapsvg/pano.js";
-import { Booth } from "@/data/raw.js";
+
 
 export default {
   props: ["currentPanoid"],
@@ -45,7 +55,6 @@ export default {
       panodata,
       showMap: false,
       hoverName: "",
-      booth: Booth,
       ishowzbtn: false,
     };
   },
@@ -56,18 +65,13 @@ export default {
     currentItem() {
       return this.themes.find((item) => item.id == this.theme);
     },
-    currentPano() {
-      return Booth.find((item) => item.panoId == this.currentPanoid) || {};
-    },
+  
   },
 
   watch: {
     isShow(newVal) {
       this.$bus.$emit("closehotspot", newVal);
-    },
-    currentPano(newVal) {
-      this.$emit("currentPano", newVal);
-    },
+    }
   },
   methods: {
     zhankai() {
@@ -100,6 +104,12 @@ export default {
   > ul {
     margin: 0 auto;
     width: 100%;
+    @supports (backdrop-filter: brightness(60%)) {
+      > li {
+          backdrop-filter: blur(15px) brightness(60%) !important;
+          background-color: rgba(0, 0, 0, 0) !important;
+      }
+    }
     > li {
       width: 50%;
       height: 71px;
@@ -109,7 +119,7 @@ export default {
       position: relative;
       overflow: hidden;
       font-size: 0;
-      backdrop-filter: blur(15px) brightness(60%);
+      background-color: rgba(0, 0, 0, 0.6);
       transition: all ease 0.3s;
       clip-path: polygon(
         0 0,
@@ -174,7 +184,7 @@ export default {
           white-space: nowrap;
           margin-top: 4px;
           padding-left: 10px;
-          font-size: 14px;
+          font-size: 12px;
           position: relative;
           line-height: 1;
           vertical-align: middle;
@@ -244,11 +254,8 @@ export default {
           top: 50%;
           transform: translateY(-50%);
           z-index: 999;
-          text-indent: -12px;
-          overflow: hidden;
           >img{
             width: 100%;
-            filter: drop-shadow(12px 0px var(--bgColor));
           }
         }
       }
@@ -257,9 +264,18 @@ export default {
 
   .zhankai {
     position: fixed;
-    bottom: 65px;
+    bottom: 25px;
     left: 20px;
     cursor: pointer;
+    width: 142px;
+    height: 45px;
+    backdrop-filter: blur(6px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 31px;
+    padding-right: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
   }
 }
 </style>

+ 7 - 1
src/pages/scene/components/content.vue

@@ -109,6 +109,12 @@ export default {
   >svg{
     opacity: 0;
   }
+  @supports (backdrop-filter: brightness(60%)) {
+  .vcontentcon {
+      backdrop-filter: blur(50px) brightness(60%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+  }
+}
   .vcontentcon {
     pointer-events: auto;
     position: absolute;
@@ -118,7 +124,7 @@ export default {
     height: 100%;
     text-align: center;
     padding: 34px 0 0;
-    backdrop-filter: blur(50px) brightness(60%);
+    background-color: rgba(0, 0, 0, 0.6);
     clip-path: url(#svgPath);
     .vcontenttitle {
       margin: 0 auto 20px;

+ 10 - 4
src/pages/scene/components/daka.vue

@@ -13,11 +13,11 @@
 
     <div class="dakacon">
       <h3>打卡</h3>
-      <div class="innercon" :style="{backgroundImage:`url(${require(`@/assets/images/proj2022/pc/bg_r_s.png`)})`}">
+      <div class="innercon" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/pc/bg_r_s.png`)})` }">
         <div class="dakatitle">您正在游览</div>
         <p>{{ currentItem.name }}</p>
         <p>{{ currentItem.desc }}</p>
-        <div @click="daka" class="dakacccir" :style="{backgroundImage:`url(${require(`@/assets/images/proj2022/pc/record_${theme}.png`)})`}">
+        <div @click="daka" class="dakacccir" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/pc/record_${theme}.png`)})` }">
           <span>打卡</span>
         </div>
         <div class="s-scroll">
@@ -100,6 +100,12 @@ export default {
   > svg {
     opacity: 0;
   }
+  @supports (backdrop-filter: brightness(60%)) {
+    .dakacon {
+      backdrop-filter: blur(50px) brightness(60%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
 
   .dakacon {
     pointer-events: auto;
@@ -110,7 +116,7 @@ export default {
     height: 100%;
     text-align: center;
     padding: 34px 0 0;
-    backdrop-filter: blur(50px) brightness(60%);
+    background-color: rgba(0, 0, 0, 0.5);
     clip-path: url(#svgPathdaka);
     > h3 {
       margin: 0 auto 20px;
@@ -122,7 +128,7 @@ export default {
       background-color: rgba(0, 0, 0, 0.4);
       width: 90%;
       margin: 0 auto;
-      padding: 36px 30px;
+      padding: 36px 30px 0;
       background-repeat: no-repeat;
       background-position: bottom center;
       background-size: 100% auto;

+ 29 - 8
src/pages/scene/components/qrcode.vue

@@ -12,7 +12,7 @@
     </svg>
 
     <div class="downloadQrcon">
-      <qrcodetl v-if="tmpPano" :id="'qrpg_' + tmpPano.id" :data="tmpPano" />
+      <qrcodetl v-if="tmpPano" :id="'qrpg_' + tmpPano.panoId" :data="tmpPano" />
       <qrcodetl v-if="currentItem" :id="'qrpgc_' + currentItem.id" :data="currentItem" />
     </div>
 
@@ -23,7 +23,7 @@
           <template v-if="tmpPano.name">
             <p v-if="!currentPanoArr" v-html="tmpPano.name || ''"></p>
             <div v-else class="xiala">
-              <span @click="isShowUl = !isShowUl">
+              <span :title="tmpPano.name" @click="isShowUl = !isShowUl">
                 {{ tmpPano.name }}
                 <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="" />
               </span>
@@ -33,13 +33,13 @@
             </div>
           </template>
           <p v-else></p>
-          <img v-if="tmpPano.id" :src="require(`@/assets/images/project/qrcode/${tmpPano.id}.jpg`)" alt="" />
+          <img v-if="tmpPano.panoId" :src="require(`@/assets/images/project/qrcode/${tmpPano.panoId}.jpg`)" alt="" />
           <!-- <img :src="require(`@/assets/images/project/qrcode/11.jpg`)" alt="" /> -->
-          <div @click="download(tmpPano.id, 'qrpg_')" class="download">下载二维码</div>
+          <div @click="download(tmpPano.panoId, 'qrpg_')" class="download">下载二维码</div>
         </div>
 
         <div class="li" v-if="currentItem.id">
-          <p v-html="currentItem.name"></p>
+          <p v-html="currentItem.desc"></p>
           <img :src="require(`@/assets/images/project/qrcode/${currentItem.id}.jpg`)" alt="" />
           <div @click="download(currentItem.id, 'qrpgc_')" class="download">下载二维码</div>
         </div>
@@ -49,7 +49,15 @@
 </template>
 
 <script>
-import { Booth } from "@/data/raw.js";
+import { Booth } from "@/data/booth.js";
+
+let all_booth = [];
+Booth.forEach((item) => {
+  all_booth = all_booth.concat(item.company);
+});
+
+console.log(all_booth);
+
 import qrcodetl from "@/components/qrcodetl/index.vue";
 import domtoimage from "dom-to-image";
 
@@ -64,7 +72,13 @@ export default {
   components: { qrcodetl },
   computed: {
     currentPanoArr: function() {
-      let tmp = Booth.filter((item) => item.panoId == this.currentPano.panoId);
+      let tmp1 = all_booth.filter((item) => item.panoId == this.currentPano.panoId);
+      let tmp = tmp1.map((item, idx) => {
+        return {
+          ...item,
+          panoId: idx > 0 ? `${item.panoId}_${idx}` : item.panoId,
+        };
+      });
       return tmp && tmp.length > 1 ? tmp : "";
     },
   },
@@ -105,6 +119,13 @@ export default {
     top: 0;
     left: -100vw;
   }
+
+  @supports (backdrop-filter: brightness(60%)) {
+    .qrcodecon {
+      backdrop-filter: blur(50px) brightness(60%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
   .qrcodecon {
     pointer-events: auto;
     position: absolute;
@@ -114,7 +135,7 @@ export default {
     height: 100%;
     text-align: center;
     padding: 34px 0 0;
-    backdrop-filter: blur(50px) brightness(60%);
+    background-color: rgba(0, 0, 0, 0.5);
     clip-path: url(#svgPathdaka);
     > h3 {
       margin: 0 auto 20px;

+ 12 - 6
src/pages/scene/index.vue

@@ -8,11 +8,6 @@
     <div class="scene-con" :class="{ showscene: showAll }">
       <template v-if="!showViewMode && !tourStatus">
         <vside
-          @currentPano="
-            (data) => {
-              currentPano = data;
-            }
-          "
           v-show="!tourStatus && !isClear"
           :currentPanoid="currentPanoid"
         />
@@ -55,6 +50,11 @@ import vhotspot from "@/components/hotspot/index.vue";
 import { region } from "@/data/raw.js";
 import { Booth } from "@/data/booth.js";
 
+let all_booth = []
+Booth.forEach(item => {
+   all_booth = all_booth.concat(item.company)
+});
+
 let exitFullscreen = function() {
   document.exitFullscreen
     ? document.exitFullscreen()
@@ -96,7 +96,6 @@ export default {
       showAll: false,
       showScene: true,
       currentPanoid: "",
-      currentPano: {},
       isFull: false,
       hotspots: [],
       hotspot: "",
@@ -112,6 +111,9 @@ export default {
     zhanxiangData() {
       return Booth.find((item) => item.id == this.theme);
     },
+    currentPano() {
+      return all_booth.find((item) => item.panoId == this.currentPanoid) || {};
+    },
   },
 
   watch: {
@@ -158,6 +160,10 @@ export default {
           if (res.data.source === "showAll") {
             this.showAll = true;
             this.$hideLoading();
+            setTimeout(() => {
+              this.$bus.$emit("toggleShowZX", false)
+            }, 1500);
+
             document.querySelector("#ifr").contentWindow.postMessage(
               {
                 source: "changeTheme",

+ 22 - 4
src/pages/scene/raside/map.vue

@@ -70,12 +70,19 @@ export default {
   text-align: center;
   .cadcon {
     width: @conw;
+
+      @supports (backdrop-filter: brightness(60%)) {
+    .cadmap {
+      backdrop-filter: blur(30px) brightness(80%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
     .cadmap {
       position: relative;
       margin: 0 auto;
       width: 100%;
       height: 190px;
-      backdrop-filter: blur(30px) brightness(80%);
+      background-color: rgba(0, 0, 0, .5);
       .cad {
         position: absolute;
         width: 100%;
@@ -99,12 +106,18 @@ export default {
         background-position: -9% center;
       }
     }
+       @supports (backdrop-filter: brightness(60%)) {
+    > ul{
+      backdrop-filter: blur(7px) brightness(60%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
     > ul {
       width: 100%;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      backdrop-filter: blur(7px) brightness(60%);
+      background-color: rgba(0, 0, 0, 0.6);
       border-radius: 0px 0px 0px 5px;
       overflow: hidden;
       height: 44px;
@@ -128,7 +141,12 @@ export default {
       pointer-events: none;
     }
   }
-
+   @supports (backdrop-filter: brightness(60%)) {
+    .draw{
+      backdrop-filter: blur(7px) brightness(55%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
   .draw {
     width: 38px;
     cursor: pointer;
@@ -139,7 +157,7 @@ export default {
     font-size: 0;
     top: 0;
     padding-left: 4px;
-    backdrop-filter: blur(7px) brightness(55%);
+    background-color: rgba(0, 0, 0, 0.7);
     text-align: left;
   
     .jiantou {

+ 13 - 3
src/pages/scene/scene.vue

@@ -20,6 +20,7 @@ export default {
       firstView,
       viewId: this.$route.params.type,
       boothId: this.$route.query.boothId,
+      boothRepeat: this.$route.query.boothRepeat,
     };
   },
 
@@ -28,17 +29,26 @@ export default {
       let tmp = "";
       if (this.boothId) {
         let tt = ''
+        let cutt = ''
         for (let index = 0; index < Booth.length; index++) {
           const item = Booth[index];
-          tt = item.company.find(sub=>sub.panoId==this.boothId)
+          tt = item.company.filter(sub=>sub.panoId==this.boothId)
+          console.log(tt);
           if (tt) {
+            cutt = tt
             break
           }
         }
 
-        let panoQuat = tt.firstView.split("qua:")[1];
+        if (tt.length>1&&this.boothRepeat) {
+          cutt = tt[this.boothRepeat.split('_')[1]]
+        }
+
+        console.log(cutt);
+
+        let panoQuat = cutt.firstView.split("qua:")[1];
         let [x, y, z, w] = panoQuat.split(",");
-        tmp = `&firstView=pano:${tt.panoId},qua:${x + ", " + y + ", " + z + ", " + w}`;
+        tmp = `&firstView=pano:${cutt.panoId},qua:${x + ", " + y + ", " + z + ", " + w}`;
       }
       return tmp;
     },

+ 15 - 2
src/pages/scene/search/index.vue

@@ -110,11 +110,17 @@ export default {
 .vsearch {
   width: 282px;
   color: #fff;
+   @supports (backdrop-filter: brightness(60%)) {
+    .vinput{
+      backdrop-filter: blur(30px) brightness(60%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
   .vinput {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    backdrop-filter: blur(30px) brightness(60%);
+    background-color: rgba(0, 0, 0, 0.5);
     border-radius: 5px;
     padding: 0 20px;
     width: 100%;
@@ -129,9 +135,16 @@ export default {
       cursor: pointer;
     }
   }
+
+  @supports (backdrop-filter: brightness(60%)) {
+    .vinput{
+      backdrop-filter: blur(50px) brightness(50%) !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
   .cpylist {
     margin-top: 8px;
-    backdrop-filter: blur(50px) brightness(50%);
+    background-color: rgba(0, 0, 0, .5) ;
     border-radius: 5px;
     padding: 26px 18px;
     overflow: hidden;

+ 17 - 9
src/pages/scene/zhanxiang/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="zhangxiang" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/pc/project_${theme}.png`)})` }">
-    <img class="back" @click="back" :src="require(`@/assets/images/proj2022/pc/back.png`)" alt="" />
-
+<div class="back fandb" @click="back">
+    <img  :src="require(`@/assets/images/proj2022/pc/shouqi.png`)" alt="" />
+    <span>收起展览</span>
+</div>
     <div class="www" ref="bgsw" v-swiper:mySwiper="swiperOptions">
       <ul class="swiper-wrapper">
         <li
@@ -52,10 +54,8 @@ export default {
 
   watch:{
     currentPanoid(newVal){
-
       let idx = this.zxdata.company.findIndex(item=>newVal == item.panoId)
-      console.log(idx);
-      this.swiper.slideTo(idx);
+      idx>-1 && this.swiper.slideTo(idx);
 
     }
   },
@@ -93,11 +93,19 @@ export default {
   transition: 0.3s ease all;
   pointer-events: none;
   .back {
-    margin-right: 80px;
-    align-self: flex-start;
-    margin-top: 30px;
-    cursor: pointer;
+    margin-right: 100px;
+    margin-bottom: 20px;
+    align-self: flex-end;
     pointer-events: auto;
+    cursor: pointer;
+    width: 142px;
+    height: 45px;
+    backdrop-filter: blur(6px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 31px;
+    padding-right: 20px;
   }
   .www {
     width: calc(100% - 350px);

+ 1 - 1
src/pages/scenePage/views/gui/guide.vue

@@ -237,7 +237,7 @@ export default {
       display: inline-block;
       position: absolute;
       bottom: 58px;
-      left: 0;
+      left: 10px;
       &::before,
       &::after {
         display: none !important;