个人中心

components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     CtSearch: typeof import('./src/components/CtSearch/index.vue')['default']
     CtTextField: typeof import('./src/components/CtVuetify/CtTextField/index.vue')['default']
     Details: typeof import('./src/components/Enterprise/details.vue')['default']
+    Empty: typeof import('./src/components/Empty/index.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']
     HotPromoted: typeof import('./src/components/Enterprise/hotPromoted.vue')['default']
     'Index copy': typeof import('./src/components/CtForm/index copy.vue')['default']

src/components/Empty/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="d-flex align-center flex-column">
+    <v-img :width="width" :height="height" src="https://minio.citupro.com/dev/menduner/nodata.png"></v-img>
+    <div class="message">{{ message }}</div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'empty-page'})
+defineProps({
+  width: {
+    type: [String, Number],
+    default: 300
+  },
+  height: {
+    type: [String, Number],
+    default: 170
+  },
+  message: {
+    type: String,
+    default: '暂无数据'
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.message {
+  font-weight: 400;
+  font-size: 14px;
+  color: #999;
+  line-height: 20px;
+}
+</style>

src/layout/personal/navBar.vue

@@ -40,7 +40,7 @@
             <span style="cursor: pointer;">消息</span>
             <v-menu open-on-hover>
               <template v-slot:activator="{ props }">
-                <div class="d-flex ml-5 align-center cursor-pointer" v-bind="props" @click="handleToPersonalCenter">
+                <div class="d-flex ml-5 pl-2 align-center cursor-pointer" v-bind="props" @click="handleToPersonalCenter">
                   <v-avatar>
                     <v-img alt="John" src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
                   </v-avatar>

src/views/PersonalCenter/components/posiitonItem.vue

@@ -1,47 +1,57 @@
 <template>
   <div>
-    <div class="position-item mb-3" v-for="(val, i) in list" :key="i" @mouseenter="val.active = true" @mouseleave="val.active = false">
-      <div class="info-header">
-        <div v-if="val.active" class="header-btn">
-          <v-btn class="half-button" color="primary" size="small">继续沟通</v-btn>
-          <v-btn v-if="props.tab === 4" class="half-button ml-3" color="primary" size="small">取消感兴趣</v-btn>
-        </div>
-        <div class="img-box">
-          <v-avatar :image="val.contact.avatars" size="x-small"></v-avatar>
-          <span class="name">
-            <span class="mx-3">{{ val.contact.name }}</span>
-            <span class="gray">{{ val.contact.postNameCn }}</span>
-          </span>
-        </div>
-      </div>
-      <div class="info-content">
-        <div class="job-info">
-          <div class="job-name">
-            <span class="mr-3">{{ val.name }}</span>
-            <span>[{{ val.areaName }}]</span>
+    <div v-if="list.length">
+      <div class="position-item mb-3 job-closed" v-for="(val, i) in list" :key="i" @mouseenter="handleMouseEnter(val)" @mouseleave="val.active = false">
+        <div class="info-header">
+          <div v-if="val.active" class="header-btn">
+            <v-btn class="half-button" color="primary" size="small">继续沟通</v-btn>
+            <v-btn v-if="props.tab === 4" class="half-button ml-3" color="primary" size="small">取消感兴趣</v-btn>
           </div>
-          <div class="job-other">
-            <span class="salary">{{ val.payFrom }}-{{ val.payTo }}k</span>
-            <v-chip class="mx-3" color="primary" label size="small">{{ val.expName }}</v-chip>
-            <v-chip color="primary" label size="small">{{ val.eduName }}</v-chip>
+          <div class="img-box">
+            <v-avatar :image="val.contact.avatars" size="x-small"></v-avatar>
+            <span class="name">
+              <span class="mx-3">{{ val.contact.name }}</span>
+              <span class="gray">{{ val.contact.postNameCn }}</span>
+            </span>
           </div>
         </div>
-        <div class="company-info">
-          <v-img width="50" height="50" :src="val.contact.avatars"></v-img>
-          <div class="ml-3">
-            <div class="company-name">{{ val.enterprise.name }}</div>
-            <div class="mt-3">
-              <v-chip color="primary" label size="small" class="mr-3" v-for="k in desc" :key="k">{{ val.enterprise[k] }}</v-chip>
+        <div class="info-content">
+          <div class="job-info">
+            <div class="job-name cursor-pointer">
+              <span class="mr-3 info-name">{{ val.name }}</span>
+              <span>[{{ val.areaName }}]</span>
+            </div>
+            <div class="job-other">
+              <span class="salary">{{ val.payFrom }}-{{ val.payTo }}k</span>
+              <v-chip class="mx-3" color="primary" label size="small">{{ val.expName }}</v-chip>
+              <v-chip color="primary" label size="small">{{ val.eduName }}</v-chip>
+            </div>
+          </div>
+          <div v-if="props.tab === 3" class="interview-info">
+            <div>面试时间：2022.03.15 17:00</div>
+            <div class="mt-3">面试地点：先烈中路100号大院203室</div>
+          </div>
+          <div v-else class="company-info">
+            <v-img width="50" height="50" :src="val.contact.avatars"></v-img>
+            <div class="ml-3">
+              <div class="cursor-pointer info-name">{{ val.enterprise.name }}</div>
+              <div class="mt-3">
+                <v-chip color="primary" label size="small" class="mr-3" v-for="k in desc" :key="k">{{ val.enterprise[k] }}</v-chip>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div v-else>
+      <Empty></Empty>
+    </div>
   </div>
 </template>
 
 <script setup name="positionItem">
 import { ref } from 'vue'
+import Empty from '@/components/Empty'
 
 const props = defineProps({
   tab: {
@@ -94,6 +104,10 @@ const list = ref([
 ])
 
 const desc = ['industryName', 'financingName', 'scaleName']
+
+const handleMouseEnter = (val) => {
+  if (props.tab !==3 ) val.active = true
+}
 </script>
 
 <style scoped lang="scss">
@@ -121,6 +135,9 @@ const desc = ['industryName', 'financingName', 'scaleName']
     .header-btn {
       padding: 10px 10px 0 0;
       float: right;
+      .v-btn {
+        z-index: 1;
+      }
     }
   }
   .info-content {
@@ -149,6 +166,50 @@ const desc = ['industryName', 'financingName', 'scaleName']
       display: flex;
       align-items: center
     }
+    .interview-info {
+      color: #333;
+      font-size: 15px;
+    }
   }
 }
+
+.info-name:hover {
+  color: var(--v-primary-base);
+}
+
+
+// .position-item:not(.job-closed):hover {
+//   box-shadow: 0 16px 40px 0 hsla(0,0%,60%,.3);
+//   z-index: 3
+// }
+
+// .position-item.job-closed .img-box {
+//   position: relative
+// }
+
+// .position-item.job-closed .img-box:after {
+//   content: "";
+//   position: absolute;
+//   left: 0;
+//   top: 0;
+//   width: 100%;
+//   height: 48px;
+//   background: linear-gradient(90deg,#f5fcfc,#fcfbfa);
+//   opacity: .8
+// }
+
+// .position-item.job-closed .info-content {
+//   position: relative
+// }
+
+// .position-item.job-closed .info-content:after {
+//   content: "";
+//   position: absolute;
+//   left: 0;
+//   top: 0;
+//   width: 100%;
+//   height: 92px;
+//   background: #fff;
+//   opacity: .8
+// }
 </style>

src/views/PersonalCenter/dynamic/left.vue

@@ -47,6 +47,11 @@
         <v-tab :value="5">{{ $t('position.interestedInMe') }}</v-tab>
         <v-tab :value="6">{{ $t('position.haveSeenMe') }}</v-tab>
       </v-tabs>
+      <v-divider></v-divider>
+      <v-tabs v-if="tab === 4" v-model="secondTab" align-tabs="start" color="primary" bg-color="#fff">
+        <v-tab :value="7">职位收藏</v-tab>
+        <v-tab :value="8">公司收藏</v-tab>
+      </v-tabs>
     </div>
     <div class="left-bottom">
       <PositionItem :tab="tab"></PositionItem>
@@ -60,6 +65,7 @@ import { ref } from 'vue'
 import PositionItem from '../components/posiitonItem.vue'
 
 const tab = ref(1)
+const secondTab = ref(7)
 const selectVal = ref(0)
 const items = [
   { label: '离职-随时到岗', value: 0 },

src/views/PersonalCenter/dynamic/right.vue

@@ -1,11 +1,105 @@
 <template>
-  <div>right</div>
+  <div>
+    <div class="resume d-flex">
+      <div v-for="val in resumeList" :key="val.title" class="topping white-bgc radius">
+        <v-icon color="primary">{{ val.icon }}</v-icon>
+        <div class="ml-1">
+          <div class="title-text">{{ val.title }}</div>
+          <div class="tip-text">{{ val.desc }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="attachment white-bgc radius mt-3">
+      <div>
+        <span class="title">附件简历</span>
+        <span class="more-text">最多上传5份</span>
+        <span class="upload--text">上传</span>
+      </div>
+      <div class="d-flex attachment-item my-2 cursor-pointer" v-for="(k, i) in attachmentList" :key="i">
+        <v-icon color="primary">mdi-file-account</v-icon>
+        <div class="file-name ellipsis ml-2">{{ k.file_name }}</div>
+        <v-icon class="ml-8" color="error">mdi-trash-can-outline</v-icon>
+      </div>
+      <div class="border-bottom-dashed my-3"></div>
+      <div class="last-update">最后更新于2024-05-23 12:20:25</div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'personal-center-right'})
+
+const resumeList = [
+  { icon: 'mdi-upload', title: '置顶简历', desc: '增加更多曝光度' },
+  { icon: 'mdi-refresh', title: '刷新简历', desc: '提升简历活跃度' }
+]
+const attachmentList = [
+  { file_name: '陈芊芊-Web前端开发工程师-15425236412' },
+  { file_name: '陈芊芊-Web前端开发工程师-15425236412' },
+  { file_name: '陈芊芊-Web前端开发工程师-15425236412' },
+  { file_name: '陈芊芊-Web前端开发工程师-15425236412' },
+  { file_name: '陈芊芊-Web前端开发工程师-15425236412' }
+]
 </script>
 
 <style scoped lang="scss">
-
+.radius {
+  border-radius: 8px
+}
+.title {
+  font-weight: 600;
+  font-size: 17px;
+}
+.resume {
+  width: 100%;
+  .topping {
+    display: flex;
+    align-items: center;
+    width: 50%;
+    height: 60px;
+    padding: 12px;
+    margin-right: 12px;
+    cursor: pointer;
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+    .tip-text {
+      font-size: 12px;
+      color: #666;
+    }
+    .title-text {
+      font-weight: 600;
+      &:hover {
+        color: var(--v-primary-base);
+      }
+    }
+  }
+}
+.attachment {
+  padding: 12px;
+  .more-text {
+    font-size: 12px;
+    color: #666;
+    margin-left: 4px;
+  }
+  .upload--text {
+    float: right;
+    color: var(--v-primary-base);
+    font-size: 12px;
+  }
+  .last-update {
+    font-size: 12px;
+    color: #666;
+  }
+  .attachment-item {
+    color: #555;
+    font-size: 14px;
+    .file-name {
+      width: 180px;
+      &:hover {
+        color: var(--v-primary-base);
+      }
+    }
+  }
+}
 </style>

src/views/PersonalCenter/index.vue

@@ -22,6 +22,5 @@ import RightPage from './dynamic/right.vue'
 }
 .right {
   flex: 1;
-  background-color: #fff;
 }
 </style>