基础本地

src/views/cockpit/gkzb.vue

@@ -13,7 +13,7 @@
         </div>
         <div class="text">
           <p>耕地保护目标</p>
-          <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>平方干米
+          <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡
 
         </div>
       </div>
@@ -25,7 +25,7 @@
         </div>
         <div class="text">
           <p>永久基本农田保护</p>
-          <span>{{ store.state.cockpit_gkzb.yjjbntmj }}</span>平方干米
+          <span>{{ store.state.cockpit_gkzb.yjjbntmj }}</span>k㎡
 
         </div>
       </div>
@@ -39,7 +39,7 @@
           <p>生态保护红线</p>
           <span>
             {{ store.state.cockpit_gkzb.mj }}
-          </span>平方干米
+          </span>k㎡
 
         </div>
       </div>
@@ -51,7 +51,7 @@
         </div>
         <div class="text">
           <p>城市开发边界</p>
-          <span>{{ store.state.cockpit_gkzb.kfbjmj }}</span>平方干米
+          <span>{{ store.state.cockpit_gkzb.kfbjmj }}</span>k㎡
 
         </div>
       </div>
@@ -66,7 +66,7 @@
           <p>己入库控规范围
 
           </p>
-          <span>{{ store.state.cockpit_gkzb.ghdkmj }}</span>平方干米
+          <span>{{ store.state.cockpit_gkzb.ghdkmj }}</span>k㎡
 
         </div>
       </div>
@@ -91,14 +91,14 @@
           <p>己入库控规范围
 
           </p>
-          <span>123.124</span>k㎡
+          <span>{{ store.state.cockpit_gkzb.ghdkmj }}</span>k㎡
 
         </div>
         <div class="text">
           <p>覆盖城镇开发边界
 
           </p>
-          <span>123.23</span>k㎡
+          <span>{{ store.state.cockpit_gkzb.bfb }}</span>%
 
         </div>
       </div>
@@ -287,6 +287,10 @@ export default {
   width: 15rem;
   margin-left: 6rem;
 
+  p {
+    font-size: 12px;
+  }
+
   .text {
     width: 115px;
 

src/views/cockpit/jcbd.vue

@@ -2,7 +2,71 @@
     <div class="jcbd">
         <div class="title">
             <div class="icon"></div>
-            <span>管控指标</span>
+            <span>基础本底</span>
+        </div>
+
+
+        <div class="content">
+            <div class="item">
+                <div class="icon">
+                    <div class="icon_zxkg">
+
+                    </div>
+                </div>
+                <div class="text">
+                    <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡
+                </div>
+            </div>
+            <div class="item">
+                <div class="icon">
+                    <div class="icon_zxkg">
+
+                    </div>
+                </div>
+                <div class="text">
+                    <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡
+                </div>
+            </div>
+            <div class="item">
+                <div class="icon">
+                    <div class="icon_zxkg">
+
+                    </div>
+                </div>
+                <div class="text">
+                    <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡
+                </div>
+            </div>
+            <div class="item">
+                <div class="icon">
+                    <div class="icon_zxkg">
+
+                    </div>
+                </div>
+                <div class="text">
+                    <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡
+                </div>
+            </div>
+            <div class="item">
+                <div class="icon">
+                    <div class="icon_zxkg">
+
+                    </div>
+                </div>
+                <div class="text">
+                    <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡
+                </div>
+            </div>
+            <div class="item">
+                <div class="icon">
+                    <div class="icon_zxkg">
+
+                    </div>
+                </div>
+                <div class="text">
+                    <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -48,7 +112,6 @@ export default {
     -webkit-box-shadow: none;
     box-shadow: none;
     z-index: 100;
-    border: 1px solid red;
 }
 
 .title {
@@ -76,4 +139,62 @@ export default {
         bottom: 0.5rem;
     }
 }
+
+
+.content {
+    position: absolute;
+    left: 1%;
+    width: 100%;
+    height: 75%;
+    top: 25%;
+}
+
+.item {
+    width: 30%;
+    height: 30%;
+    display: inline-block;
+    position: relative;
+}
+
+.icon {
+    width: 50px;
+    padding: 1.5%;
+    border-radius: 8px;
+    display: inline-block;
+    height: 50px
+}
+
+.icon_zxkg {
+    background: no-repeat 50%;
+    background-image: url("/static/images/overview/jcbd_ly.png");
+    /* border: #00FFFF 1px solid; */
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+
+}
+
+.text {
+    display: inline-block;
+    width: 67px;
+    position: relative;
+    bottom: 1rem;
+    left: -0.5rem;
+
+    p {
+        font-kerning: normal;
+        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+        font-weight: 700;
+        font-style: normal;
+        font-size: 14px;
+        color: #FFFFFF;
+    }
+
+    span {
+        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+        font-weight: 700;
+        font-style: normal;
+        color: #68F4FB;
+    }
+}
 </style>