bottom bar适配本项目

src/components/BottomBar.vue

@@ -5,6 +5,7 @@
     class="bottom-bar"
     :style="{
       zIndex: $globalConfig.zIndex.bottomBar.self,
+      bottom: isHigher ? '500px' : '',
     }"
   >
     <div
@@ -12,13 +13,13 @@
       class="normal-bar-wrap"
       :class="{collapsed: isCollapsed}"
     >
-      <img
+      <!-- <img
         class="bg-image"
         src="@/assets/images/bottom-bar-bg.png"
         alt=""
         draggable="false"
-      >
-      <button
+      > -->
+      <!-- <button
         class="arrow"
         @click="isCollapsed = !isCollapsed"
       >
@@ -27,16 +28,16 @@
           alt="show-hide"
           draggable="false"
         >
-      </button>
+      </button> -->
       <menu>
-        <button @click="$router.push({name: 'HomeView'})">
+        <!-- <button @click="$router.push({name: 'HomeView'})">
           <img
             src="@/assets/images/home.png"
             alt="首页"
             draggable="false"
           >
           <span>首页</span>
-        </button>
+        </button> -->
         <button>
           <img
             :src="isMuted ? require('@/assets/images/music-muted.png') : require('@/assets/images/music.png')"
@@ -44,9 +45,9 @@
             draggable="false"
             @click="toggleMute"
           >
-          <span>声音</span>
+          <!-- <span>声音</span> -->
         </button>
-        <button @click="onClickLike">
+        <!-- <button @click="onClickLike">
           <img
             src="@/assets/images/like.png"
             alt="点赞"
@@ -61,14 +62,14 @@
               +1
             </div>
           </transition>
-        </button>
+        </button> -->
         <button @click="onClickShare">
           <img
             src="@/assets/images/share.png"
             alt="分享"
             draggable="false"
           >
-          <span>分享</span>
+          <!-- <span>分享</span> -->
         </button>
         <button
           v-show="$route.meta.canFullScreen"
@@ -79,7 +80,7 @@
             alt="全屏"
             draggable="false"
           >
-          <span>全屏</span>
+          <!-- <span>全屏</span> -->
         </button>
       </menu>
     </div>
@@ -117,6 +118,7 @@ export default {
   data() {
     return {
       ifMustHide: false,
+      isHigher: false,
       isCollapsed: false,
       isShowPlusOne: false,
       isShowShareModal: false,
@@ -135,6 +137,12 @@ export default {
     this.$msgCenter.subscribe('need-show-bottom-bar', () => {
       this.ifMustHide = false
     })
+    this.$msgCenter.subscribe('tour-guide-show', () => {
+      this.isHigher = true
+    })
+    this.$msgCenter.subscribe('tour-guide-hide', () => {
+      this.isHigher = false
+    })
   },
   methods: {
     ...globalMapMutations([
@@ -161,10 +169,9 @@ export default {
 
 <style lang="less" scoped>
 .bottom-bar {
-  width: 100vw;
   position: fixed;
-  left: 0;
-  bottom: -2px;
+  right: 0;
+  bottom: 30px;
   .normal-bar-wrap {
     &.collapsed {
       transform: translateY(calc(100% - 3.5rem));
@@ -190,23 +197,18 @@ export default {
       }
     }
     > menu {
-      position: absolute;
-      left: 50%;
-      top: 2.96rem;
-      transform: translateX(-50%);
-      display: flex;
-      align-items: center;
       > button {
-        padding: 0.4rem;
+        width: 50px;
+        height: 50px;
         position: relative;
-        margin-left: 2.12rem;
-        &:first-child {
-          margin-left: initial;
+        margin-right: 30px;
+        opacity: 0.7;
+        &:hover {
+          opacity: 1;
         }
-
         > img {
-          width: 3.17rem;
-          height: 3.17rem;
+          width: 100%;
+          height: 100%;
           object-fit: contain;
         }
         > span {

src/main.js

@@ -47,27 +47,27 @@ Vue.prototype.$globalConfig = globalConfig
 Vue.prototype.$cdnPath = process.env.VUE_APP_CDN_PATH
 Vue.prototype.$msgCenter = new MessageCenter()
 
-let windowWidthLast = window.innerWidth
-let windowHeightLast = window.innerHeight
+// let windowWidthLast = window.innerWidth
+// let windowHeightLast = window.innerHeight
 
-function onResize() {
-  if (window.innerWidth === windowWidthLast) {
-    // 发生了高度变化，认为发生了软键盘显隐
-    if (uaInfo.os.name === 'Android') {
-      if (window.innerHeight < windowHeightLast) {
-        Vue.prototype.$msgCenter.publish('need-hide-bottom-bar')
-      } else if (window.innerHeight > windowHeightLast) {
-        Vue.prototype.$msgCenter.publish('need-show-bottom-bar')
-      }
-    }
-  }
-  windowWidthLast = window.innerWidth
-  windowHeightLast = window.innerHeight
-}
-onResize()
-window.addEventListener('resize', () => {
-  onResize()
-})
+// function onResize() {
+//   if (window.innerWidth === windowWidthLast) {
+//     // 发生了高度变化，认为发生了软键盘显隐
+//     if (uaInfo.os.name === 'Android') {
+//       if (window.innerHeight < windowHeightLast) {
+//         Vue.prototype.$msgCenter.publish('need-hide-bottom-bar')
+//       } else if (window.innerHeight > windowHeightLast) {
+//         Vue.prototype.$msgCenter.publish('need-show-bottom-bar')
+//       }
+//     }
+//   }
+//   windowWidthLast = window.innerWidth
+//   windowHeightLast = window.innerHeight
+// }
+// onResize()
+// window.addEventListener('resize', () => {
+//   onResize()
+// })
 
 // 禁用上下文菜单
 document.oncontextmenu = function(e) {

src/router/index.js

@@ -49,7 +49,7 @@ const routes = [
     name: 'SwkkView',
     component: SwkkView,
     meta: {
-      isShowBottomBar: false,
+      isShowBottomBar: true,
       canFullScreen: true,
     },
     beforeEnter (to, from, next) {

src/views/HomeView.vue

@@ -54,7 +54,7 @@
       @click="toggleMute"
     >
       <img
-        :src="isMuted ? require('@/assets/images/music-muted-homepage.png') : require('@/assets/images/music-homepage.png')"
+        :src="isMuted ? require('@/assets/images/music-muted.png') : require('@/assets/images/music.png')"
         alt="声音"
         draggable="false"
       >

src/views/SwkkView.vue

@@ -17,7 +17,6 @@
     >
       <button
         id="auto-moving"
-        :class="{active: isAutoMoving}"
         @click="onClickAutoMoving"
       >
         <img
@@ -244,9 +243,9 @@ export default {
     isShowTourGuide: {
       handler(vNew) {
         if (vNew) {
-          this.$msgCenter.publish('need-hide-bottom-bar')
+          this.$msgCenter.publish('tour-guide-show')
         } else {
-          this.$msgCenter.publish('need-show-bottom-bar')
+          this.$msgCenter.publish('tour-guide-hide')
         }
       }
     }
@@ -589,7 +588,6 @@ export default {
     > button {
       margin-left: 30px;
       opacity: 0.7;
-      cursor: pointer;
       &:hover {
         opacity: 1;
       }