1429 lines
27 KiB
SCSS
1429 lines
27 KiB
SCSS
@use '../variables' as *;
|
||
|
||
// ==================== 岗位专属简历定制弹窗 ====================
|
||
.job-resume-custom-dialog {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: var(--app-height, 100vh);
|
||
z-index: 2000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.14rem;
|
||
|
||
// 遮罩层
|
||
&__overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: $overlay-bg;
|
||
}
|
||
|
||
// 弹窗面板
|
||
&__panel {
|
||
position: relative;
|
||
background: $bg-white;
|
||
border-radius: 0.16rem;
|
||
width: 5.6rem;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
padding: 0.36rem 0.4rem;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 标题栏
|
||
&__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.28rem;
|
||
}
|
||
|
||
&__title {
|
||
font-size: 0.22rem;
|
||
font-weight: 700;
|
||
color: $text-dark;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
&__close-btn {
|
||
width: 0.3rem;
|
||
height: 0.3rem;
|
||
border: none;
|
||
background: none;
|
||
color: $text-dark;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: background 0.2s;
|
||
flex-shrink: 0;
|
||
|
||
&:hover {
|
||
background: $bg-main;
|
||
}
|
||
}
|
||
|
||
&__close-icon {
|
||
width: 0.16rem;
|
||
height: 0.16rem;
|
||
}
|
||
|
||
// 匹配度提示条
|
||
&__tip-bar {
|
||
background: $bg-main;
|
||
border-radius: 0.08rem;
|
||
padding: 0.14rem 0.2rem;
|
||
font-size: 0.13rem;
|
||
color: $text-middle;
|
||
text-align: center;
|
||
margin-bottom: 0.3rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
// 岗位信息卡片
|
||
&__job-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.3rem;
|
||
padding: 0 0.04rem;
|
||
}
|
||
|
||
&__job-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.14rem;
|
||
}
|
||
|
||
&__company-icon {
|
||
width: 0.44rem;
|
||
height: 0.44rem;
|
||
border-radius: 0.1rem;
|
||
background: $bg-main;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid $border-color;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__company-logo-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 0.1rem;
|
||
object-fit: cover;
|
||
}
|
||
|
||
&__company-svg {
|
||
width: 0.24rem;
|
||
height: 0.24rem;
|
||
color: $text-light;
|
||
}
|
||
|
||
&__job-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.04rem;
|
||
}
|
||
|
||
&__job-title {
|
||
font-size: 0.16rem;
|
||
font-weight: 600;
|
||
color: $text-dark;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
&__job-sub {
|
||
font-size: 0.12rem;
|
||
color: $text-light;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
// 匹配度分数
|
||
&__match-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__match-ring {
|
||
position: relative;
|
||
width: 0.56rem;
|
||
height: 0.56rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
&__ring-svg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&__match-score {
|
||
font-size: 0.18rem;
|
||
font-weight: 700;
|
||
color: #52CAD1;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
&__match-label {
|
||
font-size: 0.12rem;
|
||
color: $bg-white;
|
||
margin-top: 0.04rem;
|
||
background: $text-dark;
|
||
border-radius: 0.04rem;
|
||
padding: 0.02rem 0.08rem;
|
||
line-height: 0.16rem;
|
||
}
|
||
|
||
// 缺少技能区域
|
||
&__skills-section {
|
||
margin-bottom: 0.36rem;
|
||
padding: 0 0.04rem;
|
||
}
|
||
|
||
&__skills-title {
|
||
font-size: 0.15rem;
|
||
font-weight: 600;
|
||
color: $text-dark;
|
||
margin: 0 0 0.14rem 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
&__skills-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.1rem;
|
||
}
|
||
|
||
&__skill-tag {
|
||
font-size: 0.13rem;
|
||
color: $text-dark;
|
||
background: $bg-main;
|
||
border: 1px solid $border-color;
|
||
border-radius: 0.06rem;
|
||
padding: 0.07rem 0.18rem;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
// 底部按钮区域
|
||
&__footer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.14rem;
|
||
}
|
||
|
||
&__primary-btn {
|
||
width: 100%;
|
||
height: 0.48rem;
|
||
background: $btn-dark;
|
||
color: $bg-white;
|
||
border: none;
|
||
border-radius: 0.08rem;
|
||
font-size: 0.15rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
|
||
&:hover {
|
||
background: $btn-dark-hover;
|
||
}
|
||
}
|
||
|
||
&__skip-link {
|
||
font-size: 0.13rem;
|
||
color: $text-middle;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
transition: color 0.2s;
|
||
|
||
&:hover {
|
||
color: $text-dark;
|
||
}
|
||
}
|
||
|
||
// 占位内容（步骤3-4待开发）
|
||
&__placeholder {
|
||
font-size: 0.14rem;
|
||
color: $text-light;
|
||
text-align: center;
|
||
padding: 0.6rem 0;
|
||
}
|
||
|
||
// 标题栏占位（步骤2+用于左右对称布局）
|
||
&__header-placeholder {
|
||
width: 0.3rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// ==================== 步骤指示器 ====================
|
||
&__steps {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 0.02rem;
|
||
}
|
||
|
||
&__step {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.08rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 600;
|
||
color: $text-middle;
|
||
}
|
||
|
||
&__step--active {
|
||
color: $text-dark;
|
||
}
|
||
|
||
&__step-num {
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
border-radius: 50%;
|
||
background: $bg-main;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.14rem;
|
||
font-weight: 450;
|
||
color: $text-middle;
|
||
line-height: 1;
|
||
}
|
||
|
||
&__step--active &__step-num {
|
||
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;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.28rem;
|
||
}
|
||
|
||
&__gap-left {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
&__gap-title {
|
||
font-size: 0.24rem;
|
||
font-weight: 630;
|
||
color: $text-dark;
|
||
margin: 0 0 0.08rem 0;
|
||
line-height: 0.32rem;
|
||
}
|
||
|
||
// 匹配度高亮文字（品牌色）
|
||
&__gap-title-highlight {
|
||
color: #FE6D52;
|
||
}
|
||
|
||
&__gap-subtitle {
|
||
font-size: 0.14rem;
|
||
font-weight: 330;
|
||
color: $text-middle;
|
||
margin: 0;
|
||
line-height: 0.19rem;
|
||
}
|
||
|
||
&__gap-score-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
margin-left: 0.2rem;
|
||
}
|
||
|
||
// 匹配度分数圆环
|
||
&__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.13rem;
|
||
}
|
||
|
||
&__gap-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.16rem 0.2rem;
|
||
border: 1px solid #F0F0F0;
|
||
border-radius: 0.12rem;
|
||
gap: 0.12rem;
|
||
}
|
||
|
||
// 序号圆圈
|
||
&__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;
|
||
|
||
span {
|
||
font-size: 0.14rem;
|
||
font-weight: 600;
|
||
color: $bg-white;
|
||
line-height: 0.19rem;
|
||
}
|
||
}
|
||
|
||
&__gap-item-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
&__gap-item-title {
|
||
font-size: 0.14rem;
|
||
font-weight: 620;
|
||
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%;
|
||
right: 0;
|
||
margin-top: 0.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);
|
||
z-index: 10;
|
||
min-width: 1.6rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
&__resume-option {
|
||
padding: 0.1rem 0.14rem;
|
||
font-size: 0.12rem;
|
||
color: $text-dark;
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
|
||
&:hover {
|
||
background: $bg-main;
|
||
}
|
||
}
|
||
|
||
&__resume-option--active {
|
||
color: $accent;
|
||
font-weight: 500;
|
||
background: $theme-color;
|
||
}
|
||
|
||
// ==================== 步骤三：定制简历（v2 新版上下布局） ====================
|
||
|
||
// 定制简历整体容器（纵向布局）
|
||
&__custom-v2 {
|
||
display: flex;
|
||
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;
|
||
}
|
||
|
||
// 区块标题
|
||
&__custom-section-title {
|
||
font-size: 0.18rem;
|
||
font-weight: 600;
|
||
color: #101828;
|
||
margin: 0;
|
||
line-height: 0.24rem;
|
||
}
|
||
|
||
// 区块描述
|
||
&__custom-section-desc {
|
||
font-size: 0.14rem;
|
||
font-weight: 400;
|
||
color: #99A1AF;
|
||
margin: 0;
|
||
line-height: 0.19rem;
|
||
}
|
||
|
||
// 卡片选项列表
|
||
&__custom-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.13rem;
|
||
}
|
||
|
||
// 单个选项卡片
|
||
&__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;
|
||
transition: all 0.2s;
|
||
background: $bg-white;
|
||
|
||
&:hover {
|
||
border-color: transparent;
|
||
background: #F3F4F6;
|
||
}
|
||
}
|
||
|
||
// 选中态：无背景填充，仅品牌色边框
|
||
&__custom-card--checked {
|
||
border-color: #52CAD1;
|
||
background: $bg-white;
|
||
}
|
||
|
||
// 隐藏原生 checkbox
|
||
&__custom-card-input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
// 圆形复选框容器
|
||
&__custom-card-check {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
// 圆形复选框SVG
|
||
&__custom-card-check-svg {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
}
|
||
|
||
// 文字内容区域
|
||
&__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;
|
||
}
|
||
}
|
||
|
||
// 下一步按钮（品牌色填充 + 白色文字）
|
||
&__next-btn {
|
||
flex: 1;
|
||
height: 0.45rem;
|
||
background: #52CAD1;
|
||
border: none;
|
||
border-radius: 0.12rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 600;
|
||
color: $bg-white;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
|
||
&:hover {
|
||
background: #47b8bf;
|
||
}
|
||
}
|
||
|
||
// ==================== 抽屉模式（步骤2+） ====================
|
||
|
||
// 抽屉模式下，遮罩和布局调整为右侧对齐
|
||
&--drawer {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
// 右侧抽屉面板
|
||
&__drawer {
|
||
position: relative;
|
||
background: $bg-white;
|
||
width: 10.4rem;
|
||
height: var(--app-height, 100vh);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
animation: slideInRight 0.3s ease;
|
||
}
|
||
|
||
// 抽屉头部
|
||
&__drawer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.12rem;
|
||
padding: 0.2rem 0.1rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__drawer-title {
|
||
font-size: 0.15rem;
|
||
font-weight: 600;
|
||
color: $text-dark;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
// 抽屉内容区（可滚动）
|
||
&__drawer-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0.28rem 0.2rem;
|
||
}
|
||
|
||
// 抽屉底部按钮
|
||
&__drawer-footer {
|
||
padding: 0.2rem 0.32rem;
|
||
border-top: 1px solid $border-color;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// ==================== 步骤四：返回按钮 ====================
|
||
// 顶部下载简历按钮区域
|
||
&__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 #52CAD1;
|
||
border-radius: 0.08rem;
|
||
font-size: 0.13rem;
|
||
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;
|
||
}
|
||
}
|
||
|
||
// ==================== 步骤四：预览布局 ====================
|
||
&__preview {
|
||
display: flex;
|
||
height: 100%;
|
||
min-height: 0;
|
||
}
|
||
|
||
// 左侧简历预览区
|
||
&__preview-left {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
background: $bg-white;
|
||
border-bottom: 1px solid $border-color;
|
||
min-width: 0;
|
||
}
|
||
|
||
// 右侧AI帮写/编辑区
|
||
&__preview-right {
|
||
width: 3.6rem;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
|
||
// Tab 切换栏（胶囊风格）
|
||
&__preview-tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.09rem 0.16rem;
|
||
flex-shrink: 0;
|
||
gap: 0.12rem;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
&__preview-tab {
|
||
width: 1.48rem;
|
||
height: 0.4rem;
|
||
line-height: 0.4rem;
|
||
font-size: 0.16rem;
|
||
font-weight: 500;
|
||
color: $text-light;
|
||
background: none;
|
||
border: none;
|
||
border-radius: 0.28rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
text-align: center;
|
||
|
||
&--active {
|
||
color: $bg-white;
|
||
background: #52CAD1;
|
||
}
|
||
|
||
&:hover:not(&--active) {
|
||
color: $text-dark;
|
||
background: $bg-main;
|
||
}
|
||
}
|
||
|
||
// AI帮写内容区
|
||
&__preview-ai {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
background: $bg-white;
|
||
}
|
||
|
||
// 匹配度提升整体容器（左卡片+右圆环）
|
||
&__ai-congrats-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.12rem;
|
||
padding: 0.16rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 左侧绿色边框卡片
|
||
&__ai-congrats {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 0.16rem;
|
||
background: #F4FBFB;
|
||
border: 1px solid $accent;
|
||
border-radius: 0.12rem;
|
||
}
|
||
|
||
&__ai-congrats-title {
|
||
font-size: 0.14rem;
|
||
font-weight: 450;
|
||
color: $text-dark;
|
||
margin: 0;
|
||
line-height: 0.26rem;
|
||
}
|
||
|
||
// 分数加粗黑色
|
||
&__ai-congrats-bold {
|
||
font-weight: 700;
|
||
color: $accent;
|
||
font-size: 0.18rem;
|
||
}
|
||
|
||
// 右侧圆环+标签区域（卡片外面）
|
||
&__ai-congrats-score {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 改写说明区域（卡片外平铺）
|
||
&__ai-optimize-detail {
|
||
padding: 0 0.16rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__ai-optimize-subtitle {
|
||
font-size: 0.14rem;
|
||
font-weight: 600;
|
||
color: $text-light;
|
||
margin: 0 0 0.12rem 0;
|
||
line-height: 0.19rem;
|
||
}
|
||
|
||
&__ai-optimize-list {
|
||
margin: 0;
|
||
}
|
||
|
||
&__ai-optimize-item {
|
||
font-size: 0.14rem;
|
||
font-weight: 330;
|
||
color: $text-light;
|
||
margin: 0 0 0.08rem 0;
|
||
line-height: 0.22rem;
|
||
}
|
||
|
||
// 大号匹配度环（设计稿60x60，粗线圈）
|
||
&__match-ring--large {
|
||
width: 0.66rem;
|
||
height: 0.66rem;
|
||
}
|
||
|
||
// 匹配度分数文字
|
||
&__match-score {
|
||
font-size: 0.18rem;
|
||
font-weight: 700;
|
||
color: #52CAD1;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
// 高匹配标签（黑底白字圆角）
|
||
&__match-label--high {
|
||
background: $text-dark;
|
||
color: $bg-white;
|
||
font-size: 0.12rem;
|
||
font-weight: 400;
|
||
border-radius: 0.04rem;
|
||
padding: 0.02rem 0.08rem;
|
||
margin-top: -0.12rem;
|
||
line-height: 0.16rem;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
// 快捷操作按钮区（用户消息风格，右对齐）
|
||
&__ai-quick-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 0.08rem;
|
||
padding: 0.12rem 0.16rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 无左右padding的快捷操作（prl0类复写）
|
||
&__ai-quick-actions.prl0 {
|
||
padding-left: 0.16rem;
|
||
padding-right: 0.16rem;
|
||
}
|
||
|
||
&__ai-quick-btn {
|
||
background: #52CAD1;
|
||
border: none;
|
||
border-radius: 0.12rem 0.04rem 0.12rem 0.12rem;
|
||
padding: 0.08rem 0.12rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 305;
|
||
color: $bg-white;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
white-space: nowrap;
|
||
max-width: 2.38rem;
|
||
line-height: 0.24rem;
|
||
box-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.04);
|
||
|
||
&:hover {
|
||
background: #47b8bf;
|
||
}
|
||
}
|
||
|
||
// AI聊天消息区
|
||
&__ai-messages {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
min-height: 0;
|
||
}
|
||
|
||
&__ai-msg {
|
||
display: flex;
|
||
|
||
&--ai {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
&--user {
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
&__ai-msg-bubble {
|
||
border-radius: 0.12rem;
|
||
padding: 0.08rem 0.12rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 330;
|
||
line-height: 0.24rem;
|
||
max-width: 2.38rem;
|
||
}
|
||
|
||
// AI消息气泡（品牌色边框+阴影）
|
||
&__ai-msg--ai &__ai-msg-bubble {
|
||
background: $bg-white;
|
||
color: $text-dark;
|
||
border: 1px solid #AEE6EA;
|
||
box-shadow: 0 0.02rem 0.04rem rgba(82, 202, 209, 0.1);
|
||
border-radius: 0.04rem 0.12rem 0.12rem 0.12rem;
|
||
}
|
||
|
||
// 用户消息气泡（品牌色填充）
|
||
&__ai-msg--user &__ai-msg-bubble {
|
||
background: #52CAD1;
|
||
color: $bg-white;
|
||
border-radius: 0.12rem 0.04rem 0.12rem 0.12rem;
|
||
box-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
// AI正在思考中的加载气泡
|
||
&__ai-msg-bubble--loading {
|
||
color: $text-middle;
|
||
font-style: italic;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.06rem;
|
||
}
|
||
|
||
// AI思考中的转圈加载图标
|
||
&__ai-loading-icon {
|
||
color: $accent;
|
||
font-size: 0.16rem;
|
||
}
|
||
|
||
// 消息包裹容器（含撤销气泡）
|
||
&__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: 100%;
|
||
height: var(--app-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;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.08rem 0.12rem;
|
||
margin: 0.12rem 0.16rem;
|
||
gap: 0.08rem;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border: 1px solid #AEE6EA;
|
||
border-radius: 0.12rem;
|
||
backdrop-filter: blur(12px);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__ai-input {
|
||
flex: 1;
|
||
background: none;
|
||
border: none;
|
||
padding: 0.04rem 0;
|
||
font-size: 0.12rem;
|
||
color: $text-dark;
|
||
outline: none;
|
||
line-height: 0.15rem;
|
||
|
||
&::placeholder {
|
||
color: $text-middle;
|
||
}
|
||
}
|
||
|
||
&__ai-send-btn {
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
border-radius: 0.08rem;
|
||
background: #52CAD1;
|
||
border: none;
|
||
color: $bg-white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.2s;
|
||
flex-shrink: 0;
|
||
|
||
&:hover {
|
||
background: #47b8bf;
|
||
}
|
||
}
|
||
|
||
&__ai-send-icon {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
}
|
||
|
||
// 编辑tab内容区
|
||
&__preview-edit {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// ==================== 步骤四：底部按钮区 ====================
|
||
&__preview-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.2rem 0.32rem;
|
||
border-top: 1px solid $border-color;
|
||
flex-shrink: 0;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
// 下载简历按钮容器
|
||
&__download-wrap {
|
||
position: relative;
|
||
flex: 1;
|
||
}
|
||
|
||
&__download-btn {
|
||
width: 100%;
|
||
height: 0.48rem;
|
||
background: $bg-white;
|
||
color: $text-dark;
|
||
border: 1px solid $border-color;
|
||
border-radius: 0.24rem;
|
||
font-size: 0.15rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
background: $bg-main;
|
||
border-color: $text-middle;
|
||
}
|
||
}
|
||
|
||
// 下载下拉菜单（向上弹出）
|
||
&__download-menu {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
margin-bottom: 0.06rem;
|
||
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;
|
||
}
|
||
|
||
&__download-option {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 0.12rem 0;
|
||
font-size: 0.13rem;
|
||
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;
|
||
}
|
||
}
|
||
|
||
// 步骤三底部：上一步按钮（品牌色边框样式）
|
||
&__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;
|
||
height: 0.48rem;
|
||
background: $btn-dark;
|
||
color: $bg-white;
|
||
border: none;
|
||
border-radius: 0.08rem;
|
||
font-size: 0.15rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
|
||
&:hover {
|
||
background: $btn-dark-hover;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 右侧滑入动画
|
||
@keyframes slideInRight {
|
||
from {
|
||
transform: translateX(100%);
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
}
|
||
}
|