右侧菜单、比例尺

src/assets/styles/element-ui.scss

@@ -555,19 +555,19 @@
     border: none !important;
     border-radius: 0;
     position: relative;
-    padding: 4px 24px !important;
+    padding: 4px 8px !important;
     .el-select__placeholder {
       color: #edfaff;
-      font-size: 38px;
-      height: 80px;
-      line-height: 80px;
+      font-size: 14px;
+      height: 24px;
+      line-height: 24px;
       text-align: right;
     }
     .el-select__suffix {
       position: relative;
       .el-icon {
-        width: 33px;
-        height: 15px;
+        width: 13px;
+        height: 6px;
         background: url('@/assets/images/map/rightMenu/down2.png') no-repeat;
         background-size: 100% 100%;
         display: inline;
@@ -610,6 +610,8 @@
 }
 
 .custom-input {
+  height: 24px;
+  line-height: 24px;
   position: relative;
   .el-input__icon {
     font-size: 14px;
@@ -636,8 +638,8 @@
     top: 0;
     left: 0;
     z-index: 2;
-    width: 6px;
-    height: 6px;
+    width: 4px;
+    height: 4px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -647,8 +649,8 @@
     right: 0;
     bottom: 0;
     z-index: 2;
-    width: 6px;
-    height: 6px;
+    width: 4px;
+    height: 4px;
     background: url('@/assets/images/inputIcon2.png') no-repeat;
     background-size: 100% 100%;
   }

src/components/Map/index.vue

@@ -477,10 +477,10 @@ onUnmounted(() => {
   height: 100%;
   .zoom-text {
     position: absolute;
-    bottom: 120px;
-    right: 170px;
+    bottom: 52px;
+    right: 80px;
     color: #eaf3fc;
-    font-size: 25.73px;
+    font-size: 14px;
   }
   .right-tool {
     position: absolute;
@@ -508,8 +508,8 @@ onUnmounted(() => {
   :deep(.amap-scalecontrol) {
     left: unset !important;
     background-color: unset !important;
-    right: 56px;
-    bottom: 17px !important;
+    right: 62px;
+    bottom: 55px !important;
   }
   :deep(.amap-scale-text) {
     text-align: left !important;

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -17,7 +17,7 @@
     </div>
     <div class="box2">
       <div class="box-left">
-        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" style="width: 600px" @input="initData">
+        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" style="width: 220px" @input="initData">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
@@ -115,11 +115,12 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1584px;
-  height: 2066px;
+  width: 588px;
+  height: 767px;
   background: url('@/assets/images/map/rightMenu/potentialFloodHazard/dialog.png') no-repeat;
-  padding: 130px 30px 20px 40px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
   .box1 {
@@ -127,42 +128,44 @@ onMounted(() => {
     justify-content: space-between;
     align-items: flex-end;
     .title-box {
-      width: 370px;
-      height: 35px;
+      width: 137px;
+      height: 20px;
       background-image: url('@/assets/images/map/rightMenu/rainMonitor/titleBox.png');
+      background-size: 137px 13px;
       background-repeat: no-repeat;
       background-position: bottom left;
-      font-size: 44px;
+      font-size: 16px;
       color: #fff;
-      padding-left: 50px;
+      padding-left: 20px;
       display: flex;
       align-items: center;
       margin-bottom: 30px;
     }
     .date-box {
-      width: 672px;
-      height: 144px;
+      width: 243px;
+      height: 52px;
       background: url('@/assets/images/map/rightMenu/potentialFloodHazard/dateBox.png') no-repeat;
+      background-size: 100% 100%;
       display: flex;
       align-items: center;
-      padding-left: 200px;
+      padding-left: 60px;
       .text-box {
         display: flex;
         align-content: center;
-        padding-left: 15px;
+        padding-left: 10px;
       }
       .text1 {
-        font-size: 36px;
+        font-size: 14px;
       }
       .text2 {
-        font-size: 40px;
+        font-size: 16px;
         color: transparent;
         background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
         -webkit-background-clip: text;
         background-clip: text;
         display: inline-block;
         font-family: BEBAS-1;
-        margin: 0 15px;
+        margin: 0 5px;
       }
     }
   }
@@ -170,12 +173,14 @@ onMounted(() => {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
+    margin-top: -5px;
     .box-left {
       display: flex;
       .btn {
-        width: 140px;
-        height: 56px;
+        width: 59px;
+        height: 23px;
         background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+        background-size: 100% 100%;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -184,8 +189,8 @@ onMounted(() => {
       }
     }
     .btn2 {
-      width: 300px;
-      height: 120px;
+      width: 111px;
+      height: 45px;
       background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn2.png') no-repeat;
       display: flex;
       justify-content: center;
@@ -193,11 +198,12 @@ onMounted(() => {
       cursor: pointer;
       margin-left: 20px;
       color: #edfaff;
-      font-size: 32px;
+      font-size: 12px;
       .video-icon {
-        width: 41px;
-        height: 38px;
+        width: 22px;
+        height: 22px;
         background: url('@/assets/images/map/rightMenu/potentialFloodHazard/video.png') no-repeat;
+        background-size: 100% 100%;
         display: flex;
       }
     }
@@ -205,16 +211,16 @@ onMounted(() => {
 }
 .custom-table {
   .table-header {
-    width: 1490px;
-    height: 88px;
+    width: 557px;
+    height: 32px;
     background: url('@/assets/images/map/rightMenu/potentialFloodHazard/header.png') no-repeat;
     display: flex;
     align-items: center;
-    padding: 0 30px;
+    padding: 0 12px;
   }
   .td {
     &:nth-child(1) {
-      width: 260px;
+      width: 100px;
     }
     &:nth-child(2) {
       flex: 5;
@@ -224,17 +230,17 @@ onMounted(() => {
     }
   }
   .table-content {
-    height: 1530px;
+    height: 540px;
     overflow-y: auto;
     .tr {
-      width: 1490px;
-      height: 88px;
+      width: 557px;
+      height: 32px;
       background: url('@/assets/images/map/rightMenu/potentialFloodHazard/tr.png') no-repeat;
       background-size: 100% 100%;
       display: flex;
       align-items: center;
       margin-top: 8px;
-      padding: 0 30px;
+      padding: 0 12px;
       cursor: default;
       &:hover {
         background: url('@/assets/images/map/rightMenu/potentialFloodHazard/trActive.png') no-repeat;
@@ -249,18 +255,20 @@ onMounted(() => {
         color: #00d0ee;
         display: flex;
         .video-icon {
-          width: 54px;
-          height: 54px;
+          width: 26px;
+          height: 26px;
           background: url('@/assets/images/map/rightMenu/potentialFloodHazard/icon1.png') no-repeat;
+          background-size: 100% 100%;
+          margin-right: 4px;
         }
       }
     }
   }
 }
 .title {
-  font-size: 60px;
+  font-size: 24px;
   position: absolute;
-  top: 30px;
-  left: 160px;
+  top: 12px;
+  left: 55px;
 }
 </style>

src/views/globalMap/RightMenu/index.vue

@@ -213,23 +213,23 @@ defineExpose({ handleMenu, clickContractMenu, updateMenu, getMenuState });
 .menu-container {
   display: flex;
   .menu-list-right {
-    margin-right: -115px;
+    margin-right: -39px;
   }
   .menu-list {
     position: relative;
     max-height: 1176px;
     overflow: hidden;
     .menu-item {
-      width: 470px;
-      height: 168px;
-      font-size: 32px;
-      padding: 30px 18px 10px 40px;
+      width: 167px;
+      height: 46px;
+      font-size: 17px;
+      padding: 0px 2px 0px 14px;
       cursor: pointer;
       display: flex;
       align-items: center;
       background: url('@/assets/images/map/rightMenu/box.png') no-repeat;
       .text {
-        font-size: 48px;
+        font-size: 18px;
       }
       &:hover {
         background: url('@/assets/images/map/rightMenu/box_checked.png') no-repeat;
@@ -243,22 +243,24 @@ defineExpose({ handleMenu, clickContractMenu, updateMenu, getMenuState });
   .right-btn {
     position: absolute;
     top: 50%;
-    right: -80px;
+    right: 120px;
     transform: translateY(-50%);
     z-index: 2;
   }
   .right-btn {
-    width: 177px;
-    height: 151px;
+    width: 63px;
+    height: 55px;
     cursor: pointer;
     background: url('@/assets/images/map/rightMenu/right.png') no-repeat;
+    background-size: 100% 100%;
     cursor: pointer;
   }
   .left-btn {
-    right: 20px;
-    width: 125px;
-    height: 151px;
+    right: 0;
+    width: 63px;
+    height: 55px;
     background: url('@/assets/images/map/rightMenu/left.png') no-repeat;
+    background-size: 100% 100%;
     cursor: pointer;
   }
   .btn-box {
@@ -266,36 +268,42 @@ defineExpose({ handleMenu, clickContractMenu, updateMenu, getMenuState });
     display: flex;
     margin-left: 45px;
     .up-btn {
-      width: 151px;
-      height: 178px;
+      width: 38px;
+      height: 45px;
       background: url('@/assets/images/map/rightMenu/up.png') no-repeat;
+      background-size: 100% 100%;
       cursor: pointer;
     }
     .down-btn {
-      height: 177px;
-      width: 151px;
+      height: 38px;
+      width: 45px;
       background: url('@/assets/images/map/rightMenu/down.png') no-repeat;
+      background-size: 100% 100%;
       cursor: pointer;
     }
   }
 }
 .icon1 {
-  width: 99px;
-  height: 92px;
+  width: 32px;
+  height: 30px;
   background: url('@/assets/images/map/rightMenu/icon2.png') no-repeat;
+  background-size: 100% 100%;
   cursor: pointer;
 }
 .icon1_checked {
   background: url('@/assets/images/map/rightMenu/icon2_checked.png') no-repeat;
+  background-size: 100% 100%;
 }
 .icon2 {
-  width: 99px;
-  height: 92px;
+  width: 32px;
+  height: 30px;
   background: url('@/assets/images/map/rightMenu/icon2.png') no-repeat;
+  background-size: 100% 100%;
   cursor: pointer;
 }
 .icon2_checked {
   background: url('@/assets/images/map/rightMenu/icon2_checked.png') no-repeat;
+  background-size: 100% 100%;
 }
 .icon3 {
   width: 92px;