|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="seccon2">
|
|
|
+ <div class="seccon2_con1">
|
|
|
+ 人才招聘
|
|
|
+ </div>
|
|
|
+ <div class="hr1"></div>
|
|
|
+ <a href="javascript:;" class="sec_sp1"><span>查看更多》》》</span></a>
|
|
|
+ <div class="person">
|
|
|
+ <ul>
|
|
|
+ <li v-for="item in mes"><img src="../../../assets/user.png">
|
|
|
+ <div class="person-data-div1">
|
|
|
+ <span class="person-data1"><a href="">{{item.name}}</a></span>
|
|
|
+ <span class="person-data1"><a href="">{{item.sexage}}</a></span>
|
|
|
+ <span class="person-data1"><a href="">{{item.level}}</a></span>
|
|
|
+ <span class="person-data1">|</span>
|
|
|
+ <span class="person-data1"><a href="">{{item.yaer}}</a></span>
|
|
|
+ </div>
|
|
|
+ <div class="person-data-div2">
|
|
|
+ <span class="person-data2">意向职位:</span>
|
|
|
+ <span class="person-data2"><a href="">{{item.dreamjob}}</a></span>
|
|
|
+ <span class="person-data2">意向城市:</span>
|
|
|
+ <span class="person-data2"><a href="">{{item.dreamcity}}</a></span>
|
|
|
+ <span class="person-data2">期望薪酬:</span>
|
|
|
+ <span class="person-data2"><a href="">{{item.dreammoney}}</a></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default{
|
|
|
+ name:'talent',
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ mes:[
|
|
|
+ {
|
|
|
+ name:'王凯',
|
|
|
+ sexage:'(男,40岁)',
|
|
|
+ level:'博士学历',
|
|
|
+ yaer:'5年工作经验',
|
|
|
+ dreamjob:'销售经理',
|
|
|
+ dreamcity:'广州',
|
|
|
+ dreammoney:'¥15000-25000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'王凯',
|
|
|
+ sexage:'(男,40岁)',
|
|
|
+ level:'博士学历',
|
|
|
+ yaer:'5年工作经验',
|
|
|
+ dreamjob:'销售经理',
|
|
|
+ dreamcity:'广州',
|
|
|
+ dreammoney:'¥15000-25000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'王凯',
|
|
|
+ sexage:'(男,40岁)',
|
|
|
+ level:'博士学历',
|
|
|
+ yaer:'5年工作经验',
|
|
|
+ dreamjob:'销售经理',
|
|
|
+ dreamcity:'广州',
|
|
|
+ dreammoney:'¥15000-25000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'王凯',
|
|
|
+ sexage:'(男,40岁)',
|
|
|
+ level:'博士学历',
|
|
|
+ yaer:'5年工作经验',
|
|
|
+ dreamjob:'销售经理',
|
|
|
+ dreamcity:'广州',
|
|
|
+ dreammoney:'¥15000-25000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'王凯',
|
|
|
+ sexage:'(男,40岁)',
|
|
|
+ level:'博士学历',
|
|
|
+ yaer:'5年工作经验',
|
|
|
+ dreamjob:'销售经理',
|
|
|
+ dreamcity:'广州',
|
|
|
+ dreammoney:'¥15000-25000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'王凯',
|
|
|
+ sexage:'(男,40岁)',
|
|
|
+ level:'博士学历',
|
|
|
+ yaer:'5年工作经验',
|
|
|
+ dreamjob:'销售经理',
|
|
|
+ dreamcity:'广州',
|
|
|
+ dreammoney:'¥15000-25000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'王凯',
|
|
|
+ sexage:'(男,40岁)',
|
|
|
+ level:'博士学历',
|
|
|
+ yaer:'5年工作经验',
|
|
|
+ dreamjob:'销售经理',
|
|
|
+ dreamcity:'广州',
|
|
|
+ dreammoney:'¥15000-25000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'王凯',
|
|
|
+ sexage:'(男,40岁)',
|
|
|
+ level:'博士学历',
|
|
|
+ yaer:'5年工作经验',
|
|
|
+ dreamjob:'销售经理',
|
|
|
+ dreamcity:'广州',
|
|
|
+ dreammoney:'¥15000-25000'
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.seccon2{
|
|
|
+ width: 75%;
|
|
|
+ height: 30vh;
|
|
|
+ background-color: #eaebef;
|
|
|
+ position: relative;
|
|
|
+ margin: 1.2rem auto;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.seccon2_con1{
|
|
|
+ width: 8.5rem;
|
|
|
+ height: 2.3rem;
|
|
|
+ background-color: #035fb6;
|
|
|
+ color: #fbfcfe;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 2.2rem;
|
|
|
+ position: absolute;
|
|
|
+ top: 1rem;
|
|
|
+}
|
|
|
+.hr1{
|
|
|
+ width: 75rem;
|
|
|
+ height: 0.1rem;
|
|
|
+ background-color: #055fb5;
|
|
|
+ position: absolute;
|
|
|
+ top: 3.2rem;
|
|
|
+}
|
|
|
+.hr2{
|
|
|
+ width: 75rem;
|
|
|
+ height: 0.1rem;
|
|
|
+ background-color: #055fb5;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -1.5rem;
|
|
|
+ right: -3.5rem;
|
|
|
+}
|
|
|
+.person > ul > li{
|
|
|
+ list-style: none;
|
|
|
+ width: 18rem;
|
|
|
+ height: 20vh;
|
|
|
+ border: 1px solid #82817d;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #f8f7f3;
|
|
|
+}
|
|
|
+.person > ul > li:nth-child(1){
|
|
|
+ top: 4rem;
|
|
|
+ left: 0.5rem;
|
|
|
+}
|
|
|
+.person > ul > li:nth-child(2){
|
|
|
+ top: 4rem;
|
|
|
+ left: 19rem;
|
|
|
+}
|
|
|
+.person > ul > li:nth-child(3){
|
|
|
+ top: 4rem;
|
|
|
+ left: 37.5rem;
|
|
|
+}
|
|
|
+.person > ul > li:nth-child(4){
|
|
|
+ top: 4rem;
|
|
|
+ left: 56rem;
|
|
|
+}
|
|
|
+.person > ul > li:nth-child(5){
|
|
|
+ top: 14.2rem;
|
|
|
+ left: 0.5rem;
|
|
|
+}
|
|
|
+.person > ul > li:nth-child(6){
|
|
|
+ top: 14.2rem;
|
|
|
+ left: 19rem;
|
|
|
+}
|
|
|
+.person > ul > li:nth-child(7){
|
|
|
+ top: 14.2rem;
|
|
|
+ left: 37.5rem;
|
|
|
+}
|
|
|
+.person > ul > li:nth-child(8){
|
|
|
+ top: 14.2rem;
|
|
|
+ left: 56rem;
|
|
|
+}
|
|
|
+.person > ul > li > img{
|
|
|
+ margin-top: 2rem;
|
|
|
+}
|
|
|
+.person-data-div1{
|
|
|
+ width: 11rem;
|
|
|
+ height: 4vh;
|
|
|
+ margin-top: -3.1rem;
|
|
|
+ margin-left: 3.8rem;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.person-data1{
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+.person-data1 > a{
|
|
|
+ text-decoration: none;
|
|
|
+ color: #0B0100;
|
|
|
+}
|
|
|
+.person-data1 > a:hover{
|
|
|
+ color: orangered;
|
|
|
+}
|
|
|
+
|
|
|
+.person-data2 > a{
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.person-data1:nth-child(1){
|
|
|
+ color: #0d0000;
|
|
|
+}
|
|
|
+.person-data1:nth-child(2){
|
|
|
+ color: #8c8c8c;
|
|
|
+ top: -0.1rem;
|
|
|
+ right: 0.2rem;
|
|
|
+}
|
|
|
+.person-data1:nth-child(3){
|
|
|
+ color: #8c8c8c;
|
|
|
+ top: 1.8rem;
|
|
|
+ left: 0rem;
|
|
|
+}
|
|
|
+.person-data1:nth-child(4){
|
|
|
+ color: #8c8c8c;
|
|
|
+ top: 1.8rem;
|
|
|
+ left: 4.5rem;
|
|
|
+}
|
|
|
+.person-data1:nth-child(5){
|
|
|
+ color: #8c8c8c;
|
|
|
+ top: 1.8rem;
|
|
|
+ left: 5.2rem;
|
|
|
+}
|
|
|
+.person-data-div2{
|
|
|
+ margin-top: 2rem;
|
|
|
+ width: 16rem;
|
|
|
+ height: 5vh;
|
|
|
+ line-height: 1.4rem;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.person-data2:nth-child(1){
|
|
|
+ color: #045db7;
|
|
|
+}
|
|
|
+.person-data2:nth-child(2){
|
|
|
+ color: #000407;
|
|
|
+}
|
|
|
+.person-data2:nth-child(2) > a{
|
|
|
+ color: #000407;
|
|
|
+}
|
|
|
+.person-data2:nth-child(2) > a:hover{
|
|
|
+ color: crimson;
|
|
|
+}
|
|
|
+.person-data2:nth-child(3){
|
|
|
+ color: #045db7;
|
|
|
+}
|
|
|
+.person-data2:nth-child(4){
|
|
|
+ color: #000407;
|
|
|
+}
|
|
|
+.person-data2:nth-child(4) > a{
|
|
|
+ color: #000407;
|
|
|
+}
|
|
|
+.person-data2:nth-child(4) > a:hover{
|
|
|
+ color: crimson;
|
|
|
+}
|
|
|
+.person-data2:nth-child(5){
|
|
|
+ color: #045db7;
|
|
|
+}
|
|
|
+.person-data2:nth-child(6){
|
|
|
+ color: #f98e02;
|
|
|
+}
|
|
|
+.person-data2:nth-child(6) > a{
|
|
|
+ color: #f98e02;
|
|
|
+}
|
|
|
+.person-data2:nth-child(6) > a:hover{
|
|
|
+ color: crimson;
|
|
|
+}
|
|
|
+.sec_sp1{
|
|
|
+ position: absolute;
|
|
|
+ right: -2rem;
|
|
|
+ top: 2rem;
|
|
|
+ font-size: 0.7rem;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+</style>
|