sgyc/简历管理/myresume.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">
	<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>