style

src/components/Enterprise/hotPromoted.vue

@@ -3,9 +3,9 @@
     <div class="sub-li" v-for="(item, index) in list" :key="index" >
       <div v-if="item">
         <!-- 公司信息 -->
-        <div class="company-info-top" @click="handleClickEnterprise(item)">
+        <div class="company-info-top align-center" @click="handleClickEnterprise(item)">
           <div class="float-left">
-            <v-img :src="item?.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" :alt="item.enterprise.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
+            <v-img :src="item?.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" alt="" width="77" height="77" style="border-radius: 4px;"/>
           </div>
           <div class="company-info">
             <h3>{{ item.enterprise.anotherName }}</h3>
@@ -18,25 +18,29 @@
             </p>
           </div>
         </div>
+        <div v-if="item.enterprise?.welfareList && item.enterprise.welfareList.length" class="px-5 py-1 ellipsis" style="border-bottom: 1px solid #EBEBEB;">
+          <span class="welfareTag mr-5" v-for="(k, i) in item.enterprise.welfareList" :key="i">{{ k }}</span>
+        </div>
         <!-- 职位列表 -->
         <ul class="company-job-list">
           <li class="company-job-item" v-for="(k, i) in item.jobList" :key="i">
             <div class="job-info" @mouseenter="k.active = true" @mouseleave="k.active = false" @click="handleClickPosition(k)">
               <div class="mb-2 d-flex">
                 <p :class="['name', {'default-active': k.active }]">{{ k.name }}</p>
-                <v-icon size="20" class="message">mdi-message-processing</v-icon>
                 <span class="salary">{{ k.payFrom }}-{{ k.payTo }}/{{ k.payName }}</span>
               </div>
-              <div style="height: 24px; overflow: hidden;">
-                <span v-for="j in desc" :key="j">
-                  <v-chip v-if="k[j.value]" size="x-small" label class="mr-1" color="var(--color-666)">{{ k[j.value] }}</v-chip>
+              <div style="height: 24px; overflow: hidden; color: #808080;">
+                <span v-for="(j, index) in desc" :key="index">
+                  <span v-if="k[j.value]" class="mr-1 font-size-13">{{ k[j.value] }}</span>
+                  <span v-if="k[j.value] && index !== desc.length - 1" class="septal-line ml-1"></span>
                 </span>
+                <span class="font-size-13 float-right">{{ timesTampChange(k.updateTime, 'Y-M-D') }}</span>
               </div>
             </div>
           </li>
         </ul>
-        <div class="moreBtn">
-          <v-btn class="buttons" color="primary" variant="outlined" @click="handleMoreEnterprise(item)">{{ $t('position.moreBtn') }}</v-btn>
+        <div class="moreBtn d-flex align-center justify-center" @click="handleMoreEnterprise(item)">
+          {{ $t('position.moreBtn') }}
         </div>
       </div>
     </div>
@@ -45,6 +49,8 @@
 
 <script setup name="hotPromoted">
 import { ref, watch } from 'vue'
+import { timesTampChange } from '@/utils/date'
+
 const props = defineProps({
   items: {
     type: Array,
@@ -93,19 +99,17 @@ const handleMoreEnterprise = (item) => {
   min-width: calc((100% - 24px) / 3);
   max-width: calc((100% - 24px) / 3);
   margin: 0 12px 12px 0;
-  height: 388px;
+  height: 450px;
   border-radius: 12px;
   padding: 0;
   overflow: hidden;
   transition: all .2s linear;
   background-color: #fff;
   cursor: pointer;
+  box-shadow: 0 2px 20px 0 rgba(37, 39, 48, .2);
   &:nth-child(3n) {
     margin-right: 0;
   }
-  &:hover {
-    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
-  }
 }
 .company-info {
   float: left;
@@ -114,16 +118,20 @@ const handleMoreEnterprise = (item) => {
 }
 .company-info-top {
   display: flex;
-  height: 76px;
+  height: 110px;
   padding: 16px 20px;
   overflow: hidden;
-  background: linear-gradient(90deg, #f2fafa 0, #fcfbfa 100%);
+  border-bottom: 1px solid #EBEBEB;
+}
+.welfareTag {
+  color: #CEC149;
+  font-size: 13px;
 }
 .company-info h3 {
   height: 22px;
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--color-222);
+  font-size: 18px;
+  font-weight: 700;
+  color: #404040;
   line-height: 22px;
   margin: 0 0 4px 0;
   padding: 0;
@@ -159,7 +167,7 @@ ul li {
   font-size: 16px;
   float: right;
   font-weight: 700;
-  color: var(--v-error-base);
+  color: #CEC149;
   line-height: 22px;
   max-width: none;
   text-align: right;
@@ -169,24 +177,21 @@ ul li {
   position: relative;
   max-width: 200px;
   line-height: 22px;
-  font-weight: 500;
-  color: var(--color-222);
+  font-weight: 700;
+  color: #404040;
   margin-right: 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition: all linear .2s;
 }
-.message {
-  color: #bfc1c9;
-  &:hover {
-    color: var(--v-primary-base);
-  }
-}
 .moreBtn {
   position: absolute;
-  bottom: 25px;
-  left: 50%;
-  translate: -50%;
+  width: 100%;
+  bottom: 0;
+  height: 37px;
+  color: #fff;
+  font-size: 14px;
+  background: linear-gradient(to right, #12ebb0, #427daa);
 }
 </style>

src/components/Position/item.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex">
     <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" :style="{'height': tab === 3 && item.hire ? '180px' : '140px'}">
         <div class="job-info" @click="handlePosition(item)" @mouseenter="item.active = true" @mouseleave="item.active = false">
           <div class="sub-li-top">
             <div class="sub-li-info">
@@ -10,16 +10,17 @@
             </div>
             <p class="salary">{{ item.payFrom }}-{{ item.payTo }}/{{ item.payName }}</p>
           </div>
-          <div style="height: 24px;overflow: hidden;">
-            <v-chip size="x-small" label v-for="(k, i) in item.tagList" :key="i" class="mr-1" color="var(--color-666)">{{ k }}</v-chip>
-          </div>
           <div class="d-flex justify-space-between align-center">
             <div>
-              <span v-for="(j, i) in desc" :key="i">
-                <v-chip v-if="item[j.value]" size="x-small" label class="mr-1" color="var(--color-666)" :prepend-icon="j.mdi">{{ item[j.value] }}</v-chip>
+              <span v-for="(j, i) in desc" :key="i" class="font-size-13" style="color: #808080;">
+                <span v-if="item[j.value]" class="mr-1 d-inline-block">{{ item[j.value] }}</span>
+                <span v-if="i !== desc.length - 1 && item[j.value]" class="septal-line ml-1"></span>
               </span>
             </div>
           </div>
+          <div class="ellipsis" style="height: 24px;overflow: hidden;">
+            <span v-for="(j, i) in item.tagList" :key="i" class="mr-3 tags" style="color: #345768;">{{ j }}</span>
+          </div>
           <div v-if="tab === 3 && item.hire" class="text-end mt-3">
             <v-chip v-if="item.hirePrice" size="small" label color="primary">赏金：{{ commissionCalculation(item.hirePrice, 1) }}元</v-chip>
             <v-chip v-if="item.hirePoint" size="small" label class="ml-1" color="primary">积分：{{ commissionCalculation(item.hirePoint, 1) }}点</v-chip>
@@ -28,10 +29,12 @@
         <div class="sub-li-bottom" @click="handleEnterprise(item)">
           <div class="user-info">
             <div class="d-flex align-center">
-              <v-img :src="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" width="40" style="height: 40px;" />
-              <span class="names ml-2" style="font-size: 14px">{{ item.anotherName }}</span>
+              <v-avatar size="35">
+                <v-img :src="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" />
+              </v-avatar>
+              <span class="names ml-2 font-size-14">{{ item.anotherName }}</span>
             </div>
-            <p class="names float-right">
+            <p class="float-right color-999 font-size-13">
               <span>{{ item.industryName }}</span>
               <span class="septal-line" v-if="item.industryName && item.scaleName"></span>
               <span>{{ item.scaleName }}</span>
@@ -99,19 +102,17 @@ const height = ((210 * 2) + 12) + 'px'
 }
 .sub-li {
   position: relative;
-  // width: calc((100% - 24px) / 3);
   width: calc((100% - 24px) / 2);
   min-width: calc((100% - 24px) / 2);
   max-width: calc((100% - 24px) / 2);
   margin: 0 12px 12px 0;
-  height: 210px;
   border-radius: 12px;
   padding: 0;
   overflow: hidden;
   cursor: pointer;
   transition: all .2s linear;
   background-color: #fff;
-  &:nth-child(2n) { // 3n
+  &:nth-child(2n) {
     margin-right: 0;
   }
   &:hover {
@@ -131,7 +132,6 @@ const height = ((210 * 2) + 12) + 'px'
   display: flex;
   width: 100%;
   align-items: center;
-  margin-bottom: 12px;
 }
 .sub-li-info {
   display: flex;
@@ -144,10 +144,15 @@ const height = ((210 * 2) + 12) + 'px'
 .salary {
   font-size: 16px;
   font-weight: 700;
-  color: var(--v-error-base);
+  color: #CEC149;
   line-height: 22px;
   flex: none;
 }
+.tags {
+  font-size: 12px;
+  color: #666;
+  display: inline-block;
+}
 .job-text {
   white-space: normal;
   padding-right: 0;
@@ -165,6 +170,7 @@ const height = ((210 * 2) + 12) + 'px'
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 600;
+  color: #345768;
   &:hover {
     color: var(--v-primary-base);
   }
@@ -172,9 +178,9 @@ const height = ((210 * 2) + 12) + 'px'
 .sub-li-bottom {
   position: absolute;
   width: 100%;
-  bottom: -6px;
+  height: 54px;
+  bottom: 1px;
   left: 0;
-  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
   margin-top: 10px;
   padding-top: 0;
   display: block;
@@ -187,8 +193,8 @@ const height = ((210 * 2) + 12) + 'px'
   justify-content: space-between;
 }
 .names {
-  color: var(--color-666);
-  font-size: 13px;
+  font-weight: 500;
+  color: #404040;
   &:hover {
     color: var(--v-primary-base);
   }

src/layout/message.vue

@@ -5,7 +5,7 @@
     :model-value="IM.unreadCount > 0"
     offset-y="10"
   >
-    <v-btn class="ml-1" size="small" icon="mdi-bell-outline" @click="router.push(path)"></v-btn>
+    <v-btn class="ml-1" @click="router.push(path)" append-icon="mdi-bell-outline">通知</v-btn>
   </v-badge>
 </template>
 

src/layout/personal/navBar.vue

@@ -3,7 +3,7 @@
     <v-toolbar
       class="banner"
       density="compact"
-      style="padding-left: 0px;height: 50px;font-size: 14px;"
+      style="padding-left: 0px;height: 50px;font-size: 15px;"
     >
       <div class="innerBox d-flex justify-space-between">
         <div>
@@ -20,7 +20,7 @@
           <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: 14px;" class="aLink">{{ k.text }}</a>
+                <a :href="k.path" style="font-size: 15px;" class="aLink">{{ k.text }}</a>
               </li>
             </ul>
           </div>
@@ -32,21 +32,24 @@
           </div>
           
           <!-- 头像用户名 -->
-          <div class="d-flex align-center" v-if="getToken()">
+          <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="{'routeActive': routeActive === 6}" @click="router.push({ path: paths[6] })">
+            <span class="cursor-pointer" :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="{'routeActive': routeActive === 7}" @click="router.push({ path: paths[7] })">{{t('resume.goldCoins')}}：{{ userAccount?.point || 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>
 
             
             <v-menu open-on-hover>
               <template v-slot:activator="{ props }">
-                <div class="d-flex ml-3 align-center cursor-pointer" :class="{'routeActive': routeActive === 5}" v-bind="props" @click="handleToPersonalCenter">
+                <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">{{ baseInfo?.name || userInfo.phone }}</div>
+                  <div class="ml-3">
+                    {{ baseInfo?.name || userInfo.phone }}
+                    <v-icon :color="routeActive === 5 ? '#008979' : '#333'" size="30">mdi-menu-down</v-icon>
+                  </div>
                 </div>
               </template>
 
@@ -86,17 +89,7 @@
             </v-list>
           </v-menu> -->
           <div class="d-flex align-center" v-if="showBall">
-            <!-- <span class="cursor-pointer mx-5" @click="router.push({ path: '/recruit/personal/TaskCenter' })">{{ $t('sys.signIn') }}</span> -->
-            <!-- <span class="cursor-pointer" @click="router.push({ path: '/recruit/personal/message' })">{{ $t('sys.news') }}</span> -->
-            <!-- <v-badge
-              color="error"
-              dot
-              :model-value="useIM.unreadCount > 0"
-            >
-              <v-btn class="ml-1" size="small" icon="mdi-bell-outline" @click="router.push({ path: '/recruit/personal/message' })"></v-btn>
-            </v-badge> -->
-            <message-notification v-if="showBall" :path="paths[3]" :class="{'routeActive': routeActive === 3}"></message-notification>
-            
+            <message-notification v-if="showBall" :path="paths[3]" :class="{'active-route': routeActive === 3}"></message-notification>
           </div>
         </div>
         

src/styles/index.css

@@ -193,3 +193,27 @@
   height: 100%;
   min-height: 70vh;
 }
+
+.home-title {
+  font-size: 30px;
+  font-weight: 600;
+  color: #333333;
+  margin: 0 15px;
+  position: relative;
+}
+
+.home-title-line {
+  width: 223px;
+  background: linear-gradient(to right, #12ebb0, #427daa);
+  height: 9px;
+  position: absolute;
+  top: 37px;
+  left: -50%;
+  transform: translateX(5%);
+}
+
+.btnColor {
+  color: #fff;
+  opacity: .7;
+  background-color: #00887A !important;
+}

src/styles/index.scss

@@ -133,4 +133,27 @@
   width: 100%;
   height: 100%;
   min-height: 70vh;
+}
+
+.home-title {
+  font-size: 30px;
+  font-weight: 600;
+  color: rgb(51, 51, 51);
+  margin: 0 15px;
+  position: relative;
+  &-line {
+    width: 223px;
+    background: linear-gradient(to right, rgb(18, 235, 176), rgb(66, 125, 170));
+    height: 9px;
+    position: absolute;
+    top: 37px;
+    left: -50%;
+    transform: translateX(5%);
+  }
+}
+
+.btnColor {
+  color: #fff;
+  opacity: .7;
+  background-color: #00887A !important;
 }

src/styles/personal/navBar.css

@@ -20,8 +20,8 @@
   width: 100%;
   height: 50px;
   z-index: var(--zIndex-nav) !important;
-  color: #fff;
-  background-color: #d5e6e8;
+  color: #333;
+  background-color: #d6e5e8;
   padding-left: 0px;
   height: 50px;
   font-size: 14px;
@@ -92,7 +92,6 @@
 
 .nav ul li {
   text-align: center;
-  font-size: 14px;
   margin: 0 5px;
   list-style: none;
 }
@@ -102,7 +101,23 @@
   padding: 0 5px;
   position: relative;
   text-decoration: none;
-  color: var(--v-primary-base);
+  color: #333;
+}
+
+.routeActive {
+  color: var(--color-333) !important;
+}
+
+.routeActive .aLink {
+  color: #008979 !important;
+  font-weight: 700;
+  text-decoration: underline !important;
+}
+
+.active-route {
+  color: #008979;
+  text-decoration: underline !important;
+  font-weight: 700;
 }
 
 .user-nav {

src/styles/personal/navBar.min.css

@@ -1 +1 @@
-.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:#fff;background-color:#d5e6e8;padding-left:0px;height:50px;font-size:14px}.banner .left{height:100%;display:flex;align-items:center;font-size:20px;cursor:pointer}.hover:hover{cursor:pointer;background:rgba(0,0,0,0.03)}.innerBox{position:relative;width:1184px;max-width:1184px;margin:0 auto;align-items:center}.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{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;font-size:14px;margin:0 5px;list-style:none}.nav li a{display:block;padding:0 5px;position:relative;text-decoration:none;color:var(--v-primary-base)}.user-nav{color:var(--v-primary-base)}.user-nav .btns .btn-outline{border-radius:8px;text-align:center;font-size:14px;height:26px;line-height:26px;min-width:0;padding:0 11px;margin-left:14px;background-color:transparent}.user-nav .btn{display:inline-block;box-sizing:content-box;border:1px solid var(--v-primary-base);letter-spacing:1px;cursor:pointer}.user-nav a{text-decoration:none}
+.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;padding-left:0px;height:50px;font-size:14px}.banner .left{height:100%;display:flex;align-items:center;font-size:20px;cursor:pointer}.hover:hover{cursor:pointer;background:rgba(0,0,0,0.03)}.innerBox{position:relative;width:1184px;max-width:1184px;margin:0 auto;align-items:center}.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{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}.routeActive .aLink{color:#008979 !important;font-weight:700;text-decoration:underline !important}.active-route{color:#008979;text-decoration:underline !important;font-weight:700}.user-nav{color:var(--v-primary-base)}.user-nav .btns .btn-outline{border-radius:8px;text-align:center;font-size:14px;height:26px;line-height:26px;min-width:0;padding:0 11px;margin-left:14px;background-color:transparent}.user-nav .btn{display:inline-block;box-sizing:content-box;border:1px solid var(--v-primary-base);letter-spacing:1px;cursor:pointer}.user-nav a{text-decoration:none}

src/styles/personal/navBar.scss

@@ -18,8 +18,8 @@
   width: 100%;
   height: 50px;
   z-index: var(--zIndex-nav) !important;
-  color: #fff;
-  background-color: #d5e6e8;
+  color: #333;
+  background-color: #d6e5e8;
   padding-left: 0px;
   height: 50px;
   font-size: 14px;
@@ -81,7 +81,6 @@
 }
 .nav ul li {
   text-align: center;
-  font-size: 14px;
   margin: 0 5px;
   list-style: none;
 }
@@ -90,15 +89,21 @@
   padding: 0 5px;
   position: relative;
   text-decoration: none;
-  color: var(--v-primary-base);
+  color: #333;
 }
 .routeActive { // 选中样式
-  color: var(--v-error-base) !important;
+  color: var(--color-333) !important;
   .aLink {
-    color: var(--v-error-base) !important;
+    color: #008979 !important;
+    font-weight: 700;
     text-decoration: underline !important; // 多个下划线
   }
 }
+.active-route {
+  color: #008979;
+  text-decoration: underline !important; 
+  font-weight: 700;
+} 
 .user-nav {
   // position: absolute;
   // right: 0;

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

@@ -1,10 +1,11 @@
 
 <template>
-  <div class="white-bgc contentBox py-10 px-3">
+  <div class="contentBox py-10 px-3">
     <div class="d-flex align-center justify-center">
-      <span class="link"></span>
-      <span class="title">优质企业</span>
-      <span class="link"></span>
+      <div class="home-title">
+        优质企业
+        <div class="home-title-line"></div>
+      </div>
     </div>
 
     <div no-gutters class="mt-5 d-flex flex-wrap" style="width: 100%;">
@@ -59,12 +60,6 @@ const handleOpen = () => {
     left: 0;
   }
 }
-.title {
-  font-size: 24px;
-  font-weight: 600;
-  color: var(--v-primary-base);
-  margin: 0 15px;
-}
 .col-item {
   cursor: pointer;
   width: calc((100% - 36px) / 4);

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

@@ -21,10 +21,8 @@
           @click="props.onClick"
         ></v-btn>
       </template> -->
-      <v-carousel-item
-        src="@/assets/headerBg.png"
-        cover
-      >
+      <v-carousel-item src="@/assets/headerBg.png" cover style="position: relative;">
+        <div class="tips">专属职位推荐，助力职业发展</div>
       </v-carousel-item>
       <!-- <v-carousel-item
         v-for="(item,i) in items"
@@ -50,4 +48,14 @@ defineOptions({ name:'personal-headCarousel'})
 </script>
 
 <style lang="scss" scoped>
+.tips {
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 22px;
+  font-weight: 100;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
 </style>

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

@@ -180,7 +180,7 @@ const carouselList = ref([
           font-size: 14px;
           margin-left: 12px;
           cursor: pointer;
-          color: var(--color-666);
+          color: #888;
           font-family: 微软雅黑; 
           &:hover {
             color: var(--v-primary-base);

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

@@ -1,7 +1,7 @@
 <template>
   <div class="default-width text-center mb-6">
-    <span class="mr-2">{{ $t('position.popularPosition') }}:</span>
-    <v-btn v-for="(item, index) in jobs" :key="index" size="small" class="ml-2 my-1" color="primary" variant="tonal" @click="handleClick(item)">{{ item.nameCn }}</v-btn>
+    <span class="mr-2 color-666">{{ $t('position.popularPosition') }}:</span>
+    <span v-for="(item, index) in jobs" :key="index" label size="small" class="ml-2 my-1 tag"  @click="handleClick(item)">{{ item.nameCn }}</span>
   </div>
 </template>
 
@@ -25,4 +25,12 @@ getTreeData()
 </script>
 
 <style lang="scss" scoped>
+.tag {
+  background-color: #fff !important;
+  color: #666;
+  padding: 5px 20px;
+  display: inline-block;
+  border-radius: 6px;
+  font-size: 15px;
+}
 </style>

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

@@ -1,11 +1,17 @@
 <template>
   <div>
-    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="getPositionList">
+    <div class="d-flex align-center justify-center">
+      <div class="home-title">
+        精选职位
+        <div class="home-title-line"></div>
+      </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="mt-3">
+    <v-window v-model="tab" class="mt-5">
       <v-window-item :value="1">
         <PositionCard v-if="items.filter(Boolean) && items.length" :items="items" :tab="tab" @position="handlePosition" @enterprise="handleEnterprise"></PositionCard>
         <Empty v-else class="mb-3" :elevation="false"></Empty>
@@ -20,7 +26,7 @@
       </v-window-item>
     </v-window>
     <div class="text-center">
-      <v-btn class="buttons" color="primary" to="/recruit/personal/position">{{ $t('position.moreBtn') }}</v-btn>
+      <v-btn class="buttons btnColor" to="/recruit/personal/position">{{ $t('position.moreBtn') }}</v-btn>
     </div>
   </div>
 </template>
@@ -50,4 +56,15 @@ const handlePosition = (item) => {
 const handleEnterprise = (item) => {
   window.open(`/recruit/personal/company/details/${item.enterpriseId}?key=briefIntroduction`)
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+:deep(.v-slide-group__content) {
+  border-bottom: 1px solid #ccc !important;
+}
+:deep(.v-tab) {
+  font-weight: 700;
+  color: #666;
+  font-size: 16px;
+}
+</style>

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

@@ -1,8 +1,14 @@
 <template>
   <div>
-    <HotPromoted :items="items"></HotPromoted>
+    <div class="d-flex align-center justify-center">
+      <div class="home-title">
+        精选企业
+        <div class="home-title-line"></div>
+      </div>
+    </div>
+    <HotPromoted class="mt-5" :items="items"></HotPromoted>
     <div v-if="items.length" class="text-center">
-      <v-btn class="buttons" color="primary" to="/recruit/personal/company">{{ $t('enterprise.moreBtn') }}</v-btn>
+      <v-btn class="buttons btnColor" color="primary" to="/recruit/personal/company">{{ $t('enterprise.moreBtn') }}</v-btn>
     </div>
   </div>
 </template>