就业情况页面

zhangxiaoxu123456

2022-04-08 a855dede3180f49108d77f59f99d7d243de04f59

就业情况页面

 src/assets/css/base.scss

@@ -1,6 +1,7 @@
$fontSize-20: 2rem;
$fontSize-24: 2.4rem;
$fontSize-26: 2.6rem;
$fontSize-28: 2.8rem;
$fontSize-30: 3rem;
$fontSize-32: 3.2rem;
$fontSize-48: 4.8rem;
@@ -8,3 +9,5 @@
$color-blue: #51D2FF;
$color-white: #fff;
$color-dark:#05336A;
$color-grey:#8E8E8E;
$color-darkGrey:#111111;

 src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue

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

<script>
    export default {
        name: "chengzhenXinzengJiuye",
        data() {
            return {
                tableData: [{
                    shiqu:'全市',
                    date: '233322',
                    name: '4432',
                    address: '122'
                }, {
                    shiqu:'长安区',
                    date: '23322',
                    name: '12222',
                    address: '4445'
                }, {
                    shiqu:'桥西区',
                    date: '4432',
                    name: '455',
                    address: '5999'
                }, {
                    shiqu:'新华区',
                    date: '5632',
                    name: '145',
                    address: '624'
                }]
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../assets/css/base";
  .chengzhenXinzengJiuye-wrap{
    width: 100%;
    margin-top: 2rem;
    .el-table th.el-table__cell{
      background-color:$color-blue;
    }
    .el-table tr{
      height: 6.4rem;
    }
    .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 scoped>

</style>

 src/pages/show/jiuyeAndChuangye/jiuyeAndChuangye.vue

@@ -7,12 +7,12 @@
              <h1>劳动就业统计</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
          <el-menu-item index="chuangyeDanbaoDaikuan">
            <div class="menu-left-block">
              <h1>创业担保贷款</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
          <el-menu-item index="/jiuyeQingkuang">
            <div class="menu-left-block">
              <h1>就业情况</h1>
            </div>

 src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue

New file
@@ -0,0 +1,46 @@
<template>
    <div class="biyeshengStatistics-wrap">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>项目</th>
            <th>2017年</th>
            <th>2018年</th>
            <th>2019年</th>
            <th>2020年</th>
            <th>2021年</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th rowspan="3">1</th>
            <td>全国高校本市生源</td>
            <td>2642</td>
            <td>6879</td>
            <td>1586</td>
            <td>8651</td>
            <td>45682</td>
          </tr>
          <tr>
            <td>其中：本科毕业生</td>
            <td>2642</td>
            <td>6879</td>
            <td>1586</td>
            <td>8651</td>
            <td>45682</td>
          </tr>
        </tbody>
      </table>
    </div>
</template>

<script>
    export default {
        name: "biyeshengStatistics"
    }
</script>

<style scoped>

</style>

 src/pages/show/jiuyeAndChuangye/jiuyeChildren/chuangyeDanbaoDaikuan.vue

New file
@@ -0,0 +1,177 @@
<template>
    <div class="chuangyeDanbaoDaikuan-wrap">
       <div class="danbaotongjibiao-box">
         <h1>创业担保贷款统计表</h1>
         <table class="chuangye-table-box">
           <thead>
              <tr>
                <th>
                  <div class="biaotou-box">
                    <span class="time">时间</span>
                    <span class="xiaomu">项目</span>
                  </div>
                </th>
                <th>放贷笔数（笔）</th>
                <th>放贷金额</th>
                <th>直接扶持自主创业（人）</th>
                <th>带动就业（人）</th>
              </tr>
           </thead>
           <tbody>
              <tr>
                <th>12月</th>
                <td>57</td>
                <td>5327</td>
                <td>57</td>
                <td>57</td>
              </tr>
              <tr>
                <th>1——12月累计</th>
                <td>257</td>
                <td>1327</td>
                <td>57</td>
                <td>57</td>
              </tr>
              <tr>
                <th>总累计 （2003年至今）</th>
                <td>45257</td>
                <td>1327.5</td>
                <td>5557</td>
                <td>16757</td>
              </tr>
           </tbody>
         </table>
       </div>
      <div class="danbaotongjibiao-box">
        <h1>创业担保贷款统计表</h1>
        <table class="chuangye-table-box">
          <thead>
            <tr>
            <th>产业园名称</th>
            <th>开园运营时间</th>
            <th>建筑面积（万平方米）</th>
            <th>营业收入（亿元）</br>（含代收代付）</th>
            <th>纳税额（亿元）</th>
            <th>引进高层次人才（人）</th>
          </tr>
          </thead>
          <tbody>
            <tr>
              <th colspan="2">中国石家庄人力资源服务产业园</th>
              <td>57</td>
              <td>5327</td>
              <td>57</td>
              <td>57</td>
            </tr>
            <tr>
              <th>高新园区</th>
              <td>2019/6/28</td>
              <td>1327</td>
              <td>57</td>
              <td>57</td>
              <td>2357</td>
            </tr>
            <tr>
              <th>桥西园区</th>
              <td>2019/6/28</td>
              <td>1327.5</td>
              <td>5557</td>
              <td>16757</td>
              <td>16757</td>
            </tr>
            <tr>
              <th>正定园区</th>
              <td>2019/6/28</td>
              <td>1327.5</td>
              <td>5557</td>
              <td>16757</td>
              <td>16757</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</template>

<script>
    export default {
        name: "chuangyeDanbaoDaikuan",
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../../assets/css/base";
  .chuangyeDanbaoDaikuan-wrap{
    width: 100%;
    height: 100%;
    .danbaotongjibiao-box{
      margin-top: 2rem;
      h1{
        font-size: $fontSize-30;
        color: $color-white;
        text-align: center;
        line-height: 2;
      }
    }
    .chuangye-table-box{
      width: 100%;
      border: 1px solid $color-grey; /*no*/
      border-collapse:collapse;
      table-layout: fixed;
      thead{
        background-color: $color-blue;
        height: 11.2rem  /* 112/10 */;
        th,td{
          color: $color-darkGrey;
          border:1px solid $color-grey; /*no*/
          font-weight: 300;
          font-size: $fontSize-28;
        }
      }
      .biaotou-box{
        position: relative;
        &::after{
          content: '';
          width: calc(100%);
          height: 1px; /*no*/
          background-color: $color-grey;
          position: absolute;
          left: -0.1rem  /* -1/10 */;
          top: 0rem  /* 22/10 */;
          transform: rotate(10deg);
        }
        .time{
          position: absolute;
          left: 10rem;
          top: 0rem;
          font-size: $fontSize-28;
          font-weight: 300;
        }
        .xiaomu{
          position: absolute;
          right: 10rem;
          top: -3rem;
          font-size: $fontSize-28;
          font-weight: 300;
        }
      }
      tbody{
        background-color: #CEF2FF;
        height: 11.2rem  /* 112/10 */;
        th,td{
          color: $color-darkGrey;
          line-height: 11.2rem;
          text-align: center;
          border:1px solid $color-grey; /*no*/
          font-weight: 300;
          font-size: $fontSize-28;
        }
      }
    }
  }
</style>

 src/pages/show/jiuyeAndChuangye/jiuyeChildren/jiuyeQingkuang.vue

New file
@@ -0,0 +1,94 @@
<template>
    <div class="jiuyeQingkuang-wrap">
      <h1>各县（市、区）2021年就业情况统计表</h1>
      <el-tabs v-model="activeName">
        <el-tab-pane label="城镇新增就业" name="first">
          <chengzhenXinzengJiuye></chengzhenXinzengJiuye>
        </el-tab-pane>
        <el-tab-pane label="失业再就业" name="second">
          <chengzhenXinzengJiuye></chengzhenXinzengJiuye>
        </el-tab-pane>
        <el-tab-pane label="就业困难人员再就业" name="third">
          <chengzhenXinzengJiuye></chengzhenXinzengJiuye>
        </el-tab-pane>
        <el-tab-pane label="登记失业率" name="fourth">
          <chengzhenXinzengJiuye></chengzhenXinzengJiuye>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

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

<style lang="scss">
  @import "../../../../assets/css/base";
  .jiuyeQingkuang-wrap{
    .el-tabs__nav-wrap::after{
      background-color: transparent;
      height: 0;
    }
    .el-tabs__nav-scroll{
      display: flex;
      justify-content: center;
    }
    .el-tabs__item{
      width: 24rem;
      height: 6.4rem;
      background: rgba(81,210,255,0.08);
      border: 1px solid #0097cc; /*no*/
      color: #9CE6FF;
      font-size: $fontSize-24;
      margin: 0 2rem  /* 10/10 */;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-tabs__item.is-active{
      width: 24rem;
      height: 6.4rem;
      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";
  .jiuyeQingkuang-wrap{
    width: 100%;
    height: 100%;
    h1{
      font-size: $fontSize-30;
      color: $color-white;
      text-align: center;
      line-height: 2;
      margin-bottom: 2rem;
    }
  }
</style>

 src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue

@@ -134,6 +134,7 @@
</script>

<style lang="scss">
  @import "../../../../assets/css/base";
  .workStatistics-table{
    .el-table tr{
      background-color: #CEF2FF;
@@ -162,6 +163,12 @@
    .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>
<style lang="scss" scoped>

 src/pages/show/shehuiBaozhang/shehuiBaozhang.vue

@@ -7,7 +7,7 @@
            <h1>社会保险</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
        <el-menu-item index="/shebaoShouzhiZongbiao">
          <div class="menu-left-block">
            <h1>社保收支总表</h1>
          </div>

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

New file
@@ -0,0 +1,13 @@
<template>
    <div>1111</div>
</template>

<script>
    export default {
        name: "shebaoShouzhiZongbiao"
    }
</script>

<style scoped>

</style>

 src/router/router.js

@@ -15,6 +15,8 @@
          name: 'jiuyeAndChuangye',
          children: [
           { path: '/workStatistics', meta: {title: '就业创业'}, name: 'workStatistics',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue')},
           { path: '/chuangyeDanbaoDaikuan', meta: {title: '创业担保贷款'}, name: 'chuangyeDanbaoDaikuan',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/chuangyeDanbaoDaikuan.vue')},
           { path: '/jiuyeQingkuang', meta: {title: '就业情况'}, name: 'jiuyeQingkuang',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/jiuyeQingkuang.vue')},
         ]
        },
        {
@@ -24,6 +26,7 @@
          name: 'shehuiBaozhang',
          children: [
            { path: '/shehuiBaoxian', meta: {title:'社会保障'}, name: 'shehuiBaoxian', component: () => import('@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue')},
            { path: '/shebaoShouzhiZongbiao', meta: {title:'社保收支总表'}, name: 'shebaoShouzhiZongbiao', component: () => import('@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue')},
          ]
        }
    ]