生态修复

src/components/echartsTemplate/3dBar.vue

@@ -11,10 +11,10 @@ let colors = [
 ];
 let option = {
   grid: {
-    left: "15%",
+    left: "5%",
     top: "10%",
     right: "5%",
-    bottom: "20%",
+    bottom: "10%",
   },
   // // 设置鼠标移入的提示，默认显示
   // tooltip: {},
@@ -43,6 +43,7 @@ let option = {
   },
   // 设置y轴
   yAxis: {
+    
     // 显示y轴
     axisLine: {
       show: false,
@@ -50,7 +51,7 @@ let option = {
     // interval: 30,
     // 设置y轴的颜色
     axisLabel: {
-      color: "#fff",
+      color: "rgba(255, 255, 255, 0)",
     },
     // 不显示分隔线
     splitLine: {
@@ -60,9 +61,9 @@ let option = {
       show: true,
       // y-line
       lineStyle: {
-        // width: 1,
-        type: "dashed",
-        color: "rgba(255, 255, 255, 0.15)",
+        width: 2,
+        // type: "dashed",
+        color: "rgba(189, 196, 200, 0.30)",
       },
     },
   },

src/views/cockpitNew1/borderTemplate.vue

@@ -67,9 +67,9 @@ export default {
 .borderContent {
   // border: #00FFFF 1px solid;
   position: absolute;
-  left: 5%;
-  width: 100%;
-  height: calc(100% - 50px);
+  left: 2%;
+  width: 95%;
+  height: calc(100% - 40px);
   top: 40px;
 }
 </style>

src/views/cockpitNew1/stxf.vue

@@ -3,19 +3,25 @@
     <template v-slot:title>
       <!-- #content="row" -->
     </template>
-    <div class="item">
-      <p class="text">
-        <span>·</span>
-        综合整治项目
-        <span>66</span>
+    <div class="stacontent">
+      <div class="item">
+        <div class="itembg"></div>
+        <div class="text">综合整治项目</div>
+        <span>{{ sdata.a || 0 }}</span>
         个
-      </p>
-      <p class="text">
-        <span>·</span>
-        土地整治面积
-        <span>354.56</span>
-        KM2
-      </p>
+      </div>
+      <div class="item">
+        <div class="itembg"></div>
+        <div class="text">土地整治面积</div>
+        <span>{{ sdata.a || 0 }}</span>
+        公顷
+      </div>
+      <div class="item">
+        <div class="itembg"></div>
+        <div class="text">总投资</div>
+        <span>{{ sdata.a || 0 }}</span>
+        万元
+      </div>
     </div>
     <Bar3d id="stxf_echart" ref="echartRef"></Bar3d>
   </borderTemplate>
@@ -29,7 +35,9 @@ import Bar3d from "../../components/echartsTemplate/3dBar.vue";
 export default {
   components: { borderTemplate, Bar3d },
   data() {
-    return {};
+    return {
+      sdata: {},
+    };
   },
   //监听属性 类似于data概念
   computed: {},
@@ -65,27 +73,45 @@ export default {
 <style lang="scss" scoped>
 .stxf {
   top: calc(33.3% + 20px) !important;
+  .stacontent {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    justify-content: space-between;
+  }
 }
 
 .item {
-  p {
+  width: 112px;
+  height: 44px;
+  position: relative;
+  text-align: center;
+  .itembg {
+    width: 112px;
+    height: 34px;
+    position: absolute;
+    top: 10px;
+    background: no-repeat;
+    background-image: url("/static/images/overview/Tab.png");
+  }
+  .text {
+    font-weight: bold;
     font-size: 14px;
-    color: #fff;
-    display: inline-block;
-    margin-top: 3%;
-    margin-right: 3%;
+    color: #bcd3e5;
+    line-height: 24px;
   }
 
   span {
-    color: #00ffff;
-    font-weight: 1000;
-  }
-  #stxf_echart {
-    width: 100%;
-    height: calc(100% - 100px);
-    position: relative;
-    //   left: -28%;
-    //   top: 7%;
+    font-size: 18px;
+    color: #64daff;
+    line-height: 18px;
   }
 }
+#stxf_echart {
+  width: 100%;
+  height: calc(100% - 44px);
+  position: relative;
+  //   left: -28%;
+  //   top: 7%;
+}
 </style>