完成点位移动隐藏tab栏

web/public/static/js/main_2020_show.js

@@ -16888,6 +16888,10 @@ window.Modernizr = function(n, e, t) {
                       , r = t && !t.isAligned() ? p.OUTDOOR : p.PANORAMA;
                     n !== r && (r === p.PANORAMA ? this.showAlltags(c.tags.startup.fadeInDuration, null, !0) : this.hideAlltags(c.tags.startup.fadeInDuration))
                 }
+                // 移动的时候隐藏顶部tab栏
+                console.log('移动了点位')
+                let temp3 =$('.parent-body .lay_top')
+                temp3.css('height','0px')
             }
             ,
             n.prototype.onPlayerReady = function(e, t, i) {

web/src/pages/Home.vue

@@ -8,7 +8,7 @@
     <div id="gui-thumb"></div>
 
     <!-- 上侧固定导航栏 -->
-    <div class="lay_top" v-if="layTop">
+    <div class="lay_top">
       <div class="login">
         <img src="@/assets/img/logo.png" alt="" />
         <p>北京武警执勤第七支队数字史馆</p>
@@ -27,18 +27,14 @@
             :key="item.id"
             @click="jump(item.url)"
           >
-            <div :class="{active:item.id===1}">{{ item.name }}</div>
-            <img
-              v-show="1 === item.id"
-              src="@/assets/img/active.png"
-              alt=""
-            />
+            <div :class="{ active: item.id === 1 }">{{ item.name }}</div>
+            <img v-show="1 === item.id" src="@/assets/img/active.png" alt="" />
           </div>
         </div>
       </div>
     </div>
     <!-- 隐藏导航栏，显示logo，点击显示导航栏 -->
-    <div class="lay_top_hide" @click="layTop=true"></div>
+    <div class="lay_top_hide" @click="layTopShow"></div>
     <!-- 下侧内容 -->
     <div class="right_con">
       <Router-view />
@@ -147,7 +143,7 @@ export default {
   data() {
     return {
       // 顶部tab栏的显示隐藏
-      layTop:true,
+      layTop: true,
       tabArr: [
         { url: "tab1", id: 1, name: "数字史馆" },
         { url: "tab2", id: 2, name: "数字荣誉室" },
@@ -165,6 +161,11 @@ export default {
   },
 
   methods: {
+    // 点击显示tab栏
+    layTopShow() {
+      let temp3 = $(".parent-body .lay_top");
+      temp3.css("height", "90px");
+    },
     //点击跳转
     jump(url) {
       if (url === "tab1") return;
@@ -235,19 +236,21 @@ export default {
   bottom: 0;
   width: 100%;
   height: 100%;
-  .lay_top_hide{
+  .lay_top_hide {
     display: block;
     cursor: pointer;
     position: fixed;
     top: 0px;
     left: 100px;
-    z-index:98;
+    z-index: 98;
     width: 220px;
     height: 86px;
-    background: url('../assets/img/logoHide.png');
+    background: url("../assets/img/logoHide.png");
     background-size: 100% 100%;
   }
   .lay_top {
+    overflow: hidden;
+    transition: all 0.3s;
     display: flex;
     z-index: 99;
     position: relative;
@@ -295,17 +298,17 @@ export default {
           text-align: center;
           font-size: 18px;
           height: 60px;
-          &>div{
+          & > div {
             color: #fff;
           }
-          .active{
+          .active {
             color: #f2cd83;
           }
           & > img {
             width: 70px;
             height: 20px;
           }
-          &:hover div{
+          &:hover div {
             color: #f2cd83;
           }
         }