资源一张图

src/views/resources/comps/left/top/1/index.html

@@ -1,7 +1,15 @@
 <Pannel title="资源概况分析" height="232">
   <div class="full colbox">
-    <div class="top border"></div>
-    <div class="buttom border">
+    <div class="top">
+      <div v-for="item in data"  class="item">
+          <p class="top_line">
+            <span class="value">{{item.value}}</span>
+            <span class="unit">{{item.unit}}</span>
+          </p>
+          <p class="name">{{item.name}}</p>
+      </div>
+    </div>
+    <div class="buttom">
       <HorizontalBar></HorizontalBar>
     </div>
   </div>

src/views/resources/comps/left/top/1/index.js

@@ -7,6 +7,23 @@ export default {
   },
   data () {
     return {
+      data: [
+        {
+          name: '农用地',
+          value: '500',
+          unit: '亩'
+        },
+        {
+          name: '建设用地',
+          value: '500',
+          unit: '亩'
+        },
+        {
+          name: '未利用地及林木',
+          value: '500',
+          unit: '亩'
+        }
+      ]
     };
   }
 };

src/views/resources/comps/left/top/1/index.scss

@@ -3,8 +3,38 @@
   flex-direction: column;
 
   .top {
+    display: flex;
+    justify-content: space-between;
     width: 100%;
     flex: 1;
+
+    .item {
+      width: 150px;
+      height: 100px;
+      background: url('./bk.png');
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .top_line {
+        margin-top: 15px;
+
+        .value {
+          font-size: 20px;
+          font-weight: 600;
+        }
+
+        .unit {
+          font-size: 12px;
+        }
+      }
+
+      .name {
+        font-weight: 600;
+        font-size: 12px;
+      }
+    }
   }
 
   .buttom {

src/views/resources/index.js

@@ -51,7 +51,7 @@ export default {
       tabData: [
         {
           id: '1',
-          name: '统计分析'
+          name: '资源分析'
         },
         {
           id: '2',

src/views/resources/index.scss

@@ -1,5 +1,4 @@
 .map {
-  border: 1px solid red;
   position: absolute;
   top: 0;
   left: 0;