index

src/views/resume/dynamic/left.vue

@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <v-card class="mx-auto" max-width="300">
-    <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">
-        <template v-slot:prepend>
-          <v-icon :icon="item.icon"></v-icon>
-        </template>
-        <v-list-item-title v-text="item.text"></v-list-item-title>
-        <template v-slot:append>
-          <v-icon color="primary">mdi-check</v-icon>
-        </template>
-      </v-list-item>
-    </v-list>
-  </v-card>
-  </div>
-</template>
-
-<script setup>
-defineOptions({ name: 'resume-left'})
-
-const items = [
-    { text: '基本信息', icon: 'mdi-account-outline' },
-    { text: '个人优势', icon: 'mdi-account-star-outline' },
-    { text: '求职意向', icon: 'mdi-briefcase-variant-outline' },
-    { text: '教育经历', icon: 'mdi-school-outline' },
-    { text: '工作经历', icon: 'mdi-ballot-outline' },
-    { text: '项目经历', icon: 'mdi-card-text-outline' },
-    { text: '培训经历', icon: 'mdi-flag-outline' },
-    { text: '职业技能', icon: 'mdi-star-check-outline' }
-  ]
-</script>
-
-<style scoped lang="scss">
-.title {
-  color: #333;
-  font-weight: 600;
-  font-size: 20px;
-}
-</style>

src/views/resume/dynamic/right.vue

@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <basicInfo></basicInfo>
-    <selfEvaluation class="my"></selfEvaluation>
-    <jobIntention></jobIntention>
-    <educationExp class="my"></educationExp>
-    <projectExperience></projectExperience>
-    <trainingExperience class="my"></trainingExperience>
-  </div>
-</template>
-
-<script setup>
-defineOptions({ name: 'resume-right'})
-import basicInfo from '../components/basicInfo.vue'
-import selfEvaluation from '../components/selfEvaluation.vue'
-import jobIntention from '../components/jobIntention.vue'
-import trainingExperience from '../components/trainingExperience.vue'
-import educationExp from '../components/educationExp.vue'
-import projectExperience from '../components/projectExperience.vue'
-</script>
-
-<style scoped lang="scss">
-.my {
-  margin: 12px 0;
-}
-</style>

src/views/resume/index.vue

@@ -1,21 +1,75 @@
 <template>
   <div class="default-width d-flex pt-3">
-    <LeftPage class="left mr-3"></LeftPage>
-    <RightPage class="right"></RightPage>
+    <div class="mr-3 left">
+      <v-card width="240" max-width="240" height="440">
+        <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)">
+            <template v-slot:prepend>
+              <v-icon :icon="item.icon"></v-icon>
+            </template>
+            <v-list-item-title v-text="item.text"></v-list-item-title>
+            <template v-slot:append>
+              <v-icon color="primary">mdi-check</v-icon>
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-card>
+    </div>
+    <!-- <div class="right">
+      <basicInfo id="basicInfo"></basicInfo>
+      <selfEvaluation class="my" id="selfEvaluation"></selfEvaluation>
+      <jobIntention id="jobIntention"></jobIntention>
+      <educationExp class="my" id="educationExp"></educationExp>
+      <projectExperience id="projectExperience"></projectExperience>
+      <trainingExperience class="my" id="trainingExperience"></trainingExperience>
+    </div> -->
+    <div>
+      <component
+        v-for="item in comList"
+        :key="item.id"
+        ref="component"
+        class="mb-3"
+        :is="item.path"
+        :id="item.id"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'resume-index' })
-import LeftPage from './dynamic/left.vue'
-import RightPage from './dynamic/right.vue'
+import basicInfo from './components/basicInfo.vue'
+import selfEvaluation from './components/selfEvaluation.vue'
+import jobIntention from './components/jobIntention.vue'
+import trainingExperience from './components/trainingExperience.vue'
+import educationExp from './components/educationExp.vue'
+import projectExperience from './components/projectExperience.vue'
+
+const comList = [
+  { path: basicInfo, id: 'resumeBasicInfo' },
+  { path: selfEvaluation, id: 'resumeSelfEvaluation' },
+  { path: jobIntention, id: 'resumeJobIntention' },
+  { path: trainingExperience, id: 'resumeTrainingExperience' },
+  { path: educationExp, id: 'resumeEducationExp' },
+  { path: projectExperience, id: 'resumeProjectExperience' }
+]
+const items = [
+  { text: '基本信息', icon: 'mdi-account-outline', id: 'basicInfo' },
+  { text: '个人优势', icon: 'mdi-account-star-outline', id: 'selfEvaluation' },
+  { text: '求职意向', icon: 'mdi-briefcase-variant-outline', id: 'jobIntention' },
+  { text: '教育经历', icon: 'mdi-school-outline', id: 'educationExp' },
+  { text: '工作经历', icon: 'mdi-ballot-outline', id: '' },
+  { text: '项目经历', icon: 'mdi-card-text-outline', id: 'projectExperience' },
+  { text: '培训经历', icon: 'mdi-flag-outline', id: 'trainingExperience' },
+  { text: '职业技能', icon: 'mdi-star-check-outline', id: '' }
+]
 </script>
 
 <style lang="scss" scoped>
-.left {
-  width: 272px;
-}
-.right {
-  flex: 1;
+.title {
+  color: #333;
+  font-weight: 600;
+  font-size: 20px;
 }
 </style>