增加资源本底指标

src/views/cockpitNew1/datePicker.vue

@@ -77,7 +77,7 @@ export default {
 // 日期按选择器样式修改
 .timePicker {
   position: absolute;
-  top: 30px;
+  top: 10%;
   left: 22%;
   z-index: 100;
   font-size: 14px;

src/views/cockpitNew1/serCenter.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="content">
+    <div class="item" v-for="(sd, i) in sdlist" :key="i">
+      <!-- <div class="icon" :class="`icongdbh${i}`"></div> -->
+      <div class="text">
+        <p>{{ sd.name }}</p>
+        <span class="sdvalue">{{ sd.value || 0 }}</span>
+        <span class="unit">{{ sd.unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 增加资源本底指标：
+
+export default {
+  components: {},
+  data() {
+    return {
+      sdlist: [
+        { name: "陆域", value: "", unit: "km²" },
+        { name: "海域", value: "", unit: "km²" },
+        { name: "海岸线", value: "", unit: "km²" },
+        { name: "耕地", value: "", unit: "km²" },
+        { name: "林地", value: "", unit: "km²" },
+        { name: "森林覆盖率", value: "", unit: "%" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+
+  methods: {},
+  mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+.content {
+  // border: #00FFFF 1px solid;
+  position: absolute;
+  left: calc(50% - 300px);
+  width: 600px;
+  height: 40px;
+  top: 10%;
+  z-index: 100;
+}
+
+.item {
+  width: calc(100% / 6);
+  height: 45px;
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+}
+
+.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");
+}
+
+.text {
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+  width: 100px;
+  margin-bottom: 4px;
+
+  p {
+    font-kerning: normal;
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: bold;
+    font-size: 14px;
+    color: #bcd3e5;
+    line-height: 24px;
+  }
+
+  .sdvalue {
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 700;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    color: #64daff;
+    line-height: 16px;
+  }
+  .unit {
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 400;
+    font-size: 12px;
+    color: #ecf6ff;
+    line-height: 12px;
+  }
+}
+
+.value {
+  display: inline-block;
+
+  // border: #00FFFF 1px solid;
+  width: 50px;
+}
+</style>

src/views/viewer1.vue

@@ -1,6 +1,7 @@
 <template>
     <div v-show="flag">
         <datePicker @deteChange="deteChange"></datePicker>
+        <ser-center></ser-center>
         <JSYD />
         <TDSC />
         <HYSY />
@@ -13,7 +14,7 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
+import serCenter from './cockpitNew1/serCenter';
 import JSYD from './cockpitNew1/jsyd';
 import TDSC from './cockpitNew1/tdsc';
 import HYSY from './cockpitNew1/hysy';
@@ -24,8 +25,9 @@ import WPJG from './cockpitNew1/wpjg';
 import datePicker from './cockpitNew1/datePicker.vue';
 import { cockpitInfo } from '@/api/cockpit'
 import xzqh from "../../static/data/460200_full.json";
+import SerCenter from './cockpitNew1/serCenter.vue';
 export default {
-    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker },
+    components: { serCenter, JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, SerCenter },
     data() {
         return {
             flag: true,