社会保障细节样式

zhangxiaoxu123456

2022-04-24 038b8a1d35652b8967f520583069aef5422e7484

社会保障细节样式

 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() {

 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>

 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>

 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>

 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>

 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>

 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()
            }
        }
    }

 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 */);
    }
  }