空间分析

src/views/globalMap/RightMenu/DrawTools.vue

@@ -4,7 +4,7 @@
       <div class="item-label">画笔选择</div>
       <i class="color-box" :style="{ backgroundColor: colorList[drawerColorIndex]?.value }" />
       <!--弹窗选择器-->
-      <div v-show="showColorSelect" ref="selectBoxRef" class="select-box" style="top: -242px; padding-bottom: 20px">
+      <div v-show="showColorSelect" ref="selectBoxRef" class="select-box" style="top: -123px; padding-bottom: 20px">
         <div class="box-content">
           <div
             v-for="(item, index) in colorList"
@@ -21,7 +21,7 @@
     <div class="draw-item" @mouseover="showDrawTypeSelect = true" @mouseleave="showDrawTypeSelect = false">
       <div class="item-label">框面类型</div>
       <!--弹窗选择器-->
-      <div v-show="showDrawTypeSelect" ref="selectBoxRef2" class="select-box" style="top: -127px; padding-bottom: 20px">
+      <div v-show="showDrawTypeSelect" ref="selectBoxRef2" class="select-box" style="top: -64px; padding-bottom: 20px">
         <div class="box-content">
           <div
             v-for="(item, index) in drawTypeList"
@@ -37,7 +37,7 @@
     <div class="draw-item" @mouseover="showGraphicsTypeSelect = true" @mouseleave="showGraphicsTypeSelect = false">
       <div class="item-label">图像类型</div>
       <!--弹窗选择器-151-->
-      <div v-show="showGraphicsTypeSelect" ref="selectBoxRef2" class="select-box" style="top: -184.5px; padding-bottom: 20px">
+      <div v-show="showGraphicsTypeSelect" ref="selectBoxRef2" class="select-box" style="top: -91px; padding-bottom: 20px">
         <div class="box-content">
           <div
             v-for="(item, index) in graphicsTypeList"
@@ -345,14 +345,14 @@ const analysisSpatial = (data) => {
 <style lang="scss" scoped>
 .draw-tools-container {
   position: absolute;
-  right: 250px;
-  bottom: 460px;
+  right: 65px;
+  bottom: 177px;
   background-color: #304468;
   border-radius: 5px;
   display: flex;
   color: #fff;
-  font-size: 36px;
-  padding: 10px 0;
+  font-size: 14px;
+  padding: 8px 0;
   .draw-item {
     display: flex;
     align-items: center;
@@ -378,7 +378,7 @@ const analysisSpatial = (data) => {
         display: flex;
         align-items: center;
         cursor: pointer;
-        padding: 5px 10px;
+        padding: 4px 10px;
         &:hover {
           background-color: rgba(22, 73, 142, 0.5);
         }

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-content">
-    <div class="gradient-text title">空间分析</div>
+    <div class="gradient-text common-dialog-title">空间分析</div>
     <div class="analyze-data-container">
       <div class="item">
         <div class="item-label">行政镇(个)</div>
@@ -113,31 +113,24 @@ watch(
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
-  color: #000000;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
+  color: #ffffff;
 }
 .analyze-data-container {
   width: 100%;
   font-size: 16px;
-  padding: 15px;
+  padding: 10px 0;
   display: flex;
   flex-wrap: wrap;
-  margin-top: 20px;
   .item {
-    //width: calc(33.333333%);
-    width: 342px;
-    height: 160px;
+    width: 130px;
+    height: 60px;
     background: url('@/assets/images/map/rightMenu/ironTower/boxBg.png') no-repeat;
     background-size: 100% 100%;
     color: #fff;
@@ -145,23 +138,24 @@ watch(
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 38px;
-    margin-right: 47px;
+    font-size: 14px;
+    margin-right: 9px;
     &:nth-child(4) {
       margin-right: 0;
     }
     &:nth-child(5) {
-      margin-top: 20px;
+      margin-top: 10px;
     }
     .item-label {
-      margin-bottom: 18px;
+      margin-bottom: 5px;
     }
   }
 }
 .item2 {
   background-color: #fff;
-  font-size: 36px;
-  padding: 10px 20px;
-  margin-right: 20px;
+  font-size: 14px;
+  padding: 5px 10px;
+  margin-right: 10px;
+  color: #000000;
 }
 </style>