262 lines
6.9 KiB
Vue
262 lines
6.9 KiB
Vue
<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
|
|
<script setup>
|
|
import { useSkillDevelopmentStore } from '@/stores/useSkillDevelopmentStore';
|
|
|
|
|
|
const store = useSkillDevelopmentStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="skill-development">
|
|
<!-- 职业技能查询区域 -->
|
|
<div class="query-section">
|
|
<div class="section-title">
|
|
<uni-icons color="#286BFA" size="18" type="search"></uni-icons>
|
|
<span class="title-text">技能发展路径查询</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="input-item">
|
|
<span class="input-label">当前职位</span>
|
|
<picker @change="store.eventProfession" :value="store.professionIndex" :range="store.professionsRef" range-key="label">
|
|
<div class="picker-field">
|
|
<span :class="store.professionLabel ? 'picker-text' : 'picker-placeholder'">
|
|
{{ store.professionLabel || '请选择目标职业' }}
|
|
</span>
|
|
<uni-icons color="#999999" size="16" type="down"></uni-icons>
|
|
</div>
|
|
</picker>
|
|
</div>
|
|
<div class="input-item">
|
|
<span class="input-label">目标职业</span>
|
|
<picker :range="store.pathsRef" :value="store.targetCareerIndex" range-key="label" @change="store.eventTargetCareer">
|
|
<div class="picker-field">
|
|
<span :class="store.targetCareerLabel ? 'picker-text' : 'picker-placeholder'">
|
|
{{ store.targetCareerLabel || '请选择目标职业' }}
|
|
</span>
|
|
<uni-icons color="#999999" size="16" type="down"></uni-icons>
|
|
</div>
|
|
</picker>
|
|
</div>
|
|
<button class="query-btn" @click="store.eventSearch">
|
|
<span>查询技能发展路径</span>
|
|
<uni-icons color="#FFFFFF" size="18" type="search"></uni-icons>
|
|
</button>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.skill-development {
|
|
padding: 10rpx 28rpx 20rpx;
|
|
background-color: #EBF4FF;
|
|
min-height: 95%;
|
|
}
|
|
|
|
.query-section {
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 28rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.section-title {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.content-section {
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 28rpx;
|
|
box-sizing: border-box;
|
|
overflow: visible;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.input-label {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.input-field {
|
|
background-color: #F5F5F5;
|
|
border: 1rpx solid #E0E0E0;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx 24rpx;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.path-summary {
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
}
|
|
|
|
button::after {
|
|
border: none;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
margin-bottom: 24rpx;
|
|
|
|
.content-section & {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #167CF1;
|
|
}
|
|
|
|
.intro-text {
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
color: rgba(154, 154, 154, 1);
|
|
text-align: left;
|
|
font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
|
font-weight: 600;
|
|
margin-bottom: 90rpx;
|
|
width: 672rpx;
|
|
}
|
|
|
|
.skill-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.skill-item {
|
|
width: 100%;
|
|
max-width: 796rpx;
|
|
min-height: 162rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 20rpx;
|
|
background-color: rgba(239, 239, 239, 1);
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
.skill-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
flex-shrink: 0;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.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-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>
|