样式调整

src/components/Viewer/smViewer.scss

@@ -31,7 +31,7 @@
 .cesiumbtn {
     position: absolute;
     right: 15px;
-    top: 8px;
+    top: 18px;
     color: #51E9FF;
     font-size: 20px;
     z-index: 98;

src/views/cockpit/bjxm.vue

@@ -4,11 +4,11 @@
       <div class="icon"></div>
       <span>报建项目</span>
       <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>
+        <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>
     <div class="content">
       <div class="item">
@@ -17,7 +17,7 @@
         </div>
         <div class="text">
           <p>报建数量</p>
-          <span>{{left_value=='csbj'?sdata.sj_number:0}}</span>个
+          <span>{{ left_value == 'csbj' ? sdata.sj_number : 0 }}</span>个
         </div>
       </div>
       <div class="item">
@@ -43,8 +43,8 @@ export default {
   components: {},
   data() {
     return {
-      sdata:{},
-      left_value:'csbj',
+      sdata: {},
+      left_value: 'csbj',
       options: [
         { value: "csbj", label: "城市报建" },
         { value: "szbj", label: "私宅报建" },
@@ -57,7 +57,7 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    changeChartsLeft(){
+    changeChartsLeft() {
       this.init_bjxm_echart_info();
     },
     async init_info(params) {
@@ -69,8 +69,8 @@ export default {
         id: params ? params.id : '4602'
       };
       let res = await QueryOne(obj);
-      this.sdata= res.data;
-    }, 
+      this.sdata = res.data;
+    },
     async init_bjxm_echart_info(params) {
       const that = this;
       let obj = {
@@ -158,7 +158,7 @@ export default {
       // 数据
       const xAxis = store.state.cockpit_bjxm.csbj.csbj_echart.xAxis
       const bat_data = store.state.cockpit_bjxm.csbj.csbj_echart.bat_data
-      const line_data =this.left_value =='csbj'? store.state.cockpit_bjxm.csbj.csbj_echart.line_data:[0,0,0,0,0,0]
+      const line_data = this.left_value == 'csbj' ? store.state.cockpit_bjxm.csbj.csbj_echart.line_data : [0, 0, 0, 0, 0, 0]
 
       let option = {
         //你的代码
@@ -182,8 +182,8 @@ export default {
           containLabel: true
         },
         xAxis: {
-          name:'月',
-          nameGap:2,
+          name: '月',
+          nameGap: 2,
           type: 'category',
           data: xAxis,
           axisLine: {
@@ -371,7 +371,7 @@ export default {
       };
       myChart.setOption(option);
     },
-    
+
   },
   beforeCreate() { }, //生命周期 - 创建之前
   created() { }, //生命周期 - 创建完成（可以访问当前this实例）
@@ -394,7 +394,7 @@ export default {
 .bjxm {
   border-width: 0px;
   position: absolute;
-  width: 385px;
+  width: 430px;
   height: 310px;
   top: 67%;
   left: 30rem;
@@ -441,71 +441,74 @@ export default {
 
 .selectTab {
   position: absolute;
-    right: 0;
-    bottom: 6px;
+  right: 0;
+  bottom: 9px;
+  right: 21px;
   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__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-color: rgba(0, 0, 0, 0) !important;
+    background-size: 100% 100%;
+  }
 
-      /deep/ .el-input__suffix {
-        right: -2px;
-      }
+  /deep/ .el-input__icon {
+    line-height: 1;
+  }
 
-      /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-input__suffix {
+    right: -2px;
+  }
 
-      /deep/ .el-select-dropdown__item.hover,
-      .el-select-dropdown__item:hover {
-        background-color: rgba(87, 163, 226, 0.5);
-      }
+  /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 {
-        color: #ecf6ff;
-      }
-    }
+  /deep/ .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: rgba(87, 163, 226, 0.5);
+  }
 
-    /deep/ {
-      .el-select-dropdown__item.selected {
-        color: #409eff;
-      }
-    }
+  /deep/ .el-select-dropdown__item {
+    color: #ecf6ff;
+  }
+}
 
-    /deep/ .el-popper[x-placement^="bottom"] {
-      margin-top: 12px;
-      background: #163253;
-    }
+/deep/ {
+  .el-select-dropdown__item.selected {
+    color: #409eff;
+  }
+}
 
-    /deep/ .el-select-dropdown {
-      border: none;
-    }
+/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;
-    }
+/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
+  border-bottom-color: #163253;
+  top: 0;
+}
 
 .content {
   position: absolute;

src/views/cockpit/borderTemplate.vue

@@ -48,7 +48,7 @@ export default {
     background-size: 100% 100%;
     display: flex;
     justify-content: space-between;
-
+    position: relative;
 
 
     span {
@@ -61,6 +61,10 @@ export default {
     }
 
     .selectTab {
+      position: absolute;
+      bottom: 10px;
+      right: 0px;
+
       /deep/ .el-input__inner {
         // padding-right: 30px;
         width: 128px !important;
@@ -71,7 +75,8 @@ export default {
         font-size: 12px;
         color: #bcd3e5;
         border: none;
-        background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        // background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        background-color: rgba(0, 0, 0, 0) !important;
         background-size: 100% 100%;
       }
 
@@ -133,4 +138,5 @@ export default {
   width: 95%;
   height: calc(100% - 40px);
   top: 40px;
-}</style>
+}
+</style>

src/views/cockpit/gdbh.vue

@@ -794,9 +794,9 @@ export default {
 }
 
 .selectTab {
-  position: fixed;
-  left: 109rem;
-  bottom: 51rem;
+  position: absolute;
+  right: 48px;
+  bottom: 111px;
   z-index: 1;
 
   /deep/ .el-input__inner {
@@ -809,7 +809,8 @@ export default {
     font-size: 12px;
     color: #bcd3e5;
     border: none;
-    background: url("/static/images/overview/selectBg.png") no-repeat !important;
+    // background: url("/static/images/overview/selectBg.png") no-repeat !important;
+    background-color: rgba(0, 0, 0, 0) !important;
     background-size: 100% 100%;
   }
 

src/views/cockpit/tdsc.vue

@@ -4,13 +4,13 @@
       <div class="icon"></div>
       <span>土地收储</span>
       <div class="selectTab">
-      <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-        </el-option>
-      </el-select>
-    </div>
+        <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
     </div>
-   
+
 
     <div v-show="tab == options[1].value">
       <div id="scje_echart"></div>
@@ -141,7 +141,7 @@ export default {
         },
         data: mockData.xdata,
       }
-      
+
       // yAxis
       const yAxis = [{
         axisTick: { show: false },
@@ -490,8 +490,8 @@ export default {
 
 .selectTab {
   position: absolute;
-    right: 0;
-    bottom: 6px;
+  right: 0;
+  bottom: 9px;
 
   /deep/ .el-input__inner {
     // padding-right: 30px;
@@ -503,7 +503,8 @@ export default {
     font-size: 12px;
     color: #bcd3e5;
     border: none;
-    background: url("/static/images/overview/selectBg.png") no-repeat !important;
+    // background: url("/static/images/overview/selectBg.png") no-repeat !important;
+    background-color: rgba(0, 0, 0, 0) !important;
     background-size: 100% 100%;
   }
 

src/views/cockpit/tdsy.vue

@@ -38,7 +38,7 @@
             </div>
             <div class="text">
               已入市面积
-              <span>{{store.state.cockpit_tdgy.jt_gy.wc}}</span>公顷
+              <span>{{ store.state.cockpit_tdgy.jt_gy.wc }}</span>公顷
 
             </div>
           </div>
@@ -294,34 +294,34 @@ export default {
       }
 
       // yAxis
-      const yAxis =  [
-          {
-            min: 0,
-            name: '公顷',
-            type: 'value',
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#BCD3E5'
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: "dashed",
-                color: "rgba(255,255,255,0.1)"
-              },
-            },
-            axisTick: {
-              show: false
+      const yAxis = [
+        {
+          min: 0,
+          name: '公顷',
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#BCD3E5'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "rgba(255,255,255,0.1)"
             },
-            axisLabel: {
-              show: true,
-              fontSize: 12,
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            fontSize: 12,
 
-            },
-            boundaryGap: ['20%', '20%']
-      },]
+          },
+          boundaryGap: ['20%', '20%']
+        },]
       // const yAxis = [{
       //   axisTick: { show: false },
       //   axisLine: { show: false },
@@ -339,45 +339,45 @@ export default {
       }, [])
 
       let series = mockData.result.reduce((p, c, i, array) => {
-                p.push({
-                    z: i + 1,
-                    stack: '总量',
-                    type: 'bar',
-                    name: c.name,
-                    barGap: 18,
-                    barWidth: 18,
-                    data: c.data,
-                    itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
-                }, {
-                    z: i + 10,
-                    type: 'pictorialBar',
-                    symbolPosition: 'end',
-                    symbol: 'diamond',
-                    symbolOffset: [0, '-50%'],
-                    symbolSize: [18, 12],
-                    data: diamondData[i],
-                    itemStyle: { color: color2[i] },
-                    tooltip: { show: false },
-                })
-
-                // 是否最后一个了？
-                if (p.length === (array.length) * 2) {
-                    p.push({
-                        z: array.length * 2,
-                        type: "pictorialBar",
-                        symbolPosition: "start",
-                        data: mockData.result[0].data,
-                        symbol: "diamond",
-                        symbolOffset: ["0%", "50%"],
-                        symbolSize: [18, 10],
-                        itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
-                        tooltip: { show: false },
-                    })
-                    return p
-                }
-
-                return p
-            }, [])
+        p.push({
+          z: i + 1,
+          stack: '总量',
+          type: 'bar',
+          name: c.name,
+          barGap: 18,
+          barWidth: 18,
+          data: c.data,
+          itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
+        }, {
+          z: i + 10,
+          type: 'pictorialBar',
+          symbolPosition: 'end',
+          symbol: 'diamond',
+          symbolOffset: [0, '-50%'],
+          symbolSize: [18, 12],
+          data: diamondData[i],
+          itemStyle: { color: color2[i] },
+          tooltip: { show: false },
+        })
+
+        // 是否最后一个了？
+        if (p.length === (array.length) * 2) {
+          p.push({
+            z: array.length * 2,
+            type: "pictorialBar",
+            symbolPosition: "start",
+            data: mockData.result[0].data,
+            symbol: "diamond",
+            symbolOffset: ["0%", "50%"],
+            symbolSize: [18, 10],
+            itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
+            tooltip: { show: false },
+          })
+          return p
+        }
+
+        return p
+      }, [])
 
       const dataZoom = [{
         show: false,
@@ -393,7 +393,7 @@ export default {
 
         tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
       }
-      console.log( series,' series')
+      console.log(series, ' series')
 
       myChart.setOption(option);
 
@@ -415,7 +415,7 @@ export default {
 
       var dom = document.getElementById("dial_watch");
       var myChart = window.echarts.init(dom);
-      let value =(store.state.cockpit_tdgy.jt_gy.wc/store.state.cockpit_tdgy.jt_gy.jh*100).toFixed(0)
+      let value = (store.state.cockpit_tdgy.jt_gy.wc / store.state.cockpit_tdgy.jt_gy.jh * 100).toFixed(0)
       var demoData = {
         name: '城镇化率',
         value: value,
@@ -611,7 +611,7 @@ export default {
 
       var dom = document.getElementById("dial_watch_gy_jd");
       var myChart = window.echarts.init(dom);
-      let value =(store.state.cockpit_tdgy.gy_jd_info.info.sj_crmj/store.state.cockpit_tdgy.gy_jd_info.info.jh_crmj*100).toFixed(0)
+      let value = (store.state.cockpit_tdgy.gy_jd_info.info.sj_crmj / store.state.cockpit_tdgy.gy_jd_info.info.jh_crmj * 100).toFixed(0)
       var demoData = {
         name: '城镇化率',
         value: value,
@@ -910,6 +910,7 @@ export default {
       // background-size: 100% 100%;
       display: flex;
       justify-content: space-between;
+      position: relative;
 
       span {
         color: #fff;
@@ -922,13 +923,15 @@ export default {
     }
 
     .left_tab {
-      position: fixed;
-      left: 10rem;
+      position: absolute;
+      right: 151px;
+      bottom: 9px;
     }
 
     .right_tab {
-      position: fixed;
-      left: 19rem;
+      position: absolute;
+      right: 38px;
+      bottom: 9px;
     }
 
     .selectTab {
@@ -942,7 +945,8 @@ export default {
         font-size: 12px;
         color: #bcd3e5;
         border: none;
-        background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        // background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        background-color: rgba(0, 0, 0, 0) !important;
         background-size: 100% 100%;
       }
 

static/css/index.css

@@ -210,7 +210,7 @@ div::-webkit-scrollbar-track {
 .el-textarea > textarea {
   color: #fff !important;
   background-color: rgba(4, 28, 50, 0.5) !important;
-  border: 1px solid rgba(15, 122, 200, 0.4) !important;
+  /* border: 1px solid rgba(15, 122, 200, 0.4) !important; */
 }
 .el-input .el-input-group__append {
   color: #fff !important;