|
|
@@ -4,18 +4,15 @@
|
|
|
<div class="resume-title">{{ $t('resume.basicInfo') }}</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 class="d-flex align-center">
|
|
|
+ <div class="d-flex align-start mt-5">
|
|
|
<!-- 头像 -->
|
|
|
<div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
|
|
|
<v-badge
|
|
|
bordered
|
|
|
- offset-x="-25"
|
|
|
- offset-y="33"
|
|
|
:color="baseInfo?.sex ? (baseInfo?.sex === '1' ? '#1867c0' : 'error') : 'error'"
|
|
|
:icon="baseInfo?.sex ? (baseInfo?.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'">
|
|
|
- <v-avatar size=80 :image="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)">
|
|
|
- </v-avatar>
|
|
|
- <div v-show="showIcon" @click="openFileInput" v-bind="$attrs" class="mdi mdi-camera-outline">
|
|
|
+ <v-img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" width="130" height="130" style="border-radius: 6px;"></v-img>
|
|
|
+ <div v-show="showIcon" @click="openFileInput" class="mdi mdi-camera-outline camera">
|
|
|
<input
|
|
|
type="file"
|
|
|
ref="fileInput"
|
|
|
@@ -27,9 +24,9 @@
|
|
|
</v-badge>
|
|
|
</div>
|
|
|
<!-- 基础信息 -->
|
|
|
- <div style="flex: 1;" class="mr-8 mt-5">
|
|
|
+ <div style="flex: 1;" class="mr-8">
|
|
|
<!-- 编辑 -->
|
|
|
- <div v-if="isEdit">
|
|
|
+ <div v-if="isEdit" class="ml-5">
|
|
|
<CtForm ref="CtFormRef" :items="items" style="width: 100%;">
|
|
|
<template v-slot:phone>
|
|
|
<v-btn variant="text" class="ml-2" color="primary">{{ $t('common.change') }}</v-btn>
|
|
|
@@ -42,9 +39,9 @@
|
|
|
</div>
|
|
|
<!-- 展示 -->
|
|
|
<div v-else>
|
|
|
- <span style="font-size: 20px; font-weight: 600;color: var(--color-666);">{{ baseInfo?.name || userInfo.phone }}</span>
|
|
|
+ <span class="ml-50" style="font-size: 20px; font-weight: 600;color: var(--color-666);">{{ baseInfo?.name || userInfo.phone }}</span>
|
|
|
<div class="mt-3 d-flex">
|
|
|
- <div class="listBox" :style="{ height: isExpand ? 'auto' : '68px' }">
|
|
|
+ <div class="listBox ml-50">
|
|
|
<div>
|
|
|
<span class="mdi mdi-map-marker-outline"></span>
|
|
|
<span>{{ baseInfo?.areaName || $t('common.currentlyUnavailable') }}</span>
|
|
|
@@ -65,10 +62,6 @@
|
|
|
<span class="mdi mdi-school-outline"></span>
|
|
|
<span>{{ baseInfo?.eduTypeText || $t('common.currentlyUnavailable') }}</span>
|
|
|
</div>
|
|
|
- <!-- <div>
|
|
|
- <span class="mdi mdi-briefcase-outline"></span>
|
|
|
- <span>{{ baseInfo?.jobTypeText || $t('common.currentlyUnavailable') }}</span>
|
|
|
- </div> -->
|
|
|
<div>
|
|
|
<span class="mdi mdi-tag-outline"></span>
|
|
|
<span>{{ baseInfo?.jobStatusText || $t('common.currentlyUnavailable') }}</span>
|
|
|
@@ -86,12 +79,8 @@
|
|
|
<span>{{ baseInfo?.firstWorkTimeText || $t('common.currentlyUnavailable') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="ml-3">
|
|
|
- <v-btn variant="text" color="primary" v-if="isExpand" @click="isExpand = false">{{ $t('resume.retract') }}</v-btn>
|
|
|
- <v-btn variant="text" color="primary" v-else @click="isExpand = true">{{ $t('resume.expand') }}</v-btn>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <div class="mt-4">
|
|
|
+ <div class="mt-4 ml-50">
|
|
|
<span style="font-size: 15px;">个人画像：</span>
|
|
|
<v-chip size="small" label v-for="(k, i) in welfareList.slice(0, 8)" :key="i" class="mr-2" color="primary">{{ k }}</v-chip>
|
|
|
</div>
|
|
|
@@ -124,7 +113,6 @@ const userStore = useUserStore()
|
|
|
const CtFormRef = ref()
|
|
|
const isEdit = ref(false)
|
|
|
const showIcon = ref(false)
|
|
|
-const isExpand = ref(false)
|
|
|
const overlay = ref(false) // 加载中
|
|
|
const welfareList = ref(['响应', '改变', '诚信', '进取精神', '信任', '卓越'])
|
|
|
let baseInfo = ref({})
|
|
|
@@ -263,13 +251,13 @@ const items = ref({
|
|
|
key: 'expType',
|
|
|
value: null,
|
|
|
default: null,
|
|
|
- label: '工作经验 *',
|
|
|
+ label: '工作年限 *',
|
|
|
col: 6,
|
|
|
outlined: true,
|
|
|
itemText: 'label',
|
|
|
itemValue: 'value',
|
|
|
dictTypeName: 'menduner_exp_type',
|
|
|
- rules: [v => !!v || '请选择工作经验'],
|
|
|
+ rules: [v => !!v || '请选择工作年限'],
|
|
|
items: []
|
|
|
},
|
|
|
{
|
|
|
@@ -462,27 +450,22 @@ getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
|
|
|
top: -22px;
|
|
|
left: 0;
|
|
|
}
|
|
|
+.ml-50 {
|
|
|
+ margin-left: 50px;
|
|
|
+}
|
|
|
.avatarsBox {
|
|
|
- height: 80px;
|
|
|
- width: 80px;
|
|
|
+ height: 150px;
|
|
|
+ width: 120px;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
- margin: 32px;
|
|
|
- margin-right: 40px;
|
|
|
- .img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .mdi {
|
|
|
- font-size: 42px;
|
|
|
+ margin: 0 32px;
|
|
|
+ .camera {
|
|
|
color: #fff;
|
|
|
- }
|
|
|
- div {
|
|
|
+ font-size: 42px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- border-radius: 50%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -490,11 +473,11 @@ getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap; /* 允许换行 */
|
|
|
width: 100%; /* 设置容器宽度 */
|
|
|
- // height: 68px;
|
|
|
overflow: hidden;
|
|
|
color: var(--color-666);
|
|
|
div {
|
|
|
- margin-right: 50px;
|
|
|
+ width: 50%;
|
|
|
+ margin-bottom: 10px;
|
|
|
span {
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
@@ -502,16 +485,7 @@ getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
|
|
|
.mdi {
|
|
|
font-size: 22px;
|
|
|
margin-right: 8px;
|
|
|
- // margin-top: 2px;
|
|
|
}
|
|
|
}
|
|
|
- // border: 1px solid red; /* 可视化边界 */
|
|
|
- // .jobItems {
|
|
|
- // font-size: 14px;
|
|
|
- // margin-left: 12px;
|
|
|
- // cursor: pointer;
|
|
|
- // color: var(--color-666);
|
|
|
- // font-family: 微软雅黑;
|
|
|
- // }
|
|
|
}
|
|
|
</style>
|
Xiao_123