sgyc/简历管理/resume-out.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">
		<form action="">
			<table>
				<tr>
					<td>*</td>
					<td>将要发送的简历：</td>
					<td>
						<select name="jianli" id="">
							<option value="">请选择简历</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>*</td>
					<td>企业的邮箱地址：</td>
					<td>
						<select name="youxiang" id="">
							<option value="">请选择邮箱</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>*</td>
					<td>应聘的企业名称：</td>
					<td>
						<select name="qiye" id="">
							<option value="">请选择企业名称</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>*</td>
					<td>应聘的职位名称：</td>
					<td>
						<select name="zhiwei" id="">
							<option value="">请输入职位名称</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><input type="submit" value="发送" class="input-out"></td>
				</tr>
			</table>
		</form>
		</div>
		</section>
	</div>
</template>

<script>
	export default{
		name:'resumeout',
	}
</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;
	}
	table{
		position: absolute;
		top: 5rem;
		float: left;
		left: 20rem;
		line-height: 3rem;
	}
	table > tr > td:nth-child(1){
		color: red;
	}
	table > tr > td:nth-child(2){
		font-size: 10px;
	}
	table > tr > td:nth-child(3){
		float: left;
	}
	select{
		width: 15rem;
		height: 4vh;
		outline: none;
		border: 1px solid #4198e8;
		color: #68696b;
		font-size: 10px;
	}
	.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;
	}
	.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;
	}
	.input-out{
		background-color: #4297e8;
		color: #fcfcfc;
		outline: none;
		border: none;
		width: 5rem;
		height: 4vh;
		position: absolute;
		left: 11.8rem;
		top: 14rem;
	}
</style>