简历优化和岗位简历
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@@ -919,7 +919,6 @@
|
||||
}
|
||||
|
||||
&__ai-msg {
|
||||
margin-bottom: 0.1rem;
|
||||
display: flex;
|
||||
|
||||
&--ai {
|
||||
@@ -942,6 +941,7 @@
|
||||
&__ai-msg--ai &__ai-msg-bubble {
|
||||
background: $bg-main;
|
||||
color: $text-dark;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&__ai-msg--user &__ai-msg-bubble {
|
||||
@@ -949,6 +949,133 @@
|
||||
color: $bg-white;
|
||||
}
|
||||
|
||||
// AI正在思考中的加载气泡
|
||||
&__ai-msg-bubble--loading {
|
||||
color: $text-middle;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// 消息包裹容器（含撤销气泡）
|
||||
&__ai-msg-wrap {
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
// 撤销修改气泡区域
|
||||
&__ai-rollback {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0.06rem 0 0 0;
|
||||
}
|
||||
|
||||
// 撤销修改按钮
|
||||
&__ai-rollback-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 0.14rem;
|
||||
padding: 0.05rem 0.12rem;
|
||||
font-size: 0.11rem;
|
||||
color: $accent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $theme-color;
|
||||
border-color: $accent-hover;
|
||||
color: $accent-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// 撤销修改图标
|
||||
&__ai-rollback-icon {
|
||||
width: 0.13rem;
|
||||
height: 0.13rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 已撤销状态文字
|
||||
&__ai-rollback-done {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
font-size: 0.11rem;
|
||||
color: $text-middle;
|
||||
padding: 0.05rem 0.12rem;
|
||||
background: $bg-main;
|
||||
border-radius: 0.14rem;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
// ==================== 撤销确认弹窗 ====================
|
||||
&__rollback-confirm-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: $overlay-bg;
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__rollback-confirm {
|
||||
background: $bg-white;
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.32rem 0.36rem;
|
||||
min-width: 3.2rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&__rollback-confirm-text {
|
||||
font-size: 0.15rem;
|
||||
color: $text-dark;
|
||||
margin: 0 0 0.28rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__rollback-confirm-actions {
|
||||
display: flex;
|
||||
gap: 0.12rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__rollback-confirm-cancel {
|
||||
flex: 1;
|
||||
height: 0.4rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 0.14rem;
|
||||
color: $text-dark;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $bg-main;
|
||||
}
|
||||
}
|
||||
|
||||
&__rollback-confirm-ok {
|
||||
flex: 1;
|
||||
height: 0.4rem;
|
||||
background: $btn-dark;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 0.14rem;
|
||||
color: $bg-white;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $btn-dark-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// AI输入框区域
|
||||
&__ai-input-area {
|
||||
display: flex;
|
||||
@@ -1002,12 +1129,13 @@
|
||||
height: 0.16rem;
|
||||
}
|
||||
|
||||
// 编辑tab占位
|
||||
// 编辑tab内容区
|
||||
&__preview-edit {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ==================== 步骤四：底部按钮区 ====================
|
||||
|
||||
@@ -0,0 +1,366 @@
|
||||
@use '../variables' as *;
|
||||
@use 'sass:color';
|
||||
|
||||
// ==================== 定制简历编辑面板（折叠手风琴式） ====================
|
||||
.job-resume-edit {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 0.12rem 0;
|
||||
|
||||
// 单个折叠模块
|
||||
&__section {
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
// 模块标题栏（可点击展开/收起）
|
||||
&__section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.14rem 0.16rem;
|
||||
background: $bg-main;
|
||||
border-radius: 0.08rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: color.adjust($bg-main, $lightness: -2%);
|
||||
}
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
font-size: 0.14rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
// 展开/收起箭头
|
||||
&__section-arrow {
|
||||
width: 0.14rem;
|
||||
height: 0.14rem;
|
||||
color: $text-middle;
|
||||
transition: transform 0.25s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__section-arrow--open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
// 模块内容区（展开时显示）
|
||||
&__section-body {
|
||||
padding: 0.16rem 0.12rem 0.08rem;
|
||||
}
|
||||
|
||||
// 字段容器
|
||||
&__field {
|
||||
margin-bottom: 0.14rem;
|
||||
}
|
||||
|
||||
// 字段标签
|
||||
&__label {
|
||||
display: block;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
|
||||
// 输入框
|
||||
&__input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.08rem 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
color: $text-dark;
|
||||
background: $bg-main;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.06rem;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $accent;
|
||||
background: $bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
// 多行文本
|
||||
&__textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.08rem 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
color: $text-dark;
|
||||
background: $bg-main;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.06rem;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
line-height: 1.6;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $accent;
|
||||
background: $bg-white;
|
||||
}
|
||||
|
||||
// 带删除按钮时右侧留空
|
||||
&--with-remove {
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 横排字段
|
||||
&__row {
|
||||
display: flex;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
&__field--half {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// 经历卡片
|
||||
&__card {
|
||||
padding-bottom: 0.14rem;
|
||||
margin-bottom: 0.14rem;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 经历卡片头部
|
||||
&__card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
&__card-index {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__card-index-dot {
|
||||
width: 0.08rem;
|
||||
height: 0.08rem;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
// 删除按钮
|
||||
&__card-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.03rem;
|
||||
cursor: pointer;
|
||||
color: $text-light;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0.04rem;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $danger;
|
||||
background: rgba($danger, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-delete-icon {
|
||||
width: 0.13rem;
|
||||
height: 0.13rem;
|
||||
}
|
||||
|
||||
// 描述段落容器
|
||||
&__desc-item {
|
||||
position: relative;
|
||||
margin-bottom: 0.06rem;
|
||||
}
|
||||
|
||||
// 描述段落删除按钮
|
||||
&__desc-remove {
|
||||
position: absolute;
|
||||
right: 0.06rem;
|
||||
top: 0.06rem;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.02rem;
|
||||
cursor: pointer;
|
||||
color: $text-light;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0.03rem;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc-remove-icon {
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
}
|
||||
|
||||
// 新增按钮
|
||||
&__add-btn {
|
||||
text-align: center;
|
||||
background: none;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.16rem;
|
||||
padding: 0.04rem 0.12rem;
|
||||
font-size: 0.11rem;
|
||||
color: $text-dark;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: $accent;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__add-btn--full {
|
||||
width: 100%;
|
||||
margin-top: 0.06rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
&__add-icon {
|
||||
font-size: 0.12rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 技能/证书标签列表
|
||||
&__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.06rem;
|
||||
margin-bottom: 0.1rem;
|
||||
min-height: 0.3rem;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
padding: 0.04rem 0.08rem 0.04rem 0.1rem;
|
||||
background: $bg-main;
|
||||
border-radius: 0.12rem;
|
||||
font-size: 0.11rem;
|
||||
color: $text-dark;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: color.adjust($bg-main, $lightness: -3%);
|
||||
}
|
||||
}
|
||||
|
||||
&__tag-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.01rem;
|
||||
cursor: pointer;
|
||||
color: $text-light;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&__tag-remove-icon {
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
}
|
||||
|
||||
// 日期选择器样式覆盖
|
||||
&__date-picker {
|
||||
width: 100% !important;
|
||||
|
||||
.el-input__wrapper {
|
||||
background: $bg-main !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: none !important;
|
||||
padding: 3px 10px !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.5 !important;
|
||||
height: auto !important;
|
||||
|
||||
&:hover {
|
||||
border-color: $border-color !important;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: $accent !important;
|
||||
background: $bg-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 12px !important;
|
||||
color: $text-dark !important;
|
||||
height: auto !important;
|
||||
line-height: 1.5 !important;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-light !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__prefix,
|
||||
.el-input__suffix {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.el-input__icon {
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉选择器
|
||||
&__select {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.08rem 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
color: $text-dark;
|
||||
background: $bg-main;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.06rem;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: $accent;
|
||||
background: $bg-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -146,4 +146,12 @@
|
||||
&__skill-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// ==================== 差异对比高亮样式 ====================
|
||||
&__diff-highlight {
|
||||
background-color: #D4EDDA;
|
||||
color: #155724;
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,278 @@
|
||||
@use '../variables' as *;
|
||||
|
||||
// ==================== 简历分析报告抽屉 ====================
|
||||
|
||||
// 遮罩层
|
||||
.report-drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: $overlay-bg;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
// 遮罩层过渡动画
|
||||
.report-drawer-overlay-enter-active,
|
||||
.report-drawer-overlay-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.report-drawer-overlay-enter-from,
|
||||
.report-drawer-overlay-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 抽屉主体
|
||||
.report-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 8rem;
|
||||
height: 100vh;
|
||||
background: $bg-main;
|
||||
z-index: 2001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
|
||||
font-size: 0.14rem;
|
||||
|
||||
// ---- 顶部栏 ----
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.16rem 0.24rem;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background: $bg-white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $text-dark;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $bg-main;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 0.16rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__update-time {
|
||||
font-size: 0.12rem;
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
// ---- 可滚动内容区 ----
|
||||
&__body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.2rem 0.24rem;
|
||||
}
|
||||
|
||||
// ---- 评分概览 ----
|
||||
&__score-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: $bg-white;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.2rem 0.24rem;
|
||||
}
|
||||
|
||||
&__score-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
&__grade-avatar {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border-radius: 0.08rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $text-dark;
|
||||
font-size: 0.24rem;
|
||||
font-weight: 700;
|
||||
background: $bg-main;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__grade-badge {
|
||||
font-size: 0.12rem;
|
||||
font-weight: 600;
|
||||
color: $accent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
background: $theme-color;
|
||||
padding: 0.06rem 0.12rem;
|
||||
border-radius: 0.08rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__grade-dot {
|
||||
font-size: 0.06rem;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
&__score-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.28rem;
|
||||
}
|
||||
|
||||
&__score-item {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.02rem;
|
||||
}
|
||||
|
||||
&__score-num {
|
||||
font-size: 0.24rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__score-label {
|
||||
font-size: 0.1rem;
|
||||
color: $text-light;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ---- 评级提示语 ----
|
||||
&__grade-hint {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
line-height: 1.6;
|
||||
margin: 0.12rem 0 0.2rem 0;
|
||||
padding: 0 0.04rem;
|
||||
}
|
||||
|
||||
// ---- 结论 ----
|
||||
&__conclusion {
|
||||
margin-bottom: 0.24rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
font-size: 0.16rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin: 0 0 0.12rem 0;
|
||||
}
|
||||
|
||||
&__conclusion-text {
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// ---- 核心问题 ----
|
||||
&__issues {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
&__issue-card {
|
||||
background: $bg-white;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.2rem;
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
|
||||
&__issue-title {
|
||||
font-size: 0.14rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin: 0 0 0.08rem 0;
|
||||
}
|
||||
|
||||
&__issue-detail {
|
||||
font-size: 0.13rem;
|
||||
color: $text-middle;
|
||||
line-height: 1.8;
|
||||
margin: 0 0 0.14rem 0;
|
||||
}
|
||||
|
||||
&__issue-why-label {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
color: $text-dark;
|
||||
margin: 0 0 0.06rem 0;
|
||||
}
|
||||
|
||||
&__issue-importance {
|
||||
font-size: 0.13rem;
|
||||
color: $text-middle;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// ---- 底部按钮 ----
|
||||
&__footer {
|
||||
padding: 0.16rem 0.24rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: $bg-main;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&__optimize-btn {
|
||||
width: 2.4rem;
|
||||
padding: 0.12rem 0;
|
||||
font-size: 0.15rem;
|
||||
font-weight: 600;
|
||||
color: $bg-white;
|
||||
background: $btn-dark;
|
||||
border: none;
|
||||
border-radius: 0.24rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $btn-dark-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉滑入动画
|
||||
.report-drawer-slide-enter-active,
|
||||
.report-drawer-slide-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.report-drawer-slide-enter-from,
|
||||
.report-drawer-slide-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
@use '../variables' as *;
|
||||
|
||||
// ==================== 简历评估问题修复抽屉 ====================
|
||||
|
||||
// 遮罩层
|
||||
.fix-drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: $overlay-bg;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
// 遮罩层过渡动画
|
||||
.fix-drawer-overlay-enter-active,
|
||||
.fix-drawer-overlay-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.fix-drawer-overlay-enter-from,
|
||||
.fix-drawer-overlay-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 抽屉主体
|
||||
.fix-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 8rem;
|
||||
height: 100vh;
|
||||
background: $bg-main;
|
||||
z-index: 2001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
|
||||
font-size: 0.14rem;
|
||||
// ---- 顶部栏 ----
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
padding: 0.16rem 0.24rem;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background: $bg-white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $text-dark;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $bg-main;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 0.18rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// ---- 可滚动内容区 ----
|
||||
&__body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.2rem 0.24rem 0.4rem;
|
||||
}
|
||||
|
||||
// ---- 通用区块 ----
|
||||
&__section {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
font-size: 0.14rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin: 0 0 0.1rem 0;
|
||||
}
|
||||
|
||||
&__card {
|
||||
background: $bg-white;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
// ---- 原文 ----
|
||||
&__original-text {
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// ---- 问题检查 ----
|
||||
&__label {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin: 0.14rem 0 0.06rem 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// ---- AI 改进后的版本（差异高亮） ----
|
||||
&__diff-text {
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// 差异高亮样式 — 品牌色背景
|
||||
&__highlight {
|
||||
background-color: rgba($accent, 0.2);
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
// ---- 自己改写 ----
|
||||
&__textarea {
|
||||
width: 100%;
|
||||
min-height: 0.5rem;
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.8;
|
||||
border: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
outline: none;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
padding: 0.1rem 0;
|
||||
// 让 textarea 根据内容自动撑高
|
||||
field-sizing: content;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $text-light;
|
||||
}
|
||||
}
|
||||
|
||||
&__textarea-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
&__ai-btn {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 500;
|
||||
color: $bg-white;
|
||||
background: $btn-dark;
|
||||
border: none;
|
||||
border-radius: 0.16rem;
|
||||
padding: 0.06rem 0.2rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $btn-dark-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- AI 润色结果 ----
|
||||
&__polish-text {
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
padding: 0.08rem 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__replace-btn {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 500;
|
||||
color: $bg-white;
|
||||
background: $btn-dark;
|
||||
border: none;
|
||||
border-radius: 0.16rem;
|
||||
padding: 0.06rem 0.2rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $btn-dark-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 评价卡片（始终显示，独立盒子） ----
|
||||
&__feedback-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__feedback-label {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__feedback-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
&__feedback-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.03rem;
|
||||
font-size: 0.12rem;
|
||||
color: $text-light;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.03rem 0.06rem;
|
||||
border-radius: 0.04rem;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
// 选中态
|
||||
&--active {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__feedback-icon {
|
||||
width: 0.14rem;
|
||||
height: 0.14rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
// 无用按钮的图标翻转朝下
|
||||
&--down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 底部提交按钮 ----
|
||||
&__footer {
|
||||
padding: 0.16rem 0.24rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: $bg-main;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&__submit-btn {
|
||||
width: 2.4rem;
|
||||
padding: 0.12rem 0;
|
||||
font-size: 0.15rem;
|
||||
font-weight: 600;
|
||||
color: $bg-white;
|
||||
background: $btn-dark;
|
||||
border: none;
|
||||
border-radius: 0.24rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $btn-dark-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉滑入动画
|
||||
.fix-drawer-slide-enter-active,
|
||||
.fix-drawer-slide-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.fix-drawer-slide-enter-from,
|
||||
.fix-drawer-slide-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
@@ -24,6 +24,9 @@
|
||||
@use './components/region-selector.scss';
|
||||
@use './components/job-resume-custom-dialog.scss';
|
||||
@use './components/job-resume-template.scss';
|
||||
@use './components/job-resume-custom-edit-panel.scss';
|
||||
@use './components/resume-analysis-report-drawer.scss';
|
||||
@use './components/resume-issue-fix-drawer.scss';
|
||||
|
||||
// 全局样式（优先级最高）
|
||||
@use './auto.scss';
|
||||
@@ -56,9 +59,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== Element Plus Loading 品牌色覆盖 ====================
|
||||
.el-loading-spinner {
|
||||
.circular .path {
|
||||
stroke: #4FC2C9 !important;
|
||||
// ==================== Element Plus Loading rem 适配修正 + 品牌色覆盖 ====================
|
||||
.el-loading-mask {
|
||||
// 全屏 loading 遮罩层 z-index 确保最高
|
||||
z-index: 2100 !important;
|
||||
|
||||
.el-loading-spinner {
|
||||
// 修正 spinner 容器定位（默认 top: 50% + margin-top 用了 rem，会被 100px 放大）
|
||||
top: 50% !important;
|
||||
margin-top: -21px !important;
|
||||
width: 100% !important;
|
||||
|
||||
// 修正旋转圆圈尺寸
|
||||
.circular {
|
||||
width: 42px !important;
|
||||
height: 42px !important;
|
||||
|
||||
.path {
|
||||
stroke: #4FC2C9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 修正加载文字
|
||||
.el-loading-text {
|
||||
font-size: 14px !important;
|
||||
margin: 8px 0 !important;
|
||||
color: #4FC2C9 !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,6 +202,18 @@
|
||||
&:hover {
|
||||
background: $btn-dark-hover;
|
||||
}
|
||||
|
||||
// 开始诊断按钮 — 稍大一些，更醒目
|
||||
&--start {
|
||||
padding: 0.1rem 0.28rem;
|
||||
font-size: 0.14rem;
|
||||
border-radius: 0.08rem;
|
||||
background: $gradient-bg;
|
||||
|
||||
&:hover {
|
||||
background: $accent-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 简历主体 ----
|
||||
|
||||
Reference in New Issue
Block a user