|
@@ -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;
|