样式修改

src/components/Combinations/LayerManage/LayerLegend.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="legends" v-show="vectors.length > 0 && !store.state.viewer_flag">
+  <div class="legends" v-show="checkeds.length > 0 && !store.state.viewer_flag">
+    图例
     <el-collapse accordion v-model="activeNames">
       <el-collapse-item
         :name="vector.id"
@@ -27,14 +28,14 @@ export default {
     };
   },
   computed: {
-    checkedNodes() {
+    checkeds() {
       return store.state.checkedNode;
     },
   },
   mounted() {},
   methods: {
     async GetLegend(vdata) {
-      let url = `${vdata.url}/legend.json?bbox=108.99%2C18.2%2C109.81%2C18.59`;
+      let url = `${vdata.url}/legend.json?bbox=108.99,18.2,109.81,18.59`;
       let res = await axios.get(url);
       let legends = [];
       res.data.layerLegends.forEach((la) => {
@@ -46,9 +47,9 @@ export default {
   },
 
   watch: {
-    checkedNodes() {
+    checkeds() {
       this.vectors = [];
-      let vectors = this.checkedNodes.filter((ci) => ci.type == "Vector");
+      let vectors = this.checkeds.filter((ci) => ci.type == "Vector");
       vectors.forEach((ve) => {
         this.GetLegend(ve);
       });
@@ -63,7 +64,7 @@ export default {
   left: 40px;
   top: 70vh;
   width: 150px;
-  height: 200px;
+  height: 250px;
   cursor: pointer;
   background: url(/static/images/ghzc/内容框.png) no-repeat;
   background-size: 100% 100%;
@@ -71,12 +72,18 @@ export default {
   padding: 0px 10px;
   box-sizing: content-box;
   text-align: left;
+  line-height: 40px;
   overflow-x: hidden;
   overflow-y: auto;
   .legLabel {
     min-width: 100px;
     display: inline-block;
   }
+  img {
+    position: absolute;
+    padding-top: 3px;
+    padding-left: 10px;
+  }
 }
 .el-collapse {
   // width: 95%;
@@ -87,11 +94,13 @@ export default {
   border: 1px solid #0f7ac8 !important;
   // padding: 0 10px;
 }
+
 .el-collapse-item__header {
   // border-bottom: 1px solid rgba(102, 126, 143, 0.747);
   background-color: transparent !important;
   color: rgb(217, 237, 254) !important;
   border-color: transparent !important;
+  height: 40px;
 }
 
 .el-collapse-item__wrap {
@@ -102,6 +111,7 @@ export default {
   // background-color: rgba(255, 192, 203, 0.425) !important;
   background-color: transparent !important;
   color: rgb(217, 237, 254) !important;
+  padding-bottom: 10px;
 }
 
 // @import "../../../views/complianceAnalysis/ghzc.scss";