|
|
@@ -1,51 +1,44 @@
|
|
|
<!-- 搜索页面的职位详情-长条 -->
|
|
|
<template>
|
|
|
<v-card class="positionItem" v-for="(item, index) in list" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
|
|
|
- <!-- 职位、公司 -->
|
|
|
- <div class="position-and-company" @click="handlePosition(item)">
|
|
|
- <div class="position" @mouseenter="item.positionActive = true" @mouseleave="item.positionActive = false">
|
|
|
- <p :class="['title1', {'default-active': item.positionActive }]">{{ item.job.name }}{{ item.job.pos ? ' [' + item.job.pos + '] ' : '' }}</p>
|
|
|
- <div class="d-flex row2">
|
|
|
- <div class="salary">
|
|
|
- <span>16-18K</span>
|
|
|
- <span>·13薪</span>
|
|
|
- </div>
|
|
|
- <template v-if="item.job?.tagList?.length">
|
|
|
- <v-chip class="tipClsss" size="x-small" label v-for="(tip, i) in item.job.tagList" :key="i" color="#666">{{ tip }}</v-chip>
|
|
|
- <v-chip v-bind="props" class="tipClsss" prepend-icon="mdi-message-processing" size="x-small" label color="secondary" variant="outlined">
|
|
|
- <span v-if="item.active">立即沟通</span>
|
|
|
- <template v-else>
|
|
|
- <span class="textColor666">{{ item.contact.name }}</span>
|
|
|
- <span style="margin: 0 2px;">|</span>
|
|
|
- <span class="textColor666">{{ item.contact.postNameCn }}</span>
|
|
|
- </template>
|
|
|
- </v-chip>
|
|
|
- <v-chip v-if="item.contact.status === 1" size="x-small" label color="green" variant="outlined">在线</v-chip>
|
|
|
- </template>
|
|
|
+ <div class="position-and-company">
|
|
|
+ <!-- 职位 -->
|
|
|
+ <div class="position" @mouseenter="item.positionActive = true" @mouseleave="item.positionActive = false" @click="handlePosition(item)">
|
|
|
+ <div class="d-flex">
|
|
|
+ <p :class="['title1', {'default-active': item.positionActive }]">{{ item.job.name }}{{ item.job.pos ? ' [' + item.job.pos + '] ' : '' }}</p>
|
|
|
+ <p class="salary ml-1">{{ item.job.payFrom }}-{{ item.job.payTo }}/{{ item.job.payName }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="mt-2">
|
|
|
+ <v-chip size="x-small" label v-for="(j, i) in desc" :key="i" class="mr-1" color="#666" :prepend-icon="j.mdi">{{ item.job[j.value] }}</v-chip>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="company">
|
|
|
- <v-img class="companyLogo" :src="item.enterprise.logoUrl" />
|
|
|
- <div>
|
|
|
+ <!-- 公司 -->
|
|
|
+ <div class="company" @click="handleEnterprise(item)">
|
|
|
+ <div class="float-left">
|
|
|
+ <v-img :src="item.enterprise.logoUrl" :alt="item.enterprise.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
|
|
|
+ </div>
|
|
|
+ <div class="company-info">
|
|
|
<v-hover>
|
|
|
<template v-slot:default="{ isHovering, props }">
|
|
|
- <p v-bind="props" :class="['title1', {'default-active': isHovering }]">{{ item.enterprise.anotherName }}</p>
|
|
|
+ <h3 v-bind="props" :class="{'default-active': isHovering }" class="title1">{{ item.enterprise.anotherName }}</h3>
|
|
|
</template>
|
|
|
</v-hover>
|
|
|
- <v-chip class="tipClsss" size="x-small" label v-for="(tip, i) in item.enterprise.tags" :key="i" color="#666">{{ tip }}</v-chip>
|
|
|
+ <p class="mt-2">{{ item.enterprise.financingName }}<span class="mx-2">|</span>{{ item.enterprise.scaleName }}<span class="mx-2">|</span>{{ item.enterprise.industryName }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 底部 -->
|
|
|
<div class="footer">
|
|
|
<div class="footer-left">
|
|
|
- <template v-for="(jobTag, jobTagsIndex) in item.enterprise.tags1" :key="jobTagsIndex">
|
|
|
+ <template v-for="(jobTag, jobTagsIndex) in item.job.tagList" :key="jobTagsIndex">
|
|
|
<span class="textColor666 mx-1" v-if="jobTagsIndex">|</span>
|
|
|
- <span class="textColor666">{{ jobTag }}</span>
|
|
|
+ <span class="textColor666 dis">{{ jobTag }}</span>
|
|
|
</template>
|
|
|
</div>
|
|
|
- <div class="footer-right" v-if="item.enterprise.welfareList?.length">
|
|
|
- {{ item.enterprise.welfareList.join('、') }}
|
|
|
+ <div class="footer-right">
|
|
|
+ <v-avatar size="x-small" :image="item.contact.avatar"></v-avatar>
|
|
|
+ <span class="mx-2 textColor666">{{ item.contact.name }} | {{ item.contact.postNameCn }}</span>
|
|
|
+ <v-chip color="primary" label size="x-small">当前在线</v-chip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</v-card>
|
|
|
@@ -70,16 +63,50 @@ watch(
|
|
|
{ deep: true }
|
|
|
)
|
|
|
|
|
|
-const emits = defineEmits(['position', 'enterprise'])
|
|
|
+const desc = [
|
|
|
+ { mdi: 'mdi-map-marker-outline', value: 'areaName' },
|
|
|
+ { mdi: 'mdi-school-outline', value: 'eduName' },
|
|
|
+ { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
|
|
|
+]
|
|
|
+
|
|
|
const handlePosition = (item) => {
|
|
|
- emits('position', item)
|
|
|
+ window.open(`/recruit/position/details/${item.job.positionId}`)
|
|
|
+}
|
|
|
+const handleEnterprise = (item) => {
|
|
|
+ window.open(`/enterprise/details/${item.enterprise.enterpriseId}?key=briefIntroduction`)
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
-.tipClsss { margin-right: 4px; }
|
|
|
-.title1 { font-size: 16px; font-weight: 500; line-height: 28px;}
|
|
|
+.title1 {
|
|
|
+ position: relative;
|
|
|
+ max-width: 200px;
|
|
|
+ margin-right: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ &:hover {
|
|
|
+ color: var(--v-primary-base);
|
|
|
+ }
|
|
|
+}
|
|
|
+.company {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+}
|
|
|
+.company-info {
|
|
|
+ float: left;
|
|
|
+ margin-left: 16px;
|
|
|
+ // width: 282px;
|
|
|
+}
|
|
|
+.company-info p {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
.textColor666 { color: #666; }
|
|
|
.positionItem {
|
|
|
width: 884px;
|
|
|
@@ -98,37 +125,8 @@ const handlePosition = (item) => {
|
|
|
padding: 16px 20px;
|
|
|
width: 100%;
|
|
|
.position {
|
|
|
- width: 440px;
|
|
|
+ width: 484px;
|
|
|
padding-right: 12px;
|
|
|
- .row2 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap; /* 允许换行 */
|
|
|
- width: 100%; /* 设置容器宽度 */
|
|
|
- .salary {
|
|
|
- display: inline;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #fe574a;
|
|
|
- line-height: 32px;
|
|
|
- float: left;
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .company {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- .companyLogo {
|
|
|
- height: 54px;
|
|
|
- width: 54px;
|
|
|
- min-width: 54px;
|
|
|
- min-height: 54px;
|
|
|
- max-width: 54px;
|
|
|
- max-height: 54px;
|
|
|
- margin-right: 20px;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
.footer {
|
|
|
@@ -144,6 +142,7 @@ const handlePosition = (item) => {
|
|
|
}
|
|
|
.footer-right {
|
|
|
flex: 1;
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
div {
|
|
|
overflow: hidden;
|
|
|
@@ -157,4 +156,11 @@ const handlePosition = (item) => {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
+.salary {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fe574a;
|
|
|
+ line-height: 22px;
|
|
|
+ flex: none;
|
|
|
+}
|
|
|
</style>
|
