|
@@ -3,19 +3,25 @@
|
|
|
<template v-slot:title>
|
|
|
<!-- #content="row" -->
|
|
|
</template>
|
|
|
- <div class="item">
|
|
|
- <p class="text">
|
|
|
- <span>·</span>
|
|
|
- 综合整治项目
|
|
|
- <span>66</span>
|
|
|
+ <div class="stacontent">
|
|
|
+ <div class="item">
|
|
|
+ <div class="itembg"></div>
|
|
|
+ <div class="text">综合整治项目</div>
|
|
|
+ <span>{{ sdata.a || 0 }}</span>
|
|
|
个
|
|
|
- </p>
|
|
|
- <p class="text">
|
|
|
- <span>·</span>
|
|
|
- 土地整治面积
|
|
|
- <span>354.56</span>
|
|
|
- KM2
|
|
|
- </p>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="itembg"></div>
|
|
|
+ <div class="text">土地整治面积</div>
|
|
|
+ <span>{{ sdata.a || 0 }}</span>
|
|
|
+ 公顷
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="itembg"></div>
|
|
|
+ <div class="text">总投资</div>
|
|
|
+ <span>{{ sdata.a || 0 }}</span>
|
|
|
+ 万元
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<Bar3d id="stxf_echart" ref="echartRef"></Bar3d>
|
|
|
</borderTemplate>
|
|
@@ -29,7 +35,9 @@ import Bar3d from "../../components/echartsTemplate/3dBar.vue";
|
|
|
export default {
|
|
|
components: { borderTemplate, Bar3d },
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ sdata: {},
|
|
|
+ };
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
computed: {},
|
|
@@ -65,27 +73,45 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.stxf {
|
|
|
top: calc(33.3% + 20px) !important;
|
|
|
+ .stacontent {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
- p {
|
|
|
+ width: 112px;
|
|
|
+ height: 44px;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ .itembg {
|
|
|
+ width: 112px;
|
|
|
+ height: 34px;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ background: no-repeat;
|
|
|
+ background-image: url("/static/images/overview/Tab.png");
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-weight: bold;
|
|
|
font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- display: inline-block;
|
|
|
- margin-top: 3%;
|
|
|
- margin-right: 3%;
|
|
|
+ color: #bcd3e5;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
- color: #00ffff;
|
|
|
- font-weight: 1000;
|
|
|
- }
|
|
|
- #stxf_echart {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 100px);
|
|
|
- position: relative;
|
|
|
- // left: -28%;
|
|
|
- // top: 7%;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #64daff;
|
|
|
+ line-height: 18px;
|
|
|
}
|
|
|
}
|
|
|
+#stxf_echart {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 44px);
|
|
|
+ position: relative;
|
|
|
+ // left: -28%;
|
|
|
+ // top: 7%;
|
|
|
+}
|
|
|
</style>
|