违法用地首页左侧样式修改

src/views/sys/exception/Exception.vue

@@ -27,7 +27,7 @@
         @handlerChangePolygonType="handlerChangePolygonType"
         :style="{
           position: 'absolute',
-          top: '680px',
+          bottom: '-10px',
           left: '48px',
           height: '180px',
         }"
@@ -37,8 +37,8 @@
         @countyClick="countyClick"
         :style="{
           position: 'absolute',
-          bottom: '0px',
+          bottom: '-3px',
-          left: '280px',
+          left: '320px',
         }"
       />
     </div>

src/views/sys/exception/mapComponent/left_county.vue

@@ -2,8 +2,7 @@
   <div class="county">
     <div class="county_div">
       <img
-        id="left_direction_left"
+        :src="scrollImgLeft"
-        src="/statistical/left_direction_left1.png"
         :style="{
           position: 'relative',
           top: '42px',
@@ -21,6 +20,8 @@
             id="left_county_nochoose"
             src="/statistical/left_county_nochoose.png"
             :style="{
+              position: 'relative',
+              top: '-7px',
               marginLeft: '11.5px',
               marginRight: '11.5px',
             }"
@@ -37,8 +38,7 @@
         </div>
       </div>
       <img
-        id="left_direction_right"
+        :src="scrollImgRight"
-        src="/statistical/left_direction_right2.png"
         :style="{
           position: 'relative',
           top: '42px',
@@ -61,7 +61,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted, defineEmits } from 'vue';
+  import { ref, onMounted, defineEmits, watch } from 'vue';
   import { getChildrenTree } from '@/api/demo/system';
   import { message } from 'ant-design-vue';
 
@@ -70,6 +70,8 @@
 
   // 按键控制滚动条
   const countyList = ref<HTMLElement | null>(null);
+  const scrollImgLeft = ref('/statistical/left_direction_left1.png');
+  const scrollImgRight = ref('/statistical/left_direction_right2.png');
   const scrollToElement = async (type) => {
     if (countyList.value) {
       if (type == 'left') {
@@ -78,6 +80,16 @@
       if (type == 'right') {
         countyList.value.scrollLeft = countyList.value.scrollLeft + 110;
       }
+      if (countyList.value.scrollLeft == 0) {
+        scrollImgLeft.value = '/statistical/left_direction_left1.png';
+      } else {
+        scrollImgLeft.value = '/statistical/left_direction_left2.png';
+      }
+      if (countyList.value.scrollLeft > 7 * 110) {
+        scrollImgRight.value = '/statistical/left_direction_right1.png';
+      } else {
+        scrollImgRight.value = '/statistical/left_direction_right2.png';
+      }
     }
   };
 
@@ -124,7 +136,7 @@
 
       span {
         position: relative;
-        top: 35px;
+        top: 30px;
         width: 110px;
         display: inline-flex;
         align-items: center;