update

public/static/js/main_2020_show.js

@@ -8160,13 +8160,13 @@ window.Modernizr = function(n, e, t) {
         function s(e, t) {
             setTimeout(function() {
                 if (h.isHelpEnabled()) {
-                    if (t(),
-                    u.init(),
-                    C.addClass("fadeIn landing " + u.deviceType),
-                    h.isSmallHelpEnabled())
-                        return void C.addClass("small");
-                    u.fill(I, d.LANDING[E]),
-                    C.addClass(E)
+                    // if (t(),
+                    // u.init(),
+                    // C.addClass("fadeIn landing " + u.deviceType),
+                    // h.isSmallHelpEnabled())
+                    //     return void C.addClass("small");
+                    // u.fill(I, d.LANDING[E]),
+                    // C.addClass(E)
                 }
             }, e)
             //csz 用户引导界面

src/assets/theme/theme.less

@@ -45,7 +45,7 @@
   .textActive{
     cursor: pointer;
     &:hover,&.active{
-      color: @backcolor!important;
+      color: @backcolor * 2!important;
     }
   }
 

src/components/hotspot/image.vue

@@ -84,7 +84,7 @@
         />
       </div>
       <div v-if="hotspot.content" class="desc">
-        <div v-html="handleContent(hotspot.contents[mbactive], 14)"></div>
+        <div v-html="handleContent(hotspot.contents[active], 14)"></div>
       </div>
     </div>
   </div>
@@ -105,13 +105,11 @@ export default {
     return {
       panzoom: "",
       active: 0,
-      mbactive: 0,
     };
   },
   methods: {
     handlePage(type) {
       if (type === "next") {
-        console.log(this.hotspot.images.length);
         if (this.active >= this.hotspot.images.length - 1) {
           this.active = 0;
           return;
@@ -140,7 +138,7 @@ export default {
         },
         on: {
           slideChangeTransitionEnd: function() {
-            that.mbactive = this.realIndex;
+            that.active = this.realIndex;
           },
         },
       };
@@ -212,17 +210,22 @@ export default {
 
     .hotspotcon {
       width: 90%;
-      top: 50%;
+      height: 94%;
+      top: 0%;
       left: 50%;
-      transform: translate(-50%, -50%);
+      transform: translate(-50%, 0%);
       position: absolute;
       .img-con {
         display: flex;
         align-items: center;
         justify-content: space-between;
         position: relative;
+        height: 75%;
+        overflow: hidden;
+        margin-top: 6%;
         .imgmain {
           width: 90%;
+          height: 100%;
           overflow-x: hidden;
           overflow-y: auto;
           position: relative;
@@ -230,6 +233,7 @@ export default {
           img {
             cursor: pointer;
             max-width: 100%;
+            height: 100%;
           }
         }
         @h: 100%;
@@ -255,6 +259,7 @@ export default {
       }
       .desc {
         width: 90%;
+        height: 14%;
         font-size: 20px;
         text-align: justify;
         line-height: 1.8;
@@ -278,7 +283,11 @@ export default {
         92% 98%,
         1% 98%
       );
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
       .img-con {
+        margin-top: 0;
         height: 100%;
         .imgmain {
           width: 100%;

src/components/hotspot/index.vue

@@ -10,6 +10,7 @@ import image from './image.vue';
 import video from './video.vue';
 import title from './title.vue';
 import iframe from './iframe.vue';
+import model from './model.vue';
 
 
 
@@ -28,7 +29,8 @@ export default {
     vImage:image,
     vIframe:iframe,
     vTitle:title,
-    vVideo:video
+    vVideo:video,
+    vModel:model,
   },
   methods:{
     close(){
@@ -36,6 +38,7 @@ export default {
     }
   },
   mounted(){
+    console.log(this.hotspot);
     iconArr.forEach(item => {
       if (this.hotspot[item.key]) {
         this.active = !this.active ? item.id : this.active;

src/components/hotspot/model.vue

@@ -0,0 +1,430 @@
+<template>
+  <div class="hotspot" v-if="!isMobile">
+    <img
+      class="vhotspot"
+      :src="require(`@/assets/images/project/kuangti/hotspot_${theme}.png`)"
+      alt=""
+    />
+    <div class="brightness"></div>
+    <img
+      @click="$emit('close')"
+      class="close"
+      :src="require('@/assets/images/project/icon/close.png')"
+      alt=""
+    />
+
+    <div class="vhotspotcon">
+      <div class="vtitle" v-html="hotspot.title"></div>
+      <div class="hotspotcon" :class="{ fullcon: !hotspot.content }">
+        <div class="img-con">
+          <img
+            class="aa"
+            v-if="hotspot.model.length > 1"
+            :src="require('@/assets/images/project/icon/hotspot_l.png')"
+            alt=""
+            @click="handlePage('prev')"
+          />
+          <div class="imgmain" :class="{ bigImg: !hotspot.content }">
+            <iframe :key="active" allowfullscreen frameborder="0" :src="hotspot.model[active]"></iframe>
+          </div>
+          <img
+            class="aa"
+            v-if="hotspot.model.length > 1"
+            :src="require('@/assets/images/project/icon/hotspot_r.png')"
+            alt=""
+            @click="handlePage('next')"
+          />
+        </div>
+        <div class="pagna" v-if="hotspot.model.length > 1">
+          <span>{{ active + 1 }}</span>
+          /
+          <span>{{ hotspot.model.length }}</span>
+        </div>
+        <div
+          class="desc"
+          v-html="handleContent(hotspot.contents[active])"
+        ></div>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="mbhotspot">
+    <img
+      class="vhotspot"
+      :src="require(`@/assets/images/mobile/kuangti/hotspot_${theme}.png`)"
+      alt=""
+    />
+    <div class="brightness"></div>
+    <img
+      @click="$emit('close')"
+      class="close"
+      :src="require('@/assets/images/project/icon/close.png')"
+      alt=""
+    />
+    <div class="title" v-html="hotspot.title"></div>
+
+    <div class="mbhcon" :class="{ fullcon: !hotspot.content }">
+      <div class="img-con">
+        <img
+          class="aa"
+          v-if="hotspot.model.length > 1"
+          :src="require('@/assets/images/project/icon/hotspot_l.png')"
+          alt=""
+          @click="handlePage('prev')"
+        />
+        <div class="imgmain" :class="{ bigImg: !hotspot.content }">
+            <iframe :key="active" allowfullscreen frameborder="0" :src="hotspot.model[active]"></iframe>
+        </div>
+        <img
+          class="aa"
+          v-if="hotspot.model.length > 1"
+          :src="require('@/assets/images/project/icon/hotspot_r.png')"
+          alt=""
+          @click="handlePage('next')"
+        />
+      </div>
+      <div v-if="hotspot.content" class="desc">
+        <div v-html="handleContent(hotspot.contents[active], 14)"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { directive } from "vue-awesome-swiper";
+// import style (<= Swiper 5.x)
+import "swiper/css/swiper.css";
+import Panzoom from "@panzoom/panzoom";
+
+export default {
+  directives: {
+    swiper: directive,
+  },
+  props: ["hotspot", "type"],
+  data() {
+    return {
+      panzoom: "",
+      active: 0,
+    };
+  },
+  methods: {
+    handlePage(type) {
+      if (type === "next") {
+        console.log(this.hotspot.model.length);
+        if (this.active >= this.hotspot.model.length - 1) {
+          this.active = 0;
+          return;
+        }
+        this.active += 1;
+      } else {
+        if (this.active == 0) {
+          this.active = this.hotspot.model.length - 1;
+          return;
+        }
+        this.active -= 1;
+      }
+    },
+  },
+  computed: {
+    swiperOption() {
+      let that = this;
+      return {
+        slidesPerView: "auto",
+        autoplay: false,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        loop: this.hotspot.model.length > 1,
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        on: {
+          slideChangeTransitionEnd: function() {
+            that.active = this.realIndex;
+          },
+        },
+      };
+    },
+  },
+  mounted() {
+    const elem = document.getElementById("map");
+    this.panzoom = Panzoom(elem, {
+      maxScale: 10,
+      startScale: !this.hotspot.content ? 0.8 : this.isMobile ? 0.6 : 1,
+      startY: (!this.hotspot.content&&this.isMobile)?100:0
+    });
+    this.panzoom.pan(0,50)
+    elem.addEventListener("wheel", this.panzoom.zoomWithWheel);
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.noshow {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+@w: 82%;
+@fixw: 8px;
+.hotspot {
+  width: @w;
+  position: relative;
+  margin: 10px auto 0;
+  .vhotspot {
+    width: 100%;
+    position: relative;
+    pointer-events: none;
+  }
+
+  .brightness {
+    position: absolute;
+    width: 100%;
+    height: 101%;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    clip-path: polygon(1% 11%, 10% 2%, 99% 2%, 99% 89%, 91% 98%, 1% 98%);
+  }
+  .close {
+    position: absolute;
+    top: 40px;
+    right: 30px;
+    width: 20px;
+    cursor: pointer;
+    z-index: 1000;
+  }
+
+  .vhotspotcon {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    .vtitle {
+      position: absolute;
+      top: 24px;
+      left: 130px;
+      z-index: 99;
+      font-size: 20px;
+    }
+
+    .hotspotcon {
+      width: 90%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      .img-con {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        .imgmain {
+          width: 90%;
+          overflow-x: hidden;
+          overflow-y: auto;
+          position: relative;
+          margin: 0 auto;
+          >iframe {
+            width: 100%;
+            cursor: pointer;
+            height: 60vh;
+          }
+        }
+        @h: 100%;
+        .bigImg {
+          max-height: @h;
+          margin: 0;
+          > img {
+            max-height: @h;
+          }
+        }
+        .aa {
+          width: 30px;
+          height: auto;
+          cursor: pointer;
+        }
+      }
+      .pagna {
+        text-align: center;
+        z-index: 999;
+        font-size: 18px;
+        margin-top: 10px;
+        color: rgba(255, 255, 255, 0.8);
+      }
+      .desc {
+        width: 90%;
+        font-size: 20px;
+        text-align: justify;
+        line-height: 1.8;
+        max-height: 120px;
+        margin: 10px auto 0;
+        padding-right: 14px;
+        overflow-y: auto;
+      }
+    }
+    .fullcon {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      clip-path: polygon(
+        1% 12%,
+        3.8% 8%,
+        42% 8%,
+        45.2% 2.7%,
+        99% 2.7%,
+        99% 89%,
+        92% 98%,
+        1% 98%
+      );
+      .img-con {
+        height: 100%;
+        .imgmain {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+.mbhotspot {
+  width: 96%;
+  margin: 60px auto 0;
+  position: relative;
+  .vhotspot {
+    width: 100%;
+    position: relative;
+    pointer-events: none;
+  }
+
+  .brightness {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    clip-path: polygon(1% 11%, 10% 2%, 99% 2%, 99% 89%, 92% 98%, 1% 98%);
+  }
+  .close {
+    position: absolute;
+    top: 26px;
+    right: 16px;
+    width: 14px;
+    z-index: 1000;
+  }
+  .title {
+    position: absolute;
+    top: 14px;
+    left: 40px;
+    display: inline-block;
+    font-size: 16px;
+    margin: 0px auto;
+    width: 90vw;
+  }
+  .mbhcon {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 100%;
+    overflow: hidden;
+    clip-path: polygon(
+      1% 12%,
+      3.8% 7.5%,
+      86% 7.5%,
+      90% 2.7%,
+      99% 2.7%,
+      99% 89%,
+      92% 97%,
+      1% 97%
+    );
+    .img-con {
+      display: flex;
+      height: 70%;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+      overflow: hidden;
+      .imgmain {
+        width: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
+        margin: 0 auto;
+        iframe {
+          cursor: pointer;
+          width: 100%;
+        }
+      }
+      @h: 100%;
+      .bigImg {
+        max-height: @h;
+        margin: 0;
+        > img {
+          max-height: @h;
+        }
+      }
+      @pos: 14px;
+      .aa {
+        position: absolute;
+        width: 10px;
+        height: auto;
+        cursor: pointer;
+        top: 50%;
+        transform: translateY(-50%);
+        left: @pos;
+        &:last-of-type {
+          right: @pos;
+          left: unset;
+        }
+      }
+    }
+    .desc {
+      text-align: justify;
+      width: 100%;
+      height: 22%;
+      padding: 0 14px;
+      margin: 10px auto 0;
+      p {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      div {
+        font-size: 14px;
+        margin-top: 10px;
+        line-height: 1.5;
+        max-height: 100%;
+        padding-right: 4px;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .fullcon {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    clip-path: polygon(
+      1% 12%,
+      3.8% 7.5%,
+      86% 7.5%,
+      90% 2.7%,
+      99% 2.7%,
+      99% 89%,
+      92% 98%,
+      1% 98%
+    );
+    .img-con {
+      height: 100%;
+      .imgmain {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

src/components/hotspot/video.vue

@@ -25,7 +25,7 @@
             alt=""
           />
           <div class="imgmain">
-            <video controls autoplay>
+            <video controlslist="nodownload noremoteplayback" disablePictureInPicture controls autoplay>
               <source :src="hotspot.video[active].url" type="video/mp4" />
             </video>
           </div>
@@ -70,7 +70,7 @@
           :key="index"
         >
           <div class="sl-item">
-            <video controls autoplay>
+            <video controlslist="nodownload noremoteplayback" disablePictureInPicture controls autoplay>
               <source :src="item.url" type="video/mp4" />
             </video>
           </div>

src/data/raw.js

@@ -10,6 +10,23 @@ let calcuSpread = (start, end) => {
 //展区
 let region = [
   {
+    id: "xuting",
+    name: "序厅",
+    theme: "#FF9700",
+    desc: "创新创业支撑科技自立自强",
+    company: [61, 62, 63, 64, 65, 66, 67, 68, 69, 610, 611, 612], //序厅展位ID
+    spread: calcuSpread(0, 29),
+    firstView:{
+      panoId: "29",
+      panoQuaternion: {
+        w: 0.7136848069310208,
+        x: -0.0019084363104157679,
+        y: 0.7004618967012249,
+        z: 0.0018730774187821193,
+      }, 
+    }
+  },
+  {
     id: "a",
     name: "A区",
     theme: "#FF9700", //主题颜色
@@ -242,24 +259,7 @@ let region = [
         z: -0.007638851405218204,
       }, 
     }
-  },
-  {
-    id: "xuting",
-    name: "序厅",
-    theme: "#FF9700",
-    desc: "创新创业支撑科技自立自强",
-    company: [61, 62, 63, 64, 65, 66, 67, 68, 69, 610, 611, 612], //序厅展位ID
-    spread: calcuSpread(0, 29),
-    firstView:{
-      panoId: "29",
-      panoQuaternion: {
-        w: 0.7136848069310208,
-        x: -0.0019084363104157679,
-        y: 0.7004618967012249,
-        z: 0.0018730774187821193,
-      }, 
-    }
-  },
+  }
 ];
 
 // 展位

src/pages/mobilescene/search/index.vue

@@ -16,14 +16,14 @@
           <li v-for="(item,i) in region" :key="i">
             <p>{{item.name}}</p>
             <ul>
-              <li  @click="handleItem(sub)" class="textActive" v-for="(sub,idx) in item.company" :key="idx">
+              <li @click="handleItem(sub)" class="textActive" v-for="(sub,idx) in item.company" :key="idx">
                 {{sub.name}}
               </li>
             </ul>
           </li>
         </ul>
         <ul v-else>
-          <li>暂无数据</li>
+          <li>未搜索到该项目</li>
         </ul>
       </div>
   </div>
@@ -40,7 +40,9 @@ let gregion = region.map(item=>{
       tmp.push(ii)
     }
   })
-  item.company = tmp
+  let tt = tmp.filter(item=>(item.mapId.indexOf('xt')<=-1))
+
+  item.company = tt
   return item
 })
 

src/pages/scene/aside.vue

@@ -171,7 +171,7 @@ export default {
     >ul{
       margin: 0 auto;
       width: calc(100% - @gap * 2);
-      max-height: 64%;
+      max-height: calc(100vh - 390px);
       overflow-y: auto;
       >li{
         width: calc(50% - @gap/2);

src/pages/scene/components/qrcode.vue

@@ -11,7 +11,7 @@
       <h3>扫描二维码，手机观展</h3>
       <div class="ul">
         <div class="li">
-          <p v-if="currentPano.name" v-html="currentPano.name"></p>
+          <p v-html="currentPano.name || ''"></p>
           <!-- <div class="xiala" v-else>
             <span @click="isShowUl=!isShowUl">
               {{currentPano.name}}

src/pages/scene/search/index.vue

@@ -12,7 +12,7 @@
           </li>
         </ul>
         <ul v-else>
-          <li>暂无数据</li>
+          <li>未搜索到该项目</li>
         </ul>
       </div>
   </div>
@@ -20,12 +20,14 @@
 
 <script>
 import {Booth} from '@/data/raw'
+
+let fixBooth = Booth.filter(item=>(item.mapId.indexOf('xt')<=-1))
 let arr = []
 
 export default {
   props:['currentPanoid'],
   data(){
-    this.u_extend(arr,Booth)
+    this.u_extend(arr,fixBooth)
     return {
       key:'',
       region:arr,
@@ -38,7 +40,7 @@ export default {
     },
     key(newVal){
      let tmpregion = []
-      this.u_extend(tmpregion,Booth)
+      this.u_extend(tmpregion,fixBooth)
       if (!newVal) {
         this.region = tmpregion
       }