<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>