From c2d5e97c2ccac4d5d6c620cc4ef07d68e2ba44f8 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期日, 24 四月 2022 10:24:31 +0800
Subject: [PATCH] 人事人才
---
src/pages/show/index/index.vue | 482 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 437 insertions(+), 45 deletions(-)
diff --git a/src/pages/show/index/index.vue b/src/pages/show/index/index.vue
index 4c30389..b196e75 100644
--- a/src/pages/show/index/index.vue
+++ b/src/pages/show/index/index.vue
@@ -4,7 +4,7 @@
<div class="yanglao-block">
<img src="../../../assets/images/yanglao-icon1.png" alt="">
<h1>鍩庨晣鑱屽伐鍏昏�佷繚闄╁弬淇濅汉鏁�</h1>
- <h2><font class="bigger">277.8</font>涓囦汉</h2>
+ <h2><font class="bigger">277.7</font>涓囦汉</h2>
</div>
<div class="yanglao-block">
<img src="../../../assets/images/yanglao-icon2.png" alt="">
@@ -296,7 +296,7 @@
</div>
</div>
- <div class="shuju-echarts"></div>
+ <div class="shuju-echarts" id="jiuyeshujuEcharts"></div>
</div>
</div>
@@ -435,7 +435,7 @@
</div>
</div>
</div>
- <div class="shuju-echarts"></div>
+ <div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
</div>
</div>
@@ -443,7 +443,7 @@
<div class="index-line-box2">
<div class="shu-ju-box">
<div class="shuju-title-box">
- <h1>宸ヤ激淇濋櫓</h1>
+ <h1>澶变笟淇濋櫓</h1>
</div>
<div class="shuju-main-box">
<div class="shuju-table">
@@ -582,7 +582,7 @@
</div>
</div>
- <div class="shuju-echarts"></div>
+ <div class="shuju-echarts" id="shiyeBaoxianEcharts"></div>
</div>
</div>
@@ -726,7 +726,8 @@
</div>
</div>
- <div class="shuju-echarts"></div>
+ <div class="shuju-echarts" id="gongshangBaoxianEcharts"></div>
+ </div>></div>
</div>
</div>
@@ -734,33 +735,423 @@
</div>
</template>
<script>
-export default {};
+ import echarts from "echarts/lib/echarts";
+ import nowSize from "../../../libs/nowSize";
+ export default {
+ name: "index",
+ data() {
+ return {
+
+ }
+ },
+ mounted() {
+ this.jiuyeshujuEcharts()
+ this.chengzhenZhigongYanglaoEcharts()
+ this.shiyeBaoxianEcharts()
+ this.gongshangBaoxianEcharts()
+ },
+ methods: {
+ /*灏变笟鏁版嵁*/
+ jiuyeshujuEcharts() {
+ let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts'))
+ let option = {
+ color : ['#FF5151','#51FF5D','#FFD151'],
+ tooltip: {
+ show: true,
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'],
+ itemWidth: nowSize(24),
+ itemHeight: nowSize(4),
+ itemGap: nowSize(10),
+ right:'0%',
+ top: '0%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(18),
+ }
+ },
+ grid: {
+ top: '20%',
+ left: '1%',
+ right: '5%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(20)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(20)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '鎬绘暟',
+ type: 'line',
+ data: [370, 332, 401, 534, 490, 530, 910]
+ },
+ {
+ name: '鍦ㄨ亴鑱屽伐',
+ type: 'line',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '绂婚��浼�',
+ type: 'line',
+ data: [150, 132, 201, 154, 190, 330, 410]
+ }
+ ]
+ };
+ myEchart.setOption(option)
+ window.addEventListener('resize',function () {
+ myEchart.resize()
+ })
+ },
+ /*鍩庨晣鑱屽伐鍏昏��*/
+ chengzhenZhigongYanglaoEcharts() {
+ let myEchart = this.$echarts.init(document.getElementById('chengzhenZhigongYanglaoEcharts'))
+ let option = {
+ color : ['#FF5151','#51FF5D','#FFD151'],
+ tooltip: {
+ show: true,
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'],
+ itemWidth: nowSize(24),
+ itemHeight: nowSize(4),
+ itemGap: nowSize(10),
+ right:'0%',
+ top: '0%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(18),
+ }
+ },
+ grid: {
+ top: '20%',
+ left: '1%',
+ right: '5%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(20)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(20)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '鎬绘暟',
+ type: 'line',
+ data: [370, 332, 401, 534, 490, 530, 910]
+ },
+ {
+ name: '鍦ㄨ亴鑱屽伐',
+ type: 'line',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '绂婚��浼�',
+ type: 'line',
+ data: [150, 132, 201, 154, 190, 330, 410]
+ }
+ ]
+ };
+ myEchart.setOption(option)
+ window.addEventListener('resize',function () {
+ myEchart.resize()
+ })
+ },
+ /*澶变笟淇濋櫓*/
+ shiyeBaoxianEcharts() {
+ let myEchart = this.$echarts.init(document.getElementById('shiyeBaoxianEcharts'))
+ let option = {
+ color : ['#FF5151','#51FF5D','#FFD151'],
+ tooltip: {
+ show: true,
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'],
+ itemWidth: nowSize(24),
+ itemHeight: nowSize(4),
+ itemGap: nowSize(1),
+ right:'0%',
+ top: '0%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(18),
+ }
+ },
+ grid: {
+ top: '20%',
+ left: '1%',
+ right: '5%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(20)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(20)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '鎬绘暟',
+ type: 'line',
+ data: [370, 332, 401, 534, 490, 530, 910]
+ },
+ {
+ name: '鍦ㄨ亴鑱屽伐',
+ type: 'line',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '绂婚��浼�',
+ type: 'line',
+ data: [150, 132, 201, 154, 190, 330, 410]
+ }
+ ]
+ };
+ myEchart.setOption(option)
+ window.addEventListener('resize',function () {
+ myEchart.resize()
+ })
+ },
+ /*宸ヤ激淇濋櫓*/
+ gongshangBaoxianEcharts() {
+ let myEchart = this.$echarts.init(document.getElementById('gongshangBaoxianEcharts'))
+ let option = {
+ color : ['#FF5151','#51FF5D','#FFD151'],
+ tooltip: {
+ show: true,
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'],
+ itemWidth: nowSize(24),
+ itemHeight: nowSize(4),
+ itemGap: nowSize(10),
+ right:'0%',
+ top: '0%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(18),
+ }
+ },
+ grid: {
+ top: '20%',
+ left: '1%',
+ right: '5%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(20)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(20)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '鎬绘暟',
+ type: 'line',
+ data: [370, 332, 401, 534, 490, 530, 910]
+ },
+ {
+ name: '鍦ㄨ亴鑱屽伐',
+ type: 'line',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '绂婚��浼�',
+ type: 'line',
+ data: [150, 132, 201, 154, 190, 330, 410]
+ }
+ ]
+ };
+ myEchart.setOption(option)
+ window.addEventListener('resize',function () {
+ myEchart.resize()
+ })
+ }
+ }
+ };
</script>
<style lang="scss" scoped>
@import "../../../assets/css/base";
+ @import "../../../assets/css/mixin";
.index-wrap{
width: 100%;
height: 100%;
- padding: 0 2rem /* 10/10 */;
+ padding: 0 0.078125rem /* 20/256 */;
box-sizing: border-box;
.index-line-box{
width: 100%;
display: flex;
- margin-top: 3.2rem;
+ margin-top: 0.125rem /* 32/256 */;
.yanglao-block{
- width: 59rem /* 590/10 */;
- height: 23rem /* 230/10 */;
+ width: 2.3046875rem /* 590/256 */;
+ height: 0.8984375rem /* 230/256 */;
background:url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
background-size: 100% 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- margin: 0 2rem;
+ margin: 0 0.078125rem /* 20/256 */;
position: relative;
img{
- width: 8rem;
- height: 8rem;
+ width: 0.3125rem /* 80/256 */;
+ height: 0.3125rem /* 80/256 */;
}
h1{
color: #fff;
@@ -785,6 +1176,7 @@
display: flex;
flex: 1;
justify-content: right;
+ margin-left: 0.15625rem /* 40/256 */;
}
.inside-right{
display: flex;
@@ -816,7 +1208,7 @@
.yanglao-block-inside2{
width: 100%;
display: flex;
- margin-top: 1rem;
+ margin-top: 0.0390625rem /* 10/256 */;
.inside-left2{
flex: 1;
display: flex;
@@ -826,7 +1218,7 @@
display: flex;
justify-content: center;
.rightMargin{
- margin-right: 1rem;
+ margin-right: 0.0390625rem /* 10/256 */;
color: #fff;
font-size: $fontSize-20;
line-height: 1.3;
@@ -840,15 +1232,15 @@
}
}
.yanglao-block2{
- width: 59rem /* 590/10 */;
- height: 23rem /* 230/10 */;
+ width: 2.3046875rem /* 590/256 */;
+ height: 0.8984375rem /* 230/256 */;
background:url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
- margin: 0 2rem;
+ margin: 0 0.078125rem /* 20/256 */;
.yaolao-box{
flex: 1;
display: flex;
@@ -856,12 +1248,12 @@
justify-content: center;
align-items: center;
&:first-child{
- margin-left: 2rem;
+ margin-left: 0.078125rem /* 20/256 */;
}
}
img{
- width: 8rem;
- height: 8rem;
+ width: 0.3125rem /* 80/256 */;
+ height: 0.3125rem /* 80/256 */;
}
h1{
color: #fff;
@@ -881,12 +1273,12 @@
}
.fu-biaoti{
position: absolute;
- left:0.2rem;
- top:3rem;
+ left:0.0078125rem /* 2/256 */;
+ top:0.1171875rem /* 30/256 */;
background:url("../../../assets/images/fubiaoti-bj.png") no-repeat center;
background-size: 100% 100%;
- width: 3.2rem /* 32/10 */;
- height: 16.7rem /* 167/10 */;
+ width: 0.125rem /* 32/256 */;
+ height:0.65234375rem /* 167/256 */;
display: flex;
align-items: center;
justify-content: center;
@@ -899,18 +1291,18 @@
}
.index-line-box2{
display: flex;
- margin-top: 3.2rem;
+ margin-top: 0.125rem /* 32/256 */;
.shu-ju-box{
- width: 122rem /* 1220/10 */;
- height: 41rem;
+ width: 4.765625rem /* 1220/256 */;
+ height: 1.6015625rem /* 410/256 */;
background: url("../../../assets/images/yanglao-block-big-bj.png") no-repeat center;
background-size: 100% 100%;
position: relative;
- margin: 0 2rem;
+ margin: 0 0.078125rem /* 20/256 */;
display: flex;
.shuju-title-box{
position: absolute;
- left: 10rem;
+ left: 0.390625rem /* 100/256 */;
top: 0;
h1{
font-size: $fontSize-32;
@@ -920,22 +1312,22 @@
content: '';
background: url("../../../assets/images/zhuangshi.png") no-repeat center;
background-size: 100% 100%;
- width: 13.5rem;
- height: 1.6rem;
+ width: 0.52734375rem /* 135/256 */;
+ height: 0.0625rem /* 16/256 */;
position: absolute;
- left: 20rem;
- top: 1.2rem /* 12/10 */;
+ left: 0.78125rem /* 200/256 */;
+ top: 0.046875rem /* 12/256 */;
}
}
}
.shuju-main-box{
width: 100%;
- padding: 6rem 3rem;
+ padding: 0.234375rem /* 60/256 */ 0.1171875rem /* 30/256 */;
box-sizing: border-box;
display: flex;
.shuju-table{
- width: 80.2rem;
- height: 31rem;
+ width: 3.1328125rem /* 802/256 */;
+ height: 1.2109375rem /* 310/256 */;
}
}
.shuju-table{
@@ -946,7 +1338,7 @@
width: 100%;
display: flex;
.biao-title{
- width: 34rem;
+ width: 1.328125rem /* 340/256 */;
}
.title-flex{
width: 100%;
@@ -963,13 +1355,13 @@
}
.shuju-scroll{
- height: 28rem /* 280/10 */;
- overflow-y: auto;
+ max-height: 1.09375rem /* 280/256 */;
+ @include overflow-y()
}
.shuju-table-line2{
width: 100%;
display: flex;
- padding: 1rem 0;
+ padding: 0.0390625rem /* 10/256 */ 0;
&:nth-child(odd) {
background: rgba(81,210,255,0.10);
}
@@ -990,7 +1382,7 @@
display: flex;
}
.biao-title{
- width: 34rem;
+ width: 1.328125rem /* 340/256 */;
h1{
font-size: $fontSize-26;
color: $color-white;
@@ -1007,8 +1399,8 @@
}
}
.shuju-echarts{
- width: 35rem /* 168/10 */;
- height: 31rem;
+ width: 1.3671875rem /* 350/256 */;
+ height: 1.2109375rem /* 310/256 */;
}
}
}
--
Gitblit v1.9.1