生成定制简历部分默认优化选项全选

This commit is contained in:
2026-07-06 18:58:16 +08:00
parent 6024ea27e9
commit 78bf7fbebc
8 changed files with 655 additions and 409 deletions
@@ -232,7 +232,7 @@
background: $btn-dark;
color: $bg-white;
border: none;
border-radius: 0.24rem;
border-radius: 0.08rem;
font-size: 0.15rem;
font-weight: 500;
cursor: pointer;
@@ -274,7 +274,6 @@
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.02rem;
}
@@ -282,34 +281,44 @@
display: flex;
align-items: center;
gap: 0.08rem;
font-size: 0.13rem;
color: $text-light;
font-size: 0.14rem;
font-weight: 600;
color: $text-middle;
}
&__step--active {
color: $text-dark;
font-weight: 600;
}
&__step-num {
width: 0.22rem;
height: 0.22rem;
width: 0.32rem;
height: 0.32rem;
border-radius: 50%;
background: $bg-main;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.11rem;
font-weight: 600;
font-size: 0.14rem;
font-weight: 450;
color: $text-middle;
line-height: 1;
}
&__step--active &__step-num {
background: $text-dark;
background: $accent;
color: $bg-white;
font-weight: 600;
}
// ==================== 差距分析头部 ====================
// 步骤之间的连接横线
&__step-line {
width: 0.935rem;
height: 0.02rem;
background: #E5E7EB;
margin: 0 0.16rem;
}
// ==================== 差距分析头部(新版) ====================
&__gap-header {
display: flex;
align-items: flex-start;
@@ -323,28 +332,24 @@
}
&__gap-title {
font-size: 0.2rem;
font-weight: 700;
font-size: 0.24rem;
font-weight: 630;
color: $text-dark;
margin: 0 0 0.1rem 0;
line-height: 1.3;
margin: 0 0 0.08rem 0;
line-height: 0.32rem;
}
&__gap-warn {
display: flex;
align-items: flex-start;
gap: 0.06rem;
font-size: 0.12rem;
color: $text-middle;
line-height: 1.5;
// 匹配度高亮文字(品牌色)
&__gap-title-highlight {
color: #FE6D52;
}
&__warn-icon {
width: 0.14rem;
height: 0.14rem;
flex-shrink: 0;
margin-top: 0.02rem;
&__gap-subtitle {
font-size: 0.14rem;
font-weight: 330;
color: $text-middle;
margin: 0;
line-height: 0.19rem;
}
&__gap-score-area {
@@ -355,170 +360,184 @@
margin-left: 0.2rem;
}
// ==================== 对比卡片表格 ====================
&__gap-table {
margin-bottom: 0.36rem;
// 匹配度分数圆环
&__score-circle {
position: relative;
width: 0.72rem;
height: 0.72rem;
display: flex;
align-items: center;
justify-content: center;
}
&__score-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__score-num {
font-size: 0.24rem;
font-weight: 630;
color: $accent;
position: relative;
z-index: 1;
}
// 匹配度标签(底部黑底白字)
&__score-tag {
font-size: 0.14rem;
font-weight: 330;
color: $bg-white;
background: $text-dark;
border-radius: 0.04rem;
padding: 0.02rem 0.08rem;
margin-top: -0.1rem;
line-height: 0.19rem;
}
// ==================== 通用区域标题 ====================
&__section {
margin-bottom: 0.28rem;
}
&__section-title {
font-size: 0.18rem;
font-weight: 600;
color: $text-dark;
margin: 0 0 0.16rem 0;
line-height: 0.24rem;
}
// ==================== 简历选择下拉框 ====================
&__resume-select-box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.12rem 0.16rem;
background: $bg-main;
border-radius: 0.12rem;
cursor: pointer;
position: relative;
width: 1.6rem;
}
&__resume-select-name {
font-size: 0.14rem;
font-weight: 600;
color: $text-middle;
line-height: 0.19rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__resume-select-arrow {
width: 0.14rem;
height: 0.14rem;
color: $text-middle;
flex-shrink: 0;
margin-left: 0.16rem;
}
// ==================== 岗位概览卡片 ====================
&__overview-card {
border: 1px solid #F0F0F0;
border-radius: 0.12rem;
padding: 0.16rem 0.2rem;
}
&__overview-title {
font-size: 0.14rem;
font-weight: 600;
color: $text-dark;
line-height: 0.19rem;
margin-bottom: 0.04rem;
}
&__overview-sub {
font-size: 0.14rem;
font-weight: 400;
color: $text-middle;
line-height: 0.19rem;
margin-bottom: 0.08rem;
}
&__overview-tags {
display: flex;
flex-wrap: wrap;
gap: 0.04rem;
}
&__overview-tag {
font-size: 0.12rem;
font-weight: 400;
color: $text-middle;
background: $bg-main;
border-radius: 0.04rem;
padding: 0.04rem 0.06rem;
line-height: 0.18rem;
}
// ==================== 差距分析列表 ====================
&__gap-list {
display: flex;
flex-direction: column;
gap: 0.06rem;
gap: 0.13rem;
}
&__gap-row {
display: flex;
gap: 0.06rem;
}
&__gap-cell {
flex: 1;
padding: 0.18rem 0.16rem;
font-size: 0.13rem;
color: $text-dark;
background: $bg-main;
border-radius: 0.08rem;
display: flex;
align-items: center;
min-height: 0.6rem;
}
&__gap-cell--label {
flex: 0 0 1.2rem;
font-weight: 600;
justify-content: flex-start;
}
&__gap-cell-title {
font-size: 0.18rem;
font-weight: 700;
}
// 关键词列横跨两列
&__gap-cell--keywords {
flex: 2.06;
}
// 概览行岗位信息
&__gap-job-info {
&__gap-item {
display: flex;
align-items: center;
padding: 0.16rem 0.2rem;
border: 1px solid #F0F0F0;
border-radius: 0.12rem;
gap: 0.12rem;
}
&__gap-company-icon {
width: 0.36rem;
height: 0.36rem;
border-radius: 0.06rem;
background: $bg-white;
// 序号圆圈
&__gap-item-num {
width: 0.32rem;
height: 0.32rem;
border-radius: 50%;
background: $accent;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
&__gap-company-logo {
width: 100%;
height: 100%;
border-radius: 0.06rem;
object-fit: cover;
}
&__gap-company-svg {
width: 0.2rem;
height: 0.2rem;
color: $text-dark;
}
&__gap-job-text {
display: flex;
flex-direction: column;
gap: 0.04rem;
}
&__gap-job-title {
font-size: 0.14rem;
font-weight: 600;
color: $text-dark;
line-height: 1.2;
}
&__gap-job-sub {
font-size: 0.11rem;
color: $text-light;
line-height: 1.2;
}
// 岗位名称/简历目标值
&__gap-value {
font-size: 0.14rem;
font-weight: 500;
color: $text-dark;
}
// ==================== 简历选择器 ====================
&__resume-selector {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
position: relative;
}
&__resume-info {
display: flex;
align-items: center;
gap: 0.1rem;
}
&__resume-file-icon {
width: 0.2rem;
height: 0.2rem;
color: $text-dark;
flex-shrink: 0;
}
&__resume-text {
display: flex;
flex-direction: column;
gap: 0.02rem;
}
&__resume-label {
font-size: 0.1rem;
color: $text-light;
line-height: 1.2;
}
&__resume-name {
font-size: 0.12rem;
color: $text-dark;
font-weight: 500;
line-height: 1.2;
}
&__resume-select-btn {
display: flex;
align-items: center;
gap: 0.04rem;
background: $bg-white;
border: 1px solid $border-color;
border-radius: 0.14rem;
padding: 0.05rem 0.12rem;
font-size: 0.11rem;
color: $text-dark;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
&:hover {
border-color: $accent;
color: $accent;
span {
font-size: 0.14rem;
font-weight: 600;
color: $bg-white;
line-height: 0.19rem;
}
}
&__dropdown-arrow {
width: 0.1rem;
height: 0.1rem;
&__gap-item-content {
flex: 1;
min-width: 0;
}
&__gap-item-title {
font-size: 0.14rem;
font-weight: 520;
color: $text-dark;
line-height: 0.19rem;
margin-bottom: 0.04rem;
}
&__gap-item-desc {
font-size: 0.14rem;
font-weight: 330;
color: $text-middle;
line-height: 0.19rem;
}
// ==================== 简历下拉选项(通用) ====================
&__resume-dropdown {
position: absolute;
top: 100%;
@@ -551,67 +570,80 @@
background: $theme-color;
}
// ==================== 岗位关键词标签 ====================
&__gap-keywords {
// ==================== 步骤三:定制简历(v2 新版上下布局) ====================
// 定制简历整体容器(纵向布局)
&__custom-v2 {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 0.32rem;
}
// 每个区块
&__custom-section {
display: flex;
flex-direction: column;
gap: 0.16rem;
}
// 区块头部(标题+描述)
&__custom-section-header {
display: flex;
flex-direction: column;
gap: 0.08rem;
}
&__gap-kw-tag {
font-size: 0.12rem;
background: $text-middle;
color: $bg-white;
border-radius: 0.04rem;
padding: 0.04rem 0.12rem;
line-height: 1.2;
// 区块标题
&__custom-section-title {
font-size: 0.18rem;
font-weight: 600;
color: #101828;
margin: 0;
line-height: 0.24rem;
}
// ==================== 步骤三:定制简历 ====================
// 定制简历左右两栏布局
&__custom {
display: flex;
gap: 0.16rem;
height: 100%;
// 区块描述
&__custom-section-desc {
font-size: 0.14rem;
font-weight: 400;
color: #99A1AF;
margin: 0;
line-height: 0.19rem;
}
// 左右面板
&__custom-panel {
flex: 1;
background: $bg-main;
border-radius: 0.12rem;
padding: 0.28rem 0.24rem;
overflow: hidden;
}
// 面板标题
&__custom-panel-title {
font-size: 0.17rem;
font-weight: 700;
color: $text-dark;
margin: 0 0 0.24rem 0;
line-height: 1.2;
}
// 选项列表
&__custom-options {
// 卡片选项列表
&__custom-cards {
display: flex;
flex-direction: column;
gap: 0.2rem;
gap: 0.13rem;
}
// 单个复选框行
&__custom-checkbox {
// 单个选项卡片
&__custom-card {
display: flex;
align-items: center;
padding: 0.16rem 0.2rem;
gap: 0.1rem;
border: 1px solid #F0F0F0;
border-radius: 0.12rem;
cursor: pointer;
position: relative;
transition: all 0.2s;
background: $bg-white;
&:hover {
border-color: transparent;
background: #F3F4F6;
}
}
// 选中态:无背景填充,仅品牌色边框
&__custom-card--checked {
border-color: #52CAD1;
background: $bg-white;
}
// 隐藏原生 checkbox
&__custom-input {
&__custom-card-input {
position: absolute;
opacity: 0;
width: 0;
@@ -619,63 +651,91 @@
pointer-events: none;
}
// 自定义复选框样式
&__custom-checkmark {
width: 0.18rem;
height: 0.18rem;
border: 1.5px solid $border-color;
border-radius: 0.04rem;
// 圆形复选框容器
&__custom-card-check {
width: 0.2rem;
height: 0.2rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
background: $bg-white;
}
// 选中态
&__custom-input:checked + &__custom-checkmark {
background: $accent;
border-color: $accent;
// 圆形复选框SVG
&__custom-card-check-svg {
width: 0.2rem;
height: 0.2rem;
}
&::after {
content: '';
display: block;
width: 0.05rem;
height: 0.09rem;
border: solid $bg-white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -0.04rem;
// 文字内容区域
&__custom-card-text {
display: flex;
align-items: center;
gap: 0.12rem;
flex: 1;
min-width: 0;
}
// 选项主文字(加粗)
&__custom-card-label {
font-size: 0.14rem;
font-weight: 600;
color: #1A1A1A;
line-height: 0.19rem;
white-space: nowrap;
}
// 选项说明文字(灰色小字)
&__custom-card-tip {
font-size: 0.12rem;
font-weight: 400;
color: #6A7282;
line-height: 0.16rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// ==================== 底部双按钮布局(上一步 + 下一步) ====================
&__footer-btns {
display: flex;
align-items: center;
gap: 0.24rem;
}
// 上一步按钮(品牌色边框 + 品牌色文字)
&__prev-btn {
flex: 1;
height: 0.45rem;
background: $bg-white;
border: 1px solid #52CAD1;
border-radius: 0.12rem;
font-size: 0.14rem;
font-weight: 600;
color: #52CAD1;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #F6FCFC;
}
}
// 选项文字
&__custom-label {
// 下一步按钮(品牌色填充 + 白色文字
&__next-btn {
flex: 1;
height: 0.45rem;
background: #52CAD1;
border: none;
border-radius: 0.12rem;
font-size: 0.14rem;
color: $text-dark;
line-height: 1.2;
user-select: none;
}
// 问号提示触发器
&__custom-tooltip-trigger {
display: flex;
align-items: center;
margin-left: 0.04rem;
//cursor: help;
font-weight: 600;
color: $bg-white;
cursor: pointer;
}
// 问号图标
&__custom-tooltip-icon {
width: 0.15rem;
height: 0.15rem;
color: $text-light;
transition: color 0.2s;
transition: background 0.2s;
&:hover {
color: $text-middle;
background: #47b8bf;
}
}
@@ -704,7 +764,6 @@
align-items: center;
gap: 0.12rem;
padding: 0.2rem 0.1rem;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
@@ -731,23 +790,75 @@
}
// ==================== 步骤四:返回按钮 ====================
&__back-btn {
// 顶部下载简历按钮区域
&__top-download {
position: absolute;
top: 0.7rem;
left: 0.2rem;
z-index: 5;
}
&__top-download-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.04rem;
width: 1.04rem;
height: 0.36rem;
background: $bg-white;
border: 1px solid $border-color;
border-radius: 0.2rem;
padding: 0.06rem 0.2rem;
border: 1px solid #52CAD1;
border-radius: 0.08rem;
font-size: 0.13rem;
color: $text-dark;
font-weight: 500;
color: #52CAD1;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #F6FCFC;
}
}
&__top-download-icon {
width: 0.14rem;
height: 0.14rem;
flex-shrink: 0;
}
// 顶部下载下拉菜单(向下弹出)
&__top-download-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 0.06rem;
width: 1.04rem;
background: $bg-white;
border: 1px solid $border-color;
border-radius: 0.08rem;
box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.1);
overflow: hidden;
z-index: 10;
}
&__top-download-option {
display: block;
width: 100%;
padding: 0.1rem 0;
font-size: 0.12rem;
color: $text-dark;
background: none;
border: none;
cursor: pointer;
text-align: center;
transition: background 0.15s;
&:hover {
background: $bg-main;
}
& + & {
border-top: 1px solid $border-color;
}
}
// ==================== 步骤四:预览布局 ====================
@@ -1217,6 +1328,24 @@
}
}
// 步骤三底部:上一步按钮(品牌色边框样式)
&__footer-prev-btn {
flex: 1;
height: 0.48rem;
background: $bg-white;
border: 1px solid #52CAD1;
border-radius: 0.08rem;
font-size: 0.15rem;
font-weight: 500;
color: #52CAD1;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #F6FCFC;
}
}
// 立即去投递按钮
&__submit-btn {
flex: 1;
@@ -1224,7 +1353,7 @@
background: $btn-dark;
color: $bg-white;
border: none;
border-radius: 0.24rem;
border-radius: 0.08rem;
font-size: 0.15rem;
font-weight: 500;
cursor: pointer;
@@ -24,7 +24,7 @@
}
&__tab-item {
font-size: 0.14rem;
font-size: 0.18rem;
color: $text-middle;
cursor: pointer;
padding-bottom: 0.06rem;
@@ -86,7 +86,7 @@
}
&__card-title {
font-size: 0.16rem;
font-size: 0.20rem;
font-weight: 700;
color: $text-dark;
margin: 0;
+16 -3
View File
@@ -638,8 +638,12 @@
background: #FBFDF7;
}
&--medium {
background: #FFFBF5;
}
&--low {
background: #FBFDF7;
background: #FFF6F5;
}
}
@@ -686,13 +690,22 @@
color: #9FD051;
}
// 中匹配度颜色
&__job-match--medium &__match-score {
color: #F59E0B;
}
&__job-match--medium &__match-level {
color: #F59E0B;
}
// 低匹配度颜色
&__job-match--low &__match-score {
color: #9FD051;
color: #FE6D52;
}
&__job-match--low &__match-level {
color: #9FD051;
color: #FE6D52;
}
// 未登录锁定态