|
@@ -1,27 +1,29 @@
|
|
|
<template>
|
|
|
<div class="position-box">
|
|
|
- <div class="sub-li" v-for="(item, index) in list" :key="index">
|
|
|
+ <div class="sub-li" v-for="(item, index) in list" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
|
|
|
<div class="job-info">
|
|
|
<div class="sub-li-top">
|
|
|
<div class="sub-li-info">
|
|
|
- <p class="name">{{ item.recruitName }}</p>
|
|
|
+ <p :class="['name', {'name-active': item.active }]">{{ item.name }}</p>
|
|
|
<v-chip size="x-small" color="error" label variant="outlined" class="mr-1">急聘</v-chip>
|
|
|
<v-chip size="x-small" color="warning" label variant="outlined">NEW</v-chip>
|
|
|
</div>
|
|
|
- <p class="salary">{{ item.salary }}</p>
|
|
|
+ <p class="salary">{{ item.payFrom }}-{{ item.payTo }}/{{ item.payName }}</p>
|
|
|
+ </div>
|
|
|
+ <div style="height: 24px;">
|
|
|
+ <v-chip size="x-small" label v-for="(k, i) in tagList" :key="i" class="mr-1" color="#666">{{ k }}</v-chip>
|
|
|
</div>
|
|
|
- <v-chip size="x-small" label v-for="(k, i) in item.welfareList" :key="i" class="mr-1" color="#666">{{ k }}</v-chip>
|
|
|
</div>
|
|
|
<div class="sub-li-bottom">
|
|
|
<div class="user-info">
|
|
|
<div class="d-flex align-center">
|
|
|
- <v-img :src="item.company.headImg" width="40" style="height: 40px;" />
|
|
|
- <span class="names ml-2" style="font-size: 14px">{{ item.company.enterpriseName }}</span>
|
|
|
+ <v-img src="../../assets/logo.png" width="40" style="height: 40px;" />
|
|
|
+ <span class="names ml-2" style="font-size: 14px">{{ item.anotherName }}</span>
|
|
|
</div>
|
|
|
<p class="names float-right">
|
|
|
- <span>{{ item.company.industry }}</span>
|
|
|
+ <span>{{ item.industryName }}</span>
|
|
|
<span class="vline"></span>
|
|
|
- <span>{{ item.company.scale }}</span>
|
|
|
+ <span>{{ item.scaleName }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -31,52 +33,23 @@
|
|
|
|
|
|
<script setup>
|
|
|
defineOptions({ name: 'position-card-item' })
|
|
|
-const list = [
|
|
|
- {
|
|
|
- recruitName: '产品经理',
|
|
|
- salary: '6-11k',
|
|
|
- welfareList: ['广州','本科','1-3年'],
|
|
|
- company: {
|
|
|
- headImg: 'https://img.bosszhipin.com/beijin/mcs/banner/06123cabdf75ed08313530ec8a42aef2cfcd208495d565ef66e7dff9f98764da.jpg',
|
|
|
- enterpriseName: '卓越教育',
|
|
|
- industry: '互联网行业',
|
|
|
- scale: '0-20人'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- recruitName: '产品经理',
|
|
|
- salary: '6-11k',
|
|
|
- welfareList: ['广州','本科','1-3年'],
|
|
|
- company: {
|
|
|
- headImg: 'https://img.bosszhipin.com/beijin/mcs/banner/06123cabdf75ed08313530ec8a42aef2cfcd208495d565ef66e7dff9f98764da.jpg',
|
|
|
- enterpriseName: '卓越教育',
|
|
|
- industry: '互联网行业',
|
|
|
- scale: '0-20人'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- recruitName: '产品经理',
|
|
|
- salary: '6-11k',
|
|
|
- welfareList: ['广州','本科','1-3年'],
|
|
|
- company: {
|
|
|
- headImg: 'https://img.bosszhipin.com/beijin/mcs/banner/06123cabdf75ed08313530ec8a42aef2cfcd208495d565ef66e7dff9f98764da.jpg',
|
|
|
- enterpriseName: '卓越教育',
|
|
|
- industry: '互联网行业',
|
|
|
- scale: '0-20人'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- recruitName: '产品经理',
|
|
|
- salary: '6-11k',
|
|
|
- welfareList: ['广州','本科','1-3年'],
|
|
|
- company: {
|
|
|
- headImg: 'https://img.bosszhipin.com/beijin/mcs/banner/06123cabdf75ed08313530ec8a42aef2cfcd208495d565ef66e7dff9f98764da.jpg',
|
|
|
- enterpriseName: '卓越教育',
|
|
|
- industry: '互联网行业',
|
|
|
- scale: '0-20人'
|
|
|
- }
|
|
|
+import { ref, watch } from 'vue'
|
|
|
+const props = defineProps({
|
|
|
+ items: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
}
|
|
|
-]
|
|
|
+})
|
|
|
+const tagList = ['广州','本科','1-3年']
|
|
|
+const list = ref([])
|
|
|
+watch(
|
|
|
+ () => props.items,
|
|
|
+ (newVal) => {
|
|
|
+ list.value = newVal
|
|
|
+ },
|
|
|
+ { immediate: true },
|
|
|
+ { deep: true }
|
|
|
+)
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -173,4 +146,7 @@ const list = [
|
|
|
background-color: #e0e0e0;
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
+.name-active {
|
|
|
+ color: var(--v-primary-base);
|
|
|
+}
|
|
|
</style>
|