ks-app-employment-service/packageA/pages/collection/compare.vue

<template>
    <view class="job-comparison-container">
        <scroll-view class="horizontal-scroll" scroll-x="true">
            <view class="comparison-table">
            <view class="table-row table-header">
                <view class="table-cell fixed-column"></view>
                <view v-for="(job, index) in jobs" :key="index" class="table-cell job-title-cell">
                    <text>{{ job?.jobTitle || '' }}</text>
                    <text class="company">{{ job?.company || '' }}</text>
                </view>
            </view>

            <view class="table-row">
                <view class="table-cell fixed-column detail-label">
                    <text>薪资</text>
                </view>
                <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                    <view>
                        <Salary-Expectation
                            v-if="job"
                            :max-salary="job.maxSalary"
                            :min-salary="job.minSalary"
                            :is-month="true"
                        ></Salary-Expectation>
                    </view>
                </view>
            </view>

            <view class="table-row">
                <view class="table-cell fixed-column detail-label">
                    <text>公司名称</text>
                </view>
                <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                    <view>{{ job?.companyName || '' }}</view>
                </view>
            </view>

            <view class="table-row">
                <view class="table-cell fixed-column detail-label">
                    <text>学历</text>
                </view>
                <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                    <view><dict-Label dictType="education" :value="job?.education"></dict-Label></view>
                </view>
            </view>

            <view class="table-row">
                <view class="table-cell fixed-column detail-label">
                    <text>经验</text>
                </view>
                <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                    <view><dict-Label dictType="experience" :value="job?.experience"></dict-Label></view>
                </view>
            </view>

            <view class="table-row">
                <view class="table-cell fixed-column detail-label">
                    <text>工作地点</text>
                </view>
                <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                    <view>{{ job?.jobLocation || '' }}</view>
                </view>
            </view>

            <view class="table-row">
                <view class="table-cell fixed-column detail-label">
                    <text>来源</text>
                </view>
                <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                    <view>{{ job?.dataSource || '' }}</view>
                </view>
            </view>

            <view class="table-row">
                <view class="table-cell fixed-column detail-label">
                    <text>职位描述</text>
                </view>
                <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                    <view>{{ job?.description || '' }}</view>
                </view>
            </view>
                <view class="table-row">
                    <view class="table-cell fixed-column detail-label">
                        <text>工业</text>
                    </view>
                    <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                        <view>
                            <dict-tree-Label
                                v-if="job.company && job.company.industry"
                                dictType="industry"
                                :value="job.company.industry"
                            ></dict-tree-Label>
                        </view>
                    </view>
                </view>
                <view class="table-row">
                    <view class="table-cell fixed-column detail-label">
                        <text>企业规模</text>
                    </view>
                    <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                        <view>
                            <dict-Label dictType="scale" :value="job.company?.scale"></dict-Label>
                        </view>
                    </view>
                </view>
                <view class="table-row">
                    <view class="table-cell fixed-column detail-label">
                        <text>热门</text>
                    </view>
                    <view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
                        <view>
                            {{ job?.isHot ? '是' : '否' }}
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { inject, ref, computed, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useDictStore from '@/stores/useDictStore';
const jobs = ref([]);

onLoad(() => {
    let compareData = uni.getStorageSync('compare');
    jobs.value = Array.isArray(compareData) ? compareData : [];
});
</script>

<style scoped>
.job-comparison-container {
    padding: 10px;
    background-color: #f8f8f8;
}

.horizontal-scroll {
    width: 100%;
    white-space: nowrap; /* 保持 flex 子项在同一行 */
}

.comparison-table {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

.table-row {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
}

.table-row:first-child {
    border-bottom: 2px solid #ccc;
}

.table-cell {
    flex-shrink: 0;
    padding: 15px 10px;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    white-space: normal;
    word-break: break-all;
}

.table-cell:last-child {
    border-right: none;
}

.fixed-column {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #fff;
    border-right: 2px solid #ccc;
    width: 120px; /* 固定左侧列的宽度 */
    text-align: left;
}

.table-header {
    background-color: #f1f1f1;
    font-weight: bold;
}

.job-title-cell {
    text-align: center;
}

.company {
    font-weight: normal;
    font-size: 12px;
    color: #666;
}

.detail-label {
    font-weight: bold;
    color: #333;
}

.detail-content {
    text-align: center;
}
</style>