From 038b8a1d35652b8967f520583069aef5422e7484 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123456 <zxx19900626>
Date: 星期日, 24 四月 2022 11:08:10 +0800
Subject: [PATCH] 社会保障细节样式
---
src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue | 159 +++++++++++++++-------
src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruForm.vue | 37 +++-
src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue | 10
src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruTotal.vue | 14 ++
src/pages/components/qiyezhigongShebao/zhigongShebao.vue | 14 +
src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoZhengjiShouru.vue | 40 ++---
src/pages/show/shehuiBaozhang/shehuiBaozhang.vue | 110 +++++++-------
src/pages/components/juminYanglaoBaoxian/baoxianForm.vue | 5
8 files changed, 237 insertions(+), 152 deletions(-)
diff --git a/src/pages/components/juminYanglaoBaoxian/baoxianForm.vue b/src/pages/components/juminYanglaoBaoxian/baoxianForm.vue
index f021db4..99ccfdd 100644
--- a/src/pages/components/juminYanglaoBaoxian/baoxianForm.vue
+++ b/src/pages/components/juminYanglaoBaoxian/baoxianForm.vue
@@ -1,6 +1,7 @@
<template>
<div class="baoxianForm-wrap" :style="{paddingTop : paddingTop + 'rem'}">
<el-table
+ :max-height="tableHeight"
border
style="width: 100%"
:data="tableData">
@@ -76,6 +77,7 @@
<script>
import {getInsuranceTable} from '@/api/shehuiBaozhang'
+ import nowSize from "../../../libs/nowSize";
export default {
name: "baoxianForm",
props: {
@@ -92,7 +94,8 @@
},
data() {
return {
- tableData:[]
+ tableData:[],
+ tableHeight: window.innerHeight - nowSize(230)
}
},
mounted() {
diff --git a/src/pages/components/qiyezhigongShebao/zhigongShebao.vue b/src/pages/components/qiyezhigongShebao/zhigongShebao.vue
index a79e2fd..fd8cd81 100644
--- a/src/pages/components/qiyezhigongShebao/zhigongShebao.vue
+++ b/src/pages/components/qiyezhigongShebao/zhigongShebao.vue
@@ -1,6 +1,7 @@
<template>
<div class="zhigongShebao-wrap">
<el-table
+ :height="tableHeight"
border
:data="tableData"
:header-cell-style="handleheader"
@@ -55,6 +56,7 @@
<script>
import {getSecurityTable} from '@/api/shehuiBaozhang'
import zhigongshebaoForm from "./zhigongshebaoForm";
+ import nowSize from "../../../libs/nowSize";
export default {
name: "chengzhenXinzengJiuye",
components: {
@@ -64,7 +66,8 @@
data() {
return {
zhigongshebaoVisiable: false, //寮规
- tableData: []
+ tableData: [],
+ tableHeight: window.innerHeight - nowSize(230)
}
},
mounted() {
@@ -88,7 +91,16 @@
return {
lineHeight: '2.5',
}
+ },
+ getHeight() {
+ this.tableHeight = window.innerHeight - nowSize(230)
}
+ },
+ created() {
+ window.addEventListener('resize', this.getHeight)
+ },
+ destroyed() {
+ window.addEventListener('resize', this.getHeight)
}
}
</script>
diff --git a/src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruForm.vue b/src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruForm.vue
index cec2e7f..4d71132 100644
--- a/src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruForm.vue
+++ b/src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruForm.vue
@@ -3,34 +3,29 @@
<div class="danwei-box">鍗曚綅锛氫汉</div>
<div class="shebaoZhengjiShouruForm-table">
<el-table
+ :max-height="tableHeight"
border
style="width: 100%"
:data="tableData">
<el-table-column
- width="200"
align="center"
prop="area"
label="鍘匡紙甯傘�佸尯锛�">
</el-table-column>
<el-table-column
align="center"
- prop="enterprise"
- label="浼佷笟鍏昏�佷繚闄╁熀閲戝緛缂存敹鍏�">
+ prop="inJobs"
+ :label="label">
</el-table-column>
<el-table-column
align="center"
- prop="resident"
- label="鍩庝埂灞呮皯鍏昏�佷繚闄╁熀閲戝緛缂存敹鍏�">
+ prop="income"
+ label="寰佺即鏀跺叆锛堜竾鍏冿級">
</el-table-column>
<el-table-column
align="center"
- prop="injuryInsurance"
- label="宸ヤ激淇濋櫓鍩洪噾寰佺即鏀跺叆">
- </el-table-column>
- <el-table-column
- align="center"
- prop="careerInsurance"
- label="澶变笟淇濋櫓鍩洪噾寰佺即鏀跺叆">
+ prop="average"
+ label="浜哄潎锛堝厓锛�">
</el-table-column>
</el-table>
</div>
@@ -38,6 +33,7 @@
</template>
<script>
+ import nowSize from "../../../libs/nowSize";
export default {
name: "shebaoZhengjiShouruForm",
props: {
@@ -46,12 +42,27 @@
default: () => {
return []
}
+ },
+ label: {
+ type: String,
+ default: '鍦ㄨ亴鑱屽伐锛堜汉锛�'
}
},
data() {
return {
- tableData: []
+ tableHeight: window.innerHeight - nowSize(350)
}
+ },
+ methods: {
+ getHeight() {
+ this.tableHeight = window.innerHeight - nowSize(350)
+ }
+ },
+ created() {
+ window.addEventListener('resize', this.getHeight)
+ },
+ destroyed() {
+ window.addEventListener('resize', this.getHeight)
}
}
</script>
diff --git a/src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruTotal.vue b/src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruTotal.vue
index 59dc2dd..25b7326 100644
--- a/src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruTotal.vue
+++ b/src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruTotal.vue
@@ -3,6 +3,7 @@
<div class="danwei-box">鍗曚綅锛氫汉</div>
<div class="shebaoZhengjiShouruForm-table">
<el-table
+ :max-height="tableHeight"
border
style="width: 100%"
:data="totalTableData">
@@ -38,6 +39,7 @@
</template>
<script>
+ import nowSize from "../../../libs/nowSize";
export default {
name: "shebaoZhengjiShouruTotal",
props: {
@@ -50,7 +52,19 @@
},
data() {
return {
+ tableHeight: window.innerHeight - nowSize(350)
}
+ },
+ methods: {
+ getHeight() {
+ this.tableHeight = window.innerHeight - nowSize(350)
+ }
+ },
+ created() {
+ window.addEventListener('resize', this.getHeight)
+ },
+ destroy() {
+ window.addEventListener('resize', this.getHeight)
}
}
</script>
diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhang.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhang.vue
index 9940d02..523a108 100644
--- a/src/pages/show/shehuiBaozhang/shehuiBaozhang.vue
+++ b/src/pages/show/shehuiBaozhang/shehuiBaozhang.vue
@@ -56,72 +56,72 @@
</template>
<script>
-export default {
- name: "shehuiBaozhang"
-}
+ export default {
+ name: "shehuiBaozhang"
+ }
</script>
<style lang="scss">
-.shehuiBaozhang-menu-left{
- .el-menu{
- background-color: transparent;
- border-right:none;
+ .shehuiBaozhang-menu-left{
+ .el-menu{
+ background-color: transparent;
+ border-right:none;
+ }
+ .el-menu-item, .el-submenu__title{
+ height: 0.3125rem /* 80/256 */;
+ margin: 0.1171875rem /* 30/256 */ 0;
+ }
+ .el-menu-item{
+ background:url("../../../assets/images/jiuye-menu-normal.png") no-repeat center;
+ background-size: 100% 100%;
+ width: 0.75rem /* 192/256 */;
+ height: 0.3125rem /* 80/256 */;
+ display: flex;
+ justify-content: center;
+ padding: 0px!important;
+ }
+ .el-menu-item.is-active{
+ background:url("../../../assets/images/jiuye-menu-active.png") no-repeat center;
+ background-size: 100% 100%;
+ width: 0.75rem /* 192/256 */;
+ height: 0.3125rem /* 80/256 */;
+ }
}
- .el-menu-item, .el-submenu__title{
- height: 0.3125rem /* 80/256 */;
- margin: 0.1171875rem /* 30/256 */ 0;
- }
- .el-menu-item{
- background:url("../../../assets/images/jiuye-menu-normal.png") no-repeat center;
- background-size: 100% 100%;
- width: 0.75rem /* 192/256 */;
- height: 0.3125rem /* 80/256 */;
- display: flex;
- justify-content: center;
- padding: 0px!important;
- }
- .el-menu-item.is-active{
- background:url("../../../assets/images/jiuye-menu-active.png") no-repeat center;
- background-size: 100% 100%;
- width: 0.75rem /* 192/256 */;
- height: 0.3125rem /* 80/256 */;
- }
-}
</style>
<style lang="scss" scoped>
-@import "../../../assets/css/base";
-@import "../../../assets/css/mixin";
-.shehuiBaozhang-wrap{
- width: 100%;
- padding: 0.078125rem /* 20/256 */;
- box-sizing: border-box;
- display: flex;
- .shehuiBaozhang-menu-left{
- width: 0.9375rem /* 240/256 */;
- height: 5.2734375rem /* 1350/256 */;
- background:url("../../../assets/images/jiuye-menu-bj.png") no-repeat center;
- background-size: 100% 100%;
- padding: 0.15625rem /* 40/256 */ 0;
+ @import "../../../assets/css/base";
+ @import "../../../assets/css/mixin";
+ .shehuiBaozhang-wrap{
+ width: 100%;
+ padding: 0.078125rem /* 20/256 */;
box-sizing: border-box;
display: flex;
- justify-content: center;
- .menu-left-block{
- h1{
- font-size: $fontSize-24;
- color: $color-blue;
- text-align: center;
- line-height: 0.3125rem /* 80/256 */;
+ height: calc(100% - 0.390625rem /* 100/256 */);
+ .shehuiBaozhang-menu-left{
+ width: 0.9375rem /* 240/256 */;
+ height: 5.2734375rem /* 1350/256 */;
+ background:url("../../../assets/images/jiuye-menu-bj.png") no-repeat center;
+ background-size: 100% 100%;
+ padding: 0.15625rem /* 40/256 */ 0;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ .menu-left-block{
+ h1{
+ font-size: $fontSize-24;
+ color: $color-blue;
+ text-align: center;
+ line-height: 0.3125rem /* 80/256 */;
+ }
}
}
+ .shehuiBaozhang-menu-right{
+ width: calc(100% - 0.9375rem);
+ padding: 0 0.078125rem /* 20/256 */;
+ box-sizing: border-box;
+ height: 100%;
+ }
}
- .shehuiBaozhang-menu-right{
- flex: 1;
- padding: 0 0.078125rem /* 20/256 */;
- box-sizing: border-box;
- height: 5.27344rem;
- @include overflow-y();
- }
-}
</style>
diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
index a5c8815..05a9df6 100644
--- a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
+++ b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
@@ -1,23 +1,85 @@
<template>
<div class="shebaoChikaRenshu-wrap">
<h1>鍚勫幙锛堝競銆佸尯锛�2021骞村氨涓氭儏鍐电粺璁¤〃</h1>
- <el-tabs v-model="activeName">
- <el-tab-pane label="鎬昏" name="first">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- <el-tab-pane label="浼佷笟鑱屽伐鍏昏�佷繚闄�" name="second">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- <el-tab-pane label="鍩庝埂灞呮皯鍏昏�佷繚闄�" name="third">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- <el-tab-pane label="宸ヤ激淇濋櫓" name="fourth">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- <el-tab-pane label="澶变笟淇濋櫓" name="five">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- </el-tabs>
+ <el-table
+ :data="tableData"
+ stripe
+ border
+ style="width: 100%">
+ <el-table-column
+ align="center"
+ prop="dataName"
+ label="鎸囨爣鍚嶇О"
+ fixed="left"
+ width="220">
+ </el-table-column>
+ <el-table-column
+ prop="yearFinish"
+ align="center"
+ label="鍘诲勾瀹屾垚"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="january"
+ align="center"
+ label="1鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="february"
+ align="center"
+ label="2鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="march"
+ align="center"
+ label="3鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="april"
+ align="center"
+ label="4鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="may"
+ align="center"
+ label="5鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="june"
+ align="center"
+ label="6鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="july"
+ align="center"
+ label="7鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="august"
+ align="center"
+ label="8鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="september"
+ align="center"
+ label="9鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="october"
+ align="center"
+ label="10鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="november"
+ align="center"
+ label="11鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="december"
+ align="center"
+ label="12鏈�">
+ </el-table-column>
+ </el-table>
</div>
</template>
@@ -30,7 +92,7 @@
},
data() {
return {
- activeName: 'first'
+ tableData: [],
}
}
}
@@ -39,45 +101,38 @@
<style lang="scss">
@import "../../../../assets/css/base";
.shebaoChikaRenshu-wrap{
- .el-tabs__nav-wrap::after{
- background-color: transparent;
- height: 0;
+ .el-table tr{
+ background-color: #CEF2FF;
}
- .el-tabs__nav-scroll{
- display: flex;
- justify-content: center;
+ .el-table th.el-table__cell{
+ background-color: #51D2FF;
}
- .el-tabs__item{
- width: 0.9375rem /* 240/256 */;
- height: 0.25rem /* 64/256 */;
- background: rgba(81,210,255,0.08);
- border: 1Px solid #0097cc; /*no*/
- color: #9CE6FF;
- font-size: $fontSize-24;
- margin: 0 0.078125rem /* 20/256 */ /* 10/10 */;
- display: flex;
- justify-content: center;
- align-items: center;
+ .el-table__fixed, .el-table__fixed-right,.el-table__fixed-right::before, .el-table__fixed::before{
+ background-color: #51D2FF;
}
- .el-tabs__item.is-active{
- width: 0.9375rem /* 240/256 */;
- height: 0.25rem /* 64/256 */;
- background: #00a6e1;
- border: 1Px solid #51d2ff;
- box-shadow: 0Px 3Px 10Px 0Px rgba(255,255,255,0.80) inset;
- color: $color-white;
- font-size: $fontSize-24;
- display: flex;
- justify-content: center;
- align-items: center;
+ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+ background-color: #A8E9FF;
}
- .el-tabs__nav{
- width: 100%;
- display: flex;
- justify-content: center;
+ .el-table thead{
+ color: #111111;
}
- .el-tabs__active-bar{
- height: 0;
+ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+ border-bottom: 1Px solid #8E8E8E;
+ }
+ .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
+ border-right: 1Px solid #8E8E8E;
+ }
+ .el-table .el-table__cell{
+ padding: 0.0859375rem /* 22/256 */ 0;
+ }
+ .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
+ background: transparent;
+ }
+ .el-table .cell{
+ font-size: $fontSize-28;
+ color: $color-darkGrey;
+ font-weight: 300;
+ line-height: 1;
}
}
</style>
diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoZhengjiShouru.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoZhengjiShouru.vue
index ee58371..6377802 100644
--- a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoZhengjiShouru.vue
+++ b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoZhengjiShouru.vue
@@ -12,14 +12,17 @@
<el-tab-pane label="鎬昏" name="1">
<shebaoZhengjiShouruTotal :totalTableData="totalTableData"></shebaoZhengjiShouruTotal>
</el-tab-pane>
- <el-tab-pane label="澶变笟鍐嶅氨涓�" name="2">
- <shebaoZhengjiShouruForm :tableData="tableData"></shebaoZhengjiShouruForm>
+ <el-tab-pane label="浼佷笟鑱屽伐鍏昏�佷繚闄�" name="2">
+ <shebaoZhengjiShouruForm :tableData="tableData" label="鍦ㄨ亴鑱屽伐锛堜汉锛�" type="1"></shebaoZhengjiShouruForm>
</el-tab-pane>
- <el-tab-pane label="灏变笟鍥伴毦浜哄憳鍐嶅氨涓�" name="3">
- <shebaoZhengjiShouruForm :tableData="tableData"></shebaoZhengjiShouruForm>
+ <el-tab-pane label="鍩庝埂灞呮皯鍏昏�佷繚闄�" name="3">
+ <shebaoZhengjiShouruForm :tableData="tableData" label="鍙備繚浜烘暟锛堜汉锛�" type="3"></shebaoZhengjiShouruForm>
</el-tab-pane>
- <el-tab-pane label="鐧昏澶变笟鐜�" name="4">
- <shebaoZhengjiShouruForm :tableData="tableData"></shebaoZhengjiShouruForm>
+ <el-tab-pane label="澶变笟淇濋櫓" name="4">
+ <shebaoZhengjiShouruForm :tableData="tableData" label="鍙備繚浜烘暟锛堜汉锛�" type="4"></shebaoZhengjiShouruForm>
+ </el-tab-pane>
+ <el-tab-pane label="宸ヤ激淇濋櫓" name="5">
+ <shebaoZhengjiShouruForm :tableData="tableData" label="鍙備繚浜烘暟锛堜汉锛�" type="5"></shebaoZhengjiShouruForm>
</el-tab-pane>
</el-tabs>
</div>
@@ -40,27 +43,12 @@
totalTableData: [],
tableData: [],
activeName: '1',
- tabMenuList: [{
- name: '鎬昏',
- id: 1
- },{
- name: '浼佷笟鑱屽伐鍏昏�佷繚闄�',
- id: 2
- },{
- name: '鍩庝埂灞呮皯鍏昏�佷繚闄�',
- id: 3
- },{
- name: '宸ヤ激淇濋櫓',
- id: 4
- },{
- name: '澶变笟淇濋櫓',
- id: 5
- }]
+ type:'1',
}
},
mounted() {
this.getFundincomeTable()
- this.getAverageTable()
+
},
methods: {
getFundincomeTable() {
@@ -71,14 +59,16 @@
})
},
getAverageTable() {
- getAverageTable().then(res => {
+ getAverageTable({type: this.type}).then(res => {
if(res.code == 1000) {
this.tableData = res.list
}
})
},
tabHandleClick(tab) {
-
+ console.log('tab------',tab)
+ this.type = tab.name
+ this.getAverageTable()
}
}
}
diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue
index 30e2521..febbe73 100644
--- a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue
+++ b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue
@@ -2,7 +2,7 @@
<div class="shehuiBaoxian-wrap">
<div class="shehuiBaoxian-table">
<h1>绀句細淇濋櫓鍙備繚浜哄憳缁熻琛�</h1>
- <div class="danwei-box">鍗曚綅:涓囦汉</div>
+ <div class="danwei-box">鍗曚綅:涓囦汉</div>
<el-table
max-height="640"
:data="tableData"
@@ -84,8 +84,8 @@
label="12鏈�">
</el-table-column>
</el-table>
- <div class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div>
</div>
+ <div class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div>
</div>
</template>
@@ -152,7 +152,7 @@
itemWidth: nowSize(30),
itemHeight: nowSize(4),
itemGap: nowSize(50),
- right:'2%',
+ right:'8%',
top: 'center',
orient: 'vertical',
textStyle: {
@@ -163,7 +163,7 @@
grid: {
top: '15%',
left: '4%',
- right: '20%',
+ right: '25%',
bottom: '3%',
containLabel: true
},
@@ -287,7 +287,6 @@
height: 100%;
.shehuiBaoxian-table{
width: 100%;
- height: 100%;
position: relative;
.danwei-box{
position: absolute;
@@ -305,6 +304,7 @@
}
}
.shehuiBaoxianEcharts{
+ width: 100%;
height: calc(100% - 640px - 0.33203125rem /* 85/256 */);
}
}
--
Gitblit v1.9.1