点击全屏隐藏顶部tab栏和点赞送花功能

web/public/static/js/main_2020_show.js

@@ -7603,6 +7603,15 @@ window.Modernizr = function(n, e, t) {
                 }
             }();
             $(document).on("fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange", function(e) {
+                // 显示和隐藏顶部tab栏
+                let temp =$('.parent-body .lay_top')
+                if(temp.css('display')==='none') temp.css('display','flex')
+                else temp.css('display','none')
+
+                let temp2 =$('.parent-body .lay_top_hide')
+                if(temp2.css('display')==='none') temp2.css('display','block')
+                else temp2.css('display','none')
+
                 $("#gui-fullscreen").toggle(!K.isFullscreen()),
                 $("#gui-fullscreen-exit").toggle(!!K.isFullscreen()),
                 setTimeout(function() {

web/src/pages/Home.vue

@@ -8,7 +8,7 @@
     <div id="gui-thumb"></div>
 
     <!-- 上侧固定导航栏 -->
-    <div class="lay_top">
+    <div class="lay_top" v-if="layTop">
       <div class="login">
         <img src="@/assets/img/logo.png" alt="" />
         <p>北京武警执勤第七支队数字史馆</p>
@@ -37,6 +37,8 @@
         </div>
       </div>
     </div>
+    <!-- 隐藏导航栏，显示logo，点击显示导航栏 -->
+    <div class="lay_top_hide" @click="layTop=true"></div>
     <!-- 下侧内容 -->
     <div class="right_con">
       <Router-view />
@@ -144,6 +146,8 @@ export default {
 
   data() {
     return {
+      // 顶部tab栏的显示隐藏
+      layTop:true,
       tabArr: [
         { url: "tab1", id: 1, name: "数字史馆" },
         { url: "tab2", id: 2, name: "数字荣誉室" },
@@ -231,9 +235,21 @@ export default {
   bottom: 0;
   width: 100%;
   height: 100%;
+  .lay_top_hide{
+    display: block;
+    cursor: pointer;
+    position: fixed;
+    top: 0px;
+    left: 100px;
+    z-index:98;
+    width: 220px;
+    height: 86px;
+    background: url('../assets/img/logoHide.png');
+    background-size: 100% 100%;
+  }
   .lay_top {
     display: flex;
-    z-index: 99999;
+    z-index: 99;
     position: relative;
     width: 100%;
     height: 90px;
@@ -264,7 +280,7 @@ export default {
       flex: 1;
       .bot_time {
         text-align: right;
-        padding-right: 120px;
+        padding-right: 67px;
         height: 30px;
         line-height: 30px;
         border-bottom: 1px solid #f2cd83;

web/src/views/gui/menu.vue

@@ -226,6 +226,48 @@
             ></i>
           </a>
         </div>
+
+        <!-- 点赞和玫瑰 -->
+        <ul class="btn-list">
+          <li title="点赞" class="like" @click="handleLike">
+            <img
+              :src="
+                require(`@/assets/img/${
+                  isShowGood ? 'like_active' : 'like'
+                }.png`)
+              "
+            />
+            <span class="like_txt">{{ likeNum }}</span>
+            <transition name="likeAddAnimate">
+              <div class="good" v-show="isShowGood">
+                <div class="pic">
+                  <img src="../../assets/img/like_active.png" alt="" />
+                </div>
+                <div class="num">+1</div>
+              </div>
+            </transition>
+          </li>
+          <!-- 玫瑰 -->
+          <li title="送花" class="like" @click="handleLike2">
+            <img
+              :src="
+                require(`@/assets/img/${
+                  isShowGood2 ? 'flower_active' : 'flower'
+                }.png`)
+              "
+            />
+            <span class="like_txt">{{ likeNum2 }}</span>
+            <transition name="likeAddAnimate">
+              <div class="good" v-show="isShowGood2">
+                <div class="pic">
+                  <img src="../../assets/img/flower_active.png" alt="" />
+                </div>
+                <div class="num">+1</div>
+              </div>
+            </transition>
+          </li>
+        </ul>
+
         <div
           id="gui-fullscreen"
           class="ui-icon wide"
@@ -266,6 +308,12 @@ export default {
   data() {
     return {
       isGuide: true,
+      // 点赞
+      isShowGood: false,
+      likeNum: 0,
+      // 玫瑰
+      isShowGood2: false,
+      likeNum2: 0,
     };
   },
   computed: {},
@@ -278,11 +326,93 @@ export default {
         window.manage.switchBgmState(false);
       }
     },
+    // 点击点赞
+    handleLike() {
+      if (this.isShowGood) return;
+      this.isShowGood = true;
+      setTimeout(() => {
+        this.isShowGood = false;
+        this.likeNum++;
+      }, 2500);
+    },
+    // 点击玫瑰
+    handleLike2() {
+      if (this.isShowGood2) return;
+      this.isShowGood2 = true;
+      setTimeout(() => {
+        this.isShowGood2 = false;
+        this.likeNum2++;
+      }, 2500);
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
+// ----------点赞
+.likeAddAnimate-enter-active,
+.likeAddAnimate-leave-active {
+  transition: all 2.8s ease;
+}
+.likeAddAnimate-enter {
+  transform: translateY(-40px) scale(1) rotate(20deg);
+  opacity: 1;
+}
+.likeAddAnimate-leave {
+  transform: translateY(-60px) scale(1) rotate(20deg);
+  opacity: 1;
+}
+.likeAddAnimate-enter-to,
+.likeAddAnimate-leave-to {
+  transform: translateY(-80px) scale(0.8) rotate(-20deg);
+  opacity: 0;
+}
+.good {
+  position: absolute;
+  bottom: 5px;
+  right: 0px;
+  display: flex;
+  .pic {
+    width: 35px;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .num {
+    margin-top: 10px;
+    color: #fff;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 1);
+  }
+}
+.btn-list {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  > li {
+    margin-right: 15px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.6);
+    position: relative;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    > img {
+      width: 38px;
+      height: 38px;
+    }
+    .like_txt {
+      position: absolute;
+      bottom: -18px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+// ----------点赞结束
 ::-webkit-scrollbar {
   width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
 }
@@ -294,7 +424,6 @@ export default {
   outline: none;
 }
 
-
 // 右侧菜单栏
 @wh: 22px;
 @margin: 0px;
@@ -433,5 +562,4 @@ export default {
     background-color: transparent !important;
   }
 }
-
 </style>