up

pc/src/views/Bottom.vue

@@ -73,11 +73,11 @@
               <div
                 v-for="(item, index) in data3_1"
                 :key="index"
-                :class="{ active: oneAc === item.code, sm: item.sm }"
-                @click="cutVr(item)"
+                :class="{ active: oneAc2 === item.code, sm: item.sm }"
+                @click="cutVr2(item)"
               >
                 <img src="../assets/img/demo.png" alt="" />
-                <p>{{ item.name + index }}</p>
+                <p>{{ item.name }}</p>
               </div>
             </div>
           </div>
@@ -102,6 +102,7 @@ export default {
   data() {
     return {
       oneAc: "aa",
+      oneAc2: "",
       towAc: 1,
       data1_1: [
         { sm: true, name: "航拍全景1_", code: "aa", ind: 0 },
@@ -120,7 +121,7 @@ export default {
         { sm: true, name: "航拍全景2_", code: "", ind: 0 },
       ],
       data2_1: [
-        { sm: true, name: "地面全景1_", code: "aa", ind: 0 },
+        { sm: true, name: "地面全景1_", code: "aaa", ind: 0 },
         { name: "地面全景1_", code: "bb", ind: 0 },
         { name: "地面全景1_", code: "cc", ind: 0 },
         { name: "地面全景1_", code: "", ind: 0 },
@@ -128,7 +129,7 @@ export default {
         { sm: true, name: "地面全景1_", code: "", ind: 0 },
       ],
       data2_2: [
-        { sm: true, name: "地面全景2_", code: "aa", ind: 0 },
+        { sm: true, name: "地面全景2_", code: "aaaa", ind: 0 },
         { name: "地面全景2_", code: "bb", ind: 0 },
         { name: "地面全景2_", code: "cc", ind: 0 },
         { name: "地面全景2_", code: "", ind: 0 },
@@ -137,7 +138,7 @@ export default {
       ],
       data3_1: [
         { name: "第一展厅", code: "111", ind: 0 },
-        { name: "第一展厅", code: "222", ind: 0 },
+        { name: "第二展厅", code: "222", ind: 0 },
       ],
     };
   },
@@ -146,7 +147,12 @@ export default {
     // 切换VR
     cutVr(item) {
       this.oneAc = item.code;
-      this.$emit('zhanChange',item.code)
+      this.oneAc2 = null;
+      this.$emit("zhanChange", item.code);
+    },
+    cutVr2(item) {
+      this.oneAc2 = item.code;
+      this.$emit("zhanChange", item.code);
     },
   },
   watch: {

pc/src/views/Bottom2.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="Bottom2">
     <div class="box1">
-      <!-- 航拍 -->
       <div>
-        <div class="swiper-container" :class="`sww${towAc}`" :key="towAc">
+        <div
+          class="swiper-container"
+          :class="`sww${towAc}`"
+          :key="towAc + box3Ac"
+        >
           <div class="swiper-wrapper">
             <div
               class="swiper-slide"
@@ -13,15 +16,19 @@
               <div
                 v-for="(val, ind) in item.son"
                 :key="ind"
+                @click="cutVr(val)"
                 :class="{
                   active: oneAc === val.id,
                   sm: ind === 0 || ind == item.son.length - 1,
                   big: item.son.length < 6,
                 }"
-                @click="cutVr(val)"
               >
-                <img src="../assets/img/demo.png" alt="" />
-                <p>{{ val.name }}</p>
+                <el-tooltip :content="val.name" placement="top">
+                  <div>
+                    <img src="../assets/img/demo.png" alt="" />
+                    <p>{{ val.name }}</p>
+                  </div>
+                </el-tooltip>
               </div>
             </div>
           </div>
@@ -42,41 +49,82 @@
         />
       </div>
     </div>
+    <div class="box3">
+      <div v-for="(item, index) in box3Data" :key="item.id">
+        <div @click="botChange2(item)" :class="{ active: box3Ac === item.id }">
+          {{ item.name }}
+        </div>
+        <img
+          src="../assets/img/fenge.png"
+          alt=""
+          v-if="index < box3Data.length - 1"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { exArr1, exArr2 } from "./zhan";
+import { exArr1, exArr2, exArr3, exArr4 } from "./zhan";
 import Swiper from "@/assets/swiper/swiper.js";
 export default {
   name: "Bottom2",
   components: {},
-  props: {
-    list: {
-      type: Object,
-      default: () => {},
-    },
-  },
   data() {
     return {
       oneAc: "",
-      towAc: 1,
+      towAc: "1",
+      box3Ac: 1,
       data: [],
       swData: [],
       Swiper: null,
+      box3Data: [
+        { id: 1, name: "航拍", code: "" },
+        { id: 2, name: "地面全景", code: "" },
+        { id: 3, name: "第一展厅", code: "" },
+        { id: 4, name: "第二展厅", code: "" },
+      ],
     };
   },
   computed: {},
   methods: {
     // 点击底部的切换分区
     botChange(item) {
-      this.swData=[]
-      this.Swiper=null
+      this.towAc = "1";
+      this.swData = [];
+      this.Swiper = null;
       this.towAc = item.id;
-      this.getSwFu(0, item);
+      if (this.box3Ac === 3) this.data = [...exArr3];
+      else this.data = [...exArr4];
+      this.getSwFu(item.id + "", "1_1");
+    },
+    botChange2(item) {
+      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.$emit("zhanChange", this.box3Ac, item.code);
+
+
     },
     // 封装一个重新加载轮播图的方法
-    getSwFu(bs, obj) {
+    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++) {
@@ -91,33 +139,34 @@ export default {
             prevEl: ".swiper-button-prev1",
           },
           slidesPerView: 1,
-          initialSlide: bs,
+          initialSlide: num1,
           spaceBetween: 0,
         });
       });
     },
     // 切换VR
     cutVr(val) {
+      if (this.oneAc === val.id) return;
+      console.log("切换vr");
       this.oneAc = val.id;
-      this.$emit("zhanChange", val.code);
+      this.$emit("zhanChange", this.box3Ac, val.code);
+    },
+
+    // 进来页面的方法
+    baseList(bs) {
+      if (bs == 3) this.data = exArr3;
+      else if (bs == 4) this.data = exArr4;
+      else this.data = exArr1;
     },
   },
   watch: {},
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    if (this.list.bs == 1) this.data = exArr1;
-    else this.data = exArr2;
+    this.baseList(1);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    let obj = this.data.find((v) => v.id == this.list.id1);
-    this.towAc = obj.id;
-    let index = this.list.id2.indexOf("_");
-    let bs = this.list.id2.substr(index + 1, this.list.id2.length);
-    let num = Math.ceil(Number(bs) / 6);
-    this.oneAc = this.list.id2;
-
-    this.getSwFu(num - 1, obj);
+    this.getSwFu("1", "1_1");
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -133,6 +182,7 @@ export default {
 .Bottom2 {
   width: 100%;
   height: 100%;
+  position: relative;
   .box1 {
     position: relative;
     width: 100%;
@@ -165,10 +215,15 @@ export default {
           margin-right: 12px;
           width: 209px;
           height: 100%;
+          /deep/.el-tooltip {
+            width: 100%;
+            height: 100%;
+          }
           &:nth-of-type(6) {
             margin-right: 0;
           }
-          & > p {
+          p {
+            opacity: 0.8;
             transition: all 0.3s;
             position: absolute;
             bottom: 0;
@@ -177,24 +232,29 @@ export default {
             height: 30px;
             line-height: 30px;
             text-align: center;
-            background-color: rgba(0, 0, 0, 0.6);
+            background-color: rgba(0, 0, 0, 0.8);
             font-size: 14px;
             color: #fff;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding: 0 6px;
           }
-          & > img {
+          img {
             width: 100%;
             height: 100%;
             object-fit: cover;
           }
           &:hover {
-            & > p {
+            p {
+              opacity: 1;
               background-color: rgba(181, 147, 134, 0.8);
             }
           }
         }
         .active {
-          pointer-events: none;
-          & > p {
+          p {
+            opacity: 1;
             background-color: rgba(181, 147, 134, 0.8);
           }
         }
@@ -207,19 +267,59 @@ export default {
       }
     }
     .swiper-button-next {
-      color: #b59386;
+      color: #C48871;
     }
     .swiper-button-prev {
-      color: #b59386;
+      color: #C48871;
     }
   }
   .box2 {
     background-color: rgba(0, 0, 0, 0.8);
     width: 100%;
-    height: 65px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 2px;
+    & > div {
+      display: flex;
+      align-items: center;
+      & > img {
+        margin: 0 26px;
+        width: 2px;
+        height: 40px;
+      }
+      & > div {
+        cursor: pointer;
+        font-size: 20px;
+        color: #fff;
+        padding-bottom: 5px;
+        opacity: 0.8;
+        &:hover {
+          opacity: 1;
+          padding-top: 2px;
+          color: #C48871;
+          border-bottom: 2px solid #C48871;
+        }
+      }
+    }
+    .active {
+      opacity: 1;
+      padding-top: 2px;
+      pointer-events: none;
+      color: #C48871;
+      border-bottom: 2px solid #C48871;
+    }
+  }
+  .box3 {
+    margin-top: 5px;
+    background-color: rgba(0, 0, 0, 0.8);
+    width: 100%;
+    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding-bottom: 2px;
     & > div {
       display: flex;
       align-items: center;
@@ -233,18 +333,21 @@ export default {
         font-size: 20px;
         color: #fff;
         padding-bottom: 5px;
+        opacity: 0.8;
         &:hover {
+          opacity: 1;
           padding-top: 2px;
-          color: #b59386;
-          border-bottom: 2px solid #b59386;
+          color: #C48871;
+          border-bottom: 2px solid #C48871;
         }
       }
     }
     .active {
+      opacity: 1;
       padding-top: 2px;
       pointer-events: none;
-      color: #b59386;
-      border-bottom: 2px solid #b59386;
+      color: #C48871;
+      border-bottom: 2px solid #C48871;
     }
   }
 }

pc/src/views/Home.vue

@@ -61,25 +61,20 @@
       <div class="btnn" @click="copyPcTxt"><div>一键复制</div></div>
     </div>
     <!-- 底部组件 -->
-    <div class="bttomBox" :class="{ down: !bttomIsShow, sm: mainSm === 3&&!bottom2Show }">
+    <div class="bttomBox" :class="{ down: !bttomIsShow }">
       <div
         class="bttomIsShow"
         @click="bttomIsShow = !bttomIsShow"
         :class="bttomIsShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
       ></div>
-      <Bottom
-        @botWidth="botWidth"
-        @zhanChange="zhanChange"
-        v-show="!bottom2Show"
-      />
-      <Bottom2 @zhanChange="zhanChange" v-if="bottom2Show" :list='list'/>
+      <Bottom2 @zhanChange="zhanChange" />
       <div class="shadow"></div>
       <div class="shadow right"></div>
     </div>
 
     <!-- 点击展厅出来的组件 -->
-    <Onezhan @toZhan='toZhan' v-if="zhanShow === '111'" v-show="zhanShow2"/>
-    <Towzhan @toZhan='toZhan' v-if="zhanShow === '222'" v-show="zhanShow2"/>
+    <Onezhan @toZhan="toZhan" v-if="oneSid === 3" />
+    <Towzhan @toZhan="toZhan" v-else-if="oneSid === 4" />
   </div>
 </template>
 
@@ -93,46 +88,31 @@ export default {
   components: { Bottom, Bottom2, Onezhan, Towzhan },
   data() {
     return {
-      bottom2Show: false,
-      zhanShow: null,
-      zhanShow2:true,
-      mainSm: 1,
+      // 选择了航拍还是展厅
+      oneSid: 1,
+
       bttomIsShow: true,
+
       topBox1Show: false,
       topBox2Show: false,
       topBox3Show: false,
       myUrl: "",
-      list:{}
     };
   },
   computed: {},
   watch: {},
   methods: {
     // 点击左上角的返回
-    backSta(){
-      if(this.bottom2Show){
-        // 从室内导览页面回到首页
-      this.bottom2Show=false
-      this.zhanShow2=true
-      }else {
-        //回到博博会之前的开发页面
-        window.location.href='https://zzbbh.4dage.com/web/index.html'
-
-      }
+    backSta() {
+      //回到博博会之前的开发页面
+      window.location.href = "https://zzbbh.4dage.com/web/index.html";
     },
-    toZhan(bs,id1,id2){
-      this.list={bs,id1,id2}
-      // 去室内导览
-      this.bottom2Show=true
-      this.zhanShow2=false
+    toZhan(bs, id1, id2) {
+      console.log("-----", bs, id1, id2);
     },
-    zhanChange(val) {
-      if (val === "111") this.zhanShow = val;
-      else if (val === "222") this.zhanShow = val;
-      else this.zhanShow = null;
-    },
-    botWidth(val) {
-      this.mainSm = val;
+    zhanChange(oneSid, val) {
+      this.oneSid = oneSid;
+      console.log("VR改变了", val);
     },
     //点击复制链接
     copyPcTxt() {
@@ -180,7 +160,8 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: #5c9cfb;
+  background-image: url("../assets/img/homeBg.jpg");
+  background-size: 100% 100%;
   .rightLogo {
     width: 572px;
     height: 46px;
@@ -330,7 +311,7 @@ export default {
     left: 50%;
     transform: translateX(-50%);
     width: 1339px;
-    height: 221px;
+    height: 240px;
     .bttomIsShow {
       cursor: pointer;
       text-align: center;
@@ -352,7 +333,7 @@ export default {
       left: 0;
       top: 0;
       width: 200px;
-      height: calc(100%);
+      height: 152px;
       background-image: linear-gradient(
         to right,
         rgba(0, 0, 0, 0.7),
@@ -372,13 +353,7 @@ export default {
     }
   }
   .down {
-    bottom: -221px;
-  }
-  .sm {
-    width: 530px;
-    .shadow {
-      opacity: 0 !important;
-    }
+    bottom: -240px;
   }
 }
 </style>

pc/src/views/Onezhan.vue

@@ -34,10 +34,10 @@
           </div>
           <div class="searMainBox" v-else>
             <div class="searMain" v-for="item in searchData" :key="item.id">
-              <div class="searTit">{{ item.name }}</div>
+              <!-- <div class="searTit">{{ item.name }}</div> -->
               <div
                 class="searRow"
-                @click="$emit('toZhan', 1, item.id, val.id)"
+                @click="$emit('toZhan', 3, item.id, val.id)"
                 v-for="val in item.son"
                 :key="val.id"
                 v-html="val.name"
@@ -46,7 +46,18 @@
           </div>
         </div>
 
-        <div class="contRow" v-for="item in rightData" :key="item.id">
+        <div
+          class="contRow"
+          :class="{
+            shouqi:
+              oneShow !== item.id &&
+              Number(oneShow) - 1 != item.id &&
+              Number(oneShow) + 1 != item.id &&
+              oneShow,
+          }"
+          v-for="item in rightData"
+          :key="item.id"
+        >
           <div
             @click="sonShow(item.id)"
             class="inco"
@@ -54,10 +65,12 @@
               item.id == oneShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
             "
           ></div>
-          <div class="contRowTop">{{ item.name }}</div>
+          <div class="contRowTop">
+            {{ item.name }}
+          </div>
           <div class="contRowSon" v-if="item.id == oneShow">
             <div
-              @click="$emit('toZhan', 1, item.id, val.id)"
+              @click="$emit('toZhan', 3, item.id, val.id)"
               v-for="val in item.son"
               :key="val.id"
             >
@@ -71,7 +84,7 @@
 </template>
 
 <script>
-import { exArr1 } from "./zhan.js";
+import { exArr3 } from "./zhan.js";
 export default {
   name: "Onezhan",
   components: {},
@@ -90,7 +103,7 @@ export default {
         { name: "分区七", id: "7", class: "box7" },
       ],
       oneShow: null,
-      rightData: exArr1,
+      rightData: exArr3,
     };
   },
   watch: {},
@@ -265,6 +278,7 @@ export default {
     height: 540px;
     width: 410px;
     padding: 35px 30px;
+    overflow: hidden;
     .top {
       padding: 0 15px;
       position: relative;
@@ -291,6 +305,7 @@ export default {
       width: 100%;
       height: 420px;
       position: relative;
+      background-color: rgba(112, 112, 112, 0.2);
       .searchResBox {
         color: #fff;
         &::after {
@@ -396,6 +411,7 @@ export default {
         .contRowTop {
           color: #fff;
           height: 34px;
+          // transition: height 0.1s;
           text-align: center;
           line-height: 34px;
           background-image: url("../assets/img/zhanRBac.png");
@@ -414,7 +430,7 @@ export default {
         }
         .contRowSon {
           width: 96%;
-          height: 140px;
+          max-height: 260px;
           overflow-y: auto;
           padding: 10px 20px 4px 50px;
           & > div {
@@ -427,6 +443,16 @@ export default {
           }
         }
       }
+      .shouqi {
+        .inco {
+          opacity: 0;
+          pointer-events: none;
+        }
+        .contRowTop {
+          height: 5px;
+          overflow: hidden;
+        }
+      }
     }
   }
 }

pc/src/views/Towzhan.vue

@@ -40,10 +40,10 @@
           </div>
           <div class="searMainBox" v-else>
             <div class="searMain" v-for="item in searchData" :key="item.id">
-              <div class="searTit">{{ item.name }}</div>
+              <!-- <div class="searTit">{{ item.name }}</div> -->
               <div
                 class="searRow"
-                @click="$emit('toZhan',2, item.id, val.id)"
+                @click="$emit('toZhan', 4, item.id, val.id)"
                 v-for="val in item.son"
                 :key="val.id"
                 v-html="val.name"
@@ -52,7 +52,18 @@
           </div>
         </div>
 
-        <div class="contRow" v-for="item in rightData" :key="item.id">
+        <div
+          class="contRow"
+          :class="{
+            shouqi:
+              oneShow !== item.id &&
+              Number(oneShow) - 1 != item.id &&
+              Number(oneShow) + 1 != item.id &&
+              oneShow,
+          }"
+          v-for="item in rightData"
+          :key="item.id"
+        >
           <div
             @click="sonShow(item.id)"
             class="inco"
@@ -63,7 +74,7 @@
           <div class="contRowTop">{{ item.name }}</div>
           <div class="contRowSon" v-if="item.id == oneShow">
             <div
-              @click="$emit('toZhan',2, item.id, val.id)"
+              @click="$emit('toZhan', 4, item.id, val.id)"
               v-for="val in item.son"
               :key="val.id"
             >
@@ -77,7 +88,7 @@
 </template>
 
 <script>
-import { exArr2 } from "./zhan.js";
+import { exArr4 } from "./zhan.js";
 export default {
   name: "Towzhan",
   components: {},
@@ -98,7 +109,7 @@ export default {
         { name: "分区九", id: "9", class: "box7" },
       ],
       oneShow: null,
-      rightData: exArr2,
+      rightData: exArr4,
     };
   },
   watch: {},
@@ -438,7 +449,7 @@ export default {
         }
         .contRowSon {
           width: 96%;
-          height: 130px;
+          max-height: 273px;
           overflow-y: auto;
           padding: 10px 20px 4px 50px;
           & > div {
@@ -451,6 +462,16 @@ export default {
           }
         }
       }
+      .shouqi {
+        .inco {
+          opacity: 0;
+          pointer-events: none;
+        }
+        .contRowTop {
+          height: 5px;
+          overflow: hidden;
+        }
+      }
     }
   }
 }

pc/src/views/zhan.js

@@ -1,4 +1,4 @@
-export const exArr1 = [
+export const exArr3 = [
   {
     id: "1",
     name: "分区一",
@@ -383,7 +383,7 @@ export const exArr1 = [
   },
 ]
 
-export const exArr2 = [
+export const exArr4 = [
   {
     id: '1', name: '分区一', son: [{ id: '1_1', name: '广东博容照明科技有限公司', code: '2' },
     { id: '1_2', name: '郑州杰林计算机科技有限公司', code: '2' },
@@ -758,3 +758,60 @@ export const exArr2 = [
   },
 ]
 
+export const exArr1 = [
+  {
+    id: '1', name: '分区一', son: [{ id: '1_1', name: '航拍1', code: '3' },
+    { id: '1_2', name: '航拍1', code: '3' },
+    { id: '1_3', name: '航拍1', code: '3' },
+    { id: '1_4', name: '航拍1', code: '3' },
+    { id: '1_5', name: '航拍1', code: '3' },
+    { id: '1_6', name: '航拍1', code: '3' },
+    { id: '1_7', name: '航拍1', code: '3' },
+    { id: '1_8', name: '航拍1', code: '3' },
+    { id: '1_9', name: '航拍1', code: '3' },
+    { id: '1_10', name: '航拍1', code: '3' },
+    { id: '1_11', name: '航拍1', code: '3' },
+    { id: '1_12', name: '航拍1', code: '3' },
+    { id: '1_13', name: '航拍1', code: '3' },
+    { id: '1_14', name: '航拍1', code: '3' },
+    { id: '1_15', name: '航拍1', code: '3' },
+    { id: '1_16', name: '航拍1', code: '3' },
+    { id: '1_17', name: '航拍1', code: '3' },
+    { id: '1_18', name: '航拍1', code: '3' },
+    { id: '1_19', name: '航拍1', code: '3' },
+    { id: '1_20', name: '航拍1', code: '3' },
+    { id: '1_21', name: '航拍1', code: '3' },
+    { id: '1_22', name: '航拍1', code: '3' },
+    { id: '1_23', name: '航拍1', code: '3' },
+    { id: '1_24', name: '航拍1', code: '3' },]
+  },
+]
+
+export const exArr2 = [
+  {
+    id: '1', name: '分区一', son: [{ id: '1_1', name: '地面1', code: '4' },
+    { id: '1_2', name: '地面1', code: '4' },
+    { id: '1_3', name: '地面1', code: '4' },
+    { id: '1_4', name: '地面1', code: '4' },
+    { id: '1_5', name: '地面1', code: '4' },
+    { id: '1_6', name: '地面1', code: '4' },
+    { id: '1_7', name: '地面1', code: '4' },
+    { id: '1_8', name: '地面1', code: '4' },
+    { id: '1_9', name: '地面1', code: '4' },
+    { id: '1_10', name: '地面1', code: '4' },
+    { id: '1_11', name: '地面1', code: '4' },
+    { id: '1_12', name: '地面1', code: '4' },
+    { id: '1_13', name: '地面1', code: '4' },
+    { id: '1_14', name: '地面1', code: '4' },
+    { id: '1_15', name: '地面1', code: '4' },
+    { id: '1_16', name: '地面1', code: '4' },
+    { id: '1_17', name: '地面1', code: '4' },
+    { id: '1_18', name: '地面1', code: '4' },
+    { id: '1_19', name: '地面1', code: '4' },
+    { id: '1_20', name: '地面1', code: '4' },
+    { id: '1_21', name: '地面1', code: '4' },
+    { id: '1_22', name: '地面1', code: '4' },
+    { id: '1_23', name: '地面1', code: '4' },
+    { id: '1_24', name: '地面1', code: '4' },]
+  },
+]