feat: 布局优化

src/views/Main/Map/components/LayerSwitch.vue

@@ -2,12 +2,26 @@
   <div class="layer-switch-box">
     <div class="layer-switch">
       <div class="btn">
-        <img class="icon" src="@/assets/map/layer.svg" alt="" @click="layerTreeChange" />
+        <img
+          class="icon"
+          src="@/assets/map/layer.svg"
+          alt=""
+          @click="layerTreeChange"
+        />
       </div>
       <div class="slider-line"></div>
       <div class="btn">
-        <el-tooltip effect="dark" :content="is3DScene ? '三维模式' : '二维模式'" placement="right">
+        <el-tooltip
-          <img class="icon" src="@/assets/map/changeScene.svg" alt="" @click="handleChangeMode" />
+          effect="dark"
+          :content="is3DScene ? '三维模式' : '二维模式'"
+          placement="right"
+        >
+          <img
+            class="icon"
+            src="@/assets/map/changeScene.svg"
+            alt=""
+            @click="handleChangeMode"
+          />
         </el-tooltip>
       </div>
     </div>
@@ -34,7 +48,7 @@ function handleChangeMode() {
     () => {
       console.log("移动结束 >>>>> ");
     },
-    1,
+    1
   );
 }
 
@@ -46,9 +60,9 @@ function layerTreeChange() {
 
 <style lang="scss" scoped>
 .layer-switch-box {
-  position: fixed;
+  // position: fixed;
-  top: 24px;
+  // top: 24px;
-  right: 510px;
+  // right: 510px;
   border-radius: 4px;
   background-color: #fff;
 }

src/views/Main/Map/components/Legend.vue

@@ -73,9 +73,9 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .legend-box {
-  position: fixed;
+  // position: fixed;
-  bottom: 24px;
+  // bottom: 24px;
-  right: 510px;
+  // right: 510px;
   padding: 12px 0 12px 12px;
   overflow-y: auto;
   border-radius: 4px;

src/views/Main/index.vue

@@ -8,7 +8,7 @@
     <RegionSelect />
   </LeftPanel>
   <RightPanel>
-    <div>
+    <div class="right-panel-left">
       <div class="top">
         <MapLayerSwitch @showChange="layerTreeChange"></MapLayerSwitch>
       </div>
@@ -76,4 +76,11 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+.right-panel-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+</style>