feat: 样式优化

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

@@ -14,7 +14,7 @@
         <el-tooltip
           effect="dark"
           :content="is3DScene ? '三维模式' : '二维模式'"
-          placement="right"
+          placement="bottom"
         >
           <img
             class="icon"
@@ -37,7 +37,7 @@ defineOptions({
 });
 let is3DScene = ref(true);
 let showTreeBox = ref(false);
-const emits = defineEmits(["layerTreeChange"]);
+const emits = defineEmits(["layerTreeChange", "showChange"]);
 function handleChangeMode() {
   is3DScene.value = !is3DScene.value;
   const mapSceneType = !is3DScene.value ? 2 : 3;
@@ -69,14 +69,18 @@ function layerTreeChange() {
 .layer-switch {
   display: flex;
   width: 100%;
-  height: 37px;
+  height: 36px;
   align-items: center;
   justify-content: center;
   .btn {
-    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 12px;
+    cursor: pointer;
     .icon {
-      width: 17px;
+      width: 16px;
-      height: 17px;
+      height: 16px;
     }
   }
   .slider-line {

src/views/Main/MapSearch/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="map-search">
+    <span class="map-search-icon">
+      <iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon>
+    </span>
+    <el-input
+      class="map-search-input"
+      placeholder="输入水库名称、水库编码"
+    ></el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {} from "element-plus/";
+defineOptions({
+  name: "MapSearch",
+});
+</script>
+
+<style scoped lang="less">
+.map-search {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 36px;
+  border-radius: 4px;
+  overflow: hidden;
+  .map-search-icon {
+    background: #36b29e;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+  }
+
+  :deep(.map-search-input) {
+    width: 204px;
+    background: rgba(255, 255, 255, 0.8);
+    color: rgba(0, 0, 0, 0.9);
+    ::-webkit-input-placeholder {
+      color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}
+</style>

src/views/Main/index.vue

@@ -10,6 +10,7 @@
   <RightPanel>
     <div class="right-panel-left">
       <div class="top">
+        <MapSearch />
         <MapLayerSwitch @showChange="layerTreeChange"></MapLayerSwitch>
       </div>
       <div class="bottom">
@@ -39,6 +40,7 @@ import MapLayerSwitch from "./Map/components/LayerSwitch.vue";
 import LayerTree from "./Map/components/LayerTree.vue";
 import Map from "./Map/index.vue";
 import RegionSelect from "../RegionSelect/index.vue";
+import MapSearch from "./MapSearch/index.vue";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 defineOptions({
   name: "main",
@@ -82,5 +84,12 @@ onBeforeUnmount(() => {
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
+  .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+  }
 }
 </style>