Browse Source

报建切换

maxiaoxiao 11 months ago
parent
commit
fce36fa023
1 changed files with 80 additions and 1 deletions
  1. 80 1
      src/views/cockpit/bjxm.vue

+ 80 - 1
src/views/cockpit/bjxm.vue

@@ -4,6 +4,12 @@
       <div class="icon"></div>
       <span>报建项目</span>
     </div>
+    <div class="selectTab">
+          <el-select v-model="left_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
     <div class="content">
       <div class="item">
         <div class="icon">
@@ -37,7 +43,12 @@ export default {
   components: {},
   data() {
     return {
-      sdata:{}
+      sdata:{},
+      left_value:'csbj',
+      options: [
+        { value: "csbj", label: "城市报建" },
+        { value: "szbj", label: "私宅报建" },
+      ],
     };
   },
   //监听属性 类似于data概念
@@ -424,6 +435,74 @@ export default {
   }
 }
 
+.selectTab {
+  position: fixed;
+  left: 48rem;
+  bottom: 16rem;
+  z-index: 100;
+      /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;
+    }
+
 .content {
   position: absolute;
   left: 5%;