移动端 导览栏样式；两个端 各种情况下菜单、导览栏的上移

src/views/gui/guide.vue

@@ -70,6 +70,9 @@ export default {
     &.playing {
       bottom: 0;
     }
+    &.open.playing {
+      height: 180px;
+    }
     .frame-container {
       background-color: transparent;
       button.collapse {
@@ -108,6 +111,52 @@ export default {
     }
   }
 }
+
+
+.mobile {
+  #drawer-container {
+    #drawer {
+      &.open {
+        height: 138px;
+      }
+      &.playing {
+      }
+      &.open.playing {
+        height: 160px;
+      }
+      .frame-container {
+        button.collapse {
+          top: 5px;
+          left: 7px;
+          width: 47px;
+          height: 19px;
+          > img {
+          }
+        }
+        #scrollFrame.frame {
+          height: 138px;
+          margin-left: initial;
+          margin-right: initial;
+          padding-top: 26px;
+          width: 100%;
+          border-radius: 10px;
+          ul#thumb-container {
+            border-radius: 10px;
+            padding: 9px 8px;
+            li.thumbImg {
+              // 在这里写也没用
+            }
+          }
+        }
+        #scroller {
+          .handle {
+
+          }
+        }
+      }
+    }
+  }
+}
 </style>
 
 <style lang="less">
@@ -127,6 +176,7 @@ export default {
 #thumb-container .thumbImg img {
   box-sizing: border-box;
   border: none;
+  height: 100%;
   width: 100%;
   object-fit: cover;
 }
@@ -147,6 +197,7 @@ export default {
   top: initial;
   bottom: 0;
   height: 30px;
+  width: 100%;
   line-height: 30px;
   transform: initial;
   color: #fff;
@@ -155,4 +206,36 @@ export default {
 // 选中后
 .frame .slidee li.thumbImg.active>.overlay {
 }
+
+.mobile {
+  // 每个item
+  #thumb-container .thumbImg {
+    width: 145px;
+    height: 94px;
+    margin-right: 6px;
+  }
+  // 选中后
+  .frame .slidee li.thumbImg.active {
+  }
+
+  // 场景封面图
+  // 平时
+  #thumb-container .thumbImg img {
+  }
+  // hover时
+  .frame .slidee li.thumbImg.hasHover>img:hover {
+  }
+  // 选中后
+  .frame .slidee li.thumbImg.active>img {
+  }
+
+  // 场景名称
+  // 平时
+  .frame .slidee li .overlay {
+    font-size: 12px;
+  }
+  // 选中后
+  .frame .slidee li.thumbImg.active>.overlay {
+  }
+}
 </style>

src/views/gui/menu.vue

@@ -480,6 +480,15 @@ export default {
 // ----------左下方菜单--------------
 .pinBottom.left {
   bottom: 30px;
+  &.playing {
+    bottom: 50px !important;
+  }
+  &.open {
+    bottom: 170px !important;
+  }
+  &.open.playing {
+    bottom: 190px !important
+  }
   > div {
     > .viewContainer {
       flex-direction: row;
@@ -523,6 +532,15 @@ export default {
 // ----------右下方菜单---------------
 .pinBottom.right {
   bottom: 30px;
+  &.playing {
+    bottom: 50px !important;
+  }
+  &.open {
+    bottom: 170px !important;
+  }
+  &.open.playing {
+    bottom: 190px !important
+  }
   .rightViewContainer {
     display: flex !important;
     align-items: center !important;
@@ -560,6 +578,15 @@ export default {
   .pinBottom.left {
     left: 0;
     bottom: 0;
+    &.playing {
+      bottom: 20px !important;
+    }
+    &.open {
+      bottom: 158px !important;
+    }
+    &.open.playing {
+      bottom: 178px !important
+    }
     > div {
       > .viewContainer {
         flex-direction: column;