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 v-if="store.careerPaths.length" 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(index)"
                    >
                        <div
                            class="career-index"
                        >
                            <span class="index">{{ item.index }}</span>
                        </div>
                        <div class="career-label">{{ item.label }}</div>
                    </div>
                    </template>
                </div>
            </scroll-view>
        </div>
    </div>
    <div v-if="store.careerPaths.length" 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="skill-card">
                <div class="skill-label">{{ item.label }}</div>
                <div class="skill-detail">
                    <div v-for="d in item.children" :key="d.label" class="skill-detail-item">
                        <div class="skill-detail-item-label">{{ d.label }}</div>
                        <div class="skill-detail-item-value">
                            <div class="value-item">技能得分：{{ d.value }}</div>
                            <div class="value-item">权重：{{ 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;
    margin-bottom: 20rpx;
    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;
    }
}

.career-paths {
    display: grid;
    grid-auto-flow: column;
    gap: 20px;
    padding-bottom: 10px;

    .career-path-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80px;
        padding: 5px;
        font-weight: 700;
        cursor: pointer;

        .career-index {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 48px;
            font-size: 20px;
            color: #fff;
            border-radius: 50%;

            .index {
                position: relative;
                z-index: 10;
            }

            &:before,
            &:after {
                content: '';
                position: absolute;
            }

            &:before {
                inset: 0;
                z-index: 1;
                background: #6c64e7;
                border: 3px solid #fff;
                border-radius: 50%;
                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
            }

            &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 50%;
                z-index: 0;
                width: 100px;
                border-bottom: 4px solid #ccc;
            }
        }

        .career-label {
            margin-top: 10px;
            font-size: 16px;
            text-align: center;
            color: #6c64e7;
        }

        &.career-active {
            .career-index {
                &:before {
                    background: #22c55e;
                }
                &:after {
                    border-color: #22c55e;
                }
            }

            .career-label {
                color: #000;
            }

            & + .career-path-item {
                .career-index {
                    &:after {
                        border-color: #22c55e;
                    }
                }
            }
        }

        &:first-child {
            .career-index {
                font-size: 16px;

                &:after {
                    display: none;
                }
            }
        }

        &:last-child {
            .career-index {
                font-size: 16px;
            }
        }
    }
}

</style>

<style lang="scss" scoped>
.title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #167CF1;
}

.skill-card {
    margin-bottom: 14px;
    box-sizing: border-box;
    font-weight: 700;

    .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-label {
        margin-bottom: 10px;
        font-size: 16px;
        color: #94a3b8;
    }

    .skill-detail {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .skill-detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-radius: 3px;
            background: #c1d2ea;
        }

        .skill-detail-item-label {
            width: 55%;
            word-wrap: break-word;
            white-space: pre-wrap;
            word-break: break-all;
            color: #334155;
        }

        .skill-detail-item-value {
            width: 45%;
            padding-left: 6px;
            color: #4f46e5;
            box-sizing: border-box;

            .value-item {
                text-wrap: nowrap;
            }
        }
    }
}

</style>