求职端导航栏样式调整

components.d.ts

@@ -75,4 +75,7 @@ declare module 'vue' {
     VerifySlide: typeof import('./src/components/Verifition/Verify/VerifySlide.vue')['default']
     WangEditor: typeof import('./src/components/FormUI/wangEditor/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/layout/message.vue

@@ -1,12 +1,15 @@
 <template>
-  <v-badge
+  <!-- <v-badge
     color="error"
     :content="IM.unreadCount"
     :model-value="IM.unreadCount > 0"
     offset-y="10"
-  >
-    <v-btn @click="router.push(path)" append-icon="mdi-bell-outline">通知</v-btn>
-  </v-badge>
+  > -->
+     <div class="customIcon" @click="router.push(path)">
+      <v-icon class="mr-1" color="primary" size="16">mdi-bell</v-icon>
+      <span v-if="IM.unreadCount > 0">{{ IM.unreadCount > 99 ? '99+' : IM.unreadCount }}</span>
+     </div>
+  <!-- </v-badge> -->
 </template>
 
 <script setup>
@@ -21,7 +24,6 @@ defineProps({
     default: '/recruit/personal/message'
   }
 })
-
 const router = useRouter()
 
 const IM = useIMStore()
@@ -32,12 +34,28 @@ useIM()
 </script>
 
 <style lang="scss" scoped>
-:deep(.v-btn__content) {
-  font-size: 15px;
-}
-@media (max-width: 1425px) {
-  :deep(.v-btn__content) {
-    font-size: 13px;
+// :deep(.v-btn__content) {
+//   font-size: 15px;
+// }
+// @media (max-width: 1425px) {
+//   :deep(.v-btn__content) {
+//     font-size: 13px;
+//   }
+// }
+.customIcon {
+  display: flex;
+  align-items: center;
+  height: 26px;
+  line-height: 23px;
+  color: #00B760;
+  padding: 0 10px;
+  background-color: #e0f6ec;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 12px;
+  cursor: pointer;
+  &:hover {
+    background-color: #d7f3e7;
   }
 }
 </style>

src/layout/personal/navBar.vue

@@ -3,68 +3,46 @@
     <v-toolbar
       class="banner"
       density="compact"
-      style="padding-left: 0px;height: 50px;font-size: 15px;"
     >
-      <div class="innerBox d-flex justify-space-between" style="min-width: 1240px;">
-        <div>
-          <div class="nav-logo mr-3 mt-1 cursor-pointer d-flex align-center" @click="router.push('/recruitHome')">
-            <v-img src="../../assets/logo.png"  aspect-ratio="16/9" contain :width="97" style="height: 40px"></v-img>
-            <span class="ml-2" style="margin-top: 6px;" :class="{'active-route' : route.path === '/recruitHome'}">首页</span>
-          </div>
-          <!-- <div class="nav-city">
-            <p class="nav-city-box">
-              <v-icon color="primary">mdi-map-marker</v-icon>
-              <span class="nav-city-selected">广州</span>
-              <span class="switchover-city nav-city-selected">[{{ $t('sys.switchCities') }}]</span>
-            </p>
-          </div> -->
+      <div class="innerBox d-flex align-center">
+        <div class="nav-logo" @click="router.push('/recruitHome')">
+          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" contain width="90" height="35"></v-img>
+        </div>
           
-          <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" :closeOnContentClick="true"></defineListPage>
-              </template>
-              <template v-else>
-                <span 
-                  class="cursor-pointer menuList-first-title"
-                  :class="{'active-route': menuActive(val)}"
-                  @click.stop="handleClick(val, true)">
-                  {{ val.title }}
-                </span>
-              </template>
-            </div>
+        <div class="menuList default-width">
+          <div v-for="val in navList" :key="val.name" :class="{'active-route': menuActive(val)}">
+            <template v-if="val.children">
+              <defineListPage v-bind="$attrs" :title="val.title" :list="val.children" @emitClick="handleClick" :closeOnContentClick="true"></defineListPage>
+            </template>
+            <template v-else>
+              <span 
+                class="cursor-pointer menuList-first-title"
+                @click.stop="handleClick(val, true)">
+                {{ val.title }}
+              </span>
+            </template>
           </div>
         </div>
         
-        <div class="d-flex" style="height: 50px;">
+        <div class="d-flex align-center position-absolute" style="right: 30px;">
           <div class="btns d-flex align-center" v-if="!isLogin && showLoginBtn">
             <v-btn color="primary" style="color: #fff !important; background-color: #00B760;" to="/login">{{ t('login.loginOrRegister') }}</v-btn>
           </div>
           
           <!-- 头像用户名 -->
           <div class="d-flex align-center color-333" v-if="isLogin">
-            <span class="cursor-pointer mr-5 commonHover" v-if="showTeacherLogin" @click="handleSwitchTeacher">切换为老师</span>
-            <span class="cursor-pointer mr-5 commonHover" v-else @click="handleSwitchEnterprise">我要招聘</span>
-            <span class="cursor-pointer commonHover" @click="router.push({ path: paths[6] })">
-              <span>
-                现金：{{ userAccount?.balance && userAccount?.balance > 0 ? (userAccount?.balance / 100.0).toFixed(2) : 0 }}
-                <span style="color: #00000000;">1</span>
-                积分：{{ userAccount?.point || 0 }}
-              </span>
-            </span>
-
             <v-menu open-on-hover>
               <template v-slot:activator="{ props }">
-                <div class="d-flex ml-8 align-center cursor-pointer" :class="{'active-route': route.path.includes('/recruit/personal/personalCenter'), 'vipBox': vip}" v-bind="props" @click="handleToPersonalCenter">
-                  <div style="position: relative;">
+                <div class="d-flex align-center cursor-pointer px-4" :class="{'active-route': route.path.includes('/recruit/personal/personalCenter'), 'vipBox': vip}" v-bind="props" @click="handleToPersonalCenter">
+                  <div class="position-relative d-flex align-center">
                     <v-avatar class="avatar">
                       <v-img alt="" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" ></v-img>
                     </v-avatar>
-                    <div v-if="vip" style="position: absolute; left: -9px; bottom: -3px;" @click.stop="router.push('/recruit/personal/personalCenter/memberBenefits/membershipPackage')">
+                    <div v-if="vip" style="position: absolute; right: -9px; bottom: -13px;" @click.stop="router.push('/recruit/personal/personalCenter/memberBenefits/membershipPackage')">
                       <svg-icon name="huangguan1" size="25"></svg-icon>
                     </div>
                   </div>
-                  <div class="ml-3 userName">
+                  <div class="ml-3 font-size-15 userName">
                     {{ baseInfo?.name || userInfo.phone }}
                   </div>
                 </div>
@@ -79,6 +57,27 @@
                 </v-list-item>
               </v-list>
             </v-menu>
+
+            <v-chip
+              class="mx-4 cursor-pointer"
+              color="#008bb7"
+              label
+              size="small"
+              @click="router.push({ path: paths[6] })"
+              >
+              积分
+              <strong class="ml-3">{{ userAccount?.point || 0 }}</strong>
+            </v-chip>
+            <v-chip
+              color="primary"
+              class="cursor-pointer"
+              label
+              size="small"
+              @click="router.push({ path: paths[6] })"
+              >
+              现金
+              <strong class="ml-3">{{ userAccount?.balance && userAccount?.balance > 0 ? (userAccount?.balance / 100.0).toFixed(2) : 0 }}</strong>
+            </v-chip>
           </div>
 
           <!-- 语言切换 -->
@@ -105,8 +104,12 @@
               </v-list-item>
             </v-list>
           </v-menu> -->
-          <div class="d-flex align-center ml-3" v-if="showBall">
-            <message-notification v-if="showBall" :path="paths[3]" class="commonHover2" :class="{'active-route': routeActive === 3}"></message-notification>
+          <div class="d-flex align-center ml-4" v-if="showBall">
+            <message-notification v-if="showBall" :path="paths[3]"></message-notification>
+          </div>
+          <div v-if="isLogin" class="d-flex align-center ml-4 cursor-pointer">
+            <v-chip v-if="showTeacherLogin" label size="small" color="primary" variant="flat" @click="handleSwitchTeacher">切换为老师</v-chip>
+            <v-chip v-else label color="primary" size="small" variant="flat" @click="handleSwitchEnterprise">我要招聘</v-chip>
           </div>
         </div>
       </div>
@@ -189,6 +192,7 @@ const paths = [ // 有选中样式-路由列表
 ]
 
 const navList = ref([
+  { title: '首页', path: '/recruitHome' },
   { title: '门墩儿招聘', path: '/recruit/personal/recommend', dealActive: true },
   { title: '门墩儿猎头', path: '/headhunting' },
   { title: '门墩儿商城', path: '/pointsExchange', isEdit: true },
@@ -209,11 +213,6 @@ const handleClick = (e, status) => {
   else router.push(e.path)
 }
 
-const routeActive = computed(() => {
-  const index = paths.findIndex(item => item === route.path)
-  return index
-})
-
 // 左侧菜单选中状态
 const position = [
   '/recruit/personal/recommend',

src/styles/index.css

@@ -271,6 +271,10 @@ body {
   margin: 0 10px;
 }
 
+.default-text-color {
+  color: #0E100F;
+}
+
 .absolute-center {
   position: absolute;
   top: 50%;

src/styles/index.scss

@@ -211,6 +211,10 @@
   margin: 0 10px;
 }
 
+.default-text-color {
+  color: #0E100F;
+}
+
 .absolute-center {
   position: absolute;
   top: 50%;

src/styles/personal/navBar.css

@@ -2,8 +2,14 @@
   .menuList {
     font-size: 13px;
   }
-  .user-nav {
-    font-size: 13px;
+  .menuList > div {
+    width: 85px !important;
+  }
+}
+
+@media (max-width: 1480px) {
+  .menuList {
+    margin-left: 120px;
   }
 }
 
@@ -24,137 +30,57 @@
   -webkit-text-fill-color: transparent;
 }
 
-.user-nav .nav-resume-tools {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.user-nav .nav-resume-tools > a {
-  display: inline-block;
-  font-weight: 500;
-  color: var(--v-primary-base);
-  line-height: 20px;
-  height: auto;
-  padding: 3px 7px;
-  vertical-align: middle;
-  border-radius: 4px;
-  margin-right: 8px;
-  border: 1px solid transparent;
-}
-
 .banner {
   width: 100%;
   height: 50px;
   z-index: var(--zIndex-nav) !important;
   color: #333;
-  background-color: #d6e5e8;
+  background-color: #fff;
+  border-bottom: 1px solid #e8e6e6;
   padding-left: 0px;
-  height: 50px;
-}
-
-.banner .left {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.hover:hover {
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.03);
+  font-size: 15px;
 }
 
 .innerBox {
   position: relative;
   width: 100vw;
+  min-width: 1180px;
   margin: 0 auto;
   align-items: center;
-  padding: 0 30px;
+  height: 50px;
+  line-height: 50px;
 }
 
 .nav-logo {
-  float: left;
-}
-
-.nav-city {
-  float: left;
-  position: relative;
-  cursor: pointer;
-  height: 49px;
-  line-height: 49px;
-  color: var(--v-primary-base);
-  margin-left: 50px;
-}
-
-.nav-city-selected {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 95px;
-  vertical-align: middle;
-}
-
-.switchover-city {
-  color: var(--v-primary-base);
-  margin-left: 10px;
-}
-
-.nav {
-  float: left;
-  margin-left: 50px;
-  height: 49px;
-  line-height: 49px;
-}
-
-.nav ul {
-  display: flex;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-.nav ul li {
-  text-align: center;
-  margin: 0 5px;
-  list-style: none;
-}
-
-.nav li a {
-  display: block;
-  padding: 0 5px;
-  position: relative;
-  text-decoration: none;
-  color: #333;
-}
-
-.routeActive {
-  color: var(--color-333) !important;
-}
-
-.routeActive .aLink {
-  color: #00B760 !important;
-  font-weight: 700;
-  text-decoration: underline !important;
+  position: absolute;
+  left: 20px;
+  margin-bottom: 1px;
 }
 
 .active-route {
   color: #00B760;
   font-weight: 700;
-  border-bottom: 2px solid #00B760;
+  border-bottom: 4px solid #00B760;
+  background-color: #e5f8ef;
+  height: 50px;
 }
 
 .menuList {
   display: flex;
+  align-items: center;
   height: 50px;
-  line-height: 55px;
 }
 
 .menuList div {
-  margin-left: 10px;
+  width: 110px;
+  text-align: center;
 }
 
 .menuList-first-title:hover {
   color: #00B760;
   font-weight: 700;
-  border-bottom: 2px solid #00B760;
+}
+
+:deep(.v-toolbar__content) {
+  height: 50px !important;
 }

src/styles/personal/navBar.scss

@@ -2,8 +2,14 @@
   .menuList {
     font-size: 13px;
   }
-  .user-nav {
-    font-size: 13px;
+  .menuList>div {
+    width: 85px !important;
+  }
+}
+
+@media (max-width: 1480px) {
+  .menuList {
+    margin-left: 120px;
   }
 }
 
@@ -25,123 +31,51 @@
   }
 }
 
-.user-nav .nav-resume-tools {
-  display: inline-block;
-  vertical-align: middle;
-}
-.user-nav .nav-resume-tools > a {
-  display: inline-block;
-  font-weight: 500;
-  color: var(--v-primary-base);
-  line-height: 20px;
-  height: auto;
-  padding: 3px 7px;
-  vertical-align: middle;
-  border-radius: 4px;
-  margin-right: 8px;
-  border: 1px solid transparent;
-}
 .banner {
   width: 100%;
   height: 50px;
   z-index: var(--zIndex-nav) !important;
   color: #333;
-  background-color: #d6e5e8;
+  background-color: #fff;
+  border-bottom: 1px solid #e8e6e6;
   padding-left: 0px;
-  height: 50px;
-  .left {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-}
-.hover:hover {
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.03);
+  font-size: 15px; 
 }
 .innerBox {
   position: relative;
   width: 100vw;
-  // width: 1184px;
-  // max-width: 1184px;
+  min-width: 1180px;
   margin: 0 auto;
   align-items: center;
-  padding: 0 30px;
+  height: 50px;
+  line-height: 50px;
 }
 .nav-logo {
-  float: left;
-}
-.nav-city {
-  float: left;
-  position: relative;
-  cursor: pointer;
-  height: 49px;
-  line-height: 49px;
-  color: var(--v-primary-base);
-  margin-left: 50px;
-}
-.nav-city-selected {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 95px;
-  vertical-align: middle;
-}
-.switchover-city {
-  // font-size: 12px;
-  color: var(--v-primary-base);
-  margin-left: 10px;
-}
-.nav {
-  // font-size: 0;
-  float: left;
-  margin-left: 50px;
-  height: 49px;
-  line-height: 49px;
-}
-.nav ul {
-  display: flex;
-  white-space: nowrap;
-  vertical-align: top;
-}
-.nav ul li {
-  text-align: center;
-  margin: 0 5px;
-  list-style: none;
-}
-.nav li a {
-  display: block;
-  padding: 0 5px;
-  position: relative;
-  text-decoration: none;
-  color: #333;
-}
-.routeActive { // 选中样式
-  color: var(--color-333) !important;
-  .aLink {
-    color: #00B760 !important;
-    font-weight: 700;
-    text-decoration: underline !important; // 多个下划线
-  }
+  position: absolute;
+  left: 20px;
+  margin-bottom: 1px;
 }
 .active-route {
   color: #00B760;
   font-weight: 700;
-  border-bottom: 2px solid #00B760;
+  border-bottom: 4px solid #00B760;
+  background-color: #e5f8ef;
+  height: 50px;
 }
 
 .menuList {
   display: flex;
+  align-items: center;
   height: 50px;
-  line-height: 55px;
   div {
-    margin-left: 10px;
+    width: 110px;
+    text-align: center;
   }
 }
 .menuList-first-title:hover {
   color: #00B760;
   font-weight: 700;
-  border-bottom: 2px solid #00B760;
 }
+:deep(.v-toolbar__content) {
+  height: 50px !important;
+}

src/views/recruit/personal/home/components/homeJobTypeCard/index.vue

@@ -188,7 +188,7 @@ const handleClick = (item) => {
   border-radius: 12px;
   top: 10px;
   left: 390px;
-  background-color: rgba(255, 255, 255 , .8);
+  background-color: rgba(255, 255, 255 , .9);
 }
 .hasPageCard {
   width: 100%;