diff --git a/src/views/resources/comps/left/top/1/index.html b/src/views/resources/comps/left/top/1/index.html index 804e4a2..f1b24d5 100644 --- a/src/views/resources/comps/left/top/1/index.html +++ b/src/views/resources/comps/left/top/1/index.html @@ -1,7 +1,15 @@
-
-
+
+
+

+ {{item.value}} + {{item.unit}} +

+

{{item.name}}

+
+
+
diff --git a/src/views/resources/comps/left/top/1/index.js b/src/views/resources/comps/left/top/1/index.js index 9ad101c..b5a7671 100644 --- a/src/views/resources/comps/left/top/1/index.js +++ b/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: '亩' + } + ] }; } }; diff --git a/src/views/resources/comps/left/top/1/index.scss b/src/views/resources/comps/left/top/1/index.scss index 0812b5a..5851de3 100644 --- a/src/views/resources/comps/left/top/1/index.scss +++ b/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 { diff --git a/src/views/resources/index.js b/src/views/resources/index.js index 819cf8b..51ed9e7 100644 --- a/src/views/resources/index.js +++ b/src/views/resources/index.js @@ -51,7 +51,7 @@ export default { tabData: [ { id: '1', - name: '统计分析' + name: '资源分析' }, { id: '2', diff --git a/src/views/resources/index.scss b/src/views/resources/index.scss index 11352e6..1b7aaf4 100644 --- a/src/views/resources/index.scss +++ b/src/views/resources/index.scss @@ -1,5 +1,4 @@ .map { - border: 1px solid red; position: absolute; top: 0; left: 0;