按钮图片更换，按钮和场景栏样式优化

src/views/gui/guide.vue

@@ -5,17 +5,6 @@
       class="fullWidth"
     >
       <div class="frame-container darkGlass">
-        <button
-          class="collapse"
-          @click="onClickCollapse"
-        >
-          <img
-            class=""
-            src="@/assets/images/collapse.png"
-            alt=""
-            draggable="false"
-          >
-        </button>
         <!-- 场景列表 -->
         <div
           id="scrollFrame"
@@ -54,188 +43,6 @@ export default {
   props: {
   },
   methods: {
-    onClickCollapse() {
-      window.toggleSceneGuide()
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-#drawer-container {
-  #drawer {
-    font-size: 16px;
-    &.open {
-      height: 160px;
-    }
-    &.playing {
-      bottom: 0;
-    }
-    &.open.playing {
-      height: 180px;
-    }
-    .frame-container {
-      background-color: transparent;
-      button.collapse {
-        position: absolute;
-        top: 5px;
-        left: 45px;
-        width: 78px;
-        height: 32px;
-        z-index:1;
-        > img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      #scrollFrame.frame {
-        margin-left: 28px;
-        margin-right: 28px;
-        width: calc(100% - 28px * 2);
-        height: 152px;
-        background: rgba(235, 224, 214, 0.68);
-        border-radius: 20px;
-        padding-top: 35px;
-        ul#thumb-container {
-          border-radius: 20px;
-          padding: 10px 20px;
-          li.thumbImg {
-            // 在这里写也没用
-          }
-        }
-      }
-      #scroller {
-        .handle {
-
-        }
-      }
-    }
-  }
-}
-
-
-.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">
-// 每个item
-#thumb-container .thumbImg {
-  overflow: hidden;
-  border-radius: 10px;
-  height: 97px;
-}
-// 选中后
-.frame .slidee li.thumbImg.active {
-  border: 3px solid #A10E0C !important;
-}
-
-// 场景封面图
-// 平时
-#thumb-container .thumbImg img {
-  box-sizing: border-box;
-  border: none;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-// hover时
-.frame .slidee li.thumbImg.hasHover>img:hover {
-}
-// 选中后
-.frame .slidee li.thumbImg.active>img {
-}
-
-// 场景名称
-// 平时
-.frame .slidee li .overlay {
-  font-size: 16px;
-  font-family: DFLiShuW7;
-  box-sizing: border-box;
-  left: 0;
-  top: initial;
-  bottom: 0;
-  height: 30px;
-  width: 100%;
-  line-height: 30px;
-  transform: initial;
-  color: #fff;
-  background: linear-gradient(180deg, rgba(87, 36, 25, 0) 0%, rgba(87, 36, 25, 1) 50%);
-}
-// 选中后
-.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>
+</script>

src/views/gui/menu.vue

@@ -23,6 +23,7 @@
                 title=""
                 :src="require('@/assets/images/play.png')"
                 data-original-title="播放"
+                draggable="false"
               />
             </a>
           </div> -->
@@ -31,13 +32,13 @@
             class="ui-icon"
             rel="tooltip"
             data-original-title="播放"
-            @click="onClickPlay"
           >
             <!-- 鼠标移入的显示 -->
             <!-- <div class="hoverTit">自动导览</div> -->
             <a>
               <img
-                :src="require('@/assets/images/auto-roaming.png')"
+                :src="require('@/assets/images/auto-roaming-paused.png')"
+                draggable="false"
               >
             </a>
           </div>
@@ -52,8 +53,9 @@
               <img
                 rel="tooltip"
                 title=""
-                :src="require('@/assets/images/auto-roaming-paused.png')"
+                :src="require('@/assets/images/auto-roaming.png')"
                 data-original-title="暂停"
+                draggable="false"
               >
             </a>
           </div>
@@ -64,6 +66,7 @@
           >
             <a>
               <i
+                draggable="false"
                 rel="tooltip"
                 title=""
                 class="icon icon-dpad-right"
@@ -84,12 +87,18 @@
               <!-- 鼠标移入的显示 -->
               <!-- <div class="hoverTit">导览列表</div> -->
               <img
+                v-if="isGuide"
+                draggable="false"
                 title=""
                 class="icon icon-inside"
                 src="@/assets/images/scenes-guide.png"
-                :style="{
-                  opacity: isGuide ? '1' : '',
-                }"
+              >
+              <img
+                v-if="!isGuide"
+                draggable="false"
+                title=""
+                class="icon icon-inside"
+                src="@/assets/images/scenes-guide-paused.png"
               >
             </div>
 
@@ -101,9 +110,15 @@
               <!-- 鼠标移入的显示 -->
               <!-- <div class="hoverTit">自由漫游</div> -->
               <img
-                class="icon icon-inside"
+                draggable="false"
+                class="icon icon-inside active"
                 :src="require('@/assets/images/inside.png')"
               >
+              <img
+                draggable="false"
+                class="icon icon-inside inactive"
+                :src="require('@/assets/images/inside-inactive.png')"
+              >
             </div>
             <div
               id="gui-modes-dollhouse"
@@ -114,9 +129,15 @@
               <!-- 鼠标移入的显示 -->
               <!-- <div class="hoverTit">三维视觉</div> -->
               <img
-                class="icon icon-inside"
+                draggable="false"
+                class="icon icon-inside active"
                 :src="require('@/assets/images/dollhouse.png')"
               >
+              <img
+                draggable="false"
+                class="icon icon-inside inactive"
+                :src="require('@/assets/images/dollhouse-inactive.png')"
+              >
             </div>
             <div
               id="gui-modes-floorplan"
@@ -127,9 +148,15 @@
               <!-- 鼠标移入的显示 -->
               <!-- <div class="hoverTit">平面视觉</div> -->
               <img
-                class="icon icon-inside"
+                draggable="false"
+                class="icon icon-inside active"
                 :src="require('@/assets/images/floor.png')"
               >
+              <img
+                draggable="false"
+                class="icon icon-inside inactive"
+                :src="require('@/assets/images/floor-inactive.png')"
+              >
             </div>
             <!-- <div
               data-original-title="VR"
@@ -139,6 +166,7 @@
               style="display: none"
             >
               <img
+                draggable="false"
                 class="icon icon-inside"
                 :src="require('@/assets/images/VR.png')"
               />
@@ -152,6 +180,7 @@
               title=""
             >
               <img
+                draggable="false"
                 class="icon icon-inside"
                 :src="require('@/assets/images/hotlist.png')"
               >
@@ -164,6 +193,7 @@
               style="display: none; float: left"
             >
               <img
+                draggable="false"
                 class="icon icon-inside"
                 :src="require('@/assets/images/face.jpg')"
               />
@@ -175,7 +205,7 @@
 
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
-        <div
+        <!-- <div
           v-if="!isMobile"
           class="ui-icon my-floor"
           :class="{
@@ -222,9 +252,9 @@
               draggable="false"
             >
           </a>
-        </div>
+        </div> -->
 
-        <div
+        <!-- <div
           v-if="isMobile"
           class="floor-selector-wrap"
           :class="{
@@ -288,7 +318,7 @@
               >
             </a>
           </div>
-        </div>
+        </div> -->
 
         <!-- 音乐 -->
         <div
@@ -329,6 +359,7 @@
             <img
               title="全屏"
               :src="require('@/assets/images/full.png')"
+              draggable="false"
             >
           </a>
         </div>
@@ -346,6 +377,7 @@
             <img
               title="关闭全屏"
               :src="require('@/assets/images/fullAc.png')"
+              draggable="false"
             >
           </a>
         </div>
@@ -432,9 +464,6 @@ export default {
       }
       this.isSelectingFloor = !this.isSelectingFloor
     },
-    onClickPlay() {
-      console.log('sadfsfdsdfsdfgdfg')
-    }
   },
 }
 </script>
@@ -495,8 +524,8 @@ export default {
 // }
 // -------end of tooltip相关--------------
 
-@width: 99px;
-@height: 125px;
+@button-size: 47px;
+@margin-right: 15px;
 // ----------左下方菜单--------------
 .pinBottom.left {
   bottom: 30px;
@@ -512,13 +541,13 @@ export default {
   > div {
     > .viewContainer {
       flex-direction: row;
-      margin-left: 50px;
+      margin-left: 30px;
       padding: 0;
       #play,
       #pause {
-        margin-right: 30px;
-        width: 99px;
-        height: 125px;
+        margin-right: @margin-right;
+        width: @button-size;
+        height: @button-size;
         padding: 0;
         img {
           height: 100%;
@@ -527,20 +556,66 @@ export default {
       }
       #gui-modes-map {
         > div {
-          margin-right: 30px;
-          width: @width;
-          height: @height;
+          margin-right: @margin-right;
+          width: @button-size;
+          height: @button-size;
           padding: 0;
           > img {
             height: 100%;
             width: 100%;
-            opacity: 0.7;
+          }
+        }
+        > #pullTab {
+          > img {
             display: block !important;
           }
-          &.active {
-            > img {
-              opacity: 1;
-            }
+        }
+        > #gui-modes-inside {
+          > img.active {
+            display: none;
+          }
+          > img.inactive {
+            display: block;
+          }
+        }
+        > #gui-modes-dollhouse {
+          > img.active {
+            display: none;
+          }
+          > img.inactive {
+            display: block;
+          }
+        }
+        > #gui-modes-floorplan {
+          > img.active {
+            display: none;
+          }
+          > img.inactive {
+            display: block;
+          }
+        }
+        > #gui-modes-inside.active {
+          > img.active {
+            display: block;
+          }
+          > img.inactive {
+            display: none;
+          }
+        }
+        > #gui-modes-dollhouse.active {
+          > img.active {
+            display: block;
+          }
+          > img.inactive {
+            display: none;
+          }
+        }
+        > #gui-modes-floorplan.active {
+          > img.active {
+            display: block;
+          }
+          > img.inactive {
+            display: none;
           }
         }
       }
@@ -551,7 +626,6 @@ export default {
 
 // ----------右下方菜单---------------
 .pinBottom.right {
-  bottom: 30px;
   &.playing {
     bottom: 50px !important;
   }
@@ -564,12 +638,11 @@ export default {
   .rightViewContainer {
     display: flex !important;
     align-items: center !important;
-    margin-right: 54px;
-    padding-bottom: 20px;
+    margin-right: 30px;
     .ui-icon {
-      width: 88px;
-      height: 91px;
-      margin-left: 30px;
+      width: 47px;
+      height: 47px;
+      margin-left: 15px;
       margin-right: initial;
       background: none;
       border: none;