From b55d1c67769dcc8d90eed2bb4f8a7dfd51e7303a Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123456 <zxx19900626>
Date: 星期三, 27 四月 2022 11:31:35 +0800
Subject: [PATCH] 细节样式
---
src/pages/show/index/index.vue | 529 ++++++++++++++++------------------------------------------
1 files changed, 145 insertions(+), 384 deletions(-)
diff --git a/src/pages/show/index/index.vue b/src/pages/show/index/index.vue
index 5b06302..7282399 100644
--- a/src/pages/show/index/index.vue
+++ b/src/pages/show/index/index.vue
@@ -329,7 +329,7 @@
</div>
</div>
<div class="shuju-scroll">
- <div class="shuju-table-line2" v-for="(item,index) in TownTable" :key="index">
+ <div class="shuju-table-line2 chengzhen_scroll" v-for="(item,index) in TownTable" :key="index">
<div class="biao-title">
<h1>{{ item.name }}</h1>
</div>
@@ -345,102 +345,102 @@
</div>
</div>
</div>
-<!-- <div class="shuju-table-line2 shuju-bj-color">-->
-<!-- <div class="biao-title">-->
-<!-- <h1>鍦ㄨ亴锛堜竾浜猴級</h1>-->
-<!-- </div>-->
-<!-- <div class="title-flex">-->
-<!-- <div class="title">-->
-<!-- <h1>217.8</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>13.5</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>142.3</h1>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div class="shuju-table-line2">-->
-<!-- <div class="biao-title">-->
-<!-- <h1>绂婚��浼戯紙涓囦汉锛�</h1>-->
-<!-- </div>-->
-<!-- <div class="title-flex">-->
-<!-- <div class="title">-->
-<!-- <h1>23.8</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>16.5</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>52.3</h1>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div class="shuju-table-line2">-->
-<!-- <div class="biao-title">-->
-<!-- <h1>渚涘吇姣�</h1>-->
-<!-- </div>-->
-<!-- <div class="title-flex">-->
-<!-- <div class="title">-->
-<!-- <h1>3.8</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>2.5</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>1.3</h1>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div class="shuju-table-line2">-->
-<!-- <div class="biao-title">-->
-<!-- <h1>鏀跺叆锛堜嚎鍏冿級</h1>-->
-<!-- </div>-->
-<!-- <div class="title-flex">-->
-<!-- <div class="title">-->
-<!-- <h1>233.8</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>24.5</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>341.3</h1>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div class="shuju-table-line2">-->
-<!-- <div class="biao-title">-->
-<!-- <h1>鏀嚭锛堜嚎鍏冿級</h1>-->
-<!-- </div>-->
-<!-- <div class="title-flex">-->
-<!-- <div class="title">-->
-<!-- <h1>533.8</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>84.5</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>541.3</h1>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div class="shuju-table-line2">-->
-<!-- <div class="biao-title">-->
-<!-- <h1>缁撲綑锛堜嚎鍏冿級</h1>-->
-<!-- </div>-->
-<!-- <div class="title-flex">-->
-<!-- <div class="title">-->
-<!-- <h1>33.8</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>34.5</h1>-->
-<!-- </div>-->
-<!-- <div class="title">-->
-<!-- <h1>341.3</h1>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
+ <!-- <div class="shuju-table-line2 shuju-bj-color">-->
+ <!-- <div class="biao-title">-->
+ <!-- <h1>鍦ㄨ亴锛堜竾浜猴級</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title-flex">-->
+ <!-- <div class="title">-->
+ <!-- <h1>217.8</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>13.5</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>142.3</h1>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="shuju-table-line2">-->
+ <!-- <div class="biao-title">-->
+ <!-- <h1>绂婚��浼戯紙涓囦汉锛�</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title-flex">-->
+ <!-- <div class="title">-->
+ <!-- <h1>23.8</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>16.5</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>52.3</h1>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="shuju-table-line2">-->
+ <!-- <div class="biao-title">-->
+ <!-- <h1>渚涘吇姣�</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title-flex">-->
+ <!-- <div class="title">-->
+ <!-- <h1>3.8</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>2.5</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>1.3</h1>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="shuju-table-line2">-->
+ <!-- <div class="biao-title">-->
+ <!-- <h1>鏀跺叆锛堜嚎鍏冿級</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title-flex">-->
+ <!-- <div class="title">-->
+ <!-- <h1>233.8</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>24.5</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>341.3</h1>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="shuju-table-line2">-->
+ <!-- <div class="biao-title">-->
+ <!-- <h1>鏀嚭锛堜嚎鍏冿級</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title-flex">-->
+ <!-- <div class="title">-->
+ <!-- <h1>533.8</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>84.5</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>541.3</h1>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="shuju-table-line2">-->
+ <!-- <div class="biao-title">-->
+ <!-- <h1>缁撲綑锛堜嚎鍏冿級</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title-flex">-->
+ <!-- <div class="title">-->
+ <!-- <h1>33.8</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>34.5</h1>-->
+ <!-- </div>-->
+ <!-- <div class="title">-->
+ <!-- <h1>341.3</h1>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
</div>
</div>
<div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
@@ -454,142 +454,7 @@
<h1>澶变笟淇濋櫓</h1>
</div>
<div class="shuju-main-box">
- <div class="shuju-table">
- <div class="shuju-table-line">
- <div class="biao-title"></div>
- <div class="title-flex">
- <div class="title">
- <h1>鏈湀</h1>
- </div>
- <div class="title">
- <h1>鏈勾鍚屾湡</h1>
- </div>
- <div class="title">
- <h1>鍚屾瘮</h1>
- </div>
- <div class="title">
- <h1>涓婃湀</h1>
- </div>
- <div class="title">
- <h1>鐜瘮</h1>
- </div>
- </div>
- </div>
- <div class="shuju-scroll">
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>浜烘暟锛堜竾浜猴級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
-
- </div>
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>鏀跺叆锛堜嚎鍏冿級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>鏀嚭锛堜嚎鍏冿級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>鏈湀缁撲綑锛堜嚎鍏冿級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>绱缁撲綑锛堜嚎鍏冿級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- </div>
-
- </div>
+ <shiyeAndgongshangBaoxian typeString="4"></shiyeAndgongshangBaoxian>
<div class="shuju-echarts" id="shiyeBaoxianEcharts"></div>
</div>
@@ -599,141 +464,7 @@
<h1>宸ヤ激淇濋櫓</h1>
</div>
<div class="shuju-main-box">
- <div class="shuju-table">
- <div class="shuju-table-line">
- <div class="biao-title"></div>
- <div class="title-flex">
- <div class="title">
- <h1>鏈湀</h1>
- </div>
- <div class="title">
- <h1>鏈勾鍚屾瘮</h1>
- </div>
- <div class="title">
- <h1>鍚屾瘮</h1>
- </div>
- <div class="title">
- <h1>涓婃湀</h1>
- </div>
- <div class="title">
- <h1>鐜瘮</h1>
- </div>
- </div>
- </div>
- <div class="shuju-scroll">
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>浜烘暟锛堜竾浜猴級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>鏀跺叆锛堜嚎鍏冿級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>鏀嚭锛堜嚎鍏冿級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>鏈湀缁撲綑锛堜嚎鍏冿級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- <div class="shuju-table-line2">
- <div class="biao-title">
- <h1>绱缁撲綑锛堜嚎鍏冿級</h1>
- </div>
- <div class="title-flex">
- <div class="title">
- <h1>138957</h1>
- </div>
- <div class="title">
- <h1>128417</h1>
- </div>
- <div class="title">
- <h1 class="fontColor">111.2%</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- <div class="title">
- <h1>125000</h1>
- </div>
- </div>
- </div>
- </div>
-
- </div>
+ <shiyeAndgongshangBaoxian typeString="5"></shiyeAndgongshangBaoxian>
<div class="shuju-echarts" id="gongshangBaoxianEcharts"></div>
</div>
@@ -744,6 +475,7 @@
<script>
import echarts from "echarts/lib/echarts";
import nowSize from "../../../libs/nowSize";
+import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian";
import {
getInsured,
getInstitution,
@@ -759,6 +491,9 @@
export default {
name: "index",
+ components: {
+ shiyeAndgongshangBaoxian
+ },
data() {
return {
// 琚繚闄╀汉
@@ -805,7 +540,9 @@
jieyu: []
},
// 27. 鏌ヨ棣栭〉鍩庨晣鑱屽伐鍏昏�佽〃鏍兼暟鎹帴鍙�
- TownTable:[]
+ TownTable: [],
+ // 28.澶变笟淇濋櫓
+ type:'',
}
},
mounted() {
@@ -821,8 +558,10 @@
this.getPersonnel()
this.getLabourTable()
this.getLabourChart()
- this.getInsuranceChart(),
- this.getTownTable()
+ this.getInsuranceChart()
+ this.getTownTable()
+ // this.getshiyeTable()
+ // this.getGongshangTable()
},
filters: {
dataFilter(type) {
@@ -1275,8 +1014,8 @@
})
},
// 25. 鏌ヨ棣栭〉灏变笟鏁版嵁鎶樼嚎鍥炬帴鍙�
- getLabourChart() {
- getLabourChart().then(res => {
+ async getLabourChart() {
+ await getLabourChart().then(res => {
if (res.code === 1000) {
this.JiuYeEchart.LabourChartYear = res.obj.years;
this.JiuYeEchart.addJob = res.obj.addJob;
@@ -1323,7 +1062,7 @@
getTownTable() {
getTownTable().then(res => {
console.log(res);
- if(res.code ===1000){
+ if (res.code === 1000) {
this.TownTable = res.list
}
})
@@ -1597,16 +1336,11 @@
box-sizing: border-box;
display: flex;
- .shuju-table {
- width: 3.1328125rem /* 802/256 */
- ;
- height: 1.2109375rem /* 310/256 */
- ;
- }
}
.shuju-table {
- width: 100%;
+ width: 3.1328125rem /* 802/256 */;
+ height: 1.2109375rem /* 310/256 */;
display: flex;
flex-direction: column;
@@ -1615,8 +1349,7 @@
display: flex;
.biao-title {
- width: 0.859375rem /* 220/256 */
- ;
+ width: 0.859375rem /* 220/256 */;
}
.title-flex {
@@ -1628,6 +1361,7 @@
flex: 1;
display: flex;
align-items: center;
+ justify-content: center;
h1 {
font-size: $fontSize-26;
@@ -1658,6 +1392,7 @@
flex: 1;
display: flex;
align-items: center;
+ justify-content: center;
h1 {
font-size: $fontSize-26;
@@ -1666,8 +1401,11 @@
line-height: 1.5;
}
- .fontColor {
+ .fontColorBlue {
color: $color-blue;
+ }
+ .fontColorRed {
+ color: #FF3939;
}
}
@@ -1693,6 +1431,29 @@
}
}
}
+ // 鍩庡競鑱屽伐鍏昏�佺2锛�3鏉℃暟鎹�
+ .chengzhen_scroll {
+ &:nth-of-type(2) {
+ background: rgba(81, 210, 255, 0.10);
+
+ h1 {
+ font-size: 24px;
+ line-height: 1;
+ color: #999999;
+ }
+ }
+
+ &:nth-of-type(3) {
+ background: rgba(81, 210, 255, 0.10);
+
+ h1 {
+ font-size: 24px;
+ line-height: 1;
+ color: #999999;
+
+ }
+ }
+ }
.shuju-bj-color {
background: rgba(81, 210, 255, 0.10);
--
Gitblit v1.9.1