2025-11-05 11:09:27 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="index-wrap">
|
|
|
|
|
|
<view class="content">
|
|
|
|
|
|
<view class="section">
|
|
|
|
|
|
<view class="title-h1">
|
|
|
|
|
|
推荐职业
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="table" v-if="jobList.length > 0">
|
|
|
|
|
|
<view class="tr">
|
|
|
|
|
|
<view class="th">
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="th">
|
|
|
|
|
|
职业名称
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="th">
|
|
|
|
|
|
测评推荐
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="th">
|
|
|
|
|
|
我的意向
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="tr" v-for="(item,index) in jobList" @click="checkedJob(item)" :key="index">
|
|
|
|
|
|
<view class="td">
|
|
|
|
|
|
<view class="checked-btn" :class="checkedCode==item.EncodeId?'on':''"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="td">
|
|
|
|
|
|
{{item.Name}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="td">
|
|
|
|
|
|
<view class="is-has" v-if="item.IsRecommend"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="td">
|
|
|
|
|
|
<view class="is-has" v-if="item.IsIntention"></view>
|
|
|
|
|
|
</view>
|
2025-11-28 13:55:54 +08:00
|
|
|
|
<!-- <view class="td">
|
2025-11-05 11:09:27 +08:00
|
|
|
|
<view class="is-has" v-if="item.IsSpecialtyMatch"></view>
|
2025-11-28 13:55:54 +08:00
|
|
|
|
</view> -->
|
2025-11-05 11:09:27 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="empty" v-else>
|
|
|
|
|
|
<view class="icon"></view>
|
|
|
|
|
|
<view class="txt">暂无推荐职业，请先进行兴趣测评</view>
|
|
|
|
|
|
<view class="nav-btn" @click="navTest">
|
|
|
|
|
|
去测评
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2025-11-20 18:37:15 +08:00
|
|
|
|
<view class="title-h1" v-if="jobList.length > 0">
|
2025-11-05 11:09:27 +08:00
|
|
|
|
职业介绍
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="desc">
|
|
|
|
|
|
<view class="strong">
|
|
|
|
|
|
{{jobName}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
{{jobIntroduce}}
|
|
|
|
|
|
</view>
|
2025-11-20 18:37:15 +08:00
|
|
|
|
<view class="title-h1" v-if="jobList.length > 0">
|
2025-11-05 11:09:27 +08:00
|
|
|
|
发展路径
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="desc">
|
|
|
|
|
|
<view class="strong">
|
|
|
|
|
|
{{jobPath}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2025-11-20 18:37:15 +08:00
|
|
|
|
<view class="path-map" v-if="jobList.length > 0">
|
2025-11-05 11:09:27 +08:00
|
|
|
|
<view class="origin-item">
|
2025-11-20 18:37:15 +08:00
|
|
|
|
我
|
2025-11-05 11:09:27 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="path-list" :class="isLoadingEnd?'show':'ing'">
|
|
|
|
|
|
<view class="line-1">
|
|
|
|
|
|
<view class="drop" :class="'drop-' + (index+1)" v-for="(item,index) in academicRequire" :key="index" @click="showName(item)">
|
|
|
|
|
|
<view class="txt">
|
|
|
|
|
|
{{item}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="icon"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="line-2">
|
|
|
|
|
|
<view class="drop" :class="'drop-' + (index+1)" v-for="(item,index) in generalSkillRequire" :key="index" @click="showName(item)">
|
|
|
|
|
|
<view class="txt">
|
|
|
|
|
|
{{item}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="icon"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="line-3">
|
|
|
|
|
|
<view class="drop" :class="'drop-' + (index+1)" v-for="(item,index) in certificateRequire" :key="index" @click="showName(item)">
|
|
|
|
|
|
<view class="txt">
|
|
|
|
|
|
{{item}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="icon"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="line-4">
|
|
|
|
|
|
<view class="drop" :class="'drop-' + (index+1)" v-for="(item,index) in jobSkill" :key="index" @click="showName(item)">
|
|
|
|
|
|
<view class="txt">
|
|
|
|
|
|
{{item}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="icon"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="line-5">
|
|
|
|
|
|
<view class="drop" :class="'drop-' + (index+1)" v-for="(item,index) in professionalRequire" :key="index" @click="showName(item)">
|
|
|
|
|
|
<view class="txt">
|
|
|
|
|
|
{{item}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="icon"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="line-6">
|
|
|
|
|
|
<view class="drop" :class="'drop-' + (index+1)" v-for="(item,index) in jobRequire" :key="index" @click="showName(item)">
|
|
|
|
|
|
<view class="txt">
|
|
|
|
|
|
{{item}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="icon"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="terminal-point">
|
|
|
|
|
|
{{jobName}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-11-07 18:38:01 +08:00
|
|
|
|
import api from "@/packageCa/apiCa/studentProfile.js"
|
2025-11-05 11:09:27 +08:00
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
barHeight: wx.getWindowInfo().statusBarHeight,
|
|
|
|
|
|
jobList: [],//
|
|
|
|
|
|
checkedCode: null,
|
|
|
|
|
|
jobIntroduce: "",
|
|
|
|
|
|
jobName: "",
|
|
|
|
|
|
jobPath: "",
|
|
|
|
|
|
academicRequire: [], //
|
|
|
|
|
|
generalSkillRequire: [],
|
|
|
|
|
|
certificateRequire: [],
|
|
|
|
|
|
jobRequire: [],
|
|
|
|
|
|
jobSkill: [],
|
|
|
|
|
|
professionalRequire: [],
|
|
|
|
|
|
isLoadingEnd: false,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
|
|
|
this.init();
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 获取推荐职业
|
|
|
|
|
|
async init(){
|
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
|
title: "加载中..."
|
|
|
|
|
|
})
|
|
|
|
|
|
await this.queryCareerPath();
|
|
|
|
|
|
await this.queryPathInfo();
|
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
|
},
|
|
|
|
|
|
async queryCareerPath() {
|
|
|
|
|
|
const res = await api.queryCareerPath();
|
|
|
|
|
|
if (res.Result == 1) {
|
|
|
|
|
|
const list = res.Data.JobList
|
|
|
|
|
|
this.jobList = list;
|
|
|
|
|
|
if(list.length>0){
|
|
|
|
|
|
this.checkedCode = list[0].EncodeId;
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: res.Message,
|
|
|
|
|
|
icon: "none"
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 获取职业
|
|
|
|
|
|
async queryPathInfo(){
|
|
|
|
|
|
this.isLoadingEnd = false;
|
2025-11-20 18:37:15 +08:00
|
|
|
|
if(this.jobList.length == 0){
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
2025-11-05 11:09:27 +08:00
|
|
|
|
const res = await api.queryPathInfo(this.checkedCode);
|
|
|
|
|
|
if (res.Result == 1) {
|
|
|
|
|
|
let data = res.Data;
|
|
|
|
|
|
this.jobName = data.Name;
|
|
|
|
|
|
this.jobIntroduce = data.JobIntroduce;
|
|
|
|
|
|
this.jobPath = data.JobPath;
|
|
|
|
|
|
this.academicRequire = JSON.parse(data.AcademicRequire).slice(0,5);
|
|
|
|
|
|
this.generalSkillRequire = JSON.parse(data.GeneralSkillRequire).slice(0,5);
|
|
|
|
|
|
this.certificateRequire = JSON.parse(data.CertificateRequire).slice(0,5);
|
|
|
|
|
|
|
|
|
|
|
|
this.jobRequire = JSON.parse(data.JobRequire).slice(0,5);
|
|
|
|
|
|
this.jobSkill = JSON.parse(data.JobSkill).slice(0,5);
|
|
|
|
|
|
this.professionalRequire = JSON.parse(data.ProfessionalRequire).slice(0,5);
|
|
|
|
|
|
this.isLoadingEnd = true;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: res.Message,
|
|
|
|
|
|
icon: "none"
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 去测评
|
|
|
|
|
|
navTest(){
|
|
|
|
|
|
uni.navigateTo({
|
2025-12-04 19:50:47 +08:00
|
|
|
|
url: `/packageCa/pagesTest/interestTestTitle`
|
2025-11-05 11:09:27 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
//选中职业
|
|
|
|
|
|
checkedJob(ITEM){
|
|
|
|
|
|
this.checkedCode = ITEM.EncodeId;
|
|
|
|
|
|
this.queryPathInfo();
|
|
|
|
|
|
},
|
|
|
|
|
|
showName(ITEM){
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: ITEM,
|
|
|
|
|
|
icon:"none"
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
|
|
|
|
|
|
page {
|
|
|
|
|
|
background: #EEF1F8 url("#{$image-oss-url}/17.png") no-repeat;
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
|
|
|
|
|
|
.head-bar {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
|
.go-back {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 10rpx;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
|
|
|
|
|
|
background-size: 38rpx 38rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.empty {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
padding-top: 60rpx;
|
|
|
|
|
|
padding-bottom: 100rpx;
|
|
|
|
|
|
.icon {
|
|
|
|
|
|
width: 240rpx;
|
|
|
|
|
|
height: 240rpx;
|
|
|
|
|
|
background: url("#{$image-oss-url}/empty.png") no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.txt {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #A4B3E5;
|
|
|
|
|
|
}
|
|
|
|
|
|
.nav-btn {
|
|
|
|
|
|
width: 335rpx;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
margin: 40rpx auto 0;
|
|
|
|
|
|
background-color: #1989fa;
|
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.index-wrap {
|
|
|
|
|
|
.content {
|
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
margin-top: 60rpx;
|
|
|
|
|
|
.title-h1 {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
|
|
|
|
|
.section {
|
|
|
|
|
|
width: 650rpx;
|
|
|
|
|
|
padding: 30rpx 30rpx 50rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
border-radius: 14rpx;
|
|
|
|
|
|
margin-bottom: 50rpx;
|
|
|
|
|
|
.table {
|
|
|
|
|
|
border-left: 2rpx solid #eef2fd;
|
|
|
|
|
|
border-top: 2rpx solid #eef2fd;
|
|
|
|
|
|
border-right: 2rpx solid #eef2fd;
|
|
|
|
|
|
border-radius: 6rpx;
|
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
max-height: 400rpx;
|
|
|
|
|
|
.tr {
|
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
|
.th {
|
2025-11-28 13:55:54 +08:00
|
|
|
|
width: 170rpx;
|
2025-11-05 11:09:27 +08:00
|
|
|
|
height: 72rpx;
|
|
|
|
|
|
line-height: 72rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
background: #F6F9FE;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
border-bottom: 2rpx solid #eef2fd;
|
|
|
|
|
|
&:nth-child(1){
|
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
&:nth-child(2){
|
|
|
|
|
|
width: 250rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.td {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
2025-11-28 13:55:54 +08:00
|
|
|
|
width: 170rpx;
|
2025-11-05 11:09:27 +08:00
|
|
|
|
min-height: 72rpx;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
border-bottom: 2rpx solid #eef2fd;
|
|
|
|
|
|
&:nth-child(1){
|
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
&:nth-child(2){
|
|
|
|
|
|
width: 250rpx;
|
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
|
}
|
|
|
|
|
|
.checked-btn {
|
|
|
|
|
|
width: 28rpx;
|
|
|
|
|
|
height: 28rpx;
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
border: 2rpx solid #999999;
|
|
|
|
|
|
&.on {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
border-color: #1989fa;
|
|
|
|
|
|
background: #1989fa;
|
|
|
|
|
|
&:before {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
width: 12rpx;
|
|
|
|
|
|
height: 12rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.is-has {
|
|
|
|
|
|
width: 48rpx;
|
|
|
|
|
|
height: 48rpx;
|
|
|
|
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAPXSURBVGiB7VlBbttIEKweLrXH5QKW4JuZH/gHa79g5RfEeoFpwBJ8o3Tz2gGkvCD6gZMXWE/QD8TcDDvA8hopntpDxlnZniFHJGMggOomcWbY1Wx2VzeBLbbY4peGNH3gzhkPRBCLYI9ABCISQUbiswjy5RKzfCJ5U/erTWD3nPHDAw5E8DeArs8eEjMSn759w7QumVoEds6YKIUTAHGV/SRyEUyWS7yvSqQSgXafxyJIqxr+HCRyEqMv72Sy6d6NCXQGTAEMN93nAxLT1QqnmzwNbwJRwihsIRUgqWyhH+ZK4ej2QjKfxcr31DDE+BWMB4B9rXETJYx8FnsR6AyYiuC4tmn+iFu/Y+yzsDSEOgN2AVw3YpbbiikAgC+cNLy7lFHRVp8n4OWJipgrhTd3/0gPhC1khrvnLMx0vxVdNBmnkVT5HAQm95dy+uM3cSCWeNBECqDnOscZQlHCKAyxELF6pha0xul6zo8Sxq0WFq71SuGNKys5QygM0X0N433woHHiulb0Dvy1kWV+GDqMLyxcUqCxrARMDvYSZr4gMHFlFFN5iwpX3O5z33bBSiAMETccPvPVEoXpEIJZ0WUSB7b/XSFkZVsFJHKlcFSmb5QUE1QKf1j/d9zUx/sfSUzJYs+JYOKja24vJCPgfLlJezq31gFR2HMckpMYPW9ETModW+TGvKySwjRFmkgtlXgd/gQcxs+CAD2bNw2ZXrvPWOT/WNUapy8OshiudXWdZQ8hjc+Wv/e1xtsilRgEaxVTMP3yTpzh1Rkw1RqLEq+vw7+QKfVysclKwzDEYueMVll9eyEZBFMS+fKr3fu754w7Ay6waVMk9lphJaC1u7CIIFIK43afH2xPQwlGIpjYsk67z32tcVNFXzmiwq6FooRRq4V/Pc717p7afR4DGFetL1rj0BaSTjHXGfDasxpnSuGwiIQZAnzYxOB1kMjvr+RP2zWnFiLxyfP8WGt3z2AkQL2e4rHhscBJIAgwK9En6+ia3uEJTDNyU1eWULud6SRgQsLJ3IKhiXPAvEda47q28cSsKB0XtpSmivo+BYggfWwBwxbSJjTVk9piQWlPTJaoyKeItca43edxEyMYolxHeQ22fuY0zgUSs/srOSxb5zUXuruUUZnqbBjZaoUjn4Xek7kgQO+VSGRK4dB3PrrxcLc94E8bMRYpXhcqjdd3zpiIIG247SydwtlQ+QOH0UsnJJJaRARTJRht4vWn22ti95yx1nhrJmvWxtuCjMDHQOF9VcMf0ehHPtNadkWwR36fbJj+Onv80Adgfn8l8ybvu8UWW/zC+A/xK5HWhynIGQAAAABJRU5ErkJggg==") center no-repeat;
|
|
|
|
|
|
background-size: 90%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.desc {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
margin-bottom: 50rpx;
|
|
|
|
|
|
.strong {
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.path-map {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.terminal-point,
|
|
|
|
|
|
.origin-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
width: 144rpx;
|
|
|
|
|
|
height: 144rpx;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
background-color: #1989fa;
|
|
|
|
|
|
animation: change 2s linear infinite 0s;
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes change {
|
|
|
|
|
|
0% {
|
|
|
|
|
|
box-shadow: 0 0 1px 6rpx #e8f3fe;
|
|
|
|
|
|
}
|
|
|
|
|
|
25% {
|
|
|
|
|
|
box-shadow: 0 0 1px 12rpx #e8f3fe;
|
|
|
|
|
|
}
|
|
|
|
|
|
50% {
|
|
|
|
|
|
box-shadow: 0 0 1px 16rpx #e8f3fe;
|
|
|
|
|
|
}
|
|
|
|
|
|
75% {
|
|
|
|
|
|
box-shadow: 0 0 1px 12rpx #e8f3fe;
|
|
|
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
|
|
|
box-shadow: 0 0 1px 6rpx #e8f3fe;;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.path-list {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
height: 1160rpx;
|
|
|
|
|
|
width: 690rpx;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
.drop {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
.txt {
|
|
|
|
|
|
width: 150rpx;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
height: 52rpx;
|
|
|
|
|
|
padding: 0 10rpx;
|
|
|
|
|
|
line-height: 52rpx;
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
border-radius: 26rpx;
|
|
|
|
|
|
color: #1989fa;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
border: solid 2rpx #1989fa;
|
|
|
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
|
height: 44rpx;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAsCAMAAAAzZkq9AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAByFBMVEUZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoAAAAhPv4wAAAAlnRSTlMAMGSDm56PbUsPIoDY77RPGv7IUYz6uSGZ9w267UOvJU7FG2OfAgHwvVZzqPFxPBPW0IUM4Oid9doyq/Pi4/LRvm7OePgYl1x65NweDpWx2y9FkHQfBRX5zcbnXuZhR6zlsinqVesZV+42OHBmBolpMwQIqaMrmIKiHTpCaqotUHw9EaUj9MOBaCAkb4jUyaeO4fvdrUZV3EhjAAAAAWJLR0SX5m4brwAAAAd0SU1FB+kKHg8QKp3MRF0AAAH3SURBVDjLfZT5P5tBEMaHCEop6qyUV9QV4oqjrgqNO62rlCC0SJBWaV093UfrPjp/r/fNm92dJO/r+SUz830+u5uZdxeAKCLSEGWMjol9BFqKi3+MASUkPgnDSVHJSJXyNJinpmGo0jMIz0QNZcUx/CwbNWV6HjDkoJ5y/VzS5ZincHOyvgHzZcOLBzimFUBhEcmLU0skS2kZqVihnGSR6qErKkWpCqpFIrH/bavhtVoo5nGdaJy5nhXr4SU3NJDWNrJiEzSzsIXOxsCqr6CVhXZqaBOGPBa2U8NrcQYjCx0dxNDJBwZd/JDdxNDDir3Qxw0tTs7f8OJbgH7hGAhwvi3iIMAQ6fXwO4ARyS4KTbJ99D0d39i4i6YTyoJW/Wn3qltO6hqmVINbj0+HtSVYM6IvHzQNH0nnZjX4HB1OxnwYjwm+nB09IdwSer09lUHcq/FAlAq8sBgKbUu+T2Bh3A6fl7+srHL61fvNgcpFdKsf8xqsKz+mjUGVb9bKWfOW1fodPPLHOv4D4Oev7t8mudqqHKVO9lb/Yatt77BodVe5tV2wh7gMOnLmoAsqlAuqp30s8r8vVflaL+OB4RDRB1AwrAziqPP4xL3y17PnHDX/W5JOz4zncvVCnYfNd6Q5zcttspz3Krv9ev7GDxyu25S74//qtveUBePSekmnEAAAAABJRU5ErkJggg==") no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
&.ing {
|
|
|
|
|
|
.drop {
|
|
|
|
|
|
transform: scale(0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
&.show {
|
|
|
|
|
|
.line-1{
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.2s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
animation: showDot 0.25s linear 1.1s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.8s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
animation: showDot 0.2s linear 2s;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-2{
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.5s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.4s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.9s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
animation: showDot 0.2s linear 2.1s;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-3{
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.1s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.8s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
animation: showDot 0.25s linear 1.3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.5s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.7s;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-4{
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.6s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.9s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
animation: showDot 0.25s linear 1.4s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.6s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.8s;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-5{
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.2s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.9s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.4s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.7s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.9s;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-6{
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.4s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
animation: showDot 0.2s linear 0.8s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
animation: showDot 0.25s linear 1s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
animation: showDot 0.2s linear 1.9s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
animation: showDot 0.2s linear 2.2s;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.line-1 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 65rpx;
|
|
|
|
|
|
top: 20rpx;
|
|
|
|
|
|
width: 190rpx;
|
|
|
|
|
|
height: 1168rpx;
|
|
|
|
|
|
background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-1.png") center no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
left: 40rpx;
|
|
|
|
|
|
top: -13rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
left: -37rpx;
|
|
|
|
|
|
top: 202rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
left: -77rpx;
|
|
|
|
|
|
top: 381rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
left: -48rpx;
|
|
|
|
|
|
top: 750rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
left: 10rpx;
|
|
|
|
|
|
top: 910rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-2 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 180rpx;
|
|
|
|
|
|
top: 20rpx;
|
|
|
|
|
|
width: 95rpx;
|
|
|
|
|
|
height: 1169rpx;
|
|
|
|
|
|
background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-2.png") center no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
left: -58rpx;
|
|
|
|
|
|
top: 146rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
left: -76rpx;
|
|
|
|
|
|
top: 316rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
left: -82rpx;
|
|
|
|
|
|
top: 480rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
left: -85rpx;
|
|
|
|
|
|
top: 633rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
left: -57rpx;
|
|
|
|
|
|
top: 822rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-3 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 310rpx;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
width: 16rpx;
|
|
|
|
|
|
height: 1169rpx;
|
|
|
|
|
|
background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-3.png") center no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 90rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 264rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 433rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 589rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 773rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-4 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 410rpx;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
width: 16rpx;
|
|
|
|
|
|
height: 1169rpx;
|
|
|
|
|
|
background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-4.png") center no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 153rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 336rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 504rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 656rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
left: -78rpx;
|
|
|
|
|
|
top: 839rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-5 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 465rpx;
|
|
|
|
|
|
top: 16rpx;
|
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
|
height: 1168rpx;
|
|
|
|
|
|
background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-5.png") center no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
left: -72rpx;
|
|
|
|
|
|
top: -41rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
left: -39rpx;
|
|
|
|
|
|
top: 219rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
left: -31rpx;
|
|
|
|
|
|
top: 446rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
left: -36rpx;
|
|
|
|
|
|
top: 695rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
left: -61rpx;
|
|
|
|
|
|
top: 933rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.line-6 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 480rpx;
|
|
|
|
|
|
top: 20rpx;
|
|
|
|
|
|
width: 186rpx;
|
|
|
|
|
|
height: 1168rpx;
|
|
|
|
|
|
background: url("#{$image-oss-url}/gaoxiao/jobCareer/path-6.png") center no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
.drop-1 {
|
|
|
|
|
|
left: -5rpx;
|
|
|
|
|
|
top: 57rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-2 {
|
|
|
|
|
|
left: 66rpx;
|
|
|
|
|
|
top: 273rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-3 {
|
|
|
|
|
|
left: 90rpx;
|
|
|
|
|
|
top: 518rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-4 {
|
|
|
|
|
|
left: 54rpx;
|
|
|
|
|
|
top: 753rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-5 {
|
|
|
|
|
|
left: -58rpx;
|
|
|
|
|
|
top: 1028rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes showDot {
|
|
|
|
|
|
0% {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transform: scale(0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
