update

public/mobile.html

@@ -73,7 +73,8 @@
       .broswertips {
         display: flex;
       }
-      .broswertips .h-con>p{
+
+      .broswertips .h-con>p {
         font-size: 16px;
       }
     }
@@ -97,6 +98,7 @@
 
   <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/jweixin-1.6.0.js"></script>
+  <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/vconsole.js"></script>
 
   <script type="text/javascript" src="https://js.player.cntv.cn/creator/swfobject.js"></script>
   <script type="text/javascript" src="https://js.player.cntv.cn/creator/vodplayer.js"></script>
@@ -104,6 +106,11 @@
   <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/lunpan/jquery.arctext.js"></script>
   <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/lunpan/wsruletts.min.js"></script>
   <div id="app"></div>
+  <script>
+    if ((query = window.location.href.indexOf('vlog') != -1)) {
+      var vConsole = new window.VConsole()
+    }
+  </script>
 </body>
 
 </html>

public/static/css/main.css

@@ -7030,7 +7030,7 @@ a.hasHover.tag-link:hover {
     display:none;
     padding:10px;
     transform:translate(20px, -50%);
-    max-width: 400px;
+    max-width: 430px;
 }    
 
 

public/static/js/CAD/loadCAD.js

@@ -28,6 +28,7 @@ window.grendCAD = (function grendCAD() {
         height: 108%;
         top: -12px;
         right: -12px;
+        pointer-events: none;
       }
 
       #cad{

public/static/js/lib/lunpan/wsruletts.min.js

@@ -191,7 +191,8 @@ function browserRedirect() {
                     selected(getGlobal("areaid"))
             },
             rotateReset: function (e, n) {
-                t("." + e + "_bg").removeClass("height0"),
+                console.log(e);
+                t("." + e + "_bg").removeClass("height0");
                     (t("#" + e).length > 0 ? t("#" + e) : t("." + e)).css({
                         transform: "rotate(" + n + "deg)",
                         "-webkit-transform": "rotate(" + n + "deg)"
@@ -311,7 +312,9 @@ function browserRedirect() {
                             e.nowDeg = t._Rouslette.getRotate("hymenu_area");
                         let n = t(".hymenu>span:last a").attr("datarotate");
 
-                        n < t._Rouslette.hymenuObj.oneQ_ratote_max && t._Rouslette.rotateReset("hymenu_area", 0 - t._Rouslette.hymenuObj.hymenu_rotate_center)
+                        let acvv = t(".hymenu>span[class='on'] a").attr("datarotate");
+
+                        n < t._Rouslette.hymenuObj.oneQ_ratote_max && t._Rouslette.rotateReset("hymenu_area", 0 - acvv)
                     }
                 }),
 

public/static/js/loadCAD.js

@@ -41,11 +41,9 @@ window.grendCAD = (function grendCAD() {
         right: 80px;
         top: 16px;
         width: 200px;
-        height: 165px;
+        height: 200px;
         background: rgba(0, 0, 0, .3);
         border-radius: 5px;
-        top: -12px;
-        right: 12px;
       }
 
       .cad > div {

src/assets/images/proj2022/cancel.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22.394" height="22.393" viewBox="0 0 22.394 22.393">
+  <defs>
+    <filter id="联合_24" x="0" y="0" width="22.394" height="22.393" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feFlood flood-opacity="0.502"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#联合_24)">
+    <path id="联合_24-2" data-name="联合 24" d="M-4801.3-3590.3l-5.7,5.7,5.7-5.7-5.7-5.7,5.7,5.7,5.7-5.7-5.7,5.7,5.7,5.7Z" transform="translate(4812.5 3601.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>

src/clients/index.vue

@@ -6,7 +6,7 @@
 import "@/assets/style/reset.less";
 import "@/assets/style/public.less";
 import "@/assets/theme/color.less";
-import wxShare from "@/utils/wxshare";
+// import wxShare from "@/utils/wxshare";
 
 export default {
   methods: {
@@ -25,12 +25,6 @@ export default {
       }
     }
 
-  wxShare({
-        title: `新时代中国网络文明建设成果展云展示`,
-        desc: `弘扬时代新风 建设网络文明`,
-        link: window.location.href,
-        imgUrl: "https://wangzhan.cctv.com/wlwm2022/sharelogo.png",
-      });
   },
 };
 </script>

src/clients/mobile.vue

@@ -12,11 +12,8 @@ import wxShare from "@/utils/wxshare";
 
 // let tongjiurl = "https://shuangchuang-api.kczg.org.cn/Web/jt/";
 
-
 export default {
-  methods: {
-    
-  },
+  methods: {},
   watch: {
     "$route.name": function(newVal) {
       this.$bus.$emit("toggleBGM", newVal == "scene");
@@ -30,13 +27,13 @@ export default {
 
     this.$nextTick(() => {
       document.addEventListener("WeixinJSBridgeReady", () => {}, false);
-    });
-    wxShare({
+      wxShare({
         title: `新时代中国网络文明建设成果展云展示`,
         desc: `弘扬时代新风 建设网络文明`,
         link: window.location.href,
-        imgUrl: "https://wangzhan.cctv.com/wlwm2022/sharelogo.png",
+        imgUrl: "https://wangzhan.cctv.com/wlwm2022/sharelogo.jpg",
       });
+    });
   },
 };
 </script>
@@ -57,8 +54,6 @@ body,
   visibility: hidden;
 }
 
-
-
 // /*竖屏*/
 // @media screen and (orientation: portrait) {
 //   .orientation-tip {
@@ -72,4 +67,5 @@ body,
 //     display: none;
 //   }
 // }
+
 </style>

src/components/bird_view/index.vue

@@ -3,6 +3,7 @@
     class="birdview"
     :class="{ birdview_ipad: isiPad, birdview_pad_notlandscape: isiPad && !g_isLandscape }"
     :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/birdviewbg.jpg`)})` }"
+    @click="goldlog"
   >
     <!-- <img v-if="!hideClose" class="close" @click="close" :src="require('@/assets/images/proj2022/pc/cancel.png')" alt="" /> -->
 
@@ -44,6 +45,9 @@ export default {
       immediate: true,
       handler: function(newVal) {
         this.$bus.$emit("noMode", newVal);
+        if (newVal) {
+           this.goldlog() 
+        }
       },
     },
   },
@@ -52,19 +56,23 @@ export default {
     close() {
       this.$hideBirdView();
     },
+    goldlog(){
+      window.goldlog.record("/spec.1.1", "", "snsScene=p_page2&product=pcweb&pagename=中国网络文明建设成果展云展示", "");
+    },
     onClick(data) {
       this.currentId = data.id;
       let player = window.player;
       if (!player) {
         this.$bus.$emit("resetCurrentTheme");
 
+        this.$showLoading()
         this.$bus.$emit("ifrMessage", {
           events: "flyToPano",
           data: data,
         });
-        setTimeout(() => {
-          this.close();
-        }, 400);
+        // setTimeout(() => {
+        //   this.close();
+        // }, 400);
         return;
       }
 

src/components/hotspot/audio.vue

@@ -88,6 +88,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
+      this.$bus.$emit("toggleBGM", false);
       this.i_audio = $("#audioTag")[0];
       $("#audioTag").on("loadedmetadata", (e) => {
         this.time = this.transTime(e.currentTarget.duration);
@@ -117,6 +118,9 @@ export default {
       });
     });
   },
+  beforeDestroy() {
+    this.$bus.$emit("toggleBGM", true);
+  },
 };
 </script>
 

src/components/hotspot/iframe.vue

@@ -7,7 +7,7 @@
       <div class="hotspotcon">
         <div class="img-con">
           <div class="imgmain">
-            <iframe :key="active" allowfullscreen :src="hotspot.iframe[active]" frameborder="0"></iframe>
+            <iframe :key="active" :src="hotspot.iframe[active]" frameborder="0"></iframe>
           </div>
           <div class="pagna" v-if="hotspot.iframe.length > 1">
             <span>{{ active + 1 }}</span>
@@ -84,8 +84,9 @@ export default {
   .vhotspotcon {
     width: 100%;
     .img-con{
-      width: 1136px;
+      width: 90%;
       margin: 0 auto;
+      height: 94%;
     }
   }
 }
@@ -120,15 +121,16 @@ export default {
       overflow: hidden;
       .imgmain {
         width: 100%;
-        height: auto;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
+        font-size:0;
         >iframe {
           cursor: pointer;
           width: 100%;
           height: 100%;
+          background: #fff;
         }
       }
       @pos: 10px;

src/components/hotspot/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="hotspotconf" :class="{ mbhotspotcon: isMobile, noBg: active == 'vAudio' }" @mousemove.stop>
-    <component :is="active" @close="$emit('close')" :hotspot="hotspot"></component>
-    <div v-if="active != 'vAudio'" @click="$emit('close')" class="close">
-      <img :src="require('@/assets/images/proj2022/pc/cancel_btn.png')" alt="" />
+  <div ref="hotspotref" class="hotspotconf" :tabindex="tabindex" :class="{ mbhotspotcon: isMobile, noBg: active == 'vAudio' }" @keydown.stop @keypress.stop @keyup.stop @mousemove.stop>
+    <component :is="active" @close="close" :hotspot="hotspot"></component>
+    <div v-if="active != 'vAudio'" @click="close" class="close">
+      <img :src="require('@/assets/images/proj2022/cancel.svg')" alt="" />
     </div>
   </div>
 </template>
@@ -35,6 +35,7 @@ export default {
   },
   methods: {
     close() {
+      this.tabindex = -1
       this.$emit("close");
     },
   },
@@ -64,10 +65,14 @@ export default {
       this.active = "vAudio";
     }
     console.log(this.active, "111");
+    this.$nextTick(() => {
+      this.$refs.hotspotref.focus()
+    })
   },
   data() {
     return {
       active: "",
+      tabindex: 111
     };
   },
   computed: {
@@ -128,6 +133,7 @@ export default {
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
         text-overflow: ellipsis;
+        min-height: 30px;
       }
 
       .hotspotcon {
@@ -163,6 +169,7 @@ export default {
               width: 100%;
               cursor: pointer;
               height: 100%;
+              background: #fff;
             }
             video {
               max-width: 100%;

src/components/hotspot/video.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="hotspot" v-if="!isMobile">
     <div class="vhotspotcon">
-      <div class="vtitle" v-if="hotspot.title" v-html="hotspot.title"></div>
-      <div class="hotspotcon" :class="{ hotconfull: !hotspot.title && !(hotspot.title || hotspot.contents[active]) }">
+      <div class="vtitle" v-html="hotspot.title || ''"></div>
+      <div class="hotspotcon" >
         <div class="playerContainer" :id="`container${rand}`"></div>
         <div class="desc" v-html="hotspot.content"></div>
       </div>
@@ -174,6 +174,7 @@ export default {
   align-items: center;
   justify-content: center;
 }
+
 #container1,.playerContainer {
   max-width: 100%;
   height: 86%;

src/components/menu/index.vue

@@ -23,7 +23,6 @@
             :class="{ iactive: !isShow }"
             :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/xueliezhen/menu.png`)})` }"
           ></div>
-
         </section>
         <div v-if="!noMode" @click="changeMode('dollhouse')">
           <div
@@ -112,7 +111,7 @@ export default {
   watch: {
     currentTheme(newVal) {
       console.log(newVal, "currentTheme");
-      if (!this.noMode) {
+      if (!this.noMode && newVal) {
         window.noFlyToPano = true;
         $(".hymenu a[data-gid=" + newVal.id + "]").click();
       }
@@ -173,29 +172,36 @@ export default {
         let typee = $(data.currentTarget).attr("data-typee");
         let ttt = this.oneData.find((item) => item.id == currentid);
 
+        if (
+          $(data.currentTarget)
+            .parent()
+            .hasClass("on") &&
+          ttt.id != "all"
+        ) {
+          this.$hideLoading();
+          return;
+        }
+
         ctx && ctx.areaClick(data);
 
         if (ttt.company.length > 0 && ttt.company && typee == "one") {
-          if (this.isMobile) {
-            this.$emit("toggleBirdView", false);
-          } else {
-            this.$hideBirdView();
-          }
-          if (window.goldlog) {
-            if (!this.isMobile) {
-              window.goldlog.record(`/p_area${currentid}`, "", `snsScene=p_area${currentid}&product=pcweb&pagename=中国网络文明建设成果展云展示`, "");
-            } else {
-              window.goldlog.record(`/m_area${currentid}`, "", `snsScene=m_area${currentid}&product=mobh5&pagename=中国网络文明建设成果展云展示`, "");
-            }
-          }
+          // if (this.isMobile) {
+          //   this.$emit("toggleBirdView", false);
+          // } else {
+          //   this.$hideBirdView();
+          // }
+      
           if (ttt.company[0].id == "1_1") {
             $(".hymenu_industry").addClass("height0");
             $(".hyrlbg_ind").addClass("height0");
-            !window.noFlyToPano &&
+            if (!window.noFlyToPano) {
+              this.$showLoading();
               this.$bus.$emit("ifrMessage", {
                 events: "flyToPano",
                 data: ttt.company[0],
               });
+            }
+
             window.noFlyToPano = false;
             return;
           }
@@ -205,13 +211,25 @@ export default {
           $._Rouslette.initArea(".hymenu_industry", "two", ttt.company, (data2, ctx2) => {
             let currentid = $(data2.currentTarget).attr("data-gid");
             let ttt = bbtmp.find((item) => item.id == currentid);
+
+            console.dir($(data2.currentTarget).parent());
+
+
+            // if ($(data2.currentTarget).parent().hasClass('on')) {
+            //   return
+            // }
             ctx2 && ctx2.areaClick(data2);
 
-            !window.noFlyToPano &&
+            if (!window.noFlyToPano ) {
+              this.$showLoading();
               this.$bus.$emit("ifrMessage", {
                 events: "flyToPano",
                 data: ttt,
               });
+            }
+            // this.$hideLoading();
+            // this.$showLoading();
+            
             window.noFlyToPano = false;
           });
 
@@ -249,7 +267,9 @@ export default {
             let currentid = $(data.currentTarget).attr("data-gid");
             let item = this.list.find((ii) => ii.id == currentid);
             item.maidiancode &&
-              window.goldlog.record(`/${item.maidiancode}`, "", `snsScene=${item.maidiancode}&product=mobh5&pagename=中国网络文明建设成果展云展示`, "");
+              window.goldlog.record(`/spec.1.1`, "", `snsScene=${item.maidiancode}&product=mobh5&pagename=中国网络文明建设成果展云展示`, "");
+
+
             if (item.id == "like") {
               this.dianzan();
               return;
@@ -475,6 +495,74 @@ export default {
   }
 }
 
+@media screen and (max-width: 1400px) {
+  .micon {
+    left: 50%;
+    position: fixed;
+    transform: translateX(-50%);
+    bottom: 17vh;
+    display: flex;
+    align-items: center;
+    z-index: 999;
+    > img {
+      width: 64px;
+      height: auto;
+      cursor: pointer;
+    }
+    > section {
+      width: 56px;
+      height: auto;
+      cursor: pointer;
+      > div {
+        transform: scale(0.9);
+        width: 56px;
+        height: 56px;
+        overflow: hidden;
+        background-size: auto 100%;
+        animation: boom-open-menu 0.5s steps(24) forwards;
+        &.iactive {
+          animation: boom-close-menu 0.5s steps(24) forwards;
+        }
+      }
+    }
+    > div {
+      cursor: pointer;
+      text-align: center;
+      margin: 0 24px;
+      transform: translateY(2.5vh);
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+
+      > div {
+        width: 50px;
+        height: 50px;
+        overflow: hidden;
+        background-position: 0 0;
+        background-size: auto 100%;
+        transform: scale(0.8);
+
+        &.iactive {
+          animation: boom-open-data 1s steps(25) forwards;
+        }
+      }
+      &:last-of-type {
+        > div {
+          background-position: -1200px 0;
+          &.iactive {
+            animation: boom-open-data 1s steps(25) backwards;
+          }
+        }
+      }
+      > span {
+        display: inline-block;
+        transform: translateY(-8px);
+        font-size: 14px;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 700px) {
   #hycontrolBtn {
     transform: translateY(16vh);

src/components/popupLayout/Tips.vue

@@ -7,7 +7,7 @@
     >
         <popup v-if="show" :is-pass="true">
             <div class="ui-message-tips">
-                <img class="ui-bg" :src="require(`@/assets/images/project/icon/tips.png`)" alt="">
+                <!-- <img class="ui-bg" :src="require(`@/assets/images/project/icon/tips.png`)" alt=""> -->
                 <div class="brightness"></div>
                 <span v-html="content"></span>
             </div>
@@ -49,11 +49,14 @@ export default {
     transform: translate(-50%, -50%);
     border-radius: 10px;
     overflow: hidden;
-    box-shadow: 0 0px 35px rgba(0, 0, 0, 0.3);
-    min-width: 430px;
-    min-height: 240px;
     text-align: center;
     pointer-events: none;
+    width: 402px;
+    height: 132px;
+    background: linear-gradient(180deg, rgba(166,192,232,0.4) 0%, rgba(16,25,38,0.7) 3%, #171F2A 39%, rgba(19,28,40,0.85) 39%, rgba(54,58,64,0.91) 85%, rgba(80,81,83,0.47) 99%, rgba(230,236,245,0.14) 100%);
+    box-shadow: inset 0px 2px 2px 1px rgba(255,255,255,0.4);
+    opacity: 1;
+    backdrop-filter: blur(10px);
     .ui-bg{
         width: 100%;
         position: absolute;
@@ -84,7 +87,7 @@ export default {
 
 @media screen and (max-width: 600px) {
     .ui-message-tips {
-        min-width: 80%;
+        max-width: 80%;
         .ui-bg{
             width: 100%;
             height: 100%;

src/config/api.js

@@ -1,66 +1,80 @@
-import { axios } from "./http";
-let serveUrl = 'https://app1.vote.cctv.com/'
-// 打卡列表
-export function getdakaList(data, cb) {
-  let params = {
-    ...data
-  };
+let serveUrl = '//app2.vote.cctv.com/'
 
-  axios({
-    method: "get",
-    params,
-    url: `signIn/list`,
-  }).then((res) => {
-    cb(res);
-  });
-}
+let commentUrl = '//common.newcomment.cntv.cn/'
 
 
-// 打卡
-export function postdaka(cb) {
-  axios({
-    method: "get",
-    url: `signIn`,
-  }).then((res) => {
-    cb(res);
-  });
-}
+const serverName = '//newcomment.cntv.cn/'
+
 
 
 // 留言列表
-export function getcontentList(data, cb) {
+export function getcontentList(data,cb) {
   let params = {
     itemid:'wlwm2022',
     app:'cctvdhd',
     avatar:1,
+    // jsonp_callback:'callback_cctvdhd_wlwm2022',
     ...data
   };
 
-  axios({
-    method: "get",
-    params,
-    url: `data/list`,
-  }).then((res) => {
-    cb(res);
+  $.ajax({
+    //几个参数需要注意一下
+    type: "GET", //方法类型
+    //dataType: "json",//预期服务器返回的数据类型
+    url:`${commentUrl}data/list`, //url
+    dataType: "jsonp",
+    jsonp: "jsonp_callback",
+    data: {
+      ...params
+    },
+    success: function (result) {
+      cb(result)
+    },
+    error: function (error) { error },
   });
+ 
 }
 
 
 // 留言
 export function postcontent(data, cb) {
   let params = {
-    itemid:'wlwm2022',
-    app:'cctvdhd',
-    data:'匿名',
+    itemid: 'wlwm2022',
+    app: 'cctvdhd',
+    data: '匿名',
     ...data
   }
-  axios({
-    data: params,
-    method: "post",
-    url: `comment/post`,
-  }).then((res) => {
-    cb(res);
+
+  $.ajax({
+    //几个参数需要注意一下
+    type: "POST", //方法类型
+    //dataType: "json",//预期服务器返回的数据类型
+    url: `${serverName}comment/post`, //url
+    dataType: "jsonp",
+    jsonp: "jsonp_callback",
+    data: {
+      ...params
+    },
+    success: function (result) {
+      cb(result)
+    },
+    error: function (error) {
+      error
+    },
   });
+
+  // $.ajax({
+  //   type: "get",
+  //   url:`${commentUrl}data/list?app=cctvdhd&itemid=wlwm2022&avatar=1&prepage=${data.prepage}&page=${data.page}`,
+  //   dataType: "jsonp",
+  //   jsonp: "callback",
+  //   jsonpCallback:"hqpls",
+  //   cache:true,
+  //   success: function (data) {
+  //     console.log(data,'datatata');
+  //   }
+  // });
+ 
 }
 
 
@@ -70,7 +84,7 @@ export function postcontent(data, cb) {
 export function supCount(cb) {
   $.ajax({
     type: "get",
-    url: `${serveUrl}makeClickAction.do?callback=jQuery172010470173443419695_1647829756044&type=jsonp&voteId=15951&items_1134026=216504`,
+    url: `${serveUrl}makeClickAction.do?type=jsonp&voteId=15951&items_1134026=216504`,
     dataType: "jsonp",
     jsonpCallback: "t",
     success: function (data) {

src/config/http.js

@@ -1,13 +1,6 @@
 import axios from 'axios'
 var qs = require('qs');
 
-
-import browser from '@/utils/browser'
-import Vue from 'vue'
-
-let vue = new Vue()
-
-
 const serverName = 'https://newcomment.cntv.cn/'
 
 const orginLink = window.location.origin
@@ -21,12 +14,10 @@ axios.interceptors.request.use(function (config) {
   if (config.method === 'post') {
     config.data = {
       ...config.data,
-      rnd: Math.random()
     }
     config.data = qs.stringify(config.data)
   } else if (config.method === 'get') {
     config.params = {
-      rnd: Math.random(),
       ...config.params
     }
     // config.params = qs.stringify(config.params)
@@ -41,7 +32,6 @@ 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)
@@ -51,20 +41,12 @@ axios.interceptors.response.use(
       case 4500:
         break
       case 5001:
-        window.localStorage.setItem('webtoken', '')
-        window.localStorage.setItem('webuserInfo', '')
-        alert('请登录后再操作')
+     
         break
       case 5002:
-        window.localStorage.setItem('webtoken', '')
-        window.localStorage.setItem('webuserInfo', '')
-        alert('请登录后再操作')
+   
         break
       case 301:
-
-        
-        browser.mobile ? (vue.$bus.$emit('mblogin',url)):window.open(url,'_blank')
-        
         break
       case 200:
         break

src/data/booth.js

@@ -1,14 +1,15 @@
 //计算点位分布
-let calcuSpread = (start, end, other = [], getRid = []) => {
+let calcuSpread = (start, end, other=[], getRid=[] ) => {
   let arr = [];
   for (let i = 0; i <= end - start; i++) {
-    if (!(getRid.indexOf(start + i) > -1)) {
+    if (!(getRid.indexOf(start + i)>-1)) {
       arr.push(String(start + i));
     }
   }
   return arr.concat(other);
 };
 
+
 let Booth = [
   {
     id: "1",
@@ -20,7 +21,7 @@ let Booth = [
         id: "1_1", //標識符
         firstView: "&firstView=pano:0,qua:0.006532994615897772,-0.0025274544617692302,0.000016512252212974678,0.9999754723878731", //初始視角
         panoId: "0",
-        containPanos: calcuSpread(0, 57, [344], []),
+        containPanos: calcuSpread(0, 57,[344],[]),
       }
     ],
   },
@@ -38,7 +39,7 @@ let Booth = [
         height: '8%',
         firstView: "&firstView=pano:236,qua:0.003480801832936312,0.9128715630672547,-0.007785040536549504,0.4081578044626181", //初始視角
         panoId: "236",
-        containPanos: ["236", "237", "238", "239", "240", "241", "242", "243", "244", "251", "252"]
+        containPanos: ["236","237","238","239","240","241","242","243","244","251","252","393","394","395"]
       },
       {
         name: "天津市",
@@ -50,7 +51,7 @@ let Booth = [
         height: "14%",
         firstView: "&firstView=pano:66,qua:0.0017518034285941132,-0.6940206521715635,0.0016887091883557755,0.7199509812968947", //初始視角
         panoId: "66", //对应点位id
-        containPanos: ["65", "66", "77", "78", "79", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "100", "58", "255", "256", "180"]
+        containPanos: ["65","66","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","58","255","256","180"]
       },
       {
         name: "河北省",
@@ -62,7 +63,7 @@ let Booth = [
         height: "6%",
         firstView: "&firstView=pano:135,qua:0.015705148645611147,0.4683450309904384,-0.00832658487331569,0.8833668158516297", //初始視角
         panoId: "135", //对应点位id
-        containPanos: ["135", "116", "117", "118", "119", "120", "121", "122"]
+        containPanos: ["135","116","117","118","119","120","121","122"]
       },
       {
         name: "内蒙古自治区",
@@ -74,7 +75,7 @@ let Booth = [
         height: "5%",
         firstView: "&firstView=pano:115,qua:-0.002914860969113398,-0.2571845563680906,-0.0007757554987742462,0.9663575995125463", //初始視角
         panoId: "115", //对应点位id
-        containPanos: ["115", "123", "124", "125", "126", "127", "128", "129", "130", "131", "132", "133", "134"]
+        containPanos: ["115","123","124","125","126","127","128","129","130","131","132","133","134"]
       },
       {
         name: "吉林省",
@@ -86,7 +87,7 @@ let Booth = [
         height: "6%",
         firstView: "&firstView=pano:102,qua:0.013932276076966083,0.4941965139219505,-0.007921379021369674,0.8692024723293211", //初始視角
         panoId: "102", //对应点位id
-        containPanos: ["101", "102", "103", "104", "105", "106", "107", "108"]
+        containPanos: ["101","102","103","104","105","106","107","108"]
       },
       {
         name: "上海市",
@@ -98,7 +99,7 @@ let Booth = [
         height: "7%",
         firstView: "&firstView=pano:59,qua:0.03169251111651029,0.3489621532260752,-0.011809051306773477,0.9365263094574586", //初始視角
         panoId: "59", //对应点位id
-        containPanos: ["59", "60", "61", "62", "63", "64"]
+        containPanos: ["59","60","61","62","63","64"]
       },
       {
         name: "江苏省",
@@ -110,7 +111,7 @@ let Booth = [
         height: "3%",
         firstView: "&firstView=pano:109,qua:-0.01996445240366129,-0.8385737467156694,-0.030800587867370395,0.5435501800251524", //初始視角
         panoId: "109", //对应点位id
-        containPanos: ["109", "110", "111", "112", "113", "114", "154"]
+        containPanos: ["109","110","111","112","113","114","154"]
       },
       {
         name: "浙江省",
@@ -122,7 +123,7 @@ let Booth = [
         height: "4%",
         firstView: "&firstView=pano:152,qua:-0.015383547760863333,0.41634202930798503,0.007045611591242512,0.909050617828818", //初始視角
         panoId: "152", //对应点位id
-        containPanos: ["151", "152", "153", "155", "156", "157", "158", "159", "138", "139"]
+        containPanos: ["151","152","153","155","156","157","158","159","138","139"]
       },
       {
         name: "安徽省",
@@ -134,7 +135,7 @@ let Booth = [
         height: "3%",
         firstView: "&firstView=pano:136,qua:0.0005441737929696521,-0.4030780506128982,0.00023967744959056323,0.9151654069731247", //初始視角
         panoId: "136", //对应点位id
-        containPanos: ["136", "137", "140", "142", "143"]
+        containPanos: ["136","137","140","142","143"]
       },
       {
         name: "福建省",
@@ -146,7 +147,7 @@ let Booth = [
         height: "9%",
         firstView: "&firstView=pano:245,qua:-0.003274955728200214,-0.6752050139260394,-0.002997852722455059,0.7376167660044172", //初始視角
         panoId: "245", //对应点位id
-        containPanos: ["245", "235", "234", "280", "246", "248", "247", "249", "267"]
+        containPanos: ["245","235","234","280","246","248","247","249","267"]
       },
       {
         name: "江西省",
@@ -158,7 +159,7 @@ let Booth = [
         height: "7%",
         firstView: "&firstView=pano:141,qua:-0.012069343265410443,0.9232530961623906,-0.029101874252052108,-0.38289832451349354", //初始視角
         panoId: "141", //对应点位id
-        containPanos: ["141", "150", "160", "161", "162", "163", "164", "165", "178"]
+        containPanos: ["141","150","160","161","162","163","164","165","178"]
       },
       {
         name: "河南省",
@@ -170,7 +171,7 @@ let Booth = [
         height: "6%",
         firstView: "&firstView=pano:177,qua:0.02877847579847971,-0.833411884839266,0.04359373957977583,0.5501781773768091", //初始視角
         panoId: "177", //对应点位id
-        containPanos: ["177", "186", "185", "184", "183", "182", "181", "179"]
+        containPanos: ["177","186","185","184","183","182","181","179"]
       },
       {
         name: "湖北省",
@@ -182,7 +183,7 @@ let Booth = [
         height: "7%",
         firstView: "&firstView=pano:170,qua:-0.0003362832582110284,0.9725023247438509,-0.001404259904263288,-0.2328886956178834", //初始視角
         panoId: "170", //对应点位id
-        containPanos: ["170", "200", "193", "194", "195", "196", "197", "198", "199", "202", "203", "204"]
+        containPanos: ["170","200","193","194","195","196","197","198","199","202","203","204"]
       },
       {
         name: "湖南省",
@@ -194,7 +195,7 @@ let Booth = [
         height: "6%",
         firstView: "&firstView=pano:201,qua:0.0029048018499625685,0.8949376478266332,0.00582685882339346,-0.44614371035335953", //初始視角
         panoId: "201", //对应点位id
-        containPanos: ["201", "209", "210", "208", "207", "206", "205", "212"]
+        containPanos: ["201","209","210","208","207","206","205","212"]
       },
       {
         name: "广东省",
@@ -206,7 +207,7 @@ let Booth = [
         height: "10%",
         firstView: "&firstView=pano:259,qua:0.048112694757082616,-0.7343050161729677,0.052333092612867796,0.6750870678299076", //初始視角
         panoId: "259", //对应点位id
-        containPanos: ["259", "266", "268", "269", "282", "270", "271", "272", "279", "277", "278", "273", "274", "276", "275"]
+        containPanos: ["259","266","268","269","282","270","271","272","279","277","278","273","274","276","275"]
       },
       {
         name: "广西壮族自治区",
@@ -218,7 +219,7 @@ let Booth = [
         height: "7%",
         firstView: "&firstView=pano:144,qua:0.0007652023854567885,-0.20078252569831934,0.0001568330891578431,0.9796355305200983", //初始視角
         panoId: "144", //对应点位id
-        containPanos: ["144", "145", "146", "147", "148", "149", "166"]
+        containPanos: ["144","145","146","147","148","149","166"]
       },
       {
         name: "海南省",
@@ -230,7 +231,7 @@ let Booth = [
         height: "6%",
         firstView: "&firstView=pano:168,qua:-0.006825949091149443,-0.2944266006273781,-0.002103015210066327,0.9556474061688144", //初始視角
         panoId: "168", //对应点位id
-        containPanos: ["167", "168", "169", "172", "173", "174", "175", "176"]
+        containPanos: ["167","168","169","172","173","174","175","176"]
       },
       {
         name: "重庆市",
@@ -242,7 +243,7 @@ let Booth = [
         height: "7%",
         firstView: "&firstView=pano:75,qua:0.0036390761677028245,0.5747701651204852,-0.0025560617170463885,0.8183027989899166", //初始視角
         panoId: "75", //对应点位id
-        containPanos: ["67", "68", "69", "70", "71", "72", "73", "74", "75", "76"]
+        containPanos: ["67","68","69","70","71","72","73","74","75","76"]
       },
       {
         name: "四川省",
@@ -254,7 +255,7 @@ let Booth = [
         height: "10%",
         firstView: "250,qua:0.01855666637790445,0.9174358281943414,-0.04308831642538874,0.3951082848826133", //初始視角
         panoId: "250", //对应点位id
-        containPanos: ["250", "265", "264", "260", "263", "261", "262", "253"]
+        containPanos: ["250","265","264","260","263","261","262","253"]
       },
       {
         name: "贵州省",
@@ -266,7 +267,7 @@ let Booth = [
         height: "5%",
         firstView: "&firstView=pano:171,qua:0.0017824102765913096,-0.5428442474929757,0.0011521026168594861,0.8398307133926982", //初始視角
         panoId: "171", //对应点位id
-        containPanos: ["171", "188", "189", "190", "191", "192", "187"]
+        containPanos: ["171","188","189","190","191","192","187"]
       },
       {
         name: "西藏自治区",
@@ -278,7 +279,7 @@ let Booth = [
         height: "6%",
         firstView: "&firstView=pano:211,qua:0.039443998090233995,0.0030299771643679933,-0.00011960804550374027,0.9992171814692207", //初始視角
         panoId: "211", //对应点位id
-        containPanos: ["211", "213", "215", "216", "217", "218", "214"]
+        containPanos: ["211","213","215","216","217","218","214"]
       },
       {
         name: "陕西省",
@@ -290,7 +291,7 @@ let Booth = [
         height: "8%",
         firstView: "&firstView=pano:227,qua:-0.021999243522644072,-0.3564400185837194,-0.008395322245446445,0.9340214487820174", //初始視角
         panoId: "227", //对应点位id
-        containPanos: ["227", "220", "219", "224", "221", "223", "222"]
+        containPanos: ["227","220","219","224","221","223","222"]
       },
       {
         name: "新疆维吾尔自治区",
@@ -302,7 +303,7 @@ let Booth = [
         height: "8%",
         firstView: "&firstView=pano:225,qua:-0.005264758340658099,0.9570338580037607,-0.017410027490639735,-0.28940517422823686", //初始視角
         panoId: "225", //对应点位id
-        containPanos: ["225", "226", "230", "231", "232", "229", "228", "233", "281"]
+        containPanos: ["225","226","230","231","232","229","228","233","281"]
       }
     ],
   },
@@ -320,7 +321,7 @@ let Booth = [
         height: "13%",
         firstView: "&firstView=pano:283,qua:0.014537068999790128,-0.7680885717259085,0.017448109618183792,0.6399407716116632", //初始視角
         panoId: "283", //对应点位id
-        containPanos: ["283", "292", "296", "295", "294", "297", "293", "300", "298"]
+        containPanos: ["283","292","296","295","294","297","293","300","298","396","397","398"]
       },
       {
         name: "新华网",
@@ -332,7 +333,7 @@ let Booth = [
         height: "11%",
         firstView: "&firstView=pano:291,qua:-0.005812432166942927,0.6048800050224513,0.00441529351180508,0.7962831842702823", //初始視角
         panoId: "291", //对应点位id
-        containPanos: ["291", "258", "257", "284", "285", "286", "287", "290", "288", "306", "289", "254", "305", "304", "302", "301"]
+        containPanos: ["291","258","257","284","285","286","287","290","288","306","289","254","305","304","302","301"]
       },
       {
         name: "央视网",
@@ -344,7 +345,7 @@ let Booth = [
         height: "11%",
         firstView: "&firstView=pano:340,qua:0.017038084398734447,0.17916481180558472,-0.003103312646746605,0.9836666343779016", //初始視角
         panoId: "340", //对应点位id
-        containPanos: ["340", "341", "342", "343", "384", "385", "386", "387", "388", "389", "390", "391", "392"]
+        containPanos: ["340","341","342","343","384","385","386","387","388","389","390","391","392"]
       },
       {
         name: "中国联通",
@@ -356,7 +357,7 @@ let Booth = [
         height: "11%",
         firstView: "&firstView=pano:372,qua:-0.021547124102444085,0.9000556057732905,-0.04479611540025312,-0.43293064598514197", //初始視角
         panoId: "372", //对应点位id
-        containPanos: ["372", "383", "382", "381", "377", "380", "378", "376", "375", "374", "379"]
+        containPanos: ["372","383","382","381","377","380","378","376","375","374","379"]
       },
       {
         name: "腾讯",
@@ -368,7 +369,7 @@ let Booth = [
         height: "13%",
         firstView: "&firstView=pano:338,qua:0.04689275463602263,-0.49467727263672506,0.026742931783574536,0.8673985800011111", //初始視角
         panoId: "338", //对应点位id
-        containPanos: ["338", "339", "337", "336", "345", "346", "347", "349", "350", "351", "352", "353", "348", "354", "356", "355", "357", "358"]
+        containPanos: ["338","339","337","336","345","346","347","349","350","351","352","353","348","354","356","355","357","358"]
       },
       {
         name: "阿里巴巴",
@@ -380,21 +381,7 @@ let Booth = [
         height: "9%",
         firstView: "&firstView=pano:303,qua:-0.012022502266654566,0.8949923430546826,-0.02416553743616291,-0.4452641749266701", //初始視角
         panoId: "303", //对应点位id
-        containPanos: ["303", "307", "308", "309", "310", "311", "312", "313", "314", "299"]
-      },
-
-
-      {
-        name: "360集团",
-        eng: '360',//总导览
-        id: "3_7", //標識符
-        top: "68%",
-        left: "38.7%",
-        width: "7%",
-        height: "10%",
-        firstView: "&firstView=pano:326,qua:0.046986055943169396,-0.7099974432052234,0.0475876577129527,0.7010216503876512", //初始視角
-        panoId: "326", //对应点位id
-        containPanos: ["326", "325", "327", "335", "328", "331", "329", "330", "332", "333", "334"]
+        containPanos: ["303","307","308","309","310","311","312","313","314","299"]
       },
       {
         name: "抖音",
@@ -406,7 +393,19 @@ let Booth = [
         height: "11%",
         firstView: "&firstView=pano:371,qua:0.0729785006998528,-0.6995666410591155,0.0721953629854038,0.7071552031294578", //初始視角
         panoId: "371", //对应点位id
-        containPanos: ["371", "366", "365", "364", "369", "363", "370", "362", "360", "361", "368", "367", "373", "359"]
+        containPanos: ["371","366","365","364","369","363","370","362","360","361","368","367","373","359"]
+      },
+      {
+        name: "360集团",
+        eng: '360',//总导览
+        id: "3_7", //標識符
+        top: "68%",
+        left: "38.7%",
+        width: "7%",
+        height: "10%",
+        firstView: "&firstView=pano:326,qua:0.046986055943169396,-0.7099974432052234,0.0475876577129527,0.7010216503876512", //初始視角
+        panoId: "326", //对应点位id
+        containPanos: ["326","325","327","335","328","331","329","330","332","333","334"]
       },
       {
         name: "蚂蚁集团",
@@ -418,7 +417,7 @@ let Booth = [
         height: "11%",
         firstView: "&firstView=pano:315,qua:0.04796130587036803,-0.7073325392481822,0.04821560464025972,0.7036018950575474", //初始視角
         panoId: "315", //对应点位id
-        containPanos: ["315", "324", "323", "316", "317", "318", "319", "320", "321", "322"]
+        containPanos: ["315","324","323","316","317","318","319","320","321","322"]
       }
     ],
   }

src/data/raw.js

@@ -5,7 +5,7 @@ let calcuSpread = (start, end, other = [], getRid = []) => {
   let arr = [];
   for (let i = 0; i <= end - start; i++) {
     if (!(getRid.indexOf(start + i) > -1)) {
-      arr.push(start + i);
+      arr.push(String(start + i));
     }
   }
   return arr.concat(other);

src/pages/mobilescene/birdview/ViewOperation.vue

@@ -13,17 +13,18 @@ import browser from '@/utils/browser'
 const MAXSCALE = 1
 const MINSCALE = 1
 const RANGE = 0.1
-let wh = {width: window.innerHeight * (1108 / 668), height: window.innerHeight}
+let wh = 0
 
 export default {
   data () {
+    wh = {width: window.innerHeight * (1848 / 1114), height: window.innerHeight}
     return {
       wh,
       width: wh.width,
       height: wh.height,
       tscale: 1,
       translate: {
-        x: (wh.width - window.innerWidth ) / 3.4,
+        x: (wh.width - window.innerWidth ) / 2,
         y: 0
       },
       isFireFox: browser.gecko,
@@ -56,12 +57,6 @@ export default {
       this.translate.x = Math.min(Math.max(this.translate.x, -this.wLimit), this.wLimit)
       this.translate.y = Math.min(Math.max(this.translate.y, -this.hLimit), this.hLimit)
     },
-    g_isLandscape:{
-      immediate:true,
-      handler:function () {
-          wh = {width: window.innerHeight * (1335 / 1080), height: window.innerHeight}
-      }
-    }
   },
   methods: {
     readyMove (ev) {

src/pages/mobilescene/birdview/ViewOperationh.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="per-layout" ref="layout">
+    <div id="box" class="content" :style="contentStyle">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import {setGesture} from '@/utils'
+import browser from '@/utils/browser'
+
+const MAXSCALE = 1
+const MINSCALE = 1
+const RANGE = 0.1
+let wh = 0
+
+export default {
+  data () {
+    // wh = {width: window.innerHeight * (668 / 1108), height: window.innerHeight}
+    // wh = {width: window.innerHeight * (1108 / 668), height: window.innerHeight}
+    wh = {width: window.innerHeight * (1848 / 1114), height: window.innerHeight}
+    return {
+      wh,
+      width: wh.width,
+      height: wh.height,
+      tscale: 1,
+      translate: {
+        x: (wh.width - window.innerWidth ) / 2,
+        y: 0
+      },
+      isFireFox: browser.gecko,
+      ismobile: browser.mobile
+    }
+  },
+  computed: {
+    contentStyle () {
+      let tempW = Math.round(this.tscale * wh.width)
+      let tempH = Math.round(this.tscale * wh.height)
+
+      let val = `translateX(calc(-50% + ${this.translate.x}px))
+        translateY(calc(-50% + ${this.translate.y}px))
+        `
+      let width = `${tempW % 2 === 0 ? tempW : tempW + 1}px`
+      let height = `${tempH % 2 === 0 ? tempH : tempH + 1}px`
+      let top = `${Math.round(0.5 * wh.height)}px`
+      return {transform: val, width, height, top}
+    },
+    wLimit () {
+      return this.ismobile ? ((wh.width * Math.max(this.tscale, 1))) / 2 - window.innerWidth / 2 : ((wh.width * this.tscale) - wh.width) / 2
+    },
+    hLimit () {
+      return ((wh.height * this.tscale) - wh.height) / 2
+    }
+  },
+  watch: {
+    tscale () {
+      this.$emit('closeItem')
+      this.translate.x = Math.min(Math.max(this.translate.x, -this.wLimit), this.wLimit)
+      this.translate.y = Math.min(Math.max(this.translate.y, -this.hLimit), this.hLimit)
+    },
+  },
+  methods: {
+    readyMove (ev) {
+      // ev.preventDefault()
+      ev.stopPropagation()
+      let startX, startY
+      if (ev.screenX) {
+        startX = ev.screenX
+        startY = ev.screenY
+      } else {
+        startX = ev.touches[0].clientX
+        startY = ev.touches[0].clientY
+      }
+
+      let x = this.translate.x
+      let y = this.translate.y
+      let moveHandle = ev => {
+        let moveX, moveY
+        if (ev.screenX) {
+          moveX = ev.screenX
+          moveY = ev.screenY
+        } else {
+          moveX = ev.touches[0].clientX
+          moveY = ev.touches[0].clientY
+        }
+
+        this.translate.x = Math.min(Math.max((x + moveX - startX), -this.wLimit), this.wLimit)
+        this.translate.y = Math.min(Math.max((y + moveY - startY), -this.hLimit), this.hLimit)
+      }
+
+      let upHandle = () => {
+        document.removeEventListener('touchmove', moveHandle, { passive: false })
+        document.removeEventListener('touchend', upHandle)
+        document.removeEventListener('mousemove', moveHandle, { passive: false })
+        document.removeEventListener('mouseup', upHandle)
+      }
+
+      document.addEventListener('touchmove', moveHandle, { passive: false })
+      document.addEventListener('touchend', upHandle)
+      document.addEventListener('mousemove', moveHandle, { passive: false })
+      document.addEventListener('mouseup', upHandle)
+    },
+    scrollFunc  (e) {
+      e = e || window.event
+      let up = () => {
+        this.tscale < MAXSCALE && (this.tscale += RANGE)
+      }
+      let down = () => {
+        let scaleFuc = (y) => {
+          this.translate = {
+            x: 0,
+            y
+          }
+        }
+        this.tscale > MINSCALE && (this.tscale -= RANGE)
+        this.ismobile ? (this.tscale === 3 && scaleFuc(184)) : (this.tscale === 1 && scaleFuc(0))
+      }
+      if (this.isFireFox) {
+        switch (true) {
+          case e.detail > 0: // 当滑轮向下滚动时
+            down()
+            break
+          default:
+            up()
+            break
+        }
+      } else { // 判断浏览器IE，谷歌滑轮事件
+        switch (true) {
+          case e.wheelDelta > 0:// 当滑轮向上滚动时
+            up()
+            break
+          default:
+            down()
+            break
+        }
+      }
+    }
+  },
+  mounted () {
+    var box = document.querySelector('#box')
+
+    this.readyMove = this.readyMove.bind(this)
+    this.$refs.layout.addEventListener('mousedown', this.readyMove,  { capture: false })
+    this.$refs.layout.addEventListener('touchstart', this.readyMove,  { capture: false })
+    /* IE、Opera注册事件 */
+    if (document.attachEvent) {
+      box.attachEvent('onmousewheel', this.scrollFunc)
+    }
+    // Firefox使用addEventListener添加滚轮事件
+    if (document.addEventListener) { // firefox
+      box.addEventListener('DOMMouseScroll', this.scrollFunc, false)
+    }
+    // Safari与Chrome属于同一类型
+    window.onmousewheel = box.onmousewheel = this.scrollFunc
+
+    var boxGesture = setGesture(box) // 得到一个对象
+    boxGesture.gesturestart = function () { // 双指开始
+    }
+    boxGesture.gesturemove = () => { // 双指移动
+      // let temp = this.tscale + e.dec
+      // // this.tscale = Math.max(MINSCALE, Math.min(MAXSCALE, temp))
+      // this.tscale = temp < MAXSCALE ? temp : MAXSCALE
+      // this.tscale = temp > MINSCALE ? temp : MINSCALE
+    }
+    boxGesture.gestureend = function () { // 双指结束
+    }
+  },
+  beforeDestroy () {
+    this.$refs.layout.removeEventListener('mousedown', this.readyMove)
+    this.$refs.layout.removeEventListener('touchstart', this.readyMove)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.per-layout{
+  width: 100%;
+  height: 100%;
+  touch-action:none;
+}
+
+.content{
+  width: 120%;
+  will-change: transform;
+  position: relative;
+  left: 50%;
+  height: 100%;
+  touch-action:none;
+}
+
+</style>

src/pages/mobilescene/birdview/hengping.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="birdview" :class="{hengbirdview:g_isLandscape}" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/${g_isLandscape?'bg_hp_birdview':'birdviewbg'}.jpg`)})` }">
+    <ViewOperation>
+        <div class="modelcon">
+          <img :src="require(`@/assets/images/proj2022/model.png`)" alt="" />
+          <div class="tag" v-for="(item, i) in tags" :key="i" :style="{ top: item.top, left: item.left, width: item.width, height: item.height }">
+            <img @click="onClick(item)" :src="require(`@/assets/images/proj2022/bird_view/${item.eng}${currentId == item.id ? '_acitve' : ''}.svg`)" alt="" />
+          </div>
+        </div>
+    </ViewOperation>
+  </div>
+</template>
+
+<script>
+import ViewOperation from "./ViewOperationh";
+import { region } from "@/data/raw.js";
+import { Booth } from "@/data/booth.js";
+
+let bb = [];
+
+Booth.forEach((item) => {
+  bb = bb.concat(item.company);
+});
+
+export default {
+  props: ["hideClose"],
+  data() {
+    return {
+      tags: bb,
+      currentId: "",
+    };
+  },
+  components: {
+    ViewOperation,
+  },
+  methods: {
+    onClick(data) {
+      this.currentId = data.id;
+      let player = window.player;
+      if (!player) {
+        this.$bus.$emit("resetCurrentTheme");
+        
+        this.$showLoading()
+        this.$bus.$emit("ifrMessage", {
+          events: "flyToPano",
+          data: data,
+        });
+
+
+        return;
+      }
+
+      let fn = () => {
+        let currentRegion = region.find((item) => item.id == data.id);
+        let { x, y, z, w } = currentRegion.firstView.panoQuaternion;
+        let fnname = "flyToPano";
+        if (player.mode == "panorama") {
+          fnname = "blackToPano";
+        }
+        player[fnname]({
+          pano: player.model.panos.index[currentRegion.firstView.panoId],
+          quaternion: new window.THREE.Quaternion(x, y, z, w),
+        });
+      };
+
+      setTimeout(() => {
+        fn();
+        this.$emit("close", { type: 1, isjump: "yes" });
+        this.currentId = "";
+      }, 300);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.birdview {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 4002;
+  background-size: cover;
+  background-position: left top;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background: #5688bb;
+  .close {
+    position: absolute;
+    right: 30px;
+    top: 30px;
+    cursor: pointer;
+    z-index: 99;
+  }
+  .modelcon {
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    > img {
+      width: 100%;
+    }
+   .tag {
+      position: absolute;
+      cursor: pointer;
+      display: inline-block;
+      text-align: center;
+      top: 50%;
+      left: 50%;
+      // background: rgba(0, 0, 0, 0.5);
+      // width: 10%;
+      height: 15%;
+      &:hover {
+        > img {
+          display: inline-block;
+          width: 36vw;
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          top: 10%;
+        }
+      }
+
+      &:first-of-type {
+        top: 17%;
+        left: 6%;
+        width: 45%;
+        height: 49%;
+        clip-path: polygon(0 40%, 70% 0%, 100% 50%, 25% 100%);
+        &:hover {
+          > img {
+            top: 40%;
+          }
+        }
+      }
+
+      > img {
+        width: 100%;
+        display: none;
+      }
+    }
+  }
+}
+.hengbirdview{
+    .modelcon {
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    > img {
+      width: 100%;
+    }
+   .tag {
+      position: absolute;
+      cursor: pointer;
+      display: inline-block;
+      text-align: center;
+      top: 50%;
+      left: 50%;
+      // background: rgba(0, 0, 0, 0.5);
+      // width: 10%;
+      height: 15%;
+      &:hover {
+        > img {
+          display: inline-block;
+          width: 15vw;
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          top: 10%;
+        }
+      }
+
+      &:first-of-type {
+        top: 17%;
+        left: 6%;
+        width: 45%;
+        height: 49%;
+        clip-path: polygon(0 40%, 70% 0%, 100% 50%, 25% 100%);
+        &:hover {
+          > img {
+            top: 40%;
+          }
+        }
+      }
+
+      > img {
+        width: 100%;
+        display: none;
+      }
+    }
+  }
+}
+</style>

src/pages/mobilescene/birdview/index.vue

@@ -1,18 +1,13 @@
 <template>
-  <div class="birdview" :class="{hengbirdview:g_isLandscape}">
+  <div class="birdview" @click="goldlog" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/${g_isLandscape?'bg_hp_birdview':'birdviewbg'}.jpg`)})` }" :class="{hengbirdview:g_isLandscape}">
     <ViewOperation>
-      <div class="birdview" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/${g_isLandscape?'bg_hp_birdview':'birdviewbg'}.jpg`)})` }">
-        <!-- <img v-if="!hideClose" class="close" @click="close" :src="require('@/assets/images/proj2022/pc/cancel.png')" alt="" /> -->
-
         <div class="modelcon">
           <img :src="require(`@/assets/images/proj2022/model.png`)" alt="" />
           <div class="tag" v-for="(item, i) in tags" :key="i" :style="{ top: item.top, left: item.left, width: item.width, height: item.height }">
             <img @click="onClick(item)" :src="require(`@/assets/images/proj2022/bird_view/${item.eng}${currentId == item.id ? '_acitve' : ''}.svg`)" alt="" />
           </div>
         </div>
-      </div>
     </ViewOperation>
-    <!-- <img v-if="!hideClose" class="close" @click="close" :src="require('@/assets/images/proj2022/pc/cancel.png')" alt="" /> -->
   </div>
 </template>
 
@@ -39,19 +34,22 @@ export default {
     ViewOperation,
   },
   methods: {
+    goldlog(){
+      window.goldlog.record("/spec.1.1", "", "snsScene=m_page2&product=mobh5&pagename=中国网络文明建设成果展云展示", "");
+    },
     onClick(data) {
       this.currentId = data.id;
       let player = window.player;
       if (!player) {
         this.$bus.$emit("resetCurrentTheme");
-
+        
+        this.$showLoading()
         this.$bus.$emit("ifrMessage", {
           events: "flyToPano",
           data: data,
         });
-        setTimeout(() => {
-          this.$emit("close");
-        }, 400);
+
+
         return;
       }
 
@@ -75,7 +73,9 @@ export default {
       }, 300);
     },
   },
-  mounted() {},
+  mounted() {
+    this.goldlog() 
+  },
 };
 </script>
 
@@ -109,7 +109,7 @@ export default {
     > img {
       width: 100%;
     }
-    .tag {
+   .tag {
       position: absolute;
       cursor: pointer;
       display: inline-block;
@@ -123,7 +123,6 @@ export default {
         > img {
           display: inline-block;
           width: 36vw;
-          max-width: 50%;
           position: absolute;
           left: 50%;
           transform: translate(-50%, -50%);
@@ -151,7 +150,5 @@ export default {
     }
   }
 }
-.hengbirdview{
-  
-}
+
 </style>

src/pages/mobilescene/index.vue

@@ -43,12 +43,13 @@
       </template>
     </div>
 
-    <birdview @close="showBirdview = false" v-if="showBirdview" />
+    <birdview :key="rnd" @close="showBirdview = false" v-if="showBirdview && !g_isLandscape" />
+    <hbirdview :key="rnd" @close="showBirdview = false" v-if="showBirdview && g_isLandscape" />
 
     <template v-if="!g_isLandscape">
       <vpopup v-if="showpopup && cp" v-clickoutside="handleoutside">
         <div slot="vcon" class="popcon">
-          <component :is="cp" :currentPano="currentPano"  :currentZhanqu="currentZhanqu" :currentItem="currentItem"> </component>
+          <component :is="cp" :currentPano="currentPano" :currentZhanqu="currentZhanqu" :currentItem="currentItem"> </component>
           <img @click="(showpopup = false), (cp = '')" class="close" :src="require('@/assets/images/project/icon/close.png')" alt="" />
         </div>
       </vpopup>
@@ -60,6 +61,7 @@
 
 <script>
 import birdview from "./birdview/index.vue";
+import hbirdview from "./birdview/hengping.vue";
 
 import vsearch from "./search";
 
@@ -79,10 +81,9 @@ Booth.forEach((item) => {
   all_booth = all_booth.concat(item.company);
 });
 
-let gdBgm = new Audio()
-gdBgm.src = require('@/assets/audio/bgm.mp3')
-gdBgm.loop = true
-
+let gdBgm = new Audio();
+gdBgm.src = require("@/assets/audio/bgm.mp3");
+gdBgm.loop = true;
 
 export default {
   components: {
@@ -94,6 +95,7 @@ export default {
     vpopup: popup,
     vcontent: content,
     roundMenu,
+    hbirdview,
   },
   computed: {
     currentItem() {
@@ -127,17 +129,20 @@ export default {
       flying: false,
       mode: "floorplan",
       isClear: false,
+      firstin: true,
+      rnd: "",
     };
   },
 
   watch: {
-    currentZhanqu(newVal){
+    currentZhanqu(newVal) {
       if (newVal) {
-        if (newVal.id =='2_15') {
-          gdBgm.play()
-        }
-        else{
-          gdBgm.pause()
+        window.goldlog.record("/spec.1.1", "", `snsScene=m_area${this.currentZhanqu.id}&product=mobh5&pagename=中国网络文明建设成果展云展示`, "");
+
+        if (newVal.id == "2_15") {
+          gdBgm.play();
+        } else {
+          gdBgm.pause();
         }
       }
     },
@@ -151,7 +156,15 @@ export default {
     g_isLandscape: {
       immediate: true,
       handler: function(newVal) {
+        this.rnd = Math.random();
         newVal ? this.$showOrientationtip({ isLandscape: false, isTip: true }) : this.$hideOrientationtip();
+
+        if (this.showBirdview) {
+          this.showBirdview = false;
+          setTimeout(() => {
+            this.showBirdview = true;
+          }, 0);
+        }
       },
     },
     currentTheme(newVal) {
@@ -181,6 +194,15 @@ export default {
       this.$bus.$on("resetCurrentTheme", () => {
         this.currentTheme = "";
       });
+      this.$bus.$on("toggleBGM", (data) => {
+        if (data) {
+          if (this.currentZhanqu.id == "2_15") {
+            gdBgm.play();
+          }
+        } else {
+          gdBgm.pause();
+        }
+      });
       $("#scenebody")
         .off("touchstart")
         .on("touchstart", () => {
@@ -271,7 +293,7 @@ export default {
             console.log("flying.ended");
             this.currentPanoid = data;
             this.currentTheme = region.find((item) => {
-              if (item.spread.indexOf(Number(this.currentPanoid)) > -1) {
+              if (item.spread.indexOf(this.currentPanoid) > -1) {
                 return item;
               }
             });
@@ -282,13 +304,15 @@ export default {
               }
             });
 
-            this.currentZhanqu &&
-              window.goldlog.record(
-                `/m_area${this.currentZhanqu.id}`,
-                "",
-                `snsScene=m_area${this.currentZhanqu.id}&product=mobh5&pagename=中国网络文明建设成果展云展示`,
-                ""
-              );
+        
+
+            if (this.firstin) {
+              this.firstin = false;
+              return;
+            }
+
+            this.showBirdview = false;
+            this.$hideLoading();
           }
 
           if (res.data.source === "openHotspot") {
@@ -322,7 +346,7 @@ export default {
     },
     handlecp(data) {
       this.cp = data;
-      console.log(data,'opencp')
+      console.log(data, "opencp");
       this.showpopup = true;
     },
     handleoutside() {

src/pages/scene/components/content.vue

@@ -92,7 +92,7 @@ export default {
         this.$showTips({ content: "请输入留言内容" });
       } else {
         postcontent({ message: this.msg}, () => {
-          this.$showTips({ content: '留言成功' });
+          this.$showTips({ content: '留言成功！' });
           this.msg = "";
           this.getcontentList();
         });

src/pages/scene/index.vue

@@ -79,9 +79,9 @@ let requestFullscreen = function(e) {
     : e.msRequestFullscreen && e.msRequestFullscreen();
 };
 
-let gdBgm = new Audio()
-gdBgm.src = require('@/assets/audio/bgm.mp3')
-gdBgm.loop = true
+let gdBgm = new Audio();
+gdBgm.src = require("@/assets/audio/bgm.mp3");
+gdBgm.loop = true;
 
 export default {
   components: {
@@ -113,7 +113,8 @@ export default {
       currentZhanqu: "",
       isShowZX: true,
       showViewMode: false,
-      gdBgm
+      gdBgm,
+      firstin: true,
     };
   },
   computed: {
@@ -129,13 +130,21 @@ export default {
   },
 
   watch: {
-    currentZhanqu(newVal){
+    currentZhanqu(newVal) {
       if (newVal) {
-        if (newVal.id =='2_15') {
-          gdBgm.play()
-        }
-        else{
-          gdBgm.pause()
+        window.goldlog.record("/spec.1.1", "", `snsScene=p_area${this.currentZhanqu.id}&product=pcweb&pagename=中国网络文明建设成果展云展示`, "");
+
+        // window.goldlog.record(
+        //   `/p_area${this.currentZhanqu.id}`,
+        //   "",
+        //   `snsScene=p_area${this.currentZhanqu.id}&product=pcweb&pagename=中国网络文明建设成果展云展示`,
+        //   ""
+        // );
+
+        if (newVal.id == "2_15") {
+          gdBgm.play();
+        } else {
+          gdBgm.pause();
         }
       }
     },
@@ -168,6 +177,16 @@ export default {
   mounted() {
     this.$showLoading();
     this.$nextTick(() => {
+      this.$bus.$on("toggleBGM", (data) => {
+        if (data) {
+          if (this.currentZhanqu.id == "2_15") {
+            gdBgm.play();
+          }
+        } else {
+          gdBgm.pause();
+        }
+      });
+
       $("#scenebody")
         .off("click")
         .on("click", () => {
@@ -178,7 +197,6 @@ export default {
         this.isClear = data;
       });
 
-      
       this.$bus.$on("resetCurrentTheme", () => {
         this.currentTheme = "";
       });
@@ -239,12 +257,12 @@ export default {
             console.log("flying.ended");
             this.currentPanoid = data;
             this.currentTheme = region.find((item) => {
-              if (item.spread.indexOf(Number(this.currentPanoid)) > -1) {
+              if (item.spread.indexOf(this.currentPanoid) > -1) {
                 return item;
               }
             });
 
-            console.log(this.currentPanoid,'currentPanoid');
+            console.log(this.currentPanoid, "currentPanoid");
             this.currentZhanqu = "";
             this.currentZhanqu = all_booth.find((item) => {
               if (item.containPanos.indexOf(String(this.currentPanoid)) > -1) {
@@ -252,15 +270,15 @@ export default {
               }
             });
 
-            console.log(this.currentZhanqu,'currentZhanqu');
+            console.log(this.currentZhanqu, "currentZhanqu");
+
+            if (this.firstin) {
+              this.firstin = false;
+              return;
+            }
 
-            this.currentZhanqu &&
-              window.goldlog.record(
-                `/p_area${this.currentZhanqu.id}`,
-                "",
-                `snsScene=p_area${this.currentZhanqu.id}&product=pcweb&pagename=中国网络文明建设成果展云展示`,
-                ""
-              );
+            this.$hideBirdView();
+            this.$hideLoading();
           }
 
           if (res.data.source === "openHotspot") {
@@ -431,5 +449,6 @@ export default {
   transition: ease all 0.5s;
   opacity: 0;
   pointer-events: none;
+  bottom: -50vh;
 }
 </style>

src/pages/scene/menu.vue

@@ -153,7 +153,7 @@ export default {
     onClick(item) {
       this.currentActive = item;
       item.maidiancode &&
-        window.goldlog.record(`/${item.maidiancode}`, "", `snsScene=${item.maidiancode}&product=pcweb&pagename=中国网络文明建设成果展云展示`, "");
+        window.goldlog.record(`/spec.1.1`, "", `snsScene=${item.maidiancode}&product=pcweb&pagename=中国网络文明建设成果展云展示`, "");
 
       setTimeout(() => {
         this.currentActive = {};

src/pages/scene/raside/rmenu.vue

@@ -86,6 +86,7 @@ export default {
     onClick(item) {
       if (item.id == "play") {
         this.$emit("play");
+        window.goldlog.record(`/spec.1.1`, "", `snsScene=p_func7&product=pcweb&pagename=中国网络文明建设成果展云展示`, "");
         return;
       }
 

src/pages/scene/raside/search.vue

@@ -18,6 +18,8 @@ export default {
     isShow(newVal) {
       this.$emit("isshowSearch", newVal);
       if (newVal) {
+        window.goldlog.record(`/spec.1.1`, "", `snsScene=m_func8&product=pcweb&pagename=中国网络文明建设成果展云展示`, "");
+
         this.$bus.$emit("toggleShowZX", false);
       }
     },

src/pages/scenePage/views/gui/guide.vue

@@ -100,6 +100,7 @@ export default {
               background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
             }
             &.active {
+              border: 2px solid rgb(36, 139, 235);
               .mask {
                 display: none;
               }

src/utils/wxshare.js

@@ -277,7 +277,7 @@ function setup({ title, link, imgUrl, desc }) {
 
 export default async args => {
 
-    if (typeof wx != 'undefined' && window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
+    if (typeof wx != 'undefined' && (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger")) {
         // if (typeof wx != 'undefined') {
         //需要引入 https://res.wx.qq.com/open/js/jweixin-1.2.0.js
         !args.donotconfig && await toConfigure()