中间统计

src/views/cockpitNew1/serCenter.vue

@@ -24,8 +24,8 @@ export default {
         { name: "海岸线", value: "", unit: "km²" },
         { name: "耕地", value: "", unit: "km²" },
         { name: "林地", value: "", unit: "km²" },
-        { name: "森林覆盖率", value: "", unit: "%" },
-      ],
+        { name: "森林覆盖率", value: "", unit: "%" }
+      ]
     };
   },
   //监听属性 类似于data概念
@@ -35,7 +35,7 @@ export default {
   //方法集合
 
   methods: {},
-  mounted() {},
+  mounted() {}
 };
 </script>
 <style lang="scss" scoped>
@@ -44,39 +44,55 @@ export default {
   position: absolute;
   left: calc(50% - 300px);
   width: 600px;
-  height: 40px;
+  height: 60px;
   top: 10%;
   z-index: 100;
+  padding: 10px;
+  box-sizing: border-box;
+  border: 1px solid;
+  border-image: linear-gradient(
+    to top,
+    rgba(0, 210, 255, 1),
+    rgba(14, 141, 236, 0.1)
+  );
+  border-image-slice: 1;
+  background-color: rgba(10, 36, 61, 0.5);
+  background-color: linear-gradient(
+    to top,
+    rgba(6, 135, 220, 0.25),
+    rgba(26, 28, 53, 0)
+  );
 }
 
 .item {
   width: calc(100% / 6);
   height: 45px;
   display: inline-block;
+  text-align: center;
   // border: #00FFFF 1px solid;
 }
 
-.icon {
-  width: 45px;
-  height: 45px;
-  padding: 2%;
-  border-radius: 8px;
-  display: inline-block;
-  background: no-repeat 50%;
-}
+// .icon {
+//   width: 45px;
+//   height: 45px;
+//   padding: 2%;
+//   border-radius: 8px;
+//   display: inline-block;
+//   background: no-repeat 50%;
+// }
 
-.icongdbh0 {
-  background-image: url("/static/images/overview/icongdbh0.png");
-}
-.icongdbh1 {
-  background-image: url("/static/images/overview/icongdbh1.png");
-}
-.icongdbh2 {
-  background-image: url("/static/images/overview/icongdbh2.png");
-}
-.icongdbh3 {
-  background-image: url("/static/images/overview/icongdbh3.png");
-}
+// .icongdbh0 {
+//   background-image: url("/static/images/overview/icongdbh0.png");
+// }
+// .icongdbh1 {
+//   background-image: url("/static/images/overview/icongdbh1.png");
+// }
+// .icongdbh2 {
+//   background-image: url("/static/images/overview/icongdbh2.png");
+// }
+// .icongdbh3 {
+//   background-image: url("/static/images/overview/icongdbh3.png");
+// }
 
 .text {
   display: inline-block;
@@ -97,7 +113,7 @@ export default {
     font-family: "Arial Negreta", "Arial Normal", "Arial";
     font-weight: 700;
     font-style: normal;
-    font-weight: 400;
+    font-weight: bold;
     font-size: 18px;
     color: #64daff;
     line-height: 16px;
@@ -117,4 +133,4 @@ export default {
   // border: #00FFFF 1px solid;
   width: 50px;
 }
-</style>
+</style>