职位卡片

components.d.ts

@@ -31,7 +31,9 @@ declare module 'vue' {
     CtTextField: typeof import('./src/components/CtVuetify/CtTextField/index.vue')['default']
     DatePicker: typeof import('./src/components/DatePicker/index.vue')['default']
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElTree: typeof import('element-plus/es')['ElTree']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     File: typeof import('./src/components/Upload/file.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']
@@ -75,4 +77,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/components/Position/item.vue

@@ -3,7 +3,7 @@
     <div class="position-box">
       <div class="sub-li" v-for="(item, index) in props.items" :key="index" 
         :style="{'height': tab === 3 && item.hire ? '180px' : '149px'}"
-        :class="item.active ? 'elevation-6' : 'elevation-3'"
+        :class="item.active ? 'elevation-8' : 'elevation-3'"
         @click.stop="handlePosition(item)" @mouseenter="item.active = true" @mouseleave="item.active = false">
         <div class="job-info">
           <div class="sub-li-top">

src/components/Position/longCompany.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="sub-li mb-3 elevation-2" v-for="item in list" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
+    <div class="sub-li mb-3" :class="item.active ? 'elevation-8' : 'elevation-3'" v-for="item in list" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
       <div class="company-info-top">
         <div class="company-info">
           <div class="float-left mr-5">
@@ -68,9 +68,6 @@ const handleCancel = async (item) => {
   &:nth-child(4n) {
     margin-right: 0;
   }
-  &:hover {
-    box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important;
-  }
 }
 .company-info {
   width: 100%;

src/components/Position/longStrip.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="position-item mb-3 job-closed elevation-2" style="position: relative;" 
+    <div class="position-item mb-3 job-closed" style="position: relative;" :class="val.active ? 'elevation-8' : 'elevation-3'"
       v-for="(val, i) in props.items" :key="i" @mouseenter="val.active = true" @mouseleave="val.active = false"
     >
       <div class="info-header">
@@ -155,9 +155,6 @@ const loginClose = () => {
   height: 144px;
   background-color: #fff;
   border-radius: 12px;
-  &:hover {
-    box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important;
-  }
   .info-header {
     height: 48px;
     background: linear-gradient(90deg,#f5fcfc,#fcfbfa);

src/components/PositionLongStrip/item.vue

@@ -1,10 +1,13 @@
 <!-- 搜索页面的职位详情-长条 -->
 <template>
-  <div class="positionItem" v-for="(item, index) in list" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
+  <div class="positionItem px-3 pt-3" v-for="(item, index) in list" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
     <div class="position-and-company">
       <!-- 职位 -->
       
-      <div class="position" @mouseenter="item.positionActive = true" @mouseleave="item.positionActive = false" @click.stop="handlePosition(item)">
+      <div
+        class="position cursor-pointer rounded-lg" :class="item.positionActive ? 'elevation-5' : ''"
+        @mouseenter="item.positionActive = true" @mouseleave="item.positionActive = false" @click.stop="handlePosition(item)"
+      >
         <div class="d-flex">
           <div v-if="item?.job?.hire" class="mr-3">
             <svg-icon name="pin" size="45"></svg-icon>
@@ -40,7 +43,9 @@
         </div>
       </div>
       <!-- 公司 -->
-      <div class="company" @click.stop="jumpToEnterpriseDetail(item.enterprise.id, true)">
+      <div
+        class="company rounded-lg pa-4 cursor-pointer" :class="item.companyActive ? 'elevation-5' : ''"
+        @click.stop="jumpToEnterpriseDetail(item.enterprise.id, true)" @mouseenter="item.companyActive = true" @mouseleave="item.companyActive = false">
         <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;"/>
         </div>
@@ -59,16 +64,16 @@
       </div>
     </div>
     <!-- 底部 -->
-    <div class="footer">
+    <div class="footer mt-1">
       <div class="footer-left">
         <template v-for="(jobTag, jobTagsIndex) in item.job.tagList" :key="jobTagsIndex">
-          <span class="textColor666 mx-1" v-if="jobTagsIndex">|</span>
-          <span class="textColor666 dis">{{ jobTag }}</span>
+          <span class="color-666 mx-1" v-if="jobTagsIndex">|</span>
+          <span class="color-666 dis">{{ jobTag }}</span>
         </template>
       </div>
       <div class="footer-right" v-if="item.contact">
         <v-avatar size="x-small" :image="getUserAvatar(item.contact?.avatar, item.contact?.sex)"></v-avatar>
-        <span class="mx-2 textColor666">
+        <span class="mx-2 color-666">
           {{ item.contact?.name }}
           <span v-if="item?.contact?.postNameCn">|</span>
           {{ item.contact?.postNameCn }}
@@ -137,35 +142,29 @@ const handlePosition = (item) => {
 .company-info {
   float: left;
   margin-left: 16px;
-  // width: 282px;
 }
 .company-info p {
   height: 18px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 400;
   color: var(--color-999);
 }
-.textColor666 { color: var(--color-666); }
 .positionItem {
-  // width: 850px;
   width: 100%;
   margin-bottom: 12px;
   border-radius: 12px;
   padding: 0;
   overflow: hidden;
-  cursor: pointer;
   transition: all .2s linear;
   background-color: #fff;
-  &:hover {
-    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
-  }
+  box-shadow: 0 2px 20px 0 rgba(37, 39, 48, .2);
   .position-and-company {
     display: flex;
-    padding: 16px 20px;
     width: 100%;
     .position {
       width: 500px;
-      padding-right: 30px;
+      padding: 15px 20px 16px 20px;
+      margin-right: 30px;
     }
   }
   .footer {
@@ -189,11 +188,6 @@ const handlePosition = (item) => {
       white-space: nowrap;
     }
   }
-  .ellipsisStyle {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 }
 .salary {
   font-size: 16px;

src/styles/recruit/company.css

@@ -37,23 +37,19 @@
   min-width: calc((100% - 24px) / 3);
   max-width: calc((100% - 24px) / 3);
   margin: 0 12px 12px 0;
-  height: 160px;
+  height: 183px;
   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, 0.2);
 }
 
 .sub-li:nth-child(3n) {
   margin-right: 0;
 }
 
-.sub-li:hover {
-  box-shadow: 0 16px 40px 0 rgba(153, 153, 153, 0.3);
-}
-
 .company-info {
   float: left;
   margin-left: 16px;
@@ -62,9 +58,8 @@
 
 .company-info-top {
   display: flex;
-  height: 90px;
+  height: 70px;
   line-height: 90px;
-  padding: 0 20px;
   align-items: center;
   overflow: hidden;
 }
@@ -98,7 +93,6 @@
 .name {
   position: relative;
   line-height: 22px;
-  color: #404040;
   margin-right: 8px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -115,8 +109,3 @@
   text-align: right;
   flex: 1;
 }
-
-.job-hover:hover {
-  color: var(--v-primary-base);
-  background-color: #f2f4f7;
-}

src/styles/recruit/company.min.css

@@ -1 +1 @@
-.label-title{width:64px;font-weight:500;margin-right:24px;color:var(--color-222)}.label-content{flex:1}.label-color{color:var(--color-222);font-size:14px;margin-right:24px;display:inline-block;cursor:pointer}.label-color:hover{color:var(--v-primary-base)}.actives{color:var(--v-primary-base);font-weight:600}.company-box{display:flex;flex-wrap:wrap}.sub-li{position:relative;width:calc((100% - 24px) / 3);min-width:calc((100% - 24px) / 3);max-width:calc((100% - 24px) / 3);margin:0 12px 12px 0;height:160px;border-radius:12px;padding:0;overflow:hidden;transition:all .2s linear;background-color:#fff;cursor:pointer}.sub-li:nth-child(3n){margin-right:0}.sub-li:hover{box-shadow:0 16px 40px 0 rgba(153,153,153,0.3)}.company-info{float:left;margin-left:16px;width:282px}.company-info-top{display:flex;height:90px;line-height:90px;padding:0 20px;align-items:center;overflow:hidden}.company-info h3{height:22px;font-size:18px;font-weight:700;color:var(--color-333);line-height:22px;margin:0 0 4px 0;padding:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.company-info p{height:18px;font-size:13px;font-weight:400;color:var(--color-999);line-height:18px}.company-info-bottom{height:70px}.name{position:relative;line-height:22px;color:#404040;margin-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all linear .2s}.salary{font-size:16px;float:right;color:var(--v-error-base);line-height:22px;max-width:none;text-align:right;flex:1}.job-hover:hover{color:var(--v-primary-base);background-color:#f2f4f7}
+.label-title{width:64px;font-weight:500;margin-right:24px;color:var(--color-222)}.label-content{flex:1}.label-color{color:var(--color-222);font-size:14px;margin-right:24px;display:inline-block;cursor:pointer}.label-color:hover{color:var(--v-primary-base)}.actives{color:var(--v-primary-base);font-weight:600}.company-box{display:flex;flex-wrap:wrap}.sub-li{position:relative;width:calc((100% - 24px) / 3);min-width:calc((100% - 24px) / 3);max-width:calc((100% - 24px) / 3);margin:0 12px 12px 0;height:183px;border-radius:12px;padding:0;overflow:hidden;transition:all .2s linear;background-color:#fff;box-shadow:0 2px 20px 0 rgba(37,39,48,0.2)}.sub-li:nth-child(3n){margin-right:0}.company-info{float:left;margin-left:16px;width:282px}.company-info-top{display:flex;height:70px;line-height:90px;align-items:center;overflow:hidden}.company-info h3{height:22px;font-size:18px;font-weight:700;color:var(--color-333);line-height:22px;margin:0 0 4px 0;padding:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.company-info p{height:18px;font-size:13px;font-weight:400;color:var(--color-999);line-height:18px}.company-info-bottom{height:70px}.name{position:relative;line-height:22px;margin-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all linear .2s}.salary{font-size:16px;float:right;color:var(--v-error-base);line-height:22px;max-width:none;text-align:right;flex:1}

src/styles/recruit/company.scss

@@ -36,19 +36,16 @@
   min-width: calc((100% - 24px) / 3);
   max-width: calc((100% - 24px) / 3);
   margin: 0 12px 12px 0;
-  height: 160px;
+  height: 183px;
   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;
@@ -57,9 +54,8 @@
 }
 .company-info-top {
   display: flex;
-  height: 90px;
+  height: 70px;
   line-height: 90px;
-  padding: 0 20px;
   align-items: center;
   overflow: hidden;
 }
@@ -84,14 +80,11 @@
   line-height: 18px;
 }
 .company-info-bottom {
-  // width: 100%;
   height: 70px;
-  // margin: 10px 15px;
 }
 .name {
   position: relative;
   line-height: 22px;
-  color: #404040;
   margin-right: 8px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -106,8 +99,4 @@
   max-width: none;
   text-align: right;
   flex: 1;
-}
-.job-hover:hover {
-  color: var(--v-primary-base);
-  background-color: #f2f4f7;
 }

src/views/recruit/personal/PersonalCenter/jobFeedback/components/interview/item.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="position-item mb-3 job-closed elevation-2"
+  <div class="position-item mb-3 job-closed" :class="val.active ? 'elevation-8' : 'elevation-3'"
     style="position: relative;"
     v-for="(val, i) in props.items" :key="i" @mouseenter="val.active = true" @mouseleave="val.active = false"
   >
@@ -119,9 +119,6 @@ const handleRefuse = (val) => {
   height: 160px;
   background-color: #fff;
   border-radius: 12px;
-  &:hover {
-    box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important;
-  }
   .info-header {
     height: 48px;
     background: linear-gradient(90deg,#f5fcfc,#fcfbfa);

src/views/recruit/personal/PersonalCenter/jobFeedback/components/seenMe.vue

@@ -2,7 +2,7 @@
   <div style="position: relative; height: 60vh;">
     <div v-if="userInfo?.entitlement?.viewersList && userInfo?.vipFlag && userInfo?.vipExpireDate && userInfo?.vipExpireDate > Date.now()">
       <div v-if="items.length" class="mt-3">
-        <div class="positionItem elevation-2" v-for="(item, index) in items" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
+        <div class="positionItem" :class="item.active ? 'elevation-8' : 'elevation-3'" v-for="(item, index) in items" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
           <div class="position-and-company">
             <div class="position">
               <div class="float-left">
@@ -129,9 +129,6 @@ const goBuy = () => {
   overflow: hidden;
   transition: all .2s linear;
   background-color: #fff;
-  &:hover {
-    box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important;
-  }
   .position-and-company {
     display: flex;
     padding: 16px 20px;

src/views/recruit/personal/company/components/companyItem.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="company-box">
     <div class="sub-li" v-for="item in list" :key="item.enterprise.id">
-      <div class="company-info-top" @click.stop="jumpToEnterpriseDetail(item.enterprise.id, true)" @mouseenter="item.active = true" @mouseleave="item.active = false">
+      <div
+        class="company-info-top ma-3 rounded-lg px-3 cursor-pointer" :class="item.active ? 'elevation-5' : ''"
+        @click.stop="jumpToEnterpriseDetail(item.enterprise.id, true)" @mouseenter="item.active = true" @mouseleave="item.active = false">
         <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="item.enterprise.anotherName" :width="50" :height="50" />
         </div>
         <div class="company-info">
           <h3 :class="{'default-active': item.active }">{{ formatName(item.enterprise.anotherName || item.enterprise.name) }}</h3>
@@ -11,23 +13,28 @@
         </div>
       </div>
       <v-divider class="mx-4"></v-divider>
-      <div class="company-info-bottom mx-4 mt-2">
-        <div v-if="item?.job && Object.keys(item.job).length" class="job-hover" @click.stop="handleClickPosition(item.job)">
-          <div class="mb-1 d-flex">
-            <p :class="['mr-3', 'cursor-pointer', 'name']" :style="{'max-width': !item.job.payFrom && !item.job.payTo ? '270px' : '220px'}">{{ formatName(item.job.name) }}</p>
-            <span v-if="!item.job.payFrom && !item.job.payTo" class="salary">面议</span>
-            <span v-else class="salary">{{ item.job.payFrom ? item.job.payFrom + '-' : '' }}{{ item.job.payTo }}{{ item.job.payName ? '/' + item.job.payName : '' }}</span>
-          </div>
-          <div style="height: 24px; overflow: hidden; color: #808080;">
-            <span v-for="(j, index) in desc" :key="index">
-              <span v-if="item.job[j] || j === 'areaName'" class="mr-1 font-size-13">
-                {{ j === 'areaName' ? !item.job.areaId ? '全国' : item.job.area.str : item.job[j] }}
+      <v-hover v-slot="{ isHovering, props }">
+        <div class="company-info-bottom mx-3 mt-2 rounded-lg pa-3 cursor-pointer" v-bind="props" :class="isHovering && (item?.job && Object.keys(item.job).length) ? 'elevation-5' : ''">
+          <div v-if="item?.job && Object.keys(item.job).length" @click.stop="handleClickPosition(item.job)">
+            <div class="mb-1 d-flex">
+              <p
+                class="mr-3 cursor-pointer name"
+                :style="{'max-width': !item.job.payFrom && !item.job.payTo ? '270px' : '200px', 'color': isHovering ? 'var(--v-primary-base)' : '#404040'}"
+              >{{ formatName(item.job.name) }}</p>
+              <span v-if="!item.job.payFrom && !item.job.payTo" class="salary">面议</span>
+              <span v-else class="salary">{{ item.job.payFrom ? item.job.payFrom + '-' : '' }}{{ item.job.payTo }}{{ item.job.payName ? '/' + item.job.payName : '' }}</span>
+            </div>
+            <div style="height: 24px; overflow: hidden; color: #808080;">
+              <span v-for="(j, index) in desc" :key="index">
+                <span v-if="item.job[j] || j === 'areaName'" class="mr-1 font-size-13">
+                  {{ j === 'areaName' ? !item.job.areaId ? '全国' : item.job.area.str : item.job[j] }}
+                </span>
+                <span v-if="index !== desc.length - 1 && (item.job[desc[index + 1]] || j === 'areaName')" class="septal-line ml-1"></span>
               </span>
-              <span v-if="index !== desc.length - 1 && (item.job[desc[index + 1]] || j === 'areaName')" class="septal-line ml-1"></span>
-            </span>
+            </div>
           </div>
         </div>
-      </div>
+      </v-hover>
     </div>
   </div>
 </template>

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

@@ -1,8 +1,8 @@
 <template>
   <div class="default-width">
-    <buttons :current="2" style="position: sticky;"></buttons>
+    <buttons :current="2" style="position: sticky;" class="mx-4"></buttons>
     <div class="company-content">
-      <div class="white-bgc pb-3 pt-5">
+      <div class="white-bgc pb-3 pt-5 mx-4">
         <headSearch v-model="content" placeholder="搜索公司关键字" @handleSearch="val => handleSearch(val, 'name')"></headSearch>
         <div class="px-5 mt-3 clear-parent">
           <!-- <areaType :isClear="clear" @handleClick="handleSearch"></areaType> -->
@@ -11,7 +11,7 @@
           <div class="clear" @click="handleClear">清空筛选条件</div>
         </div>
       </div>
-      <div v-if="items.length">
+      <div v-if="items.length" class="mx-4">
         <companyItem class="mt-3" :list="items"></companyItem>
         <MPagination
           :total="total"

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

@@ -1,21 +1,21 @@
 <!-- 检索列表页 - 职位检索 -->
 <template>
   <div class="default-width">
-    <buttons :current="1" style="position: sticky;"></buttons>
+    <buttons :current="1" style="position: sticky;" class="mx-4"></buttons>
     <div class="position-content">
-      <div class="pb-3 pt-5" style="z-index: 998; background-color: #fff">
+      <div class="pb-3 pt-5 mx-4" style="z-index: 998; background-color: #fff">
         <div class="stickyBox mb-5">
           <headSearch
             v-model="headSearchText"
             @handleSearch="val => handleQueryChange('content', val)"
-          ></headSearch>
-        </div>
-        <!-- <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @change="handleQueryChange"></cityFilter> -->
-        <div class="d-flex justify-space-between mx-5">
-          <conditionFilter ref="conditionFilterRef" showCitySelect :showFilterList="showFilterList" @reset="handleReset" @change="handleQueryChange"></conditionFilter>
-        </div>
+        ></headSearch>
       </div>
-      <div class="mt-3">
+      <!-- <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @change="handleQueryChange"></cityFilter> -->
+      <div class="d-flex justify-space-between mx-5">
+        <conditionFilter ref="conditionFilterRef" showCitySelect :showFilterList="showFilterList" @reset="handleReset" @change="handleQueryChange"></conditionFilter>
+      </div>
+    </div>
+      <div class="mt-3 mx-4">
         <Empty v-if="!items?.length" :message="noParams? '请输入或选择对应的条件查找职位' : '没有相关的职位，请更换搜索条件后再试'"></Empty>
         <PositionLongStrip v-else :items="items"></PositionLongStrip>
         <CtPagination

src/views/recruit/personal/recommend/components/positionList.vue

@@ -3,7 +3,7 @@
     <div class="position-box">
       <div class="sub-li"
         v-for="(item, index) in list" :key="index"
-        :class="{'chosen': chosenIndex === index}"
+        :class="[{'chosen': chosenIndex === index}, item.active ? 'elevation-8' : 'elevation-3']"
         :style="`margin-top: ${index ? '12px' : '0'}`"
         @mouseenter="item.active = true" @mouseleave="item.active = false"
         @click="handleClick(item, index)"
@@ -111,10 +111,6 @@ const handleClick = (item, index) => {
   // transition: all .2s linear;
   background-color: #fff;
   border: 1px solid #fff;
-  &:hover {
-    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
-    .salary { color: var(--v-error-base) !important; }
-  }
 }
 .job-info {
   position: relative;