update

src/framework/show/list.vue

@@ -1,37 +1,53 @@
 <template>
   <div class="list">
-     <div class="l-con" :class="showList?'active':''">
-       <div class="clip-scroller">
-        <ul class="pic-list" v-if="scenes.length>0" ref="pic">
-          <li :title="item.sceneTitle" @click="handleVR(item)" v-for="(item,i) in scenes" :key="i">
-            <div :class="{active:selected.sceneCode==item.sceneCode}">
-              <img :src="item.icon+`?${Math.random()}`" alt="" />
-              <i class="iconfont iconscene_map_3d" :class="{'iconjump':item.type!=='4dkk'}"></i>
-              <rollName :offset="20" :active="selected.sceneCode==item.sceneCode" class="pic-name" :myref="'subw'+item.id" :name="item.sceneTitle"/>
-            </div>
-          </li>
-        </ul>
-       </div>
-      
-      <div class="clip-scroller" v-if="childTab.length > 1">
+    <div class="l-con" :class="showList ? 'active' : ''">
+      <div class="pic-con">
+        <div class="clip-scroller">
+          <ul class="pic-list" v-if="scenes.length > 0" ref="pic">
+            <li :title="item.sceneTitle" @click="handleVR(item)" v-for="(item, i) in scenes" :key="i">
+              <div :class="{ active: selected.sceneCode == item.sceneCode }">
+                <img :src="item.icon + `?${Math.random()}`" alt="" />
+                <i class="iconfont iconscene_map_3d" :class="{ iconjump: item.type !== '4dkk' }"></i>
+                <rollName :offset="20" :active="selected.sceneCode == item.sceneCode" class="pic-name" :myref="'subw' + item.id" :name="item.sceneTitle" />
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div class="clip-scroller" v-if="childTab.length > 1">
+          <ul class="pp-tap">
+            <li @click="tabtowActive = item" v-for="(item, i) in childTab" :key="i">
+              <rollName
+                :offset="30"
+                :mgin="20"
+                :active="item.id == tabtowActive.id"
+                class="btn pic-rect"
+                :class="{ active: item.id == tabtowActive.id }"
+                :myref="'ww' + item.id"
+                :name="item.name"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="clip-scroller" v-if="showInfo.catalogRoot.length > 0 && showInfo.catalogs.length > 1">
         <ul class="tap">
-          <li @click="tabtowActive = item" v-for="(item,i) in childTab" :key="i">
-            <rollName :offset="30" :mgin="20" :active="item.id == tabtowActive.id" class="btn rect" :class="{active:item.id == tabtowActive.id}" :myref="'ww'+item.id" :name="item.name"/>
+          <li @click="taboneActive = item" :class="{ active: item.id == taboneActive.id }" v-for="(item, i) in showInfo.catalogRoot" :key="i">
+            <rollName
+              :offset="30"
+              :mgin="20"
+              :active="item.id == taboneActive.id"
+              class="btn"
+              :class="{ active: item.id == taboneActive.id }"
+              :myref="'zw' + item.id"
+              :name="item.name"
+            />
           </li>
         </ul>
       </div>
-
-      <div class="clip-scroller" v-if="showInfo.catalogRoot.length > 0 && showInfo.catalogs.length>1">
-       <ul class="tap">
-        <li @click="taboneActive = item" v-for="(item,i) in showInfo.catalogRoot" :key="i">
-          <rollName :offset="30" :mgin="20" :active="item.id == taboneActive.id" class="btn rect" :class="{active:item.id == taboneActive.id}" :myref="'zw'+item.id" :name="item.name"/>
-        </li>
-      </ul>
-      </div>
-
     </div>
-    <div class="btn dl" @click="showList=!showList">
-      <i class="iconfont " :class="showList?'iconnav_scene_down':'iconnav_scene_up'"></i>场景导航</div>
+    <div class="btn dl" @click="showList = !showList"><i class="iconfont " :class="showList ? 'iconnav_scene_down' : 'iconnav_scene_up'"></i>场景导航</div>
   </div>
 </template>
 
@@ -43,242 +59,293 @@ import rollName from "@/components/rollName";
 let $scroll = null;
 
 export default {
-  props:['select'],
-  components:{rollName},
-  
-  data(){
-    return{
-      taboneActive:{children:[]},
-      tabtowActive:'',
-      childTab:[],
-      scenes:[],
-      showList:true,
+  props: ["select"],
+  components: { rollName },
+
+  data() {
+    return {
+      taboneActive: { children: [] },
+      tabtowActive: "",
+      childTab: [],
+      scenes: [],
+      showList: true,
       loadFirst: true,
-      menuWidth:0,
-      sceneNum: config.sceneNum
-    }
+      menuWidth: 0,
+      sceneNum: config.sceneNum,
+    };
   },
   computed: {
-      ...mapGetters({
-        showInfo: "showInfo"
-      }),
-      selected(){
-        return {...this.select}
-      }
+    ...mapGetters({
+      showInfo: "showInfo",
+    }),
+    selected() {
+      return { ...this.select };
+    },
   },
 
-  methods:{
-    getCWidth(ref){
+  methods: {
+    getCWidth(ref) {
       if (this.$refs[ref]) {
-        return this.$refs[ref][0].clientWidth
+        return this.$refs[ref][0].clientWidth;
       }
     },
-    handleVR(item){
+    handleVR(item) {
       history.replaceState(null, null, "".concat(window.location.pathname, "?").concat(`id=${this.showInfo.id}&vr=${item.sceneCode}`));
-      this.sceneNum = item.sceneCode
-    }
+      this.sceneNum = item.sceneCode;
+    },
   },
 
-  mounted(){
+  mounted() {
     this.$nextTick(() => {
       if ($scroll == null) {
-        let eles = $(".clip-scroller")
-        Array.from(eles).forEach(item=>{
+        let eles = $(".clip-scroller");
+        Array.from(eles).forEach((item) => {
           let frame = new PerfectScrollbar(item, {
             useBothWheelAxes: true,
             suppressScrollY: true,
             wheelSpeed: 0.8,
           });
           $(item).data("scrollbar", frame);
-        })
+        });
       }
     });
   },
-  
-  watch:{
+
+  watch: {
     taboneActive: {
-      handler: function (newVal) {
-        let temp = []
-        newVal.children && newVal.children.forEach(item=>{
-          this.showInfo.catalogs.forEach(sub=>{
-            if (item==sub.id) {
-              temp.push(sub)
-            }
-          })
-        })
-        this.childTab = temp
+      handler: function(newVal) {
+        let temp = [];
+        newVal.children &&
+          newVal.children.forEach((item) => {
+            this.showInfo.catalogs.forEach((sub) => {
+              if (item == sub.id) {
+                temp.push(sub);
+              }
+            });
+          });
+        this.childTab = temp;
         if (!this.loadFirst) {
-            this.tabtowActive = ''
+          this.tabtowActive = "";
         }
       },
     },
     tabtowActive: {
-      deep:true,
-      handler: function (newVal) {
+      deep: true,
+      handler: function(newVal) {
         if (!newVal) {
-          this.tabtowActive = this.childTab[0]
-        } else{
-          let arr = this.showInfo.scenes.filter(item=>{
-            return newVal.id == item.category
-          })
-          this.scenes = arr.sort((a,b)=>a.weight-b.weight)
+          this.tabtowActive = this.childTab[0];
+        } else {
+          let arr = this.showInfo.scenes.filter((item) => {
+            return newVal.id == item.category;
+          });
+          this.scenes = arr.sort((a, b) => a.weight - b.weight);
         }
-      }
+      },
     },
 
-    sceneNum:{
-      deep:true,
-      immediate:true,
-      handler:function (newVal) {
-          if (!newVal) {
-            let tmp = this.showInfo.firstScene||this.showInfo.scenes[0]
-            this.handleVR(tmp)
-            return
-          }
-          let val = this.showInfo.scenes.find(item=>item.sceneCode==newVal)
-          let tmp = this.showInfo.catalogs.find(item=>item.id==val.category)
-          let rootTmp = this.showInfo.catalogRoot.find(item => {
-            return item.children.indexOf(tmp.id)>-1
-          });
-          this.taboneActive = rootTmp
-          this.tabtowActive = tmp
+    sceneNum: {
+      deep: true,
+      immediate: true,
+      handler: function(newVal) {
+        if (!newVal) {
+          let tmp = this.showInfo.firstScene || this.showInfo.scenes[0];
+          this.handleVR(tmp);
+          return;
+        }
+        let val = this.showInfo.scenes.find((item) => item.sceneCode == newVal);
+        let tmp = this.showInfo.catalogs.find((item) => item.id == val.category);
+        let rootTmp = this.showInfo.catalogRoot.find((item) => {
+          return item.children.indexOf(tmp.id) > -1;
+        });
+        this.taboneActive = rootTmp;
+        this.tabtowActive = tmp;
 
         setTimeout(() => {
-          this.$emit('select',val)
-          this.loadFirst = false 
+          this.$emit("select", val);
+          this.loadFirst = false;
         });
-      }
+      },
     },
-   
-    selected:{
-      handler:function (newVal) {
-        this.handleVR(newVal)
-        if (newVal.type == '4dkk') {
-          this.showList = false
+
+    selected: {
+      handler: function(newVal) {
+        this.handleVR(newVal);
+        if (newVal.type == "4dkk") {
+          this.showList = false;
         }
-      }
-    }
-  }
-}
+      },
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
-.btn{
-    display: inline-block;
-    margin: 0 auto;
-    padding: 0 20px;
-    height: 36px;
-    line-height: 36px;
-    background: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    opacity: 1;
-    cursor: pointer;
-    word-break: keep-all;
-    max-width: 150px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    &.active{
-      background: rgba(0, 0, 0, 0.3);
-      border: 1px solid #1FE4DC;
-      color: #1FE4DC;
-    }
+.btn {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 26px;
+  line-height: 26px;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  cursor: pointer;
+  word-break: keep-all;
+  max-width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  &.active {
+    border: 1px solid rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 1);
+  }
 }
 
-.rect{
+.pic-rect {
   border-radius: 4px;
   height: 24px;
   line-height: 24px;
   padding: 0;
-  & /deep/ span{
-    margin: 0 20px;
+  padding-bottom: 10px;
+  background: none;
+  border: none;
+  &.active {
+    border: none;
+    color: rgba(255, 255, 255, 1);
+    position: relative;
+    &::before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      bottom: 0;
+      width: 20px;
+      height: 2px;
+      z-index: 9999;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #0076f6;
+    }
   }
 }
 
-.line{
-  background:#1FE4DC;
+.line {
+  background: #0076f6;
   width: 100%;
   height: 0.1px;
   opacity: 0.5;
 }
 
-.list{
+.list {
   position: fixed;
   bottom: 10px;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 999;
   text-align: center;
   width: 100%;
+  max-width: 1207px;
   pointer-events: none;
-  .dl{
+  .dl {
     background: rgba(0, 0, 0, 0.3);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     margin-top: 10px;
     pointer-events: auto;
-    >i{
+    height: 36px;
+    line-height: 36px;
+
+    > i {
       margin-right: 8px;
       vertical-align: bottom;
       font-size: 18px;
     }
   }
-  .l-con{
+  .l-con {
     width: 100%;
     transition: all ease 0.3s;
     max-height: 0px;
     overflow: hidden;
     pointer-events: auto;
-    .clip-scroller{
+
+    .pic-con {
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 4px;
+    }
+
+    .clip-scroller {
       position: relative;
-      background: rgba(0, 0, 0, 0.3);
-      margin-bottom: 2px;
+      border-radius: 4px;
     }
-    ul{
+    ul {
       display: inline-block;
       white-space: nowrap;
       position: relative;
-      li{
+      li {
         margin: 0 5px;
         display: inline-block;
-        
       }
     }
-    .tap{
-      padding: 12px 0;
+
+    .pp-tap {
+      padding: 0 0 16px;
+    }
+    .tap {
+      padding: 16px 0;
+
+      > li {
+        position: relative;
+
+        &.active {
+          @size:5px;
+          &::before {
+            content: "";
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-left:  @size * 1.5 solid transparent;
+            border-right:  @size * 1.5 solid transparent;
+            border-top:  @size*2 solid rgba(0, 0, 0, 0.5);
+            position: absolute;
+            top: -18px;
+            left: 50%;
+            transform: translateX(-50%);
+          }
+        }
+      }
     }
-    .pic-list{
+    .pic-list {
       padding: 12px 0;
-      >li{
+      > li {
         cursor: pointer;
-        >div{
+        > div {
           width: 72px;
           height: 72px;
-          border: 2px solid #FFFFFF;
+          border: 2px solid #ffffff;
           opacity: 1;
           border-radius: 4px;
           overflow: hidden;
           position: relative;
           cursor: pointer;
-          .pic-name{
+          .pic-name {
             background: rgba(0, 0, 0, 0.5);
             position: absolute;
             left: 0;
             bottom: 0;
           }
-          >img{
+          > img {
             position: absolute;
             top: 50%;
             left: 50%;
-            transform: translate(-50%,-50%);
+            transform: translate(-50%, -50%);
           }
-          .iconfont{
+          .iconfont {
             position: absolute;
             left: 4px;
             top: 4px;
             z-index: 99;
           }
-          >span{
+          > span {
             display: inline-block;
             background: rgba(0, 0, 0, 0.5);
             position: absolute;
@@ -289,25 +356,25 @@ export default {
             bottom: 0;
             width: 100%;
           }
-           &.active{
-              border: 2px solid #1FE4DC;
+          &.active {
+            border: 2px solid #0076f6;
           }
         }
       }
     }
 
-    .onecls{
+    .onecls {
       background: rgba(0, 0, 0, 0.3);
       display: inline-block;
       width: 100%;
     }
 
-    .towcls{
+    .towcls {
       background: rgba(0, 0, 0, 0.3);
     }
-    &.active{
-      max-height: 200px;
+    &.active {
+      max-height: 250px;
     }
   }
 }
-</style>
+</style>

src/framework/show/popup/imgview.vue

@@ -46,7 +46,6 @@ export default {
 <style lang="less" scoped>
 .imgcon{
   .v-image{
-    width: 100%;
     height: 540px;
   }
   .toLeft,.toRight{

src/framework/show/popup/index.vue

@@ -34,6 +34,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.ui-message{
+  max-width: 1250px;
+  width: auto;
+}
 .ui-message-confirm{
   border-radius: 0;
   .icon_close{

src/framework/show/popup/preview.vue

@@ -1,7 +1,7 @@
 <template>
     <popup v-if="show">
       <div class="ui-message ui-message-confirm" 
-      style="width:`${item.hotspotType=='audio'?'960px':'500px'}`">
+      :style="{width:`${item.hotspotType=='audio'?'960px':'1200px'}`}">
         <div class="ui-message-header">
           <span>{{item.hotspotTitle}}</span>
           <span @click="$emit('close')">
@@ -69,6 +69,8 @@ export default {
   }
   .ui-message-header{
     border-bottom: 1px solid #EBEBEB;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
   }
   .ui-message-main{
     width: 100%;
@@ -89,6 +91,7 @@ export default {
         word-break: break-all;
         color: #202020;
         display: inline-block;
+        line-height: 1.5;
       }
     }
 

src/framework/showMobile/index.vue

@@ -68,6 +68,7 @@
       </popup>
 
       <div v-if="audioUrl" class="audio-btn" @click="audioUrl = ''">
+        <i class="iconfont iconedit_soundview"></i>
         停止播放
         <v-audio
           v-if="audioUrl"
@@ -463,19 +464,21 @@ export default {
     position: fixed;
     left: 50%;
     transform: translateX(-50%);
-    bottom: 12px;
+    bottom: 14px;
     z-index: 9999;
     border-radius: 18px;
     background: rgba(0, 0, 0, 0.3);
-    border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     margin-top: 10px;
     margin-left: 10px;
     padding: 0 10px;
     &.active {
       background: rgba(0, 0, 0, 0.3);
-      border: 1px solid #1fe4dc;
-      color: #1fe4dc;
+      border: 1px solid #0076F6;
+      color: #0076F6;
+    }
+    .iconedit_soundview{
+      color: #0076F6;
     }
   }
 

src/framework/showMobile/list.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="list">
      <div class="l-con" :class="showList?'active':''">
-      <ul class="pic-list" v-if="scenes.length>0">
-        <li @click="handleVR(item)" v-for="(item,i) in scenes" :key="i">
-          <div :class="{active:selected.sceneCode==item.sceneCode}">
-            <img :src="item.icon+`?${Math.random()}`" alt="" />
-            <i class="iconfont" :class="item.type!='4dkk'?'iconjump':'iconscene_map_3d'"></i>
-            <rollName :offset="20" :active="selected.sceneCode==item.sceneCode" class="pic-name" :myref="'subw'+item.id" :name="item.sceneTitle"/>
-          </div>
-        </li>
-      </ul>
-      
-      <ul class="tap" v-if="childTab.length > 1" >
-        <li  @click="tabtowActive = item" v-for="(item,i) in childTab" :key="i">
-            <rollName :offset="30" :mgin="20" :active="item.id == tabtowActive.id" class="btn rect" :class="{active:item.id == tabtowActive.id}" :myref="'ww'+item.id" :name="item.name"/>
-        </li>
-      </ul>
+      <div class="pic-con">
+        <ul class="pic-list" v-if="scenes.length>0">
+          <li @click="handleVR(item)" v-for="(item,i) in scenes" :key="i">
+            <div :class="{active:selected.sceneCode==item.sceneCode}">
+              <img :src="item.icon+`?${Math.random()}`" alt="" />
+              <i class="iconfont" :class="item.type!='4dkk'?'iconjump':'iconscene_map_3d'"></i>
+              <rollName :offset="20" :active="selected.sceneCode==item.sceneCode" class="pic-name" :myref="'subw'+item.id" :name="item.sceneTitle"/>
+            </div>
+          </li>
+        </ul>
+        
+        <ul class="tap " v-if="childTab.length > 1" >
+          <li  @click="tabtowActive = item" v-for="(item,i) in childTab" :key="i">
+              <rollName :offset="30" :mgin="20" :active="item.id == tabtowActive.id" class="btn pic-rect" :class="{active:item.id == tabtowActive.id}" :myref="'ww'+item.id" :name="item.name"/>
+          </li>
+        </ul>
+      </div>
        <ul class="tap" v-if="showInfo.catalogRoot.length > 1">
-        <li @click="taboneActive = item" v-for="(item,i) in showInfo.catalogRoot" :key="i">
-            <rollName :offset="30" :mgin="20" :active="item.id == taboneActive.id" class="btn rect" :class="{active:item.id == taboneActive.id}" :myref="'zw'+item.id" :name="item.name"/>
-        </li>
-      </ul>
+          <li @click="taboneActive = item" :class="{ active: item.id == taboneActive.id }" v-for="(item,i) in showInfo.catalogRoot" :key="i">
+              <rollName :offset="30" :mgin="20" :active="item.id == taboneActive.id" class="btn rect" :class="{active:item.id == taboneActive.id}" :myref="'zw'+item.id" :name="item.name"/>
+          </li>
+        </ul>
     </div>
     <div v-if="selected.type=='4dkk'" class="menu">
       <div class="menucon" :class="{shouqi:shouqi}">
@@ -222,38 +224,55 @@ export default {
 <style lang="less" scoped>
 
 .btn{
-    display: inline-block;
-    margin: 0 auto;
-    height: 36px;
-    line-height: 36px;
-    background: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    min-width: 78px;
-    max-width: 200px;
-    cursor: pointer;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    &.active{
-      background: rgba(0, 0, 0, 0.3);
-      border: 1px solid #1FE4DC;
-      color: #1FE4DC;
-    }
+ display: inline-block;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 26px;
+  line-height: 26px;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  min-width: 78px;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  &.active {
+    border: 1px solid rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 1);
+  }
 }
 
-.rect{
+.pic-rect {
   border-radius: 4px;
   height: 24px;
   line-height: 24px;
   padding: 0;
-  & /deep/ span{
-    line-height: 100%;
-    margin: 0 20px;
+  padding-bottom: 10px;
+  background: none;
+  border: none;
+  &.active {
+    border: none;
+    color: rgba(255, 255, 255, 1);
+    position: relative;
+    &::before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      bottom: 0;
+      width: 20px;
+      height: 2px;
+      z-index: 9999;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #0076f6;
+    }
   }
 }
 
 .line{
-  background:#1FE4DC;
+  background:#0076F6;
   width: 100%;
   height: 0.1px;
   opacity: 0.5;
@@ -272,6 +291,8 @@ export default {
     margin-top: 10px;
     margin-right: 10px;
     padding: 0 10px;
+    height: 36px;
+    line-height: 36px;
     >i{
       margin-right: 8px;
       vertical-align: bottom;
@@ -348,6 +369,10 @@ export default {
     transition: all ease 0.3s;
     max-height: 0px;
     overflow: hidden;
+    .pic-con{
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 4px;
+    }
     ul{
       padding-left: 10px!important;
       align-items: center;
@@ -360,15 +385,31 @@ export default {
     }
     .tap{
       padding: 12px 10px;
-      background: rgba(0, 0, 0, 0.3);
-      margin-top: 1px;
       overflow-x: auto;
       &::-webkit-scrollbar{
         display: none;
       }
+       > li {
+        position: relative;
+        &.active {
+          @size:8px;
+          &::before {
+            content: "";
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-left:  @size * 1.5 solid transparent;
+            border-right:  @size * 1.5 solid transparent;
+            border-top:  @size*2 solid rgba(0, 0, 0, 0.5);
+            position: absolute;
+            top: -18px;
+            left: 50%;
+            transform: translateX(-50%);
+          }
+        }
+      }
     }
     .pic-list{
-      background: rgba(0, 0, 0, 0.3);
       padding: 12px 0;
       overflow-x: auto;
       &::-webkit-scrollbar {
@@ -409,7 +450,7 @@ export default {
             width: 100%;
           }
           &.active{
-              border: 2px solid #1FE4DC;
+              border: 2px solid #0076F6;
           }
         }
         .pic-name{

src/views/material/works/index.vue

@@ -127,6 +127,7 @@ export default {
   watch:{
     searchKey: {
       handler: function () {
+        console.log(111);
         this.refreshListDebounced()
       },
       immediate: false,
@@ -143,6 +144,7 @@ export default {
       this.list = []
       this.isRequestingMoreData = false
       this.hasMoreData = true
+      this.requestMoreData()
     }, 700, false),
     openShare(data){
       getPanoInfo(data.id, (data) => {