sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

= 职业规划推荐

Browse Source
This commit is contained in:
danchaotaiyang
2026-01-23 15:43:53 +08:00
parent ebb6bc6e33
commit a45b247496
3 changed files with 202 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
pages/service/components/SkillDevelopment.vue
View File

@@ -43,30 +43,48 @@ const store = useSkillDevelopmentStore();
</button>
</div>
</div>
<div class="content-section career-section">
<div class="section-title">
<span class="title-text">职业路径</span>
</div>
<div class="">
<scroll-view scroll-x>
<div class="career-paths">
<template v-for="(item, index) in store.careerPaths" :key="item.label">
<div
:class="{ 'career-active': store.currentCareer && store.currentCareer.value === item.value }"
class="career-path-item"
@click="store.eventResult(item)"
>
<div
class="career-index"
:class="[index === 0 ? 'font-size-18' : 'font-size-24']"
>
{{ index === 0 ? '起点' : index }}
</div>
<div class="career-label">{{ item.label }}</div>
</div>
</template>
</div>
</scroll-view>
</div>
</div>
<div class="content-section">
<div class="section-title">
<uni-icons color="#000000" size="18" type="person-filled"></uni-icons>
<span class="title-text">技能发展路径</span>
<span class="title-text">{{ store.currentCareerLabel }}技能</span>
</div>
<div class="intro-text">
基于您的当前职业和目标职业,以下是您需要重点发展的技能:
</div>
<div class="skill-list">
<div v-if="store.result.length === 0" class="empty-text">暂无数据</div>
<div v-for="(skill, index) in store.result" v-else :key="index" class="skill-item">
<div class="skill-header">
<span class="skill-name">{{ skill.name }}</span>
<div class="skill-info">
<span class="skill-score">技能分数: {{ skill.score }}</span>
<span class="skill-weight">权重: {{ skill.weight }}</span>
</div>
</div>
<div v-if="skill.tags && skill.tags.length > 0" class="skill-tags">
<div v-for="(tag, tagIndex) in skill.tags" :key="tagIndex" class="skill-tag">
{{ tag }}
<div v-for="(item, index) in store.result" :key="index" class="font-weight-700 font-size-18 skill-card">
<div class="margin-bottom-10 skill-label">{{ item.label }}</div>
<div class="d-flex flex-column gap-15 skill-detail">
<div v-for="d in item.children" :key="d.label" class="d-flex justify-content-between align-items-center padding-10 border-radius-3 skill-detail-item">
<div class="skill-detail-item-label">{{ d.label }}</div>
<div class="d-flex justify-content-between align-items-center width-320">
<div>技能得分：{{ d.value }}</div>
<div>权重：{{ d.weight }}</div>
</div>
</div>
</div>
</div>
@@ -190,73 +208,96 @@ button::after {
position: relative;
}
.skill-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
width: 100%;
box-sizing: border-box;
.career-paths {
grid-auto-flow: column;
.career-index {
background: #6c64e7;
border: 3px solid #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.career-label {
color: #6c64e7;
}
.career-active {
.career-index {
background: #22c55e;
}
.career-label {
color: #000;
}
}
}
.skill-name {
font-size: 32rpx;
line-height: 46rpx;
color: rgb(16, 16, 16);
text-align: left;
font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 600;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.skill-label {
color: #94a3b8;
}
.skill-info {
display: flex;
align-items: center;
gap: 12rpx;
flex-shrink: 0;
margin-left: 16rpx;
.skill-detail-item {
background: #c1d2ea;
}
.skill-score {
font-size: 24rpx;
line-height: 34rpx;
border-radius: 10rpx;
background-color: rgba(49, 100, 239, 0.1);
color: rgba(44, 101, 247, 1);
text-align: center;
padding: 6rpx 12rpx;
white-space: nowrap;
.skill-detail-item-label {
color: #334155;
& + div {
color: #4f46e5;
}
}
</style>
<style lang="scss" scoped>
.career-paths {
display: grid;
grid-auto-flow: column;
gap: 40px;
width: fit-content;
padding-bottom: 10px;
.career-path-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
font-weight: 700;
cursor: pointer;
}
.career-index {
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
background: #6c64e7;
border: 3px solid #fff;
font-size: 18px;
color: #fff;
border-radius: 50%;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.career-label {
margin-top: 10px;
text-wrap: nowrap;
color: #6c64e7;
}
.career-active {
.career-index {
background: #22c55e;
}
.career-label {
color: #000;
}
}
}
.skill-weight {
font-size: 24rpx;
line-height: 34rpx;
border-radius: 10rpx;
background-color: rgba(49, 100, 239, 0.1);
color: rgba(44, 101, 247, 1);
text-align: center;
padding: 6rpx 12rpx;
white-space: nowrap;
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
}
.skill-tag {
background-color: rgba(49, 100, 239, 0.1);
color: rgba(44, 101, 247, 1);
padding: 6rpx 12rpx;
border-radius: 8rpx;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
white-space: nowrap;
}
</style>