jiashicang-front.git

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