ks-app-employment-service/pages/service/components/CareerRecommend.vue

<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
<script setup>
import { useCareerRecommendationStore } from '@/stores/useCareerRecommendationStore';


const store = useCareerRecommendationStore();
</script>

<template>
<div class="career-recommend">
    <div class="info-card">
        <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">
                <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>
            <button class="query-btn" @click="store.eventSearch">
                <span>搜索</span>
                <uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
            </button>
        </div>
    </div>
    <div class="info-card">
        <div class="card-title">我的技能标签</div>
        <div class="skill-tags">
            <div v-for="(skill, index) in store.skillTags" :key="index" class="skill-tag">
                {{ skill }}
            </div>
            <span v-if="!store.skillTags.length" class="empty-text">暂无技能数据</span>
        </div>
    </div>
    <div class="section-title">
        相似推荐职位
    </div>
    <div v-if="!store.result && store.result.length === 0" class="empty-text">暂无推荐职位</div>
    <div v-for="(job, index) in store.result" :key="index" class="job-item-card">
        <div class="job-header">
            <span class="job-title">{{ job.title }}</span>
        </div>
        <div class="job-header">
            <span>职业相似度：{{ job.percentage }}%</span>
        </div>
        <div class="job-skills">
            <div v-for="tag in job.tags" :key="tag" class="job-skill-tag">
                {{ tag }}
            </div>
        </div>
    </div>
</div>
</template>

<style lang="scss" scoped>
.career-recommend {
    padding: 10rpx 28rpx 20rpx;
}

.section-title {
    font-size: 32rpx;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 24rpx;
}

.title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #157DF0;
}

.info-card {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 28rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 24rpx;
}

.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

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

    .value {
        font-size: 32rpx;
        line-height: 46rpx;
        color: rgb(16, 16, 16);
        font-weight: 600;
        text-align: left;
        font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    }
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.skill-tag {
    background-color: #EAEFFE;
    color: rgba(44, 101, 247, 1);
    padding: 8rpx 20rpx;
    border-radius: 0;
    font-size: 24rpx;
    white-space: nowrap;
}

.job-item-card {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 28rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    border-left: 6rpx solid #409EFF;
    position: relative;
}

.job-header {
    margin-bottom: 16rpx;
}

.job-title {
    font-size: 32rpx;
    font-weight: 600;
    color: rgb(16, 16, 16);
    text-align: left;
    font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    line-height: 46rpx;
    width: 100%;
}

.job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
}

.job-skill-tag {
    width: 130rpx;
    height: 36rpx;
    line-height: 34rpx;
    background-color: rgba(49, 100, 239, 0.1);
    color: rgba(44, 101, 247, 1);
    font-size: 24rpx;
    text-align: center;
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    border-radius: 8rpx;
    white-space: nowrap;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.recommend-count {
    margin-left: 12rpx;
    font-size: 22rpx;
    color: #666666;
    font-weight: 400;
}

.empty-text {
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
}

button::after {
    border: none;
}
</style>