个人优势

src/api/resume.js

@@ -0,0 +1,9 @@
+import request from '@/config/axios'
+
+// 保存个人优势
+export const saveResumeAdvantage = async (data) => {
+  return await request.post({
+    url: '/app-api/menduner/system/person/resume/save/advantage',
+    data
+  })
+}

src/styles/index.css

@@ -53,3 +53,23 @@
   background-color: #e0e0e0;
   margin: 0 10px;
 }
+
+.resume-box {
+  border-radius: 5px;
+  padding: 12px;
+  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;
+}

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}
+: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:12px;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}

src/styles/index.scss

@@ -50,4 +50,23 @@
   vertical-align: middle;
   background-color: #e0e0e0;
   margin: 0 10px;
+}
+
+// 个人简历
+.resume-box {
+  border-radius: 5px;
+  padding: 12px;
+  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;
 }

src/views/resume/components/selfEvaluation.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="resume-box">
+    <div class="resume-header">
+      <div class="resume-title">个人优势</div>
+      <v-btn v-if="!isEdit" variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="isEdit = true">编辑</v-btn>
+    </div>
+    <div v-if="isEdit" class="mt-5">
+      <v-textarea 
+        v-model="advantage" 
+        label="请输入您的个人优势..." 
+        variant="outlined" 
+        counter="200" 
+        bg-color="grey-lighten-5" 
+        color="primary" 
+        validate-on="input"
+        :rules="advantageRules"
+      ></v-textarea>
+      <div class="text-end">
+        <v-btn class="half-button mr-3" variant="tonal" @click="isEdit = false">取消</v-btn>
+        <v-btn color="primary" class="half-button" @click="handleSave">保存</v-btn>
+      </div>
+    </div>
+    <div v-else class="content-list mt-5">
+      <div class="advantage" v-html="advantage"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'selfEvaluation'})
+import { ref } from 'vue'
+// import { saveResumeAdvantage } from '@/api/resume'
+import Snackbar from '@/plugins/snackbar'
+
+const isEdit = ref(false)
+const advantage = ref('1、熟悉 Java  技术平台，并稳定形成生产力，CCF 中国计算机学会会员，获得微软 MCP、MCSA 认证。 2、熟悉通用缓存/DB /搜索引擎/消息队列等中间件。对业内高可用高并发及分布式技术解决方案有充分理解。3、同时具备常用大数据解决方案实践经验，包括实时计算（Storm/Flink ）及离线计算（Hive/ETL/Spark）。 4、对搜索推荐/订单交易等业务方向具备多年实践经验。')
+const advantageRules = ref([
+  value => {
+    if (value) return true
+    return '请输入您的个人优势'
+  },
+  value => {
+    if (value?.length <= 200) return true
+    return '请输入2-200个字符'
+  }
+])
+
+const handleSave = async () => {
+  if (!advantage.value) return Snackbar.warning('请先输入个人优势！')
+  // await saveResumeAdvantage({ content: advantage.value })
+  isEdit.value = false
+  // Snackbar.success('编辑成功')
+}
+</script>
+
+<style scoped lang="scss">
+.content-list {
+  white-space: pre-line;
+}
+.advantage {
+  color: #666;
+  font-size: 14px;
+}
+</style>

src/views/resume/dynamic/left.vue

@@ -2,7 +2,7 @@
   <div>
     <v-card class="mx-auto" max-width="300">
     <v-list>
-      <!-- <v-list-subheader>必填</v-list-subheader> -->
+      <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>
@@ -33,5 +33,9 @@ const items = [
 </script>
 
 <style scoped lang="scss">
-
+.title {
+  color: #333;
+  font-weight: 600;
+  font-size: 20px;
+}
 </style>

src/views/resume/dynamic/right.vue

@@ -1,22 +1,13 @@
 <template>
-  <div class="box">
-    <div class="avatarsBox">
-      132
-    </div>
+  <div>
+    <selfEvaluation></selfEvaluation>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'resume-right'})
+import selfEvaluation from '../components/selfEvaluation.vue'
 </script>
 
 <style scoped lang="scss">
-.box {
-  width: 100%;
-  background-color: #fff;
-  padding: 12px;
-  .avatarsBox {
-    height: 50px;
-  }
-}
 </style>

src/views/resume/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="default-width d-flex pt-3">
     <LeftPage class="left mr-3"></LeftPage>
-    <RightPage></RightPage>
+    <RightPage class="right"></RightPage>
   </div>
 </template>
 
@@ -15,4 +15,7 @@ import RightPage from './dynamic/right.vue'
 .left {
   width: 272px;
 }
+.right {
+  flex: 1;
+}
 </style>