倾斜摄影页面：调整bottom-bar以挡住第三方logo

src/components/BottomBar.vue

@@ -2,81 +2,100 @@
   <div
     v-if="$route.meta.isShowBottomBar && !ifMustHide"
     class="bottom-bar"
-    :class="{collapsed: isCollapsed}"
     :style="{
       zIndex: $globalConfig.zIndex.bottomBar.self,
     }"
   >
-    <img
-      class="bg-image"
-      src="@/assets/images/bottom-bar-bg.png"
-      alt=""
-      draggable="false"
-    >
-    <button
-      class="arrow"
-      @click="isCollapsed = !isCollapsed"
+    <div
+      v-show="!(isCollapsed && $route.meta.isSpecialStyle)"
+      class="normal-bar-wrap"
+      :class="{collapsed: isCollapsed}"
     >
       <img
-        src="@/assets/images/arrow-sharp.png"
-        alt="show-hide"
+        class="bg-image"
+        src="@/assets/images/bottom-bar-bg.png"
+        alt=""
         draggable="false"
       >
-    </button>
-    <menu>
-      <button @click="$router.push({name: 'HomeView'})">
-        <img
-          src="@/assets/images/home.png"
-          alt="首页"
-          draggable="false"
-        >
-        <span>首页</span>
-      </button>
-      <button>
+      <button
+        class="arrow"
+        @click="isCollapsed = !isCollapsed"
+      >
         <img
-          :src="isMuted ? require('@/assets/images/music-muted.png') : require('@/assets/images/music.png')"
-          alt="声音"
+          src="@/assets/images/arrow-sharp.png"
+          alt="show-hide"
           draggable="false"
-          @click="toggleMute"
         >
-        <span>声音</span>
       </button>
-      <button @click="onClickLike">
-        <img
-          src="@/assets/images/like.png"
-          alt="点赞"
-          draggable="false"
-        >
-        <span>点赞</span>
-        <transition name="bubble">
-          <div
-            v-if="isShowPlusOne"
-            class="plus-one"
+      <menu>
+        <button @click="$router.push({name: 'HomeView'})">
+          <img
+            src="@/assets/images/home.png"
+            alt="首页"
+            draggable="false"
           >
-            +1
-          </div>
-        </transition>
-      </button>
-      <button @click="onClickShare">
-        <img
-          src="@/assets/images/share.png"
-          alt="分享"
-          draggable="false"
+          <span>首页</span>
+        </button>
+        <button>
+          <img
+            :src="isMuted ? require('@/assets/images/music-muted.png') : require('@/assets/images/music.png')"
+            alt="声音"
+            draggable="false"
+            @click="toggleMute"
+          >
+          <span>声音</span>
+        </button>
+        <button @click="onClickLike">
+          <img
+            src="@/assets/images/like.png"
+            alt="点赞"
+            draggable="false"
+          >
+          <span>点赞</span>
+          <transition name="bubble">
+            <div
+              v-if="isShowPlusOne"
+              class="plus-one"
+            >
+              +1
+            </div>
+          </transition>
+        </button>
+        <button @click="onClickShare">
+          <img
+            src="@/assets/images/share.png"
+            alt="分享"
+            draggable="false"
+          >
+          <span>分享</span>
+        </button>
+        <button
+          v-show="$route.meta.canFullScreen"
+          @click="toggleFullScreen"
         >
-        <span>分享</span>
-      </button>
-      <button
-        v-show="$route.meta.canFullScreen"
-        @click="toggleFullScreen"
+          <img
+            :src="!isFullScreen ? require(`@/assets/images/enlarge.png`) : require(`@/assets/images/shrink.png`)"
+            alt="全屏"
+            draggable="false"
+          >
+          <span>全屏</span>
+        </button>
+      </menu>
+    </div>
+
+    <div
+      v-show="(isCollapsed && $route.meta.isSpecialStyle)"
+      class="special-bar-wrap"
+      @click="isCollapsed = !isCollapsed"
+    >
+      <img
+        class="bg-image"
+        src="@/assets/images/bottom-bar-bg-special.png"
+        alt=""
+        draggable="false"
       >
-        <img
-          :src="!isFullScreen ? require(`@/assets/images/enlarge.png`) : require(`@/assets/images/shrink.png`)"
-          alt="全屏"
-          draggable="false"
-        >
-        <span>全屏</span>
-      </button>
-    </menu>
+    </div>
+
     <ShareModal
       v-if="isShowShareModal"
       :style="{
@@ -145,62 +164,72 @@ export default {
   position: fixed;
   left: 0;
   bottom: -2px;
-  .bg-image {
-    width: 100%;
-  }
-  .arrow {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
-    width: 2.21rem;
-    height: 1.96rem;
-    padding: 0.62rem;
-    box-sizing: initial;
-    > img {
+  .normal-bar-wrap {
+    &.collapsed {
+      transform: translateY(calc(100% - 3.5rem));
+      .arrow {
+        transform: translateX(-50%) rotate(180deg);
+      }
+    }
+    .bg-image {
       width: 100%;
-      height: 100%;
     }
-  }
-  > menu {
-    position: absolute;
-    left: 50%;
-    top: 2.96rem;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    gap: 2.12rem;
-    > button {
-      padding: 0.4rem;
-      position: relative;
+    .arrow {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      transform: translateX(-50%);
+      width: 2.21rem;
+      height: 1.96rem;
+      padding: 0.62rem;
+      box-sizing: initial;
       > img {
-        width: 3.17rem;
-        height: 3.17rem;
-        object-fit: contain;
-      }
-      > span {
-        display: block;
-        line-height: 1.37rem;
-        color: #F9F2E8;
-        font-size: 1.17rem;
+        width: 100%;
+        height: 100%;
       }
-      .plus-one {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translate(50%, -50%);
+    }
+    > menu {
+      position: absolute;
+      left: 50%;
+      top: 2.96rem;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 2.12rem;
+      > button {
+        padding: 0.4rem;
+        position: relative;
+        > img {
+          width: 3.17rem;
+          height: 3.17rem;
+          object-fit: contain;
+        }
+        > span {
+          display: block;
+          line-height: 1.37rem;
+          color: #F9F2E8;
+          font-size: 1.17rem;
+        }
+        .plus-one {
+          position: absolute;
+          top: 0;
+          right: 0;
+          transform: translate(50%, -50%);
+        }
       }
     }
   }
-}
-
-.collapsed {
-  transform: translateY(calc(100% - 3.5rem));
-  .arrow {
-    transform: translateX(-50%) rotate(180deg);
+  .special-bar-wrap {
+    .bg-image {
+      width: 100%;
+    }
   }
 }
 
+
+
+
+
 .bubble-enter {
   opacity: 0;
   top: 1rem !important;

src/router/index.js

@@ -70,6 +70,7 @@ const routes = [
     meta: {
       isShowBottomBar: true,
       canFullScreen: true,
+      isSpecialStyle: true,
     },
     children: [
       {