图例组件，下拉框组件样式修改

src/assets/global.css

@@ -55,3 +55,48 @@
 .el-icon-arrow-right:after {
   content: "";
 }
+
+/* 下拉框 */
+
+.el-select .el-input__inner:focus {
+  border: 1px solid rgba(47, 184, 255, 0.7);
+}
+
+.el-select .el-input__inner {
+  background: rgba(0, 39, 77, 1);
+  color: white;
+  font-size: 16px;
+  border: 1px solid rgba(47, 184, 255, 0.7);
+  border-radius: 2px;
+}
+
+.el-select-dropdown {
+  border: 1px solid rgba(47, 184, 255, 0.7);
+  border-radius: 2px;
+  color: #fff;
+  background-color: rgba(0, 39, 77, 0.8);
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  margin: 5px 0;
+}
+
+.el-select-dropdown__item {
+  font-size: 15px;
+  color: #fff;
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+  background-color: rgba(79, 172, 254, 0.4);
+  color:rgba(0, 242, 254, 1);
+}
+
+.el-select-dropdown__item.selected {
+  color:rgba(0, 242, 254, 1);
+}
+
+
+.el-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: rgba(47, 184, 255, 0.7);
+}
+.el-popper[x-placement^=bottom] .popper__arrow {
+  border-bottom-color: rgba(47, 184, 255, 0.7);
+}

src/components/map/Legend.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="legend">
+    <MenuCard
+      :menuData="{
+        type: 'chart',
+        title: '图例',
+        boxWidth: legendData.boxWidth,
+        boxHeight: legendData.boxHeight,
+        legendShowState: true,
+        menuIndex: legendData.menuIndex,
+        subMenuIndex: legendData.subMenuIndex ? legendData.subMenuIndex : '',
+      }"
+    >
+      <div class="legend-container">
+        <div
+          class="legend-container-left"
+          :style="{
+            width: legendData.leftWidth ? legendData.leftWidth : '50%',
+          }"
+        >
+          <div
+            class="legend-icon"
+            v-for="(item, index) in legendData.legendIcon"
+            :key="index"
+            :style="{ background: item.background, border: item.border }"
+          ></div>
+        </div>
+        <div
+          class="legend-container-right"
+          :style="{
+            width: legendData.rightWidth ? legendData.rightWidth : '50%',
+          }"
+        >
+          <div
+            class="legend-title"
+            v-for="item in legendData.legendTitle"
+            :key="item"
+            :style="{
+              width: legendData.rightItemWidth+'px'
+                ? legendData.rightItemWidth+'px'
+                : '50px',
+            }"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </div>
+    </MenuCard>
+  </div>
+</template>
+<script>
+import MenuCard from "@/components/layout/MenuCard.vue";
+/**
+ * 通用图例
+ */
+export default {
+  name: "Legend",
+  components: {
+    MenuCard,
+  },
+  props: ["legendData"],
+  data() {
+    return {};
+  },
+  mounted() {},
+  destroy() {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+@commonBorderColor: #00aaff;
+.legend {
+  pointer-events: auto;
+  .legend-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &-left {
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      .legend-icon {
+        width: 25px;
+        height: 15px;
+        background: @commonBorderColor;
+        border-radius: 2px;
+        margin: 0 auto;
+      }
+    }
+    &-right {
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-evenly;
+      .legend-title {
+        // width: 50px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+      }
+    }
+  }
+}
+</style>

src/views/ComprehensiveAnalysis.vue

@@ -36,17 +36,19 @@
       </div>
     </div> -->
     <!-- 图例 -->
-    <MenuCard
+    <Legend
       class="comprehensive-analysis-legendbox"
-      :menuData="{
-        type: 'chart',
-        title: '图例',
+      :legendData="{
         boxWidth: '200',
         boxHeight: '200',
-        legendShowState: true,
+        menuIndex: '3',
+        legendIcon: legendIcon,
+        legendTitle: legendTitle,
+        leftWidth:'30%',
+        rightWidth:'70%',
+        rightItemWidth:'120'
       }"
-    >
-    </MenuCard>
+    />
 
     <!-- 开启左边面板的控制按钮 -->
     <div class="comprehensive-analysis-leftopenbox" v-show="leftBoxBtn">
@@ -132,12 +134,14 @@
 <script>
 // 综合分析
 import MenuCard from "@/components/layout/MenuCard.vue";
+import Legend from "@/components/map/Legend.vue";
 import publicFun from "@/utils/publicFunction.js";
 import { treeModel, soilLabelData, waterLabelData } from "@/config/common";
 export default {
   name: "ComprehensiveAnalysis",
   components: {
     MenuCard,
+    Legend,
   },
   data() {
     return {
@@ -169,6 +173,35 @@ export default {
         children: "children",
         label: "label",
       },
+      legendIcon: [
+        {
+          background: "transparent",
+          border: "1px solid rgba(255, 152, 51, 1)",
+        },
+        {
+          background: "transparent",
+          border: "1px solid rgba(253, 255, 76, 1)",
+        },
+        {
+          background: "transparent",
+          border: "1px solid rgba(75, 195, 19, 1)",
+        },
+        {
+          background: "transparent",
+          border: "1px solid rgba(65, 239, 255, 1)",
+        },
+        {
+          background: "transparent",
+          border: "1px solid rgba(255, 64, 0, 1)",
+        },
+      ],
+      legendTitle: [
+        "永久基本农田",
+        "一般耕地",
+        "建设用地减量化",
+        "特征地",
+        "基本农田被侵占",
+      ],
     };
   },
   watch: {
@@ -264,8 +297,8 @@ export default {
         this.$refs.tree.setCheckedKeys([data.id]);
         if (this.rightLabelDataMap.has(data.label)) {
           this.rightLabelData = this.rightLabelDataMap.get(data.label);
-        }else{
-          this.rightLabelData = []
+        } else {
+          this.rightLabelData = [];
         }
       }
 

src/views/HomeView.vue

@@ -5,6 +5,17 @@
 
     <!-- 镇域专题 -->
     <div id="TownContainer" v-if="$ifMenu('2', '5')">
+      <Legend
+        id="TownContainer_bottomLegend"
+        :legendData="{
+          boxWidth: '150',
+          boxHeight: '180',
+          menuIndex: '2',
+          subMenuIndex: '5',
+          legendIcon: legendIcon,
+          legendTitle: legendTitle,
+        }"
+      />
       <div class="select-title">所属街道</div>
       <NewSelect
         class="select-container"
@@ -145,33 +156,16 @@
           </div>
         </MenuCard>
       </div>
-      <MenuCard
+      <Legend
         id="mainMenus_bottomLegend"
-        :menuData="{
-          type: 'chart',
-          title: '图例',
+        :legendData="{
           boxWidth: '150',
           boxHeight: '180',
-          legendShowState: true,
           menuIndex: '1',
-          position: 'bottom',
+          legendIcon: legendIcon,
+          legendTitle: legendTitle,
         }"
-        ><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>
-          <div class="right-container">
-            <div class="lengend-title" v-for="item in buttonData" :key="item">
-              {{ item }} 类
-            </div>
-          </div>
-        </div>
-      </MenuCard>
+      />
     </div>
     <!-- 右侧菜单列 -->
     <div class="rightMenus">
@@ -239,6 +233,8 @@ import ChartCard from "@/components/common/ChartCard.vue";
 import TagTableCard from "@/components/common/TagTableCard";
 import TopCard from "@/components/common/TopCard";
 import BottomMenus from "@/components/common/BottomMenus";
+// 图例
+import Legend from "@/components/map/Legend.vue";
 // 综合分析
 import ComprehensiveAnalysis from "@/views/ComprehensiveAnalysis.vue";
 import TagProblemCard from "@/components/common/TagProblemCard.vue";
@@ -257,6 +253,7 @@ export default {
     BottomMenus,
     ComprehensiveAnalysis,
     TagProblemCard,
+    Legend,
   },
   data() {
     return {
@@ -427,7 +424,22 @@ export default {
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
-      legendData: ["#E565FF", "#0055FF", "#00FFD5"],
+      legendTitle: ["A类", "B类", "C类"],
+      // legendData: ["#E565FF", "#0055FF", "#00FFD5"],
+      legendIcon: [
+        {
+          background: "#E565FF",
+          border: "none",
+        },
+        {
+          background: "#0055FF",
+          border: "none",
+        },
+        {
+          background: "#00FFD5",
+          border: "none",
+        },
+      ],
       btnChecked: "A",
       AData: {
         soil: [],
@@ -589,6 +601,13 @@ export default {
   top: 60px;
   z-index: 999;
   pointer-events: none;
+  &_bottomLegend {
+    position: absolute;
+    color: #fff;
+    left: 60px;
+    bottom: 30px;
+    pointer-events: auto;
+  }
   .select-title {
     position: absolute;
     left: 60px;
@@ -722,65 +741,11 @@ export default {
     z-index: 99999;
     color: #fff;
   }
-  .legend-line {
-    position: absolute;
-    left: 24px;
-    bottom: 208px;
-    width: 104px;
-    height: 20px;
-    background: url("../assets/home/legend_line.png") no-repeat center;
-    z-index: 99999;
-  }
   &_bottomLegend {
     position: absolute;
     left: 20px;
-    bottom: 24px;
+    bottom: 30px;
     color: #fff;
-    z-index: 99999;
-    .legend-container {
-      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;
-        .legend-icon {
-          width: 25px;
-          height: 15px;
-          background: @commonBorderColor;
-          border-radius: 2px;
-          margin: 0 auto;
-        }
-      }
-      .right-container {
-        width: 50%;
-        height: 100%;
-        position: absolute;
-        right: 0;
-        top: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-evenly;
-        .legend-title {
-          width: 30px;
-          height: 20px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: white;
-        }
-      }
-    }
   }
   &_topSelect {
     position: absolute;