社保卡征集收入及社保卡持卡人数页面

zhangxiaoxu123456

2022-04-13 b0e391f5488aead9e56dc725b69cd81ba36f917d

社保卡征集收入及社保卡持卡人数页面

 src/pages/components/juminYanglaoBaoxian/baoxianForm.vue

New file
@@ -0,0 +1,146 @@
<template>
  <div class="baoxianForm-wrap">
    <el-table
      border
      style="width: 100%"
      :data="tableData">
      <el-table-column
        width="200"
        align="center"
        prop="name"
        label="县（市、区）">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="1月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="1月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="2月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="3月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="4月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="5月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="6月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="7月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="8月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="9月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="10月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="11月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="12月">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    export default {
        name: "baoxianForm",
        data() {
            return {
                tableData:[{
                    name: '全市',
                    month: '23233'
                },{
                    name: '市本级',
                    month: '23233'
                },{
                    name: '长安区',
                    month: '23233'
                }]
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../assets/css/base";
  .baoxianForm-wrap{
    width: 100%;
    height: calc(100% - 0.234375rem  /* 60/256 */);
    padding-top: 0.234375rem  /* 60/256 */;
    .el-table th.el-table__cell{
      background-color:$color-blue;
    }
    .el-table .el-table__body-wrapper tr{
      height: 0.265625rem  /* 68/256 */;
    }
    .el-table tr:nth-child(odd){
      background-color: #CEF2FF;
    }
    .el-table tr:nth-child(even){
      background-color: #A8E9FF;
    }
    .el-table, .el-table__expanded-cell{
      background-color: transparent;
    }
    .el-table thead{
      color: $color-darkGrey;
    }
    .el-table{
      color: $color-darkGrey;
    }
    .el-table .cell{
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom:1Px solid $color-grey; /*no*/
    }
    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-right:1Px solid $color-grey; /*no*/
    }
  }
</style>

<style lang="scss" scoped>

</style>

 src/pages/show/shehuiBaozhang/shehuiBaozhang.vue

@@ -22,27 +22,27 @@
            <h1>机关职工社保</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
        <el-menu-item index="/juminYanglaoBaoxian">
          <div class="menu-left-block">
            <h1>居民养老保险</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
        <el-menu-item index="/shiyeBaoxian">
          <div class="menu-left-block">
            <h1>失业保险</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
        <el-menu-item index="/gongshangBaoxian">
          <div class="menu-left-block">
            <h1>工伤保险</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
        <el-menu-item index="/shebaoZhengjiShouru">
          <div class="menu-left-block">
            <h1>社保征缴收入</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
        <el-menu-item index="/shebaoChikaRenshu">
          <div class="menu-left-block">
            <h1>社保卡持卡人数</h1>
          </div>

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/gongshangBaoxian.vue

New file
@@ -0,0 +1,36 @@
<template>
  <div class="juminYanglaoBaoxian-wrap">
    <div class="danwei-box">单位：人</div>
    <baoxianForm></baoxianForm>
  </div>
</template>

<script>
    import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
    export default {
        name: "juminYanglaoBaoxian",
        components: {
            baoxianForm
        },
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../../assets/css/base";
  .juminYanglaoBaoxian-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    .danwei-box{
      position: absolute;
      right: 0;
      top: 0;
      color: $color-white;
    }
  }
</style>

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/juminYanglaoBaoxian.vue

New file
@@ -0,0 +1,36 @@
<template>
    <div class="juminYanglaoBaoxian-wrap">
      <div class="danwei-box">单位：人</div>
      <baoxianForm></baoxianForm>
    </div>
</template>

<script>
  import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
    export default {
        name: "juminYanglaoBaoxian",
        components: {
            baoxianForm
        },
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../../assets/css/base";
  .juminYanglaoBaoxian-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    .danwei-box{
      position: absolute;
      right: 0;
      top: 0;
      color: $color-white;
    }
  }
</style>

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue

New file
@@ -0,0 +1,97 @@
<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>
  </div>
</template>

<script>
    import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
    export default {
        name: "shebaoChikaRenshu",
        components: {
            baoxianForm,  //城镇新增就业
        },
        data() {
            return {
                activeName: 'first'
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../../assets/css/base";
  .shebaoChikaRenshu-wrap{
    .el-tabs__nav-wrap::after{
      background-color: transparent;
      height: 0;
    }
    .el-tabs__nav-scroll{
      display: flex;
      justify-content: center;
    }
    .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-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-tabs__nav{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .el-tabs__active-bar{
      height: 0;
    }
  }
</style>
<style lang="scss" scoped>
  @import "../../../../assets/css/base";
  .shebaoChikaRenshu-wrap{
    width: 100%;
    height: 100%;
    h1{
      font-size: $fontSize-30;
      color: $color-white;
      text-align: center;
      line-height: 2;
      margin-bottom: 0.078125rem  /* 20/256 */;
    }
  }
</style>

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoZhengjiShouru.vue

New file
@@ -0,0 +1,94 @@
<template>
  <div class="shebaoZhengjiShouru-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-tabs>
  </div>
</template>

<script>
  import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
    export default {
        name: "jiuyeQingkuang",
        components: {
            baoxianForm,
        },
        data() {
            return {
                activeName: 'first'
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../../assets/css/base";
  .shebaoZhengjiShouru-wrap{
    .el-tabs__nav-wrap::after{
      background-color: transparent;
      height: 0;
    }
    .el-tabs__nav-scroll{
      display: flex;
      justify-content: center;
    }
    .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-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-tabs__nav{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .el-tabs__active-bar{
      height: 0;
    }
  }
</style>
<style lang="scss" scoped>
  @import "../../../../assets/css/base";
  .shebaoZhengjiShouru-wrap{
    width: 100%;
    height: 100%;
    h1{
      font-size: $fontSize-30;
      color: $color-white;
      text-align: center;
      line-height: 2;
      margin-bottom: 0.078125rem  /* 20/256 */;
    }
  }
</style>

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shiyeBaoxian.vue

New file
@@ -0,0 +1,36 @@
<template>
  <div class="shiyeBaoxian-wrap">
    <div class="danwei-box">单位：人</div>
    <baoxianForm></baoxianForm>
  </div>
</template>

<script>
    import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
    export default {
        name: "juminYanglaoBaoxian",
        components: {
            baoxianForm
        },
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../../assets/css/base";
  .shiyeBaoxian-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    .danwei-box{
      position: absolute;
      right: 0;
      top: 0;
      color: $color-white;
    }
  }
</style>

 src/router/router.js

@@ -109,6 +109,51 @@
          component: () =>
            import(
              "@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/jiguanzhigongShebao.vue"
            )
        },
        {
          path: "/juminYanglaoBaoxian",
          meta: { title: "居民养老保险" },
          name: "juminYanglaoBaoxian",
          component: () =>
            import(
              "@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/juminYanglaoBaoxian.vue"
            )
        },
        {
          path: "/shiyeBaoxian",
          meta: { title: "失业保险" },
          name: "shiyeBaoxian",
          component: () =>
            import(
              "@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shiyeBaoxian.vue"
            )
        },
        {
          path: "/gongshangBaoxian",
          meta: { title: "工伤保险" },
          name: "gongshangBaoxian",
          component: () =>
            import(
              "@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/gongshangBaoxian.vue"
              )
        },
        {
          path: "/shebaoZhengjiShouru",
          meta: { title: "社保征集收入明细" },
          name: "shebaoZhengjiShouru",
          component: () =>
            import(
              "@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoZhengjiShouru.vue"
              )
        },
        {
          path: "/shebaoChikaRenshu",
          meta: { title: "社保卡持卡人数" },
          name: "shebaoChikaRenshu",
          component: () =>
            import(
              "@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue"
              )
        }
      ]