基础本地

src/views/cockpit/jcbd.vue

@@ -6,7 +6,7 @@
         </div>
 
 
-        <div class="content">
+        <!-- <div class="content">
             <div class="item">
                 <div class="icon">
                     <div class="icon_zxkg">
@@ -67,6 +67,22 @@
                     <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡
                 </div>
             </div>
+        </div> -->
+
+        <div class="content">
+            <div class="item" v-for="(item, index) in obj">
+                <div class="icon">
+                    <div class="icon_zxkg" :style="{
+                        'background-image': 'url(' + item.img + ')',
+
+                    }">
+
+                    </div>
+                </div>
+                <div class="text">
+                    <span>{{ item.value }}</span>k㎡
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -77,7 +93,35 @@
 export default {
     components: {},
     data() {
-        return {};
+        return {
+            obj: [
+                {
+                    name: "陆域",
+                    img: "/static/images/overview/jcbd_ly.png",
+                    value: 1233.32
+                }, {
+                    name: "海域",
+                    img: "/static/images/overview/jcbd_hy.png",
+                    value: 1233.32
+                }, {
+                    name: "海岸线",
+                    img: "/static/images/overview/jcbd_hax.png",
+                    value: 1233.32
+                }, {
+                    name: "耕地",
+                    img: "/static/images/overview/jcbd_gd.png",
+                    value: 1233.32
+                }, {
+                    name: "林地",
+                    img: "/static/images/overview/jcbd_ld.png",
+                    value: 1233.32
+                }, {
+                    name: "深林覆盖率",
+                    img: "/static/images/overview/jcbd_lyslfgl.png",
+                    value: 1233.32
+                },
+            ]
+        };
     },
     //监听属性 类似于data概念
     computed: {},
@@ -146,7 +190,7 @@ export default {
     left: 1%;
     width: 100%;
     height: 75%;
-    top: 25%;
+    top: 28%;
 }
 
 .item {
@@ -154,6 +198,8 @@ export default {
     height: 30%;
     display: inline-block;
     position: relative;
+    float: left;
+    margin-bottom: 1rem;
 }
 
 .icon {
@@ -176,10 +222,10 @@ export default {
 
 .text {
     display: inline-block;
-    width: 67px;
+    width: 74px;
     position: relative;
-    bottom: 1rem;
-    left: -0.5rem;
+    bottom: 2.2rem;
+    left: 2.8rem;
 
     p {
         font-kerning: normal;