展位信息更新

mo/public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>永不落幕的博博会</title>
   </head>

mo/public/swkk.html

@@ -124,7 +124,7 @@
     .mapShow {
       transition: right .5s;
       position: absolute;
-      top: 80px;
+      top: 77px;
       right: 150px;
       background-color: rgba(0, 0, 0, .3);
       width: 20px;
@@ -205,9 +205,30 @@
       url: 'img/diBiao.png'
     })
   })
-  let mapJT =document.querySelector('.mapShow')
+
+
+
+  let mapJT = document.querySelector('.mapShow')
 
   let doms = document.querySelectorAll('.inco div')
+
+  kankan.Camera.on('mode.afterChange', ({
+    fromMode,
+    toMode,
+    floorIndex
+  }) => {
+    if (toMode == 'panorama') {
+      doms[0].classList.add('active')
+      doms[1].classList.remove('active')
+      doms[2].classList.remove('active')
+      doms[0].style.backgroundImage = "url(./img/inco1Ac.png)"
+      doms[1].style.backgroundImage = "url(./img/inco2.png)"
+      doms[2].style.backgroundImage = "url(./img/inco3.png)"
+      mapJT.style.display = 'flex'
+
+    }
+  })
+
   doms.forEach((v, i) => {
     v.onclick = function () {
       let className = v.getAttribute('class')
@@ -219,7 +240,7 @@
         doms[0].style.backgroundImage = "url(./img/inco1Ac.png)"
         doms[1].style.backgroundImage = "url(./img/inco2.png)"
         doms[2].style.backgroundImage = "url(./img/inco3.png)"
-        mapJT.style.display='flex'
+        mapJT.style.display = 'flex'
         kankan.Camera.panorama()
       } else if (i == 1) {
         doms[0].classList.remove('active')
@@ -228,7 +249,7 @@
         doms[0].style.backgroundImage = "url(./img/inco1.png)"
         doms[1].style.backgroundImage = "url(./img/inco2Ac.png)"
         doms[2].style.backgroundImage = "url(./img/inco3.png)"
-        mapJT.style.display='none'
+        mapJT.style.display = 'none'
         kankan.Camera.floorplan()
       } else {
         doms[0].classList.remove('active')
@@ -237,7 +258,7 @@
         doms[0].style.backgroundImage = "url(./img/inco1.png)"
         doms[1].style.backgroundImage = "url(./img/inco2.png)"
         doms[2].style.backgroundImage = "url(./img/inco3Ac.png)"
-        mapJT.style.display='none'
+        mapJT.style.display = 'none'
         kankan.Camera.dollhouse()
       }
     }
@@ -249,14 +270,14 @@
     up.style.display = 'block'
     let mapDom = document.querySelector('.show')
     mapDom.style.right = '-150px'
-    mapJT.style.right=0
+    mapJT.style.right = 0
   }
   up.onclick = () => {
     down.style.display = 'block'
     up.style.display = 'none'
     let mapDom = document.querySelector('.show')
     mapDom.style.right = '0px'
-    mapJT.style.right='150px'
+    mapJT.style.right = '150px'
   }
 </script>
 

mo/src/App.vue

@@ -1,13 +1,18 @@
 <template>
   <div id="app">
-    <Router-view/>
+    <Router-view />
   </div>
 </template>
-
+<script>
+export default {
+  mounted() {
+    document.querySelector("#app").style.height = window.innerHeight + "px";
+  },
+};
+</script>
 <style lang="less">
 #app {
   width: 100vw;
-  height: 100vh;
   max-width: 500px;
   margin: 0 auto;
   overflow: hidden;

mo/src/main.js

@@ -8,9 +8,11 @@ Vue.use(Icon);
 Vue.use(NoticeBar);
 import './assets/base.css'
 Vue.config.productionTip = false
+
 // 图片懒加载
 import VueLazyLoad from 'vue-lazyload'
 Vue.use(VueLazyLoad, {
+  error: require('./assets/img/IMGerror.png'),
   loading: require('@/assets/img/loading.gif')
 })
 new Vue({

mo/src/views/Home.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="Home" @click.once="oneMusicPlay" :class="{ noneBac: iframeSrc }">
+    <div class="hengPing" :class="{ hengPingAc: hengPing }">
+      <img src="../assets/img/landtip.png" alt="" />
+      <p>请竖屏浏览</p>
+    </div>
     <!-- 全景页面 -->
     <div class="iframeBox" v-if="iframeSrc" :key="iframeSrc">
       <iframe :src="iframeSrc" frameborder="0" v-if="box3Ac < 3"></iframe>
@@ -40,8 +44,12 @@
     <!-- 背景模糊 -->
     <div
       class="bacMoHu"
-      v-show="toMeanShow || box3Ac == 3 || box3Ac == 4"
-      v-if="listCut || toMeanShow"
+      v-show="box3Ac == 3 || box3Ac == 4"
+      v-if="listCut"
+    ></div>
+    <div
+      class="bacMoHu bacMoHu2"
+      v-show="menaData[0].done || menaData[2].done"
     ></div>
     <!-- 简介 音乐 分享 -->
     <div class="meanBox1" :class="{ meanBox1Show: menaData[0].done }">
@@ -127,6 +135,8 @@ export default {
       ],
       box3Ac: null,
       listCut: true,
+      // 横屏
+      hengPing: false,
     };
   },
   //监听属性 类似于data概念
@@ -145,18 +155,18 @@ export default {
   methods: {
     // 控制室内场景的inco位移incoMove
     incoMove(val) {
-      let dom = document.querySelector(".iframeBox iframe")
-      if (dom&&this.box3Ac>2) {
+      let dom = document.querySelector(".iframeBox iframe");
+      if (dom && this.box3Ac > 2) {
         dom.contentWindow.incoMove(val);
         // let domSon =dom.contentWindow.document.querySelector('.inco');
         // console.log(dom.contentWindow);
         // console.log(dom.contentWindow.incoMove);
         // console.log('------',domSon);
-        
-          // setTimeout(() => {
-          //   console.log('------',dom.contentWindow);
-          //   dom.contentWindow.incoMove(val);
-          // }, 200);
+
+        // setTimeout(() => {
+        //   console.log('------',dom.contentWindow);
+        //   dom.contentWindow.incoMove(val);
+        // }, 200);
       }
     },
     // 点击左上角的返回
@@ -214,26 +224,43 @@ export default {
     },
     // 只触发一次的音乐播放事件
     oneMusicPlay() {
-      this.toMeanShow = true;
+      // this.toMeanShow = true;
       this.cutLeft(this.menaData[1]);
     },
     // 左上角的切换
     cutLeft(item) {
       item.done = !item.done;
-      if (item.id == 1) this.menaData[2].done = false;
-      else if (item.id == 3) this.menaData[0].done = false;
+      if (item.id == 1) {
+        this.menaData[2].done = false;
+        // this.$refs.Bottom.openBotton(true);
+      } else if (item.id == 3) this.menaData[0].done = false;
       else {
         if (item.done) document.querySelector("#myAduio").play();
         else document.querySelector("#myAduio").pause();
       }
     },
+    // 判断是否是横批方法
+    renderResize() {
+      // 判断横竖屏
+      let width = document.documentElement.clientWidth;
+      let height = document.documentElement.clientHeight;
+      if (width > height) this.hengPing = true;
+      else this.hengPing = false;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.myUrl = window.location.href;
+    this.renderResize();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    // 监听 resize 方法
+    window.addEventListener("resize", this.renderResize, false);
+    // 控制背景音乐大小
+    let audioYL = document.querySelector("#myAduio");
+    audioYL.volume = 0.5;
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -250,9 +277,41 @@ export default {
 .Home {
   width: 100%;
   height: 100%;
-  background-image: url("../assets/img/homeBac.png");
+  background-image: url("../assets/img/homeBac.jpg");
   background-size: 100% 100%;
   position: relative;
+  .hengPing {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+    background-color: rgba(0, 0, 0, 0.8);
+    & > img {
+      max-width: 80%;
+      max-height: 80%;
+    }
+    & > p {
+      color: #fff;
+      height: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 20px;
+    }
+  }
+  .hengPingAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
   .iframeBox {
     position: absolute;
     top: 0;
@@ -297,6 +356,9 @@ export default {
     z-index: 2;
     backdrop-filter: blur(10px);
   }
+  .bacMoHu2 {
+    z-index: 9;
+  }
   .meanBox1 {
     opacity: 0;
     pointer-events: none;

mo/src/views/List.vue

@@ -125,6 +125,10 @@ export default {
     },
     toZhan(id1, id2, code, flag) {
       if (this.rowAc === id2) return;
+
+      // code为空的不跳
+      if(code==='') return Notify({ type: "warning", message: "数据计算中，敬请期待" });
+
       if (flag) {
         this.data[Number(id1) - 1].son.forEach((v, i) => {
           if (v.id === id2) {
@@ -199,7 +203,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .List {
-  z-index: 11;
+  z-index: 8;
   position: absolute;
   top: 60px;
   left: 70px;

mo/src/views/bottom.vue

@@ -27,8 +27,20 @@
                     active: box1Ac === val.id,
                   }"
                 >
-                    <img v-lazy="`https://4dkk.4dage.com/720yun_fd_manage/${val.code}/preview.jpg`" alt="" v-if="box3Ac<3"/>
-                    <img v-lazy="`https://4dkk.4dage.com/scene_view_data/${val.code}/user/thumb-2k.jpg`" alt="" v-else/>
+                  <img
+                    v-lazy="
+                      `https://4dkk.4dage.com/720yun_fd_manage/${val.code}/preview.jpg`
+                    "
+                    alt=""
+                    v-if="box3Ac < 3"
+                  />
+                  <img
+                    v-lazy="
+                      `https://4dkk.4dage.com/scene_view_data/${val.code}/user/thumb-2k.jpg`
+                    "
+                    alt=""
+                    v-else
+                  />
                   <van-notice-bar
                     speed="30"
                     v-if="box1Ac === val.id"
@@ -71,6 +83,7 @@
 </template>
 
 <script>
+import { Notify } from "vant";
 import { exArr1, exArr2, exArr3, exArr4 } from "./zhan.js";
 import Swiper from "@/assets/swiper/swiper.js";
 export default {
@@ -99,18 +112,17 @@ export default {
   computed: {},
   //监控data中的数据变化
   watch: {
-    swiShow(val){
-      this.$emit('incoMove',val)
-    }
+    swiShow(val) {
+      this.$emit("incoMove", val);
+    },
   },
   //方法集合
   methods: {
     // 给父组件调用的收起底部的方法
-    openBotton(val){
-      this.swiShow=val
+    openBotton(val) {
+      this.swiShow = val;
     },
 
-
     // 封装一个切换最底部的方法
     getBox3Fu(id) {
       if (id === 1) this.box2Data = [...exArr1];
@@ -126,23 +138,31 @@ export default {
     },
     box1Cut(val) {
       if (this.box1Ac === val.id) return;
+      // code为空的不跳
+      if (val.code === "")
+        return Notify({ type: "warning", message: "数据计算中，敬请期待" });
       this.box1Ac = val.id;
       this.$emit("changeVR", val.code);
       // 同步list组件的当前vr选中
-      this.$emit('VRActive',val.id)
+      this.$emit("VRActive", val.id);
     },
 
     box3Cut(item) {
-      this.$emit('lishShow')
+      this.$emit("lishShow");
       if (this.box3Ac === item.id) return;
       this.box3Ac = item.id;
 
       this.$emit("mengBan", this.box3Ac);
 
       this.getBox3Fu(item.id);
-      this.getSwFu("1", "1_1", true);
+
+      if (item.id == 3) {
+        this.box2Ac = "2";
+        this.getSwFu("2", "1_1", true);
+      } else this.getSwFu("1", "1_1", true);
+      // this.getSwFu("1", "1_1", true);
     },
-    box2Cut(item, index,flag) {
+    box2Cut(item, index, flag) {
       if (this.box2Ac === item.id) return;
       this.box2Ac = item.id;
       // 设置被选中的元素居中显示
@@ -150,9 +170,9 @@ export default {
         let scrolDom = document.querySelector(".box2");
         scrolDom.scrollLeft = (index - 1) * 80;
       });
-      if(flag) return
+      if (flag) return;
       this.getSwFu(item.id + "", "1_1", true);
-      this.$emit('fenQuB_L',item.id)
+      this.$emit("fenQuB_L", item.id);
     },
     // 封装一个重新加载轮播图的方法
     getSwFu(id1, id2, flag) {
@@ -212,7 +232,7 @@ export default {
   position: absolute;
   bottom: 0px;
   left: 0;
-  z-index: 10;
+  z-index: 8;
   width: 100%;
   padding: 0 8px 5px 8px;
   transition: bottom 0.5s;

pc/public/swkk.html

@@ -164,6 +164,20 @@
   })
 
   let doms = document.querySelectorAll('.inco div')
+  kankan.Camera.on('mode.afterChange', ({
+    fromMode,
+    toMode,
+    floorIndex
+  }) => {
+    if (toMode == 'panorama') {
+      doms[0].classList.add('active')
+      doms[1].classList.remove('active')
+      doms[2].classList.remove('active')
+      doms[0].style.backgroundImage = "url(./img/inco1Ac.png)"
+      doms[1].style.backgroundImage = "url(./img/inco2.png)"
+      doms[2].style.backgroundImage = "url(./img/inco3.png)"
+    }
+  })
   doms.forEach((v, i) => {
     v.onclick = function () {
       let className = v.getAttribute('class')

pc/src/main.js

@@ -9,6 +9,7 @@ Vue.config.productionTip = false
 // 图片懒加载
 import VueLazyLoad from 'vue-lazyload'
 Vue.use(VueLazyLoad, {
+  error: require('./assets/img/IMGerror.png'),
   loading: require('@/assets/img/loading.gif')
 })
 new Vue({

pc/src/views/Bottom2.vue

@@ -109,7 +109,9 @@ export default {
       else if (item.id === 2) this.data = [...exArr2];
       else if (item.id === 3) this.data = [...exArr3];
       else this.data = [...exArr4];
-      this.getSwFu("1", "1_1", true);
+      if(item.id==3) this.getSwFu("2", "1_1", true);
+      else this.getSwFu("1", "1_1", true);
+      
 
       // 给父组件传递信息
       this.$emit("gaoduChange", this.box3Ac);
@@ -154,6 +156,7 @@ export default {
     // 切换VR
     cutVr(val) {
       if (this.oneAc === val.id) return;
+      if (val.code === "") return this.$message.warning("数据计算中，敬请期待");
       this.oneAc = val.id;
       this.$emit("zhanChange", val.code);
     },
@@ -245,6 +248,7 @@ export default {
             text-overflow: ellipsis;
             white-space: nowrap;
             padding: 0 6px;
+            border-radius: 0 0 20px 20px;
           }
           img {
             width: 100%;

pc/src/views/Home.vue

@@ -102,13 +102,12 @@
 </template>
 
 <script>
-import Bottom from "./Bottom.vue";
 import Bottom2 from "./Bottom2.vue";
 import Onezhan from "./Onezhan.vue";
 import Towzhan from "./Towzhan.vue";
 export default {
   name: "Home",
-  components: { Bottom, Bottom2, Onezhan, Towzhan },
+  components: {Bottom2, Onezhan, Towzhan },
   data() {
     return {
       iframeSrc: "",
@@ -164,7 +163,6 @@ export default {
         this.iframeSrc = `https://zzbbh.4dage.com/SWKK/show.html?id=WK1564638850838523904&vr=${code}`;
       } else this.iframeSrc = `swkk.html?m=${code}`;
 
-
       console.log("VR改变了", code);
     },
     //点击复制链接
@@ -198,7 +196,12 @@ export default {
     this.myUrl = window.location.href;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+        // 控制背景音乐大小
+    let audioYL =document.querySelector('#myAduio')
+    audioYL.volume=0.5
+
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -372,12 +375,38 @@ export default {
       justify-content: center;
       align-items: center;
       & > div {
+        padding: 0 24px;
         cursor: pointer;
-        width: 110px;
         height: 30px;
         text-align: center;
         line-height: 28px;
-        border: 1px solid #fff;
+        position: relative;
+        &::after {
+          content: "";
+          position: absolute;
+          top: 3px;
+          right: 0;
+          width: 2px;
+          height: 24px;
+          background-image: linear-gradient(
+            rgba(255, 255, 255, 0.1),
+            rgba(255, 255, 255, 0.6),
+            rgba(255, 255, 255, 0.1)
+          );
+        }
+        &::before {
+          content: "";
+          position: absolute;
+          top: 3px;
+          left: 0;
+          width: 2px;
+          height: 24px;
+          background-image: linear-gradient(
+            rgba(255, 255, 255, 0.1),
+            rgba(255, 255, 255, 0.6),
+            rgba(255, 255, 255, 0.1)
+          );
+        }
       }
     }
   }

pc/src/views/Onezhan.vue

@@ -3,7 +3,7 @@
     <!-- 左边的框 -->
     <div class="leftList" v-if="oneShow">
       <div class="leftCon">
-        <div class="row" v-for="val in leftData.son" :key="val.id" @click="$emit('toZhan', 3, leftData.id, val.id, val.code)">
+        <div class="row" v-for="val in leftData.son" :key="val.id" @click="toZhan(3,leftData.id,val.id,val.code)">
           {{ val.name }}
         </div>
       </div>
@@ -46,7 +46,7 @@
               <!-- <div class="searTit">{{ item.name }}</div> -->
               <div
                 class="searRow"
-                @click="$emit('toZhan', 3, item.id, val.id, val.code)"
+                @click="toZhan(3,item.id,val.id,val.code)"
                 v-for="val in item.son"
                 :key="val.id"
                 v-html="val.name"
@@ -80,7 +80,7 @@
           </div>
           <div class="contRowSon" v-if="item.id == oneShow">
             <div
-              @click="$emit('toZhan', 3, item.id, val.id, val.code)"
+            @click="toZhan(3,item.id,val.id,val.code)"
               v-for="val in item.son"
               :key="val.id"
             >
@@ -128,6 +128,10 @@ export default {
   },
   computed: {},
   methods: {
+    toZhan(bs,id1,id2,code){
+      if(code==='') return this.$message.warning('数据计算中，敬请期待')
+      this.$emit('toZhan', bs,id1,id2,code)
+    },
     // 方块盒子点击
     boxClick(item) {
       if (this.oneShow === item.id) return (this.oneShow = null);

pc/src/views/Towzhan.vue

@@ -7,7 +7,7 @@
           class="row"
           v-for="val in leftData.son"
           :key="val.id"
-          @click="$emit('toZhan', 4, leftData.id, val.id, val.code)"
+          @click="toZhan(4, leftData.id, val.id, val.code)"
         >
           {{ val.name }}
         </div>
@@ -52,7 +52,7 @@
               <!-- <div class="searTit">{{ item.name }}</div> -->
               <div
                 class="searRow"
-                @click="$emit('toZhan', 4, item.id, val.id, val.code)"
+                @click="toZhan(4, item.id, val.id, val.code)"
                 v-for="val in item.son"
                 :key="val.id"
                 v-html="val.name"
@@ -84,7 +84,7 @@
           <div class="contRowTop">{{ item.name }}</div>
           <div class="contRowSon" v-if="item.id == oneShow">
             <div
-              @click="$emit('toZhan', 4, item.id, val.id, val.code)"
+              @click="toZhan(4, item.id, val.id, val.code)"
               v-for="val in item.son"
               :key="val.id"
             >
@@ -134,6 +134,9 @@ export default {
   },
   computed: {},
   methods: {
+    toZhan(bs, id1, id2, code) {
+      if (code === "") return this.$message.warning("数据计算中，敬请期待");
+    },
     // 方块盒子点击
     boxClick(item) {
       if (this.oneShow === item.id) return (this.oneShow = null);