样式

src/locales/en.js

@@ -4,7 +4,8 @@ export default {
     edit: 'Edit',
     cancel: 'Cancel',
     save: 'Save',
-    add: 'Add'
+    add: 'Add',
+    delete: 'Delete'
   },
   sys: {
     api: {

src/locales/zh-CN.js

@@ -4,7 +4,8 @@ export default {
     edit: '编辑',
     cancel: '取消',
     save: '保存',
-    add: '新增'
+    add: '新增',
+    delete: '删除'
   },
   sys: {
     api: {

src/styles/index.css

@@ -64,6 +64,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 36px;
 }
 
 .resume-title {

src/styles/index.min.css

@@ -1 +1 @@
-:root{--zIndex-dialog:9999;--default-bgc:#f2f4f7;--v-primary-base:#00897B;--v-error-base:#fe574a;--v-primary-lighten1:#26A69A;--v-primary-lighten2:#4DB6AC;--v-primary-lighten3:#80CBC4;--v-primary-lighten4:#B2DFDB;--default-text:#666}.buttons{height:36px;width:224px}.half-button{height:36px;width:88px}.default-width{width:1184px;min-width:1184px;max-width:1184px;margin:0 auto}.default-active{color:var(--v-primary-base) !important}.border-bottom-dashed{border-bottom:1px dashed #ccc}.white-bgc{background-color:#fff}.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vline{display:inline-block;width:1px;height:10px;vertical-align:middle;background-color:#e0e0e0;margin:0 10px}.resume-box{border-radius:5px;padding:20px 30px;background-color:#fff}.resume-header{display:flex;justify-content:space-between;align-items:center}.resume-title{font-weight:700;font-size:18px;border-left:5px solid #00897B;padding-left:12px;line-height:17px}
+:root{--zIndex-dialog:9999;--default-bgc:#f2f4f7;--v-primary-base:#00897B;--v-error-base:#fe574a;--v-primary-lighten1:#26A69A;--v-primary-lighten2:#4DB6AC;--v-primary-lighten3:#80CBC4;--v-primary-lighten4:#B2DFDB;--default-text:#666}.buttons{height:36px;width:224px}.half-button{height:36px;width:88px}.default-width{width:1184px;min-width:1184px;max-width:1184px;margin:0 auto}.default-active{color:var(--v-primary-base) !important}.border-bottom-dashed{border-bottom:1px dashed #ccc}.white-bgc{background-color:#fff}.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vline{display:inline-block;width:1px;height:10px;vertical-align:middle;background-color:#e0e0e0;margin:0 10px}.resume-box{border-radius:5px;padding:20px 30px;background-color:#fff}.resume-header{display:flex;justify-content:space-between;align-items:center;height:36px}.resume-title{font-weight:700;font-size:18px;border-left:5px solid #00897B;padding-left:12px;line-height:17px}

src/styles/index.scss

@@ -62,6 +62,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 36px;
 }
 .resume-title {
   font-weight: 700;

src/views/resume/components/jobIntention.vue

@@ -1,11 +1,27 @@
 <template>
   <div class="resume-box">
-    <div class="resume-header mb-3">
+    <div class="resume-header mb-3" @mouseenter="showAddBtn = true" @mouseleave="showAddBtn = false">
       <div class="resume-title">{{ $t('resume.jobIntention') }}</div>
-      <v-btn v-if="!isEdit" variant="text" color="primary" prepend-icon="mdi-plus-box" @click="isEdit = true">{{ $t('common.add') }}</v-btn>
+      <v-btn v-if="showAddBtn" variant="text" color="primary" prepend-icon="mdi-plus-box" @click="isAdd = true" :disabled="isAdd">{{ $t('common.add') }}</v-btn>
     </div>
-    <div></div>
-    <div v-if="isEdit">
+    <div v-if="!isAdd">
+      <div class="position-item" v-for="(k, i) in positionList" :key="i" @mouseenter="k.active = true" @mouseleave="k.active = false">
+        <span>{{ k.name }}</span>
+        <span class="vline"></span>
+        <span>{{k.payFrom}}-{{k.payTo}}k</span>
+        <span class="vline"></span>
+        <span class="grey-text">{{ k.industryIds }}</span>
+        <span class="vline"></span>
+        <span class="grey-text">{{ k.areaName }}</span>
+        <span class="vline"></span>
+        <span class="grey-text">{{ k.jobType }}</span>
+        <span class="float-right" v-if="k.active">
+          <v-btn variant="text" color="primary" prepend-icon="mdi-square-edit-outline">{{ $t('common.edit') }}</v-btn>
+          <v-btn variant="text" color="primary" prepend-icon="mdi-trash-can-outline">{{ $t('common.delete') }}</v-btn>
+        </span>
+      </div>
+    </div>
+    <div v-if="isAdd">
       <CtForm :items="items" style="width: 100%;">
         <template #positionId="{ item }">
           <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
@@ -36,6 +52,10 @@
           </v-menu>
         </template>
       </CtForm>
+      <div class="text-end">
+        <v-btn class="half-button mr-3" variant="tonal" @click="isAdd = false">{{ $t('common.cancel') }}</v-btn>
+        <v-btn color="primary" class="half-button">{{ $t('common.save') }}</v-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -47,7 +67,8 @@ import textUI from '@/components/FormUI/TextInput'
 import jobTypeCard from '@/components/jobTypeCard'
 import industryTypeCard from '@/components/industryTypeCard'
 
-const isEdit = ref(true)
+const isAdd = ref(false)
+const showAddBtn = ref(false)
 
 const items = ref({
   options: [
@@ -131,6 +152,27 @@ const handleJobClickItem = (val) => {
 const handleIndustry = (list) => {
   console.log(list, 'industry')
 }
+
+const positionList = ref([
+  {
+    name: '前端开发工程师',
+    payFrom: 5,
+    payTo: 20,
+    industryIds: '行业不限',
+    areaName: '广州',
+    jobType: '全职',
+    active: false
+  },
+  {
+    name: '规控算法',
+    payFrom: 9,
+    payTo: 10,
+    industryIds: '医疗设备',
+    areaName: '广州',
+    jobType: '兼职',
+    active: false
+  }
+])
 </script>
 
 <style scoped lang="scss">
@@ -139,4 +181,13 @@ const handleIndustry = (list) => {
   top: 0;
   left: 0;
 }
+.position-item {
+  margin-bottom: 12px;
+  span {
+    font-size: 15px;
+  }
+  .grey-text {
+    color: #999;
+  }
+}
 </style>

src/views/resume/components/selfEvaluation.vue

@@ -4,7 +4,7 @@
       <div class="resume-title">{{ $t('resume.personalAdvantages') }}</div>
       <v-btn v-if="!isEdit" variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="isEdit = true">{{ $t('common.edit') }}</v-btn>
     </div>
-    <div v-if="isEdit" class="mt-5">
+    <div v-if="isEdit" class="mt-3">
       <v-textarea 
         v-model="advantage" 
         label="请输入您的个人优势..." 
@@ -20,7 +20,7 @@
         <v-btn color="primary" class="half-button" @click="handleSave">{{ $t('common.save') }}</v-btn>
       </div>
     </div>
-    <div v-else class="content-list mt-5">
+    <div v-else class="content-list mt-3">
       <div class="advantage" v-html="advantage"></div>
     </div>
   </div>