tremble 3 rokov pred
rodič
commit
679c0dace4
100 zmenil súbory, kde vykonal 3462 pridanie a 673 odobranie
  1. 3 0
      package.json
  2. 12 3
      public/index.html
  3. BIN
      public/logo.ico
  4. BIN
      public/logo.png
  5. 38 0
      public/mobile.html
  6. 1 1
      public/model/application.js
  7. 1 1
      public/model/assets/main/import/0b/0bc755742.json
  8. 1 1
      public/model/assets/main/import/0f/0f6262e90.json
  9. 1 1
      public/model/assets/main/index.js
  10. BIN
      public/model/assets/main/native/9e/9e379561-167c-4518-a598-34aa2e354332.astc
  11. BIN
      public/model/assets/main/native/9e/9e379561-167c-4518-a598-34aa2e354332.jpg
  12. BIN
      public/model/assets/main/native/c5/c52b19fb-d5a8-4128-b64d-7daad060e7e2.astc
  13. BIN
      public/model/assets/main/native/c5/c52b19fb-d5a8-4128-b64d-7daad060e7e2.jpg
  14. 1 1
      public/model/index.html
  15. 1 1
      public/model/src/settings.json
  16. BIN
      public/static/images/pc_step1.png
  17. BIN
      public/static/images/pc_step2.png
  18. BIN
      public/static/images/phone_step1.png
  19. BIN
      public/static/images/phone_step2.png
  20. 9 9
      public/static/js/main_2020_show.js
  21. 3 2
      public/static/js/myShow.js
  22. BIN
      src/assets/images/mobile/bg.png
  23. BIN
      src/assets/images/mobile/icon/close.png
  24. BIN
      src/assets/images/mobile/icon/close_b.png
  25. BIN
      src/assets/images/mobile/icon/home.png
  26. BIN
      src/assets/images/mobile/icon/search.png
  27. BIN
      src/assets/images/mobile/icon/shoula_a.png
  28. BIN
      src/assets/images/mobile/icon/shoula_b.png
  29. BIN
      src/assets/images/mobile/icon/shoula_c.png
  30. BIN
      src/assets/images/mobile/icon/shoula_d.png
  31. BIN
      src/assets/images/mobile/icon/shoula_e.png
  32. BIN
      src/assets/images/mobile/icon/shoula_xuting.png
  33. BIN
      src/assets/images/mobile/icon/xiala.png
  34. BIN
      src/assets/images/mobile/icon/播放.png
  35. BIN
      src/assets/images/mobile/iconqr.png
  36. BIN
      src/assets/images/mobile/kuangti/daka_a.png
  37. BIN
      src/assets/images/mobile/kuangti/daka_b.png
  38. BIN
      src/assets/images/mobile/kuangti/daka_c.png
  39. BIN
      src/assets/images/mobile/kuangti/daka_d.png
  40. BIN
      src/assets/images/mobile/kuangti/daka_e.png
  41. BIN
      src/assets/images/mobile/kuangti/daka_xuting.png
  42. BIN
      src/assets/images/mobile/kuangti/fenxiang.png
  43. BIN
      src/assets/images/mobile/kuangti/hotspot_a.png
  44. BIN
      src/assets/images/mobile/kuangti/hotspot_b.png
  45. BIN
      src/assets/images/mobile/kuangti/hotspot_c.png
  46. BIN
      src/assets/images/mobile/kuangti/hotspot_d.png
  47. BIN
      src/assets/images/mobile/kuangti/hotspot_e.png
  48. BIN
      src/assets/images/mobile/kuangti/hotspot_xuting.png
  49. BIN
      src/assets/images/mobile/kuangti/liuyan.png
  50. BIN
      src/assets/images/mobile/mobile_units.png
  51. BIN
      src/assets/images/mobile/scene_bg.png
  52. BIN
      src/assets/images/mobile/tab.png
  53. BIN
      src/assets/images/mobile/title.png
  54. BIN
      src/assets/images/project/bg.png
  55. BIN
      src/assets/images/project/icon/loading.gif
  56. BIN
      src/assets/images/project/icon/nofull.png
  57. BIN
      src/assets/images/project/kuangti/hotspot_a.png
  58. BIN
      src/assets/images/project/kuangti/hotspot_b.png
  59. BIN
      src/assets/images/project/kuangti/hotspot_c.png
  60. BIN
      src/assets/images/project/kuangti/hotspot_d.png
  61. BIN
      src/assets/images/project/kuangti/hotspot_e.png
  62. BIN
      src/assets/images/project/kuangti/hotspot_xuting.png
  63. BIN
      src/assets/images/project/landtip.png
  64. BIN
      src/assets/images/project/mascot.gif
  65. BIN
      src/assets/images/project/mobile_units.png
  66. BIN
      src/assets/images/project/pc_units.png
  67. BIN
      src/assets/images/project/title.png
  68. 42 29
      src/assets/style/public.less
  69. 1 1
      src/assets/theme/theme.less
  70. 23 0
      src/clients/index.js
  71. 20 0
      src/clients/index.vue
  72. 27 0
      src/clients/mobile.js
  73. 70 0
      src/clients/mobile.vue
  74. 1 21
      src/components/emoji/index.vue
  75. 312 21
      src/components/hotspot/iframe.vue
  76. 236 50
      src/components/hotspot/image.vue
  77. 21 25
      src/components/hotspot/title.vue
  78. 219 32
      src/components/hotspot/video.vue
  79. 90 95
      src/pages/scene/mapsvg/a.vue
  80. 110 96
      src/pages/scene/mapsvg/b.vue
  81. 70 102
      src/pages/scene/mapsvg/c.vue
  82. 439 0
      src/components/mapsvg/d.vue
  83. 125 139
      src/pages/scene/mapsvg/d.vue
  84. 192 0
      src/components/mapsvg/pano.js
  85. 0 0
      src/components/mapsvg/show.vue
  86. 293 0
      src/components/mapsvg/xuting.vue
  87. 6 1
      src/components/popupLayout/Loading.vue
  88. 16 0
      src/components/popupLayout/Tips.vue
  89. 12 1
      src/config/http.js
  90. 616 0
      src/data/region.js
  91. 7 7
      src/data/scene.js
  92. 10 2
      src/mixins/index.js
  93. 11 28
      src/pages/Home.vue
  94. 127 0
      src/pages/enter/mobile.vue
  95. 4 0
      src/pages/enter/model/index.vue
  96. 10 3
      src/pages/logintips/index.vue
  97. 88 0
      src/pages/mobile.vue
  98. 147 0
      src/pages/mobilescene/aside.vue
  99. 46 0
      src/pages/mobilescene/bar.vue
  100. 0 0
      src/pages/mobilescene/components/content.vue

+ 3 - 0
package.json

@@ -13,6 +13,9 @@
     "qs": "^6.10.1",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
+    "vue-infinite-scroll": "^2.0.2",
+    "swiper": "^5.3.8",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

+ 12 - 3
public/index.html

@@ -7,16 +7,25 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <meta name="format-detection" content="telephone=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <link rel="icon" href="<%= BASE_URL %>logo.ico">
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/oldVer/main0.css"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/main.css?v=2.25"/>
-    <title>云展览</title>
+    <title>2021年全国大众创业万众创新活动周云展览</title>
     <script class="build keep">
       if (window.performance) {
           window.navigationStart = window.performance.timing.navigationStart;
       } else {
           window.navigationStart = Date.now() + 300;
-      } 
+      };
+      (function() {
+        if (
+          navigator.userAgent.indexOf("iPhone") > -1 ||
+          navigator.userAgent.indexOf("Android") > -1
+        ) {
+          let href = window.location.href.split('/index.html')
+          window.location.href =  href[0] + "/mobile.html";
+        }
+      })();
   </script>
   </head>
   <body>

BIN
public/logo.ico


BIN
public/logo.png


+ 38 - 0
public/mobile.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+    <meta name="format-detection" content="telephone=no">
+    <link rel="icon" href="<%= BASE_URL %>logo.ico">
+    <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/oldVer/main0.css"/>
+    <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/main.css?v=2.25"/>
+    <title>2021年全国大众创业万众创新活动周云展览</title>
+    <script class="build keep">
+      if (window.performance) {
+          window.navigationStart = window.performance.timing.navigationStart;
+      } else {
+          window.navigationStart = Date.now() + 300;
+      };
+      (function(){
+        if (!(navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1)) {
+              let href = window.location.href.split('/mobile.html')
+              window.location.href =  href[0] + "/index.html";
+            }
+      })();
+  </script>
+  </head>
+  <body>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/jquery-2.1.1.min.js" class="build keep"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/player-0.0.12.min.js" class="build keep"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/Tween.js"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/manage.js"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/myShow.js"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/overlay.js"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/main_2020_show.js"></script>
+    <div id="app"></div>
+  </body>
+</html>

+ 1 - 1
public/model/application.js

@@ -181,7 +181,7 @@ System.register([], function (_export, _context) {
     var launchScene = settings.launchScene; // load scene
 
     cc.director.loadScene(launchScene, null, function () {
-      cc.view.setDesignResolutionSize(960, 640, 4);
+      cc.view.setDesignResolutionSize(414, 736, 2);
       console.log("Success to load scene: ".concat(launchScene));
     });
   }

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 1 - 1
public/model/assets/main/import/0b/0bc755742.json


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 1 - 1
public/model/assets/main/import/0f/0f6262e90.json


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 1 - 1
public/model/assets/main/index.js


BIN
public/model/assets/main/native/9e/9e379561-167c-4518-a598-34aa2e354332.astc


BIN
public/model/assets/main/native/9e/9e379561-167c-4518-a598-34aa2e354332.jpg


BIN
public/model/assets/main/native/c5/c52b19fb-d5a8-4128-b64d-7daad060e7e2.astc


BIN
public/model/assets/main/native/c5/c52b19fb-d5a8-4128-b64d-7daad060e7e2.jpg


+ 1 - 1
public/model/index.html

@@ -41,7 +41,7 @@
 
 </head>
 <body>
-  <canvas id="GameCanvas" tabindex="0"></canvas>
+  <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
   
 <!-- Polyfills bundle. -->
 <script src="src/polyfills.bundle.js" charset="utf-8"> </script>

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 1 - 1
public/model/src/settings.json


BIN
public/static/images/pc_step1.png


BIN
public/static/images/pc_step2.png


BIN
public/static/images/phone_step1.png


BIN
public/static/images/phone_step2.png


+ 9 - 9
public/static/js/main_2020_show.js

@@ -6897,7 +6897,7 @@ window.loadMainJs = ()=>{
                     var i = Q.pageTitle;
                     // 2 !== K.valueFromHash("mls", 0) && (i = e.name + " - " + i),
                     2 !== K.valueFromHash("mls", 0) && e.name && (i = e.name),
-                    document.title = i ,
+                    // document.title = i ,
                     K.isMobile() ? $("#gui-fullscreen").css("display", "none") : ($("[rel=tooltip]").tooltip({
                         delay: {
                             show: 50,
@@ -7091,7 +7091,7 @@ window.loadMainJs = ()=>{
                             k();
                             break;
                         case we.U:
-                            B();
+                            // B();
                             break;
                         case we.X:
                             Q.debug && e.toggleExplode();
@@ -8078,8 +8078,8 @@ window.loadMainJs = ()=>{
                 }, e)
                 //csz 用户引导界面
                 var helpData = {
-                    "pc":["./static/images/pc_step1.png","./static/images/pc_step2.png","./static/images/pc_step3.png"],
-                    "mobile":["./static/images/phone_step1.png","./static/images/phone_step2.png","./static/images/phone_step3.png"]
+                    "pc":["./static/images/pc_step1.png","./static/images/pc_step2.png"],
+                    "mobile":["./static/images/phone_step1.png","./static/images/phone_step2.png"]
                 }
                 var navIcon = $(".nav-icon .icon");
                 if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) navIcon.attr("src",helpData.mobile[0]);
@@ -23119,9 +23119,7 @@ window.loadMainJs = ()=>{
                     , c = e.constantMoveSpeed
                     , h = null
                     , p = null 
-                    
-                    console.log(e.pano.id)
-                    
+                                        
                     if (aim){ 
                         var _ = (new r.Matrix4).lookAt(i.position, aim, d.UP)
                         aimQua = (new r.Quaternion).setFromRotationMatrix(_)
@@ -24533,7 +24531,7 @@ window.loadMainJs = ()=>{
                     throw new c("Can't start SceneRenderer, already started");
                 this.createContext(e),
                 /***************************************************VR fyz改 from徐世廷**********************************************************************/
-                m.isMobile() && this.boluoVrInit(),
+                // m.isMobile() && this.boluoVrInit(),
                 /*******************************************************************************************************************************/
                 this.initComposer(),
                 this.started = !0,
@@ -30631,7 +30629,9 @@ window.loadMainJs = ()=>{
                     var reg = new RegExp(f, "g"); //创建正则RegExp对象   
                     return str.replace(reg, e);
                     }; 
-                    var urlFirstView = c.valueFromHash('firstView');
+                    // var urlFirstView = c.valueFromHash('firstView');
+                    var urlFirstView = window.firstView;
+
                     if(urlFirstView){
                         try{  
                             urlFirstView = replaceAll(urlFirstView, "pano", '"pano"')  

+ 3 - 2
public/static/js/myShow.js

@@ -51,6 +51,7 @@ window.g_snapShotHeight = 140;
 
 window.settings = {
     overlay:{
-		width:1, height:0.5, depth:0.02
-  }
+      width:1, height:0.5, depth:0.02
+    },
+    dontExamHot:true
 }  

BIN
src/assets/images/mobile/bg.png


BIN
src/assets/images/mobile/icon/close.png


BIN
src/assets/images/mobile/icon/close_b.png


BIN
src/assets/images/mobile/icon/home.png


BIN
src/assets/images/mobile/icon/search.png


BIN
src/assets/images/mobile/icon/shoula_a.png


BIN
src/assets/images/mobile/icon/shoula_b.png


BIN
src/assets/images/mobile/icon/shoula_c.png


BIN
src/assets/images/mobile/icon/shoula_d.png


BIN
src/assets/images/mobile/icon/shoula_e.png


BIN
src/assets/images/mobile/icon/shoula_xuting.png


BIN
src/assets/images/mobile/icon/xiala.png


BIN
src/assets/images/mobile/icon/播放.png


BIN
src/assets/images/mobile/iconqr.png


BIN
src/assets/images/mobile/kuangti/daka_a.png


BIN
src/assets/images/mobile/kuangti/daka_b.png


BIN
src/assets/images/mobile/kuangti/daka_c.png


BIN
src/assets/images/mobile/kuangti/daka_d.png


BIN
src/assets/images/mobile/kuangti/daka_e.png


BIN
src/assets/images/mobile/kuangti/daka_xuting.png


BIN
src/assets/images/mobile/kuangti/fenxiang.png


BIN
src/assets/images/mobile/kuangti/hotspot_a.png


BIN
src/assets/images/mobile/kuangti/hotspot_b.png


BIN
src/assets/images/mobile/kuangti/hotspot_c.png


BIN
src/assets/images/mobile/kuangti/hotspot_d.png


BIN
src/assets/images/mobile/kuangti/hotspot_e.png


BIN
src/assets/images/mobile/kuangti/hotspot_xuting.png


BIN
src/assets/images/mobile/kuangti/liuyan.png


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


BIN
src/assets/images/mobile/scene_bg.png


BIN
src/assets/images/mobile/tab.png


BIN
src/assets/images/mobile/title.png


BIN
src/assets/images/project/bg.png


BIN
src/assets/images/project/icon/loading.gif


BIN
src/assets/images/project/icon/nofull.png


BIN
src/assets/images/project/kuangti/hotspot_a.png


BIN
src/assets/images/project/kuangti/hotspot_b.png


BIN
src/assets/images/project/kuangti/hotspot_c.png


BIN
src/assets/images/project/kuangti/hotspot_d.png


BIN
src/assets/images/project/kuangti/hotspot_e.png


BIN
src/assets/images/project/kuangti/hotspot_xuting.png


BIN
src/assets/images/project/landtip.png


BIN
src/assets/images/project/mascot.gif


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


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


BIN
src/assets/images/project/title.png


+ 42 - 29
src/assets/style/public.less

@@ -87,34 +87,6 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
   }
 }
 
-@media only screen and (max-width: 487px), (max-height:487px) {
-  .cad{
-    position: fixed;
-    top: 38%;
-    left: 50%;
-    transform: translate(-150%,-50%);
-    width: 280px;
-    height: 150px;
-    z-index: 999;
-    transition: none;
-    #cad{
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-.ui-input{
-  padding: 0 14px;
-  color: #fff;
-  letter-spacing: 0;
-  height: 34px;
-  line-height: 34px;
-  width: 100%;
-  background: rgba(#000, 0.8);
-  border: 1px solid #FFB521;
-  border-radius: 17px;
-}
-}
 
 .no-record{
   text-align: center;
@@ -132,13 +104,54 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
     z-index: -1;
     background-repeat: no-repeat;
     background-position: center;
-    backdrop-filter: blur(10px) brightness(60%);
+    background-color:rgba(0,0,0,0.7);
   }
 }
 
+
+@supports (backdrop-filter: brightness(60%)) {
+  .brightness{
+    &::before{
+      content: '';
+      backdrop-filter: blur(10px) brightness(60%)!important;
+      background-color: rgba(0,0,0,0)!important;
+    }
+  }  
+}
+
+
+
 .disable{
   opacity: 0;
   pointer-events: none;
   display: none;
 }
 
+
+@media screen and (max-width: 600px) {
+  .brightness{
+    &::before{
+      content: '';
+      position: absolute;
+      top: 0; 
+      bottom: 0;
+      left: 0; 
+      right: 0;
+      z-index: -2;
+      overflow: hidden;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: rgba(0,0,0,0.7)
+    }
+  }
+  
+  @supports (backdrop-filter: brightness(60%)) {
+    .brightness{
+      &::before{
+        content: '';
+        backdrop-filter: blur(10px) brightness(60%)!important;
+        background-color: rgba(0,0,0,0)!important;
+      }
+    }  
+  }
+}

+ 1 - 1
src/assets/theme/theme.less

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

+ 23 - 0
src/clients/index.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import App from './index.vue'
+import '@/mixins'
+import router from '@/router'
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+Vue.use(Viewer,{
+  defaultOptions: {
+    navbar:false,
+    button:false,
+    maxZoomRatio:2
+  }
+})
+
+
+Vue.config.productionTip = false
+
+
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

+ 20 - 0
src/clients/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <router-view/>
+</template>
+
+<script>
+import '@/assets/style/reset.less'
+import '@/assets/style/public.less'
+import '@/assets/theme/color.less'
+
+export default {
+    
+}
+</script>
+<style lang="less">
+html,body{
+    width: 100%;
+    height: 100%;
+    color: #fff;
+}
+</style>

+ 27 - 0
src/clients/mobile.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import App from './mobile.vue'
+import '@/mixins'
+import router from '@/router/mobile.js'
+import infiniteScroll from 'vue-infinite-scroll'
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+Vue.use(Viewer,{
+  defaultOptions: {
+    navbar:false,
+    button:false,
+    maxZoomRatio:2
+  }
+})
+
+Vue.use(infiniteScroll)
+
+
+
+Vue.config.productionTip = false
+
+
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

+ 70 - 0
src/clients/mobile.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="bbbb">
+    <router-view />
+    <div class="orientation-tip">
+      <div>
+        <img :src="require('@/assets/images/project/landtip.png')" alt="" />
+        <p>为了更好的体验,请使用竖屏锁屏浏览</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "@/assets/style/reset.less";
+import "@/assets/style/public.less";
+import "@/assets/theme/color.less";
+
+export default {};
+</script>
+<style lang="less">
+html,
+body,
+.bbbb {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+}
+
+/*横屏体验*/
+.orientation-tip {
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  > div {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    > img {
+    }
+    > p {
+      font-size: 16px;
+      margin-top: 20px;
+      width: 100%;
+    }
+  }
+}
+
+/*竖屏*/
+@media screen and (orientation: portrait) {
+  .orientation-tip {
+    display: none;
+  }
+}
+
+/*横屏*/
+@media screen and (orientation: landscape) {
+  .orientation-tip {
+    display: block;
+  }
+}
+</style>

+ 1 - 21
src/components/emoji/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="biaoqingContent">
+    <div class="biaoqingContent" @click.stop>
       <img
         class="expression"
         @click.stop="show = !show"
@@ -101,22 +101,6 @@ export default {
       }
       return str;
     },
-    //失去焦点 内容返回
-    onBlur() {
-      let text = document.getElementById(this.id).innerHTML;
-      this.content = text
-        .replace(
-          /<img style="vertical-align: sub;" src="http:\/\/tkeasyemoji\.oss-cn-shanghai\.aliyuncs\.com\/images\/placeholder\.png" class="/g,
-          ""
-        )
-        .replace(/alt="/g, "")
-        .replace(/">/g, "")
-        .replace(/bg-.{7}/g, "");
-      this.$emit("contentChange", {
-        id: this.id,
-        value: this.content,
-      });
-    },
     // 表情title点击事件
     bqNameChange(index, arr) {
       this.biaoqingActive = index;
@@ -142,10 +126,6 @@ export default {
   },
   mounted() {
     this.valueChange();
-    let that = this;
-    document.body.onclick = function() {
-      that.show = false;
-    };
   },
   components: {},
 };

+ 312 - 21
src/components/hotspot/iframe.vue

@@ -1,39 +1,330 @@
 <template>
-  <div class="images" >
-    <iframe :src="hotspot.iframe[active]" frameborder="0"></iframe>
+  <div v-if="!isMobile" class="hotspot">
+    <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="img-con">
+        <div class="imgmain">
+          <iframe :src="hotspot.iframe[active]" frameborder="0"></iframe>
+        </div>
+        <div class="pagna" v-if="hotspot.iframe.length>1">
+          <span>{{ active + 1 }}</span>
+          /
+          <span>{{ hotspot.iframe.length }}</span>
+        </div>
+      </div>
+      <div class="desc" v-html="hotspot.content"></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="{ 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"
+          v-if="hotspot.iframe.length > 1"
+          slot="pagination"
+        ></div>
+      </div>
+
+      <div v-if="hotspot.content" class="desc">
+        <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";
+
+
 export default {
-  props:['hotspot'],
-  data(){
+  directives: {
+    swiper: directive,
+  },
+  props: ["hotspot", "type"],
+  data() {
     return {
-      active:0
-    }
+      active: 0,
+    };
   },
-  mounted(){
-    console.log(this.hotspot);
+  methods: {
+    handlePage(type) {
+      if (type === "next") {
+        console.log(this.hotspot.iframe.length);
+        if (this.active >= this.hotspot.iframe.length - 1) {
+          this.active = 0;
+          return;
+        }
+        this.active += 1;
+      } else {
+        if (this.active == 0) {
+          this.active = this.hotspot.iframe.length - 1;
+          return;
+        }
+        this.active -= 1;
+      }
+    },
   },
-  methods:{
-  }
-}
+  computed: {
+    swiperOption() {
+      return {
+        slidesPerView: "auto",
+        autoplay: false,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        loop: this.hotspot.iframe.length > 1,
+        pagination: {
+          el: ".swiper-pagination",
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.noshow{
-  opacity: 0!important;;
-  pointer-events: none!important;;
+.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%, 92% 99%, 1% 99%);
+  }
+  .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;
+    }
+
+    .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 {
+        width: 90%;
+        height: 700px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
+        margin: 0 auto;
+        font-size: 0;
+        iframe {
+          width: 394px;
+          height: 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);
+      }
+    }
+    .desc{
+      position: absolute;
+      bottom: 70px;
+      transform: translateX(-50%);
+      left: 50%;
+      font-size: 18px;
+    }
+  }
 }
 
-.images{
-  width: 100%;
-  height: 100%;
-  background-repeat: no-repeat;
-  text-align: center;
-  >iframe{
+.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% 99%, 1% 99%);
+  }
+  .close {
+    position: absolute;
+    top: 26px;
+    right: 16px;
+    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;
+    width: 100%;
+    left: 0;
+
+    .swcon {
+      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;
+            @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;
+        }
+        & /deep/ .swiper-pagination-bullet-active {
+          background: #fff !important;
+        }
+      }
+    }
+
+    .desc {
+      text-align: justify;
+      width: 85%;
+      margin: 10px auto 0;
+      p {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      div {
+        font-size: 14px;
+        margin-top: 10px;
+        line-height: 1.5;
+        max-height: 50vh;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .single {
+    top: 46%;
+    transform: translateY(-50%);
   }
 }
-</style>
+</style>
+

+ 236 - 50
src/components/hotspot/image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hotspot">
+  <div class="hotspot" v-if="!isMobile">
     <img
       class="vhotspot"
       :src="require(`@/assets/images/project/kuangti/hotspot_${theme}.png`)"
@@ -14,34 +14,88 @@
     />
 
     <div class="vhotspotcon">
-      <div class="vtitle" v-html="hotspot.title || '热点标题'"></div>
-      <div class="img-con">
-        <img
-          class="aa"
-          :src="require('@/assets/images/project/icon/hotspot_l.png')"
-          alt=""
-        />
-        <div class="imgmain">
-          <img v-viewer :src="hotspot.images[active]" alt="" />
+      <div class="vtitle" v-html="hotspot.title"></div>
+      <div class="hotspotcon">
+        <div class="img-con">
+          <img
+            class="aa"
+            v-if="hotspot.images.length > 1"
+            :src="require('@/assets/images/project/icon/hotspot_l.png')"
+            alt=""
+            @click="handlePage('prev')"
+          />
+          <div class="imgmain" :class="{bigImg: !hotspot.content}">
+            <img v-viewer :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>
-        <img
-          class="aa"
-          :src="require('@/assets/images/project/icon/hotspot_r.png')"
-          alt=""
-        />
-        <div class="pagna">
+        <div class="pagna" v-if="hotspot.images.length > 1">
           <span>{{ active + 1 }}</span>
           /
           <span>{{ hotspot.images.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="{ 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"
+          v-if="hotspot.images.length > 1"
+          slot="pagination"
+        ></div>
+      </div>
+
+      <div v-if="hotspot.content" class="desc">
+        <div v-html="handleContent(hotspot.contents[mbactive], 14)"></div>
       </div>
-      <div class="desc" v-html="hotspot.content"></div>
     </div>
   </div>
 </template>
 
 <script>
+import { directive } from "vue-awesome-swiper";
+// import style (<= Swiper 5.x)
+import "swiper/css/swiper.css";
+
 export default {
+  directives: {
+    swiper: directive,
+  },
   props: ["hotspot", "type"],
   data() {
     return {
@@ -67,6 +121,26 @@ export default {
       }
     },
   },
+  computed: {
+    swiperOption() {
+      let that = this
+      return {
+        slidesPerView: "auto",
+        autoplay: false,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        loop: this.hotspot.images.length > 1,
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        on: {
+          slideChangeTransitionEnd: function() {
+            that.mbactive = this.realIndex
+          }
+        },
+      };
+    },
+  },
 };
 </script>
 
@@ -115,60 +189,172 @@ export default {
     text-align: center;
     .vtitle {
       position: absolute;
-      top: 2.5%;
-      left: 8%;
+      top: 24px;
+      left: 130px;
       z-index: 99;
       font-size: 20px;
     }
 
-    .img-con {
-      display: flex;
+    .hotspotcon {
       width: 90%;
-      align-items: center;
-      justify-content: space-between;
-      position: relative;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       position: absolute;
-      .imgmain {
-        width: 90%;
-        max-height: 60vh;
-        overflow-x: hidden;
-        overflow-y: auto;
+      .img-con {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         position: relative;
-        img {
-          cursor: pointer;
-          max-width: 90%;
+        .imgmain {
+          width: 90%;
           max-height: 60vh;
+          overflow-x: hidden;
+          overflow-y: auto;
+          position: relative;
+          margin: 0 auto;
+          img {
+            cursor: pointer;
+            max-width: 100%;
+            max-height: 60vh;
+          }
+        }
+        @h:72vh;
+        .bigImg{
+          max-height: @h;
+          >img{
+            max-height: @h;
+          }
+        }
+        .aa {
+          width: 30px;
+          height: auto;
+          cursor: pointer;
         }
-      }
-      .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;
+        margin-top: 10px;
         color: rgba(255, 255, 255, 0.8);
       }
+      .desc {
+        width: 90%;
+        font-size: 16px;
+        text-align: justify;
+        line-height: 1.8;
+        max-height: 120px;
+        margin: 10px auto 0;
+        padding-right: 14px;
+        overflow-y: auto;
+      }
     }
-    .desc{
-      position: absolute;
-      bottom: 60px;
-      transform: translateX(-50%);
-      left: 50%;
-      width: 80%;
-      font-size: 16px;
-      text-align: left;
-      line-height: 1.8;
+  }
+}
+
+.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% 99%, 1% 99%);
+  }
+  .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: 50vw;
+  }
+  .mbhcon {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    left: 0;
+
+    .swcon {
+      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%;
+            }
+          }
+        }
+      }
+
+      .pagination {
+        position: static;
+        margin-top: 4px;
+        z-index: 999;
+        & /deep/ .swiper-pagination-bullet,
+        & /deep/ .swiper-pagination-bullet-active {
+          background-color: #fff !important;
+        }
+        & /deep/ .swiper-pagination-bullet-active {
+          background: #fff !important;
+        }
+      }
+    }
+
+    .desc {
+      text-align: justify;
+      width: 85%;
+      padding-right: 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: 15vh;
+        padding-right: 4px;
+        overflow-y: auto;
+      }
     }
   }
+
+  .single {
+    top: 46%;
+    transform: translateY(-50%);
+  }
 }
 </style>

+ 21 - 25
src/components/hotspot/title.vue

@@ -1,40 +1,37 @@
 <template>
-  <div class="images" >
+  <div class="images">
     <div class="img-con">
-      <div class="title">{{hotspot.title}}</div>
-      <div class="desc" v-html="hotspot.content">
-    </div>
-
+      <div class="title">{{ hotspot.title }}</div>
+      <div class="desc" v-html="hotspot.content"></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props:['hotspot'],
-  data(){
+  props: ["hotspot"],
+  data() {
     return {
-      active:0
-    }
+      active: 0,
+    };
   },
-  methods:{
-  }
-}
+  methods: {},
+};
 </script>
 
 <style lang="less" scoped>
-.noshow{
-  opacity: 0!important;;
-  pointer-events: none!important;;
+.noshow {
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
 
-.images{
+.images {
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   text-align: center;
-  
-  .img-con{
+
+  .img-con {
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -46,19 +43,19 @@ export default {
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
-    .title{
+    .title {
       padding: 0 80px;
       display: inline-block;
-      color: #DBA761;
+      color: #dba761;
       font-weight: bold;
       font-size: 36px;
       height: 70px;
       line-height: 70px;
-      background: #BC1515;
+      background: #bc1515;
       border-radius: 60px;
       margin: 45px auto;
     }
-    .desc{
+    .desc {
       max-width: 1000px;
       letter-spacing: 2px;
       margin: 20px auto 0;
@@ -69,9 +66,8 @@ export default {
       overflow-y: auto;
       font-size: 24px;
       line-height: 48px;
-      color: #BC1515;
+      color: #bc1515;
     }
   }
-
 }
-</style>
+</style>

+ 219 - 32
src/components/hotspot/video.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hotspot">
+  <div class="hotspot"  v-if="!isMobile">
     <img
       class="vhotspot"
       :src="require(`@/assets/images/project/kuangti/hotspot_${theme}.png`)"
@@ -15,37 +15,88 @@
 
     <div class="vhotspotcon">
       <div class="vtitle" v-html="hotspot.title"></div>
-      <div class="img-con">
-        <img
-          class="aa"
-          @click="active -= 1"
-          :src="require('@/assets/images/project/icon/hotspot_l.png')"
-          alt=""
-        />
-        <div class="imgmain">
-          <video controls autoplay>
-            <source :src="hotspot.video[active].url" type="video/mp4" />
-          </video>
+      <div class="hotspotcon">
+        <div class="img-con">
+          <img
+            class="aa"
+            v-if="hotspot.video.length > 1"
+            @click="active -= 1"
+            :src="require('@/assets/images/project/icon/hotspot_l.png')"
+            alt=""
+          />
+          <div class="imgmain">
+            <video controls autoplay>
+              <source :src="hotspot.video[active].url" type="video/mp4" />
+            </video>
+          </div>
+          <img
+            class="aa"
+            v-if="hotspot.video.length > 1"
+            @click="active += 1"
+            :src="require('@/assets/images/project/icon/hotspot_r.png')"
+            alt=""
+          />
+          <div class="pagna" v-if="hotspot.video.length > 1">
+            <span>{{ active + 1 }}</span>
+            /
+            <span>{{ hotspot.video.length }}</span>
+          </div>
         </div>
-        <img
-          class="aa"
-          @click="active += 1"
-          :src="require('@/assets/images/project/icon/hotspot_r.png')"
-          alt=""
-        />
-        <div class="pagna">
-          <span>{{ active + 1 }}</span>
-          /
-          <span>{{ hotspot.video.length }}</span>
+        <div class="desc" v-html="hotspot.content"></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="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 controls autoplay>
+              <source :src="item.url" type="video/mp4" />
+            </video>
+          </div>
         </div>
+      </ul>
+      <div class="swiper-pagination pagination" slot="pagination"></div>
+    </div>
+
+
+      <div v-if="hotspot.content" class="desc">
+        <div v-html="handleContent(hotspot.content,14)"></div>
       </div>
-      <div class="desc" v-html="hotspot.content"></div>
     </div>
   </div>
 </template>
 
 <script>
+import { directive } from "vue-awesome-swiper";
+// import style (<= Swiper 5.x)
+import "swiper/css/swiper.css";
+
+
 export default {
+  directives: {
+    swiper: directive,
+  },
   props: ["hotspot", "type"],
   data() {
     return {
@@ -71,6 +122,26 @@ 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>
 
@@ -119,12 +190,17 @@ export default {
     text-align: center;
     .vtitle {
       position: absolute;
-      top: 2.5%;
-      left: 8%;
+      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;
       width: 90%;
@@ -140,9 +216,10 @@ export default {
         max-height: 76vh;
         overflow-x: hidden;
         overflow-y: auto;
+        margin: 0 auto;
         position: relative;
         video {
-          width: 100%;
+          width: 89%;
         }
       }
       .aa {
@@ -161,12 +238,122 @@ export default {
         color: rgba(255, 255, 255, 0.8);
       }
     }
-    .desc{
+    .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 {
+    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;
-      bottom: 70px;
-      transform: translateX(-50%);
-      left: 50%;
-      font-size: 18px;
+      top: 26px;
+      right: 16px;
+      width: 14px;
+      z-index: 1000;
+  }
+  .mbhcon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    .title {
+      position: absolute;
+      top: 14px;
+      left: 40px;
+      display: inline-block;
+      font-size: 16px;
+      margin: 0px auto;
+      width: 50vw;
+    }
+    .swcon {
+      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%;
+            }
+          }
+        }
+      }
+
+      .pagination {
+        position: static;
+        margin-top: 4px;
+        z-index: 999;
+        & /deep/ .swiper-pagination-bullet,
+        & /deep/ .swiper-pagination-bullet-active {
+          background-color: #fff!important;
+        }
+        & /deep/ .swiper-pagination-bullet-active {
+          background: #fff !important;
+        }
+      }
+    }
+
+    .desc {
+      text-align: justify;
+      width: 85%;
+      padding-right: 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: 50vh;
+        overflow-y: auto;
+      }
     }
   }
 }

+ 90 - 95
src/pages/scene/mapsvg/a.vue

@@ -57,7 +57,7 @@
         </g>
         <g class="st2">
           <ellipse
-            transform="matrix(0.4996 -0.8663 0.8663 0.4996 63.5748 251.0478)"
+            transform="matrix(0.6423 -0.7664 0.7664 0.6423 35.0868 216.1305)"
             class="st3"
             cx="249.1"
             cy="70.5"
@@ -125,14 +125,13 @@
         </g>
         <g>
           <rect x="15.9" y="25.7" class="st8" width="16.4" height="3.7" />
-          <rect x="154.9" y="25.7" class="st8" width="16.4" height="3.7" />
-          <rect x="189.8" y="25.7" class="st8" width="16.4" height="3.7" />
-          <rect x="224.5" y="25.7" class="st8" width="16.4" height="3.7" />
+          <rect x="135.1" y="25.7" class="st8" width="16.4" height="3.7" />
+          <rect x="180" y="25.7" class="st8" width="16.4" height="3.7" />
+          <rect x="221.1" y="25.7" class="st8" width="16.4" height="3.7" />
           <rect x="259.3" y="25.7" class="st8" width="16.4" height="3.7" />
           <rect x="294" y="25.7" class="st8" width="16.4" height="3.7" />
           <rect x="50.7" y="25.7" class="st8" width="16.4" height="3.7" />
           <rect x="85.4" y="25.7" class="st8" width="16.4" height="3.7" />
-          <rect x="120.3" y="25.7" class="st8" width="16.4" height="3.7" />
         </g>
       </g>
       <g class="st9">
@@ -149,103 +148,103 @@
       </g>
     </g>
     <g id="point">
-      <g id="a-s5">
+      <g 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-s4">
+      <g 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-s29">
-        <circle class="st12" cx="77.5" cy="127.3" r="7.3" />
-        <circle class="st12" cx="77.5" cy="127.3" r="5.2" />
+      <g 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-s16">
-        <circle class="st12" cx="105.4" cy="234.5" r="7.3" />
-        <circle class="st12" cx="105.4" cy="234.5" r="5.2" />
+      <g 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-s15">
-        <circle class="st12" cx="68.3" cy="234.5" r="7.3" />
-        <circle class="st12" cx="68.3" cy="234.5" r="5.2" />
+      <g 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-s18">
-        <circle class="st12" cx="173.8" cy="234.5" r="7.3" />
-        <circle class="st12" cx="173.8" cy="234.5" r="5.2" />
+      <g 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-s20">
+      <g id="a-s3">
         <ellipse
-          transform="matrix(0.4641 -0.8858 0.8858 0.4641 -33.2559 351.5662)"
+          transform="matrix(0.4641 -0.8858 0.8858 0.4641 -53.4911 358.1846)"
           class="st12"
-          cx="273.9"
-          cy="203.3"
+          cx="269.3"
+          cy="223.3"
           rx="7.3"
           ry="7.3"
         />
-        <circle class="st12" cx="273.8" cy="203.3" r="5.2" />
+        <circle class="st12" cx="269.1" cy="223.3" r="5.2" />
       </g>
-      <g id="a-s19">
-        <circle class="st12" cx="233.1" cy="203.3" r="7.3" />
-        <circle class="st12" cx="233.1" cy="203.3" r="5.2" />
+      <g 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-s25">
+      <g id="a-s4">
         <ellipse
-          transform="matrix(0.4641 -0.8858 0.8858 0.4641 43.1366 304.1101)"
+          transform="matrix(0.4641 -0.8858 0.8858 0.4641 58.0355 290.9234)"
           class="st12"
-          cx="272.9"
-          cy="116.4"
+          cx="269.4"
+          cy="97.5"
           rx="7.3"
           ry="7.3"
         />
-        <circle class="st12" cx="272.9" cy="116.4" r="5.2" />
+        <circle class="st12" cx="269.5" cy="97.5" r="5.2" />
       </g>
-      <g id="a-s24">
-        <circle class="st12" cx="292.7" cy="80.6" r="7.3" />
-        <circle class="st12" cx="292.7" cy="80.6" r="5.2" />
+      <g 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-s23">
-        <circle class="st12" cx="320" cy="113.2" r="7.3" />
-        <circle class="st12" cx="320" cy="113.2" r="5.2" />
+      <g 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-s21">
-        <circle class="st12" cx="289.2" cy="228.8" r="7.3" />
-        <circle class="st12" cx="289.2" cy="228.8" r="5.2" />
+      <g 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-s22">
-        <circle class="st12" cx="319.4" cy="198.4" r="7.3" />
-        <circle class="st12" cx="319.4" cy="198.4" r="5.2" />
+      <g 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-s26">
-        <circle class="st12" cx="231.7" cy="116.4" r="7.3" />
-        <circle class="st12" cx="231.7" cy="116.4" r="5.2" />
+      <g 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-s17">
-        <circle class="st12" cx="139.9" cy="234.5" r="7.3" />
-        <circle class="st12" cx="139.9" cy="234.5" r="5.2" />
+      <g 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-s27">
-        <circle class="st12" cx="192.8" cy="127.3" r="7.3" />
-        <circle class="st12" cx="192.8" cy="127.3" r="5.2" />
+      <g 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">
-        <circle class="st12" cx="135.5" cy="68.9" r="7.3" />
-        <circle class="st12" cx="135.5" cy="68.9" r="5.2" />
+        <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-s30">
-        <circle class="st12" cx="135.5" cy="185.7" r="7.3" />
-        <circle class="st12" cx="135.5" cy="185.7" r="5.2" />
+      <g 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-s3">
+      <g 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-s2">
+      <g 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-s1">
+      <g id="a-s13">
         <ellipse
-          transform="matrix(0.999 -4.542584e-02 4.542584e-02 0.999 -11.7181 1.3207)"
+          transform="matrix(0.9982 -6.054976e-02 6.054976e-02 0.9982 -15.61 1.8791)"
           class="st12"
           cx="23.2"
           cy="258.5"
@@ -254,55 +253,51 @@
         />
         <circle class="st12" cx="23.2" cy="258.5" r="5.2" />
       </g>
-      <g id="a-s6">
-        <circle class="st12" cx="42.2" cy="42.2" r="7.3" />
-        <circle class="st12" cx="42.2" cy="42.2" r="5.2" />
-      </g>
-      <g id="a-s7">
-        <circle class="st12" cx="76.9" cy="42.2" r="7.3" />
-        <circle class="st12" cx="76.9" cy="42.2" r="5.2" />
+      <g 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-s8">
-        <circle class="st12" cx="111.6" cy="42.2" r="7.3" />
-        <circle class="st12" cx="111.6" cy="42.2" r="5.2" />
+      <g 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-s9">
-        <circle class="st12" cx="146.3" cy="42.2" r="7.3" />
-        <circle class="st12" cx="146.3" cy="42.2" r="5.2" />
+      <g 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-s10">
-        <circle class="st12" cx="181" cy="42.2" r="7.3" />
-        <circle class="st12" cx="181" cy="42.2" r="5.2" />
+      <g 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-s11">
-        <circle class="st12" cx="215.8" cy="42.2" r="7.3" />
-        <circle class="st12" cx="215.8" cy="42.2" r="5.2" />
+      <g 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-s12">
+      <g id="a-s23">
         <ellipse
-          transform="matrix(0.6408 -0.7677 0.7677 0.6408 57.5652 207.4727)"
+          transform="matrix(0.8 -0.5999 0.5999 0.8 19.1046 145.8987)"
           class="st12"
-          cx="250.5"
-          cy="42.2"
+          cx="228.4"
+          cy="44.3"
           rx="7.3"
           ry="7.3"
         />
-        <circle class="st12" cx="250.5" cy="42.2" r="5.2" />
+        <circle class="st12" cx="228.4" cy="44.3" r="5.2" />
       </g>
-      <g id="a-s13">
+      <g id="a-s24">
         <ellipse
-          transform="matrix(0.3162 -0.9487 0.9487 0.3162 154.9929 299.3039)"
+          transform="matrix(0.3162 -0.9487 0.9487 0.3162 140.8987 284.0616)"
           class="st12"
-          cx="285.1"
-          cy="42.1"
+          cx="267.5"
+          cy="44.3"
           rx="7.3"
           ry="7.3"
         />
-        <circle class="st12" cx="285.2" cy="42.2" r="5.2" />
+        <circle class="st12" cx="267.6" cy="44.3" r="5.2" />
       </g>
-      <g id="a-s14">
-        <circle class="st12" cx="319.9" cy="42.2" r="7.3" />
-        <circle class="st12" cx="319.9" cy="42.2" r="5.2" />
+      <g 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>
     </g>
   </svg>
@@ -340,6 +335,7 @@ export default {
           return key == newVal;
         });
 
+        this.$emit("currentPano", this.data[kk] || {});
         document.querySelector("#point") &&
           Array.from(document.querySelector("#point").childNodes).forEach(
             (item) => {
@@ -423,7 +419,6 @@ export default {
   opacity: 0.6;
   fill: #ffffff;
 }
-
 svg {
   width: 60%;
 }

+ 110 - 96
src/pages/scene/mapsvg/b.vue

@@ -17,12 +17,11 @@
         d="M3.9,27h305c22.3,0,40.5,16.5,40.5,36.9v180c0,20.4-18.2,36.9-40.5,36.9H3.9V27L3.9,27z"
       />
       <g class="st1">
-        <rect x="4.4" y="83.6" class="st2" width="3.7" height="16.5" />
-        <rect x="4.4" y="44.3" class="st2" width="3.7" height="16.5" />
-        <rect x="4.4" y="241.4" class="st2" width="3.7" height="16.5" />
-        <rect x="4.4" y="123.1" class="st2" width="3.7" height="16.5" />
-        <rect x="4.4" y="162.5" class="st2" width="3.7" height="16.5" />
-        <rect x="4.4" y="202" class="st2" width="3.7" height="16.5" />
+        <rect x="4.4" y="89.6" class="st2" width="3.7" height="16.5" />
+        <rect x="4.4" y="50.3" class="st2" width="3.7" height="16.5" />
+        <rect x="4.4" y="141.8" class="st2" width="3.7" height="16.5" />
+        <rect x="4.4" y="185.8" class="st2" width="3.7" height="16.5" />
+        <rect x="4.4" y="229.9" class="st2" width="3.7" height="16.5" />
         <g class="st3">
           <rect x="67.2" y="37.2" class="st4" width="4.4" height="75.6" />
           <polygon
@@ -104,131 +103,147 @@
       </g>
     </g>
     <g id="point">
-      <g id="b-s1">
-        <ellipse class="st9" cx="22.3" cy="71.3" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="22.3" cy="71.3" rx="5.2" ry="5.2" />
-      </g>
       <g id="b-s21">
-        <ellipse class="st9" cx="48.2" cy="65.9" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="48.2" cy="65.9" rx="5.2" ry="5.2" />
+        <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-s22">
-        <ellipse class="st9" cx="89.1" cy="65.5" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="89.1" cy="65.5" rx="5.2" ry="5.2" />
-      </g>
-      <g id="b-s19">
-        <ellipse class="st9" cx="48.2" cy="103.2" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="48.2" cy="103.2" rx="5.2" ry="5.2" />
+      <g 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-s20">
-        <ellipse class="st9" cx="89.1" cy="102.9" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="89.1" cy="102.9" rx="5.2" ry="5.2" />
+      <g 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-s9">
-        <ellipse class="st9" cx="49.6" cy="207.7" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="49.6" cy="207.7" rx="5.2" ry="5.2" />
+      <g 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-s10">
-        <ellipse class="st9" cx="87.2" cy="207.7" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="87.2" cy="207.7" rx="5.2" ry="5.2" />
+      <g 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-s13">
-        <ellipse class="st9" cx="137.3" cy="207.7" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="137.3" cy="207.7" rx="5.2" ry="5.2" />
+      <g 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-s24">
-        <ellipse class="st9" cx="200" cy="75.1" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="200" cy="75.1" rx="5.2" ry="5.2" />
+      <g 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-s23">
-        <ellipse class="st9" cx="119.5" cy="71.5" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="119.5" cy="71.5" rx="5.2" ry="5.2" />
+      <g 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-s25">
-        <ellipse class="st9" cx="226.9" cy="81.2" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="226.9" cy="81.2" rx="5.2" ry="5.2" />
+      <g 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-s26">
+      <g id="b-s4">
         <ellipse
-          transform="matrix(0.4641 -0.8858 0.8858 0.4641 69.0232 276.4746)"
+          transform="matrix(0.6 -0.8 0.8 0.6 52.8057 236.6051)"
           class="st9"
           cx="263"
-          cy="81.2"
+          cy="65.5"
           rx="7.3"
           ry="7.3"
         />
-        <ellipse class="st9" cx="263" cy="81.2" rx="5.2" ry="5.2" />
+        <ellipse class="st9" cx="263" cy="65.5" rx="5.2" ry="5.2" />
       </g>
-      <g id="b-s27">
-        <ellipse class="st9" cx="298.9" cy="54.9" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="298.9" cy="54.9" rx="5.2" ry="5.2" />
-      </g>
-      <g id="b-s28">
-        <ellipse class="st9" cx="322.6" cy="86" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="322.6" cy="86" rx="5.2" ry="5.2" />
+      <g id="b-s5">
+        <ellipse
+          transform="matrix(0.9917 -0.1284 0.1284 0.9917 -3.2656 39.9576)"
+          class="st9"
+          cx="308.2"
+          cy="45.3"
+          rx="7.3"
+          ry="7.3"
+        />
+        <ellipse
+          transform="matrix(0.9917 -0.1284 0.1284 0.9917 -3.2656 39.9576)"
+          class="st9"
+          cx="308.2"
+          cy="45.3"
+          rx="5.2"
+          ry="5.2"
+        />
       </g>
-      <g id="b-s18">
-        <ellipse class="st9" cx="324.1" cy="221.8" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="324.1" cy="221.8" rx="5.2" ry="5.2" />
+      <g id="b-s1">
+        <ellipse
+          transform="matrix(0.9917 -0.1284 0.1284 0.9917 -6.6081 43.7194)"
+          class="st9"
+          cx="335.7"
+          cy="73.1"
+          rx="7.3"
+          ry="7.3"
+        />
+        <ellipse
+          transform="matrix(0.9917 -0.1284 0.1284 0.9917 -6.6081 43.7194)"
+          class="st9"
+          cx="335.7"
+          cy="73.1"
+          rx="5.2"
+          ry="5.2"
+        />
       </g>
-      <g id="b-s17">
-        <ellipse class="st9" cx="298.1" cy="251.9" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="298.1" cy="251.9" rx="5.2" ry="5.2" />
+      <g 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-s15">
-        <ellipse class="st9" cx="223.4" cy="230.2" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="223.4" cy="230.2" rx="5.2" ry="5.2" />
+      <g 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-s16">
-        <ellipse class="st9" cx="263.7" cy="230.2" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="263.7" cy="230.2" rx="5.2" ry="5.2" />
+      <g 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-s14">
-        <ellipse class="st9" cx="176.9" cy="207.7" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="176.9" cy="207.7" rx="5.2" ry="5.2" />
+      <g 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-s7">
-        <ellipse class="st9" cx="49.6" cy="243.3" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="49.6" cy="243.3" rx="5.2" ry="5.2" />
+      <g 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-s8">
-        <ellipse class="st9" cx="87.2" cy="243.3" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="87.2" cy="243.3" rx="5.2" ry="5.2" />
+      <g 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-s11">
-        <ellipse class="st9" cx="137.3" cy="243.3" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="137.3" cy="243.3" rx="5.2" ry="5.2" />
+      <g 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-s12">
-        <ellipse class="st9" cx="176.9" cy="243.3" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="176.9" cy="243.3" rx="5.2" ry="5.2" />
+      <g 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-s2">
-        <ellipse class="st9" cx="22.3" cy="109.6" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="22.3" cy="109.6" rx="5.2" ry="5.2" />
+      <g 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-s3">
-        <ellipse class="st9" cx="22.3" cy="147.8" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="22.3" cy="147.8" rx="5.2" ry="5.2" />
+      <g 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-s4">
-        <ellipse class="st9" cx="22.3" cy="186.2" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="22.3" cy="186.2" rx="5.2" ry="5.2" />
+      <g 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-s5">
-        <ellipse class="st9" cx="22.3" cy="224.5" rx="7.3" ry="7.3" />
-        <ellipse class="st9" cx="22.3" cy="224.5" rx="5.2" ry="5.2" />
+      <g 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-s6">
+      <g id="b-s17">
         <ellipse
-          transform="matrix(0.999 -4.542588e-02 4.542588e-02 0.999 -11.9099 1.2841)"
+          transform="matrix(0.9982 -6.054977e-02 6.054977e-02 0.9982 -14.382 1.7873)"
           class="st9"
           cx="22.3"
-          cy="262.7"
+          cy="238.2"
           rx="7.3"
           ry="7.3"
         />
-        <ellipse class="st9" cx="22.3" cy="262.7" rx="5.2" ry="5.2" />
+        <ellipse class="st9" cx="22.3" cy="238.2" rx="5.2" ry="5.2" />
       </g>
     </g>
   </svg>
@@ -265,6 +280,7 @@ export default {
           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(
@@ -283,7 +299,6 @@ export default {
 
 <style lang="less" scoped>
 @color: #00b1ff;
-
 .st0 {
   opacity: 0.89;
   fill: #343434;
@@ -332,7 +347,6 @@ export default {
   opacity: 0.6;
   fill: #ffffff;
 }
-
 svg {
   width: 60%;
 }

+ 70 - 102
src/pages/scene/mapsvg/c.vue

@@ -56,7 +56,7 @@
           <rect
             x="41.6"
             y="23.3"
-            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -30.3527 48.8517)"
+            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -30.3434 48.8428)"
             class="st7"
             width="4.4"
             height="75.5"
@@ -67,7 +67,7 @@
           <rect
             x="6.1"
             y="236.4"
-            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -155.8706 100.8956)"
+            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -155.8747 100.8918)"
             class="st7"
             width="75.5"
             height="4.4"
@@ -108,111 +108,95 @@
       </g>
     </g>
     <g id="point">
-      <g id="c-s1">
-        <circle class="st8" cx="176.1" cy="43.5" r="7.2" />
-        <circle class="st8" cx="176.1" cy="43.5" r="5.2" />
+      <g 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-s2">
-        <circle class="st8" cx="214.7" cy="43.5" r="7.2" />
-        <circle class="st8" cx="214.7" cy="43.5" r="5.2" />
+      <g 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-s3">
-        <circle class="st8" cx="253.3" cy="43.5" r="7.2" />
-        <circle class="st8" cx="253.3" cy="43.5" r="5.2" />
+      <g 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-s4">
-        <circle class="st8" cx="292.1" cy="43.5" r="7.2" />
-        <circle class="st8" cx="292.1" cy="43.5" r="5.2" />
+      <g 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-s5">
-        <circle class="st8" cx="330.7" cy="43.5" r="7.2" />
-        <circle class="st8" cx="330.7" cy="43.5" r="5.2" />
+      <g 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-s6">
-        <circle class="st8" cx="322.9" cy="73.2" r="7.2" />
-        <circle class="st8" cx="322.9" cy="73.2" r="5.2" />
+      <g 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-s11">
-        <circle class="st8" cx="304.5" cy="101.5" r="7.2" />
-        <circle class="st8" cx="304.5" cy="101.5" r="5.2" />
+      <g 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-s12">
+      <g id="c-s25">
         <ellipse
-          transform="matrix(0.4641 -0.8858 0.8858 0.4641 56.4875 296.2812)"
+          transform="matrix(0.4641 -0.8858 0.8858 0.4641 78.9452 283.2633)"
           class="st8"
-          cx="273.1"
-          cy="101.5"
+          cx="273.6"
+          cy="76.4"
           rx="7.2"
           ry="7.2"
         />
-        <circle class="st8" cx="273.1" cy="101.5" r="5.2" />
+        <circle class="st8" cx="273.5" cy="76.4" r="5.2" />
       </g>
-      <g id="c-s23">
-        <circle class="st8" cx="305.5" cy="194.7" r="7.2" />
-        <circle class="st8" cx="305.5" cy="194.7" r="5.2" />
+      <g 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-s24">
+      <g id="c-s20">
         <ellipse
-          transform="matrix(0.4641 -0.8858 0.8858 0.4641 -25.4777 347.2203)"
+          transform="matrix(0.4641 -0.8858 0.8858 0.4641 -45.6486 358.6445)"
           class="st8"
-          cx="274.2"
-          cy="194.7"
+          cx="273.6"
+          cy="217"
           rx="7.2"
           ry="7.2"
         />
-        <circle class="st8" cx="274.1" cy="194.7" r="5.2" />
+        <circle class="st8" cx="273.4" cy="217.1" r="5.2" />
       </g>
-      <g id="c-s25">
-        <circle class="st8" cx="243.4" cy="195" r="7.2" />
-        <circle class="st8" cx="243.4" cy="195" r="5.2" />
-      </g>
-      <g id="c-s26">
-        <circle class="st8" cx="212.1" cy="195" r="7.2" />
-        <circle class="st8" cx="212.1" cy="195" r="5.2" />
+      <g 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-s13">
-        <circle class="st8" cx="242.5" cy="99.7" r="7.2" />
-        <circle class="st8" cx="242.5" cy="99.7" r="5.2" />
+      <g 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-s14">
-        <circle class="st8" cx="211.1" cy="99.7" r="7.2" />
-        <circle class="st8" cx="211.1" cy="99.7" r="5.2" />
+      <g 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-s17">
-        <circle class="st8" cx="164.4" cy="107.8" r="7.2" />
-        <circle class="st8" cx="164.4" cy="107.8" r="5.2" />
+      <g 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-s15">
+      <g 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-s18">
-        <circle class="st8" cx="129.2" cy="108.2" r="7.2" />
-        <circle class="st8" cx="129.2" cy="108.2" r="5.2" />
-      </g>
-      <g id="c-s16">
+      <g 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-s29">
+      <g 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-s27">
-        <circle class="st8" cx="163.8" cy="198.7" r="7.2" />
-        <circle class="st8" cx="163.8" cy="198.7" r="5.2" />
-      </g>
-      <g id="c-s30">
+      <g 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-s28">
-        <circle class="st8" cx="128.7" cy="199.1" r="7.2" />
-        <circle class="st8" cx="128.7" cy="199.1" r="5.2" />
-      </g>
-      <g id="c-s33">
+      <g id="c-s5">
         <ellipse
-          transform="matrix(0.1356 -0.9908 0.9908 0.1356 -220.2241 271.1417)"
+          transform="matrix(0.1356 -0.9908 0.9908 0.1356 -220.1748 271.1569)"
           class="st8"
           cx="45.3"
           cy="261.8"
@@ -221,49 +205,33 @@
         />
         <circle class="st8" cx="45.2" cy="261.8" r="5.2" />
       </g>
-      <g id="c-s31">
-        <circle class="st8" cx="67.8" cy="240.1" r="7.2" />
-        <circle class="st8" cx="67.8" cy="240.1" r="5.2" />
-      </g>
-      <g id="c-s34">
+      <g 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-s32">
-        <circle class="st8" cx="43.1" cy="215" r="7.2" />
-        <circle class="st8" cx="43.1" cy="215" r="5.2" />
-      </g>
-      <g id="c-s22">
+      <g 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-s20">
-        <circle class="st8" cx="44.3" cy="87.1" r="7.2" />
-        <circle class="st8" cx="44.3" cy="87.1" r="5.2" />
-      </g>
-      <g id="c-s21">
+      <g 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-s19">
-        <circle class="st8" cx="68.4" cy="61.4" r="7.2" />
-        <circle class="st8" cx="68.4" cy="61.4" r="5.2" />
-      </g>
-      <g id="c-s7">
-        <circle class="st8" cx="322.9" cy="121.1" r="7.2" />
-        <circle class="st8" cx="322.9" cy="121.1" r="5.2" />
+      <g 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-s8">
-        <circle class="st8" cx="322.9" cy="168.9" r="7.2" />
-        <circle class="st8" cx="322.9" cy="168.9" r="5.2" />
+      <g 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-s9">
-        <circle class="st8" cx="322.9" cy="216.8" r="7.2" />
-        <circle class="st8" cx="322.9" cy="216.8" r="5.2" />
+      <g 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-s10">
-        <circle class="st8" cx="322.9" cy="261.3" r="7.2" />
-        <circle class="st8" cx="322.9" cy="261.3" r="5.2" />
+      <g 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>
     </g>
   </svg>
@@ -300,6 +268,7 @@ export default {
           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(
@@ -360,7 +329,6 @@ export default {
   opacity: 0.6;
   fill: #ffffff;
 }
-
 svg {
   width: 60%;
 }

+ 439 - 0
src/components/mapsvg/d.vue

@@ -0,0 +1,439 @@
+<template>
+  <svg
+    version="1.1"
+    id="D_1_"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    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>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: ["data", "currentPanoid"],
+  data() {
+    let keysData = Object.keys(this.data);
+    return {
+      keysData,
+    };
+  },
+  methods: {
+    handleClick(e) {
+      let target = e.target.parentElement;
+      let tt = this.data[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),
+        });
+      }
+    },
+  },
+  watch: {
+    currentPanoid: {
+      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");
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@color: #05ccaa;
+.st0 {
+  opacity: 0.89;
+  fill: #343434;
+}
+.st1 {
+  opacity: 0.6;
+}
+.st2 {
+  opacity: 0.7;
+  fill: #ffffff;
+}
+.st3 {
+  opacity: 0.8;
+}
+.st4 {
+  fill: #ffffff;
+}
+.st5 {
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 2.0001;
+  stroke-miterlimit: 10.0004;
+}
+.st6 {
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+}
+.st7 {
+  opacity: 0.4;
+}
+.st8 {
+  opacity: 0.4;
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.st9 {
+  opacity: 0.4;
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+.st10 {
+  opacity: 0.6;
+  fill: #ffffff;
+}
+svg {
+  width: 50%;
+}
+#point {
+  > g {
+    cursor: pointer;
+    &:hover {
+      ellipse,
+      circle {
+        fill: @color;
+      }
+    }
+  }
+}
+</style>

+ 125 - 139
src/pages/scene/mapsvg/d.vue

@@ -1,7 +1,7 @@
 <template>
   <svg
     version="1.1"
-    id="D_1_"
+    id="E_1_"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px"
@@ -9,9 +9,9 @@
     viewBox="0 0 350 300"
     xml:space="preserve"
   >
-    <g id="d">
+    <g id="e">
       <path
-        id="d_x5F_1"
+        id="e_x5F_1"
         class="st0"
         d="M4.2,3.7h300.5c22,0,40,16,40,35.8v255.6H4.3L4.2,3.7C4.3,3.7,4.2,3.7,4.2,3.7z"
       />
@@ -40,7 +40,7 @@
             <rect
               x="57.1"
               y="10.4"
-              transform="matrix(1 -6.120430e-03 6.120430e-03 1 -9.982489e-02 0.3807)"
+              transform="matrix(1 -6.120315e-03 6.120315e-03 1 -9.982308e-02 0.3807)"
               class="st4"
               width="10.1"
               height="12.2"
@@ -50,7 +50,7 @@
             <rect
               x="72.9"
               y="201.2"
-              transform="matrix(0.7071 -0.7071 0.7071 0.7071 -136.5873 118.7546)"
+              transform="matrix(0.7071 -0.7071 0.7071 0.7071 -136.5905 118.7492)"
               class="st4"
               width="4.3"
               height="46.1"
@@ -59,7 +59,7 @@
             <rect
               x="62.3"
               y="210.9"
-              transform="matrix(0.7028 -0.7114 0.7114 0.7028 -134.3687 112.401)"
+              transform="matrix(0.7028 -0.7114 0.7114 0.7028 -134.356 112.3968)"
               class="st4"
               width="10.1"
               height="12.2"
@@ -71,7 +71,7 @@
             <rect
               x="324.9"
               y="162.8"
-              transform="matrix(1 -6.120430e-03 6.120430e-03 1 -1.0211 2.029)"
+              transform="matrix(1 -6.120315e-03 6.120315e-03 1 -1.0211 2.029)"
               class="st4"
               width="12.2"
               height="10.1"
@@ -83,7 +83,7 @@
             <rect
               x="324.9"
               y="227.9"
-              transform="matrix(1 -6.120430e-03 6.120430e-03 1 -1.4196 2.0303)"
+              transform="matrix(1 -6.120315e-03 6.120315e-03 1 -1.4196 2.0302)"
               class="st4"
               width="12.2"
               height="10.1"
@@ -100,7 +100,7 @@
             <rect
               x="230.1"
               y="7.3"
-              transform="matrix(0.6847 -0.7288 0.7288 0.6847 44.8392 181.6614)"
+              transform="matrix(0.6847 -0.7288 0.7288 0.6847 44.851 181.6601)"
               class="st4"
               width="4.6"
               height="63.4"
@@ -114,7 +114,7 @@
             <rect
               x="298.1"
               y="71.6"
-              transform="matrix(0.6847 -0.7288 0.7288 0.6847 19.4259 251.5098)"
+              transform="matrix(0.6847 -0.7288 0.7288 0.6847 19.4187 251.5034)"
               class="st4"
               width="4.6"
               height="63.4"
@@ -128,7 +128,7 @@
             <rect
               x="205.4"
               y="79.7"
-              transform="matrix(0.7071 -0.7072 0.7072 0.7071 -17.931 179.5146)"
+              transform="matrix(0.7071 -0.7072 0.7072 0.7071 -17.9284 179.5215)"
               class="st4"
               width="4.6"
               height="63.4"
@@ -140,7 +140,15 @@
           </g>
           <g class="st3">
             <circle class="st5" cx="140.8" cy="170.8" r="26.8" />
-            <rect x="123.3" y="153.5" class="st4" width="34.8" height="34.8" />
+
+            <rect
+              x="123.3"
+              y="153.5"
+              transform="matrix(0.7071 -0.7071 0.7071 0.7071 -79.6345 149.5454)"
+              class="st4"
+              width="34.8"
+              height="34.8"
+            />
           </g>
           <g class="st3">
             <circle class="st5" cx="79.7" cy="109.8" r="23" />
@@ -153,7 +161,7 @@
         </g>
       </g>
       <g class="st6">
-        <path id="d_x5F_2" class="st7" d="M346.3,297.5H2.1V2.1" />
+        <path id="e_x5F_2" class="st7" d="M346.3,297.5H2.1V2.1" />
         <path
           class="st8"
           d="M4.5,3.7h165.3c13,0,25.5,4.6,34.7,12.9c25.2,30.5,96.7,98.8,125.8,117.4c9.3,8.2,14.3,19.4,14.3,31.1v130.1"
@@ -161,168 +169,145 @@
       </g>
     </g>
     <g id="point">
-      <g id="d-s13">
-        <circle class="st9" cx="26.6" cy="19.8" r="7.1" />
-        <circle class="st9" cx="26.6" cy="19.8" r="5.1" />
+      <g 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="d-s12">
-        <circle class="st9" cx="26.1" cy="59.1" r="7.1" />
-        <circle class="st9" cx="26.1" cy="59.1" r="5.1" />
+      <g 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="d-s14">
-        <circle class="st9" cx="44.2" cy="38.5" r="7.1" />
-        <circle class="st9" cx="44.2" cy="38.5" r="5.1" />
+      <g 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="d-s15">
-        <circle class="st9" cx="79.6" cy="37.1" r="7.1" />
-        <circle class="st9" cx="79.6" cy="37.1" r="5.1" />
+      <g 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="d-s11">
-        <circle class="st9" cx="26.6" cy="162.4" r="7.1" />
-        <circle class="st9" cx="26.6" cy="162.4" r="5.1" />
+      <g 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="d-s10">
-        <circle class="st9" cx="26.6" cy="201.6" r="7.1" />
-        <circle class="st9" cx="26.6" cy="201.6" r="5.1" />
+      <g 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="d-s9">
-        <circle class="st9" cx="26.6" cy="240.9" r="7.1" />
-        <circle class="st9" cx="26.6" cy="240.9" r="5.1" />
+      <g 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="d-s8">
-        <circle class="st9" cx="61.6" cy="275.3" r="7.1" />
-        <circle class="st9" cx="61.6" cy="275.3" r="5.1" />
+      <g 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="d-s7">
-        <circle class="st9" cx="99.7" cy="275.3" r="7.1" />
-        <circle class="st9" cx="99.7" cy="275.3" r="5.1" />
+      <g 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="d-s32">
-        <circle class="st9" cx="67.3" cy="242.6" r="7.1" />
-        <circle class="st9" cx="67.3" cy="242.6" r="5.1" />
+      <g 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="d-s33">
-        <circle class="st9" cx="93.7" cy="216.9" r="7.1" />
-        <circle class="st9" cx="93.7" cy="216.9" r="5.1" />
+      <g 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="d-s35">
-        <circle class="st9" cx="111.9" cy="139.7" r="7.1" />
-        <circle class="st9" cx="111.9" cy="139.7" r="5.1" />
+      <g 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="d-s34">
-        <circle class="st9" cx="168.5" cy="201.1" r="7.1" />
-        <circle class="st9" cx="168.5" cy="201.1" r="5.1" />
+      <g 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="d-s36">
+      <g 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">
+        <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">
         <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="d-s28">
-        <circle class="st9" cx="314.8" cy="152.9" r="7.1" />
-        <circle class="st9" cx="314.8" cy="152.9" r="5.1" />
+      <g 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="d-s29">
-        <circle class="st9" cx="315.2" cy="183.4" r="7.1" />
-        <circle class="st9" cx="315.2" cy="183.4" r="5.1" />
+      <g 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="d-s30">
-        <circle class="st9" cx="316.1" cy="216.5" r="7.1" />
-        <circle class="st9" cx="316.1" cy="216.5" r="5.1" />
+      <g 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="d-s31">
-        <circle class="st9" cx="316.1" cy="251.1" r="7.1" />
-        <circle class="st9" cx="316.1" cy="251.1" r="5.1" />
+      <g 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="d-s38">
-        <circle class="st9" cx="184.9" cy="117.1" r="7.1" />
-        <circle class="st9" cx="184.9" cy="117.1" r="5.1" />
-      </g>
-      <g id="d-s37">
+      <g 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="d-s39">
-        <circle class="st9" cx="212.7" cy="90.1" r="7.1" />
-        <circle class="st9" cx="212.7" cy="90.1" r="5.1" />
-      </g>
-      <g id="d-s16">
-        <circle class="st9" cx="127.6" cy="53.6" r="7.1" />
-        <circle class="st9" cx="127.6" cy="53.6" r="5.1" />
+      <g 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="d-s18">
-        <circle class="st9" cx="127.2" cy="25.7" r="7.1" />
-        <circle class="st9" cx="127.2" cy="25.7" r="5.1" />
+      <g 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="d-s17">
-        <circle class="st9" cx="166.3" cy="54.2" r="7.1" />
-        <circle class="st9" cx="166.3" cy="54.2" r="5.1" />
+      <g 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="d-s19">
-        <circle class="st9" cx="166" cy="26.4" r="7.1" />
-        <circle class="st9" cx="166" cy="26.4" r="5.1" />
+      <g 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="d-s22">
-        <circle class="st9" cx="228.2" cy="62.5" r="7.1" />
-        <circle class="st9" cx="228.2" cy="62.5" r="5.1" />
-      </g>
-      <g id="d-s20">
-        <circle class="st9" cx="208.4" cy="43.1" r="7.1" />
-        <circle class="st9" cx="208.4" cy="43.1" r="5.1" />
-      </g>
-      <g id="d-s26">
-        <circle class="st9" cx="297.1" cy="125.8" r="7.1" />
-        <circle class="st9" cx="297.1" cy="125.8" r="5.1" />
-      </g>
-      <g id="d-s24">
+      <g id="e-s2">
+        <circle class="st9" cx="321.7" cy="99.1" r="7.1" />
+
         <ellipse
-          transform="matrix(0.3162 -0.9487 0.9487 0.3162 88.705 336.0211)"
+          transform="matrix(0.999 -4.540350e-02 4.540350e-02 0.999 -4.1696 14.7083)"
           class="st9"
-          cx="277.4"
-          cy="106.5"
-          rx="7.1"
-          ry="7.1"
+          cx="321.7"
+          cy="99.1"
+          rx="5.1"
+          ry="5.1"
         />
-        <circle class="st9" cx="277.3" cy="106.3" r="5.1" />
-      </g>
-      <g id="d-s27">
-        <circle class="st9" cx="322.3" cy="99.7" r="7.1" />
-        <circle class="st9" cx="322.3" cy="99.7" r="5.1" />
-      </g>
-      <g id="d-s25">
-        <circle class="st9" cx="302.5" cy="80.2" r="7.1" />
-        <circle class="st9" cx="302.5" cy="80.2" r="5.1" />
-      </g>
-      <g id="d-s23">
-        <circle class="st9" cx="256.6" cy="38.2" r="7.1" />
-        <circle class="st9" cx="256.6" cy="38.2" r="5.1" />
       </g>
-      <g id="d-s21">
-        <circle class="st9" cx="236.7" cy="18.8" r="7.1" />
-        <circle class="st9" cx="236.7" cy="18.8" r="5.1" />
+      <g 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="d-s6">
-        <circle class="st9" cx="137.8" cy="275.3" r="7.1" />
-        <circle class="st9" cx="137.8" cy="275.3" r="5.1" />
+      <g 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="d-s5">
-        <circle class="st9" cx="175.8" cy="275.3" r="7.1" />
-        <circle class="st9" cx="175.8" cy="275.3" r="5.1" />
+      <g 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="d-s4">
-        <circle class="st9" cx="213.9" cy="275.3" r="7.1" />
-        <circle class="st9" cx="213.9" cy="275.3" r="5.1" />
+      <g 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="d-s3">
-        <circle class="st9" cx="252" cy="275.3" r="7.1" />
-        <circle class="st9" cx="252" cy="275.3" r="5.1" />
+      <g 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="d-s2">
-        <circle class="st9" cx="289.9" cy="275.3" r="7.1" />
-        <circle class="st9" cx="289.9" cy="275.3" r="5.1" />
+      <g 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="d-s1">
-        <circle class="st9" cx="328" cy="275.3" r="7.1" />
-        <circle class="st9" cx="328" cy="275.3" r="5.1" />
+      <g 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>
@@ -359,6 +344,7 @@ export default {
           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(
@@ -376,7 +362,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@color: #05ccaa;
+@color: #961319;
 .st0 {
   opacity: 0.89;
   fill: #343434;

+ 192 - 0
src/components/mapsvg/pano.js

@@ -0,0 +1,192 @@
+let xuting = {
+  "xt-s1": {
+    id: "4",
+    name:"创业带动就业持续增长",
+    quaternion:{
+      w: -0.48899862433554325,
+      x: -0.020489121201029994,
+      y: 0.8712794101764484,
+      z: -0.036506747279894156
+    }
+  },
+  "xt-s2": {
+    id: "5",
+    name:"创新创业引领科技自立自强",
+    quaternion:{
+      w: -0.39342658997007796,
+      x: -0.02397290796074073,
+      y: 0.9173420004226148,
+      z: -0.055896976992443406
+    }
+  },
+  "xt-s3": {
+    id: "6",
+    name:"改革激发创新创业创造活力",
+    quaternion:{
+      w: -0.258228401069883,
+      x: -0.009980593843465457,
+      y: 0.9653116010820396,
+      z: -0.0373095399503925
+    }
+  },
+  "xt-s4": {
+    id: "7",
+    name:"创新创业助力构建新发展格局",
+    quaternion:{
+      w: -0.17074721312582286,
+      x: -0.0065298104251162,
+      y: 0.9845735334583183,
+      z: -0.03765261121628165
+    }
+  },
+  "xt-s5": {
+    id: "8",
+    name:"双创平台支撑创新创业高质量发展",
+    quaternion:{
+      w: -0.04002502299979635,
+      x: -0.0012324302507161575,
+      y: 0.9987245785744749,
+      z: -0.030752220513078993
+    }
+  },
+  "xt-s6": {
+    id: "9",
+    name:"创新创业提升中国国际影响力",
+    quaternion:{
+      w: 0.05257012915268989,
+      x: 0.0014322343582609486,
+      y: 0.9982458091794039,
+      z: -0.027196469583817034
+    }
+  },
+  "xt-s7": {
+    id: "10",
+    name:"结语",
+    quaternion:{
+      w: 0.21572057631910446,
+      x: 0.003136569368125476,
+      y: 0.976346900028651,
+      z: -0.014196049086571521
+    }
+  },
+  "xt-s8": {
+    id: "27",
+    name:"众字LOGO",
+    quaternion:{
+      w: 0.9982843135273848,
+      x: 0.0014867494663161683,
+      y: -0.058533809368155394,
+      z: 0.00008717467408759358
+    }
+  },
+  "xt-s9": {
+    id: "26",
+    name:"郑郑",
+    quaternion:{
+      w: 0.9479032356582254,
+      x: -0.035647172931202085,
+      y: 0.3163340347064182,
+      z: 0.011896166395155007
+    }
+  },
+  "xt-s10": {
+    id: "28",
+    name:"百家姓",
+    quaternion:{
+      w: 0.680766810758068,
+      x: 0.017790820421990202,
+      y: 0.7320341964740616,
+      z: -0.019130617046934133
+    }
+  },
+  "xt-s11": {
+    id: "24",
+    name:"壮壮",
+    quaternion:{
+      w: 0.1733867670712795,
+      x: -0.006201784977174526,
+      y: 0.9842048982456102,
+      z: 0.03520353612711665
+    }
+  },
+  "xt-s12": {
+    id: "3",
+    name:"前言",
+    quaternion:{
+      w: 0.5598583977774245,
+      x: 0.022962951973351093,
+      y: -0.8275742308064644,
+      z: 0.03394348964578123
+    }
+  }
+
+};
+
+let a = {
+  "xt-s1": {
+    id: "f9c512d30ff840d9b4840e75faa025e6",
+    quaternion:{
+      w: 0.8696978465132004,
+      x: 0.13430582882853137,
+      y: 0.46939649520137916,
+      z: -0.07248803207029887
+    }
+  }
+};
+
+let b = {
+  "xt-s1": {
+    id: "f9c512d30ff840d9b4840e75faa025e6",
+    quaternion:{
+      w: 0.8696978465132004,
+      x: 0.13430582882853137,
+      y: 0.46939649520137916,
+      z: -0.07248803207029887
+    }
+  }
+};
+
+let c = {
+  "xt-s1": {
+    id: "f9c512d30ff840d9b4840e75faa025e6",
+    quaternion:{
+      w: 0.8696978465132004,
+      x: 0.13430582882853137,
+      y: 0.46939649520137916,
+      z: -0.07248803207029887
+    }
+  }
+};
+
+let d = {
+  "xt-s1": {
+    id: "f9c512d30ff840d9b4840e75faa025e6",
+    quaternion:{
+      w: 0.8696978465132004,
+      x: 0.13430582882853137,
+      y: 0.46939649520137916,
+      z: -0.07248803207029887
+    }
+  }
+};
+
+let e = {
+  "xt-s1": {
+    id: "f9c512d30ff840d9b4840e75faa025e6",
+    quaternion:{
+      w: 0.8696978465132004,
+      x: 0.13430582882853137,
+      y: 0.46939649520137916,
+      z: -0.07248803207029887
+    }
+  }
+};
+
+export default {
+  xuting,
+  a,
+  b,
+  c,
+  d,
+  e
+};

src/pages/scene/mapsvg/show.vue → src/components/mapsvg/show.vue


+ 293 - 0
src/components/mapsvg/xuting.vue

@@ -0,0 +1,293 @@
+<template>
+  <svg
+    version="1.1"
+    id="XT"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 300 300"
+    xml:space="preserve"
+  >
+    <g id="xt_1_">
+      <circle id="xt_x5F_2" class="st0" cx="150.5" cy="150.6" r="147.9" />
+      <circle id="xt_x5F_1" class="st0" cx="141.1" cy="133.4" r="99.4" />
+      <g class="st1">
+        <path
+          class="st2"
+          d="M213,284.3c60.5-28.4,95.9-95.6,81.7-163.9C281.5,56.4,229,10.9,167.5,3.5"
+        />
+        <path
+          class="st2"
+          d="M58.8,33.9C16,67.4-6.7,123.5,5.1,180.4c5.5,26.3,25.8,66.2,51.5,84.7"
+        />
+        <circle class="st3" cx="141.1" cy="132.9" r="99.4" />
+        <path
+          class="st4"
+          d="M240.4,132.9c0,54.9-44.5,99.4-99.4,99.4c-39.3,0-73.3-22.9-89.5-55.9"
+        />
+        <circle class="st3" cx="150.4" cy="151.3" r="147.7" />
+      </g>
+      <g class="st5">
+        <rect
+          x="239.4"
+          y="31.3"
+          transform="matrix(0.6343 -0.7731 0.7731 0.6343 58.6197 199.8735)"
+          class="st6"
+          width="2.4"
+          height="13.4"
+        />
+
+        <rect
+          x="200.7"
+          y="8.7"
+          transform="matrix(0.3523 -0.9359 0.9359 0.3523 116.3282 198.9834)"
+          class="st6"
+          width="2.4"
+          height="13.4"
+        />
+
+        <rect
+          x="264.8"
+          y="57.4"
+          transform="matrix(0.8069 -0.5906 0.5906 0.8069 13.5263 169.4816)"
+          class="st6"
+          width="2.4"
+          height="13.4"
+        />
+
+        <rect
+          x="283"
+          y="89.9"
+          transform="matrix(0.9309 -0.3652 0.3652 0.9309 -15.6331 110.4542)"
+          class="st6"
+          width="2.4"
+          height="13.4"
+        />
+
+        <rect
+          x="291.8"
+          y="124.1"
+          transform="matrix(0.9917 -0.1285 0.1285 0.9917 -14.3734 38.7172)"
+          class="st6"
+          width="2.4"
+          height="13.4"
+        />
+
+        <rect
+          x="286.7"
+          y="166.3"
+          transform="matrix(0.1134 -0.9936 0.9936 0.1134 93.7222 439.9645)"
+          class="st6"
+          width="13.4"
+          height="2.4"
+        />
+
+        <rect
+          x="278.9"
+          y="198.8"
+          transform="matrix(0.3469 -0.9379 0.9379 0.3469 -1.0262 398.4525)"
+          class="st6"
+          width="13.4"
+          height="2.4"
+        />
+
+        <rect
+          x="261.5"
+          y="233"
+          transform="matrix(0.5784 -0.8158 0.8158 0.5784 -77.9707 317.5801)"
+          class="st6"
+          width="13.4"
+          height="2.4"
+        />
+      </g>
+    </g>
+    <g id="point" :class="cls" @click="handleClick">
+      <g :class="'xt-s1' + cls" id="xt-s1">
+        <circle class="st7" cx="230.4" cy="48" r="7.7" />
+        <circle class="st7" cx="230.4" cy="48" r="5.5" />
+      </g>
+      <g :class="'xt-s12' + cls" id="xt-s12">
+        <circle class="st7" cx="197.7" cy="30.6" r="7.7" />
+        <circle class="st7" cx="197.7" cy="30.6" r="5.5" />
+      </g>
+      <g :class="'xt-s2' + cls" id="xt-s2">
+        <circle class="st7" cx="253.8" cy="73.1" r="7.7" />
+        <circle class="st7" cx="253.8" cy="73.1" r="5.5" />
+      </g>
+      <g :class="'xt-s3' + cls" id="xt-s3">
+        <ellipse
+          transform="matrix(0.4641 -0.8858 0.8858 0.4641 53.577 294.2482)"
+          class="st7"
+          cx="270"
+          cy="102.8"
+          rx="7.7"
+          ry="7.7"
+        />
+        <circle class="st7" cx="270" cy="102.9" r="5.5" />
+      </g>
+      <g :class="'xt-s9' + cls" id="xt-s9">
+        <circle class="st7" cx="97" cy="186" r="7.7" />
+        <circle class="st7" cx="97" cy="186" r="5.5" />
+      </g>
+      <g :class="'xt-s10' + cls" id="xt-s10">
+        <circle class="st7" cx="162.1" cy="196.9" r="7.7" />
+        <circle class="st7" cx="162.1" cy="196.9" r="5.5" />
+      </g>
+      <g :class="'xt-s11' + cls" id="xt-s11">
+        <circle class="st7" cx="208.7" cy="158.1" r="7.7" />
+        <circle class="st7" cx="208.7" cy="158.1" r="5.5" />
+      </g>
+      <g :class="'xt-s4' + cls" id="xt-s4">
+        <circle class="st7" cx="277.1" cy="134.7" r="7.7" />
+        <ellipse class="st7" cx="277.2" cy="134.6" rx="5.5" ry="5.5" />
+      </g>
+      <g :class="'xt-s5' + cls" id="xt-s5">
+        <ellipse
+          transform="matrix(0.6 -0.8 0.8 0.6 -21.7909 288.1162)"
+          class="st7"
+          cx="277.2"
+          cy="165.8"
+          rx="7.7"
+          ry="7.7"
+        />
+        <circle class="st7" cx="277.2" cy="165.9" r="5.5" />
+      </g>
+      <g :class="'xt-s6' + cls" id="xt-s6">
+        <circle class="st7" cx="270.6" cy="194.8" r="7.7" />
+        <circle class="st7" cx="270.6" cy="194.8" r="5.5" />
+      </g>
+      <g :class="'xt-s7' + cls" id="xt-s7">
+        <circle class="st7" cx="253.2" cy="223.2" r="7.7" />
+
+        <ellipse
+          transform="matrix(0.4641 -0.8858 0.8858 0.4641 -62.0468 343.9185)"
+          class="st7"
+          cx="253.2"
+          cy="223.2"
+          rx="5.5"
+          ry="5.5"
+        />
+      </g>
+      <g :class="'xt-s8' + cls" id="xt-s8">
+        <circle class="st7" cx="31.5" cy="99.7" r="7.7" />
+        <circle class="st7" cx="31.5" cy="99.7" r="5.5" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: ["data", "currentPanoid", "cls"],
+  data() {
+    let keysData = Object.keys(this.data);
+    return {
+      keysData,
+    };
+  },
+  methods: {
+    handleClick(e) {
+      let target = e.target.parentElement;
+      let tt = this.data[target.id];
+      if (tt) {
+        let { x, y, z, w } = tt.quaternion;
+        console.log(tt.id);
+        console.log(x, y, z, w);
+        window.player.flyToPano({
+          pano: window.player.model.panos.index[tt.id],
+          quaternion: new THREE.Quaternion(x, y, z, w),
+        });
+      }
+    },
+  },
+  watch: {
+    currentPanoid: {
+      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");
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@color: #b1302e;
+.st0 {
+  opacity: 0.89;
+  fill: #343434;
+}
+.st1 {
+  opacity: 0.4;
+}
+
+.st2 {
+  opacity: 0.4;
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+.st3 {
+  opacity: 0.89;
+  fill: none;
+  stroke: #a0a0a0;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+}
+
+.st4 {
+  opacity: 0.89;
+  fill: none;
+  stroke: #a0a0a0;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+.st5 {
+  opacity: 0.6;
+}
+.st6 {
+  opacity: 0.89;
+  fill: #ffffff;
+}
+.st7 {
+  opacity: 0.6;
+  fill: #ffffff;
+}
+
+#XT {
+  width: 51%;
+}
+#point {
+  > g {
+    cursor: pointer;
+    &:hover,
+    &.active {
+      ellipse,
+      circle {
+        fill: @color;
+      }
+    }
+  }
+}
+</style>

+ 6 - 1
src/components/popupLayout/Loading.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="ui-loading">
       <div class="ui-con">
-        <div class="ld-txt">加载中...</div>
+        <div class="ld-txt">
+           <img :src="require('@/assets/images/project/icon/loading.gif')" />
+        </div>
       </div>
     </div>
 </template>
@@ -33,6 +35,9 @@ export default {
     text-align: center;
     .ld-txt{
       font-size: 18px;
+      >img{
+        width: 100px;
+      }
     }
   }
 }

+ 16 - 0
src/components/popupLayout/Tips.vue

@@ -80,4 +80,20 @@ export default {
         width: 100%;
     }
 }
+
+@media screen and (max-width: 600px) {
+    .ui-message-tips {
+        min-width: 80%;
+        .ui-bg{
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            width: 100%;
+        }
+    }
+}
+
 </style>

+ 12 - 1
src/config/http.js

@@ -1,6 +1,12 @@
 import axios from 'axios'
 var qs = require('qs');
 
+
+import browser from '@/utils/browser'
+import Vue from 'vue'
+
+let vue = new Vue()
+
 var isProduction = process.env.NODE_ENV === 'production'
 
 const serverName = isProduction ? 'http://tb.kczg.org.cn/' : 'http://tb.kczg.org.cn/'
@@ -36,6 +42,8 @@ axios.interceptors.request.use(function (config) {
 // 配置response拦截器
 axios.interceptors.response.use(
   response => {
+    let url = `https://sso.scimall.org.cn/?callback=${encodeURIComponent(window.location.origin+window.location.pathname+'#/logintips')}`
+
     let data = response.data
     let code = Number(response.data.code)
     switch (code) {
@@ -54,7 +62,10 @@ axios.interceptors.response.use(
         alert('请登录后再操作')
         break
       case 301:
-        window.open(`https://sso.scimall.org.cn/?callback=${encodeURIComponent(window.location.origin+window.location.pathname+'#/logintips')}`)
+
+        
+        browser.mobile ? (vue.$bus.$emit('mblogin',url)):window.open(url,'_blank')
+        
         break
       case 200:
         break

+ 616 - 0
src/data/region.js

@@ -0,0 +1,616 @@
+let region = [
+  {
+    id:'A',
+    name:'A区',
+    company:[
+      {
+        name:'国家发展改革委创业带动就业示范行动成效显著',
+        id:'11' //对应点位id
+      },
+      {
+        name:'“同建共享”理念引领下的“双创”经营模式',
+        id:'11' //对应点位id
+      },
+      {
+        name:'服务零工经济 拓宽“云”上就业渠道',
+        id:'11' //对应点位id
+      },
+      {
+        name:'夜晚经济区 助力退役军人就业创业',
+        id:'11' //对应点位id
+      },
+      {
+        name:'激光叶雕',
+        id:'11' //对应点位id
+      },
+      {
+        name:'南昌市百乡千人“云客服”残疾人远程居家就业项目',
+        id:'11' //对应点位id
+      },
+      {
+        name:'好姑姑托育园',
+        id:'11' //对应点位id
+      },
+      {
+        name:'双创示范基地展示',
+        id:'11' //对应点位id
+      },
+      {
+        name:'未来智慧农业综合体',
+        id:'11' //对应点位id
+      },
+      {
+        name:'智慧人居环境系统',
+        id:'11' //对应点位id
+      },
+      {
+        name:'多采自然--做中国年轻茶叶的领导品牌',
+        id:'11' //对应点位id
+      },
+      {
+        name:'一木设计',
+        id:'11' //对应点位id
+      },
+      {
+        name:'小配饰带动灵活就业',
+        id:'11' //对应点位id
+      },
+      {
+        name:'UU跑腿',
+        id:'11' //对应点位id
+      },
+      {
+        name:'网上培训带动就业',
+        id:'11' //对应点位id
+      },
+      {
+        name:'红马甲“互联网+就业”培训',
+        id:'11' //对应点位id
+      },
+      {
+        name:'曦之漆器——让大漆走进生活',
+        id:'11' //对应点位id
+      },
+      {
+        name:'海水稻产业融合发展示范基地',
+        id:'11' //对应点位id
+      },
+      {
+        name:'艺术衍生品开发与落地',
+        id:'11' //对应点位id
+      },
+      {
+        name:'宜米多手艺人技能共享平台',
+        id:'11' //对应点位id
+      },
+      {
+        name:'尚干街',
+        id:'11' //对应点位id
+      },
+      {
+        name:'铁门关市大学生创业示范单位',
+        id:'11' //对应点位id
+      },
+      {
+        name:'一诺农业',
+        id:'11' //对应点位id
+      },
+      {
+        name:'“丝路疆语”文创产学研基地项目',
+        id:'11' //对应点位id
+      },
+      {
+        name:'苏青汇--退役军人就业创业服务',
+        id:'11' //对应点位id
+      },
+      {
+        name:'尾毛化妆刷带动创业就业',
+        id:'11' //对应点位id
+      },
+      {
+        name:'退役军人“军政企+高校”就业创业昆明模式',
+        id:'11' //对应点位id
+      },
+      {
+        name:'耒阳市百果花园',
+        id:'11' //对应点位id
+      },
+      {
+        name:'UFO.WORK',
+        id:'11' //对应点位id
+      }
+    ]
+  },
+  {
+    id:'B',
+    name:'B区',
+    company:[
+      {
+        name:'“小小绣花针、改变千万家”爱心绣娘项目',
+        id:'22' //对应点位id
+      },
+      {
+        name:'“特别匠人”困境人群手工文创就业赋能',
+        id:'22' //对应点位id
+      },
+      {
+        name:'太行潞党参—益潞向党 躬参为民',
+        id:'22' //对应点位id
+      },
+      {
+        name:'沙漠科技育菇带动农民脱贫致富',
+        id:'22' //对应点位id
+      },
+      {
+        name:'一榄情深',
+        id:'22' //对应点位id
+      },
+      {
+        name:'中国联通数字乡村服务云平台',
+        id:'22' //对应点位id
+      },
+      {
+        name:'皖圩科技种养循环项目',
+        id:'22' //对应点位id
+      },
+      {
+        name:'有机、绿色种植技术“鸭稻共生”',
+        id:'22' //对应点位id
+      },
+      {
+        name:'草畜结合的循环农业模式',
+        id:'22' //对应点位id
+      },
+      {
+        name:'产学研用助推政校企农融合创新创业',
+        id:'22' //对应点位id
+      },
+      {
+        name:'华润红安智慧小镇建设',
+        id:'22' //对应点位id
+      },
+      {
+        name:'智慧农业稻虾产业融合发展示范园',
+        id:'22' //对应点位id
+      },
+      {
+        name:'智慧农业—让种田变成一件简单的事儿',
+        id:'22' //对应点位id
+      },
+      {
+        name:'来村网',
+        id:'22' //对应点位id
+      },
+      {
+        name:'绿色食品精深加工',
+        id:'22' //对应点位id
+      },
+      {
+        name:'字里(中国)',
+        id:'22' //对应点位id
+      },
+      {
+        name:'八度阳光分布式智慧能源',
+        id:'22' //对应点位id
+      },
+      {
+        name:'蜂蜜产业助力脱贫攻坚,助推乡村振兴',
+        id:'22' //对应点位id
+      },
+      {
+        name:'光东村文旅田园综合体',
+        id:'22' //对应点位id
+      },
+      {
+        name:'长春妇女草编项目',
+        id:'22' //对应点位id
+      },
+      {
+        name:'一片叶子富一方百姓',
+        id:'22' //对应点位id
+      },
+      {
+        name:'瀚特智慧县域全域旅游系统',
+        id:'22' //对应点位id
+      },
+      {
+        name:'“新一代”智慧水声物联网',
+        id:'22' //对应点位id
+      },
+      {
+        name:'农业园区建站驱动双创项目',
+        id:'22' //对应点位id
+      },
+      {
+        name:'航天育种助力乡村振兴',
+        id:'22' //对应点位id
+      }
+    ]
+  },
+  {
+    id:'C',
+    name:'C区',
+    company:[
+      {
+        name:'北京银行中关村小巨人创客中心',
+        id:'33'//对应点位id
+      },
+      {
+        name:'科创中国',
+        id:'33'//对应点位id
+      },
+      {
+        name:'科技成果转化机制探索',
+        id:'33'//对应点位id
+      },
+      {
+        name:'海尔海创汇-构建大企业共享创业平台',
+        id:'33'//对应点位id
+      },
+      {
+        name:'优客工场创新创业平台',
+        id:'33'//对应点位id
+      },
+      {
+        name:'龙岗数字创意产业走廊',
+        id:'33'//对应点位id
+      },
+      {
+        name:'跨省通办',
+        id:'33'//对应点位id
+      },
+      {
+        name:'秒报秒批',
+        id:'33'//对应点位id
+      },
+      {
+        name:'AI“政策计算器”实现“一次不用跑”',
+        id:'33'//对应点位id
+      },
+      {
+        name:'北航天汇数字孵化平台',
+        id:'33'//对应点位id
+      },
+      {
+        name:'南京晨光1865产业园',
+        id:'33'//对应点位id
+      },
+      {
+        name:'人才全域孵化服务',
+        id:'33'//对应点位id
+      },
+      {
+        name:'优化提升营商环境激发创新创业新活力',
+        id:'33'//对应点位id
+      },
+      {
+        name:'通信研究院双创平台',
+        id:'33'//对应点位id
+      },
+      {
+        name:'区域双创示范基地双创环境创新改革',
+        id:'33'//对应点位id
+      },
+      {
+        name:'三区联动、三城融合',
+        id:'33'//对应点位id
+      },
+      {
+        name:'“印象蒙古”民族文化创意专业众创空间',
+        id:'33'//对应点位id
+      },
+      {
+        name:'天府新谷创新创业生态社区',
+        id:'33'//对应点位id
+      },
+      {
+        name:'东北科技大市场',
+        id:'33'//对应点位id
+      },
+      {
+        name:'聚智创新 打造红船旁的一流产业新城  ',
+        id:'33'//对应点位id
+      },
+      {
+        name:'智慧税务建设项目',
+        id:'33'//对应点位id
+      },
+      {
+        name:'联动 · 融通 · 协同——京津冀双创示范基地联盟探索发展新模式',
+        id:'33'//对应点位id
+      },
+      {
+        name:'西湖大学探索新型成果转化机制',
+        id:'33'//对应点位id
+      },
+      {
+        name:'“核”力创新,共筑健康中国',
+        id:'33'//对应点位id
+      },
+      {
+        name:'电子科大沙河科技园',
+        id:'33'//对应点位id
+      },
+      {
+        name:'城市数字化转型双创泛化服务',
+        id:'33'//对应点位id
+      },
+      {
+        name:'三级火箭构建企业服务数字化枢纽',
+        id:'33'//对应点位id
+      }
+    ]
+  },
+  {
+    id:'D',
+    name:'D区',
+    company:[
+      {
+        name:'全球化“四链融合”产业孵化体系',
+        id:'44' //对应点位id
+      },
+      {
+        name:'国家电网国家级双创示范基地',
+        id:'44' //对应点位id
+      },
+      {
+        name:'摆渡创新工场“双创”新模式',
+        id:'44' //对应点位id
+      },
+      {
+        name:'助力创新,围绕产业链部署创新链',
+        id:'44' //对应点位id
+      },
+      {
+        name:'在线物联网追溯监测大数据平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'基于国产高端处理器的先进液冷技术',
+        id:'44' //对应点位id
+      },
+      {
+        name:'智能工厂和智慧园区解决方案',
+        id:'44' //对应点位id
+      },
+      {
+        name:'助推轨道交通产业区域发展的双创平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'离岸孵化精准引智新模式',
+        id:'44' //对应点位id
+      },
+      {
+        name:'孵化加转化,双创服务新模式',
+        id:'44' //对应点位id
+      },
+      {
+        name:'钛星网络威胁隔离平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'置粮网平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'5G智慧医联体应用示范试点项目',
+        id:'44' //对应点位id
+      },
+      {
+        name:'PIX Moving 自动驾驶',
+        id:'44' //对应点位id
+      },
+      {
+        name:'锂电新能源产业',
+        id:'44' //对应点位id
+      },
+      {
+        name:'巴图鲁产业互联网',
+        id:'44' //对应点位id
+      },
+      {
+        name:'裸眼3D及三维互联网应用工程项目',
+        id:'44' //对应点位id
+      },
+      {
+        name:'工业互联网安全一站式服务平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'3D打印技术在多个领域融合应用项目',
+        id:'44' //对应点位id
+      },
+      {
+        name:'浩丰农业大脑',
+        id:'44' //对应点位id
+      },
+      {
+        name:'分布式边缘云',
+        id:'44' //对应点位id
+      },
+      {
+        name:'e博视智慧能源互联网平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'英特尔FPGA中国创新中心',
+        id:'44' //对应点位id
+      },
+      {
+        name:'D+M智造工场',
+        id:'44' //对应点位id
+      },
+      {
+        name:'中国移动OneNET物联网开放平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'全球知名天然橡胶全产业链经营者',
+        id:'44' //对应点位id
+      },
+      {
+        name:'天津智慧能源小镇',
+        id:'44' //对应点位id
+      },
+      {
+        name:'双创智慧档案大数据服务平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'研发 孵化 投资产业生态体系',
+        id:'44' //对应点位id
+      },
+      {
+        name:'朗云工业设计协同创新云平台',
+        id:'44' //对应点位id
+      },
+      {
+        name:'《舞上春》线上演播',
+        id:'44' //对应点位id
+      }
+    ]
+  },
+  {
+    id:'E',
+    name:'E区',
+    company:[
+      {
+        name:'国产船舶三维设计SPD系统',
+        id:'55' //对应点位id
+      },
+      {
+        name:'国家生物育种产业创新中心',
+        id:'55' //对应点位id
+      },
+      {
+        name:'中科院高端科学仪器装备创新平台',
+        id:'55' //对应点位id
+      },
+      {
+        name:'无创肝纤维化诊断系统',
+        id:'55' //对应点位id
+      },
+      {
+        name:'智能呼感口罩',
+        id:'55' //对应点位id
+      },
+      {
+        name:'岩石薄片智能鉴定系统',
+        id:'55' //对应点位id
+      },
+      {
+        name:'稀土特殊钢产业化',
+        id:'55' //对应点位id
+      },
+      {
+        name:'高通量集成化生物3D打印装备',
+        id:'55' //对应点位id
+      },
+      {
+        name:'自主核级DCS和睦系统',
+        id:'55' //对应点位id
+      },
+      {
+        name:'大面积光电倍增管研制及产业化',
+        id:'55' //对应点位id
+      },
+      {
+        name:'水面无人驾驶环卫船',
+        id:'55' //对应点位id
+      },
+      {
+        name:'工业高危生产安全管理AI解决方案',
+        id:'55' //对应点位id
+      },
+      {
+        name:'炎黄国芯宇航及自主可控模拟芯片',
+        id:'55' //对应点位id
+      },
+      {
+        name:'HDS肿瘤精准用药技术体系产业化',
+        id:'55' //对应点位id
+      },
+      {
+        name:'交叉双旋翼推力尾桨无人直升机',
+        id:'55' //对应点位id
+      },
+      {
+        name:'德能森无线无源节能建筑智控系统',
+        id:'55' //对应点位id
+      },
+      {
+        name:'医用重离子加速器',
+        id:'55' //对应点位id
+      },
+      {
+        name:'基于分布式光纤的智能监测系统',
+        id:'55' //对应点位id
+      },
+      {
+        name:'中国海油北斗全球精准时空服务',
+        id:'55' //对应点位id
+      },
+      {
+        name:'复杂装备产品智能设计和仿真优化',
+        id:'55' //对应点位id
+      },
+      {
+        name:'EMC节能新材料',
+        id:'55' //对应点位id
+      },
+      {
+        name:'自主燃料电池产业化',
+        id:'55' //对应点位id
+      },
+      {
+        name:'基于先进制造的超薄柔性印刷电池',
+        id:'55' //对应点位id
+      },
+      {
+        name:'TeraComm智能光电',
+        id:'55' //对应点位id
+      },
+      {
+        name:'激光显示光学屏',
+        id:'55' //对应点位id
+      },
+      {
+        name:'数据驱动纳米孔病原实时精准检测',
+        id:'55' //对应点位id
+      },
+      {
+        name:'灵犀手',
+        id:'55' //对应点位id
+      },
+      {
+        name:'创新药多纳非尼成为肝癌治疗首选',
+        id:'55' //对应点位id
+      },
+      {
+        name:'精密光学微型化与医疗化',
+        id:'55' //对应点位id
+      },
+      {
+        name:'室内低成本覆盖技术',
+        id:'55' //对应点位id
+      },
+      {
+        name:'猎鹰无人机群防控系统',
+        id:'55' //对应点位id
+      },
+      {
+        name:'TPUNB窄带物联网通信系统',
+        id:'55' //对应点位id
+      },
+      {
+        name:'航天装备牵引原始创新与成果应用',
+        id:'55' //对应点位id
+      }
+    ]
+  }
+]
+
+export {
+  region
+}

+ 7 - 7
src/data/scene.js

@@ -4,42 +4,42 @@ let themes = [
     name:'序厅',
     desc:'序厅',
     theme:'#FF9700',
-    sceneCode:'TEST'
+    sceneCode:'1079'
   },
   {
     id:'a',
     name:'A区',
     desc:'创新创业带动就业量质齐升',
     theme:'#FF9700',
-    sceneCode:'996_1'
+    sceneCode:'1079'
   },
   {
     id:'b',
     name:'B区',
     desc:'创新创业促进全民共同富裕',
     theme:'#FF9700',
-    sceneCode:'990_1'
+    sceneCode:'1079'
   },
   {
     id:'c',
     name:'C区',
-    desc:'改革激发创新创业创造力',
+    desc:'改革激发创新创业创造力',
     theme:'#FF9700',
-    sceneCode:'1075'
+    sceneCode:'1079'
   },
   {
     id:'d',
     name:'D区',
     desc:'创新创业助力构建新发展格局',
     theme:'#FF9700',
-    sceneCode:'1076'
+    sceneCode:'1079'
   },
   {
     id:'e',
     name:'E区',
     desc:'创新创业支撑科技自立自强',
     theme:'#FF9700',
-    sceneCode:'1059'
+    sceneCode:'1079'
   }
 ]
 

+ 10 - 2
src/mixins/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import browser from '@/utils/browser'
+import {u_extend} from '@/utils'
 
 import {axios, serverName,orginLink} from '../config/http'
 
@@ -12,7 +13,6 @@ import {
 } from '@/components/popupLayout'
 
 
-
 Vue.prototype.$bus = new Vue()
 
 
@@ -39,7 +39,15 @@ Vue.mixin({
     methods: {
       $showTips,
       $showLoading,
-      $hideLoading
+      $hideLoading,
+      u_extend,
+      handleContent(content,fontsize=16){
+        if (!content) {
+          return ''
+        }
+        var reg = new RegExp(' {4}', 'g');//g就是代表全部
+        return content.replace(reg , `<span style="display:inline-block;width:${fontsize*2}px;"></span>`);
+      }
     }
 })
 

+ 11 - 28
src/pages/Home.vue

@@ -9,43 +9,22 @@
       <div class="h-title">
         <img :src="require('@/assets/images/project/title.png')" alt="" />
       </div>
-      <ul>
+      <!-- <ul>
         <li v-for="(item, i) in units" :key="i">
           <span>{{ item.unit }}:</span>
           <span>{{ item.val }}</span>
         </li>
-      </ul>
-        <img @click="$router.push({path:'/enter'})" class="h-btn" :src="require('@/assets/images/project/btn.png')" alt="" />
+      </ul> -->
+      <img class="tunits" :src="require('@/assets/images/project/pc_units.png')" alt="" />
+
+      <img @click="$router.push({path:'/enter'})" class="h-btn" :src="require('@/assets/images/project/btn.png')" alt="" />
     </div>
   </div>
 </template>
 
 <script>
+import {units} from './units'
 
-let units = [
-  {
-    unit: "主办单位",
-    val: "2021年全国大众创业万众创新活动周组委会",
-  },
-  {
-    unit: "组长单位",
-    val: "国家发展改革委",
-  },
-  {
-    unit: "副组长单位",
-    val:
-      "科技部、人力资源社会保障部、财政部、工业和信息化部、教育部、农业农村部、国资委、中央宣传部、中国科协、共青团中央、北京市人民政府、河南省人民政府、郑州市人民政府",
-  },
-  {
-    unit: "成员单位",
-    val:
-      "其他推进大众创业万众创新部际联席会议成员单位,各省、自治区、直辖市政府,新疆生产建设兵团",
-  },
-  {
-    unit: "承办单位",
-    val: "中国科协、河南省人民政府、郑州市人民政府",
-  },
-];
 export default {
   data() {
     return {
@@ -65,7 +44,7 @@ export default {
   background-position: bottom left;
 
   .h-con {
-    width: 70%;
+    width: 72%;
     margin: 0 auto;
     padding-top: 30px;
     color: #fff;
@@ -76,6 +55,10 @@ export default {
         width: 100%;
       }
     }
+    .tunits{
+      width: 96%;
+      margin: 40px auto 0;
+    }
     > ul {
         width: 96%;
         margin: 40px auto 0;

+ 127 - 0
src/pages/enter/mobile.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="y-enter">
+    <vmodel/>
+    <div class="glassbg brightness" v-if="showQrcode">
+      <div slot="content" class="gcon">
+        <h3>邀请好友一起观展吧!</h3>
+        <p>请长按下方图片下载二维码分享给好友</p>
+        <img class="qrcode" :src="require('@/assets/images/project/qrcode.jpg')" alt="">
+        <img class="close" @click="showQrcode=false" :src="require('@/assets/images/project/icon/close.png')" alt="">
+      </div>
+    </div>
+    <div @click.prevent.stop="handleShow" class="qrbtn">
+      <img :src="require('@/assets/images/mobile/iconqr.png')" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import vmodel from "./model";
+
+export default {
+  components:{vmodel},
+  data(){
+    return {
+      showQrcode:false
+    }
+  },
+  methods:{
+    handleShow(){
+      this.showQrcode = true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.y-enter{
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  color: #fff;
+  position: relative;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: center;
+  .glassbg{
+    position: absolute;
+    top: 50%;
+    width: 86%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    border-radius: 16px;
+    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
+    z-index: 1;
+    overflow: hidden;
+    
+    &::after{
+      content: '';
+      position: absolute;
+      top: 0; 
+      bottom: 0;
+      left: 0; 
+      right: 0;
+      margin: -30px;
+      z-index: -1;
+      background-image: url("~@/assets/images/project/enterdiwen.png");
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+      background-position: bottom right;
+    }
+    .gcon{
+      text-align: center;
+      padding: 60px 0;
+      >h3{
+        font-size: 18px;
+      }
+      >p{
+        font-size: 12px;
+        margin-top: 10px;
+      }
+
+      .qrcode{
+        width: 50%;
+        margin: 50px 0 0;
+      }
+
+      >div{
+        background-color: rgba(0, 0, 0, .6);
+        width: 50%;
+        border-radius: 10px;
+        margin: 0 auto;
+        font-size: 14px;
+        height: 60px;
+        line-height: 60px;
+        cursor: pointer;
+      }
+
+      .close{
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+  .qrbtn{
+    width: 50px;
+    height: 50px;
+    position: fixed;
+    bottom: 40px;
+    left: 10px;
+    cursor: pointer;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    >img{
+      width: 45%;
+      position: absolute;
+      transform: translate(-50%,-50%);
+      left: 50%;
+      top: 50%;
+    }
+  }
+}
+
+</style>

+ 4 - 0
src/pages/enter/model/index.vue

@@ -7,6 +7,7 @@
 <script>
 export default {
   mounted(){
+    this.$showLoading()
     this.$nextTick(()=>{
       window.addEventListener("message", (data) => {
         if (Object.prototype.toString.call(data.data) == "[object Object]") {
@@ -16,6 +17,9 @@ export default {
               params:{type:data.data.key}
             })
           }
+          if (data.data.type == "modelLoadFinish") {
+            this.$hideLoading()
+          }
         }
       });
     })

+ 10 - 3
src/pages/logintips/index.vue

@@ -62,11 +62,18 @@ export default {
   }
 }
 
-@media screen and (max-width: 1600px) {
+@media screen and (max-width:800px) {
 .home {
   .h-con {
- 
+      >img{
+        width: 20%;
+        margin-bottom: 30px;
+      }
+      >p{
+        font-size: 18px;
+        width: 100%;
+      }
+    }
   }
 }
-}
 </style>

+ 88 - 0
src/pages/mobile.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="home"
+    :style="{
+      backgroundImage: `url(${require('@/assets/images/mobile/bg.png')})`,
+    }"
+  >
+    <div class="h-con">
+      <div class="h-title">
+        <img :src="require('@/assets/images/mobile/title.png')" alt="" />
+      </div>
+      <img class="tunits" :src="require('@/assets/images/mobile/mobile_units.png')" alt="" />
+      <img @click="$router.push({path:'/enter'})" class="h-btn" :src="require('@/assets/images/project/btn.png')" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {units} from './units'
+export default {
+  data() {
+    return {
+      units,
+    };
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-color: #10337f;
+  background-size: 100% auto;
+  background-position: bottom left;
+
+  .h-con {
+    width: 84%;
+    margin: 0 auto;
+    padding-top: 20px;
+    color: #fff;
+    text-align: center;
+    .h-title {
+      width: 100%;
+      > img {
+        width: 100%;
+      }
+    }
+    .tunits{
+      width: 100%;
+      margin: 30px auto 0;
+    }
+    > ul {
+        width: 100%;
+        margin: 30px auto 0;
+        text-align: left;
+      > li {
+          display: flex;
+          margin: 4px 0;
+        > span {
+          line-height: 1.4;
+          font-size: 12px;
+          &:first-of-type{
+              text-align: justify;
+              min-width: 74px;
+              flex-shrink: 0;
+          }
+        }
+      }
+    }
+    .h-btn{
+        margin: 0 auto;
+        max-width: 148px;
+        cursor: pointer;
+    }
+  }
+}
+
+@media screen and (max-width: 340px) {
+.home {
+  .h-con {
+      width: 80%;
+      padding-top: 10px;
+    }
+  }
+}
+</style>

+ 147 - 0
src/pages/mobilescene/aside.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="shoula" :class="{showlaAvtive:isShow}">
+    <img :src="require('@/assets/images/mobile/scene_bg.png')" alt="">
+    <div class="brightness"></div>
+    <div class="shoulacon">
+      <ul>
+        <li @click="onClickItem(item)" :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="">
+          <div class="text">
+            <span :title="item.desc">{{item.desc}}</span>
+          </div>
+          <span class="tag">{{item.name}}</span>
+        </li>
+      </ul>
+      <img
+      @click="$emit('close')"
+          class="close"
+          :src="require('@/assets/images/mobile/icon/close.png')"
+          alt=""
+        />
+    </div>
+  </div>
+</template>
+
+<script>
+import panodata from "@/components/mapsvg/pano.js";
+
+export default {
+  props:['currentPanoid'],
+  data(){
+    return {
+      isShow:true,
+      panodata,
+      showMap:false
+    }
+  },
+  computed:{
+    cp(){
+      return 'v' + this.$route.params.type
+    },
+    currentItem(){
+      return (this.themes.find(item=>item.id==this.theme));
+    }
+  },
+  methods:{
+    onClickItem(item){
+      this.$router.push({params:{type:item.id}})
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@conW:100%;
+@gap:20px;
+.shoula{
+  position: fixed;
+  top: 50px;
+  width: @conW;
+  height: 100%;
+  left: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: flex-start;
+  color: #fff;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: bottom left;
+  >img{
+      width: 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 0;
+      pointer-events: none;
+  }
+  .shoulacon{
+    width: @conW;
+    height: 100%;
+    padding: @gap 0;
+    text-align: center;
+    >ul{
+      margin: 0 auto;
+      width: calc(100% - @gap * 2);
+      max-height: 100%;
+      overflow-y: auto;
+      >li{
+        width: calc(50% - @gap/2);
+        margin-right: @gap;
+        margin-bottom: @gap * 0.4;
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        border: 3px solid transparent;
+        >img{
+          width: 100%;
+        }
+        &:nth-of-type(2n){
+          margin-right: 0;
+        }
+        .text{
+          display: inline-block;
+          width: 100%;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          overflow: hidden;
+          text-align: center;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+          padding: 10px 0;
+          background-color: rgba(0, 0, 0, 0.57);
+          >span{
+            width: 110%;
+            font-size: 12px;
+            display: inline-block;
+            transform: scale(0.9);
+            transform-origin: top left;
+            letter-spacing: 0.4px;
+          }
+        }
+        .tag{
+          font-size: 12px;
+          position: absolute;
+          top: -4%;
+          right: -18%;
+          background-color: rgba(0, 0, 0, 0.57);
+          display: block;
+          transform: rotate(45deg);
+          width: 80px;
+          height: 34px;
+          line-height: 40px;
+          text-align: center;
+        }
+      }
+    }
+    .close{
+      width: 47px;
+      display: inline-block;
+      margin-top: 10px;
+    }
+  }
+}
+
+</style>

+ 46 - 0
src/pages/mobilescene/bar.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="bar-con brightness">
+    <img @click="$router.push({name:'home'})" :src="require(`@/assets/images/mobile/icon/home.png`)" alt="">
+    <div @click="$emit('openAside')">
+      <span>{{name}}</span>
+      <img :src="require(`@/assets/images/mobile/icon/xiala.png`)" alt="">
+    </div>
+    <img  @click="$emit('showSearch')" :src="require(`@/assets/images/mobile/icon/search.png`)" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  props:['name']
+}
+</script>
+
+<style lang="less" scoped>
+.bar-con{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: 50px;
+  >div{
+    >span{
+      font-size: 18px;
+      display: inline-block;
+      margin-right: 20px;
+      vertical-align: middle;
+    }
+    >img{
+      width: 12px;
+    }
+  }
+  >img{
+    width: 26px;
+  }
+}
+
+</style>

+ 0 - 0
src/pages/mobilescene/components/content.vue


Niektoré súbory nie sú zobrazené, pretože je v týchto rozdielových dátach zmenené mnoho súborov