|
|
@@ -1,27 +1,28 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="d-flex align-center justify-center">
|
|
|
- <div class="home-title MiSans-Semibold">
|
|
|
- 精选职位
|
|
|
- <div class="home-title-line"></div>
|
|
|
+ <div class="d-flex justify-space-between">
|
|
|
+ <div class="selected">
|
|
|
+ <div class="selected-title">精选职位</div>
|
|
|
+ <div class="selected-title-sub">
|
|
|
+ <div class="selected-title-sub-container">
|
|
|
+ <div class="selected-title-sub-container-left"></div>
|
|
|
+ <div class="selected-title-sub-container-right"></div>
|
|
|
+ </div>
|
|
|
+ <p>/Selected Positions</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-segmented v-model="tab" :options="tabList" @change="getPositionList" />
|
|
|
+ <v-hover v-slot="{ isHovering, props }">
|
|
|
+ <v-btn color="primary" v-bind="props" :class="isHovering ? 'elevation-5' : ''" variant="tonal" rounded size="large" class="ml-3" @click.stop="handleToMore">
|
|
|
+ {{ $t('position.moreBtn') }}
|
|
|
+ <v-icon class="ml-3">mdi-menu-right</v-icon>
|
|
|
+ </v-btn>
|
|
|
+ </v-hover>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <v-tabs v-model="tab" align-tabs="start" color="primary" @update:model-value="getPositionList">
|
|
|
- <v-tab :value="1">{{ $t('position.recommend') }}</v-tab>
|
|
|
- <v-tab :value="2">{{ $t('position.latest') }}</v-tab>
|
|
|
- <v-tab :value="3">{{ $t('position.hire') }}</v-tab>
|
|
|
- </v-tabs>
|
|
|
- <v-window v-model="tab" class="pt-5 px-2 pb-2">
|
|
|
- <v-window-item v-for="v in 3" :value="v" :key="v">
|
|
|
- <PositionCard v-if="items.filter(Boolean) && items.length" :isOpenWindow="false" :items="items" :tab="tab" @position="handlePosition"></PositionCard>
|
|
|
- <Empty v-else class="mb-3" :elevation="false"></Empty>
|
|
|
- </v-window-item>
|
|
|
- </v-window>
|
|
|
- <div class="text-center mt-4" style="border-top: 1px solid #ccc; padding-top: 30px;">
|
|
|
- <v-hover v-slot="{ isHovering, props }">
|
|
|
- <v-btn v-bind="props" v-ripple.center color="primary" width="224" :class="isHovering ? 'elevation-10' : 'elevation-5'" @click.stop="handleToMore">{{ $t('position.moreBtn') }}</v-btn>
|
|
|
- </v-hover>
|
|
|
- </div>
|
|
|
+ <PositionCard v-if="items.filter(Boolean) && items.length" :isOpenWindow="false" :items="items" :tab="tab" @position="handlePosition"></PositionCard>
|
|
|
+ <Empty v-else class="mb-3" :elevation="false"></Empty>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -35,6 +36,11 @@ import { useRouter } from 'vue-router'
|
|
|
const router = useRouter()
|
|
|
const tab = ref(1)
|
|
|
const items = ref([])
|
|
|
+const tabList = [
|
|
|
+ { label: '推荐职位', value: 1 },
|
|
|
+ { label: '最新职位', value: 2 },
|
|
|
+ { label: '众聘职位', value: 3 }
|
|
|
+]
|
|
|
|
|
|
// 推荐职位
|
|
|
const getPositionList = async () => {
|
|
|
@@ -57,12 +63,24 @@ const handleToMore = () => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-:deep(.v-slide-group__content) {
|
|
|
- border-bottom: 1px solid #ccc !important;
|
|
|
+.el-segmented {
|
|
|
+ --el-segmented-item-selected-color: #fff;
|
|
|
+ --el-segmented-item-selected-bg-color: #181818;
|
|
|
+ --el-border-radius-base: 16px;
|
|
|
+ --el-border-radius-base: 25px;
|
|
|
+ --el-segmented-item-hover-color: #181818;
|
|
|
+ --el-segmented-item-hover-bg-color: none;
|
|
|
+ height: 44px;
|
|
|
+ width: 300px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #00B760;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+:deep(.v-btn__content) {
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
-:deep(.v-tab) {
|
|
|
- font-weight: 700;
|
|
|
- color: #666;
|
|
|
- font-size: 16px;
|
|
|
+:deep(.v-btn .v-icon) {
|
|
|
+ background-color: #c2e4d5;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
</style>
|
Xiao_123