Home Explore Help
Register Sign In
chenzhiguang
/
yangshi_cloudExbition
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'master' of http://192.168.0.115:3000/chenzhiguang/yangshi_cloudExbition

xzw 3 years ago
parent
03bf7eec2c e6a6adc7a4
commit
d8769078b1
23 changed files with 660 additions and 665 deletions
Split View Show Diff Stats
  1. 1 1
      public/mobile.html
  2. 1 1
      public/model/assets/main/index.js
  3. 1 1
      public/model/index.html
  4. 1 1
      public/model/src/settings.json
  5. BIN
      src/assets/images/mobile/mobile_units.png
  6. BIN
      src/assets/images/project/mobile_units.png
  7. BIN
      src/assets/images/project/pc_units.png
  8. 1 0
      src/assets/style/public.less
  9. 102 108
      src/components/hotspot/iframe.vue
  10. 36 80
      src/components/hotspot/image.vue
  11. 2 2
      src/components/hotspot/index.vue
  12. 50 124
      src/components/hotspot/model.vue
  13. 157 176
      src/components/hotspot/video.vue
  14. 23 7
      src/components/mapsvg/a.vue
  15. 23 7
      src/components/mapsvg/b.vue
  16. 23 7
      src/components/mapsvg/c.vue
  17. 23 7
      src/components/mapsvg/d.vue
  18. 23 6
      src/components/mapsvg/e.vue
  19. 23 6
      src/components/mapsvg/xuting.vue
  20. 2 2
      src/pages/mobilescene/index.vue
  21. 3 4
      src/pages/mobilescene/menu.vue
  22. 126 113
      src/pages/mobilescene/search/index.vue
  23. 39 12
      src/pages/scene/search/index.vue

+ 1 - 1
public/mobile.html
View File 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="zn">
 
   <head>
 
     <meta charset="utf-8">
 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

File diff suppressed because it is too large
+ 1 - 1
public/model/assets/main/index.js


+ 1 - 1
public/model/index.html
View File 

@@ -3,7 +3,7 @@
 
 <head>
 
   <meta charset="utf-8">
 
 
-  <title>CloudExhibition</title>
 
+  <title>Cocos Creator | CloudExhibition</title>
 
 
   <!--http://www.html5rocks.com/en/mobile/mobifying/-->
 
   <meta name="viewport"

File diff suppressed because it is too large
+ 1 - 1
public/model/src/settings.json


BIN
src/assets/images/mobile/mobile_units.png
View File


BIN
src/assets/images/project/mobile_units.png
View File


BIN
src/assets/images/project/pc_units.png
View File


+ 1 - 0
src/assets/style/public.less
View File 

@@ -2,6 +2,7 @@
 
 
 *{
 
   font-family: 'SY-medium';
 
+  -webkit-tap-highlight-color: transparent;
 
 }
 
 
 @theme:#BC1915;

+ 102 - 108
src/components/hotspot/iframe.vue
View File 

@@ -19,7 +19,7 @@
 
         <div class="imgmain">
 
           <iframe :src="hotspot.iframe[active]" frameborder="0"></iframe>
 
         </div>
 
-        <div class="pagna" v-if="hotspot.iframe.length>1">
 
+        <div class="pagna" v-if="hotspot.iframe.length > 1">
 
           <span>{{ active + 1 }}</span>
 
           /
 
           <span>{{ hotspot.iframe.length }}</span>
 
@@ -29,46 +29,46 @@
 
     </div>
 
   </div>
 
 
-    <div v-else class="mbhotspot">
 
-    <img
 
-      class="vhotspot"
 
-      :src="require(`@/assets/images/mobile/kuangti/hotspot_${theme}.png`)"
 
-      alt=""
 
-    />
 
-    <div class="brightness"></div>
 
+  <div v-else class="mbhotspot">
 
     <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="{ single: hotspot.iframe.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.iframe"
 
-            :key="index"
 
-          >
 
-            <div class="sl-item">
 
-              <iframe :src="hotspot.iframe[active]" frameborder="0"></iframe>
 
-            </div>
 
-          </div>
 
-        </ul>
 
-        <div
 
-          class="swiper-pagination pagination"
 
+    <div class="mbhcon">
 
+      <div class="img-con">
 
+        <img
 
+          class="aa"
 
+          v-if="hotspot.iframe.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
 
+                :src="hotspot.iframe[active]"
 
+                frameborder="0"
 
+              ></iframe>
 
+        </div>
 
+        <img
 
+          class="aa"
 
           v-if="hotspot.iframe.length > 1"
 
-          slot="pagination"
 
-        ></div>
 
+          :src="require('@/assets/images/project/icon/hotspot_r.png')"
 
+          alt=""
 
+          @click="handlePage('next')"
 
+        />
 
       </div>
 
 
-      <div v-if="hotspot.content" class="desc">
 
+      <div class="desc">
 
+        <div class="title">{{ hotspot.title }}</div>
 
         <div v-html="handleContent(hotspot.content, 14)"></div>
 
       </div>
 
     </div>
 
   </div>
 
+
 
 </template>
 
 
 <script>
 
@@ -76,7 +76,6 @@ import { directive } from "vue-awesome-swiper";
 
 // import style (<= Swiper 5.x)
 
 import "swiper/css/swiper.css";
 
 
-
 
 export default {
 
   directives: {
 
     swiper: directive,
 
@@ -212,7 +211,7 @@ export default {
 
         color: rgba(255, 255, 255, 0.8);
 
       }
 
     }
 
-    .desc{
 
+    .desc {
 
       position: absolute;
 
       bottom: 70px;
 
       transform: translateX(-50%);
 
@@ -221,26 +220,14 @@ export default {
 
     }
 
   }
 
 }
 
-
 
 .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%, 91% 98%, 1% 98%);
 
-  }
 
+  width: 100%;
 
+  height: 100%;
 
+  position: fixed;
 
+  background: #000;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 999999;
 
   .close {
 
     position: absolute;
 
     top: 26px;
 
@@ -248,83 +235,90 @@ export default {
 
     width: 14px;
 
     z-index: 1000;
 
   }
 
-  .title {
 
-    position: absolute;
 
-    top: 16px;
 
-    left: 32px;
 
-    display: inline-block;
 
-    font-size: 12px;
 
-    margin: 0px auto;
 
-    width: 50vw;
 
-  }
 
   .mbhcon {
 
     position: absolute;
 
-    top: 0;
 
+    top: 50%;
 
     width: 100%;
 
-    left: 0;
 
-
 
-    .swcon {
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+    height: 100%;
 
+    .img-con {
 
+      display: flex;
 
+      height: 100%;
 
+      align-items: center;
 
+      justify-content: space-between;
 
       position: relative;
 
-      margin: 60px auto 0;
 
-      width: 92%;
 
-      .swiper-wrapper {
 
-        padding: 0;
 
-        .swiper-slide {
 
+      overflow: hidden;
 
+      .imgmain {
 
+        width: 100%;
 
+        height: auto;
 
+        min-height: 100%;
 
+        display: flex;
 
+        align-items: center;
 
+        iframe {
 
+          cursor: pointer;
 
+          height: 100vh;
 
           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;
 
-            @wh:70vw;
 
-            > iframe {
 
-              margin: 0 auto;
 
-              width: @wh;
 
-              height: @wh*1.76;
 
-            }
 
-          }
 
         }
 
       }
 
-
 
-      .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 {
 
+      position: absolute;
 
+      z-index: 99999;
 
+      bottom: 8px;
 
+      left: 50%;
 
+      width: 100%;
 
+      padding: 2% 5%;
 
+      transform: translateX(-50%);
 
+      margin: 0;
 
       text-align: justify;
 
-      width: 85%;
 
-      margin: 10px auto 0;
 
-      p {
 
+      min-height: 10vh;
 
+      max-height: 34vh;
 
+      background: rgba(0, 0, 0, 0.5);
 
+      .title {
 
+        width: 100%;
 
+        display: inline-block;
 
         font-size: 16px;
 
-        font-weight: bold;
 
-      }
 
-      div {
 
-        font-size: 14px;
 
-        margin-top: 10px;
 
-        line-height: 1.5;
 
-        max-height: 50vh;
 
-        overflow-y: auto;
 
+        margin-bottom: 10px;
 
       }
 
     }
 
   }
 
 
-  .single {
 
-    top: 46%;
 
-    transform: translateY(-50%);
 
+  .fullcon {
 
+    width: 100%;
 
+    height: 100%;
 
+    .img-con {
 
+      height: 100%;
 
+      .imgmain {
 
+        width: 100%;
 
+        height: auto;
 
+        min-height: 100%;
 
+        display: flex;
 
+        align-items: center;
 
+      }
 
+    }
 
   }
 
 }
 
 </style>
 
-

+ 36 - 80
src/components/hotspot/image.vue
View File 

@@ -50,18 +50,11 @@
 
 
   <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">
 
@@ -83,7 +76,8 @@
 
           @click="handlePage('next')"
 
         />
 
       </div>
 
-      <div v-if="hotspot.content" class="desc">
 
+      <div class="desc">
 
+        <div class="title" v-html="hotspot.title"></div>
 
         <div v-html="handleContent(hotspot.contents[active], 14)"></div>
 
       </div>
 
     </div>
 
@@ -148,8 +142,7 @@ export default {
 
     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
 
+      startScale: this.isMobile?1: (!this.hotspot.content ? 0.8:1)
 
     });
 
     this.panzoom.pan(0,50)
 
     elem.addEventListener("wheel", this.panzoom.zoomWithWheel);
 
@@ -299,24 +292,13 @@ export default {
 
 }
 
 
 .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%);
 
-  }
 
+  width: 100%;
 
+  height: 100%;
 
+  position: fixed;
 
+  background: #000;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 999999;
 
   .close {
 
     position: absolute;
 
     top: 26px;
 
@@ -324,15 +306,6 @@ export default {
 
     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%;
 
@@ -340,30 +313,19 @@ export default {
 
     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%;
 
+      height: 100%;
 
       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;
 
+        height: auto;
 
+        min-height: 100%;
 
+        display: flex;
 
+        align-items: center;
 
         img {
 
           cursor: pointer;
 
           max-width: 100%;
 
@@ -392,23 +354,25 @@ export default {
 
         }
 
       }
 
     }
 
-    .desc {
 
-      text-align: justify;
 
+    .desc{
 
+      overflow-y: auto;
 
+      position: absolute;
 
+      z-index: 99999;
 
+      bottom: 8px;
 
+      left: 50%;
 
       width: 100%;
 
-      height: 22%;
 
-      padding: 0 14px;
 
-      margin: 10px auto 0;
 
-      p {
 
+      padding: 2% 5%;
 
+      transform: translateX(-50%);
 
+      margin: 0;
 
+      text-align: justify;
 
+      min-height: 10vh;
 
+      max-height: 34vh;
 
+      background: rgba(0, 0, 0, 0.5);
 
+      .title{
 
+        width: 100%;
 
+        display: inline-block;
 
         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;
 
+        margin-bottom: 10px;
 
       }
 
     }
 
   }
 
@@ -416,22 +380,14 @@ export default {
 
   .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%;
 
+        height: auto;
 
+        min-height: 100%;
 
+        display: flex;
 
+        align-items: center;
 
       }
 
     }
 
   }

+ 2 - 2
src/components/hotspot/index.vue
View File 

@@ -38,7 +38,7 @@ export default {
 
     }
 
   },
 
   mounted(){
 
-    console.log(this.hotspot);
 
+    // console.log(this.hotspot);
 
     iconArr.forEach(item => {
 
       if (this.hotspot[item.key]) {
 
         this.active = !this.active ? item.id : this.active;
 
@@ -62,7 +62,7 @@ export default {
 
 <style lang="less" scoped>
 
 .hotspotcon{
 
   position: fixed;
 
-  z-index: 999;
 
+  z-index: 9999;
 
   width: 100%;
 
   height: 100%;
 
   left: 0;

+ 50 - 124
src/components/hotspot/model.vue
View File 

@@ -25,7 +25,12 @@
 
             @click="handlePage('prev')"
 
           />
 
           <div class="imgmain" :class="{ bigImg: !hotspot.content }">
 
-            <iframe :key="active" allowfullscreen frameborder="0" :src="hotspot.model[active]"></iframe>
 
+            <iframe
 
+              :key="active"
 
+              allowfullscreen
 
+              frameborder="0"
 
+              :src="hotspot.model[active]"
 
+            ></iframe>
 
           </div>
 
           <img
 
             class="aa"
 
@@ -50,20 +55,12 @@
 
 
   <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="mbhcon">
 
       <div class="img-con">
 
         <img
 
           class="aa"
 
@@ -73,7 +70,12 @@
 
           @click="handlePage('prev')"
 
         />
 
         <div class="imgmain" :class="{ bigImg: !hotspot.content }">
 
-            <iframe :key="active" allowfullscreen frameborder="0" :src="hotspot.model[active]"></iframe>
 
+          <iframe
 
+            :key="active"
 
+            allowfullscreen
 
+            frameborder="0"
 
+            :src="hotspot.model[active]"
 
+          ></iframe>
 
         </div>
 
         <img
 
           class="aa"
 
@@ -83,34 +85,26 @@
 
           @click="handlePage('next')"
 
         />
 
       </div>
 
-      <div v-if="hotspot.content" class="desc">
 
-        <div v-html="handleContent(hotspot.contents[active], 14)"></div>
 
+
 
+      <div class="desc">
 
+        <div class="title">{{ hotspot.title }}</div>
 
+        <div v-html="handleContent(hotspot.content, 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;
 
@@ -125,36 +119,6 @@ export default {
 
       }
 
     },
 
   },
 
-  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>
 
 
@@ -226,7 +190,7 @@ export default {
 
           overflow-y: auto;
 
           position: relative;
 
           margin: 0 auto;
 
-          >iframe {
 
+          > iframe {
 
             width: 100%;
 
             cursor: pointer;
 
             height: 60vh;
 
@@ -288,26 +252,14 @@ export default {
 
     }
 
   }
 
 }
 
-
 
 .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%);
 
-  }
 
+  width: 100%;
 
+  height: 100%;
 
+  position: fixed;
 
+  background: #000;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 999999;
 
   .close {
 
     position: absolute;
 
     top: 26px;
 
@@ -315,15 +267,6 @@ export default {
 
     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%;
 
@@ -331,32 +274,22 @@ export default {
 
     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%;
 
+      height: 100%;
 
       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;
 
+        height: auto;
 
+        min-height: 100%;
 
+        display: flex;
 
+        align-items: center;
 
         iframe {
 
           cursor: pointer;
 
+          height: 40vh;
 
           width: 100%;
 
         }
 
       }
 
@@ -384,22 +317,23 @@ export default {
 
       }
 
     }
 
     .desc {
 
-      text-align: justify;
 
+      position: absolute;
 
+      z-index: 99999;
 
+      bottom: 8px;
 
+      left: 50%;
 
       width: 100%;
 
-      height: 22%;
 
-      padding: 0 14px;
 
-      margin: 10px auto 0;
 
-      p {
 
+      padding: 2% 5%;
 
+      transform: translateX(-50%);
 
+      margin: 0;
 
+      text-align: justify;
 
+      min-height: 10vh;
 
+      max-height: 34vh;
 
+      background: rgba(0, 0, 0, 0.5);
 
+      .title {
 
+        width: 100%;
 
+        display: inline-block;
 
         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;
 
+        margin-bottom: 10px;
 
       }
 
     }
 
   }
 
@@ -407,22 +341,14 @@ export default {
 
   .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%;
 
+        height: auto;
 
+        min-height: 100%;
 
+        display: flex;
 
+        align-items: center;
 
       }
 
     }
 
   }

+ 157 - 176
src/components/hotspot/video.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <div class="hotspot"  v-if="!isMobile">
 
+  <div class="hotspot" v-if="!isMobile">
 
     <img
 
       class="vhotspot"
 
       :src="require(`@/assets/images/project/kuangti/hotspot_${theme}.png`)"
 
@@ -25,7 +25,12 @@
 
             alt=""
 
           />
 
           <div class="imgmain">
 
-            <video controlslist="nodownload noremoteplayback" disablePictureInPicture controls autoplay>
 
+            <video
 
+              controlslist="nodownload noremoteplayback"
 
+              disablePictureInPicture
 
+              controls
 
+              autoplay
 
+            >
 
               <source :src="hotspot.video[active].url" type="video/mp4" />
 
             </video>
 
           </div>
 
@@ -49,39 +54,42 @@
 
 
   <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="mbhcon">
 
-     <div class="title">{{ hotspot.title }}</div>
 
-    <div class="swcon" v-swiper:mySwipervd="swiperOption">
 
-      <ul class="swiper-wrapper swiper-wrapper-n">
 
-        <div
 
-          class="swiper-slide"
 
-          v-for="(item, index) in hotspot.video"
 
-          :key="index"
 
-        >
 
-          <div class="sl-item">
 
-            <video controlslist="nodownload noremoteplayback" disablePictureInPicture controls autoplay>
 
-              <source :src="item.url" type="video/mp4" />
 
-            </video>
 
-          </div>
 
+      <div class="img-con">
 
+        <img
 
+          class="aa"
 
+          v-if="hotspot.video.length > 1"
 
+          :src="require('@/assets/images/project/icon/hotspot_l.png')"
 
+          alt=""
 
+          @click="handlePage('prev')"
 
+        />
 
+        <div class="imgmain" :class="{ bigImg: !hotspot.content }">
 
+          <video
 
+            controlslist="nodownload noremoteplayback"
 
+            disablePictureInPicture
 
+            controls
 
+            autoplay
 
+          >
 
+            <source :src="hotspot.video[active].url" type="video/mp4" />
 
+          </video>
 
         </div>
 
-      </ul>
 
-      <div class="swiper-pagination pagination" slot="pagination"></div>
 
-    </div>
 
-
 
+        <img
 
+          class="aa"
 
+          v-if="hotspot.video.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.content,14)"></div>
 
+      <div class="desc">
 
+        <div class="title">{{ hotspot.title }}</div>
 
+        <div v-html="handleContent(hotspot.content, 14)"></div>
 
       </div>
 
     </div>
 
   </div>
 
@@ -92,7 +100,6 @@ import { directive } from "vue-awesome-swiper";
 
 // import style (<= Swiper 5.x)
 
 import "swiper/css/swiper.css";
 
 
-
 
 export default {
 
   directives: {
 
     swiper: directive,
 
@@ -101,7 +108,6 @@ export default {
 
   data() {
 
     return {
 
       active: 0,
 
-      mbactive: 0,
 
     };
 
   },
 
   methods: {
 
@@ -122,26 +128,6 @@ export default {
 
       }
 
     },
 
   },
 
-   computed: {
 
-    swiperOption() {
 
-      let that = this;
 
-      return {
 
-        slidesPerView: "auto",
 
-        autoplay: false,
 
-        centeredSlides: true,
 
-        watchSlidesProgress: true,
 
-        loop: false,
 
-        pagination: {
 
-          el: ".swiper-pagination",
 
-        },
 
-        on: {
 
-          slideChangeTransitionEnd: function() {
 
-            that.mbactive = this.realIndex;
 
-          },
 
-        },
 
-      };
 
-    },
 
-  },
 
 };
 
 </script>
 
 
@@ -195,164 +181,159 @@ export default {
 
       z-index: 99;
 
       font-size: 20px;
 
     }
 
-.hotspotcon {
 
+    .hotspotcon {
 
       width: 90%;
 
       top: 50%;
 
       left: 50%;
 
       transform: translate(-50%, -50%);
 
       position: absolute;
 
-    .img-con {
 
-      display: flex;
 
-      width: 90%;
 
-      align-items: center;
 
-      justify-content: space-between;
 
-      position: relative;
 
-      top: 50%;
 
-      left: 50%;
 
-      transform: translate(-50%, -50%);
 
-      position: absolute;
 
-      .imgmain {
 
+      .img-con {
 
+        display: flex;
 
         width: 90%;
 
-        max-height: 76vh;
 
-        overflow-x: hidden;
 
-        overflow-y: auto;
 
-        margin: 0 auto;
 
+        align-items: center;
 
+        justify-content: space-between;
 
         position: relative;
 
-        video {
 
-          width: 89%;
 
+        top: 50%;
 
+        left: 50%;
 
+        transform: translate(-50%, -50%);
 
+        position: absolute;
 
+        .imgmain {
 
+          width: 100%;
 
+          max-height: 86vh;
 
+          overflow-x: hidden;
 
+          overflow-y: auto;
 
+          margin: 0 auto;
 
+          position: relative;
 
+          video {
 
+            width: 100%;
 
+          }
 
+        }
 
+        .aa {
 
+          width: 30px;
 
+          height: auto;
 
+          cursor: pointer;
 
+        }
 
+        .pagna {
 
+          position: absolute;
 
+          bottom: -40px;
 
+          left: 50%;
 
+          transform: translateX(-50%);
 
+          text-align: center;
 
+          z-index: 999;
 
+          font-size: 18px;
 
+          color: rgba(255, 255, 255, 0.8);
 
         }
 
       }
 
-      .aa {
 
-        width: 30px;
 
-        height: auto;
 
-        cursor: pointer;
 
-      }
 
-      .pagna {
 
-        position: absolute;
 
-        bottom: -40px;
 
-        left: 50%;
 
-        transform: translateX(-50%);
 
-        text-align: center;
 
-        z-index: 999;
 
-        font-size: 18px;
 
-        color: rgba(255, 255, 255, 0.8);
 
+      .desc {
 
+        width: 80%;
 
+        font-size: 16px;
 
+        text-align: left;
 
+        line-height: 1.8;
 
+        padding-right: 14px;
 
+        max-height: 120px;
 
+        margin: 20px auto 0;
 
+        overflow-y: auto;
 
       }
 
     }
 
-    .desc {
 
-      width: 80%;
 
-      font-size: 16px;
 
-      text-align: left;
 
-      line-height: 1.8;
 
-      padding-right: 14px;
 
-      max-height: 120px;
 
-      margin: 20px auto 0;
 
-      overflow-y: auto;
 
-    }
 
-  }
 
   }
 
 }
 
 
 .mbhotspot {
 
-  width: 96%;
 
-  margin: 60px auto 0;
 
-  position: relative;
 
-  .vhotspot {
 
-    width: 100%;
 
-    position: relative;
 
-    pointer-events: none;
 
-  }
 
-
 
-  .brightness {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: fixed;
 
+  background: #000;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 999999;
 
+  .close {
 
     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% 99%, 1% 99%);
 
-  }
 
-  .close{
 
-      position: absolute;
 
-      top: 26px;
 
-      right: 16px;
 
-      width: 14px;
 
-      z-index: 1000;
 
+    top: 26px;
 
+    right: 16px;
 
+    width: 14px;
 
+    z-index: 1000;
 
   }
 
   .mbhcon {
 
     position: absolute;
 
-    top: 0;
 
-    left: 0;
 
+    top: 50%;
 
     width: 100%;
 
-    .title {
 
-      position: absolute;
 
-      top: 14px;
 
-      left: 40px;
 
-      display: inline-block;
 
-      font-size: 16px;
 
-      margin: 0px auto;
 
-      width: 50vw;
 
-    }
 
-    .swcon {
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+    height: 100%;
 
+    .img-con {
 
+      display: flex;
 
+      height: 100%;
 
+      align-items: center;
 
+      justify-content: space-between;
 
       position: relative;
 
-      margin: 60px auto 0; 
-      width: 84%;
 
-      .swiper-wrapper {
 
-        height: 250px;
 
-        padding: 0;
 
-        .swiper-slide {
 
-          width: 100%;
 
-          transform-style: preserve-3d;
 
-          position: relative;
 
-          height: 100%;
 
-          margin: 0 auto;
 
-          transform: translate3d(0, 0, 0);
 
-          .sl-item {
 
-            position: absolute;
 
-            top: 0;
 
-            left: 50%;
 
-            height: 100%;
 
-            transform: translateX(-50%);
 
-            width: 100%;
 
-            overflow: hidden;
 
-            > video {
 
-              width: 100%;
 
-              transform: translateX(-50%);
 
-              position: absolute;
 
-              left: 50%;
 
-            }
 
-          }
 
+      overflow: hidden;
 
+      .imgmain {
 
+        width: 100%;
 
+        height: auto;
 
+        min-height: 100%;
 
+        display: flex;
 
+        align-items: center;
 
+        video {
 
+          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 {
 
+      position: absolute;
 
+      z-index: 99999;
 
+      bottom: 8px;
 
+      left: 50%;
 
+      width: 100%;
 
+      padding: 2% 5%;
 
+      transform: translateX(-50%);
 
+      margin: 0;
 
       text-align: justify;
 
-      width: 85%;
 
-      padding-right: 14px;
 
-      margin: 10px auto 0;
 
-      p {
 
+      min-height: 10vh;
 
+      max-height: 34vh;
 
+      background: rgba(0, 0, 0, 0.5);
 
+      .title {
 
+        width: 100%;
 
+        display: inline-block;
 
         font-size: 16px;
 
-        font-weight: bold;
 
+        margin-bottom: 10px;
 
       }
 
-      div {
 
-        font-size: 14px;
 
-        margin-top: 10px;
 
-        line-height: 1.5;
 
-        max-height: 50vh;
 
-        overflow-y: auto;
 
+    }
 
+  }
 
+
 
+  .fullcon {
 
+    width: 100%;
 
+    height: 100%;
 
+    .img-con {
 
+      height: 100%;
 
+      .imgmain {
 
+        width: 100%;
 
+        height: auto;
 
+        min-height: 100%;
 
+        display: flex;
 
+        align-items: center;
 
       }
 
     }
 
   }

+ 23 - 7
src/components/mapsvg/a.vue
View File 

@@ -418,31 +418,47 @@ export default {
 
 svg {
 
   width: 60%;
 
 }
 
-
 
 #point {
 
   > g {
 
     cursor: pointer;
 
     &.active {
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
+        fill: @color;
 
+        opacity: 1!important;
 
+      }
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
         fill: @color;
 
         opacity: 1!important;
 
       }
 
-      circle:first-of-type {
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
       }
 
     }
 
     
     &:hover{
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
+        fill: #fff;
 
+        opacity: 1!important;
 
+      }
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+        fill: @color;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
         fill: #fff;
 
         opacity: 1!important;
 
+
 
       }
 
-      circle:first-of-type {
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
         fill: @color;
 
       }
 
+
 
     }
 
   }
 
 }

+ 23 - 7
src/components/mapsvg/b.vue
View File 

@@ -346,31 +346,47 @@ export default {
 
 svg {
 
   width: 60%;
 
 }
 
-
 
 #point {
 
   > g {
 
     cursor: pointer;
 
     &.active {
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
+        fill: @color;
 
+        opacity: 1!important;
 
+      }
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
         fill: @color;
 
         opacity: 1!important;
 
       }
 
-      circle:first-of-type {
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
       }
 
     }
 
     
     &:hover{
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
+        fill: #fff;
 
+        opacity: 1!important;
 
+      }
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+        fill: @color;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
         fill: #fff;
 
         opacity: 1!important;
 
+
 
       }
 
-      circle:first-of-type {
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
         fill: @color;
 
       }
 
+
 
     }
 
   }
 
 }

+ 23 - 7
src/components/mapsvg/c.vue
View File 

@@ -328,31 +328,47 @@ export default {
 
 svg {
 
   width: 60%;
 
 }
 
-
 
 #point {
 
   > g {
 
     cursor: pointer;
 
     &.active {
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
+        fill: @color;
 
+        opacity: 1!important;
 
+      }
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
         fill: @color;
 
         opacity: 1!important;
 
       }
 
-      circle:first-of-type {
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
       }
 
     }
 
     
     &:hover{
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
+        fill: #fff;
 
+        opacity: 1!important;
 
+      }
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+        fill: @color;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
         fill: #fff;
 
         opacity: 1!important;
 
+
 
       }
 
-      circle:first-of-type {
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
         fill: @color;
 
       }
 
+
 
     }
 
   }
 
 }

+ 23 - 7
src/components/mapsvg/d.vue
View File 

@@ -321,31 +321,47 @@ export default {
 
 svg {
 
   width: 50%;
 
 }
 
-
 
 #point {
 
   > g {
 
     cursor: pointer;
 
     &.active {
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
+        fill: @color;
 
+        opacity: 1!important;
 
+      }
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
         fill: @color;
 
         opacity: 1!important;
 
       }
 
-      circle:first-of-type {
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
       }
 
     }
 
     
     &:hover{
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
+        fill: #fff;
 
+        opacity: 1!important;
 
+      }
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+        fill: @color;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
         fill: #fff;
 
         opacity: 1!important;
 
+
 
       }
 
-      circle:first-of-type {
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
         fill: @color;
 
       }
 
+
 
     }
 
   }
 
 }

+ 23 - 6
src/components/mapsvg/e.vue
View File 

@@ -414,26 +414,43 @@ svg {
 
   > g {
 
     cursor: pointer;
 
     &.active {
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
         fill: @color;
 
         opacity: 1!important;
 
       }
 
-      circle:first-of-type {
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
+        fill: @color;
 
+        opacity: 1!important;
 
+      }
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
       }
 
     }
 
     
     &:hover{
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
         fill: #fff;
 
         opacity: 1!important;
 
       }
 
-      circle:first-of-type {
 
+      circle:nth-child(odd) {
 
         opacity: 1!important;
 
         fill: @color;
 
       }
 
+
 
+      ellipse:nth-child(even) {
 
+        fill: #fff;
 
+        opacity: 1!important;
 
+
 
+      }
 
+      ellipse:nth-child(odd) {
 
+        opacity: 1!important;
 
+        fill: @color;
 
+      }
 
+
 
     }
 
   }
 
 }

+ 23 - 6
src/components/mapsvg/xuting.vue
View File 

@@ -276,26 +276,43 @@ export default {
 
   > g {
 
     cursor: pointer;
 
     &.active {
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
         fill: @color;
 
         opacity: 1!important;
 
       }
 
-      ellipse,circle:first-of-type {
 
+      circle:nth-child(odd) {
 
+        opacity: 1!important;
 
+      }
 
+
 
+      ellipse:nth-child(even) {
 
+        fill: @color;
 
+        opacity: 1!important;
 
+      }
 
+      ellipse:nth-child(odd) {
 
         opacity: 1!important;
 
       }
 
     }
 
     
     &:hover{
 
-      ellipse,
 
-      circle:last-of-type {
 
+      circle:nth-child(even) {
 
         fill: #fff;
 
         opacity: 1!important;
 
       }
 
-      circle:first-of-type {
 
+      circle:nth-child(odd) {
 
         opacity: 1!important;
 
         fill: @color;
 
       }
 
+
 
+      ellipse:nth-child(even) {
 
+        fill: #fff;
 
+        opacity: 1!important;
 
+
 
+      }
 
+      ellipse:nth-child(odd) {
 
+        opacity: 1!important;
 
+        fill: @color;
 
+      }
 
+
 
     }
 
   }
 
 }

+ 2 - 2
src/pages/mobilescene/index.vue
View File 

@@ -1,12 +1,12 @@
 
 <template>
 
   <div :class="`theme${theme}`" class="scene-body">
 
     <div class="scene-con" v-show="showAll">
 
-      <vbar :name="currentItem.name" @showSearch="showSearch=true" @openAside="showAside=true"></vbar>
 
+      <vbar :name="currentItem.name" @showSearch="showSearch=true" @openAside="showAside=!showAside"></vbar>
 
       <scene :tourStatus="tourStatus" v-if="showScene" />
 
       <vside v-show="!tourStatus&&showAside" @close="showAside=false" />
 
       <vmap :currentPano="currentPano" :booth="booth"/>
 
       <vmenu :tourStatus="tourStatus" @opencp="handlecp" />
 
-      <vsearch @closeSearch="showSearch=false" v-if="showSearch"/>
 
+      <vsearch :currentPanoid="currentPanoid" @closeSearch="showSearch=false" v-if="showSearch"/>
 
 
       <template v-if="false">
 
         <div class="vright">

+ 3 - 4
src/pages/mobilescene/menu.vue
View File 

@@ -156,10 +156,9 @@ export default {
 
     }
 
     .daolan {
 
       position: absolute;
 
-      top: 50%;
 
+      top: 52%;
 
       left: 50%;
 
       transform: translate(-50%, -50%);
 
-      width: 100%;
 
       text-align: center;
 
       > img {
 
         width: 20px;
 
@@ -169,12 +168,12 @@ export default {
 
   .stoptour {
 
     .daolan {
 
       position: absolute;
 
-      top: 50%;
 
+      top: 54%;
 
       left: 50%;
 
       transform: translate(-50%, -50%);
 
       text-align: center;
 
       > img {
 
-        width: 30px;
 
+        width: 24px;
 
       }
 
     }
 
   }

+ 126 - 113
src/pages/mobilescene/search/index.vue
View File 

@@ -1,98 +1,111 @@
 
 <template>
 
   <div class="vsearch" @click.stop @keydown.stop @touchstart.stop>
 
-    <img class="searchbg" :src="require(`@/assets/images/mobile/kuangti/daka_${theme}.png`)" alt="">
 
+    <img
 
+      class="searchbg"
 
+      :src="require(`@/assets/images/mobile/scene_bg.png`)"
 
+      alt=""
 
+    />
 
     <div class="brightness"></div>
 
     <div class="vinput">
 
-      <img @click="$emit('closeSearch')" :src="require(`@/assets/images/project/icon/jiantoul.png`)" alt="">
 
+      <img
 
+        @click="$emit('closeSearch')"
 
+        :src="require(`@/assets/images/project/icon/jiantoul.png`)"
 
+        alt=""
 
+      />
 
       <div>
 
-        <img :src="require(`@/assets/images/project/icon/search.png`)" alt="">
 
-        <input type="text" placeholder="请输入关键字…" v-model="key">
 
+        <img :src="require(`@/assets/images/project/icon/search.png`)" alt="" />
 
+        <input type="text" placeholder="请输入关键字…" v-model="key" />
 
       </div>
 
       <span>搜索</span>
 
     </div>
 
     <div class="cpylist">
 
-      <p>参展项目及企业</p>
 
-        <ul v-if="region.length>0">
 
-          <li v-for="(item,i) in region" :key="i">
 
-            <p>{{item.name}}</p>
 
-            <ul>
 
-              <li @click="handleItem(sub)" class="textActive" v-for="(sub,idx) in item.company" :key="idx">
 
-                {{sub.name}}
 
-              </li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
-        <ul v-else>
 
-          <li>未搜索到该项目</li>
 
-        </ul>
 
-      </div>
 
+      <p>参展项目</p>
 
+      <ul v-if="region.length > 0">
 
+        <li v-for="(item, i) in region" :key="i">
 
+          <p v-if="item.company.length>0">{{ item.name }} <span>{{item.desc}}</span></p>
 
+          <ul>
 
+            <li
 
+              @click="handleItem(sub)"
 
+              class="textActive"
 
+               :class="{active:currentPanoid==sub.panoId}"
 
+              v-for="(sub, idx) in item.company"
 
+              :key="idx"
 
+            >
 
+              {{ sub.name }}
 
+            </li>
 
+          </ul>
 
+        </li>
 
+      </ul>
 
+      <ul v-else>
 
+        <li>未搜索到该项目</li>
 
+      </ul>
 
+    </div>
 
   </div>
 
 </template>
 
 
 <script>
 
-import {Booth,region} from '@/data/raw'
 
+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)
 
+let gregion = region.map((item) => {
 
+  let tmp = [];
 
+  item.company.forEach((sub) => {
 
+    let ii = Booth.find((son) => son.id == sub);
 
     if (ii) {
 
-      tmp.push(ii)
 
+      tmp.push(ii);
 
     }
 
-  })
 
-  let tt = tmp.filter(item=>(item.mapId.indexOf('xt')<=-1))
 
+  });
 
+  let tt = tmp.filter((item) => item.mapId.indexOf("xt") <= -1);
 
 
-  item.company = tt
 
-  return item
 
-})
 
+  item.company = tt;
 
+  return item;
 
+});
 
 
 console.log(gregion);
 
 
-let arr = [] 
+let arr = [];
 
 
 export default {
 
-   data(){
 
-    this.u_extend(arr,gregion)
 
+  props:['currentPanoid'],
 
+  data() {
 
+    this.u_extend(arr, gregion);
 
     return {
 
-      key:'',
 
-      region:arr,
 
-    }
 
+      key: "",
 
+      region: arr,
 
+    };
 
   },
 
-    watch:{
 
-    key(newVal){
 
-     let tmpregion = []
 
-      this.u_extend(tmpregion,gregion)
 
+  watch: {
 
+    key(newVal) {
 
+      let tmpregion = [];
 
+      this.u_extend(tmpregion, gregion);
 
       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
 
+        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) {
 
-            return item
 
+          });
 
+          if (item.company.length > 0) {
 
+            return item;
 
           }
 
-        })
 
+        });
 
       }
 
-    }
 
+    },
 
   },
 
-  methods:{
 
-    handleItem(item){
 
-      this.$bus.$emit('ifrMessage',{
 
-        events:'flyToPano',
 
-        data:item
 
-      })
 
-      this.$emit('closeSearch')
 
-    }
 
-  }
 
-}
 
+  methods: {
 
+    handleItem(item) {
 
+      this.$bus.$emit("ifrMessage", {
 
+        events: "flyToPano",
 
+        data: item,
 
+      });
 
+      this.$emit("closeSearch");
 
+    },
 
+  },
 
+};
 
 </script>
 
 
 <style lang="less" scoped>
 
-
 
 ::-webkit-scrollbar {
 
   width: 2px;
 
   height: 2px;
 
@@ -109,16 +122,16 @@ export default {
 
   background-color: rgba(255, 255, 255, 0.4);
 
 }
 
 
-@w:100%;
 
+@w: 100%;
 
 
-.vsearch{
 
+.vsearch {
 
   width: @w;
 
   height: 100%;
 
   position: fixed;
 
   top: 0;
 
   left: 0;
 
   z-index: 99999;
 
-  .searchbg{
 
+  .searchbg {
 
     width: @w;
 
     height: 100%;
 
     position: absolute;
 
@@ -126,81 +139,81 @@ export default {
 
     left: 0;
 
     z-index: -1;
 
   }
 
-  .brightness{
 
-    &::before{
 
+  .brightness {
 
+    &::before {
 
       z-index: -2;
 
     }
 
   }
 
-  .vinput{
 
+  .vinput {
 
     display: flex;
 
     justify-content: space-between;
 
     align-items: center;
 
     padding: 10px 15px 0 20px;
 
     width: 100%;
 
-    >img{
 
+    > img {
 
       cursor: pointer;
 
       width: 10px;
 
       flex-shrink: 0;
 
       margin-right: 20px;
 
     }
 
-      >div{
 
-        display: flex;
 
-        justify-content: flex-start;
 
-        align-items: center;
 
-        background-color: rgba(255, 255, 255, 0.2);
 
-        border-radius: 20px;
 
-        overflow: hidden;
 
-        padding: 0 10px;
 
-        flex: auto;
 
-        >input{
 
-          line-height: 35px;
 
-          height: 35;
 
-          width: 80%;
 
-          margin-left: 10px;
 
-          color: #fff;
 
-        }
 
-        >img{
 
-          width: 20px;
 
-        }
 
+    > div {
 
+      display: flex;
 
+      justify-content: flex-start;
 
+      align-items: center;
 
+      background-color: rgba(255, 255, 255, 0.2);
 
+      border-radius: 20px;
 
+      overflow: hidden;
 
+      padding: 0 10px;
 
+      flex: auto;
 
+      > input {
 
+        line-height: 35px;
 
+        height: 35;
 
+        width: 80%;
 
+        margin-left: 10px;
 
+        color: #fff;
 
+      }
 
+      > img {
 
+        width: 20px;
 
+      }
 
     }
 
-    >span{
 
+    > span {
 
       display: inline-block;
 
       margin-left: 10px;
 
       flex-shrink: 0;
 
       min-width: 30px;
 
     }
 
   }
 
-  .cpylist{
 
+  .cpylist {
 
     padding: 25px 30px 0 44px;
 
     height: 100%;
 
-    >p{
 
+    > p {
 
       font-size: 16px;
 
       padding: 0 10px;
 
     }
 
-    >ul{
 
+    > ul {
 
       max-height: calc(100% - 110px);
 
       overflow-y: auto;
 
-      padding:0 15px 0;
 
-      
-       >li{
 
-         margin: 18px 0;
 
-         &:last-of-type{
 
-           margin-bottom: 0;
 
-         }
 
-         >p{
 
-            font-size: 16px;
 
-            font-weight: bold;
 
-          }
 
-          >ul{
 
-            margin-left: 20px;
 
-            >li{
 
-              line-height: 1.2;
 
-              margin: 12px 0;
 
-              color: rgba(255, 255, 255, 0.6);
 
-            }
 
+      padding: 0 15px 0;
 
+
 
+      > li {
 
+        margin: 18px 0;
 
+        &:last-of-type {
 
+          margin-bottom: 0;
 
+        }
 
+        > p {
 
+          font-size: 16px;
 
+          font-weight: bold;
 
+        }
 
+        > ul {
 
+          margin-left: 20px;
 
+          > li {
 
+            line-height: 1.2;
 
+            margin: 12px 0;
 
+            color: rgba(255, 255, 255, 0.6);
 
           }
 
-       }
 
+        }
 
+      }
 
     }
 
   }
 
 }
 
-</style>
 
+</style>

+ 39 - 12
src/pages/scene/search/index.vue
View File 

@@ -5,10 +5,15 @@
 
       <img :src="require(`@/assets/images/project/icon/search.png`)" alt="">
 
     </div>
 
     <div class="cpylist" :class="{listactive:isShow}">
 
-      <p class="btmdashline">参展项目及企业</p>
 
+       <p>参展项目</p>
 
         <ul v-if="region.length>0">
 
-          <li class="textActive" v-for="(item,i) in region" :key="i">
 
-            <p @click.stop="handleItem(item)">{{item.name}}</p>
 
+          <li v-for="(item,i) in region" :key="i">
 
+            <p v-if="item.company.length>0">{{item.name}} <span>{{item.desc}}</span></p>
 
+            <ul>
 
+              <li @click="handleItem(sub)" class="textActive" :class="{active:currentPanoid==sub.panoId}" v-for="(sub,idx) in item.company" :key="idx">
 
+                {{sub.name}}
 
+              </li>
 
+            </ul>
 
           </li>
 
         </ul>
 
         <ul v-else>
 
@@ -19,15 +24,27 @@
 
 </template>
 
 
 <script>
 
-import {Booth} from '@/data/raw'
 
+import {Booth,region} from '@/data/raw'
 
 
-let fixBooth = Booth.filter(item=>(item.mapId.indexOf('xt')<=-1))
 
-let arr = []
 
+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
 
+})
 
+let arr = [] 
 
 export default {
 
   props:['currentPanoid'],
 
   data(){
 
-    this.u_extend(arr,fixBooth)
 
+    this.u_extend(arr,gregion)
 
     return {
 
       key:'',
 
       region:arr,
 
@@ -38,15 +55,20 @@ export default {
 
     currentPanoid(){
 
       this.isShow=false
 
     },
 
-    key(newVal){
 
+     key(newVal){
 
      let tmpregion = []
 
-      this.u_extend(tmpregion,fixBooth)
 
+      this.u_extend(tmpregion,gregion)
 
       if (!newVal) {
 
         this.region = tmpregion
 
       }
 
       else{
 
         this.region = tmpregion.filter(item=>{
 
-          if (item.name.indexOf(newVal)>-1) {
 
+          item.company = item.company.filter(sub=>{
 
+            if (sub.name.indexOf(newVal)>-1) {
 
+              return sub
 
+            }
 
+          })
 
+          if (item.company.length>0) {
 
             return item
 
           }
 
         })
 
@@ -89,7 +111,7 @@ export default {
 
 }
 
 
 .vsearch{
 
-  width: 300px;
 
+  width: 330px;
 
   color: #fff;
 
   .vinput{
 
     display: flex;
 
@@ -122,6 +144,7 @@ export default {
 
       font-size: 18px;
 
       font-weight: bold;
 
       padding: 0 10px 18px;
 
+     
     }
 
     >ul{
 
       max-height: calc(100vh - 160px);
 
@@ -132,8 +155,12 @@ export default {
 
          &:last-of-type{
 
            margin-bottom: 0;
 
          }
 
+          >p{
 
+            font-size: 18px;
 
+            font-weight: bold;
 
+          }
 
          >ul{
 
-          //  margin-left: 20px;
 
+           margin-left: 20px;
 
            >li{
 
             margin: 18px 0;
 
            }