1390 lines
26 KiB
SCSS
1390 lines
26 KiB
SCSS
@use 'sass:color';
|
||
@use '../variables' as *;
|
||
|
||
// ==================== 求职助手页面样式 ====================
|
||
.agent-page {
|
||
min-height: var(--app-height, 100vh);
|
||
background: $bg-main;
|
||
font-size: 0.14rem;
|
||
// 主内容区域（左侧导航栏右边的部分）
|
||
&__content {
|
||
margin-left: 2rem;
|
||
flex: 1;
|
||
padding: 0.3rem 0.4rem;
|
||
overflow-y: auto;
|
||
height: var(--app-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: 3.0rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 右侧个人档案区域
|
||
&__right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
// ==================== 左侧引导卡片 ====================
|
||
&__intro-card {
|
||
background: $bg-white;
|
||
border-radius: 0.12rem;
|
||
padding: 0.38rem;
|
||
}
|
||
|
||
// 卡片头部：图标 + 标题
|
||
&__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;
|
||
max-height: calc(var(--app-height, 100vh) - 1.4rem);
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
scrollbar-width: none; // Firefox
|
||
-ms-overflow-style: none; // IE/Edge
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none; // Chrome/Safari
|
||
}
|
||
}
|
||
|
||
// 个人档案标题
|
||
&__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); }
|
||
}
|
||
|
||
// ==================== 第2步新增：求职偏好区域 ====================
|
||
&__pref-section {
|
||
background: $bg-white;
|
||
border-radius: 0.12rem;
|
||
padding: 0.24rem;
|
||
margin-bottom: 0.2rem;
|
||
border: 1px solid $border-color;
|
||
}
|
||
|
||
&__pref-section-title {
|
||
font-size: 0.18rem;
|
||
font-weight: 600;
|
||
color: $text-dark;
|
||
margin-bottom: 0.1rem;
|
||
}
|
||
|
||
&__pref-section-desc {
|
||
font-size: 0.13rem;
|
||
color: $text-middle;
|
||
margin-bottom: 0.16rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
&__pref-filters {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.1rem;
|
||
align-items: center;
|
||
}
|
||
|
||
&__pref-type-tag {
|
||
padding: 0.06rem 0.16rem;
|
||
background: $bg-main;
|
||
border-radius: 0.04rem;
|
||
font-size: 0.13rem;
|
||
color: $text-dark;
|
||
border: 1px solid $border-color;
|
||
cursor: default;
|
||
}
|
||
|
||
// 招聘分类下拉选择
|
||
&__pref-type-dropdown {
|
||
position: relative;
|
||
padding: 0.1rem 0.28rem;
|
||
background: #F5FAF9;
|
||
border-radius: 0.24rem;
|
||
font-size: 0.14rem;
|
||
color: $text-dark;
|
||
border: 1px solid $border-color;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.04rem;
|
||
min-width: 0.9rem;
|
||
height: 0.38rem;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
transition: border-color 0.2s ease;
|
||
|
||
&:hover { border-color: $accent; }
|
||
}
|
||
|
||
&__pref-type-arrow {
|
||
width: 0.12rem;
|
||
height: 0.12rem;
|
||
color: $text-middle;
|
||
}
|
||
|
||
&__pref-type-menu {
|
||
position: absolute;
|
||
top: calc(100% + 0.04rem);
|
||
left: 0;
|
||
min-width: 1.2rem;
|
||
background: $bg-white;
|
||
border: 1px solid $border-color;
|
||
border-radius: 0.06rem;
|
||
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1);
|
||
z-index: 10;
|
||
padding: 0.04rem 0;
|
||
}
|
||
|
||
&__pref-type-menu-item {
|
||
padding: 0.08rem 0.14rem;
|
||
font-size: 0.13rem;
|
||
color: $text-dark;
|
||
cursor: pointer;
|
||
transition: background 0.15s ease;
|
||
|
||
&:hover { background: $bg-main; }
|
||
|
||
&--active {
|
||
color: $accent;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
// ==================== 第2步新增：简历设置区域 ====================
|
||
&__resume-section {
|
||
background: $bg-white;
|
||
border-radius: 0.12rem;
|
||
padding: 0.24rem;
|
||
border: 1px solid $border-color;
|
||
}
|
||
|
||
&__resume-sub-label {
|
||
font-size: 0.13rem;
|
||
color: $text-middle;
|
||
margin-bottom: 0.12rem;
|
||
}
|
||
|
||
&__resume-select-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.1rem;
|
||
margin-bottom: 0.2rem;
|
||
padding: 0.1rem 0.14rem;
|
||
border: 1px solid $border-color;
|
||
border-radius: 0.08rem;
|
||
}
|
||
|
||
&__resume-check-icon {
|
||
flex-shrink: 0;
|
||
width: 0.16rem;
|
||
height: 0.16rem;
|
||
color: $text-middle;
|
||
|
||
svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&__resume-select {
|
||
flex: 1;
|
||
|
||
.el-input__wrapper {
|
||
box-shadow: none !important;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
&__resume-switch-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.1rem 0;
|
||
|
||
& + & {
|
||
border-top: none;
|
||
}
|
||
}
|
||
|
||
&__resume-switch-text {
|
||
font-size: 0.13rem;
|
||
color: $text-dark;
|
||
}
|
||
|
||
// ==================== 第3步：安装插件 ====================
|
||
|
||
// 安装教程整体容器
|
||
&__install-guide {
|
||
background: $bg-white;
|
||
border-radius: 0.12rem;
|
||
padding: 0.28rem;
|
||
border: 1px solid $border-color;
|
||
}
|
||
|
||
// 安装教程标题
|
||
&__install-guide-title {
|
||
font-size: 0.18rem;
|
||
font-weight: 700;
|
||
color: $text-dark;
|
||
margin-bottom: 0.28rem;
|
||
}
|
||
|
||
// 每个安装步骤
|
||
&__install-step {
|
||
margin-bottom: 0.3rem;
|
||
|
||
&:last-child { margin-bottom: 0; }
|
||
}
|
||
|
||
// 步骤文字说明
|
||
&__install-step-text {
|
||
font-size: 0.14rem;
|
||
font-weight: 600;
|
||
color: $text-dark;
|
||
margin-bottom: 0.16rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
// 下载按钮
|
||
&__install-download-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.08rem;
|
||
padding: 0.08rem 0.2rem;
|
||
background: rgba($accent, 0.1);
|
||
border: none;
|
||
border-radius: 0.2rem;
|
||
color: $accent;
|
||
font-size: 0.13rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover { background: rgba($accent, 0.2); }
|
||
|
||
svg { flex-shrink: 0; }
|
||
}
|
||
|
||
// 步骤2的内容区（图片+浏览器链接并排）
|
||
&__install-step-content {
|
||
display: flex;
|
||
gap: 0.24rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
// 步骤中的图片区
|
||
&__install-step-img {
|
||
flex: 1;
|
||
min-width: 0;
|
||
background: $bg-main;
|
||
border-radius: 0.08rem;
|
||
padding: 0.12rem;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 0.06rem;
|
||
}
|
||
}
|
||
|
||
// 浏览器链接区域
|
||
&__install-browser-links {
|
||
flex-shrink: 0;
|
||
width: 2rem;
|
||
}
|
||
|
||
&__install-browser-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.08rem;
|
||
margin-bottom: 0.06rem;
|
||
}
|
||
|
||
&__install-browser-icon {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
border-radius: 50%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
&__install-browser-name {
|
||
font-size: 0.13rem;
|
||
font-weight: 500;
|
||
color: $text-dark;
|
||
}
|
||
|
||
&__install-browser-url {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.04rem;
|
||
font-size: 0.13rem;
|
||
color: $accent;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
margin-bottom: 0.16rem;
|
||
|
||
&:hover { text-decoration: underline; }
|
||
|
||
svg { flex-shrink: 0; color: $text-middle; }
|
||
}
|
||
|
||
// 步骤3/4的图片展示行
|
||
&__install-step-img-row {
|
||
display: flex;
|
||
gap: 0.16rem;
|
||
}
|
||
|
||
&__install-step-img-item {
|
||
flex: 1;
|
||
background: $bg-main;
|
||
border-radius: 0.08rem;
|
||
padding: 0.12rem;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 0.06rem;
|
||
}
|
||
}
|
||
|
||
// 右侧卡片中的安装步骤列表
|
||
&__install-steps-list {
|
||
font-size: 0.13rem;
|
||
color: $text-middle;
|
||
line-height: 2;
|
||
margin-bottom: 0.1rem;
|
||
|
||
p { margin: 0; }
|
||
}
|
||
|
||
// ==================== 设置完成页 ====================
|
||
|
||
// 完成页容器 — 居中布局
|
||
&__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;
|
||
|
||
// 左侧主区域（60%）
|
||
&__left {
|
||
width: 60%;
|
||
height: calc(var(--app-height, 100vh) - 0.6rem);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
// 右侧面板（40%，常驻设置面板 + 覆盖层）
|
||
&__right {
|
||
width: 40%;
|
||
height: calc(var(--app-height, 100vh) - 0.6rem);
|
||
margin-left: 0.2rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 右侧覆盖层 — 绝对定位覆盖在设置面板之上
|
||
&__right-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
background: $bg-white;
|
||
border-radius: 0.12rem;
|
||
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;
|
||
}
|
||
}
|
||
|
||
// 投递进度列表
|
||
&__progress-list {
|
||
margin-top: 0.16rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.12rem;
|
||
}
|
||
|
||
// ==================== 对话消息样式 ====================
|
||
|
||
// 对话行
|
||
&__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;
|
||
}
|
||
}
|
||
}
|