209 lines
6.9 KiB
Vue
209 lines
6.9 KiB
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
|
|
: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="jobInfo.company && jobInfo.company.industry"
|
|
dictType="industry"
|
|
:value="jobInfo.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="jobInfo.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 = 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>
|