From a855dede3180f49108d77f59f99d7d243de04f59 Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123456 <zxx19900626> Date: 星期五, 08 四月 2022 16:49:17 +0800 Subject: [PATCH] 就业情况页面 --- src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue | 150 ++++++++++++++++ src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue | 7 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue | 13 + src/pages/show/jiuyeAndChuangye/jiuyeAndChuangye.vue | 4 src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue | 46 +++++ src/pages/show/jiuyeAndChuangye/jiuyeChildren/jiuyeQingkuang.vue | 94 ++++++++++ src/pages/show/jiuyeAndChuangye/jiuyeChildren/chuangyeDanbaoDaikuan.vue | 177 +++++++++++++++++++ src/router/router.js | 3 src/pages/show/shehuiBaozhang/shehuiBaozhang.vue | 2 src/assets/css/base.scss | 3 10 files changed, 496 insertions(+), 3 deletions(-) diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss index 918cbb1..a501918 100644 --- a/src/assets/css/base.scss +++ b/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; diff --git a/src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue b/src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue new file mode 100644 index 0000000..757b421 --- /dev/null +++ b/src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue @@ -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> diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeAndChuangye.vue b/src/pages/show/jiuyeAndChuangye/jiuyeAndChuangye.vue index 1f6f7e0..5991f12 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeAndChuangye.vue +++ b/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> diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue new file mode 100644 index 0000000..731c76c --- /dev/null +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue @@ -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> diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/chuangyeDanbaoDaikuan.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/chuangyeDanbaoDaikuan.vue new file mode 100644 index 0000000..c7dc4aa --- /dev/null +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/chuangyeDanbaoDaikuan.vue @@ -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>锛堝惈浠f敹浠d粯锛�</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>姝e畾鍥尯</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> diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/jiuyeQingkuang.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/jiuyeQingkuang.vue new file mode 100644 index 0000000..4d95d3e --- /dev/null +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/jiuyeQingkuang.vue @@ -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> diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue index c552ce8..4346a17 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue +++ b/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> diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhang.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhang.vue index 44c3992..5a30b8f 100644 --- a/src/pages/show/shehuiBaozhang/shehuiBaozhang.vue +++ b/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> diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue new file mode 100644 index 0000000..132f77d --- /dev/null +++ b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue @@ -0,0 +1,13 @@ +<template> + <div>1111</div> +</template> + +<script> + export default { + name: "shebaoShouzhiZongbiao" + } +</script> + +<style scoped> + +</style> diff --git a/src/router/router.js b/src/router/router.js index 984e3c0..b558e5b 100644 --- a/src/router/router.js +++ b/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')}, ] } ] -- Gitblit v1.9.1