切换按钮

src/layout/personal/navBar.vue

@@ -174,7 +174,7 @@ const navList = [
   //     }
   //   ]
   // },
-  { title: '直聘', path: '/recruitHome' },
+  { title: '直聘', path: '/recruit/personal/position', noLeaving: true },
   { title: '甄选', path: '/mall' },
   { title: '猎寻', path: '/headhunting' },
   { title: '火苗儿' },
@@ -185,7 +185,7 @@ const navList = [
 
 const handleClick = (e, status) => {
   if (!e.path) return
-  if (status && e.path !== '/recruitHome') window.open(e.path)
+  if (status && !e.noLeaving) window.open(e.path)
   else router.push(e.path)
 }
 

src/views/recruit/personal/company/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="default-width">
-    <div class="white-bgc py-3">
+    <div style=" background-color: #fff">
+      <buttons mr="491"></buttons>
+    </div>
+    <div class="white-bgc pb-3">
       <headSearch placeholder="搜索公司" tipsText="公司关键字搜索" @handleSearch="val => handleSearch(val, 'name')"></headSearch>
       <div class="px-5 mt-3 clear-parent">
         <areaType :isClear="clear" @handleClick="handleSearch"></areaType>
@@ -25,6 +28,7 @@
 
 <script setup>
 defineOptions({name: 'retrieval-company-page'})
+import buttons from '@/views/recruit/personal/components/buttons.vue'
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { getEnterpriseSearch } from '@/api/enterprise'

src/views/recruit/personal/components/buttons.vue

@@ -0,0 +1,60 @@
+<!--  -->
+<template>
+  <div v-if="list?.length" class="btnBox" :style="`margin-right: ${props.mr}px;`">
+    <div
+      v-for="(item, index) in list" :key="item.title"
+      :class="{'rl': !index, 'rr': index === list.length-1, 'active': item.path === route?.path}"
+      @click="handleUpdate(item)"
+    >
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+const route = useRoute()
+defineOptions({name: 'defineOptions-buttons'})
+const props = defineProps({
+  mr: {
+    type: [String],
+    default: '413'
+  }
+})
+
+const list = [
+  { title: '职位', path:'/recruit/personal/position' },
+  { title: '推荐', path:'' },
+  { title: '公司', path:'/recruit/personal/company' },
+]
+const handleUpdate = (item) => {
+  // if (item.path) router.push(item.path)
+  if (item.path) window.open(item.path)
+}
+</script>
+<style lang="scss" scoped>
+.btnBox {
+  display: flex;
+  justify-content: center;
+  padding-top: 12px;
+  border-radius: 5px 5px 0 0;
+  div {
+    cursor: pointer;
+    padding: 6px 20px;
+    color: #004e46;
+    background: linear-gradient(to right, rgba(18, 235, 177, 0.2), rgb(47 139 119 / 15%));
+    &:hover {
+      // color: #004e46;
+      color: #004e46;
+      background: linear-gradient(to right, rgba(18, 235, 177, 0.742), rgb(47 139 119 / 32%));
+    }
+  }
+}
+.rl { border-radius: 5px 0 0 0; border: none; }
+.rr { border-radius: 0 5px 0 0; }
+.active {
+  font-weight: 500 !important;
+  color: #004e46 !important;
+  background: linear-gradient(to right, rgba(18, 235, 177, 0.742), rgb(47 139 119 / 32%)) !important;
+}
+</style>

src/views/recruit/personal/position/index.vue

@@ -1,7 +1,10 @@
 <!-- 检索列表页 - 职位检索 -->
 <template>
   <div class="default-width">
-    <div class="py-3" style="z-index: 998; background-color: #fff">
+    <div style=" background-color: #fff">
+      <buttons></buttons>
+    </div>
+    <div class="pb-3" style="z-index: 998; background-color: #fff">
       <div class="stickyBox mb-5">
         <headSearch
           tipsText="职位/公司关键字搜索"
@@ -32,6 +35,7 @@
 </template>
 
 <script setup>
+import buttons from '@/views/recruit/personal/components/buttons.vue'
 import rightRecommend from './components/rightRecommend'
 import cityFilter from './components/cityFilter'
 import conditionFilter from './components/conditionFilter'