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