sgyc/简历管理/resume-create.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">
			<h2>简历是求职的利器，好的简历才能更快找到好工作</h2>
			<p>填写简历要像对待每一次考试那样认真哦！</p>
			<div class="resume-hr"/>
			<div class="user-tip">
				<img src="../../../assets/resume-user.png" alt="">
				<span>基本信息</span>
			</div>
						<form action="">
							<table>
								<tr>
									<td>*</td>
									<td>姓名：</td>
									<td><input type="text" class="resume-input-text"/></td>
								</tr>
								<tr>
									<td>*</td>
									<td>性别：</td>
									<td>
										男<input type="radio" name="sex" checked>
										女<input type="radio" name="sex">
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>出生年月：</td>
									<td><input type="date" class="resume-input-text"></td>
								</tr>
								<tr>
									<td>*</td>
									<td>最高学历：</td>
									<td>
										<select name="xueli" id="" >
											<option>请选择最高学历</option>
											<option>本科</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>工作经验</td>
									<td>
										<select name="jingyan" id="">
											<option value="">请选择工作经验</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>手机号码：</td>
									<td><input type="text" placeholder="请输入号码" class="resume-input-text"/></td>
								</tr>
								<tr>
									<td>*</td>
									<td>现居地址：</td>
									<td><input type="text" placeholder="请输入地址" class="resume-input-text"/></td>
								</tr>
								<tr>
									<td>*</td>
									<td>联系邮箱：</td>
									<td><input type="text" placeholder="请输入邮箱" class="resume-input-text"/></td>
								</tr>
								<tr>
									<td>*</td>
									<td>从事行业：</td>
									<td>
										<select name="hangye" id="">
											<option>请选择从事行业</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>期望岗位：</td>
									<td>
										<select name="gangwei" id="">
											<option value="">请选择期望岗位</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>期望城市：</td>
									<td>
										<select name="chengshi" id="">
											<option value="">请输入期望城市</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>到岗时间：</td>
									<td>
										<select name="shijian" id="">
											<option value="">请输入到岗时间</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>工作职能</td>
									<td>
										<select name="zhineng" id="">
											<option value="">请输入工作职能</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>工作性质</td>
									<td>
										<select name="xingzhi" id="">
											<option value="">请输入工作性质</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>求职状况</td>
									<td>
										<select name="zhuankuang" id="">
											<option value="">
												请输入求职状况
											</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>*</td>
									<td>联系邮箱</td>
									<td><input type="text"  placeholder="请输入邮箱" class="resume-input-text"></td>
								</tr>
								<tr>
									<td>*</td>
									<td>期望薪资</td>
									<td><input type="text" placeholder="最低薪资 元/月" class="xinzi">
									---
									<input type="text" placeholder="最高薪资 元/月" class="xinzi"></td>
								</tr>
								<tr>
									<td><input type="submit" value="保存" class="baocun"></td>
								</tr>
							</table>
						</form>
			
		</div>
		</section>
	</div>
</template>

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

<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background-color: #eaebef;
	}
	header{
		height: 20vh;
		width: 100%;
	}
	table{
		position: absolute;
		top: 10rem;
		float: left;
		left: 20rem;
		line-height: 3rem;
	}
	table > tr > td:nth-child(1){
		color: red;
	}
	table > tr > td:nth-child(3){
		float: left;
	}
	select{
		width: 15rem;
		height: 4vh;
		outline: none;
		border: 1px solid #4198e8;
		color: #68696b;
		font-size: 10px;
	}
	.baocun{
		position: absolute;
		bottom: -3rem;
		right: 0;
		height: 6vh;
		width: 15rem;
		background-color: #4297e8;
		color: #fcfcfa;
		outline: none;
		border: none;
		cursor: pointer;
	}
	.xinzi{
		width: 6rem;
		outline: none;
		height: 4vh;
		border: 1px solid #4198e8;
	}
	.resume-input-text{
		height: 4vh;
		width: 15rem;
		outline: none;
		border: 1px solid #4198e8;
	}
	.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: 180vh;
		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: 150vh;
		width: 64%;
		text-align: center;
	}
	.resume-content > h2{
		color: #ff7300;
		line-height: 4rem;
	}
	.resume-content > p{
		color: #5f5e5c;
		line-height: 3rem;
	}
	.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;
	}
	.resume-hr{
		background-color: #4297e7;
		height: 2px;
	}
	.user-tip{
		position: absolute;
		left: -2.5rem;
		top: 8rem;
		width: 18%;
		height: 5%;
	}
	.user-tip > span{
		color: #636466;
		text-transform: uppercase;
		position: absolute;
		top: 11px;
	}
</style>