xuxin
1267 lines
23 KiB
SCSS
1267 lines
23 KiB
SCSS
@use 'sass:color';
|
|
@use '../variables' as *;
|
|
|
|
// ==================== 求职助手页面样式 ====================
|
|
.agent-page {
|
|
min-height: 100vh;
|
|
background: $bg-main;
|
|
font-size: 0.14rem;
|
|
// 主内容区域（左侧导航栏右边的部分）
|
|
&__content {
|
|
margin-left: 2rem;
|
|
flex: 1;
|
|
padding: 0.3rem 0.4rem;
|
|
overflow-y: auto;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// ==================== 顶部步骤导航条 ====================
|
|
&__steps {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.06rem;
|
|
margin-bottom: 0.36rem;
|
|
}
|
|
|
|
// 单个步骤项
|
|
&__step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.06rem;
|
|
padding: 0.06rem 0.14rem;
|
|
border-radius: 0.2rem;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
user-select: none;
|
|
|
|
// 激活态 — 品牌色背景白色文字
|
|
&--active {
|
|
background: $btn-dark;
|
|
|
|
.agent-page__step-number {
|
|
background: $bg-white;
|
|
color: $btn-dark;
|
|
}
|
|
|
|
.agent-page__step-label {
|
|
color: $bg-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 步骤序号圆圈
|
|
&__step-number {
|
|
width: 0.22rem;
|
|
height: 0.22rem;
|
|
border-radius: 50%;
|
|
background: $text-light;
|
|
color: $bg-white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.12rem;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
// 步骤文字标签
|
|
&__step-label {
|
|
font-size: 0.13rem;
|
|
color: $text-light;
|
|
white-space: nowrap;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
// 步骤间分隔箭头
|
|
&__step-arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
color: $text-light;
|
|
|
|
svg {
|
|
width: 0.14rem;
|
|
height: 0.14rem;
|
|
}
|
|
}
|
|
|
|
// ==================== 主体内容区域 — 左右两栏 ====================
|
|
&__main {
|
|
display: flex;
|
|
gap: 0.24rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
// 左侧说明引导区域
|
|
&__left {
|
|
width: 4.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// 右侧个人档案区域
|
|
&__right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
// ==================== 左侧引导卡片 ====================
|
|
&__intro-card {
|
|
background: $bg-white;
|
|
border-radius: 0.12rem;
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
// 卡片头部：图标 + 标题
|
|
&__intro-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.02rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
// 用户图标
|
|
&__intro-icon {
|
|
width: 0.20rem;
|
|
height: 0.20rem;
|
|
flex-shrink: 0;
|
|
color: $text-dark;
|
|
margin-top: 0.02rem;
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// 引导标题
|
|
&__intro-title {
|
|
font-size: 0.16rem;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
// 说明描述文字
|
|
&__intro-desc {
|
|
font-size: 0.13rem;
|
|
color: $text-light;
|
|
line-height: 1.7;
|
|
margin-bottom: 0.28rem;
|
|
}
|
|
|
|
// 导入个人资料行
|
|
&__import-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.1rem;
|
|
padding: 0.14rem 0.16rem;
|
|
background: $bg-main;
|
|
border-radius: 0.08rem;
|
|
margin-bottom: 0.28rem;
|
|
}
|
|
|
|
// 导入图标
|
|
&__import-icon {
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
color: $text-dark;
|
|
flex-shrink: 0;
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// 导入文字
|
|
&__import-text {
|
|
font-size: 0.13rem;
|
|
color: $text-dark;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// 确认并进入按钮
|
|
&__confirm-btn {
|
|
display: block;
|
|
width: 2rem;
|
|
height: 0.42rem;
|
|
background: $btn-dark;
|
|
color: $bg-white;
|
|
border: none;
|
|
border-radius: 0.21rem;
|
|
font-size: 0.14rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.25s ease;
|
|
line-height: 0.42rem;
|
|
text-align: center;
|
|
padding: 0;
|
|
|
|
&:hover {
|
|
background: $btn-dark-hover;
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
// ==================== 右侧个人档案包裹 ====================
|
|
&__profile-wrapper {
|
|
background: $bg-main;
|
|
border-radius: 0.12rem;
|
|
border: 1px solid $border-color;
|
|
padding: 0.24rem;
|
|
max-height: calc(100vh - 1.4rem);
|
|
overflow-y: auto;
|
|
|
|
// 自定义滚动条
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: $border-color;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// 个人档案标题
|
|
&__profile-title {
|
|
font-size: 0.15rem;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
margin-bottom: 0.16rem;
|
|
padding-bottom: 0.12rem;
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
|
|
// ==================== 第2步：确认目标 ====================
|
|
|
|
// 返回上一步按钮 — 位于每步容器左上角
|
|
&__back-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.04rem;
|
|
padding: 0.06rem 0.12rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: $text-middle;
|
|
font-size: 0.13rem;
|
|
cursor: pointer;
|
|
border-radius: 0.04rem;
|
|
transition: color 0.2s ease, background 0.2s ease;
|
|
|
|
&:hover {
|
|
color: $text-dark;
|
|
background: $bg-middle;
|
|
}
|
|
|
|
svg {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
// 第2步整体容器
|
|
&__step2 {
|
|
width: 100%;
|
|
max-width: 7rem;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
padding-top: 0.36rem;
|
|
}
|
|
|
|
// 对话区域
|
|
&__chat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
// 对话行：头像 + 文字
|
|
&__chat-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.04rem;
|
|
}
|
|
|
|
// 对话头像
|
|
&__chat-avatar {
|
|
width: 0.32rem;
|
|
height: 0.32rem;
|
|
border-radius: 50%;
|
|
background: $bg-main;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
color: $text-middle;
|
|
|
|
svg {
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
}
|
|
}
|
|
|
|
// 对话文字
|
|
&__chat-text {
|
|
font-size: 0.15rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
line-height: 0.32rem;
|
|
}
|
|
|
|
// 正在输入指示器
|
|
&__chat-typing {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.05rem;
|
|
background: $bg-main;
|
|
border-radius: 0.16rem;
|
|
padding: 0.1rem 0.06rem;
|
|
|
|
span {
|
|
width: 0.06rem;
|
|
height: 0.06rem;
|
|
border-radius: 50%;
|
|
background: $text-light;
|
|
animation: typingDot 1.4s infinite;
|
|
|
|
&:nth-child(2) { animation-delay: 0.2s; }
|
|
&:nth-child(3) { animation-delay: 0.4s; }
|
|
}
|
|
}
|
|
|
|
@keyframes typingDot {
|
|
0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
|
|
30% { opacity: 1; transform: scale(1.2); }
|
|
}
|
|
|
|
// ==================== 求职偏好卡片 ====================
|
|
&__pref-card {
|
|
background: $bg-main;
|
|
border-radius: 0.12rem;
|
|
padding: 0.24rem;
|
|
}
|
|
|
|
&__pref-desc {
|
|
font-size: 0.13rem;
|
|
color: $text-middle;
|
|
margin-bottom: 0.16rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
&__pref-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.08rem;
|
|
margin-bottom: 0.24rem;
|
|
}
|
|
|
|
&__pref-tag {
|
|
padding: 0.06rem 0.16rem;
|
|
background: $bg-white;
|
|
border-radius: 0.04rem;
|
|
font-size: 0.13rem;
|
|
color: $text-dark;
|
|
}
|
|
|
|
&__pref-actions {
|
|
display: flex;
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
&__pref-btn {
|
|
flex: 1;
|
|
height: 0.42rem;
|
|
border-radius: 0.21rem;
|
|
font-size: 0.14rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
border: none;
|
|
line-height: 0.42rem;
|
|
text-align: center;
|
|
padding: 0;
|
|
|
|
&--edit {
|
|
background: $border-color;
|
|
color: $text-dark;
|
|
|
|
&:hover { background: color.adjust($border-color, $lightness: -5%); }
|
|
}
|
|
|
|
&--confirm {
|
|
background: $btn-dark;
|
|
color: $bg-white;
|
|
|
|
&:hover { background: $btn-dark-hover; }
|
|
}
|
|
}
|
|
|
|
// ==================== 匹配岗位卡片 ====================
|
|
&__match-card {
|
|
background: $bg-main;
|
|
border-radius: 0.12rem;
|
|
padding: 0.24rem;
|
|
|
|
}
|
|
|
|
&__match-desc {
|
|
font-size: 0.13rem;
|
|
color: $text-dark;
|
|
font-weight: 500;
|
|
margin-bottom: 0.16rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
// 单个岗位项
|
|
&__match-item {
|
|
display: flex;
|
|
align-items: center;
|
|
background: $bg-white;
|
|
border-radius: 0.1rem;
|
|
padding: 0.16rem;
|
|
margin-bottom: 0.1rem;
|
|
|
|
&:last-of-type { margin-bottom: 0; }
|
|
}
|
|
|
|
&__match-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.12rem;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
// 公司图标
|
|
&__match-icon {
|
|
width: 0.36rem;
|
|
height: 0.36rem;
|
|
border-radius: 0.06rem;
|
|
background: $bg-main;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
color: $text-middle;
|
|
|
|
svg {
|
|
width: 0.2rem;
|
|
height: 0.2rem;
|
|
}
|
|
}
|
|
|
|
&__match-detail {
|
|
min-width: 0;
|
|
}
|
|
|
|
&__match-company {
|
|
font-size: 0.14rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
&__match-position {
|
|
font-size: 0.12rem;
|
|
color: $text-middle;
|
|
line-height: 1.4;
|
|
margin-bottom: 0.06rem;
|
|
}
|
|
|
|
&__match-tags {
|
|
display: flex;
|
|
gap: 0.06rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&__match-tag {
|
|
font-size: 0.11rem;
|
|
color: $text-middle;
|
|
background: $bg-main;
|
|
padding: 0.02rem 0.08rem;
|
|
border-radius: 0.03rem;
|
|
}
|
|
|
|
// 匹配度环形
|
|
&__match-score {
|
|
position: relative;
|
|
width: 0.44rem;
|
|
height: 0.44rem;
|
|
flex-shrink: 0;
|
|
margin: 0 0.16rem;
|
|
}
|
|
|
|
&__match-ring {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__match-score-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.11rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
}
|
|
|
|
// 点赞/踩按钮
|
|
&__match-feedback {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.06rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__match-fb-btn {
|
|
width: 0.3rem;
|
|
height: 0.3rem;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 0.06rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $text-light;
|
|
transition: all 0.2s ease;
|
|
padding: 0;
|
|
|
|
svg {
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
}
|
|
|
|
&:hover { color: $text-middle; }
|
|
|
|
&--active {
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
|
|
// 不满意反馈输入框
|
|
&__dislike-input {
|
|
margin-top: 0.12rem;
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 0.4rem;
|
|
border: 1px solid $border-color;
|
|
border-radius: 0.08rem;
|
|
padding: 0 0.14rem;
|
|
font-size: 0.13rem;
|
|
color: $text-dark;
|
|
background: $bg-white;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
|
|
&::placeholder { color: $text-light; }
|
|
&:focus { border-color: $text-middle; }
|
|
}
|
|
}
|
|
|
|
// 底部优化按钮
|
|
&__step2-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 0.08rem;
|
|
}
|
|
|
|
&__optimize-btn {
|
|
height: 0.44rem;
|
|
padding: 0 0.4rem;
|
|
background: $btn-dark;
|
|
color: $bg-white;
|
|
border: none;
|
|
border-radius: 0.22rem;
|
|
font-size: 0.14rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
line-height: 0.44rem;
|
|
|
|
&:hover { background: $btn-dark-hover; }
|
|
&:active { transform: scale(0.98); }
|
|
}
|
|
|
|
// ==================== 第3步：网申常见问题 ====================
|
|
|
|
// 第3步整体容器 — 左右两栏布局
|
|
&__step3 {
|
|
display: flex;
|
|
gap: 0.24rem;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
position: relative;
|
|
padding-top: 0.36rem;
|
|
}
|
|
|
|
// 右侧表单包裹
|
|
&__form-wrapper {
|
|
background: $bg-white;
|
|
border-radius: 0.12rem;
|
|
padding: 0.28rem;
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
// 表单标题
|
|
&__form-title {
|
|
font-size: 0.15rem;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
margin-bottom: 0.24rem;
|
|
padding-bottom: 0.12rem;
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
|
|
// 表单分组
|
|
&__form-group {
|
|
margin-bottom: 0.28rem;
|
|
|
|
&:last-child { margin-bottom: 0; }
|
|
}
|
|
|
|
// 表单标签
|
|
&__form-label {
|
|
font-size: 0.14rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
margin-bottom: 0.12rem;
|
|
text-align: center;
|
|
}
|
|
|
|
// 选项按钮行
|
|
&__form-options {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
// 单个选项按钮
|
|
&__form-option {
|
|
padding: 0.08rem 0.24rem;
|
|
border: 1px solid $border-color;
|
|
border-radius: 0.06rem;
|
|
background: $bg-white;
|
|
color: $text-dark;
|
|
font-size: 0.13rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
line-height: 1.4;
|
|
|
|
&:hover {
|
|
border-color: $text-middle;
|
|
}
|
|
|
|
// 选中态
|
|
&--active {
|
|
background: $btn-dark;
|
|
color: $bg-white;
|
|
border-color: $btn-dark;
|
|
}
|
|
}
|
|
|
|
// 下拉选择器行
|
|
&__form-selects {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
// 统一下拉选择器样式覆盖
|
|
&__form-select {
|
|
width: 1.4rem;
|
|
|
|
// 覆盖 Element Plus 选择器样式以匹配页面风格
|
|
:deep(.el-input__wrapper) {
|
|
border-radius: 0.2rem;
|
|
box-shadow: none;
|
|
border: 1px solid $border-color;
|
|
padding: 0.02rem 0.12rem;
|
|
background: $bg-white;
|
|
transition: border-color 0.2s ease;
|
|
|
|
&:hover,
|
|
&.is-focus {
|
|
border-color: $accent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
font-size: 0.13rem;
|
|
color: $text-dark;
|
|
text-align: center;
|
|
|
|
&::placeholder {
|
|
color: $text-light;
|
|
}
|
|
}
|
|
|
|
:deep(.el-input__suffix) {
|
|
color: $text-light;
|
|
}
|
|
}
|
|
|
|
// ==================== 第3步下半部分：插件安装 ====================
|
|
|
|
// 安装步骤说明文字
|
|
&__install-steps {
|
|
font-size: 0.13rem;
|
|
color: $text-middle;
|
|
line-height: 1.8;
|
|
margin-bottom: 0.28rem;
|
|
|
|
p { margin: 0; }
|
|
}
|
|
|
|
// 插件区域
|
|
&__plugin-section {
|
|
text-align: center;
|
|
padding: 0.2rem 0;
|
|
}
|
|
|
|
// 插件标题
|
|
&__plugin-title {
|
|
font-size: 0.18rem;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
margin-bottom: 0.24rem;
|
|
}
|
|
|
|
// 浏览器按钮行
|
|
&__browser-btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
// 单个浏览器按钮
|
|
&__browser-btn {
|
|
padding: 0.08rem 0.2rem;
|
|
border: 1px solid $border-color;
|
|
border-radius: 0.06rem;
|
|
background: $bg-white;
|
|
color: $text-dark;
|
|
font-size: 0.13rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
border-color: $accent;
|
|
color: $accent;
|
|
}
|
|
}
|
|
|
|
// 指引图片幻灯片
|
|
&__guide-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 0.08rem;
|
|
}
|
|
}
|
|
|
|
// ==================== 设置完成页 ====================
|
|
|
|
// 完成页容器 — 居中布局
|
|
&__complete {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
// 完成页占位图标
|
|
&__complete-icon {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
margin-bottom: 0.32rem;
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// 完成页标题
|
|
&__complete-title {
|
|
font-size: 0.2rem;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
margin: 0 0 0.12rem;
|
|
}
|
|
|
|
// 完成页描述
|
|
&__complete-desc {
|
|
font-size: 0.14rem;
|
|
color: $text-middle;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
// 启用按钮
|
|
&__complete-btn {
|
|
padding: 0.12rem 0.36rem;
|
|
background: $btn-dark;
|
|
color: $bg-white;
|
|
border: none;
|
|
border-radius: 0.24rem;
|
|
font-size: 0.15rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
|
|
&:hover { background: $btn-dark-hover; }
|
|
&:active { transform: scale(0.98); }
|
|
}
|
|
}
|
|
|
|
|
|
// ==================== 求职助手正式内容区域 ====================
|
|
.agent-main {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
// 有右侧面板时取消居中
|
|
&--with-panel {
|
|
//justify-content: flex-start;
|
|
}
|
|
|
|
// 左侧主区域
|
|
&__left {
|
|
flex: 1;
|
|
height: calc(100vh - 0.6rem);
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 8rem;
|
|
}
|
|
|
|
// 右侧匹配岗位面板
|
|
&__right {
|
|
flex: 1;
|
|
height: calc(100vh - 0.6rem);
|
|
margin-left: 0.2rem;
|
|
max-width: 8rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// 右侧简历预览容器
|
|
&__right-resume {
|
|
background: $bg-white;
|
|
border-radius: 0.12rem;
|
|
padding: 0.24rem;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
|
|
// 自定义滚动条
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: $border-color;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// ==================== 顶部固定设置栏 ====================
|
|
&__top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.1rem;
|
|
padding: 0.12rem 0.16rem;
|
|
background: $bg-white;
|
|
border-radius: 0.1rem;
|
|
flex-shrink: 0;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
// 用户头像
|
|
&__avatar {
|
|
width: 0.3rem;
|
|
height: 0.3rem;
|
|
border-radius: 50%;
|
|
background: $bg-main;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
color: $text-middle;
|
|
|
|
svg {
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
}
|
|
}
|
|
|
|
// 状态标签
|
|
&__status-tag {
|
|
font-size: 0.12rem;
|
|
color: $accent;
|
|
background: rgba(79, 194, 201, 0.1);
|
|
padding: 0.03rem 0.1rem;
|
|
border-radius: 0.04rem;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// 状态提示文字
|
|
&__status-text {
|
|
font-size: 0.12rem;
|
|
color: $text-middle;
|
|
flex: 1;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
// 开始按钮
|
|
&__start-btn {
|
|
height: 0.3rem;
|
|
padding: 0 0.14rem;
|
|
background: $text-dark;
|
|
color: $bg-white;
|
|
border: none;
|
|
border-radius: 0.15rem;
|
|
font-size: 0.12rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
line-height: 0.3rem;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
|
|
&:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
&:disabled {
|
|
background: $text-light;
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
// 右侧工具按钮区
|
|
&__tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.06rem;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
// 待投递列表下拉弹窗
|
|
&__task-dropdown {
|
|
position: absolute;
|
|
top: 0.36rem;
|
|
right: 0;
|
|
width: 5.1rem;
|
|
background: $bg-white;
|
|
border-radius: 0.12rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
|
z-index: 100;
|
|
padding: 0.16rem;
|
|
}
|
|
|
|
// Tab 切换
|
|
&__task-tabs {
|
|
display: flex;
|
|
gap: 0.2rem;
|
|
margin-bottom: 0.14rem;
|
|
border-bottom: 1px solid $border-color;
|
|
padding-bottom: 0.1rem;
|
|
}
|
|
|
|
&__task-tab {
|
|
font-size: 0.14rem;
|
|
color: $text-middle;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
|
|
&--active {
|
|
color: $text-dark;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
// 列表区域
|
|
&__task-list {
|
|
max-height: 2.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&__task-empty {
|
|
font-size: 0.12rem;
|
|
color: $text-light;
|
|
text-align: center;
|
|
padding: 0.2rem 0;
|
|
}
|
|
|
|
// 单个岗位项
|
|
&__task-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.1rem 0;
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
&__task-item-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.08rem;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
&__task-item-name {
|
|
font-size: 0.13rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&__task-item-tag {
|
|
font-size: 0.11rem;
|
|
color: $bg-white;
|
|
background: $text-middle;
|
|
padding: 0.02rem 0.08rem;
|
|
border-radius: 0.03rem;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__task-item-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.08rem;
|
|
flex-shrink: 0;
|
|
margin-left: 0.1rem;
|
|
}
|
|
|
|
&__task-item-status {
|
|
font-size: 0.12rem;
|
|
color: $text-middle;
|
|
|
|
&--done {
|
|
color: $accent;
|
|
}
|
|
}
|
|
|
|
&__task-item-remove {
|
|
font-size: 0.16rem;
|
|
color: $text-light;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
|
|
&:hover {
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
|
|
// 查看全部按钮
|
|
&__task-view-all {
|
|
text-align: center;
|
|
font-size: 0.13rem;
|
|
color: $text-middle;
|
|
padding: 0.1rem 0 0;
|
|
margin-top: 0.1rem;
|
|
border-top: 1px solid $border-color;
|
|
cursor: pointer;
|
|
background: $bg-main;
|
|
border-radius: 0.06rem;
|
|
padding: 0.08rem;
|
|
|
|
&:hover {
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
|
|
// 工具按钮
|
|
&__tool-btn {
|
|
width: 0.38rem;
|
|
height: 0.28rem;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $text-middle;
|
|
border-radius: 0.06rem;
|
|
transition: all 0.2s ease;
|
|
font-weight: 600;
|
|
|
|
|
|
svg {
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
}
|
|
|
|
&:hover {
|
|
background: $bg-main;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
|
|
// ==================== 中间聊天记录区域 ====================
|
|
&__chat-area {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0.16rem 0.1rem;
|
|
margin-bottom: 0.1rem;
|
|
|
|
// 自定义滚动条
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: $border-color;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// ==================== 对话消息样式 ====================
|
|
|
|
// 对话行
|
|
&__chat-row {
|
|
margin-bottom: 0.14rem;
|
|
|
|
// 用户消息 — 右对齐
|
|
&--user {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
// 对话气泡
|
|
&__chat-bubble {
|
|
display: inline-block;
|
|
max-width: 85%;
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
line-height: 1.7;
|
|
padding: 0.1rem 0.16rem;
|
|
border-radius: 0.1rem;
|
|
background: $bg-white;
|
|
word-break: break-word;
|
|
|
|
// 用户消息气泡 — 深色背景
|
|
&--user {
|
|
background: $bg-main;
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
// AI 思考中的加载气泡
|
|
&--loading {
|
|
color: $text-middle;
|
|
font-style: italic;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.06rem;
|
|
}
|
|
}
|
|
|
|
// AI 思考中的转圈加载图标
|
|
&__loading-icon {
|
|
color: $accent;
|
|
font-size: 0.16rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
// ==================== 底部固定输入框 ====================
|
|
&__input-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.1rem;
|
|
padding: 0.12rem 0.16rem;
|
|
background: $bg-white;
|
|
border-radius: 0.1rem;
|
|
border: 1px solid $border-color;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// 输入框
|
|
&__input {
|
|
flex: 1;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 0.13rem;
|
|
color: $text-dark;
|
|
background: transparent;
|
|
line-height: 0.3rem;
|
|
|
|
&::placeholder {
|
|
color: $text-light;
|
|
}
|
|
}
|
|
|
|
// 发送按钮
|
|
&__send-btn {
|
|
width: 0.32rem;
|
|
height: 0.32rem;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $text-dark;
|
|
flex-shrink: 0;
|
|
transition: all 0.2s ease;
|
|
|
|
svg {
|
|
width: 0.2rem;
|
|
height: 0.2rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: $accent;
|
|
}
|
|
}
|
|
}
|