Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/views/resume/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="default-width d-flex pt-3">
-    <div class="mr-3 left">
-      <v-card width="240" max-width="240" height="440">
+  <div class="default-width d-flex" ref="scrollBox">
+    <div class="mr-3 pt-3">
+      <v-card id="leftCadId" width="240" max-width="240" height="440" class="positionSticky">
         <v-list>
           <v-list-subheader class="title">简历目录</v-list-subheader>
-          <v-list-item v-for="(item, i) in items" :key="i" :value="item" color="primary" @click="handleClick(item)">
+          <v-list-item v-for="(item, i) in items" :key="i" :value="item" :disabled="!item.id" color="primary" @click="handleClick(item)">
             <template v-slot:prepend>
               <v-icon :icon="item.icon"></v-icon>
             </template>
@@ -24,14 +24,14 @@
       <projectExperience id="projectExperience"></projectExperience>
       <trainingExperience class="my" id="trainingExperience"></trainingExperience>
     </div> -->
-    <div>
+    <div class=" pt-3">
       <component
         v-for="item in comList"
         :key="item.id"
         ref="component"
         class="mb-3"
         :is="item.path"
-        :id="item.id"
+        :id="item.domId"
       />
     </div>
   </div>
@@ -46,16 +46,20 @@ import trainingExperience from './components/trainingExperience.vue'
 import educationExp from './components/educationExp.vue'
 import projectExperience from './components/projectExperience.vue'
 import vocationalSkills from './components/vocationalSkills.vue'
+import { ref } from 'vue'
+import { onMounted } from 'vue';
+const scrollBox = ref()
 
 const comList = [
-  { path: basicInfo, id: 'resumeBasicInfo' },
-  { path: selfEvaluation, id: 'resumeSelfEvaluation' },
-  { path: jobIntention, id: 'resumeJobIntention' },
-  { path: educationExp, id: 'resumeEducationExp' },
-  { path: projectExperience, id: 'resumeProjectExperience' },
-  { path: trainingExperience, id: 'resumeTrainingExperience' },
-  { path: vocationalSkills, id: 'resumeVocationalSkills' },
+  { path: basicInfo, id: 'resumeBasicInfo', domId: 'basicInfo' }, // domId与items中的id保持一致
+  { path: selfEvaluation, id: 'resumeSelfEvaluation', domId: 'selfEvaluation' },
+  { path: jobIntention, id: 'resumeJobIntention', domId: 'jobIntention' },
+  { path: educationExp, id: 'resumeEducationExp', domId: 'educationExp' },
+  { path: projectExperience, id: 'resumeProjectExperience', domId: 'projectExperience' },
+  { path: trainingExperience, id: 'resumeTrainingExperience', domId: 'trainingExperience' },
+  { path: vocationalSkills, id: 'resumeVocationalSkills', domId: 'vocationalSkills' },
 ]
+
 const items = [
   { text: '基本信息', icon: 'mdi-account-outline', id: 'basicInfo' },
   { text: '个人优势', icon: 'mdi-account-star-outline', id: 'selfEvaluation' },
@@ -66,9 +70,31 @@ const items = [
   { text: '培训经历', icon: 'mdi-flag-outline', id: 'trainingExperience' },
   { text: '职业技能', icon: 'mdi-star-check-outline', id: 'vocationalSkills' }
 ]
+
+
+onMounted(() => {
+  const selector = document.getElementById('leftCadId')
+  if (!selector) return
+  selector.style.top = `${scrollBox.value.offsetTop + 12}px`
+})
+
+const handleClick = (item) => {
+  if (item.id) {
+    const selector = document.getElementById(item.id)
+    if (!selector) return
+    window.scrollTo({
+      top: selector.offsetTop - scrollBox.value.offsetTop - 12,
+      behavior: 'smooth'
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+.positionSticky {
+  position: sticky;
+  // top: 62px;
+}
 .title {
   color: #333;
   font-weight: 600;