个人中心-职位

src/config/axios/service.js

@@ -42,7 +42,7 @@ const service = axios.create({
 // request拦截器
 service.interceptors.request.use(
   (config) => {
-    config.headers['Accept-Language'] = 'en_EN'
+    config.headers['Accept-Language'] = 'zh-CN'
     // 是否需要设置 token
     let isToken = (config.headers || {}).isToken === false
     whiteList.some((v) => {

src/router/modules/personal.js

@@ -63,7 +63,7 @@ const personal = [
   {
     path: '/personalCenter',
     component: Layout,
-    name: 'resume',
+    name: 'personalCenter',
     meta: {
       title: '个人中心'
     },

src/views/PersonalCenter/components/posiitonItem.vue

@@ -0,0 +1,154 @@
+<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>
+          <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 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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="positionItem">
+import { ref } from 'vue'
+
+const props = defineProps({
+  tab: {
+    type: Number,
+    default: 0
+  }
+})
+
+const list = ref([
+  {
+    contact: {
+      name: '肖女士',
+      avatars: 'https://cdn.vuetifyjs.com/images/john.jpg',
+      postNameCn: '人事经理'
+    },
+    name: '前端开发工程师',
+    areaName: '北京·石景山区·八大处',
+    payFrom: 15,
+    payTo: 18,
+    expName: '3-5年',
+    eduName: '本科',
+    active: false,
+    enterprise: {
+      name: '广州辞图科技有限公司',
+      industryName: '互联网',
+      scaleName: '0-20人',
+      financingName: '未融资'
+    }
+  },
+  {
+    contact: {
+      name: '肖女士',
+      avatars: 'https://cdn.vuetifyjs.com/images/john.jpg',
+      postNameCn: '人事经理'
+    },
+    name: '前端开发工程师',
+    areaName: '北京·石景山区·八大处',
+    payFrom: 15,
+    payTo: 18,
+    expName: '3-5年',
+    eduName: '本科',
+    active: false,
+    enterprise: {
+      name: '广州辞图科技有限公司',
+      industryName: '互联网',
+      scaleName: '0-20人',
+      financingName: '未融资'
+    }
+  }
+])
+
+const desc = ['industryName', 'financingName', 'scaleName']
+</script>
+
+<style scoped lang="scss">
+.position-item {
+  height: 144px;
+  background-color: #fff;
+  border-radius: 12px;
+  &:hover {
+    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+  }
+  .info-header {
+    height: 48px;
+    background: linear-gradient(90deg,#f5fcfc,#fcfbfa);
+    .img-box {
+      padding: 12px 24px;
+      .name {
+        color: #222;
+        font-weight: 400;
+        font-size: 13px;
+        .gray {
+          color: #666;
+        }
+      }
+    }
+    .header-btn {
+      padding: 10px 10px 0 0;
+      float: right;
+    }
+  }
+  .info-content {
+    display: flex;
+    padding: 16px 24px;
+    justify-content: space-between;
+    .job-info {
+      width: 500px;
+      min-width: 500px;
+      max-width: 500px;
+      font-weight: 500;
+      font-size: 16px;
+      .job-name {
+        height: 22px;
+        line-height: 22px;
+        color: #222;
+        margin-bottom: 12px;
+      }
+      .job-other {
+        color: var(--v-error-base);
+        height: 22px;
+        line-height: 22px;
+      }
+    }
+    .company-info {
+      display: flex;
+      align-items: center
+    }
+  }
+}
+</style>

src/views/PersonalCenter/dynamic/left.vue

@@ -19,23 +19,25 @@
         </div>
       </div>
       <div class="otherInfo">
-        <div class="expect">
-          <span>期望：前端开发工程师</span>
-          <span class="salary">12-13k</span>
+        <div>
+          <span>手机号：13229740091</span>
+          <!-- <span class="salary">12-13k</span> -->
         </div>
-        <div class="edu">
-          <span>北京理工大学·计算机应用与管理</span>
-          <span class="edu-time">2024-2028</span>
+        <div class="my-3">
+          <span>用户邮箱：xxxxxxxxqq.com</span>
+          <!-- <span class="edu-time">2024-2028</span> -->
         </div>
-        <div class="work-exp">
-          <span>广州辞图科技有限公司·前端开发工程师</span>
-          <span class="edu-time">1990.01-2024.02</span>
+        <div>
+          <span>出生日期：xxxx-xx-xx</span>
+          <!-- <span class="edu-time">1990.01-2024.02</span> -->
         </div>
+        <div class="mt-3">现居地址：xxxxxxxxxxxxxxxxxx</div>
       </div>
       <div class="slider-btn">
-        <v-btn class="slider-btn-item" rounded variant="outlined" color="primary" append-icon="mdi-menu-right">在线简历</v-btn>
+        <v-btn class="slider-btn-item" rounded variant="outlined" color="primary" append-icon="mdi-menu-right" to="/resume">在线简历</v-btn>
       </div>
     </div>
+
     <div class="left-tabs my-3">
       <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @click="getPositionList">
         <v-tab :value="1">{{ $t('position.throughCommunication') }}</v-tab>
@@ -46,13 +48,16 @@
         <v-tab :value="6">{{ $t('position.haveSeenMe') }}</v-tab>
       </v-tabs>
     </div>
-    <div class="left-bottom">岗位</div>
+    <div class="left-bottom">
+      <PositionItem :tab="tab"></PositionItem>
+    </div>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'personal-center-left'})
 import { ref } from 'vue'
+import PositionItem from '../components/posiitonItem.vue'
 
 const tab = ref(1)
 const selectVal = ref(0)
@@ -71,7 +76,7 @@ const getPositionList = () => {}
   display: flex;
   align-items: center;
   padding: 12px 0 12px 12px;
-  height: 135px;
+  height: 144px;
   border-radius: 12px;
   background-color: #fff;
   .content {