jk-temporary-workers-portal/src/views/job/index-HR.vue

<template>
    <div class="mainDiv">
		<div class="main-row">
			<div class="mainContainer main-headImg">
				<el-avatar :size="50" :src="circleUrl"></el-avatar>
				<div class="main-headImg-text">
					<h3>你好，周强</h3>
					<p>平台管理员</p>
				</div>
			</div>
			<div class="mainContainer main-dataNum">
				<div class="main-dataNum-item">
					<div class="main-dataNum-icon">
						<i class="custom-icon custom-icon-md-account_box"></i>
					</div>
					<div class="main-dataNum-text">
						<h4>本月投递量</h4>
						<p>190</p>
					</div>
				</div>
				<div class="main-dataNum-item">
					<div class="main-dataNum-icon">
						<i class="custom-icon custom-icon-md-assignment_late"></i>
					</div>
					<div class="main-dataNum-text">
						<h4>本月收藏量</h4>
						<p>23</p>
					</div>
				</div>
				<div class="main-dataNum-item">
					<div class="main-dataNum-icon">
						<i class="custom-icon custom-icon-md-assignment"></i>
					</div>
					<div class="main-dataNum-text">
						<h4>昨日入职数</h4>
						<p>5</p>
					</div>
				</div>
				<div class="main-dataNum-item">
					<div class="main-dataNum-icon">
						<i class="custom-icon custom-icon-md-assessment"></i>
					</div>
					<div class="main-dataNum-text">
						<h4>总入职数</h4>
						<p>118</p>
					</div>
				</div>
			</div>
		</div>
		<div class="mainContainer main-linkUrl">
			<div class="mainContainer-title"><h4>快捷入口</h4></div>
			<div class="main-linkUrl-main">
				<div class="main-linkUrl-item">
					<div class="main-linkUrl-icon main-linkUrl-icon-1">
						<i class="custom-icon custom-icon-shenhe_gaizhang"></i>
					</div>
					<p>企业认证审核</p>
				</div>
				<div class="main-linkUrl-item">
					<div class="main-linkUrl-icon main-linkUrl-icon-2">
						<i class="custom-icon custom-icon-zuzhifuwu"></i>
					</div>
					<p>职位审核</p>
				</div>
				<div class="main-linkUrl-item">
					<div class="main-linkUrl-icon main-linkUrl-icon-3">
						<i class="custom-icon custom-icon-churukuan"></i>
					</div>
					<p>共享用工审核</p>
				</div>
			</div>
		</div>
		<div class="main-row">
			<div class="mainContainer main-chart1">
				<div class="mainContainer-title"><h4>平台流量转化情况</h4></div>
				<div class="main-chart1-main">
					
				</div>
			</div>
			<div class="mainContainer main-chart2">
				<div class="mainContainer-title"><h4>审核办结数统计</h4></div>
				<div class="main-chart2-main">
					
				</div>
			</div>
		</div>
    </div>
</template>
<script>
 export default {
	data () {
	  return {
		circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
	  }
	}
  }
</script>
<style lang="scss" scoped>
	.mainDiv{
		padding: 20px;
	}
	.main-row{
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.mainContainer{
		border: 1px solid #ebebeb;
		border-radius: 3px;
		transition: .2s;
		text-align: left;
		padding: 20px;
	}
	.main-headImg{
		height: 100px;
		width: 260px;
		margin-right: 20px;
		display: flex;
		padding: 0 20px;
		align-items: center;
		.main-headImg-text{
			margin-left: 20px;
			p{
				font-size: 14px;
				color:#999;
				margin-top: 5px;
			}
		}
	}
	.main-dataNum{
		flex: 1;
		display: flex;
		justify-content: space-between;
		.main-dataNum-item{
			display: flex;
			align-items: center;
			padding: 0 40px;
			border-right: 1px solid #eee;
			flex: 1;
			&:last-child{
				border: none;
			}
			i{
				font-size: 45px;
				margin-right: 10px;
			}
			.custom-icon-md-account_box{color:#007aff}
			.custom-icon-md-assignment_late{color:#ff3a30}
			.custom-icon-md-assignment{color:#ff9502}
			.custom-icon-md-assessment{color:#34c758}
		}
	}
	.main-linkUrl{
		margin-bottom: 20px;
	}
	.main-chart1{
		width:450px;
		margin-right: 20px;
	}
	.main-chart2{
		flex:1;
	}
	.mainContainer-title{
		margin-bottom: 20px;
	}
	.main-linkUrl-main{
		display: flex;
		.main-linkUrl-item{
			display: flex;
			width: 200px;
			border: 1px solid #eee;
			border-radius: 5px;
			padding:10px 20px;
			margin-right: 20px;
			align-items: center;
			.main-linkUrl-icon{
				height: 36px;
				width: 36px;
				border-radius: 5px;
				margin-right: 10px;
				text-align: center;
				line-height: 36px;
				color:#fff;
				i{
					font-size: 24px;
				}
			}
			.main-linkUrl-icon-1{background-color:#e44722;}
			.main-linkUrl-icon-2{background-color:#3385ff;}
			.main-linkUrl-icon-3{background-color:#389e0d;}
		}
	}
	.main-chart1-main{
		height: 420px;
	}
	.main-chart2-main{
		height: 420px;
	}
</style>