生态修复添加下拉选项

src/views/cockpitNew1/borderTemplate.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="borderTemplate">
     <div class="title">
-      <div class="icon"></div>
-      <span>{{ titleName }}</span>
+      <div>
+        <div class="icon"></div>
+        <span>{{ titleName }}</span>
+      </div>
       <slot name="title"></slot>
     </div>
     <div class="borderContent">
@@ -15,13 +17,13 @@
 export default {
   name: "borderTemplate",
   props: {
-    titleName: "",
+    titleName: ""
   },
   data() {
     return {};
   },
   mounted() {},
-  methods: {},
+  methods: {}
 };
 </script>
 <style lang="scss" scoped>
@@ -34,36 +36,95 @@ export default {
   height: calc((100% - 52px) / 3);
   display: -ms-flexbox;
   display: flex;
-}
-.title {
-  border-width: 0px;
-  width: 100%;
-  height: 40px;
-  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-  // font-weight: 700;
-  // font-style: normal;
-  // color: #fff;
-  // padding: 2%;
-  background: no-repeat;
-  background-image: url("/static/images/overview/标题框.png");
 
-  .icon {
+  .title {
+    border-width: 0px;
+    width: 100%;
+    height: 40px;
     background: no-repeat;
-    background-image: url("/static/images/overview/icon_标题框装饰.png");
-    display: inline-block;
-    width: 30px;
-    height: 30px;
-    background-position: 14px 7px;
-  }
+    background-image: url("/static/images/overview/标题框.png");
+    // background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .icon {
+      background: no-repeat;
+      background-image: url("/static/images/overview/icon_标题框装饰.png");
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      background-position: 14px 7px;
+    }
 
-  span {
-    color: #fff;
-    font-size: 14px;
-    font-weight: bold;
-    position: relative;
-    bottom: 0.5rem;
+    span {
+      color: #fff;
+      font-size: 14px;
+      font-weight: bold;
+      position: relative;
+      bottom: 0.5rem;
+    }
+    .selectTab {
+      /deep/ .el-input__inner {
+        // padding-right: 30px;
+        width: 128px !important;
+        height: 24px !important;
+        line-height: 24px;
+        padding-left: 22px;
+        padding-right: 0px;
+        font-size: 12px;
+        color: #bcd3e5;
+        border: none;
+        background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        background-size: 100% 100%;
+      }
+      /deep/ .el-input__icon {
+        line-height: 1;
+      }
+      /deep/ .el-input__suffix {
+        right: -2px;
+      }
+      /deep/ .el-select-dropdown__list {
+        color: #bcd3e5 !important;
+        background: linear-gradient(
+          180deg,
+          rgba(3, 115, 177, 0) 11%,
+          rgba(3, 115, 177, 0.48) 100%
+        );
+        border-image: linear-gradient(
+            360deg,
+            rgba(75, 185, 250, 0.2),
+            rgba(75, 185, 250, 0.05)
+          )
+          1 1 !important;
+        border: none;
+      }
+      /deep/ .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
+        background-color: rgba(87, 163, 226, 0.5);
+      }
+      /deep/ .el-select-dropdown__item {
+        color: #ecf6ff;
+      }
+    }
+    /deep/ {
+      .el-select-dropdown__item.selected {
+        color: #409eff;
+      }
+    }
   }
 }
+
+/deep/ .el-popper[x-placement^="bottom"] {
+  margin-top: 12px;
+  background: #163253;
+}
+/deep/ .el-select-dropdown {
+  border: none;
+}
+/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
+  border-bottom-color: #163253;
+  top: 0;
+}
 .borderContent {
   // border: #00FFFF 1px solid;
   position: absolute;

src/views/cockpitNew1/stxf.vue

@@ -2,6 +2,22 @@
   <borderTemplate titleName="生态修复" class="stxf">
     <template v-slot:title>
       <!-- #content="row" -->
+      <div class="selectTab">
+        <el-select
+          v-model="value"
+          placeholder="请选择"
+          :popper-append-to-body="false"
+          @change="changeCharts"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
     </template>
     <div class="stacontent">
       <div class="item">
@@ -37,7 +53,22 @@ export default {
   components: { borderTemplate, Bar3d },
   data() {
     return {
-      sdata: {}
+      sdata: {},
+      options: [
+        {
+          value: "国有建设用地",
+          label: "土地综合整治"
+        },
+        {
+          value: "集体供应性土地",
+          label: "山水工程"
+        },
+        {
+          value: "海岸线保护",
+          label: "海岸线保护"
+        }
+      ],
+      value: "国有建设用地"
     };
   },
   //监听属性 类似于data概念