3 tahun lalu · c92e094ad0
--- a/public/model/assets/main/config.json
+++ b/public/model/assets/main/config.json
--- a/public/model/assets/main/import/08/08be024f5.json
+++ b/public/model/assets/main/import/08/08be024f5.json
--- a/public/model/assets/main/import/0b/0b6926bcd.json
+++ b/public/model/assets/main/import/0b/0b6926bcd.json
--- a/public/model/assets/main/import/0b/0bc755742.json
+++ b/public/model/assets/main/import/0b/0bc755742.json
--- a/public/model/assets/main/import/0f/0fd1ea33b.json
+++ b/public/model/assets/main/import/0f/0fd1ea33b.json
@@ -0,0 +1 @@
 
				+{"type":"cc.Texture2D","data":[["2,2,2,2,0,0",["6bwl42RRhDbpxvdKq/p7a2"]],["2,2,2,2,0,0",["322wVq5wROwJ9oE12P1qrL"]],["2,2,2,2,0,0",["09afT1oGVIXZBOfgAp0ruI"]],["2,2,0,0,0,0",["60tq3qJApBNKzSkeJ/le3M"]],["2,2,0,0,0,0",["a4R9yhPUlEv7+wd1gE3in9"]],["2,2,2,2,0,0",["bdjT81Yn9K6ayTZSMPTLv1"]],["2,2,2,2,0,0",["e7QvWN5wFHMq4kJcFyGnuT"]],["2,2,2,2,0,0",["e9CAaUJBlCCbw1WZRMmhl8"]]]}
			
--- a/public/model/assets/main/index.js
+++ b/public/model/assets/main/index.js
--- a/public/model/assets/main/native/09/0969f4f5-a065-485d-904e-7e0029d2bb88.png
+++ b/public/model/assets/main/native/09/0969f4f5-a065-485d-904e-7e0029d2bb88.png
--- a/public/model/assets/main/native/60/60b6adea-240a-4134-acd2-91e27f95edcc.jpg
+++ b/public/model/assets/main/native/60/60b6adea-240a-4134-acd2-91e27f95edcc.jpg
--- a/public/model/assets/main/native/60/60b6adea-240a-4134-acd2-91e27f95edcc.png
+++ b/public/model/assets/main/native/60/60b6adea-240a-4134-acd2-91e27f95edcc.png
--- a/public/model/assets/main/native/6b/6bc25e36-4518-436e-9c6f-74aabfa7b6b6.png
+++ b/public/model/assets/main/native/6b/6bc25e36-4518-436e-9c6f-74aabfa7b6b6.png
--- a/public/model/assets/main/native/a4/a447dca1-3d49-44bf-bfb0-775804de29fd.jpg
+++ b/public/model/assets/main/native/a4/a447dca1-3d49-44bf-bfb0-775804de29fd.jpg
--- a/public/model/assets/main/native/a4/a447dca1-3d49-44bf-bfb0-775804de29fd.png
+++ b/public/model/assets/main/native/a4/a447dca1-3d49-44bf-bfb0-775804de29fd.png
--- a/public/model/assets/main/native/bd/bd8d3f35-627f-4ae9-ac93-65230f4cbbf5.png
+++ b/public/model/assets/main/native/bd/bd8d3f35-627f-4ae9-ac93-65230f4cbbf5.png
--- a/public/model/assets/main/native/e7/e742f58d-e701-4732-ae24-25c1721a7b93.png
+++ b/public/model/assets/main/native/e7/e742f58d-e701-4732-ae24-25c1721a7b93.png
--- a/public/model/assets/main/native/e9/e9080694-2419-4209-bc35-59944c9a197c.png
+++ b/public/model/assets/main/native/e9/e9080694-2419-4209-bc35-59944c9a197c.png
--- a/public/model/cocos-js/ammo-instantiated-088a4c5d.js
+++ b/public/model/cocos-js/ammo-instantiated-088a4c5d.js
--- a/public/model/index.html
+++ b/public/model/index.html
@@ -3,7 +3,7 @@
 
				 <head>
			
 
				   <meta charset="utf-8">
			
 
				 
			
 
				-  <title>Cocos Creator | cloudExhibition</title>
			
 
				+  <title>CloudExhibition</title>
			
 
				 
			
 
				   <!--http://www.html5rocks.com/en/mobile/mobifying/-->
			
 
				   <meta name="viewport"
			
--- a/public/model/src/settings.json
+++ b/public/model/src/settings.json
--- a/public/static/js/main_2020_show.js
+++ b/public/static/js/main_2020_show.js
@@ -8533,13 +8533,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 用户引导界面
			
--- a/src/assets/style/reset.less
+++ b/src/assets/style/reset.less
@@ -16,7 +16,7 @@ label,summary{cursor:default;}
 
				 a,button{cursor:pointer;}
			
 
				 h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
			
 
				 del,ins,u,s,a,a:hover{text-decoration:none;}
			
 
				-body,textarea,input,button,select,keygen,legend{font-size: 14px;;outline:0;}
			
 
				+body,textarea,input,button,select,keygen,legend{font-size: 14px;;outline:0;color:#fff;}
			
 
				 *{box-sizing: border-box}
			
 
				 a{text-decoration: none;}
			
 
				 input{  
			
--- a/src/assets/theme/theme.less
+++ b/src/assets/theme/theme.less
@@ -45,7 +45,7 @@
 
				   .textActive{
			
 
				     cursor: pointer;
			
 
				     &:hover,&.active{
			
 
				-      color: @backcolor!important;
			
 
				+      color: @backcolor * 2!important;
			
 
				     }
			
 
				   }
			
 
				 
			
--- a/src/components/hotspot/image.vue
+++ b/src/components/hotspot/image.vue
@@ -15,7 +15,7 @@
 
				 
			
 
				     <div class="vhotspotcon">
			
 
				       <div class="vtitle" v-html="hotspot.title"></div>
			
 
				-      <div class="hotspotcon" :class="{fullcon:!hotspot.content}">
			
 
				+      <div class="hotspotcon" :class="{ fullcon: !hotspot.content }">
			
 
				         <div class="img-con">
			
 
				           <img
			
 
				             class="aa"
			
@@ -24,7 +24,7 @@
 
				             alt=""
			
 
				             @click="handlePage('prev')"
			
 
				           />
			
 
				-          <div class="imgmain" :class="{bigImg: !hotspot.content}">
			
 
				+          <div class="imgmain" :class="{ bigImg: !hotspot.content }">
			
 
				             <img id="map" :src="hotspot.images[active]" alt="" />
			
 
				           </div>
			
 
				           <img
			
@@ -40,7 +40,10 @@
 
				           /
			
 
				           <span>{{ hotspot.images.length }}</span>
			
 
				         </div>
			
 
				-        <div class="desc" v-html="handleContent(hotspot.contents[active])"></div>
			
 
				+        <div
			
 
				+          class="desc"
			
 
				+          v-html="handleContent(hotspot.contents[active])"
			
 
				+        ></div>
			
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
@@ -60,28 +63,28 @@
 
				     />
			
 
				     <div class="title" v-html="hotspot.title"></div>
			
 
				 
			
 
				-    <div class="mbhcon" :class="{ single: hotspot.images.length <= 1 }">
			
 
				-      <div class="swcon" v-swiper:mySwiper="swiperOption">
			
 
				-        <ul class="swiper-wrapper swiper-wrapper-n">
			
 
				-          <div
			
 
				-            class="swiper-slide"
			
 
				-            v-for="(item, index) in hotspot.images"
			
 
				-            :key="index"
			
 
				-          >
			
 
				-            <div class="sl-item">
			
 
				-              <img v-viewer :src="item" />
			
 
				-            </div>
			
 
				-          </div>
			
 
				-        </ul>
			
 
				-        <div
			
 
				-          class="swiper-pagination pagination"
			
 
				+    <div class="mbhcon" :class="{ fullcon: !hotspot.content }">
			
 
				+      <div class="img-con">
			
 
				+        <img
			
 
				+          class="aa"
			
 
				           v-if="hotspot.images.length > 1"
			
 
				-          slot="pagination"
			
 
				-        ></div>
			
 
				+          :src="require('@/assets/images/project/icon/hotspot_l.png')"
			
 
				+          alt=""
			
 
				+          @click="handlePage('prev')"
			
 
				+        />
			
 
				+        <div class="imgmain" :class="{ bigImg: !hotspot.content }">
			
 
				+          <img id="map" :src="hotspot.images[active]" alt="" />
			
 
				+        </div>
			
 
				+        <img
			
 
				+          class="aa"
			
 
				+          v-if="hotspot.images.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[mbactive], 14)"></div>
			
 
				+        <div v-html="handleContent(hotspot.contents[active], 14)"></div>
			
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
@@ -91,7 +94,7 @@
 
				 import { directive } from "vue-awesome-swiper";
			
 
				 // import style (<= Swiper 5.x)
			
 
				 import "swiper/css/swiper.css";
			
 
				-import Panzoom from '@panzoom/panzoom'
			
 
				+import Panzoom from "@panzoom/panzoom";
			
 
				 
			
 
				 export default {
			
 
				   directives: {
			
@@ -100,15 +103,13 @@ export default {
 
				   props: ["hotspot", "type"],
			
 
				   data() {
			
 
				     return {
			
 
				-      panzoom:'',
			
 
				+      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;
			
@@ -125,7 +126,7 @@ export default {
 
				   },
			
 
				   computed: {
			
 
				     swiperOption() {
			
 
				-      let that = this
			
 
				+      let that = this;
			
 
				       return {
			
 
				         slidesPerView: "auto",
			
 
				         autoplay: false,
			
@@ -137,20 +138,22 @@ export default {
 
				         },
			
 
				         on: {
			
 
				           slideChangeTransitionEnd: function() {
			
 
				-            that.mbactive = this.realIndex
			
 
				-          }
			
 
				+            that.active = this.realIndex;
			
 
				+          },
			
 
				         },
			
 
				       };
			
 
				     },
			
 
				   },
			
 
				-  mounted(){
			
 
				-    const elem = document.getElementById('map')
			
 
				+  mounted() {
			
 
				+    const elem = document.getElementById("map");
			
 
				     this.panzoom = Panzoom(elem, {
			
 
				       maxScale: 10,
			
 
				-      startScale: !this.hotspot.content?0.8:1
			
 
				-    })
			
 
				-    elem.addEventListener('wheel', this.panzoom.zoomWithWheel)
			
 
				-  }
			
 
				+      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>
			
 
				 
			
@@ -207,18 +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%;
			
 
				-          max-height: 60vh;
			
 
				+          height: 100%;
			
 
				           overflow-x: hidden;
			
 
				           overflow-y: auto;
			
 
				           position: relative;
			
@@ -226,14 +233,14 @@ export default {
 
				           img {
			
 
				             cursor: pointer;
			
 
				             max-width: 100%;
			
 
				-            max-height: 60vh;
			
 
				+            height: 100%;
			
 
				           }
			
 
				         }
			
 
				-        @h:100%;
			
 
				-        .bigImg{
			
 
				+        @h: 100%;
			
 
				+        .bigImg {
			
 
				           max-height: @h;
			
 
				           margin: 0;
			
 
				-          >img{
			
 
				+          > img {
			
 
				             max-height: @h;
			
 
				           }
			
 
				         }
			
@@ -252,7 +259,8 @@ export default {
 
				       }
			
 
				       .desc {
			
 
				         width: 90%;
			
 
				-        font-size: 16px;
			
 
				+        height: 14%;
			
 
				+        font-size: 20px;
			
 
				         text-align: justify;
			
 
				         line-height: 1.8;
			
 
				         max-height: 120px;
			
@@ -261,12 +269,25 @@ export default {
 
				         overflow-y: auto;
			
 
				       }
			
 
				     }
			
 
				-    .fullcon{
			
 
				+    .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%);
			
 
				+      clip-path: polygon(
			
 
				+        1% 12%,
			
 
				+        3.8% 8%,
			
 
				+        42% 8%,
			
 
				+        45.2% 2.7%,
			
 
				+        99% 2.7%,
			
 
				+        99% 89%,
			
 
				+        92% 98%,
			
 
				+        1% 98%
			
 
				+      );
			
 
				+      top: 50%;
			
 
				+      left: 50%;
			
 
				+      transform: translate(-50%, -50%);
			
 
				       .img-con {
			
 
				+        margin-top: 0;
			
 
				         height: 100%;
			
 
				         .imgmain {
			
 
				           width: 100%;
			
@@ -294,7 +315,7 @@ export default {
 
				     left: 0;
			
 
				     top: 0;
			
 
				     z-index: -1;
			
 
				-    clip-path: polygon(1% 11%, 10% 2%, 99% 2%, 99% 89%, 92% 99%, 1% 99%);
			
 
				+    clip-path: polygon(1% 11%, 10% 2%, 99% 2%, 99% 89%, 92% 98%, 1% 98%);
			
 
				   }
			
 
				   .close {
			
 
				     position: absolute;
			
@@ -310,56 +331,72 @@ export default {
 
				     display: inline-block;
			
 
				     font-size: 16px;
			
 
				     margin: 0px auto;
			
 
				-    width: 60vw;
			
 
				+    width: 90vw;
			
 
				   }
			
 
				   .mbhcon {
			
 
				     position: absolute;
			
 
				-    top: 0;
			
 
				+    top: 50%;
			
 
				     width: 100%;
			
 
				-    left: 0;
			
 
				-
			
 
				-    .swcon {
			
 
				+    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;
			
 
				-      margin: 60px auto 0;
			
 
				-      width: 92%;
			
 
				-      .swiper-wrapper {
			
 
				-        padding: 0;
			
 
				-        .swiper-slide {
			
 
				-          width: 100%;
			
 
				-          transform-style: preserve-3d;
			
 
				-          position: relative;
			
 
				-          height: 100%;
			
 
				-          margin: 0 auto;
			
 
				-          transform: translate3d(0, 0, 0);
			
 
				-          .sl-item {
			
 
				-            width: 100%;
			
 
				-            text-align: center;
			
 
				-            > img {
			
 
				-              max-height: 44vh;
			
 
				-              max-width: 100%;
			
 
				-            }
			
 
				-          }
			
 
				+      overflow: hidden;
			
 
				+      .imgmain {
			
 
				+        width: 100%;
			
 
				+        overflow-x: hidden;
			
 
				+        overflow-y: auto;
			
 
				+        position: relative;
			
 
				+        margin: 0 auto;
			
 
				+        img {
			
 
				+          cursor: pointer;
			
 
				+          max-width: 100%;
			
 
				         }
			
 
				       }
			
 
				-
			
 
				-      .pagination {
			
 
				-        position: static;
			
 
				-        margin-top: 4px;
			
 
				-        z-index: 999;
			
 
				-        & /deep/ .swiper-pagination-bullet,
			
 
				-        & /deep/ .swiper-pagination-bullet-active {
			
 
				-          background-color: #fff !important;
			
 
				+      @h: 100%;
			
 
				+      .bigImg {
			
 
				+        max-height: @h;
			
 
				+        margin: 0;
			
 
				+        > img {
			
 
				+          max-height: @h;
			
 
				         }
			
 
				-        & /deep/ .swiper-pagination-bullet-active {
			
 
				-          background: #fff !important;
			
 
				+      }
			
 
				+      @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: 85%;
			
 
				-      padding-right: 14px;
			
 
				+      width: 100%;
			
 
				+      height: 22%;
			
 
				+      padding: 0 14px;
			
 
				       margin: 10px auto 0;
			
 
				       p {
			
 
				         font-size: 16px;
			
@@ -369,16 +406,34 @@ export default {
 
				         font-size: 14px;
			
 
				         margin-top: 10px;
			
 
				         line-height: 1.5;
			
 
				-        max-height: 15vh;
			
 
				+        max-height: 100%;
			
 
				         padding-right: 4px;
			
 
				         overflow-y: auto;
			
 
				       }
			
 
				     }
			
 
				   }
			
 
				 
			
 
				-  .single {
			
 
				-    top: 46%;
			
 
				-    transform: translateY(-50%);
			
 
				+  .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>
			
--- a/src/components/hotspot/index.vue
+++ b/src/components/hotspot/index.vue
@@ -1,5 +1,5 @@
 
				 <template>
			
 
				-  <div class="hotspotcon">
			
 
				+  <div class="hotspotcon" @mousemove.stop>
			
 
				     <component @close="close" :type="scene" :is="active" :hotspot="hotspot"></component>
			
 
				   </div>
			
 
				 </template>
			
@@ -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;
			
--- a/src/components/hotspot/model.vue
+++ b/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>
			
--- a/src/components/hotspot/title.vue
+++ b/src/components/hotspot/title.vue
@@ -1,21 +1,65 @@
 
				 <template>
			
 
				-  <div class="images">
			
 
				-    <div class="img-con">
			
 
				-      <div class="title">{{ hotspot.title }}</div>
			
 
				-      <div class="desc" v-html="hotspot.content"></div>
			
 
				+  <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">
			
 
				+          <div class="imgmain" :class="{ bigImg: !hotspot.content }">
			
 
				+            <p v-html="handleContent(hotspot.contents[active])"></p>
			
 
				+          </div>
			
 
				+        </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">
			
 
				+        <div class="imgmain" :class="{ bigImg: !hotspot.content }">
			
 
				+          <p v-html="handleContent(hotspot.contents[active], 14)"></p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				     </div>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				+
			
 
				 export default {
			
 
				-  props: ["hotspot"],
			
 
				+  props: ["hotspot", "type"],
			
 
				   data() {
			
 
				     return {
			
 
				-      active: 0,
			
 
				+      active: 0
			
 
				     };
			
 
				   },
			
 
				-  methods: {},
			
 
				+ 
			
 
				 };
			
 
				 </script>
			
 
				 
			
@@ -24,49 +68,271 @@ export default {
 
				   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;
			
 
				+  }
			
 
				 
			
 
				-.images {
			
 
				-  width: 100%;
			
 
				-  height: 100%;
			
 
				-  background-repeat: no-repeat;
			
 
				-  text-align: center;
			
 
				+  .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;
			
 
				+  }
			
 
				 
			
 
				-  .img-con {
			
 
				-    display: flex;
			
 
				-    justify-content: space-around;
			
 
				-    align-items: center;
			
 
				-    flex-direction: column;
			
 
				-    position: relative;
			
 
				-    padding-bottom: 40px;
			
 
				-    position: fixed;
			
 
				-    top: 12%;
			
 
				-    left: 50%;
			
 
				+  .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: 92%;
			
 
				+      top: 14%;
			
 
				+      left: 4%;
			
 
				+      position: absolute;
			
 
				+      .img-con {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: space-between;
			
 
				+        position: relative;
			
 
				+        .imgmain {
			
 
				+          width: 100%;
			
 
				+          overflow-x: hidden;
			
 
				+          overflow-y: auto;
			
 
				+          position: relative;
			
 
				+          margin: 0 auto;
			
 
				+          p {
			
 
				+            text-align: justify;
			
 
				+            cursor: pointer;
			
 
				+            max-width: 100%;
			
 
				+            font-size: 20px;
			
 
				+          }
			
 
				+        }
			
 
				+        @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%;
			
 
				-    .title {
			
 
				-      padding: 0 80px;
			
 
				-      display: inline-block;
			
 
				-      color: #dba761;
			
 
				-      font-weight: bold;
			
 
				-      font-size: 36px;
			
 
				-      height: 70px;
			
 
				-      line-height: 70px;
			
 
				-      background: #bc1515;
			
 
				-      border-radius: 60px;
			
 
				-      margin: 45px auto;
			
 
				+    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;
			
 
				+        img {
			
 
				+          cursor: pointer;
			
 
				+          max-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 {
			
 
				-      max-width: 1000px;
			
 
				-      letter-spacing: 2px;
			
 
				-      margin: 20px auto 0;
			
 
				       text-align: justify;
			
 
				-      line-height: 2;
			
 
				-      max-height: 400px;
			
 
				-      padding: 0 10px;
			
 
				-      overflow-y: auto;
			
 
				-      font-size: 24px;
			
 
				-      line-height: 48px;
			
 
				-      color: #bc1515;
			
 
				+      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%;
			
 
				+        p{
			
 
				+          width: 90%;
			
 
				+          margin: 0 auto;
			
 
				+        }
			
 
				+      }
			
 
				     }
			
 
				   }
			
 
				 }
			
--- a/src/components/hotspot/video.vue
+++ b/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>
			
--- a/src/components/mapsvg/a.vue
+++ b/src/components/mapsvg/a.vue
@@ -147,32 +147,32 @@
 
				         />
			
 
				       </g>
			
 
				     </g>
			
 
				-    <g id="point">
			
 
				-      <g id="a-s17">
			
 
				+    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
			
 
				+      <g :class="'a-s17' + cls" id="a-s17">
			
 
				         <circle class="st12" cx="23.2" cy="76.6" r="7.3" />
			
 
				         <circle class="st12" cx="23.2" cy="76.6" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s16">
			
 
				+      <g :class="'a-s16' + cls" id="a-s16">
			
 
				         <circle class="st12" cx="23.2" cy="120" r="7.3" />
			
 
				         <circle class="st12" cx="23.2" cy="120" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s27">
			
 
				+      <g :class="'a-s27' + cls" id="a-s27">
			
 
				         <circle class="st12" cx="93.6" cy="129.1" r="7.3" />
			
 
				         <circle class="st12" cx="93.6" cy="129.1" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s11">
			
 
				+      <g :class="'a-s11' + cls" id="a-s11">
			
 
				         <circle class="st12" cx="101.2" cy="251.9" r="7.3" />
			
 
				         <circle class="st12" cx="101.2" cy="251.9" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s12">
			
 
				+      <g :class="'a-s12' + cls" id="a-s12">
			
 
				         <circle class="st12" cx="64.1" cy="251.9" r="7.3" />
			
 
				         <circle class="st12" cx="64.1" cy="251.9" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s9">
			
 
				+      <g :class="'a-s9' + cls" id="a-s9">
			
 
				         <circle class="st12" cx="170.2" cy="252.6" r="7.3" />
			
 
				         <circle class="st12" cx="170.2" cy="252.6" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s3">
			
 
				+      <g :class="'a-s3' + cls" id="a-s3">
			
 
				         <ellipse
			
 
				           transform="matrix(0.4641 -0.8858 0.8858 0.4641 -53.4911 358.1846)"
			
 
				           class="st12"
			
@@ -183,11 +183,11 @@
 
				         />
			
 
				         <circle class="st12" cx="269.1" cy="223.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s7">
			
 
				+      <g :class="'a-s7' + cls" id="a-s7">
			
 
				         <circle class="st12" cx="228.4" cy="223.3" r="7.3" />
			
 
				         <circle class="st12" cx="228.4" cy="223.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s4">
			
 
				+      <g :class="'a-s4' + cls" id="a-s4">
			
 
				         <ellipse
			
 
				           transform="matrix(0.4641 -0.8858 0.8858 0.4641 58.0355 290.9234)"
			
 
				           class="st12"
			
@@ -198,51 +198,51 @@
 
				         />
			
 
				         <circle class="st12" cx="269.5" cy="97.5" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s5">
			
 
				+      <g :class="'a-s5' + cls" id="a-s5">
			
 
				         <circle class="st12" cx="296.5" cy="79.5" r="7.3" />
			
 
				         <circle class="st12" cx="296.5" cy="79.5" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s1">
			
 
				+      <g :class="'a-s1' + cls" id="a-s1">
			
 
				         <circle class="st12" cx="324.4" cy="102.7" r="7.3" />
			
 
				         <circle class="st12" cx="324.4" cy="102.7" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s6">
			
 
				+      <g :class="'a-s6' + cls" id="a-s6">
			
 
				         <circle class="st12" cx="298.6" cy="238.8" r="7.3" />
			
 
				         <circle class="st12" cx="298.6" cy="238.8" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s2">
			
 
				+      <g :class="'a-s2' + cls" id="a-s2">
			
 
				         <circle class="st12" cx="325.1" cy="213.2" r="7.3" />
			
 
				         <circle class="st12" cx="325.1" cy="213.2" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s8">
			
 
				+      <g :class="'a-s8' + cls" id="a-s8">
			
 
				         <circle class="st12" cx="228.3" cy="97.5" r="7.3" />
			
 
				         <circle class="st12" cx="228.3" cy="97.5" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s10">
			
 
				+      <g :class="'a-s10' + cls" id="a-s10">
			
 
				         <circle class="st12" cx="136.3" cy="252.6" r="7.3" />
			
 
				         <circle class="st12" cx="136.3" cy="252.6" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s29">
			
 
				+      <g :class="'a-s29' + cls" id="a-s29">
			
 
				         <circle class="st12" cx="170.2" cy="129.1" r="7.3" />
			
 
				         <circle class="st12" cx="170.2" cy="129.1" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s28">
			
 
				+      <g :class="'a-s28' + cls" id="a-s28">
			
 
				         <circle class="st12" cx="131.9" cy="92.3" r="7.3" />
			
 
				         <circle class="st12" cx="131.9" cy="92.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s26">
			
 
				+      <g :class="'a-s26' + cls" id="a-s26">
			
 
				         <circle class="st12" cx="131.9" cy="164.9" r="7.3" />
			
 
				         <circle class="st12" cx="131.9" cy="164.9" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s15">
			
 
				+      <g :class="'a-s15' + cls" id="a-s15">
			
 
				         <circle class="st12" cx="23.2" cy="164.9" r="7.3" />
			
 
				         <circle class="st12" cx="23.2" cy="164.9" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s14">
			
 
				+      <g :class="'a-s14' + cls" id="a-s14">
			
 
				         <circle class="st12" cx="23.2" cy="209.2" r="7.3" />
			
 
				         <circle class="st12" cx="23.2" cy="209.2" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s13">
			
 
				+      <g :class="'a-s13' + cls" id="a-s13">
			
 
				         <ellipse
			
 
				           transform="matrix(0.9982 -6.054976e-02 6.054976e-02 0.9982 -15.61 1.8791)"
			
 
				           class="st12"
			
@@ -253,27 +253,27 @@
 
				         />
			
 
				         <circle class="st12" cx="23.2" cy="258.5" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s18">
			
 
				+      <g :class="'a-s18' + cls" id="a-s18">
			
 
				         <circle class="st12" cx="32.3" cy="44.3" r="7.3" />
			
 
				         <circle class="st12" cx="32.3" cy="44.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s19">
			
 
				+      <g :class="'a-s19' + cls" id="a-s19">
			
 
				         <circle class="st12" cx="64.1" cy="44.3" r="7.3" />
			
 
				         <circle class="st12" cx="64.1" cy="44.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s20">
			
 
				+      <g :class="'a-s20' + cls" id="a-s20">
			
 
				         <circle class="st12" cx="96" cy="44.3" r="7.3" />
			
 
				         <circle class="st12" cx="96" cy="44.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s21">
			
 
				+      <g :class="'a-s21' + cls" id="a-s21">
			
 
				         <circle class="st12" cx="141.5" cy="44.3" r="7.3" />
			
 
				         <circle class="st12" cx="141.5" cy="44.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s22">
			
 
				+      <g :class="'a-s22' + cls" id="a-s22">
			
 
				         <circle class="st12" cx="187.3" cy="44.3" r="7.3" />
			
 
				         <circle class="st12" cx="187.3" cy="44.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s23">
			
 
				+      <g :class="'a-s23' + cls" id="a-s23">
			
 
				         <ellipse
			
 
				           transform="matrix(0.8 -0.5999 0.5999 0.8 19.1046 145.8987)"
			
 
				           class="st12"
			
@@ -284,7 +284,7 @@
 
				         />
			
 
				         <circle class="st12" cx="228.4" cy="44.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s24">
			
 
				+      <g :class="'a-s24' + cls" id="a-s24">
			
 
				         <ellipse
			
 
				           transform="matrix(0.3162 -0.9487 0.9487 0.3162 140.8987 284.0616)"
			
 
				           class="st12"
			
@@ -295,7 +295,7 @@
 
				         />
			
 
				         <circle class="st12" cx="267.6" cy="44.3" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="a-s25">
			
 
				+      <g :class="'a-s25' + cls" id="a-s25">
			
 
				         <circle class="st12" cx="302.2" cy="44.3" r="7.3" />
			
 
				         <circle class="st12" cx="302.2" cy="44.3" r="5.2" />
			
 
				       </g>
			
@@ -305,45 +305,41 @@
 
				 
			
 
				 <script>
			
 
				 export default {
			
 
				-  props: ["data", "currentPanoid"],
			
 
				+  props: ["data", "currentPano", "cls"],
			
 
				   data() {
			
 
				-    let keysData = Object.keys(this.data);
			
 
				-    return {
			
 
				-      keysData,
			
 
				-    };
			
 
				+    return { };
			
 
				   },
			
 
				   methods: {
			
 
				+    hoverItem(e){
			
 
				+      let target = e.target.parentElement;
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				+      this.$emit('hoverPano',tt||{})
			
 
				+    },
			
 
				     handleClick(e) {
			
 
				       let target = e.target.parentElement;
			
 
				-      let tt = this.data[target.id];
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				       if (tt) {
			
 
				-        let { x, y, z, w } = tt.quaternion;
			
 
				-        window.player.flyToPano({
			
 
				-          pano: window.player.model.panos.index[tt.id],
			
 
				-          quaternion: new THREE.Quaternion(x, y, z, w),
			
 
				-        });
			
 
				+        this.$bus.$emit('ifrMessage',{
			
 
				+          events:'flyToPano',
			
 
				+          data:tt
			
 
				+        })
			
 
				       }
			
 
				     },
			
 
				   },
			
 
				   watch: {
			
 
				-    currentPanoid: {
			
 
				+    currentPano: {
			
 
				       deep: true,
			
 
				       immediate: true,
			
 
				       handler: function(newVal) {
			
 
				-        let kk = this.keysData.find((item) => {
			
 
				-          let key = this.data[item].id;
			
 
				-          return key == newVal;
			
 
				-        });
			
 
				-
			
 
				-        this.$emit("currentPano", this.data[kk] || {});
			
 
				-        document.querySelector("#point") &&
			
 
				-          Array.from(document.querySelector("#point").childNodes).forEach(
			
 
				-            (item) => {
			
 
				-              item.classList.remove("active");
			
 
				-            }
			
 
				-          );
			
 
				-        if (kk) {
			
 
				-          document.querySelector("#" + kk).classList.add("active");
			
 
				+        document.querySelector("." + this.cls) &&
			
 
				+        Array.from(document.querySelector("." + this.cls).childNodes).forEach(
			
 
				+          (item) => {
			
 
				+            item&&item.classList.remove("active");
			
 
				+          }
			
 
				+        );
			
 
				+        if (newVal) {
			
 
				+          let ele = document.querySelector("." + newVal.mapId + this.cls)
			
 
				+          ele&&ele.classList.add("active");
			
 
				         }
			
 
				       },
			
 
				     },
			
@@ -426,9 +422,25 @@ svg {
 
				 #point {
			
 
				   > g {
			
 
				     cursor: pointer;
			
 
				-    &:hover {
			
 
				+    &.active {
			
 
				       ellipse,
			
 
				-      circle {
			
 
				+      circle:last-of-type {
			
 
				+        fill: @color;
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+      circle:first-of-type {
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+    }
			
 
				+    
			
 
				+    &:hover{
			
 
				+      ellipse,
			
 
				+      circle:last-of-type {
			
 
				+        fill: #fff;
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+      circle:first-of-type {
			
 
				+        opacity: 1!important;
			
 
				         fill: @color;
			
 
				       }
			
 
				     }
			
--- a/src/components/mapsvg/b.vue
+++ b/src/components/mapsvg/b.vue
@@ -102,44 +102,44 @@
 
				         />
			
 
				       </g>
			
 
				     </g>
			
 
				-    <g id="point">
			
 
				-      <g id="b-s21">
			
 
				+    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
			
 
				+      <g :class="'b-s21' + cls" id="b-s21">
			
 
				         <ellipse class="st9" cx="22.3" cy="59.8" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="22.3" cy="59.8" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s23">
			
 
				+      <g :class="'b-s23' + cls" id="b-s23">
			
 
				         <ellipse class="st9" cx="48.9" cy="47.7" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="48.9" cy="47.7" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s24">
			
 
				+      <g :class="'b-s24' + cls" id="b-s24">
			
 
				         <ellipse class="st9" cx="89.8" cy="47.3" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="89.8" cy="47.3" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s22">
			
 
				+      <g :class="'b-s22' + cls" id="b-s22">
			
 
				         <ellipse class="st9" cx="48.9" cy="85" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="48.9" cy="85" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s25">
			
 
				+      <g :class="'b-s25' + cls" id="b-s25">
			
 
				         <ellipse class="st9" cx="89.8" cy="84.7" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="89.8" cy="84.7" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s15">
			
 
				+      <g :class="'b-s15' + cls" id="b-s15">
			
 
				         <ellipse class="st9" cx="50.6" cy="225.5" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="50.6" cy="225.5" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s16">
			
 
				+      <g :class="'b-s16' + cls" id="b-s16">
			
 
				         <ellipse class="st9" cx="88.2" cy="225.5" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="88.2" cy="225.5" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s11">
			
 
				+      <g :class="'b-s11' + cls" id="b-s11">
			
 
				         <ellipse class="st9" cx="136.8" cy="224.2" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="136.8" cy="224.2" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s8">
			
 
				+      <g :class="'b-s8' + cls" id="b-s8">
			
 
				         <ellipse class="st9" cx="226.9" cy="65.5" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="226.9" cy="65.5" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s4">
			
 
				+      <g :class="'b-s4' + cls" id="b-s4">
			
 
				         <ellipse
			
 
				           transform="matrix(0.6 -0.8 0.8 0.6 52.8057 236.6051)"
			
 
				           class="st9"
			
@@ -150,7 +150,7 @@
 
				         />
			
 
				         <ellipse class="st9" cx="263" cy="65.5" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s5">
			
 
				+      <g :class="'b-s5' + cls" id="b-s5">
			
 
				         <ellipse
			
 
				           transform="matrix(0.9917 -0.1284 0.1284 0.9917 -3.2656 39.9576)"
			
 
				           class="st9"
			
@@ -168,7 +168,7 @@
 
				           ry="5.2"
			
 
				         />
			
 
				       </g>
			
 
				-      <g id="b-s1">
			
 
				+      <g :class="'b-s1' + cls" id="b-s1">
			
 
				         <ellipse
			
 
				           transform="matrix(0.9917 -0.1284 0.1284 0.9917 -6.6081 43.7194)"
			
 
				           class="st9"
			
@@ -186,55 +186,55 @@
 
				           ry="5.2"
			
 
				         />
			
 
				       </g>
			
 
				-      <g id="b-s2">
			
 
				+      <g :class="'b-s2' + cls" id="b-s2">
			
 
				         <ellipse class="st9" cx="335.6" cy="233.6" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="335.6" cy="233.6" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s6">
			
 
				+      <g :class="'b-s6' + cls" id="b-s6">
			
 
				         <ellipse class="st9" cx="309.6" cy="263.6" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="309.6" cy="263.6" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s7">
			
 
				+      <g :class="'b-s7' + cls" id="b-s7">
			
 
				         <ellipse class="st9" cx="224.8" cy="243.4" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="224.8" cy="243.4" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s3">
			
 
				+      <g :class="'b-s3' + cls" id="b-s3">
			
 
				         <ellipse class="st9" cx="265.1" cy="243.4" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="265.1" cy="243.4" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s12">
			
 
				+      <g :class="'b-s12' + cls" id="b-s12">
			
 
				         <ellipse class="st9" cx="176.4" cy="224.2" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="176.4" cy="224.2" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s14">
			
 
				+      <g :class="'b-s14' + cls" id="b-s14">
			
 
				         <ellipse class="st9" cx="50.6" cy="261.1" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="50.6" cy="261.1" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s13">
			
 
				+      <g :class="'b-s13' + cls" id="b-s13">
			
 
				         <ellipse class="st9" cx="88.2" cy="261.1" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="88.2" cy="261.1" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s10">
			
 
				+      <g :class="'b-s10' + cls" id="b-s10">
			
 
				         <ellipse class="st9" cx="136.8" cy="259.8" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="136.8" cy="259.8" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s9">
			
 
				+      <g :class="'b-s9' + cls" id="b-s9">
			
 
				         <ellipse class="st9" cx="176.4" cy="259.8" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="176.4" cy="259.8" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s20">
			
 
				+      <g :class="'b-s20' + cls" id="b-s20">
			
 
				         <ellipse class="st9" cx="22.3" cy="99.2" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="22.3" cy="99.2" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s19">
			
 
				+      <g :class="'b-s19' + cls" id="b-s19">
			
 
				         <ellipse class="st9" cx="22.3" cy="150" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="22.3" cy="150" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s18">
			
 
				+      <g :class="'b-s18' + cls" id="b-s18">
			
 
				         <ellipse class="st9" cx="22.3" cy="194.1" rx="7.3" ry="7.3" />
			
 
				         <ellipse class="st9" cx="22.3" cy="194.1" rx="5.2" ry="5.2" />
			
 
				       </g>
			
 
				-      <g id="b-s17">
			
 
				+      <g :class="'b-s17' + cls" id="b-s17">
			
 
				         <ellipse
			
 
				           transform="matrix(0.9982 -6.054977e-02 6.054977e-02 0.9982 -14.382 1.7873)"
			
 
				           class="st9"
			
@@ -251,45 +251,41 @@
 
				 
			
 
				 <script>
			
 
				 export default {
			
 
				-  props: ["data", "currentPanoid"],
			
 
				+  props: ["data", "currentPanoid", "currentPano", "cls"],
			
 
				   data() {
			
 
				-    let keysData = Object.keys(this.data);
			
 
				-    return {
			
 
				-      keysData,
			
 
				-    };
			
 
				+    return { };
			
 
				   },
			
 
				   methods: {
			
 
				+    hoverItem(e){
			
 
				+      let target = e.target.parentElement;
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				+      this.$emit('hoverPano',tt||{})
			
 
				+    },
			
 
				     handleClick(e) {
			
 
				       let target = e.target.parentElement;
			
 
				-      let tt = this.data[target.id];
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				       if (tt) {
			
 
				-        let { x, y, z, w } = tt.quaternion;
			
 
				-        window.player.flyToPano({
			
 
				-          pano: window.player.model.panos.index[tt.id],
			
 
				-          quaternion: new THREE.Quaternion(x, y, z, w),
			
 
				-        });
			
 
				+        this.$bus.$emit('ifrMessage',{
			
 
				+          events:'flyToPano',
			
 
				+          data:tt
			
 
				+        })
			
 
				       }
			
 
				     },
			
 
				   },
			
 
				   watch: {
			
 
				-    currentPanoid: {
			
 
				+    currentPano: {
			
 
				       deep: true,
			
 
				       immediate: true,
			
 
				       handler: function(newVal) {
			
 
				-        let kk = this.keysData.find((item) => {
			
 
				-          let key = this.data[item].id;
			
 
				-          return key == newVal;
			
 
				-        });
			
 
				-        this.$emit("currentPano", this.data[kk] || {});
			
 
				-
			
 
				-        document.querySelector("#point") &&
			
 
				-          Array.from(document.querySelector("#point").childNodes).forEach(
			
 
				-            (item) => {
			
 
				-              item.classList.remove("active");
			
 
				-            }
			
 
				-          );
			
 
				-        if (kk) {
			
 
				-          document.querySelector("#" + kk).classList.add("active");
			
 
				+        document.querySelector("." + this.cls) &&
			
 
				+        Array.from(document.querySelector("." + this.cls).childNodes).forEach(
			
 
				+          (item) => {
			
 
				+            item&&item.classList.remove("active");
			
 
				+          }
			
 
				+        );
			
 
				+        if (newVal) {
			
 
				+          let ele = document.querySelector("." + newVal.mapId + this.cls)
			
 
				+          ele&&ele.classList.add("active");
			
 
				         }
			
 
				       },
			
 
				     },
			
@@ -354,9 +350,25 @@ svg {
 
				 #point {
			
 
				   > g {
			
 
				     cursor: pointer;
			
 
				-    &:hover {
			
 
				+    &.active {
			
 
				       ellipse,
			
 
				-      circle {
			
 
				+      circle:last-of-type {
			
 
				+        fill: @color;
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+      circle:first-of-type {
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+    }
			
 
				+    
			
 
				+    &:hover{
			
 
				+      ellipse,
			
 
				+      circle:last-of-type {
			
 
				+        fill: #fff;
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+      circle:first-of-type {
			
 
				+        opacity: 1!important;
			
 
				         fill: @color;
			
 
				       }
			
 
				     }
			
--- a/src/components/mapsvg/c.vue
+++ b/src/components/mapsvg/c.vue
@@ -107,36 +107,36 @@
 
				         </g>
			
 
				       </g>
			
 
				     </g>
			
 
				-    <g id="point">
			
 
				-      <g id="c-s9">
			
 
				+    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
			
 
				+      <g  :class="'c-s9' + cls" id="c-s9">
			
 
				         <circle class="st8" cx="161" cy="39.7" r="7.2" />
			
 
				         <circle class="st8" cx="161" cy="39.7" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s10">
			
 
				+      <g  :class="'c-s10' + cls" id="c-s10">
			
 
				         <circle class="st8" cx="199.6" cy="39.7" r="7.2" />
			
 
				         <circle class="st8" cx="199.6" cy="39.7" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s11">
			
 
				+      <g  :class="'c-s11' + cls" id="c-s11">
			
 
				         <circle class="st8" cx="238.2" cy="39.7" r="7.2" />
			
 
				         <circle class="st8" cx="238.2" cy="39.7" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s12">
			
 
				+      <g  :class="'c-s12' + cls" id="c-s12">
			
 
				         <circle class="st8" cx="277" cy="39.7" r="7.2" />
			
 
				         <circle class="st8" cx="277" cy="39.7" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s13">
			
 
				+      <g  :class="'c-s13' + cls" id="c-s13">
			
 
				         <circle class="st8" cx="315.6" cy="39.7" r="7.2" />
			
 
				         <circle class="st8" cx="315.6" cy="39.7" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s14">
			
 
				+      <g  :class="'c-s14' + cls" id="c-s14">
			
 
				         <circle class="st8" cx="328.1" cy="63.9" r="7.2" />
			
 
				         <circle class="st8" cx="328.1" cy="63.9" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s26">
			
 
				+      <g  :class="'c-s26' + cls" id="c-s26">
			
 
				         <circle class="st8" cx="304.9" cy="76.4" r="7.2" />
			
 
				         <circle class="st8" cx="304.9" cy="76.4" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s25">
			
 
				+      <g  :class="'c-s25' + cls" id="c-s25">
			
 
				         <ellipse
			
 
				           transform="matrix(0.4641 -0.8858 0.8858 0.4641 78.9452 283.2633)"
			
 
				           class="st8"
			
@@ -147,11 +147,11 @@
 
				         />
			
 
				         <circle class="st8" cx="273.5" cy="76.4" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s19">
			
 
				+      <g  :class="'c-s19' + cls" id="c-s19">
			
 
				         <circle class="st8" cx="304.8" cy="217.1" r="7.2" />
			
 
				         <circle class="st8" cx="304.8" cy="217.1" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s20">
			
 
				+      <g  :class="'c-s20' + cls" id="c-s20">
			
 
				         <ellipse
			
 
				           transform="matrix(0.4641 -0.8858 0.8858 0.4641 -45.6486 358.6445)"
			
 
				           class="st8"
			
@@ -162,39 +162,39 @@
 
				         />
			
 
				         <circle class="st8" cx="273.4" cy="217.1" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s21">
			
 
				+      <g  :class="'c-s21' + cls" id="c-s21">
			
 
				         <circle class="st8" cx="243.4" cy="218.8" r="7.2" />
			
 
				         <circle class="st8" cx="243.4" cy="218.8" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s22">
			
 
				+      <g  :class="'c-s22' + cls" id="c-s22">
			
 
				         <circle class="st8" cx="212.1" cy="218.8" r="7.2" />
			
 
				         <circle class="st8" cx="212.1" cy="218.8" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s24">
			
 
				+      <g  :class="'c-s24' + cls" id="c-s24">
			
 
				         <circle class="st8" cx="243.5" cy="77.1" r="7.2" />
			
 
				         <circle class="st8" cx="243.5" cy="77.1" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s23">
			
 
				+      <g  :class="'c-s23' + cls" id="c-s23">
			
 
				         <circle class="st8" cx="212.1" cy="77.1" r="7.2" />
			
 
				         <circle class="st8" cx="212.1" cy="77.1" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s7">
			
 
				+      <g  :class="'c-s7' + cls" id="c-s7">
			
 
				         <circle class="st8" cx="164.4" cy="76.4" r="7.2" />
			
 
				         <circle class="st8" cx="164.4" cy="76.4" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s3">
			
 
				+      <g  :class="'c-s3' + cls" id="c-s3">
			
 
				         <circle class="st8" cx="129.2" cy="76.8" r="7.2" />
			
 
				         <circle class="st8" cx="129.2" cy="76.8" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s8">
			
 
				+      <g  :class="'c-s8' + cls" id="c-s8">
			
 
				         <circle class="st8" cx="163.8" cy="230" r="7.2" />
			
 
				         <circle class="st8" cx="163.8" cy="230" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s4">
			
 
				+      <g  :class="'c-s4' + cls" id="c-s4">
			
 
				         <circle class="st8" cx="128.7" cy="230.4" r="7.2" />
			
 
				         <circle class="st8" cx="128.7" cy="230.4" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s5">
			
 
				+      <g  :class="'c-s5' + cls" id="c-s5">
			
 
				         <ellipse
			
 
				           transform="matrix(0.1356 -0.9908 0.9908 0.1356 -220.1748 271.1569)"
			
 
				           class="st8"
			
@@ -205,31 +205,31 @@
 
				         />
			
 
				         <circle class="st8" cx="45.2" cy="261.8" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s1">
			
 
				+      <g  :class="'c-s1' + cls" id="c-s1">
			
 
				         <circle class="st8" cx="20.6" cy="236.7" r="7.2" />
			
 
				         <circle class="st8" cx="20.6" cy="236.7" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s2">
			
 
				+      <g  :class="'c-s2' + cls" id="c-s2">
			
 
				         <circle class="st8" cx="21.7" cy="65.5" r="7.2" />
			
 
				         <circle class="st8" cx="21.7" cy="65.5" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s6">
			
 
				+      <g  :class="'c-s6' + cls" id="c-s6">
			
 
				         <circle class="st8" cx="45.7" cy="39.7" r="7.2" />
			
 
				         <circle class="st8" cx="45.7" cy="39.7" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s15">
			
 
				+      <g  :class="'c-s15' + cls" id="c-s15">
			
 
				         <circle class="st8" cx="328.1" cy="111.8" r="7.2" />
			
 
				         <circle class="st8" cx="328.1" cy="111.8" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s16">
			
 
				+      <g  :class="'c-s16' + cls" id="c-s16">
			
 
				         <circle class="st8" cx="328.1" cy="159.6" r="7.2" />
			
 
				         <circle class="st8" cx="328.1" cy="159.6" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s17">
			
 
				+      <g  :class="'c-s17' + cls" id="c-s17">
			
 
				         <circle class="st8" cx="328.1" cy="207.5" r="7.2" />
			
 
				         <circle class="st8" cx="328.1" cy="207.5" r="5.2" />
			
 
				       </g>
			
 
				-      <g id="c-s18">
			
 
				+      <g  :class="'c-s18' + cls" id="c-s18">
			
 
				         <circle class="st8" cx="328.1" cy="252" r="7.2" />
			
 
				         <circle class="st8" cx="328.1" cy="252" r="5.2" />
			
 
				       </g>
			
@@ -239,45 +239,41 @@
 
				 
			
 
				 <script>
			
 
				 export default {
			
 
				-  props: ["data", "currentPanoid"],
			
 
				+  props: ["data", "currentPanoid", "currentPano", "cls"],
			
 
				   data() {
			
 
				-    let keysData = Object.keys(this.data);
			
 
				-    return {
			
 
				-      keysData,
			
 
				-    };
			
 
				+    return { };
			
 
				   },
			
 
				   methods: {
			
 
				+    hoverItem(e){
			
 
				+      let target = e.target.parentElement;
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				+      this.$emit('hoverPano',tt||{})
			
 
				+    },
			
 
				     handleClick(e) {
			
 
				       let target = e.target.parentElement;
			
 
				-      let tt = this.data[target.id];
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				       if (tt) {
			
 
				-        let { x, y, z, w } = tt.quaternion;
			
 
				-        window.player.flyToPano({
			
 
				-          pano: window.player.model.panos.index[tt.id],
			
 
				-          quaternion: new THREE.Quaternion(x, y, z, w),
			
 
				-        });
			
 
				+        this.$bus.$emit('ifrMessage',{
			
 
				+          events:'flyToPano',
			
 
				+          data:tt
			
 
				+        })
			
 
				       }
			
 
				     },
			
 
				   },
			
 
				   watch: {
			
 
				-    currentPanoid: {
			
 
				+    currentPano: {
			
 
				       deep: true,
			
 
				       immediate: true,
			
 
				       handler: function(newVal) {
			
 
				-        let kk = this.keysData.find((item) => {
			
 
				-          let key = this.data[item].id;
			
 
				-          return key == newVal;
			
 
				-        });
			
 
				-        this.$emit("currentPano", this.data[kk] || {});
			
 
				-
			
 
				-        document.querySelector("#point") &&
			
 
				-          Array.from(document.querySelector("#point").childNodes).forEach(
			
 
				-            (item) => {
			
 
				-              item.classList.remove("active");
			
 
				-            }
			
 
				-          );
			
 
				-        if (kk) {
			
 
				-          document.querySelector("#" + kk).classList.add("active");
			
 
				+        document.querySelector("." + this.cls) &&
			
 
				+        Array.from(document.querySelector("." + this.cls).childNodes).forEach(
			
 
				+          (item) => {
			
 
				+            item&&item.classList.remove("active");
			
 
				+          }
			
 
				+        );
			
 
				+        if (newVal) {
			
 
				+          let ele = document.querySelector("." + newVal.mapId + this.cls)
			
 
				+          ele&&ele.classList.add("active");
			
 
				         }
			
 
				       },
			
 
				     },
			
@@ -336,9 +332,25 @@ svg {
 
				 #point {
			
 
				   > g {
			
 
				     cursor: pointer;
			
 
				-    &:hover {
			
 
				+    &.active {
			
 
				       ellipse,
			
 
				-      circle {
			
 
				+      circle:last-of-type {
			
 
				+        fill: @color;
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+      circle:first-of-type {
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+    }
			
 
				+    
			
 
				+    &:hover{
			
 
				+      ellipse,
			
 
				+      circle:last-of-type {
			
 
				+        fill: #fff;
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+      circle:first-of-type {
			
 
				+        opacity: 1!important;
			
 
				         fill: @color;
			
 
				       }
			
 
				     }
			
--- a/src/components/mapsvg/d.vue
+++ b/src/components/mapsvg/d.vue
@@ -9,356 +9,252 @@
 
				     viewBox="0 0 350 300"
			
 
				     xml:space="preserve"
			
 
				   >
			
 
				-    <g id="d">
			
 
				-      <path
			
 
				-        id="d_x5F_1"
			
 
				-        class="st0"
			
 
				-        d="M345.7,295H5.3V39.4c0-19.8,17.9-35.8,40-35.8h300.5L345.7,295L345.7,295z"
			
 
				-      />
			
 
				-      <g class="st1">
			
 
				-        <rect x="342.2" y="26" class="st2" width="3.6" height="16" />
			
 
				-        <rect x="342.2" y="71" class="st2" width="3.6" height="16" />
			
 
				-        <rect x="342.2" y="251.1" class="st2" width="3.6" height="16" />
			
 
				-        <rect x="342.2" y="206.1" class="st2" width="3.6" height="16" />
			
 
				-        <rect x="342.2" y="116" class="st2" width="3.6" height="16" />
			
 
				-        <rect x="342.2" y="161.1" class="st2" width="3.6" height="16" />
			
 
				-        <rect x="185.1" y="291.7" class="st2" width="16" height="3.6" />
			
 
				-        <rect x="135.5" y="291.7" class="st2" width="16" height="3.6" />
			
 
				-        <rect x="85.8" y="291.7" class="st2" width="16" height="3.6" />
			
 
				-        <rect x="36.2" y="291.7" class="st2" width="16" height="3.6" />
			
 
				-        <rect x="284.4" y="291.7" class="st2" width="16" height="3.6" />
			
 
				-        <rect x="234.8" y="291.7" class="st2" width="16" height="3.6" />
			
 
				-        <g class="st3">
			
 
				-          <rect x="279.3" y="4.6" class="st4" width="4.3" height="46.1" />
			
 
				-
			
 
				-          <rect
			
 
				-            x="275.5"
			
 
				-            y="11.7"
			
 
				-            transform="matrix(6.120200e-03 -1 1 6.120200e-03 263.0512 298.2502)"
			
 
				-            class="st4"
			
 
				-            width="12.2"
			
 
				-            height="10.1"
			
 
				-          />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <rect x="200.7" y="4.1" class="st4" width="4.3" height="46.1" />
			
 
				-
			
 
				-          <rect
			
 
				-            x="196.9"
			
 
				-            y="11.3"
			
 
				-            transform="matrix(6.120200e-03 -1 1 6.120200e-03 185.38 219.2232)"
			
 
				-            class="st4"
			
 
				-            width="12.2"
			
 
				-            height="10.1"
			
 
				-          />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <rect x="6.7" y="230.9" class="st4" width="46.1" height="4.3" />
			
 
				-
			
 
				-          <rect
			
 
				-            x="14.1"
			
 
				-            y="226.9"
			
 
				-            transform="matrix(6.120200e-03 -1 1 6.120200e-03 -214.0282 250.6985)"
			
 
				-            class="st4"
			
 
				-            width="10.1"
			
 
				-            height="12.2"
			
 
				-          />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <ellipse class="st5" cx="209.1" cy="170.8" rx="26.8" ry="26.8" />
			
 
				-
			
 
				-          <rect
			
 
				-            x="191.9"
			
 
				-            y="153.2"
			
 
				-            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.3298 197.9621)"
			
 
				-            class="st4"
			
 
				-            width="34.8"
			
 
				-            height="34.8"
			
 
				-          />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <circle class="st6" cx="131.4" cy="202.1" r="17.7" />
			
 
				-          <ellipse class="st4" cx="131.4" cy="202.1" rx="13.6" ry="13.6" />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <circle class="st6" cx="243.2" cy="96.3" r="17.7" />
			
 
				-          <ellipse class="st4" cx="243.2" cy="96.3" rx="13.6" ry="13.6" />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <rect
			
 
				-            x="24.7"
			
 
				-            y="111"
			
 
				-            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -64.202 71.2876)"
			
 
				-            class="st4"
			
 
				-            width="58.5"
			
 
				-            height="4.3"
			
 
				-          />
			
 
				-          <polygon
			
 
				-            class="st4"
			
 
				-            points="39.2,120.7 46.3,127.8 57.4,116.9 50.3,109.8 			"
			
 
				-          />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <rect
			
 
				-            x="90.8"
			
 
				-            y="45.4"
			
 
				-            transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.5475 98.812)"
			
 
				-            class="st4"
			
 
				-            width="58.5"
			
 
				-            height="4.3"
			
 
				-          />
			
 
				-          <polygon
			
 
				-            class="st4"
			
 
				-            points="127.6,32.8 134.7,39.9 123.7,51 116.6,43.9 			"
			
 
				-          />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <rect x="5.7" y="165.5" class="st4" width="58.5" height="4.3" />
			
 
				-          <polygon
			
 
				-            class="st4"
			
 
				-            points="19.1,162.6 19.1,172.7 34.7,172.7 34.7,162.7 			"
			
 
				-          />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <rect
			
 
				-            x="130.5"
			
 
				-            y="121.3"
			
 
				-            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.5142 149.1353)"
			
 
				-            class="st4"
			
 
				-            width="58.5"
			
 
				-            height="4.3"
			
 
				-          />
			
 
				-          <polygon
			
 
				-            class="st4"
			
 
				-            points="174.4,115.8 167.4,108.7 156.3,119.6 163.3,126.8 			"
			
 
				-          />
			
 
				-        </g>
			
 
				-        <g class="st3">
			
 
				-          <rect
			
 
				-            x="251.9"
			
 
				-            y="222"
			
 
				-            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -77.9706 260.0622)"
			
 
				-            class="st4"
			
 
				-            width="46.1"
			
 
				-            height="4.3"
			
 
				-          />
			
 
				-
			
 
				-          <rect
			
 
				-            x="276.7"
			
 
				-            y="211.7"
			
 
				-            transform="matrix(0.7114 -0.7028 0.7028 0.7114 -70.7186 261.2997)"
			
 
				-            class="st4"
			
 
				-            width="12.2"
			
 
				-            height="10.1"
			
 
				-          />
			
 
				-        </g>
			
 
				-
			
 
				-        <rect
			
 
				-          x="171.9"
			
 
				-          y="79.1"
			
 
				-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.9007 155.1966)"
			
 
				-          class="st4"
			
 
				-          width="20.9"
			
 
				-          height="20.9"
			
 
				-        />
			
 
				-
			
 
				-        <rect
			
 
				-          x="128.4"
			
 
				-          y="134.6"
			
 
				-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.6978 135.3087)"
			
 
				-          class="st4"
			
 
				-          width="10.2"
			
 
				-          height="10.2"
			
 
				-        />
			
 
				-
			
 
				-        <rect
			
 
				-          x="138.8"
			
 
				-          y="128.9"
			
 
				-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -51.6399 138.7156)"
			
 
				-          class="st4"
			
 
				-          width="5.6"
			
 
				-          height="5.6"
			
 
				-        />
			
 
				-      </g>
			
 
				-      <g class="st7">
			
 
				-        <path id="路径_1428_4_" class="st8" d="M347.9,2v295.4H3.6" />
			
 
				-        <path
			
 
				-          class="st9"
			
 
				-          d="M5.3,295V176.2c0-11.6,5.2-22.8,14.3-31.1c27.9-17.7,105.6-96.3,131.6-125c4.9-5.3,10.6-9.8,17.3-12.5
			
 
				-			c6.4-2.7,13.4-4.1,20.7-4.1h156.3"
			
 
				-        />
			
 
				-      </g>
			
 
				-    </g>
			
 
				-    <g id="point">
			
 
				-      <g id="d-s13">
			
 
				-        <circle class="st10" cx="328.5" cy="35.1" r="7.1" />
			
 
				-        <circle class="st10" cx="328.5" cy="35.1" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s14">
			
 
				-        <circle class="st10" cx="328.5" cy="79.9" r="7.1" />
			
 
				-        <circle class="st10" cx="328.5" cy="79.9" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s16">
			
 
				-        <circle class="st10" cx="328.5" cy="169.5" r="7.1" />
			
 
				-        <circle class="st10" cx="328.5" cy="169.5" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s15">
			
 
				-        <circle class="st10" cx="328.5" cy="124.7" r="7.1" />
			
 
				-        <circle class="st10" cx="328.5" cy="124.7" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s12">
			
 
				-        <circle class="st10" cx="299.1" cy="17.5" r="7.1" />
			
 
				-        <circle class="st10" cx="299.1" cy="17.5" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s11">
			
 
				-        <ellipse class="st10" cx="263.8" cy="16.2" rx="7.1" ry="7.1" />
			
 
				-        <circle class="st10" cx="263.8" cy="16.2" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s17">
			
 
				-        <circle class="st10" cx="328.5" cy="214.3" r="7.1" />
			
 
				-        <circle class="st10" cx="328.5" cy="214.3" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s18">
			
 
				-        <circle class="st10" cx="328.5" cy="259.1" r="7.1" />
			
 
				-        <circle class="st10" cx="328.5" cy="259.1" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s30">
			
 
				-        <circle class="st10" cx="231" cy="190.9" r="7.1" />
			
 
				-        <circle class="st10" cx="231" cy="190.9" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s28">
			
 
				-        <circle class="st10" cx="188.6" cy="150" r="7.1" />
			
 
				-        <circle class="st10" cx="188.6" cy="150" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s29">
			
 
				-        <circle class="st10" cx="269.3" cy="206.3" r="7.1" />
			
 
				-        <ellipse class="st10" cx="269.3" cy="206.3" rx="5.1" ry="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s29">
			
 
				-        <circle class="st10" cx="231" cy="150" r="7.1" />
			
 
				-        <circle class="st10" cx="231" cy="150" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s27">
			
 
				-        <circle class="st10" cx="188.6" cy="194.8" r="7.1" />
			
 
				-        <circle class="st10" cx="188.6" cy="194.8" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s6">
			
 
				-        <ellipse class="st10" cx="179.3" cy="129.1" rx="7.1" ry="7.1" />
			
 
				-        <circle class="st10" cx="179.3" cy="129.1" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s4">
			
 
				-        <circle class="st10" cx="26.9" cy="152.4" r="7.1" />
			
 
				-        <circle class="st10" cx="26.9" cy="152.4" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s5">
			
 
				-        <circle class="st10" cx="26.5" cy="183" r="7.1" />
			
 
				-        <circle class="st10" cx="26.5" cy="183" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s26">
			
 
				-        <circle class="st10" cx="19.8" cy="215.8" r="7.1" />
			
 
				-        <circle class="st10" cx="19.8" cy="215.8" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s25">
			
 
				-        <circle class="st10" cx="19.8" cy="250.3" r="7.1" />
			
 
				-        <circle class="st10" cx="19.8" cy="250.3" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s3">
			
 
				-        <ellipse class="st10" cx="156.3" cy="105.8" rx="7.1" ry="7.1" />
			
 
				-        <circle class="st10" cx="156.3" cy="105.8" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s10">
			
 
				-        <circle class="st10" cx="222.3" cy="17.5" r="7.1" />
			
 
				-        <circle class="st10" cx="222.3" cy="17.5" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s9">
			
 
				-        <circle class="st10" cx="183.5" cy="17.5" r="7.1" />
			
 
				-        <circle class="st10" cx="183.5" cy="17.5" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s8">
			
 
				-        <circle class="st10" cx="139.8" cy="54.3" r="7.1" />
			
 
				-        <circle class="st10" cx="139.8" cy="54.3" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s7">
			
 
				-        <circle class="st10" cx="61.4" cy="131.8" r="7.1" />
			
 
				-        <circle class="st10" cx="61.4" cy="131.8" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s1">
			
 
				-        <ellipse class="st10" cx="36.2" cy="105.8" rx="7.1" ry="7.1" />
			
 
				-        <circle class="st10" cx="36.2" cy="105.8" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s2">
			
 
				-        <circle class="st10" cx="111.5" cy="30" r="7.1" />
			
 
				-        <circle class="st10" cx="111.5" cy="30" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s19">
			
 
				-        <circle class="st10" cx="290.7" cy="278.1" r="7.1" />
			
 
				-        <circle class="st10" cx="290.7" cy="278.1" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s20">
			
 
				-        <circle class="st10" cx="241.4" cy="278.1" r="7.1" />
			
 
				-        <circle class="st10" cx="241.4" cy="278.1" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s21">
			
 
				-        <ellipse class="st10" cx="192.1" cy="278.1" rx="7.1" ry="7.1" />
			
 
				-        <circle class="st10" cx="192.2" cy="278.1" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s22">
			
 
				-        <circle class="st10" cx="142.8" cy="278.1" r="7.1" />
			
 
				-        <circle class="st10" cx="142.8" cy="278.1" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s23">
			
 
				-        <ellipse class="st10" cx="93.5" cy="278.1" rx="7.1" ry="7.1" />
			
 
				-        <circle class="st10" cx="93.5" cy="278.1" r="5.1" />
			
 
				-      </g>
			
 
				-      <g id="d-s24">
			
 
				-        <circle class="st10" cx="44.2" cy="278.1" r="7.1" />
			
 
				-        <circle class="st10" cx="44.2" cy="278.1" r="5.1" />
			
 
				-      </g>
			
 
				-    </g>
			
 
				+<g id="d">
			
 
				+	<path id="d_x5F_1" class="st0" d="M345.7,295H5.3V39.4c0-19.8,17.9-35.8,40-35.8h300.5L345.7,295L345.7,295z"/>
			
 
				+	<g class="st1">
			
 
				+		<rect x="342.2" y="26" class="st2" width="3.6" height="16"/>
			
 
				+		<rect x="342.2" y="71" class="st2" width="3.6" height="16"/>
			
 
				+		<rect x="342.2" y="251.1" class="st2" width="3.6" height="16"/>
			
 
				+		<rect x="342.2" y="206.1" class="st2" width="3.6" height="16"/>
			
 
				+		<rect x="342.2" y="116" class="st2" width="3.6" height="16"/>
			
 
				+		<rect x="342.2" y="161.1" class="st2" width="3.6" height="16"/>
			
 
				+		<rect x="185.1" y="291.7" class="st2" width="16" height="3.6"/>
			
 
				+		<rect x="135.5" y="291.7" class="st2" width="16" height="3.6"/>
			
 
				+		<rect x="85.8" y="291.7" class="st2" width="16" height="3.6"/>
			
 
				+		<rect x="36.2" y="291.7" class="st2" width="16" height="3.6"/>
			
 
				+		<rect x="284.4" y="291.7" class="st2" width="16" height="3.6"/>
			
 
				+		<rect x="234.8" y="291.7" class="st2" width="16" height="3.6"/>
			
 
				+		<g class="st3">
			
 
				+			<rect x="279.3" y="4.6" class="st4" width="4.3" height="46.1"/>
			
 
				+			
			
 
				+				<rect x="275.4" y="11.7" transform="matrix(6.120085e-03 -1 1 6.120085e-03 263.0493 298.1696)" class="st4" width="12.2" height="10.1"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			<rect x="200.7" y="4.1" class="st4" width="4.3" height="46.1"/>
			
 
				+			
			
 
				+				<rect x="196.9" y="11.3" transform="matrix(6.120085e-03 -1 1 6.120085e-03 185.4072 219.192)" class="st4" width="12.2" height="10.1"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			<rect x="6.7" y="230.9" class="st4" width="46.1" height="4.3"/>
			
 
				+			
			
 
				+				<rect x="14" y="226.9" transform="matrix(6.120085e-03 -1 1 6.120085e-03 -213.998 250.6373)" class="st4" width="10.1" height="12.2"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			<ellipse class="st5" cx="209.1" cy="170.8" rx="26.8" ry="26.8"/>
			
 
				+			
			
 
				+				<rect x="191.9" y="153.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.3287 197.9625)" class="st4" width="34.8" height="34.8"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			<circle class="st6" cx="131.4" cy="202.1" r="17.7"/>
			
 
				+			<ellipse class="st4" cx="131.4" cy="202.1" rx="13.6" ry="13.6"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			<circle class="st6" cx="243.2" cy="96.3" r="17.7"/>
			
 
				+			<ellipse class="st4" cx="243.2" cy="96.3" rx="13.6" ry="13.6"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			
			
 
				+				<rect x="24.7" y="111" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -64.2048 71.2918)" class="st4" width="58.5" height="4.3"/>
			
 
				+			<polygon class="st4" points="39.2,120.7 46.3,127.8 57.4,116.9 50.3,109.8 			"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			
			
 
				+				<rect x="90.8" y="45.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.543 98.8197)" class="st4" width="58.5" height="4.3"/>
			
 
				+			<polygon class="st4" points="127.6,32.8 134.7,39.9 123.7,51 116.6,43.9 			"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			<rect x="5.7" y="165.5" class="st4" width="58.5" height="4.3"/>
			
 
				+			<polygon class="st4" points="19.1,162.6 19.1,172.7 34.7,172.7 34.7,162.7 			"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			
			
 
				+				<rect x="130.5" y="121.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.519 149.1136)" class="st4" width="58.5" height="4.3"/>
			
 
				+			<polygon class="st4" points="174.4,115.8 167.4,108.7 156.3,119.6 163.3,126.8 			"/>
			
 
				+		</g>
			
 
				+		<g class="st3">
			
 
				+			
			
 
				+				<rect x="251.9" y="222" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -77.9631 260.0636)" class="st4" width="46.1" height="4.3"/>
			
 
				+			
			
 
				+				<rect x="276.7" y="211.7" transform="matrix(0.7114 -0.7028 0.7028 0.7114 -70.7091 261.3018)" class="st4" width="12.2" height="10.1"/>
			
 
				+		</g>
			
 
				+		
			
 
				+			<rect x="171.9" y="79.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.9291 155.1845)" class="st4" width="20.9" height="20.9"/>
			
 
				+		
			
 
				+			<rect x="128.4" y="134.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.6817 135.301)" class="st4" width="10.2" height="10.2"/>
			
 
				+		
			
 
				+			<rect x="138.8" y="128.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -51.66 138.7123)" class="st4" width="5.6" height="5.6"/>
			
 
				+	</g>
			
 
				+	<g class="st7">
			
 
				+		<path id="路径_1428_4_" class="st8" d="M347.9,2v295.4H3.6"/>
			
 
				+		<path class="st9" d="M5.3,295V176.2c0-11.6,5.2-22.8,14.3-31.1c27.9-17.7,105.6-96.3,131.6-125c4.9-5.3,10.6-9.8,17.3-12.5
			
 
				+			c6.4-2.7,13.4-4.1,20.7-4.1h156.3"/>
			
 
				+	</g>
			
 
				+</g>
			
 
				+<g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
			
 
				+	<g  :class="'d-s13' + cls" id="d-s13">
			
 
				+		<circle class="st10" cx="328.5" cy="35.1" r="7.1"/>
			
 
				+		<circle class="st10" cx="328.5" cy="35.1" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s14' + cls" id="d-s14">
			
 
				+		<circle class="st10" cx="328.5" cy="79.9" r="7.1"/>
			
 
				+		<circle class="st10" cx="328.5" cy="79.9" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s16' + cls" id="d-s16">
			
 
				+		<circle class="st10" cx="328.5" cy="169.5" r="7.1"/>
			
 
				+		<circle class="st10" cx="328.5" cy="169.5" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s15' + cls" id="d-s15">
			
 
				+		<circle class="st10" cx="328.5" cy="124.7" r="7.1"/>
			
 
				+		<circle class="st10" cx="328.5" cy="124.7" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s12' + cls" id="d-s12">
			
 
				+		<circle class="st10" cx="299.1" cy="17.5" r="7.1"/>
			
 
				+		<circle class="st10" cx="299.1" cy="17.5" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s11' + cls" id="d-s11">
			
 
				+		<ellipse class="st10" cx="263.8" cy="16.2" rx="7.1" ry="7.1"/>
			
 
				+		<circle class="st10" cx="263.8" cy="16.2" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s17' + cls" id="d-s17">
			
 
				+		<circle class="st10" cx="328.5" cy="214.3" r="7.1"/>
			
 
				+		<circle class="st10" cx="328.5" cy="214.3" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s18' + cls" id="d-s18">
			
 
				+		<circle class="st10" cx="328.5" cy="259.1" r="7.1"/>
			
 
				+		<circle class="st10" cx="328.5" cy="259.1" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s30' + cls" id="d-s30">
			
 
				+		<circle class="st10" cx="231" cy="190.9" r="7.1"/>
			
 
				+		<circle class="st10" cx="231" cy="190.9" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s28' + cls" id="d-s28">
			
 
				+		<circle class="st10" cx="188.6" cy="150" r="7.1"/>
			
 
				+		<circle class="st10" cx="188.6" cy="150" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s31' + cls" id="d-s31">
			
 
				+		<circle class="st10" cx="269.3" cy="206.3" r="7.1"/>
			
 
				+		<ellipse class="st10" cx="269.3" cy="206.3" rx="5.1" ry="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s29' + cls" id="d-s29">
			
 
				+		<circle class="st10" cx="231" cy="150" r="7.1"/>
			
 
				+		<circle class="st10" cx="231" cy="150" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s27' + cls" id="d-s27">
			
 
				+		<circle class="st10" cx="188.6" cy="194.8" r="7.1"/>
			
 
				+		<circle class="st10" cx="188.6" cy="194.8" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s6' + cls" id="d-s6">
			
 
				+		<ellipse class="st10" cx="179.3" cy="129.1" rx="7.1" ry="7.1"/>
			
 
				+		<circle class="st10" cx="179.3" cy="129.1" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s4' + cls" id="d-s4">
			
 
				+		<circle class="st10" cx="26.9" cy="152.4" r="7.1"/>
			
 
				+		<circle class="st10" cx="26.9" cy="152.4" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s5' + cls" id="d-s5">
			
 
				+		<circle class="st10" cx="26.5" cy="183" r="7.1"/>
			
 
				+		<circle class="st10" cx="26.5" cy="183" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s26' + cls" id="d-s26">
			
 
				+		<circle class="st10" cx="19.8" cy="215.8" r="7.1"/>
			
 
				+		<circle class="st10" cx="19.8" cy="215.8" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s25' + cls" id="d-s25">
			
 
				+		<circle class="st10" cx="19.8" cy="250.3" r="7.1"/>
			
 
				+		<circle class="st10" cx="19.8" cy="250.3" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s3' + cls" id="d-s3">
			
 
				+		<ellipse class="st10" cx="156.3" cy="105.8" rx="7.1" ry="7.1"/>
			
 
				+		<circle class="st10" cx="156.3" cy="105.8" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s10' + cls" id="d-s10">
			
 
				+		<circle class="st10" cx="222.3" cy="17.5" r="7.1"/>
			
 
				+		<circle class="st10" cx="222.3" cy="17.5" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s9' + cls" id="d-s9">
			
 
				+		<circle class="st10" cx="183.5" cy="17.5" r="7.1"/>
			
 
				+		<circle class="st10" cx="183.5" cy="17.5" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s8' + cls" id="d-s8">
			
 
				+		<circle class="st10" cx="139.8" cy="54.3" r="7.1"/>
			
 
				+		<circle class="st10" cx="139.8" cy="54.3" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s7' + cls" id="d-s7">
			
 
				+		<circle class="st10" cx="61.4" cy="131.8" r="7.1"/>
			
 
				+		<circle class="st10" cx="61.4" cy="131.8" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s1' + cls" id="d-s1">
			
 
				+		<ellipse class="st10" cx="36.2" cy="105.8" rx="7.1" ry="7.1"/>
			
 
				+		<circle class="st10" cx="36.2" cy="105.8" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s2' + cls" id="d-s2">
			
 
				+		<circle class="st10" cx="111.5" cy="30" r="7.1"/>
			
 
				+		<circle class="st10" cx="111.5" cy="30" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s19' + cls" id="d-s19">
			
 
				+		<circle class="st10" cx="290.7" cy="278.1" r="7.1"/>
			
 
				+		<circle class="st10" cx="290.7" cy="278.1" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s20' + cls" id="d-s20">
			
 
				+		<circle class="st10" cx="241.4" cy="278.1" r="7.1"/>
			
 
				+		<circle class="st10" cx="241.4" cy="278.1" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s21' + cls" id="d-s21">
			
 
				+		<ellipse class="st10" cx="192.1" cy="278.1" rx="7.1" ry="7.1"/>
			
 
				+		<circle class="st10" cx="192.2" cy="278.1" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s22' + cls" id="d-s22">
			
 
				+		<circle class="st10" cx="142.8" cy="278.1" r="7.1"/>
			
 
				+		<circle class="st10" cx="142.8" cy="278.1" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s23' + cls" id="d-s23">
			
 
				+		<ellipse class="st10" cx="93.5" cy="278.1" rx="7.1" ry="7.1"/>
			
 
				+		<circle class="st10" cx="93.5" cy="278.1" r="5.1"/>
			
 
				+	</g>
			
 
				+	<g  :class="'d-s24' + cls" id="d-s24">
			
 
				+		<circle class="st10" cx="44.2" cy="278.1" r="7.1"/>
			
 
				+		<circle class="st10" cx="44.2" cy="278.1" r="5.1"/>
			
 
				+	</g>
			
 
				+</g>
			
 
				   </svg>
			
 
				 </template>
			
 
				-
			
 
				 <script>
			
 
				 export default {
			
 
				-  props: ["data", "currentPanoid"],
			
 
				+  props: ["data", "currentPanoid", "currentPano", "cls"],
			
 
				   data() {
			
 
				-    let keysData = Object.keys(this.data);
			
 
				-    return {
			
 
				-      keysData,
			
 
				-    };
			
 
				+    return { };
			
 
				   },
			
 
				   methods: {
			
 
				+    hoverItem(e){
			
 
				+      let target = e.target.parentElement;
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				+      this.$emit('hoverPano',tt||{})
			
 
				+    },
			
 
				     handleClick(e) {
			
 
				       let target = e.target.parentElement;
			
 
				-      let tt = this.data[target.id];
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				       if (tt) {
			
 
				-        let { x, y, z, w } = tt.quaternion;
			
 
				-        window.player.flyToPano({
			
 
				-          pano: window.player.model.panos.index[tt.id],
			
 
				-          quaternion: new THREE.Quaternion(x, y, z, w),
			
 
				-        });
			
 
				+        this.$bus.$emit('ifrMessage',{
			
 
				+          events:'flyToPano',
			
 
				+          data:tt
			
 
				+        })
			
 
				       }
			
 
				     },
			
 
				   },
			
 
				   watch: {
			
 
				-    currentPanoid: {
			
 
				+    currentPano: {
			
 
				       deep: true,
			
 
				       immediate: true,
			
 
				       handler: function(newVal) {
			
 
				-        let kk = this.keysData.find((item) => {
			
 
				-          let key = this.data[item].id;
			
 
				-          return key == newVal;
			
 
				-        });
			
 
				-        this.$emit("currentPano", this.data[kk] || {});
			
 
				-
			
 
				-        document.querySelector("#point") &&
			
 
				-          Array.from(document.querySelector("#point").childNodes).forEach(
			
 
				-            (item) => {
			
 
				-              item.classList.remove("active");
			
 
				-            }
			
 
				-          );
			
 
				-        if (kk) {
			
 
				-          document.querySelector("#" + kk).classList.add("active");
			
 
				+        document.querySelector("." + this.cls) &&
			
 
				+        Array.from(document.querySelector("." + this.cls).childNodes).forEach(
			
 
				+          (item) => {
			
 
				+            item&&item.classList.remove("active");
			
 
				+          }
			
 
				+        );
			
 
				+        if (newVal) {
			
 
				+          let ele = document.querySelector("." + newVal.mapId + this.cls)
			
 
				+          ele&&ele.classList.add("active");
			
 
				         }
			
 
				       },
			
 
				     },
			
@@ -425,12 +321,29 @@ export default {
 
				 svg {
			
 
				   width: 50%;
			
 
				 }
			
 
				+
			
 
				 #point {
			
 
				   > g {
			
 
				     cursor: pointer;
			
 
				-    &:hover {
			
 
				+    &.active {
			
 
				       ellipse,
			
 
				-      circle {
			
 
				+      circle:last-of-type {
			
 
				+        fill: @color;
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+      circle:first-of-type {
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+    }
			
 
				+    
			
 
				+    &:hover{
			
 
				+      ellipse,
			
 
				+      circle:last-of-type {
			
 
				+        fill: #fff;
			
 
				+        opacity: 1!important;
			
 
				+      }
			
 
				+      circle:first-of-type {
			
 
				+        opacity: 1!important;
			
 
				         fill: @color;
			
 
				       }
			
 
				     }
			
--- a/src/components/mapsvg/e.vue
+++ b/src/components/mapsvg/e.vue
@@ -169,107 +169,107 @@
 
				       </g>
			
 
				     </g>
			
 
				     <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
			
 
				-      <g id="e-s25">
			
 
				+      <g  :class="'e-s25' + cls" id="e-s25">
			
 
				         <circle class="st9" cx="21.2" cy="34" r="7.1" />
			
 
				         <circle class="st9" cx="21.2" cy="34" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s24">
			
 
				+      <g  :class="'e-s24' + cls" id="e-s24">
			
 
				         <circle class="st9" cx="21.2" cy="73.2" r="7.1" />
			
 
				         <circle class="st9" cx="21.2" cy="73.2" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s26">
			
 
				+      <g  :class="'e-s26' + cls" id="e-s26">
			
 
				         <circle class="st9" cx="44.6" cy="18.6" r="7.1" />
			
 
				         <circle class="st9" cx="44.6" cy="18.6" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s27">
			
 
				+      <g  :class="'e-s27' + cls" id="e-s27">
			
 
				         <circle class="st9" cx="79.9" cy="18.6" r="7.1" />
			
 
				         <circle class="st9" cx="79.9" cy="18.6" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s23">
			
 
				+      <g  :class="'e-s23' + cls" id="e-s23">
			
 
				         <circle class="st9" cx="21.2" cy="180.9" r="7.1" />
			
 
				         <circle class="st9" cx="21.2" cy="180.9" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s22">
			
 
				+      <g  :class="'e-s22' + cls" id="e-s22">
			
 
				         <circle class="st9" cx="21.2" cy="220.1" r="7.1" />
			
 
				         <circle class="st9" cx="21.2" cy="220.1" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s21">
			
 
				+      <g  :class="'e-s21' + cls" id="e-s21">
			
 
				         <circle class="st9" cx="21.2" cy="259.4" r="7.1" />
			
 
				         <circle class="st9" cx="21.2" cy="259.4" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s20">
			
 
				+      <g  :class="'e-s20' + cls" id="e-s20">
			
 
				         <circle class="st9" cx="45.6" cy="277.3" r="7.1" />
			
 
				         <circle class="st9" cx="45.6" cy="277.3" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s19">
			
 
				+      <g  :class="'e-s19' + cls" id="e-s19">
			
 
				         <circle class="st9" cx="83.7" cy="277.3" r="7.1" />
			
 
				         <circle class="st9" cx="83.7" cy="277.3" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s28">
			
 
				+      <g  :class="'e-s28' + cls" id="e-s28">
			
 
				         <circle class="st9" cx="54.1" cy="229.8" r="7.1" />
			
 
				         <circle class="st9" cx="54.1" cy="229.8" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s29">
			
 
				+      <g  :class="'e-s29' + cls" id="e-s29">
			
 
				         <circle class="st9" cx="80.5" cy="204.1" r="7.1" />
			
 
				         <circle class="st9" cx="80.5" cy="204.1" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s31">
			
 
				+      <g  :class="'e-s31' + cls" id="e-s31">
			
 
				         <circle class="st9" cx="121.7" cy="150" r="7.1" />
			
 
				         <circle class="st9" cx="121.7" cy="150" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s33">
			
 
				+      <g  :class="'e-s33' + cls" id="e-s33">
			
 
				         <circle class="st9" cx="161.5" cy="190.5" r="7.1" />
			
 
				         <circle class="st9" cx="161.5" cy="190.5" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s30">
			
 
				+      <g  :class="'e-s30' + cls" id="e-s30">
			
 
				         <circle class="st9" cx="121.4" cy="190.1" r="7.1" />
			
 
				         <circle class="st9" cx="121.4" cy="190.1" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s32">
			
 
				+      <g  :class="'e-s32' + cls" id="e-s32">
			
 
				         <circle class="st9" cx="161.9" cy="150.4" r="7.1" />
			
 
				         <circle class="st9" cx="161.9" cy="150.4" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s6">
			
 
				+      <g  :class="'e-s6' + cls" id="e-s6">
			
 
				         <circle class="st9" cx="204.7" cy="136.5" r="7.1" />
			
 
				         <circle class="st9" cx="204.7" cy="136.5" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s9">
			
 
				+      <g  :class="'e-s9' + cls" id="e-s9">
			
 
				         <circle class="st9" cx="331.2" cy="152.9" r="7.1" />
			
 
				         <circle class="st9" cx="331.2" cy="152.9" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s10">
			
 
				+      <g  :class="'e-s10' + cls" id="e-s10">
			
 
				         <circle class="st9" cx="331.2" cy="183.4" r="7.1" />
			
 
				         <circle class="st9" cx="331.2" cy="183.4" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s11">
			
 
				+      <g  :class="'e-s11' + cls" id="e-s11">
			
 
				         <circle class="st9" cx="331.2" cy="215.8" r="7.1" />
			
 
				         <circle class="st9" cx="331.2" cy="215.8" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s12">
			
 
				+      <g  :class="'e-s12' + cls" id="e-s12">
			
 
				         <circle class="st9" cx="331.2" cy="250.4" r="7.1" />
			
 
				         <circle class="st9" cx="331.2" cy="250.4" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s3">
			
 
				+      <g  :class="'e-s3' + cls" id="e-s3">
			
 
				         <circle class="st9" cx="232.5" cy="109.6" r="7.1" />
			
 
				         <circle class="st9" cx="232.5" cy="109.6" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s5">
			
 
				+      <g  :class="'e-s5' + cls" id="e-s5">
			
 
				         <circle class="st9" cx="127.8" cy="22.6" r="7.1" />
			
 
				         <circle class="st9" cx="127.8" cy="22.6" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s4">
			
 
				+      <g  :class="'e-s4' + cls" id="e-s4">
			
 
				         <circle class="st9" cx="166.6" cy="22.6" r="7.1" />
			
 
				         <circle class="st9" cx="166.6" cy="22.6" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s7">
			
 
				+      <g  :class="'e-s7' + cls" id="e-s7">
			
 
				         <circle class="st9" cx="206.9" cy="41" r="7.1" />
			
 
				         <circle class="st9" cx="206.9" cy="41" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s8">
			
 
				+      <g  :class="'e-s8' + cls" id="e-s8">
			
 
				         <circle class="st9" cx="297.7" cy="126.4" r="7.1" />
			
 
				         <circle class="st9" cx="297.7" cy="126.4" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s2">
			
 
				+      <g  :class="'e-s2' + cls" id="e-s2">
			
 
				         <circle class="st9" cx="321.7" cy="99.1" r="7.1" />
			
 
				 
			
 
				         <ellipse
			
@@ -281,57 +281,52 @@
 
				           ry="5.1"
			
 
				         />
			
 
				       </g>
			
 
				-      <g id="e-s1">
			
 
				+      <g  :class="'e-s1' + cls" id="e-s1">
			
 
				         <circle class="st9" cx="235.1" cy="16.7" r="7.1" />
			
 
				         <circle class="st9" cx="235.1" cy="16.7" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s18">
			
 
				+      <g  :class="'e-s18' + cls" id="e-s18">
			
 
				         <circle class="st9" cx="121.7" cy="277.3" r="7.1" />
			
 
				         <circle class="st9" cx="121.7" cy="277.3" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s17">
			
 
				+      <g  :class="'e-s17' + cls" id="e-s17">
			
 
				         <circle class="st9" cx="159.8" cy="277.3" r="7.1" />
			
 
				         <circle class="st9" cx="159.8" cy="277.3" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s16">
			
 
				+      <g  :class="'e-s16' + cls" id="e-s16">
			
 
				         <circle class="st9" cx="197.8" cy="277.3" r="7.1" />
			
 
				         <circle class="st9" cx="197.8" cy="277.3" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s15">
			
 
				+      <g  :class="'e-s15' + cls" id="e-s15">
			
 
				         <circle class="st9" cx="235.9" cy="277.3" r="7.1" />
			
 
				         <circle class="st9" cx="235.9" cy="277.3" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s14">
			
 
				+      <g  :class="'e-s14' + cls" id="e-s14">
			
 
				         <circle class="st9" cx="273.9" cy="277.3" r="7.1" />
			
 
				         <circle class="st9" cx="273.9" cy="277.3" r="5.1" />
			
 
				       </g>
			
 
				-      <g id="e-s13">
			
 
				+      <g  :class="'e-s13' + cls" id="e-s13">
			
 
				         <circle class="st9" cx="312" cy="277.3" r="7.1" />
			
 
				         <circle class="st9" cx="312" cy="277.3" r="5.1" />
			
 
				       </g>
			
 
				     </g>
			
 
				   </svg>
			
 
				 </template>
			
 
				-
			
 
				 <script>
			
 
				 export default {
			
 
				-  props: ["data", "currentPanoid","cls"],
			
 
				+  props: ["data", "currentPanoid", "currentPano", "cls"],
			
 
				   data() {
			
 
				-    let keysData = Object.keys(this.data);
			
 
				-    return {
			
 
				-      keysData,
			
 
				-    };
			
 
				+    return { };
			
 
				   },
			
 
				   methods: {
			
 
				     hoverItem(e){
			
 
				       let target = e.target.parentElement;
			
 
				-      console.dir(target);
			
 
				-      let tt = this.data[target.id];
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				       this.$emit('hoverPano',tt||{})
			
 
				     },
			
 
				     handleClick(e) {
			
 
				       let target = e.target.parentElement;
			
 
				-      let tt = this.data[target.id];
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				       if (tt) {
			
 
				         this.$bus.$emit('ifrMessage',{
			
 
				           events:'flyToPano',
			
@@ -341,24 +336,19 @@ export default {
 
				     },
			
 
				   },
			
 
				   watch: {
			
 
				-    currentPanoid: {
			
 
				+    currentPano: {
			
 
				       deep: true,
			
 
				       immediate: true,
			
 
				       handler: function(newVal) {
			
 
				-        let kk = this.keysData.find((item) => {
			
 
				-          let key = this.data[item].id;
			
 
				-          return key == newVal;
			
 
				-        });
			
 
				-        this.$emit("currentPano", this.data[kk] || {});
			
 
				-
			
 
				-        document.querySelector("#point") &&
			
 
				-          Array.from(document.querySelector("#point").childNodes).forEach(
			
 
				-            (item) => {
			
 
				-              item.classList.remove("active");
			
 
				-            }
			
 
				-          );
			
 
				-        if (kk) {
			
 
				-          document.querySelector("#" + kk).classList.add("active");
			
 
				+        document.querySelector("." + this.cls) &&
			
 
				+        Array.from(document.querySelector("." + this.cls).childNodes).forEach(
			
 
				+          (item) => {
			
 
				+            item&&item.classList.remove("active");
			
 
				+          }
			
 
				+        );
			
 
				+        if (newVal) {
			
 
				+          let ele = document.querySelector("." + newVal.mapId + this.cls)
			
 
				+          ele&&ele.classList.add("active");
			
 
				         }
			
 
				       },
			
 
				     },
			
@@ -419,6 +409,7 @@ export default {
 
				 svg {
			
 
				   width: 60%;
			
 
				 }
			
 
				+
			
 
				 #point {
			
 
				   > g {
			
 
				     cursor: pointer;
			
--- a/src/components/mapsvg/xuting.vue
+++ b/src/components/mapsvg/xuting.vue
@@ -179,23 +179,19 @@
 
				 
			
 
				 <script>
			
 
				 export default {
			
 
				-  props: ["data", "currentPanoid", "cls"],
			
 
				+  props: ["data", "currentPano", "cls"],
			
 
				   data() {
			
 
				-    let keysData = Object.keys(this.data);
			
 
				-    return {
			
 
				-      keysData,
			
 
				-    };
			
 
				+    return { };
			
 
				   },
			
 
				   methods: {
			
 
				     hoverItem(e){
			
 
				       let target = e.target.parentElement;
			
 
				-      console.dir(target);
			
 
				-      let tt = this.data[target.id];
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				       this.$emit('hoverPano',tt||{})
			
 
				     },
			
 
				     handleClick(e) {
			
 
				       let target = e.target.parentElement;
			
 
				-      let tt = this.data[target.id];
			
 
				+      let tt = this.data.find(item=>item.mapId == target.id)
			
 
				       if (tt) {
			
 
				         this.$bus.$emit('ifrMessage',{
			
 
				           events:'flyToPano',
			
@@ -205,24 +201,19 @@ export default {
 
				     },
			
 
				   },
			
 
				   watch: {
			
 
				-    currentPanoid: {
			
 
				+    currentPano: {
			
 
				       deep: true,
			
 
				       immediate: true,
			
 
				       handler: function(newVal) {
			
 
				-        let kk = this.keysData.find((item) => {
			
 
				-          let key = this.data[item].id;
			
 
				-          return key == newVal;
			
 
				-        });
			
 
				-
			
 
				-        this.$emit('currentPano',this.data[kk]||{})
			
 
				         document.querySelector("." + this.cls) &&
			
 
				-          Array.from(document.querySelector("." + this.cls).childNodes).forEach(
			
 
				-            (item) => {
			
 
				-              item.classList.remove("active");
			
 
				-            }
			
 
				-          );
			
 
				-        if (kk) {
			
 
				-          document.querySelector("." + kk + this.cls).classList.add("active");
			
 
				+        Array.from(document.querySelector("." + this.cls).childNodes).forEach(
			
 
				+          (item) => {
			
 
				+            item&&item.classList.remove("active");
			
 
				+          }
			
 
				+        );
			
 
				+        if (newVal) {
			
 
				+          let ele = document.querySelector("." + newVal.mapId + this.cls)
			
 
				+          ele&&ele.classList.add("active");
			
 
				         }
			
 
				       },
			
 
				     },
			
@@ -290,7 +281,7 @@ export default {
 
				         fill: @color;
			
 
				         opacity: 1!important;
			
 
				       }
			
 
				-      circle:first-of-type {
			
 
				+      ellipse,circle:first-of-type {
			
 
				         opacity: 1!important;
			
 
				       }
			
 
				     }
			
--- a/src/config/http.js
+++ b/src/config/http.js
@@ -9,7 +9,7 @@ let vue = new Vue()
 
				 
			
 
				 var isProduction = process.env.NODE_ENV === 'production'
			
 
				 
			
 
				-const serverName = isProduction ? 'http://tb.kczg.org.cn/' : 'http://tb.kczg.org.cn/'
			
 
				+const serverName = isProduction ? 'https://tb.kczg.org.cn/' : 'https://tb.kczg.org.cn/'
			
 
				 
			
 
				 const orginLink = window.location.origin
			
 
				 
			
--- a/src/data/raw.js
+++ b/src/data/raw.js
--- a/src/mixins/dom.js
+++ b/src/mixins/dom.js
@@ -0,0 +1,246 @@
 
				+/* istanbul ignore next */
			
 
				+/* eslint-disable */
			
 
				+
			
 
				+import Vue from "vue";
			
 
				+
			
 
				+const isServer = Vue.prototype.$isServer;
			
 
				+const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
			
 
				+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
			
 
				+const ieVersion = isServer ? 0 : Number(document.documentMode);
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+const trim = function(string) {
			
 
				+  return (string || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "");
			
 
				+};
			
 
				+/* istanbul ignore next */
			
 
				+const camelCase = function(name) {
			
 
				+  return name
			
 
				+    .replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
			
 
				+      return offset ? letter.toUpperCase() : letter;
			
 
				+    })
			
 
				+    .replace(MOZ_HACK_REGEXP, "Moz$1");
			
 
				+};
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+export const on = (function() {
			
 
				+  if (!isServer && document.addEventListener) {
			
 
				+    return function(element, event, handler) {
			
 
				+      if (element && event && handler) {
			
 
				+        element.addEventListener(event, handler, false);
			
 
				+      }
			
 
				+    };
			
 
				+  } else {
			
 
				+    return function(element, event, handler) {
			
 
				+      if (element && event && handler) {
			
 
				+        element.attachEvent("on" + event, handler);
			
 
				+      }
			
 
				+    };
			
 
				+  }
			
 
				+})();
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+export const off = (function() {
			
 
				+  if (!isServer && document.removeEventListener) {
			
 
				+    return function(element, event, handler) {
			
 
				+      if (element && event) {
			
 
				+        element.removeEventListener(event, handler, false);
			
 
				+      }
			
 
				+    };
			
 
				+  } else {
			
 
				+    return function(element, event, handler) {
			
 
				+      if (element && event) {
			
 
				+        element.detachEvent("on" + event, handler);
			
 
				+      }
			
 
				+    };
			
 
				+  }
			
 
				+})();
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+export const once = function(el, event, fn) {
			
 
				+  var listener = function() {
			
 
				+    if (fn) {
			
 
				+      fn.apply(this, arguments);
			
 
				+    }
			
 
				+    off(el, event, listener);
			
 
				+  };
			
 
				+  on(el, event, listener);
			
 
				+};
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+export function hasClass(el, cls) {
			
 
				+  if (!el || !cls) return false;
			
 
				+  if (cls.indexOf(" ") !== -1)
			
 
				+    throw new Error("className should not contain space.");
			
 
				+  if (el.classList) {
			
 
				+    return el.classList.contains(cls);
			
 
				+  } else {
			
 
				+    return (" " + el.className + " ").indexOf(" " + cls + " ") > -1;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+export function addClass(el, cls) {
			
 
				+  if (!el) return;
			
 
				+  var curClass = el.className;
			
 
				+  var classes = (cls || "").split(" ");
			
 
				+
			
 
				+  for (var i = 0, j = classes.length; i < j; i++) {
			
 
				+    var clsName = classes[i];
			
 
				+    if (!clsName) continue;
			
 
				+
			
 
				+    if (el.classList) {
			
 
				+      el.classList.add(clsName);
			
 
				+    } else if (!hasClass(el, clsName)) {
			
 
				+      curClass += " " + clsName;
			
 
				+    }
			
 
				+  }
			
 
				+  if (!el.classList) {
			
 
				+    el.className = curClass;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+export function removeClass(el, cls) {
			
 
				+  if (!el || !cls) return;
			
 
				+  var classes = cls.split(" ");
			
 
				+  var curClass = " " + el.className + " ";
			
 
				+
			
 
				+  for (var i = 0, j = classes.length; i < j; i++) {
			
 
				+    var clsName = classes[i];
			
 
				+    if (!clsName) continue;
			
 
				+
			
 
				+    if (el.classList) {
			
 
				+      el.classList.remove(clsName);
			
 
				+    } else if (hasClass(el, clsName)) {
			
 
				+      curClass = curClass.replace(" " + clsName + " ", " ");
			
 
				+    }
			
 
				+  }
			
 
				+  if (!el.classList) {
			
 
				+    el.className = trim(curClass);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+export const getStyle =
			
 
				+  ieVersion < 9
			
 
				+    ? function(element, styleName) {
			
 
				+        if (isServer) return;
			
 
				+        if (!element || !styleName) return null;
			
 
				+        styleName = camelCase(styleName);
			
 
				+        if (styleName === "float") {
			
 
				+          styleName = "styleFloat";
			
 
				+        }
			
 
				+        try {
			
 
				+          switch (styleName) {
			
 
				+            case "opacity":
			
 
				+              try {
			
 
				+                return element.filters.item("alpha").opacity / 100;
			
 
				+              } catch (e) {
			
 
				+                return 1.0;
			
 
				+              }
			
 
				+            default:
			
 
				+              return element.style[styleName] || element.currentStyle
			
 
				+                ? element.currentStyle[styleName]
			
 
				+                : null;
			
 
				+          }
			
 
				+        } catch (e) {
			
 
				+          return element.style[styleName];
			
 
				+        }
			
 
				+      }
			
 
				+    : function(element, styleName) {
			
 
				+        if (isServer) return;
			
 
				+        if (!element || !styleName) return null;
			
 
				+        styleName = camelCase(styleName);
			
 
				+        if (styleName === "float") {
			
 
				+          styleName = "cssFloat";
			
 
				+        }
			
 
				+        try {
			
 
				+          var computed = document.defaultView.getComputedStyle(element, "");
			
 
				+          return element.style[styleName] || computed
			
 
				+            ? computed[styleName]
			
 
				+            : null;
			
 
				+        } catch (e) {
			
 
				+          return element.style[styleName];
			
 
				+        }
			
 
				+      };
			
 
				+
			
 
				+/* istanbul ignore next */
			
 
				+export function setStyle(element, styleName, value) {
			
 
				+  if (!element || !styleName) return;
			
 
				+
			
 
				+  if (typeof styleName === "object") {
			
 
				+    for (var prop in styleName) {
			
 
				+      if (styleName.hasOwnProperty(prop)) {
			
 
				+        setStyle(element, prop, styleName[prop]);
			
 
				+      }
			
 
				+    }
			
 
				+  } else {
			
 
				+    styleName = camelCase(styleName);
			
 
				+    if (styleName === "opacity" && ieVersion < 9) {
			
 
				+      element.style.filter = isNaN(value)
			
 
				+        ? ""
			
 
				+        : "alpha(opacity=" + value * 100 + ")";
			
 
				+    } else {
			
 
				+      element.style[styleName] = value;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+export const isScroll = (el, vertical) => {
			
 
				+  if (isServer) return;
			
 
				+
			
 
				+  const determinedDirection = vertical !== null || vertical !== undefined;
			
 
				+  const overflow = determinedDirection
			
 
				+    ? vertical
			
 
				+      ? getStyle(el, "overflow-y")
			
 
				+      : getStyle(el, "overflow-x")
			
 
				+    : getStyle(el, "overflow");
			
 
				+
			
 
				+  return overflow.match(/(scroll|auto)/);
			
 
				+};
			
 
				+
			
 
				+export const getScrollContainer = (el, vertical) => {
			
 
				+  if (isServer) return;
			
 
				+
			
 
				+  let parent = el;
			
 
				+  while (parent) {
			
 
				+    if ([window, document, document.documentElement].includes(parent)) {
			
 
				+      return window;
			
 
				+    }
			
 
				+    if (isScroll(parent, vertical)) {
			
 
				+      return parent;
			
 
				+    }
			
 
				+    parent = parent.parentNode;
			
 
				+  }
			
 
				+
			
 
				+  return parent;
			
 
				+};
			
 
				+
			
 
				+export const isInContainer = (el, container) => {
			
 
				+  if (isServer || !el || !container) return false;
			
 
				+
			
 
				+  const elRect = el.getBoundingClientRect();
			
 
				+  let containerRect;
			
 
				+
			
 
				+  if (
			
 
				+    [window, document, document.documentElement, null, undefined].includes(
			
 
				+      container
			
 
				+    )
			
 
				+  ) {
			
 
				+    containerRect = {
			
 
				+      top: 0,
			
 
				+      right: window.innerWidth,
			
 
				+      bottom: window.innerHeight,
			
 
				+      left: 0
			
 
				+    };
			
 
				+  } else {
			
 
				+    containerRect = container.getBoundingClientRect();
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    elRect.top < containerRect.bottom &&
			
 
				+    elRect.bottom > containerRect.top &&
			
 
				+    elRect.right > containerRect.left &&
			
 
				+    elRect.left < containerRect.right
			
 
				+  );
			
 
				+};
			
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -14,18 +14,19 @@ import {
 
				 
			
 
				 
			
 
				 Vue.prototype.$bus = new Vue()
			
 
				-
			
 
				+import clickoutside from "./v-clickoutside";
			
 
				+import clickwindow from "./v-clickwindow";
			
 
				 
			
 
				 import pagination  from '@/components/pagination'
			
 
				 
			
 
				-import data from '@/data/scene'
			
 
				+import {region} from '@/data/raw'
			
 
				 
			
 
				 
			
 
				 Vue.mixin({
			
 
				     data() {
			
 
				         return {
			
 
				           isMobile: browser.mobile,
			
 
				-          themes:data.themes
			
 
				+          themes:region
			
 
				         }
			
 
				     },
			
 
				     computed:{
			
@@ -36,6 +37,10 @@ Vue.mixin({
 
				     components:{
			
 
				       pagination
			
 
				     },
			
 
				+    directives: {
			
 
				+      clickoutside: clickoutside,
			
 
				+      clickwindow: clickwindow
			
 
				+    },
			
 
				     methods: {
			
 
				       $showTips,
			
 
				       $showLoading,
			
--- a/src/mixins/v-clickoutside.js
+++ b/src/mixins/v-clickoutside.js
@@ -0,0 +1,82 @@
 
				+import Vue from "vue";
			
 
				+import { on } from "./dom";
			
 
				+
			
 
				+const nodeList = [];
			
 
				+const ctx = "@@clickoutsideContext";
			
 
				+
			
 
				+let startClick;
			
 
				+let seed = 0;
			
 
				+
			
 
				+!Vue.prototype.$isServer && on(document, "mousedown", e => (startClick = e));
			
 
				+
			
 
				+!Vue.prototype.$isServer &&
			
 
				+  on(document, "mouseup", e => {
			
 
				+    nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
			
 
				+  });
			
 
				+
			
 
				+function createDocumentHandler(el, binding, vnode) {
			
 
				+  return function(mouseup = {}, mousedown = {}) {
			
 
				+    if (
			
 
				+      !vnode ||
			
 
				+      !vnode.context ||
			
 
				+      !mouseup.target ||
			
 
				+      !mousedown.target ||
			
 
				+      el.contains(mouseup.target) ||
			
 
				+      el.contains(mousedown.target) ||
			
 
				+      el === mouseup.target ||
			
 
				+      (vnode.context.popperElm &&
			
 
				+        (vnode.context.popperElm.contains(mouseup.target) ||
			
 
				+          vnode.context.popperElm.contains(mousedown.target)))
			
 
				+    )
			
 
				+      return;
			
 
				+
			
 
				+    if (
			
 
				+      binding.expression &&
			
 
				+      el[ctx].methodName &&
			
 
				+      vnode.context[el[ctx].methodName]
			
 
				+    ) {
			
 
				+      vnode.context[el[ctx].methodName]();
			
 
				+    } else {
			
 
				+      el[ctx].bindingFn && el[ctx].bindingFn();
			
 
				+    }
			
 
				+  };
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * v-clickoutside
			
 
				+ * @desc 点击元素外面才会触发的事件
			
 
				+ * @example
			
 
				+ * ```vue
			
 
				+ * <div v-element-clickoutside="handleClose">
			
 
				+ * ```
			
 
				+ */
			
 
				+export default {
			
 
				+  bind(el, binding, vnode) {
			
 
				+    nodeList.push(el);
			
 
				+    const id = seed++;
			
 
				+    el[ctx] = {
			
 
				+      id,
			
 
				+      documentHandler: createDocumentHandler(el, binding, vnode),
			
 
				+      methodName: binding.expression,
			
 
				+      bindingFn: binding.value
			
 
				+    };
			
 
				+  },
			
 
				+
			
 
				+  update(el, binding, vnode) {
			
 
				+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
			
 
				+    el[ctx].methodName = binding.expression;
			
 
				+    el[ctx].bindingFn = binding.value;
			
 
				+  },
			
 
				+
			
 
				+  unbind(el) {
			
 
				+    let len = nodeList.length;
			
 
				+
			
 
				+    for (let i = 0; i < len; i++) {
			
 
				+      if (nodeList[i][ctx].id === el[ctx].id) {
			
 
				+        nodeList.splice(i, 1);
			
 
				+        break;
			
 
				+      }
			
 
				+    }
			
 
				+    delete el[ctx];
			
 
				+  }
			
 
				+};
			
--- a/src/mixins/v-clickwindow.js
+++ b/src/mixins/v-clickwindow.js
@@ -0,0 +1,11 @@
 
				+export default {
			
 
				+  bind(el, binding) {
			
 
				+    el.func = binding.value;
			
 
				+    window.addEventListener("click", el.func, false);
			
 
				+  },
			
 
				+
			
 
				+  unbind(el) {
			
 
				+    window.removeEventListener("click", el.func);
			
 
				+    delete el.func;
			
 
				+  }
			
 
				+};
			
--- a/src/pages/enter/model/index.vue
+++ b/src/pages/enter/model/index.vue
@@ -14,7 +14,7 @@ export default {
 
				           if (data.data.type == "toScene") {
			
 
				             this.$router.push({
			
 
				               name:'scene',
			
 
				-              params:{type:data.data.key}
			
 
				+              params:{type:data.data.key,isjump:'yes'}
			
 
				             })
			
 
				           }
			
 
				           if (data.data.type == "modelLoadFinish") {
			
--- a/src/pages/mobilescene/aside.vue
+++ b/src/pages/mobilescene/aside.vue
@@ -44,7 +44,7 @@ export default {
 
				   },
			
 
				   methods:{
			
 
				     onClickItem(item){
			
 
				-      this.$router.push({params:{type:item.id}})
			
 
				+      this.$router.push({params:{type:item.id,isjump:'yes'}})
			
 
				       this.$emit('close')
			
 
				     }
			
 
				   }
			
--- a/src/pages/mobilescene/components/qrcode.vue
+++ b/src/pages/mobilescene/components/qrcode.vue
@@ -11,8 +11,8 @@
 
				       </div>
			
 
				       <div class="ul">
			
 
				         <div class="li">
			
 
				-          <p v-if="!currentPano.name" v-html="currentPano.name"></p>
			
 
				-          <div class="xiala" v-else>
			
 
				+          <p v-if="currentPano.name" v-html="currentPano.name"></p>
			
 
				+          <!-- <div class="xiala" v-else>
			
 
				             <span @click="isShowUl=!isShowUl">
			
 
				               {{currentPano.name}}
			
 
				               <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="">
			
@@ -22,7 +22,7 @@
 
				                 四川省返乡创业
			
 
				               </li>
			
 
				             </ul>
			
 
				-          </div>
			
 
				+          </div> -->
			
 
				 
			
 
				           <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
			
 
				         </div>
			
--- a/src/pages/mobilescene/index.vue
+++ b/src/pages/mobilescene/index.vue
@@ -4,7 +4,7 @@
 
				       <vbar :name="currentItem.name" @showSearch="showSearch=true" @openAside="showAside=true"></vbar>
			
 
				       <scene :tourStatus="tourStatus" v-if="showScene" />
			
 
				       <vside v-show="!tourStatus&&showAside" @close="showAside=false" />
			
 
				-      <vmap :currentPanoid="currentPanoid"  @currentPano="data=>{currentPano=data}"/>
			
 
				+      <vmap :currentPano="currentPano" :booth="booth"/>
			
 
				       <vmenu :tourStatus="tourStatus" @opencp="handlecp" />
			
 
				       <vsearch @closeSearch="showSearch=false" v-if="showSearch"/>
			
 
				 
			
@@ -49,6 +49,7 @@ 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";
			
 
				 
			
 
				 export default {
			
 
				   components: {
			
@@ -67,6 +68,9 @@ export default {
 
				   computed:{
			
 
				     currentItem(){
			
 
				       return (this.themes.find(item=>item.id==this.theme));
			
 
				+    },
			
 
				+    currentPano(){
			
 
				+      return Booth.find(item=>item.panoId==this.currentPanoid) || {}
			
 
				     }
			
 
				   },
			
 
				   data() {
			
@@ -79,13 +83,22 @@ export default {
 
				       showAll: false,
			
 
				       showScene: true,
			
 
				       currentPanoid: "",
			
 
				-      currentPano:{},
			
 
				       isFull: false,
			
 
				       hotspots: [],
			
 
				       hotspot:'',
			
 
				-      loginUrl:''
			
 
				+      loginUrl:'',
			
 
				+      currentTheme:'',
			
 
				+      booth:Booth
			
 
				     };
			
 
				   },
			
 
				+
			
 
				+  watch:{
			
 
				+    currentTheme(newVal){
			
 
				+      if (newVal) {
			
 
				+        this.$router.push({params:{type:newVal.id,isjump:'none'}})
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				  
			
 
				   mounted() {
			
 
				     this.$showLoading()
			
@@ -109,6 +122,11 @@ export default {
 
				 
			
 
				           if (res.data.source === "flying.ended") {
			
 
				             this.currentPanoid = data;
			
 
				+            this.currentTheme = region.find(item=>{
			
 
				+              if (item.spread.indexOf(Number(this.currentPanoid))>-1) {
			
 
				+                return item
			
 
				+              }
			
 
				+            })
			
 
				           }
			
 
				 
			
 
				           if (res.data.source === "openHotspot") {
			
--- a/src/pages/mobilescene/map.vue
+++ b/src/pages/mobilescene/map.vue
@@ -4,8 +4,8 @@
 
				         <img :src="require(`@/assets/images/mobile/icon/shoula_${theme}.png`)" alt="">
			
 
				         <img class="jiantou" :src="require(`@/assets/images/project/icon/jiantou${isShow?'r':'l'}.png`)" alt="">
			
 
				       </div>
			
 
				-    <div class="cadmap brightness" @click="openMap">
			
 
				-      <component :cls="cp" @currentPano="data=>{this.$emit('currentPano',data)}" :currentPanoid="currentPanoid" :data="panodata[$route.params.type]" :is="cp"/>
			
 
				+    <div class="cadmap brightness">
			
 
				+      <component :cls="cp" :currentPano="currentPano" :data="booth" :is="cp"/>
			
 
				     </div>
			
 
				   </div>
			
 
				 </template>
			
@@ -18,9 +18,8 @@ import vc from "@/components/mapsvg/c";
 
				 import vd from "@/components/mapsvg/d";
			
 
				 import ve from "@/components/mapsvg/e";
			
 
				 
			
 
				-import panodata from "@/components/mapsvg/pano.js";
			
 
				 export default {
			
 
				-  props:['currentPanoid'],
			
 
				+  props:['currentPano','booth'],
			
 
				 
			
 
				   components:{
			
 
				     vxuting,
			
@@ -32,14 +31,11 @@ export default {
 
				   },
			
 
				    data(){
			
 
				     return {
			
 
				-      panodata,
			
 
				       isShow:false
			
 
				     }
			
 
				   },
			
 
				   methods:{
			
 
				-    openMap(){
			
 
				-
			
 
				-    }
			
 
				+    
			
 
				   },
			
 
				   computed:{
			
 
				     cp(){
			
--- a/src/pages/mobilescene/scene.vue
+++ b/src/pages/mobilescene/scene.vue
@@ -2,6 +2,7 @@
 
				   <div class="scene-body">
			
 
				     <iframe
			
 
				       ref="ifr"
			
 
				+      :key="viewId"
			
 
				       :src="`scene.html?m=1079${firstView[viewId]}`"
			
 
				       allowfullscreen="true"
			
 
				       frameborder="0"
			
@@ -10,16 +11,18 @@
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				+import {region} from "@/data/raw.js";
			
 
				+let firstView =  {}
			
 
				+region.forEach(item=>{
			
 
				+  let {x,y,z,w} = item.firstView.panoQuaternion
			
 
				+  firstView[item.id] = `&firstView=pano:${item.firstView.panoId},qua:${x+', '+y+', '+z+', '+w}`
			
 
				+})
			
 
				+
			
 
				 export default {
			
 
				   props: ["tourStatus"],
			
 
				   data(){
			
 
				     return {
			
 
				-      firstView: {
			
 
				-        xuting:
			
 
				-          "&firstView=pano:0,qua:-0.001489144851378805,0.8167267402741333,0.002107772549575186,0.5770188587943806",
			
 
				-        e:
			
 
				-          "&firstView=pano:30,qua:0.028523630856794317, 0.953183703881663, -0.09519870492067249, 0.2855948602103702",
			
 
				-      },
			
 
				+      firstView,
			
 
				       viewId:this.$route.params.type
			
 
				     }
			
 
				   },
			
@@ -27,9 +30,9 @@ export default {
 
				     let ifrWindow = this.$refs.ifr.contentWindow
			
 
				     this.$bus.$on('ifrMessage',(data)=>{
			
 
				       if (data.events=='flyToPano') {
			
 
				-          let { x, y, z, w } = data.data.quaternion
			
 
				-          ifrWindow.player.flyToPano({
			
 
				-            pano: ifrWindow.player.model.panos.index[data.data.id],
			
 
				+          let { x, y, z, w } = data.data.panoQuaternion
			
 
				+          ifrWindow.player.blackToPano({
			
 
				+            pano: ifrWindow.player.model.panos.index[data.data.panoId],
			
 
				             quaternion: new ifrWindow.THREE.Quaternion(x, y, z, w),
			
 
				           });
			
 
				       }
			
@@ -41,36 +44,14 @@ export default {
 
				   },
			
 
				   watch: {
			
 
				     theme(newVal) {
			
 
				-      if (newVal == "xuting") {
			
 
				-        this.$refs.ifr.contentWindow.postMessage(
			
 
				-          {
			
 
				-            source: "changeExhition",
			
 
				-            data: {
			
 
				-              quat: [
			
 
				-                -0.001489144851378805,
			
 
				-                0.8167267402741333,
			
 
				-                0.002107772549575186,
			
 
				-                0.5770188587943806,
			
 
				-              ],
			
 
				-              index: 0,
			
 
				-            },
			
 
				-          },
			
 
				-          "*"
			
 
				-        );
			
 
				-      }
			
 
				-
			
 
				-      if (newVal == "e") {
			
 
				+      let currentRegion = region.find(item=>item.id==newVal)
			
 
				+      if (this.$route.params.isjump=='yes') {
			
 
				         this.$refs.ifr.contentWindow.postMessage(
			
 
				           {
			
 
				             source: "changeExhition",
			
 
				             data: {
			
 
				-              quat: [
			
 
				-                0.028523630856794317,
			
 
				-                0.953183703881663,
			
 
				-                -0.09519870492067249,
			
 
				-                0.2855948602103702,
			
 
				-              ],
			
 
				-              index: 30,
			
 
				+              quat: currentRegion.firstView.panoQuaternion,
			
 
				+              index: currentRegion.firstView.panoId,
			
 
				             },
			
 
				           },
			
 
				           "*"
			
--- a/src/pages/mobilescene/search/index.vue
+++ b/src/pages/mobilescene/search/index.vue
@@ -16,26 +16,43 @@
 
				           <li v-for="(item,i) in region" :key="i">
			
 
				             <p>{{item.name}}</p>
			
 
				             <ul>
			
 
				-              <li 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>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import {region} from '@/data/region'
			
 
				+import {Booth,region} from '@/data/raw'
			
 
				+
			
 
				+let gregion = region.map(item=>{
			
 
				+  let tmp = []
			
 
				+  item.company.forEach(sub=> {
			
 
				+    let ii = Booth.find(son=>son.id==sub)
			
 
				+    if (ii) {
			
 
				+      tmp.push(ii)
			
 
				+    }
			
 
				+  })
			
 
				+  let tt = tmp.filter(item=>(item.mapId.indexOf('xt')<=-1))
			
 
				+
			
 
				+  item.company = tt
			
 
				+  return item
			
 
				+})
			
 
				+
			
 
				+console.log(gregion);
			
 
				+
			
 
				 let arr = [] 
			
 
				 
			
 
				 export default {
			
 
				    data(){
			
 
				-    this.u_extend(arr,region)
			
 
				+    this.u_extend(arr,gregion)
			
 
				     return {
			
 
				       key:'',
			
 
				       region:arr,
			
@@ -44,7 +61,7 @@ export default {
 
				     watch:{
			
 
				     key(newVal){
			
 
				      let tmpregion = []
			
 
				-      this.u_extend(tmpregion,region)
			
 
				+      this.u_extend(tmpregion,gregion)
			
 
				       if (!newVal) {
			
 
				         this.region = tmpregion
			
 
				       }
			
@@ -62,6 +79,15 @@ export default {
 
				       }
			
 
				     }
			
 
				   },
			
 
				+  methods:{
			
 
				+    handleItem(item){
			
 
				+      this.$bus.$emit('ifrMessage',{
			
 
				+        events:'flyToPano',
			
 
				+        data:item
			
 
				+      })
			
 
				+      this.$emit('closeSearch')
			
 
				+    }
			
 
				+  }
			
 
				 }
			
 
				 </script>
			
 
				 
			
@@ -131,6 +157,7 @@ export default {
 
				           height: 35;
			
 
				           width: 80%;
			
 
				           margin-left: 10px;
			
 
				+          color: #fff;
			
 
				         }
			
 
				         >img{
			
 
				           width: 20px;
			
--- a/src/pages/scene/aside.vue
+++ b/src/pages/scene/aside.vue
@@ -3,7 +3,7 @@
 
				     <div class="shoulacon brightness">
			
 
				       <div class="cadcon">
			
 
				         <div class="cadmap" @click="openMap">
			
 
				-          <component :cls="cp" @currentPano="data=>{currentPano=data}" :currentPanoid="currentPanoid" :data="panodata[$route.params.type]" :is="cp"/>
			
 
				+          <component :cls="cp" :currentPanoid="currentPanoid" :currentPano="currentPano" :data="booth" :is="cp"/>
			
 
				         </div>
			
 
				         <div class="cadname">
			
 
				           <img :src="require(`@/assets/images/project/icon/location_${theme}.png`)" alt="">
			
@@ -16,7 +16,7 @@
 
				         <span>快速导览</span>
			
 
				       </div>
			
 
				       <ul>
			
 
				-        <li @click="$router.push({params:{type:item.id}})" :class="{activeTheme:item.id == $route.params.type}" v-for="(item,i) in themes" :key="i">
			
 
				+        <li @click="$router.push({params:{type:item.id,isjump:'yes'}})" :class="{activeTheme:item.id == $route.params.type}" v-for="(item,i) in themes" :key="i">
			
 
				           <img :src="require(`@/assets/images/project/list_${item.id}.jpg`)" alt="">
			
 
				           <span class="text" :title="item.desc">{{item.desc}}</span>
			
 
				           <span class="tag">{{item.name}}</span>
			
@@ -32,7 +32,7 @@
 
				       <showmap class="showmap"  @click.stop.native @close="showMap=false">
			
 
				         <div slot="body" class="vmap">
			
 
				           <p>{{hoverName}}</p>
			
 
				-          <component :cls="cp+'_big'" @hoverPano="handleHover" :currentPanoid="currentPanoid" :data="panodata[$route.params.type]" :is="cp"/>
			
 
				+          <component :cls="cp+'_big'" @hoverPano="handleHover" :currentPanoid="currentPanoid" :currentPano="currentPano" :data="booth" :is="cp"/>
			
 
				         </div>
			
 
				       </showmap>
			
 
				     </div>
			
@@ -50,6 +50,8 @@ import ve from "@/components/mapsvg/e";
 
				 import showmap from "@/components/mapsvg/show";
			
 
				 import panodata from "@/components/mapsvg/pano.js";
			
 
				 
			
 
				+import {Booth} from "@/data/raw.js";
			
 
				+
			
 
				 
			
 
				 export default {
			
 
				   props:['currentPanoid'],
			
@@ -72,8 +74,8 @@ export default {
 
				       isShow:true,
			
 
				       panodata,
			
 
				       showMap:false,
			
 
				-      currentPano:{},
			
 
				-      hoverName:''
			
 
				+      hoverName:'',
			
 
				+      booth:Booth
			
 
				     }
			
 
				   },
			
 
				   computed:{
			
@@ -82,6 +84,9 @@ export default {
 
				     },
			
 
				     currentItem(){
			
 
				       return (this.themes.find(item=>item.id==this.theme));
			
 
				+    },
			
 
				+    currentPano(){
			
 
				+      return Booth.find(item=>item.panoId==this.currentPanoid) || {}
			
 
				     }
			
 
				   },
			
 
				   watch:{
			
@@ -166,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);
			
--- a/src/pages/scene/components/daka.vue
+++ b/src/pages/scene/components/daka.vue
@@ -47,7 +47,6 @@ export default {
 
				     daka(){
			
 
				       postdaka(res=>{
			
 
				         this.$showTips({content:res.msg})
			
 
				-        console.log(res);
			
 
				       })
			
 
				     },
			
 
				     getdakaList(){
			
--- a/src/pages/scene/components/qrcode.vue
+++ b/src/pages/scene/components/qrcode.vue
@@ -11,8 +11,8 @@
 
				       <h3>扫描二维码，手机观展</h3>
			
 
				       <div class="ul">
			
 
				         <div class="li">
			
 
				-          <p v-if="!currentPano.name" v-html="currentPano.name"></p>
			
 
				-          <div class="xiala" v-else>
			
 
				+          <p v-html="currentPano.name || ''"></p>
			
 
				+          <!-- <div class="xiala" v-else>
			
 
				             <span @click="isShowUl=!isShowUl">
			
 
				               {{currentPano.name}}
			
 
				               <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="">
			
@@ -22,16 +22,16 @@
 
				                 四川省返乡创业
			
 
				               </li>
			
 
				             </ul>
			
 
				-          </div>
			
 
				+          </div> -->
			
 
				 
			
 
				           <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
			
 
				-          <div class="download">下载二维码</div>
			
 
				+          <div @click="download" class="download">下载二维码</div>
			
 
				         </div>
			
 
				 
			
 
				         <div class="li">
			
 
				           <p v-html="currentItem.name"></p>
			
 
				           <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
			
 
				-          <div class="download">下载二维码</div>
			
 
				+          <div @click="download" class="download">下载二维码</div>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
@@ -46,6 +46,15 @@ export default {
 
				       isShowUl:false
			
 
				     };
			
 
				   },
			
 
				+  methods:{
			
 
				+    download(){
			
 
				+      let elink = document.createElement("a");
			
 
				+      elink.href = require(`@/assets/images/project/qrcode.jpg`);
			
 
				+      elink.download = `qecode.png`;
			
 
				+      elink.click();
			
 
				+      document.body.removeChild(elink);
			
 
				+    }
			
 
				+  }
			
 
				 };
			
 
				 </script>
			
 
				 
			
--- a/src/pages/scene/index.vue
+++ b/src/pages/scene/index.vue
@@ -1,6 +1,6 @@
 
				 <template>
			
 
				   <div :class="`theme${theme}`" class="scene-body">
			
 
				-    <div class="scene-con" v-show="showAll">
			
 
				+    <div class="scene-con" :class="{showscene:showAll}">
			
 
				       <vside
			
 
				         @currentPano="
			
 
				           (data) => {
			
@@ -13,7 +13,7 @@
 
				       <vmenu :tourStatus="tourStatus" @opencp="handlecp" />
			
 
				       <scene :tourStatus="tourStatus" v-if="showScene" />
			
 
				       <div class="vright">
			
 
				-        <vsearch />
			
 
				+        <vsearch :currentPanoid="currentPanoid" />
			
 
				         <div class="vfull" @click="handleFull">
			
 
				           <img
			
 
				             :src="
			
@@ -64,6 +64,10 @@ import qrcode from "./components/qrcode.vue";
 
				 import scene from "./scene.vue";
			
 
				 import vhotspot from "@/components/hotspot/index.vue";
			
 
				 
			
 
				+import {region} from "@/data/raw.js";
			
 
				+
			
 
				+
			
 
				+
			
 
				 let exitFullscreen = function() {
			
 
				   document.exitFullscreen
			
 
				     ? document.exitFullscreen()
			
@@ -107,6 +111,7 @@ export default {
 
				       isFull: false,
			
 
				       hotspots: [],
			
 
				       hotspot: "",
			
 
				+      currentTheme:''
			
 
				     };
			
 
				   },
			
 
				   computed: {
			
@@ -115,6 +120,14 @@ export default {
 
				     },
			
 
				   },
			
 
				 
			
 
				+  watch:{
			
 
				+    currentTheme(newVal){
			
 
				+      if (newVal) {
			
 
				+        this.$router.push({params:{type:newVal.id,isjump:'none'}})
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+
			
 
				   mounted() {
			
 
				     this.$showLoading();
			
 
				     this.$nextTick(() => {
			
@@ -123,18 +136,20 @@ export default {
 
				           let data = res.data.data;
			
 
				           if (res.data.source === "showAll") {
			
 
				             this.showAll = true;
			
 
				-            setTimeout(() => {
			
 
				-              this.$hideLoading();
			
 
				-            }, 500);
			
 
				+            this.$hideLoading();
			
 
				           }
			
 
				 
			
 
				           if (res.data.source === "onplayStatus") {
			
 
				-            console.log(data.tourIsPlaying);
			
 
				             this.tourStatus = data.tourIsPlaying;
			
 
				           }
			
 
				 
			
 
				           if (res.data.source === "flying.ended") {
			
 
				             this.currentPanoid = data;
			
 
				+            this.currentTheme = region.find(item=>{
			
 
				+              if (item.spread.indexOf(Number(this.currentPanoid))>-1) {
			
 
				+                return item
			
 
				+              }
			
 
				+            })
			
 
				           }
			
 
				 
			
 
				           if (res.data.source === "openHotspot") {
			
@@ -238,5 +253,9 @@ export default {
 
				       width: 100%;
			
 
				     }
			
 
				   }
			
 
				+
			
 
				+   .showscene{
			
 
				+    opacity: 1;
			
 
				+  }
			
 
				 }
			
 
				 </style>
			
--- a/src/pages/scene/scene.vue
+++ b/src/pages/scene/scene.vue
@@ -2,6 +2,7 @@
 
				   <div class="scene-body">
			
 
				     <iframe
			
 
				       ref="ifr"
			
 
				+      :key="viewId"
			
 
				       :src="`scene.html?m=1079${firstView[viewId]}`"
			
 
				       allowfullscreen="true"
			
 
				       frameborder="0"
			
@@ -10,16 +11,18 @@
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				+import {region} from "@/data/raw.js";
			
 
				+let firstView =  {}
			
 
				+region.forEach(item=>{
			
 
				+  let {x,y,z,w} = item.firstView.panoQuaternion
			
 
				+  firstView[item.id] = `&firstView=pano:${item.firstView.panoId},qua:${x+', '+y+', '+z+', '+w}`
			
 
				+})
			
 
				+
			
 
				 export default {
			
 
				   props: ["tourStatus"],
			
 
				   data(){
			
 
				     return {
			
 
				-      firstView: {
			
 
				-        xuting:
			
 
				-          "&firstView=pano:0,qua:-0.001489144851378805,0.8167267402741333,0.002107772549575186,0.5770188587943806",
			
 
				-        e:
			
 
				-          "&firstView=pano:30,qua:0.028523630856794317, 0.953183703881663, -0.09519870492067249, 0.2855948602103702",
			
 
				-      },
			
 
				+      firstView,
			
 
				       viewId:this.$route.params.type
			
 
				     }
			
 
				   },
			
@@ -27,51 +30,28 @@ export default {
 
				     let ifrWindow = this.$refs.ifr.contentWindow
			
 
				     this.$bus.$on('ifrMessage',(data)=>{
			
 
				       if (data.events=='flyToPano') {
			
 
				-          let { x, y, z, w } = data.data.quaternion
			
 
				-          ifrWindow.player.flyToPano({
			
 
				-            pano: ifrWindow.player.model.panos.index[data.data.id],
			
 
				+          let { x, y, z, w } = data.data.panoQuaternion
			
 
				+          ifrWindow.player.blackToPano({
			
 
				+            pano: ifrWindow.player.model.panos.index[data.data.panoId],
			
 
				             quaternion: new ifrWindow.THREE.Quaternion(x, y, z, w),
			
 
				           });
			
 
				       }
			
 
				 
			
 
				       if (data.events=='toggleTour') {
			
 
				-        console.log(ifrWindow[data.data]);
			
 
				         ifrWindow[data.data]()
			
 
				       }
			
 
				     })
			
 
				   },
			
 
				   watch: {
			
 
				     theme(newVal) {
			
 
				-      if (newVal == "xuting") {
			
 
				-        this.$refs.ifr.contentWindow.postMessage(
			
 
				-          {
			
 
				-            source: "changeExhition",
			
 
				-            data: {
			
 
				-              quat: [
			
 
				-                -0.001489144851378805,
			
 
				-                0.8167267402741333,
			
 
				-                0.002107772549575186,
			
 
				-                0.5770188587943806,
			
 
				-              ],
			
 
				-              index: 0,
			
 
				-            },
			
 
				-          },
			
 
				-          "*"
			
 
				-        );
			
 
				-      }
			
 
				-
			
 
				-      if (newVal == "e") {
			
 
				+      let currentRegion = region.find(item=>item.id==newVal)
			
 
				+      if (this.$route.params.isjump=='yes') {
			
 
				         this.$refs.ifr.contentWindow.postMessage(
			
 
				           {
			
 
				             source: "changeExhition",
			
 
				             data: {
			
 
				-              quat: [
			
 
				-                0.028523630856794317,
			
 
				-                0.953183703881663,
			
 
				-                -0.09519870492067249,
			
 
				-                0.2855948602103702,
			
 
				-              ],
			
 
				-              index: 30,
			
 
				+              quat: currentRegion.firstView.panoQuaternion,
			
 
				+              index: currentRegion.firstView.panoId,
			
 
				             },
			
 
				           },
			
 
				           "*"
			
--- a/src/pages/scene/search/index.vue
+++ b/src/pages/scene/search/index.vue
@@ -1,35 +1,33 @@
 
				 <template>
			
 
				-  <div class="vsearch">
			
 
				+  <div class="vsearch" v-clickoutside="handleOutside">
			
 
				     <div class="vinput" @click.stop @keydown.stop @touchstart.stop>
			
 
				-      <input @focus="isShow=true" @blur="isShow=false" type="text" placeholder="请输入关键字…" v-model="key">
			
 
				+      <input @click="isShow=true" @focus="isShow=true" type="text" placeholder="请输入关键字…" v-model="key">
			
 
				       <img :src="require(`@/assets/images/project/icon/search.png`)" alt="">
			
 
				     </div>
			
 
				-    <div class="cpylist" v-show="isShow">
			
 
				+    <div class="cpylist" :class="{listactive:isShow}">
			
 
				       <p class="btmdashline">参展项目及企业</p>
			
 
				         <ul v-if="region.length>0">
			
 
				-          <li v-for="(item,i) in region" :key="i">
			
 
				-            <!-- <p>{{item.name}}</p> -->
			
 
				-            <ul>
			
 
				-              <li class="textActive" v-for="(sub,idx) in item.company" :key="idx">
			
 
				-                <span>{{sub.name}}</span>
			
 
				-              </li>
			
 
				-            </ul>
			
 
				+          <li class="textActive" v-for="(item,i) in region" :key="i">
			
 
				+            <p @click.stop="handleItem(item)">{{item.name}}</p>
			
 
				           </li>
			
 
				         </ul>
			
 
				         <ul v-else>
			
 
				-          <li>暂无数据</li>
			
 
				+          <li>未搜索到该项目</li>
			
 
				         </ul>
			
 
				       </div>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import {region} from '@/data/region'
			
 
				+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,region)
			
 
				+    this.u_extend(arr,fixBooth)
			
 
				     return {
			
 
				       key:'',
			
 
				       region:arr,
			
@@ -37,26 +35,36 @@ export default {
 
				     }
			
 
				   },
			
 
				   watch:{
			
 
				+    currentPanoid(){
			
 
				+      this.isShow=false
			
 
				+    },
			
 
				     key(newVal){
			
 
				      let tmpregion = []
			
 
				-      this.u_extend(tmpregion,region)
			
 
				+      this.u_extend(tmpregion,fixBooth)
			
 
				       if (!newVal) {
			
 
				         this.region = tmpregion
			
 
				       }
			
 
				       else{
			
 
				         this.region = tmpregion.filter(item=>{
			
 
				-          item.company = item.company.filter(sub=>{
			
 
				-            if (sub.name.indexOf(newVal)>-1) {
			
 
				-              return sub
			
 
				-            }
			
 
				-          })
			
 
				-          if (item.company.length>0) {
			
 
				+          if (item.name.indexOf(newVal)>-1) {
			
 
				             return item
			
 
				           }
			
 
				         })
			
 
				       }
			
 
				     }
			
 
				   },
			
 
				+  methods:{
			
 
				+    handleOutside(){
			
 
				+      this.isShow = false
			
 
				+    },
			
 
				+    handleItem(item){
			
 
				+      this.$bus.$emit('ifrMessage',{
			
 
				+        events:'flyToPano',
			
 
				+        data:item
			
 
				+      })
			
 
				+      this.handleOutside()
			
 
				+    }
			
 
				+  },
			
 
				   mounted(){
			
 
				   }
			
 
				 }
			
@@ -82,6 +90,7 @@ export default {
 
				 
			
 
				 .vsearch{
			
 
				   width: 300px;
			
 
				+  color: #fff;
			
 
				   .vinput{
			
 
				     display: flex;
			
 
				     justify-content: space-between;
			
@@ -93,6 +102,7 @@ export default {
 
				     >input{
			
 
				       line-height: 35px;
			
 
				       height: 35;
			
 
				+      color: #fff;
			
 
				       width: 80%;
			
 
				     }
			
 
				     >img{
			
@@ -104,7 +114,10 @@ export default {
 
				     margin-top: 8px;
			
 
				     background: rgba(0, 0, 0, 0.5);
			
 
				     border-radius: 20px;
			
 
				-    padding: 25px 18px 18px;
			
 
				+    padding: 0;
			
 
				+    max-height: 0;
			
 
				+    overflow: hidden;
			
 
				+    transition: all ease .3s;
			
 
				     >p{
			
 
				       font-size: 18px;
			
 
				       font-weight: bold;
			
@@ -128,5 +141,9 @@ export default {
 
				        }
			
 
				     }
			
 
				   }
			
 
				+  .listactive{
			
 
				+    padding: 25px 18px 18px;
			
 
				+    max-height: 100vh;
			
 
				+  }
			
 
				 }
			
 
				 </style>
			
--- a/src/pages/scenePage/index.vue
+++ b/src/pages/scenePage/index.vue
@@ -126,7 +126,6 @@ export default {
 
				         this.getHotSpotList();
			
 
				         //监听导览状态
			
 
				         window.player.on("onplayStatus", (data) => {
			
 
				-          console.log(data);
			
 
				           window.parent.postMessage(
			
 
				             {
			
 
				               source: "onplayStatus",
			
@@ -176,9 +175,10 @@ export default {
 
				         if (Object.prototype.toString.call(res.data) == "[object Object]") {
			
 
				           let data = res.data.data;
			
 
				           if (res.data.source === "changeExhition") {
			
 
				+            let { x, y, z, w } = data.quat
			
 
				             window.player.blackToPano({
			
 
				               pano: window.player.model.panos.index[data.index],
			
 
				-              quaternion: new THREE.Quaternion(...data.quat),
			
 
				+              quaternion: new window.THREE.Quaternion(x, y, z, w),
			
 
				             });
			
 
				           }
			
 
				 
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,7 +21,7 @@ const routes = [
 
				     component: () => import(`../pages/enter/index.vue`)
			
 
				   },
			
 
				   {
			
 
				-    path: '/scene/:type',
			
 
				+    path: '/scene/:type/:isjump',
			
 
				     name: 'scene',
			
 
				     component: () => import(`../pages/scene/index.vue`)
			
 
				   },
			
--- a/src/router/mobile.js
+++ b/src/router/mobile.js
@@ -21,7 +21,7 @@ const routes = [
 
				     component: () => import(`../pages/enter/mobile.vue`)
			
 
				   },
			
 
				   {
			
 
				-    path: '/scene/:type',
			
 
				+    path: '/scene/:type/:isjump',
			
 
				     name: 'scene',
			
 
				     component: () => import(`../pages/mobilescene/index.vue`)
			
 
				   },