From 768dfd31b00880f815bc3c0e27deb8714933e1fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B1=E4=BC=9F=E6=B4=8B?= <qiuweiyang@datametatech.com>
Date: Thu, 13 Mar 2025 09:22:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Main/Map/components/LayerSwitch.vue | 28 ++++++++++++++-----
 src/views/Main/Map/components/Legend.vue      |  6 ++--
 src/views/Main/index.vue                      | 11 ++++++--
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/views/Main/Map/components/LayerSwitch.vue b/src/views/Main/Map/components/LayerSwitch.vue
index fcbefeb..028a138 100644
--- a/src/views/Main/Map/components/LayerSwitch.vue
+++ b/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">
-          <img class="icon" src="@/assets/map/changeScene.svg" alt="" @click="handleChangeMode" />
+        <el-tooltip
+          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;
-  top: 24px;
-  right: 510px;
+  // position: fixed;
+  // top: 24px;
+  // right: 510px;
   border-radius: 4px;
   background-color: #fff;
 }
diff --git a/src/views/Main/Map/components/Legend.vue b/src/views/Main/Map/components/Legend.vue
index 3665921..591064a 100644
--- a/src/views/Main/Map/components/Legend.vue
+++ b/src/views/Main/Map/components/Legend.vue
@@ -73,9 +73,9 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .legend-box {
-  position: fixed;
-  bottom: 24px;
-  right: 510px;
+  // position: fixed;
+  // bottom: 24px;
+  // right: 510px;
   padding: 12px 0 12px 12px;
   overflow-y: auto;
   border-radius: 4px;
diff --git a/src/views/Main/index.vue b/src/views/Main/index.vue
index 15c02b8..4c603e4 100644
--- a/src/views/Main/index.vue
+++ b/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>