sgyc/简历管理/resume-nobevisited.vue

<template>
	<div>
	<header>
	<div class="resume-tip">
		<span>热线电话：400-880-XXXX</span>
		<span>欢迎来到PHYUN人才招聘系统</span>
	</div>	
	<div class="resume-logo">
		<img src="../../../assets/hlogo.png">
		<span class="logo-sp1"><a href="">个人中心</a></span>
		<span class="logo-sp2"><a href="">简历管理</a></span>
		<span class="logo-sp3"><a href="">求职管理</a></span>
		<a href="">返回主页面》</a>
	</div>
	</header>
	<nav>
		
	</nav>
	<section>
	<div class="resume-list">
		<div class="first-list"><span>简历管理</span></div>
		<div class="second-list"><img src="../../../assets/resume-second-list.png"  class="list-pic-left"><a href="" class="list-a">我的简历</a><img src="../../../assets/selected.png" class="list-pic-right"></div>
		<div class="third-list"><img src="../../../assets/resume-third-list.png"  class="list-pic-left"><a href="" class="list-a">创建简历</a><img src="../../../assets/selected.png"  class="list-pic-right"></div>
		<div class="fourth-list"><img src="../../../assets/resume-fourth-list.png"  class="list-pic-left"><a href="" class="list-a">简历被浏览</a><img src="../../../assets/selected.png"  class="list-pic-right"></div>
		<div class="fifth-list"><img src="../../../assets/resume-fifth-list.png"  class="list-pic-left"><a href="" class="list-a">简历外放</a><img src="../../../assets/selected.png"  class="list-pic-right"></div>
	</div>
	<div class="resume-content">
	<span>简历被浏览</span>
	<hr class="out-hr">
	<img src="../../../assets/yun_no.png" alt="" class="yun-no">
	<p>亲爱的用户，暂无谁看过我的简历，想要获得更多的工作机会，</p>
	<p>立即搜索我感兴趣的职位投递简历吧</p>
	<button><a href="">立即搜索我感兴趣的职位</a></button>
	</div>
	</section>
	</div>
</template>

<script>
	export default{
		name:'nobevisited',
		
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background-color: #eaebef;
	}
	header{
		height: 20vh;
		width: 100%;
	}
	.resume-tip{
		height: 5vh;
		background-color: #e0dada;
		color: #0c0000;
		position: relative;
	}
	.resume-tip > span:nth-child(1){
		position: absolute;
		left: 10rem;
		top: 0.4rem;
	}
	.resume-tip > span:nth-child(2){
		position: absolute;
		right: 10rem;
		top: 0.4rem;
	}
	.resume-logo{
		height: 15vh;
		background-color: #eaebef;
		position: relative;
	}
	.resume-logo > img{
		position: absolute;
		left: 9rem;
	}
	.resume-logo > a{
		position: absolute;
		right: 9rem;
		bottom: 0;
		text-decoration: none;
		color: #4299e9;
	}
	.resume-logo > a:hover{
		color: indianred;
	}
	.logo-sp1{
		position: absolute;
		left: 35rem;
		top: 3rem;
		font-size: 16px;
	}
	.logo-sp1 > a{
		text-decoration: none;
		color: #080808;
	}
	.logo-sp1 > a:hover{
		color: indianred;
	}
	.logo-sp2{
		position: absolute;
		left: 48rem;
		top: 3rem;
		font-size: 16px;
	}
	.logo-sp2 > a{
		text-decoration: none;
		color: #78aeec;
	}
	.logo-sp2 > a:hover{
		color: indianred;
	}
	.logo-sp3{
		position: absolute;
		left: 61rem;
		top: 3rem;
		font-size: 16px;
	}
	.logo-sp3 > a{
		text-decoration: none;
		color: #080808;
	}
	.logo-sp3 > a:hover{
		color: indianred;
	}
	nav{
		background-color: #6b799e;
		height: 4vh;
		width: 100%;
	}
	section{
		height: 76vh;
		width: 100%;
		background-color: #eaebef;
		position: relative;
	}
	.resume-list{
		position: absolute;
		width: 13%;
		height: 33vh;
		left: 10rem;
	}
	.resume-content{
		position: absolute;
		right: 10rem;
		background-color: #f4f8fb;
		height: 100vh;
		width: 64%;
		text-align: center;
	}
	.resume-content > span{
		color: #3b3c3e;
		font-size: 13.5px;
		text-transform: uppercase;
		line-height: 3rem;
		margin-left: -880px;
	}
	.resume-content > p{
		color: #646567;
		font-size: 11px;
		line-height: 3rem;
	}
	.resume-content > button{
		width: 16rem;
		height: 5vh;
		background-color: #4297e8;
		outline: none;
		border: none;
	}
	.resume-content > button > a{
		color: #fafafa;
		text-decoration: none;
	}
	.resume-content > button > a:hover{
		color: black;
	}
	.out-hr{
		background-color: #616161;
		height: 1px;
	}
	.first-list{
		height: 7vh;
		background-color: #4297e8;
	}
	.first-list > span{
		color: #fbf9fa;
		line-height: 3.3rem;
		margin-left: 4rem;
	}
	.second-list{
		height: 6vh;
		background-color: #f4f8fb;
		position: relative;
		border-bottom: 1px solid #595b5a;
	}
	.list-a{
		position: absolute;
		left: 4rem;
		top: 0.8rem;
		text-decoration: none;
		color: #5a5c5b;
	}
	.list-pic-left{
		position: absolute;
		left: 1rem;
		top: 0.4rem;
	}
	.list-pic-right{
		position: absolute;
		right: 1rem;
		top: 0.8rem;
	}
	.third-list{
		height: 6vh;
		background-color: #f4f8fb;
		position: relative;
		border-bottom: 1px solid #595b5a;
	}
	.fourth-list{
		height: 6vh;
		background-color: #f4f8fb;
		position: relative;
		border-bottom: 1px solid #595b5a;
	}
	.fifth-list{
		height: 8vh;
		background-color: #f4f8fb;
		position: relative;
	}
	.yun-no{
		margin-top: 120px;
	}
</style>