up

pc/src/views/Bottom2.vue

@@ -37,7 +37,7 @@
         <div class="swiper-button-prev swiper-button-prev1"></div>
       </div>
     </div>
-    <div class="box2">
+    <div class="box2" v-if="box3Ac === 3 || box3Ac === 4">
       <div v-for="(item, index) in data" :key="item.id">
         <div @click="botChange(item)" :class="{ active: towAc === item.id }">
           {{ item.name }}
@@ -91,71 +91,71 @@ export default {
     // 点击底部的切换分区
     botChange(item) {
       this.towAc = "1";
-      this.swData = [];
-      this.Swiper = null;
       this.towAc = item.id;
       if (this.box3Ac === 3) this.data = [...exArr3];
       else this.data = [...exArr4];
       this.getSwFu(item.id + "", "1_1");
     },
     botChange2(item) {
+      this.$emit('zhanShowFu')
       if (this.box3Ac === item.id) return;
       this.towAc = "1";
-      this.swData = [];
-      this.Swiper = null;
       this.box3Ac = item.id;
       if (item.id === 1) this.data = [...exArr1];
       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");
+      this.getSwFu("1", "1_1",true);
 
       // 给父组件传递信息
-      this.$emit("zhanChange", this.box3Ac, item.code);
-
-
+      this.$emit("gaoduChange", this.box3Ac);
+      // this.$emit("zhanChange", this.box3Ac, item.code);
     },
     // 封装一个重新加载轮播图的方法
-    getSwFu(id1, id2) {
-      let obj = this.data.find((v) => v.id == id1);
-      this.towAc = obj.id;
-      let index = id2.indexOf("_");
-      let bs = id2.substr(index + 1, id2.length);
-      let num1 = Math.ceil(Number(bs) / 6);
-      num1 -= num1;
-      this.oneAc = id2;
-
-      // 获取分区里面数据的长度
-      let num = Math.ceil(obj.son.length / 6);
-      for (let i = 0; i < num; i++) {
-        this.swData.push({
-          son: obj.son.slice(i * 6, (i + 1) * 6),
-        });
-      }
+    getSwFu(id1, id2,flag) {
       this.$nextTick(() => {
-        this.Swiper = new Swiper(`.box1 .sww${this.towAc}`, {
-          navigation: {
-            nextEl: ".swiper-button-next1",
-            prevEl: ".swiper-button-prev1",
-          },
-          slidesPerView: 1,
-          initialSlide: num1,
-          spaceBetween: 0,
-        });
+        this.swData = [];
+        this.Swiper = null;
+
+        let obj = this.data.find((v) => v.id == id1);
+        this.towAc = obj.id;
+        let index = id2.indexOf("_");
+        let bs = id2.substr(index + 1, id2.length);
+        let num1 = Math.ceil(Number(bs) / 6);
+        num1 -= 1;
+        if(!flag) this.oneAc = id2;
+        // 获取分区里面数据的长度
+        let num = Math.ceil(obj.son.length / 6);
+        for (let i = 0; i < num; i++) {
+          this.swData.push({
+            son: obj.son.slice(i * 6, (i + 1) * 6),
+          });
+        }
+
+        setTimeout(() => {
+          this.Swiper = new Swiper(`.box1 .sww${this.towAc}`, {
+            navigation: {
+              nextEl: ".swiper-button-next1",
+              prevEl: ".swiper-button-prev1",
+            },
+            slidesPerView: 1,
+            initialSlide: num1,
+            spaceBetween: 0,
+          });
+        }, 100);
       });
     },
     // 切换VR
     cutVr(val) {
       if (this.oneAc === val.id) return;
-      console.log("切换vr");
       this.oneAc = val.id;
-      this.$emit("zhanChange", this.box3Ac, val.code);
+      this.$emit("zhanChange", val.code);
     },
 
     // 进来页面的方法
     baseList(bs) {
-      if (bs == 3) this.data = exArr3;
-      else if (bs == 4) this.data = exArr4;
+      if (bs == 3) this.data = [...exArr3];
+      else if (bs == 4) this.data = [...exArr4];
       else this.data = exArr1;
     },
   },
@@ -166,7 +166,7 @@ export default {
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.getSwFu("1", "1_1");
+    this.getSwFu("1", "1_1",true);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -267,10 +267,10 @@ export default {
       }
     }
     .swiper-button-next {
-      color: #C48871;
+      color: #c48871;
     }
     .swiper-button-prev {
-      color: #C48871;
+      color: #c48871;
     }
   }
   .box2 {
@@ -291,15 +291,15 @@ export default {
       }
       & > div {
         cursor: pointer;
-        font-size: 20px;
+        font-size: 16px;
         color: #fff;
         padding-bottom: 5px;
         opacity: 0.8;
         &:hover {
           opacity: 1;
           padding-top: 2px;
-          color: #C48871;
-          border-bottom: 2px solid #C48871;
+          color: #c48871;
+          border-bottom: 2px solid #c48871;
         }
       }
     }
@@ -307,15 +307,15 @@ export default {
       opacity: 1;
       padding-top: 2px;
       pointer-events: none;
-      color: #C48871;
-      border-bottom: 2px solid #C48871;
+      color: #c48871;
+      border-bottom: 2px solid #c48871;
     }
   }
   .box3 {
     margin-top: 5px;
     background-color: rgba(0, 0, 0, 0.8);
     width: 100%;
-    height: 40px;
+    height: 56px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -337,17 +337,17 @@ export default {
         &:hover {
           opacity: 1;
           padding-top: 2px;
-          color: #C48871;
-          border-bottom: 2px solid #C48871;
+          color: #c48871;
+          border-bottom: 2px solid #c48871;
         }
       }
     }
     .active {
       opacity: 1;
       padding-top: 2px;
-      pointer-events: none;
-      color: #C48871;
-      border-bottom: 2px solid #C48871;
+      // pointer-events: none;
+      color: #c48871;
+      border-bottom: 2px solid #c48871;
     }
   }
 }

pc/src/views/Home.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="Home" @click.once="topBox2Show = true">
+    <!-- 在第一展厅和第二展厅出来的背景模板 -->
+    <div class="tedingBac" v-show="oneSid > 2 && zhanShow"></div>
+
     <!-- 音乐 -->
     <audio id="myAduio" loop src="../assets/bg.mp3"></audio>
     <!-- 右上角logo -->
@@ -8,7 +11,7 @@
     </div>
     <!-- 左上角 -->
     <div class="topLeft">
-      <div class="back el-icon-back" @click="backSta"></div>
+      <div class="back el-icon-s-home" @click="backSta"></div>
       <div class="topTit">
         <img
           title="简介"
@@ -61,20 +64,30 @@
       <div class="btnn" @click="copyPcTxt"><div>一键复制</div></div>
     </div>
     <!-- 底部组件 -->
-    <div class="bttomBox" :class="{ down: !bttomIsShow }">
+    <div
+      class="bttomBox"
+      :style="`height:${oneSid > 2 ? '256' : '213'}px;bottom:${
+        bttomIsShow ? '0' : oneSid > 2 ? '-256' : '-213'
+      }px`"
+    >
       <div
         class="bttomIsShow"
         @click="bttomIsShow = !bttomIsShow"
         :class="bttomIsShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
       ></div>
-      <Bottom2 @zhanChange="zhanChange" />
+      <Bottom2
+        @zhanShowFu="zhanShowFu"
+        @zhanChange="zhanChange"
+        @gaoduChange="gaoduChange"
+        ref="Bottom2"
+      />
       <div class="shadow"></div>
       <div class="shadow right"></div>
     </div>
 
     <!-- 点击展厅出来的组件 -->
-    <Onezhan @toZhan="toZhan" v-if="oneSid === 3" />
-    <Towzhan @toZhan="toZhan" v-else-if="oneSid === 4" />
+    <Onezhan @toZhan="toZhan" v-if="oneSid === 3" v-show="zhanShow" />
+    <Towzhan @toZhan="toZhan" v-else-if="oneSid === 4" v-show="zhanShow" />
   </div>
 </template>
 
@@ -90,6 +103,7 @@ export default {
     return {
       // 选择了航拍还是展厅
       oneSid: 1,
+      zhanShow: true,
 
       bttomIsShow: true,
 
@@ -100,19 +114,35 @@ export default {
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    // bttomIsShow() {
+    //   this.zhanShow = true;
+    // },
+  },
   methods: {
     // 点击左上角的返回
     backSta() {
       //回到博博会之前的开发页面
       window.location.href = "https://zzbbh.4dage.com/web/index.html";
     },
-    toZhan(bs, id1, id2) {
-      console.log("-----", bs, id1, id2);
+    zhanShowFu() {
+      this.zhanShow = true;
     },
-    zhanChange(oneSid, val) {
+    toZhan(bs, id1, id2, code) {
+      this.$refs.Bottom2.baseList(bs);
+      this.$refs.Bottom2.getSwFu(id1, id2);
+      if (bs > 2) {
+        this.zhanShow = false;
+      }
+      this.zhanChange(code);
+    },
+    gaoduChange(oneSid) {
+      if (oneSid > 2) this.zhanShow = true;
       this.oneSid = oneSid;
-      console.log("VR改变了", val);
+    },
+    zhanChange(code) {
+      // this.bttomIsShow = false;
+      console.log("VR改变了", code);
     },
     //点击复制链接
     copyPcTxt() {
@@ -162,13 +192,22 @@ export default {
   position: relative;
   background-image: url("../assets/img/homeBg.jpg");
   background-size: 100% 100%;
+  .tedingBac {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    backdrop-filter: blur(10px);
+  }
   .rightLogo {
     width: 572px;
     height: 46px;
     position: absolute;
     z-index: 10;
-    top: 43px;
-    right: 64px;
+    top: 20px;
+    right: 40px;
     & > img {
       width: 100%;
       height: 100%;
@@ -198,29 +237,29 @@ export default {
 
     .back {
       cursor: pointer;
-      width: 25px;
-      height: 25px;
+      width: 36px;
+      height: 36px;
       background-image: url("../assets/img/back.png");
       background-size: 100% 100%;
-      font-size: 12px;
+      font-size: 18px;
       color: #fff;
       text-align: center;
-      line-height: 25px;
+      line-height: 36px;
       margin-right: 17px;
     }
     .topTit {
-      height: 25px;
+      height: 36px;
       display: flex;
       align-items: center;
-      border-radius: 13px;
+      border-radius: 18px;
       background-color: rgba(0, 0, 0, 0.6);
-      padding: 0 5px;
+      padding: 0 8px;
       & > img {
         display: block;
         margin: 0 5px;
         cursor: pointer;
-        width: 21px;
-        height: 21px;
+        width: 28px;
+        height: 28px;
       }
     }
   }
@@ -305,13 +344,14 @@ export default {
     pointer-events: auto;
   }
   .bttomBox {
+    z-index: 10;
     transition: bottom 0.5s;
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%);
     width: 1339px;
-    height: 240px;
+    height: 256px;
     .bttomIsShow {
       cursor: pointer;
       text-align: center;
@@ -352,8 +392,5 @@ export default {
       );
     }
   }
-  .down {
-    bottom: -240px;
-  }
 }
 </style>

pc/src/views/Onezhan.vue

@@ -37,7 +37,7 @@
               <!-- <div class="searTit">{{ item.name }}</div> -->
               <div
                 class="searRow"
-                @click="$emit('toZhan', 3, item.id, val.id)"
+                @click="$emit('toZhan', 3, item.id, val.id, val.code)"
                 v-for="val in item.son"
                 :key="val.id"
                 v-html="val.name"
@@ -54,6 +54,7 @@
               Number(oneShow) - 1 != item.id &&
               Number(oneShow) + 1 != item.id &&
               oneShow,
+            base: !oneShow,
           }"
           v-for="item in rightData"
           :key="item.id"
@@ -70,7 +71,7 @@
           </div>
           <div class="contRowSon" v-if="item.id == oneShow">
             <div
-              @click="$emit('toZhan', 3, item.id, val.id)"
+              @click="$emit('toZhan', 3, item.id, val.id, val.code)"
               v-for="val in item.son"
               :key="val.id"
             >
@@ -164,7 +165,7 @@ export default {
   position: absolute;
   width: 1303px;
   height: 560px;
-  top: 100px;
+  top: 80px;
   left: 50%;
   transform: translateX(-50%);
   background-image: url("../assets/img/zhanBac.png");
@@ -189,7 +190,7 @@ export default {
       color: rgba(255, 255, 255, 0.7);
       transition: all 0.3s;
       &:hover {
-        background-color: #d07428;
+        background-color: #c48871;
         color: #fff;
       }
       &:nth-of-type(1) {
@@ -262,7 +263,7 @@ export default {
       }
     }
     .active {
-      background-color: #d07428;
+      background-color: #c48871;
     }
     .box6.active {
       background-image: url("../assets/img/zhan/1_6Ac.png");
@@ -430,7 +431,7 @@ export default {
         }
         .contRowSon {
           width: 96%;
-          max-height: 260px;
+          max-height: 305px;
           overflow-y: auto;
           padding: 10px 20px 4px 50px;
           & > div {
@@ -438,21 +439,27 @@ export default {
             padding: 8px 0;
             border-bottom: 1px solid #b7aeae;
             &:hover {
-              color: #d16216;
+              color: #c48871;
             }
           }
         }
       }
       .shouqi {
+        margin: 0;
         .inco {
           opacity: 0;
           pointer-events: none;
         }
         .contRowTop {
-          height: 5px;
+          height: 0px;
           overflow: hidden;
         }
       }
+      .base {
+        .contRowTop {
+          background-image: url("../assets/img/zhanRBac1.png");
+        }
+      }
     }
   }
 }

pc/src/views/Towzhan.vue

@@ -43,7 +43,7 @@
               <!-- <div class="searTit">{{ item.name }}</div> -->
               <div
                 class="searRow"
-                @click="$emit('toZhan', 4, item.id, val.id)"
+                @click="$emit('toZhan', 4, item.id, val.id, val.code)"
                 v-for="val in item.son"
                 :key="val.id"
                 v-html="val.name"
@@ -60,6 +60,7 @@
               Number(oneShow) - 1 != item.id &&
               Number(oneShow) + 1 != item.id &&
               oneShow,
+            base: !oneShow,
           }"
           v-for="item in rightData"
           :key="item.id"
@@ -74,7 +75,7 @@
           <div class="contRowTop">{{ item.name }}</div>
           <div class="contRowSon" v-if="item.id == oneShow">
             <div
-              @click="$emit('toZhan', 4, item.id, val.id)"
+              @click="$emit('toZhan', 4, item.id, val.id, val.code)"
               v-for="val in item.son"
               :key="val.id"
             >
@@ -170,7 +171,7 @@ export default {
   position: absolute;
   width: 1303px;
   height: 560px;
-  top: 100px;
+  top: 80px;
   left: 50%;
   transform: translateX(-50%);
   background-image: url("../assets/img/zhanBac.png");
@@ -195,7 +196,7 @@ export default {
       color: rgba(255, 255, 255, 0.7);
       transition: all 0.3s;
       &:hover {
-        background-color: #d07428;
+        background-color: #c48871;
         color: #fff;
       }
       &:nth-of-type(1) {
@@ -281,7 +282,7 @@ export default {
       }
     }
     .active {
-      background-color: #d07428;
+      background-color: #c48871;
     }
     .box4.active {
       background-image: url("../assets/img/zhan/2_4Ac.png");
@@ -449,7 +450,7 @@ export default {
         }
         .contRowSon {
           width: 96%;
-          max-height: 273px;
+          max-height: 327px;
           overflow-y: auto;
           padding: 10px 20px 4px 50px;
           & > div {
@@ -457,21 +458,27 @@ export default {
             padding: 8px 0;
             border-bottom: 1px solid #b7aeae;
             &:hover {
-              color: #d16216;
+              color: #c48871;
             }
           }
         }
       }
       .shouqi {
+        margin: 0;
         .inco {
           opacity: 0;
           pointer-events: none;
         }
         .contRowTop {
-          height: 5px;
+          height: 0px;
           overflow: hidden;
         }
       }
+      .base {
+        .contRowTop {
+          background-image: url("../assets/img/zhanRBac1.png");
+        }
+      }
     }
   }
 }