ks-app-employment-service/pages/service/components/SkillDevelopment.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 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">{{ store.currentCareerLabel }}技能</span>
        </div>
        <div class="skill-list">
            <div v-if="store.result.length === 0" class="empty-text">暂无数据</div>
            <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>
        </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 {
    font-size: 32rpx;
    color: #000000;
    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;
}

.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-label {
    color: #94a3b8;
}

.skill-detail-item {
    background: #c1d2ea;
}

.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;
        }
    }
}

</style>