场景列表样式适配

src/components/BottomBar.vue

@@ -5,7 +5,7 @@
     class="bottom-bar"
     :style="{
       zIndex: $globalConfig.zIndex.bottomBar.self,
-      bottom: isHigher ? '500px' : '',
+      bottom: isHigher ? 'calc(183px + 30px)' : '',
     }"
   >
     <div

src/views/SwkkView.vue

@@ -12,7 +12,7 @@
 
     <menu
       :style="{
-        bottom: isShowTourGuide ? '300px' : '',
+        bottom: isShowTourGuide ? 'calc(183px + 30px)' : '',
       }"
     >
       <button
@@ -141,6 +141,7 @@
             alt=""
             draggable="false"
           >
+          <div class="mask" />
           <div
             v-show="isAutoMoving && (curSceneIdx === index)"
             class="progress"
@@ -631,7 +632,7 @@ export default {
   }
 
   .tour-guide-wrap {
-    ::-webkit-scrollbar { width: 0; height: 0.25rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+    ::-webkit-scrollbar { width: 0; height: 10px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
     ::-webkit-scrollbar-track {
       background: #fff;
     }
@@ -639,9 +640,9 @@ export default {
     left: 0;
     bottom: 0;
     width: 100%;
-    height: 13.75rem;
-    background: rgba(216,178,117,0.6);
-    padding: 1.17rem 1.17rem 1.92rem 1.17rem;
+    background: rgba(133, 119, 69, 0.50);
+    backdrop-filter: blur(10px);
+    padding: 24px 46px;
     .tour-guide {
       display: flex;
       align-items: center;
@@ -654,38 +655,52 @@ export default {
           margin-right: initial;
         }
         flex: 0 0 auto;
-        width: 12.5rem;
-        height: 10.5rem;
+        width: 187px;
+        height: 135px;
         position: relative;
         > img {
           background: #D26868;
           width: 100%;
-          height: 7.5rem;
+          height: 100%;
           object-fit: cover;
         }
+        > .mask {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0,0,0,0.5);
+        }
         > .progress {
           position: absolute;
           left: 0;
-          top: 6.7rem;
-          height: 0.5rem;
+          bottom: 0;
+          height: 10px;
           background-color: #930909;
         }
         .title {
-          margin-top: 0.5rem;
-          text-align: center;
-          font-size: 1.25rem;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 16px;
           color: #FFFFFF;
           white-space: pre;
           word-break: break-all;
           overflow: hidden;
           text-overflow: ellipsis;
+          pointer-events: none;
         }
         &.active {
-          > img {
-            border: 0.33rem solid #930909;
+          > .mask {
+            border: 4px solid #A10E0C;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
           }
           .title {
-            color: #930909;
+            top: initial;
+            bottom: 12px;
+            transform: translateX(-50%);
           }
         }
       }