上传文件至 '简历管理'

简历管理/myresume.vue

@@ -0,0 +1,420 @@
+<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">
+	<ul>
+		<li v-for="item,index in message">
+			<div class="left">
+			<span class="name-resume">简历名称：{{item.resumeName}}</span>
+			<div><span class="progress-resume-p">完成度</span><span class="progress-resume-num">{{item.resumeProgress}}%</span><progress max="100" :value="item.resumejindu" class="jindutiao" id="processbar"></progress></div>
+			<span class="type-resume">类型：{{item.resumeType}}</span>
+			<span class="date-resume">更新时间：{{item.resumeDate}}</span>
+			<span class="visit-resume">被浏览：<span class="visit-resume-num">{{item.resumeNum}}</span>次</span>
+			<span class="state-resume">状态：{{item.resumeState}}</span>
+			</div>
+			<div class="right">
+				<form action="">
+					<label for=""><span>是否公开简历</span><input type="checkbox"></label>
+					<button class="xiugai"><a href="">修改简历</a></button>
+					<button class="yulan"><a href="">预览简历</a></button>
+					<button class="shuaxin"><a href="">刷新简历</a></button>
+					<button class="shanchu" @click="del(index)">删除简历</button>
+					
+				</form>
+			</div>
+		</li>
+	</ul>
+	</div>
+	</section>
+	</div>
+</template>
+
+<script>
+	export default{
+		name:'myresume',
+		data(){
+			return{
+				message:[
+					{
+						resumeName:'xxxxxxx',
+						resumeProgress:55,
+						resumeType:'标准简历',
+						resumeDate:'2021-01-01',
+						resumeNum:0,
+						resumeState:'待审核',
+						resumejindu:55,
+					},
+				]
+			}
+		},
+		methods:{
+			del:function(index){
+				this.message.splice(index,1)
+			}
+		}
+	}
+</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%;
+
+	}
+	.resume-content > span{
+		color: #3b3c3e;
+		font-size: 13.5px;
+		text-transform: uppercase;
+		line-height: 3rem;
+		margin-left: 1rem;
+	}
+	.resume-content > p{
+		color: #5c5d5f;
+		font-size: 14px;
+		position: absolute;
+		top: 15rem;
+		left: 26rem;
+	}
+	.resume-content > ul > li{
+		list-style: none;
+		height: 30vh;
+		width: 90%;
+		position: relative;
+		margin: 0 auto;
+		border: 1px solid #757678;
+		margin-top: 2rem;
+	}
+	.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;
+	}
+	.left{
+		width: 60%;
+		height: 30vh;
+		position: absolute;
+		left: 0;
+	}
+
+	.name-resume{
+		position: absolute;
+		top: 3rem;
+		left: 4rem;
+		color: #616163;
+		font-size: 14px;
+	}
+	.type-resume{
+		color: #616163;
+		position: absolute;
+		top: 7rem;
+		left: 4rem;
+		font-size: 14px;
+	}
+	.progress-resume-p{
+		color: #616163;
+		position: absolute;
+		top: 5rem;
+		left: 4rem;
+		font-size: 14px;
+	}
+	.progress-resume-num{
+		color: #f37a05;
+		position: absolute;
+		top: 5.15rem;
+		left: 7.4rem;
+		font-size: 14px;
+	}
+	.date-resume{
+		color: #616163;
+		position: absolute;
+		top: 7rem;
+		left: 12rem;
+		font-size: 14px;
+	}
+	.visit-resume{
+		color: #616163;
+		position: absolute;
+		top: 7rem;
+		right: 5rem;
+		font-size: 14px;
+	}
+	.visit-resume-num{
+		color: #f37705;
+	}
+	.state-resume{
+		color: #616163;
+		position: absolute;
+		top: 9rem;
+		left: 4rem;
+		font-size: 14px;
+	}
+	.right{
+		width: 40%;
+		position: absolute;
+		right: 0;
+	}
+	.right label {
+		position: absolute;
+		right: 2rem;
+		top: 1rem;
+		color: #616163;
+		font-size: 14px;
+	}
+	.xiugai{
+		position: absolute;
+		top: 4rem;
+		left: 6rem;
+		width: 6rem;
+		height: 4.5vh;
+		background-color: #4297e8;
+		outline: none;
+		border: none;
+	}
+	.xiugai > a{
+		color: #f8f8fa;
+		text-decoration: none;
+	}
+	.xiugai >a:hover{
+		color: blanchedalmond;
+	}
+	.yulan{
+		position: absolute;
+		position: absolute;
+		top: 4rem;
+		right: 2rem;
+		width: 6rem;
+		height: 4.5vh;
+		outline: none;
+		border: none;
+		background-color: #4297e8;
+	}
+	.yulan > a{
+		color: #f8f8fa;
+		text-decoration: none;
+	}
+	.yulan > a:hover{
+		color: blanchedalmond;
+	}
+	.shuaxin{
+		position: absolute;
+		top: 8rem;
+		left: 6rem;
+		width: 6rem;
+		height: 4.5vh;
+		outline: none;
+		border: none;
+		background-color: #4297e8;
+	}
+	.shuaxin > a{
+		color: #f8f8fa;
+		text-decoration: none;
+	}
+	.shuaxin > a:hover{
+		color: blanchedalmond;
+	}
+	.shanchu{
+		position: absolute;
+		top: 8rem;
+		right: 2rem;
+		width: 6rem;
+		height: 4.5vh;
+		color: #f8f8fa;
+		outline: none;
+		border: none;
+		background-color: #f27906;
+		cursor: pointer;
+	}
+	.shanchu:hover{
+		color: blanchedalmond;
+	}
+	/* .shanchu > a{
+		color: #f8f8fa;
+		text-decoration: none;
+	}
+	.shanchu > a:hover{
+		color: blanchedalmond;
+	} */
+	.jindutiao{
+		width: 50%;
+		margin-top: 5.18rem;
+		margin-left: 10rem;
+	}
+</style>

简历管理/nomyresume.vue

@@ -0,0 +1,226 @@
+<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>
+	</div>
+	</section>
+	</div>
+</template>
+
+<script>
+	export default{
+		name:'nomyresume',
+	}
+</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: #5c5d5f;
+		font-size: 14px;
+		position: absolute;
+		top: 15rem;
+		left: 26rem;
+	}
+	.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{
+		position: absolute;
+		top: 10rem;
+		left: 25rem;
+	}
+</style>

简历管理/resume-create.vue

@@ -0,0 +1,413 @@
+<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>

简历管理/resume-nobevisited.vue

@@ -0,0 +1,239 @@
+<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>

简历管理/resume-out.vue

@@ -0,0 +1,290 @@
+<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>