首页图例显示异常BUG修复

src/views/HomeView.vue

@@ -19,7 +19,7 @@
           type: 'card',
           title: '历年频发问题Top10',
           titleWidth: 85,
-          boxWidth: '400',
+          boxWidth: '400'
         }"
       >
         <template slot="top"><TopCard :dataSize="10" /></template>
@@ -29,11 +29,7 @@
           <!-- <h2>浦东新区</h2> -->
           <div class="droplet-box-title">浦东新区</div>
           <div class="droplet-box">
-            <div
-              class="droplet-box-item"
-              v-for="item in townCollection"
-              :key="item.name"
-            >
+            <div class="droplet-box-item" v-for="item in townCollection" :key="item.name">
               <div class="problem-num">{{ item.num }} 个</div>
               <div class="problem-img"></div>
               <div class="problem-title">{{ item.name }}</div>
@@ -130,21 +126,14 @@
           type: 'chart',
           title: '图例',
           boxWidth: '150',
-          boxHeight: '180',
+          boxHeight: '180'
         }"
         ><div class="legend-container">
           <div class="left-container">
-            <div
-              class="legend-icon"
-              v-for="(item, index) in legendData"
-              :key="index"
-              :style="{ background: item }"
-            ></div>
+            <div class="legend-icon" v-for="(item, index) in legendData" :key="index" :style="{ background: item }"></div>
           </div>
           <div class="right-container">
-            <div class="lengend-title" v-for="item in buttonData" :key="item">
-              {{ item }} 类
-            </div>
+            <div class="lengend-title" v-for="item in buttonData" :key="item">{{ item }} 类</div>
           </div>
         </div>
       </MenuCard>
@@ -157,8 +146,7 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[1]" v-if="$ifMenu('1', '')">
         <template slot="top">
@@ -168,8 +156,7 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年审计项目变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[2]" v-if="$ifMenu('1', '')">
         <template slot="top">
@@ -182,8 +169,7 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年土地类问题变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '1')">
         <template slot="top">
@@ -199,13 +185,7 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import {
-  street,
-  streetLocation,
-  soilData,
-  waterData,
-  forestryData,
-} from "@/config/common";
+import { street, streetLocation, soilData, waterData, forestryData } from "@/config/common";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
 import TagTableCard from "@/components/common/TagTableCard";
@@ -222,7 +202,7 @@ export default {
     TagCard,
     ChartCard,
     TagTableCard,
-    TopCard,
+    TopCard
   },
   data() {
     return {
@@ -230,19 +210,19 @@ export default {
         type: "tb",
         title: "土地资源",
         value: 100,
-        unit: "公顷",
+        unit: "公顷"
       },
       tagCardData2: {
         type: "tb",
         title: "土地资源面积",
         value: 172,
-        unit: "公顷",
+        unit: "公顷"
       },
       tagCardData3: {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷",
+        unit: "公顷"
       },
       testTitle: "土地资源",
       activeIndex: 1,
@@ -257,7 +237,7 @@ export default {
             title: "基本农田被违规占用",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY1cq.png",
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY1cq.png"
           },
           {
             type: "imageMenu",
@@ -265,7 +245,7 @@ export default {
             title: "基本农田种林",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY3j0.png",
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY3j0.png"
           },
           {
             type: "imageMenu",
@@ -273,7 +253,7 @@ export default {
             title: "基本农田抛荒",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYl3n.png",
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYl3n.png"
           },
           {
             type: "imageMenu",
@@ -281,8 +261,8 @@ export default {
             title: "一般耕地被违规占用",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYQ9s.png",
-          },
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYQ9s.png"
+          }
         ],
         main: [
           {
@@ -290,16 +270,16 @@ export default {
             title: "浦东新区自然资源分布TOP10",
             boxWidth: "360",
             boxHeight: "370",
-            boxBackground: "rgba(0,39,77,0.6)",
-          },
+            boxBackground: "rgba(0,39,77,0.6)"
+          }
         ],
         right: [
           { type: "card", title: "资金投入情况", titleWidth: 64 },
           { type: "card", title: "资源环境项目", titleWidth: 64 },
           { type: "card", title: "历年频发问题TOP5", titleWidth: 81 },
           { type: "card", title: "土地类问题", titleWidth: 60 },
-          { type: "card", title: "土地类问题TOP5", titleWidth: 81 },
-        ],
+          { type: "card", title: "土地类问题TOP5", titleWidth: 81 }
+        ]
       },
       buttonData: ["A", "B", "C"],
       legendData: ["#E565FF", "#0055FF", "#00FFD5"],
@@ -307,17 +287,17 @@ export default {
       AData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       BData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       CData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
@@ -326,8 +306,8 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 },
-      ],
+        { name: "生态资源问题", num: 55 }
+      ]
     };
   },
   methods: {
@@ -363,7 +343,7 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    },
+    }
   },
   created() {
     // 目录
@@ -399,10 +379,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key],
+        label: street[key]
       });
     }
-  },
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -575,7 +555,7 @@ export default {
   .legend-line {
     position: absolute;
     left: 24px;
-    bottom: 211px;
+    bottom: 208px;
     width: 104px;
     height: 20px;
     background: url("../assets/home/legend_line.png") no-repeat center;
@@ -588,15 +568,18 @@ export default {
     color: #fff;
     z-index: 99999;
     .legend-container {
-      margin: 0 auto;
-      width: 104px;
-      height: 130px;
+      width: 100%;
+      height: 100%;
       position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       .left-container {
         width: 50%;
         height: 100%;
         position: absolute;
         left: 0;
+        top: 0;
         display: flex;
         flex-direction: column;
         justify-content: space-evenly;
@@ -613,6 +596,7 @@ export default {
         height: 100%;
         position: absolute;
         right: 0;
+        top: 0;
         display: flex;
         flex-direction: column;
         align-items: center;