个人首页导航栏

src/layout/company/navBar.vue

@@ -114,7 +114,7 @@ const handleToVip = () => {
   router.push({ path: '/recruit/enterprise/memberCenter/myMembers' })
 }
 
-const handleLogoClick = () => { window.open('/entrances') } // 点击logo
+const handleLogoClick = () => { window.open('/recruitHome') } // 点击logo
 
 const enterpriseClick = (tabKey = 1) => {
   const path = '/recruit/enterprise/informationManagement/informationSettings'

src/layout/message.vue

@@ -5,7 +5,7 @@
     :model-value="IM.unreadCount > 0"
     offset-y="10"
   >
-    <v-btn class="ml-1" @click="router.push(path)" append-icon="mdi-bell-outline">通知</v-btn>
+    <v-btn @click="router.push(path)" append-icon="mdi-bell-outline">通知</v-btn>
   </v-badge>
 </template>
 
@@ -34,4 +34,9 @@ useIM()
 :deep(.v-btn__content) {
   font-size: 15px;
 }
+@media (max-width: 1425px) {
+  :deep(.v-btn__content) {
+    font-size: 13px;
+  }
+}
 </style>

src/layout/personal/navBar.vue

@@ -7,7 +7,7 @@
     >
       <div class="innerBox d-flex justify-space-between">
         <div>
-          <div class="nav-logo" style="cursor: pointer;" @click="handleLogoClick">
+          <div class="nav-logo mr-5 mt-1">
             <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px"></v-img>
           </div>
           <!-- <div class="nav-city">
@@ -17,12 +17,16 @@
               <span class="switchover-city nav-city-selected">[{{ $t('sys.switchCities') }}]</span>
             </p>
           </div> -->
-          <div class="nav">
-            <ul>
-              <li v-for="(k, listIndex) in list" :key="k.text" :class="{'routeActive': routeActive === listIndex}">
-                <a :href="k.path" style="font-size: 15px;" class="aLink">{{ k.text }}</a>
-              </li>
-            </ul>
+          
+          <div class="menuList">
+            <div v-for="val in navList" :key="val.name" class="mr-3">
+              <template v-if="val.children">
+                <defineListPage v-bind="$attrs" :title="val.title" :list="val.children" @emitClick="handleClick"></defineListPage>
+              </template>
+              <template v-else>
+                <span class="cursor-pointer menuList-first-title" :class="{'active-route': routeActive === paths.indexOf(val.path)}" @click="handleClick(val)">{{ val.title }}</span>
+              </template>
+            </div>
           </div>
         </div>
         
@@ -33,20 +37,19 @@
           
           <!-- 头像用户名 -->
           <div class="d-flex align-center color-333" v-if="getToken()">
-            <span class="cursor-pointer mr-5" @click="handleSwitch">我要招聘</span>
-            <span class="cursor-pointer" :class="{'active-route': routeActive === 6}" @click="router.push({ path: paths[6] })">
+            <span class="cursor-pointer mr-5 commonHover" @click="handleSwitch">我要招聘</span>
+            <span class="cursor-pointer commonHover" :class="{'active-route': routeActive === 6}" @click="router.push({ path: paths[6] })">
               {{t('enterprise.account.accountBalances')}}：{{ userAccount?.balance && userAccount?.balance > 0 ? (userAccount?.balance / 100.0).toFixed(2) : 0 }}
             </span>
-            <span class="mr-3 ml-3 cursor-pointer" :class="{'active-route': routeActive === 7}" @click="router.push({ path: paths[7] })">{{t('resume.goldCoins')}}：{{ userAccount?.point || 0 }}</span>
+            <span class="mr-3 ml-3 cursor-pointer commonHover" :class="{'active-route': routeActive === 7}" @click="router.push({ path: paths[7] })">{{t('resume.goldCoins')}}：{{ userAccount?.point || 0 }}</span>
 
-            
             <v-menu open-on-hover>
               <template v-slot:activator="{ props }">
                 <div class="d-flex ml-3 align-center cursor-pointer" :class="{'active-route': routeActive === 5}" v-bind="props" @click="handleToPersonalCenter">
                   <v-avatar>
                     <v-img alt="John" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)"></v-img>
                   </v-avatar>
-                  <div class="ml-3">
+                  <div class="ml-3 commonHover">
                     {{ baseInfo?.name || userInfo.phone }}
                     <v-icon :color="routeActive === 5 ? '#008979' : '#333'" size="30">mdi-menu-down</v-icon>
                   </div>
@@ -89,7 +92,7 @@
             </v-list>
           </v-menu> -->
           <div class="d-flex align-center" v-if="showBall">
-            <message-notification v-if="showBall" :path="paths[3]" :class="{'active-route': routeActive === 3}"></message-notification>
+            <message-notification v-if="showBall" :path="paths[3]" class="commonHover2" :class="{'active-route': routeActive === 3}"></message-notification>
           </div>
         </div>
         
@@ -117,6 +120,7 @@ import { useRouter } from 'vue-router'; const router = useRouter()
 import { getUserBindEnterpriseList, getUserRegisterEnterpriseApply } from '@/api/personal/user'
 import MessageNotification from '../message.vue'
 import { getUserAvatar } from '@/utils/avatar'
+import defineListPage from '@/views/entrances/navBar/components/defineListPage'
 
 defineOptions({ name: 'personal-navbar' })
 
@@ -150,20 +154,38 @@ const paths = [ // 有选中样式-路由列表
   '/recruit/personal/personalCenter', // 5
   '/recruit/personal/myWallet/myBalance', // 6
   '/recruit/personal/myWallet/myIntegral', // 7
-  ]
-const list = ref([
-  { text: t('common.home'), path: paths[0] },
-  { text: t('common.position'), path: paths[1] },
-  { text: t('common.company'), path: paths[2] }
-])
+]
+
+const navList = [
+  {
+    title: '直聘',
+    children: [
+      {
+        title: '门墩儿直聘',
+        appList: [
+          [{ title: '职位', path: paths[1] }, { title: '公司', path: paths[2] }]
+        ]
+      }
+    ]
+  },
+  { title: '甄选', path: '/mall' },
+  { title: '猎寻', path: '/headhunting' },
+  { title: '数据' },
+  { title: '火苗儿' },
+  { title: '联合会' },
+  { title: '了解门墩儿' },
+]
+
+const handleClick = (e) => {
+  if (!e.path) return
+  window.open(e.path)
+}
 
 const routeActive = computed(() => {
   const index = paths.findIndex(item => item === route.path)
   return index
 })
 
-const handleLogoClick = () => { window.open('/entrances') } // 点击logo
-
 const show = ref(false)
 const radios = ref(null)
 const enterpriseList = ref([])

src/styles/index.css

@@ -217,3 +217,14 @@
   opacity: .7;
   background-color: #00887A !important;
 }
+
+.commonHover:hover {
+  color: #00887A;
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.commonHover2:hover {
+  color: #00887A;
+  font-weight: 700;
+}

src/styles/index.scss

@@ -156,4 +156,14 @@
   color: #fff;
   opacity: .7;
   background-color: #00887A !important;
+}
+
+.commonHover:hover {
+  color: #00887A;
+  font-weight: 700;
+  text-decoration: underline;
+}
+.commonHover2:hover {
+  color: #00887A;
+  font-weight: 700;
 }

src/styles/personal/navBar.css

@@ -1,3 +1,12 @@
+@media (max-width: 1425px) {
+  .menuList {
+    font-size: 13px;
+  }
+  .user-nav {
+    font-size: 13px;
+  }
+}
+
 .user-nav .nav-resume-tools {
   display: inline-block;
   vertical-align: middle;
@@ -24,14 +33,12 @@
   background-color: #d6e5e8;
   padding-left: 0px;
   height: 50px;
-  font-size: 14px;
 }
 
 .banner .left {
   height: 100%;
   display: flex;
   align-items: center;
-  font-size: 20px;
   cursor: pointer;
 }
 
@@ -42,10 +49,10 @@
 
 .innerBox {
   position: relative;
-  width: 1184px;
-  max-width: 1184px;
+  width: 100vw;
   margin: 0 auto;
   align-items: center;
+  padding: 30px;
 }
 
 .nav-logo {
@@ -77,7 +84,6 @@
 }
 
 .nav {
-  font-size: 0;
   float: left;
   margin-left: 50px;
   height: 49px;
@@ -143,3 +149,19 @@
 .user-nav a {
   text-decoration: none;
 }
+
+.menuList {
+  display: flex;
+  height: 50px;
+  align-items: center;
+}
+
+.menuList div {
+  margin-left: 10px;
+}
+
+.menuList-first-title:hover {
+  color: #008979;
+  font-weight: 700;
+  text-decoration: underline;
+}

src/styles/personal/navBar.scss

@@ -1,3 +1,12 @@
+@media (max-width: 1425px) {
+  .menuList {
+    font-size: 13px;
+  }
+  .user-nav {
+    font-size: 13px;
+  }
+}
+
 .user-nav .nav-resume-tools {
   display: inline-block;
   vertical-align: middle;
@@ -22,12 +31,10 @@
   background-color: #d6e5e8;
   padding-left: 0px;
   height: 50px;
-  font-size: 14px;
   .left {
     height: 100%;
     display: flex;
     align-items: center;
-    font-size: 20px;
     cursor: pointer;
   }
 }
@@ -37,10 +44,12 @@
 }
 .innerBox {
   position: relative;
-  width: 1184px;
-  max-width: 1184px;
+  width: 100vw;
+  // width: 1184px;
+  // max-width: 1184px;
   margin: 0 auto;
   align-items: center;
+  padding: 30px;
 }
 .nav-logo {
   float: left;
@@ -68,7 +77,7 @@
   margin-left: 10px;
 }
 .nav {
-  font-size: 0;
+  // font-size: 0;
   float: left;
   margin-left: 50px;
   height: 49px;
@@ -133,3 +142,17 @@
 .user-nav a {
   text-decoration: none;
 }
+
+.menuList {
+  display: flex;
+  height: 50px;
+  align-items: center;
+  div {
+    margin-left: 10px;
+  }
+}
+.menuList-first-title:hover {
+  color: #008979;
+  font-weight: 700;
+  text-decoration: underline;
+}

src/views/entrances/navBar/components/commonMenuStyle.vue

@@ -10,7 +10,7 @@
     :close-on-content-click="closeOnContentClick"
   >
     <template v-slot:activator="{ isActive, props }">
-      <div v-bind="props" class="d-flex cursor-pointer menuText">
+      <div v-bind="props" class="d-flex cursor-pointer menuText" :class="{'title-hover': isActive}">
         <div>{{ defineProps.btnTitle }}</div>
         <div class="ml-2" :class="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></div>
       </div>
@@ -18,8 +18,8 @@
     <slot></slot>
   </v-menu>
 </template>
+
 <script setup>
-// import { ref } from 'vue'
 defineOptions({name: 'conditionFilter-index-page'})
 const defineProps = defineProps({
   btnTitle: {
@@ -32,6 +32,7 @@ const defineProps = defineProps({
   }
 })
 </script>
+
 <style lang="scss" scoped>
 .menuText {
   div {
@@ -39,4 +40,9 @@ const defineProps = defineProps({
     line-height: 50px;
   }
 }
+.title-hover:hover {
+  color: var(--v-primary-base);
+  font-weight: 700;
+  text-decoration: underline;
+}
 </style>

src/views/entrances/navBar/components/defineListPage.vue

@@ -27,8 +27,9 @@
 </template>
 
 <script setup>
-import MMenu from './commonMenuStyle.vue'
 defineOptions({name: 'entrances-defineListPage'})
+import MMenu from './commonMenuStyle.vue'
+
 const emits = defineEmits(['emitClick'])
 defineProps({
   list: {
@@ -49,6 +50,7 @@ defineProps({
   }
 })
 </script>
+
 <style lang="scss" scoped>
 .cursor-pointer {
   .subTitle { color: #999; }

src/views/recruit/personal/home/components/hotJobs.vue

@@ -32,5 +32,6 @@ getTreeData()
   display: inline-block;
   border-radius: 6px;
   font-size: 15px;
+  cursor: pointer;
 }
 </style>