1991 lines
38 KiB
SCSS
1991 lines
38 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: 2.2rem;
|
||
flex: 1;
|
||
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 {
|
||
.agent-page__step-number {
|
||
background: $accent;
|
||
color: $bg-white;
|
||
}
|
||
|
||
.agent-page__step-label {
|
||
color: $text-dark;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 步骤序号圆圈
|
||
&__step-number {
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
border-radius: 50%;
|
||
background: $bg-main;
|
||
color: $text-middle;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.14rem;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
line-height: 1;
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
// 步骤文字标签
|
||
&__step-label {
|
||
font-size: 0.14rem;
|
||
color: $text-middle;
|
||
white-space: nowrap;
|
||
font-weight: 600;
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
// 步骤间分隔横线
|
||
&__step-line {
|
||
display: block;
|
||
width: 0.93rem;
|
||
height: 0.02rem;
|
||
background: #E5E7EB;
|
||
}
|
||
|
||
// ==================== 主体内容区域 — 左右两栏 ====================
|
||
&__main {
|
||
display: flex;
|
||
gap: 0.24rem;
|
||
align-items: stretch;
|
||
}
|
||
|
||
// 左侧说明引导区域
|
||
&__left {
|
||
width: 3.2rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 右侧个人档案区域
|
||
&__right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
border: 0.01rem solid #F0F0F0;
|
||
border-radius: 0.12rem;
|
||
}
|
||
|
||
// ==================== 左侧引导卡片 ====================
|
||
&__intro-card {
|
||
background: $bg-white;
|
||
border-radius: 0.12rem;
|
||
padding: 0.24rem 0.32rem;
|
||
border: 0.01rem solid #5DCDC4;
|
||
|
||
// 渐变背景变体 — 淡绿渐变底色
|
||
&--gradient {
|
||
background: linear-gradient(128.17deg, rgba(82, 202, 209, 0.05) 0%, rgba(130, 215, 155, 0.05) 100%);
|
||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
|
||
}
|
||
}
|
||
|
||
// Nova 头像行
|
||
&__intro-avatar-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.08rem;
|
||
margin-bottom: 0.16rem;
|
||
}
|
||
|
||
&__intro-avatar-img {
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
&__intro-avatar-name {
|
||
font-size: 0.18rem;
|
||
font-weight: 620;
|
||
color: $accent;
|
||
}
|
||
|
||
// 渐变按钮 — 宽度撑满
|
||
&__intro-gradient-btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 0.43rem;
|
||
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
|
||
border-radius: 0.12rem;
|
||
border: none;
|
||
font-size: 0.14rem;
|
||
font-weight: 620;
|
||
color: $bg-white;
|
||
cursor: pointer;
|
||
transition: opacity 0.25s ease;
|
||
margin-top: 0.16rem;
|
||
|
||
&:hover { opacity: 0.9; }
|
||
&:active { transform: scale(0.98); }
|
||
}
|
||
|
||
// 上一步按钮 — 文字按钮
|
||
&__intro-back-btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 0.38rem;
|
||
background: transparent;
|
||
border: none;
|
||
font-size: 0.13rem;
|
||
color: $text-middle;
|
||
cursor: pointer;
|
||
margin-top: 0.08rem;
|
||
transition: color 0.2s ease;
|
||
|
||
&:hover { color: $text-dark; }
|
||
}
|
||
|
||
// 卡片头部：图标 + 标题
|
||
&__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.18rem;
|
||
font-weight: 620;
|
||
color: $text-dark;
|
||
line-height: 1.5;
|
||
margin: 0 0 0.08rem;
|
||
}
|
||
|
||
// 说明描述文字
|
||
&__intro-desc {
|
||
font-size: 0.14rem;
|
||
color: $text-middle;
|
||
line-height: 1.7;
|
||
margin-bottom: 0.16rem;
|
||
}
|
||
|
||
// 导入个人资料行
|
||
&__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;
|
||
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步：新版面板样式 ====================
|
||
&__step2-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.32rem;
|
||
border: 1px solid #F0F0F0;
|
||
border-radius: 0.12rem;
|
||
padding: 0.36rem 0.32rem;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 第2步分区块
|
||
&__step2-section {
|
||
flex: 1;
|
||
}
|
||
|
||
// 第2步分区标题
|
||
&__step2-section-title {
|
||
font-size: 0.18rem;
|
||
font-weight: 620;
|
||
color: $text-dark;
|
||
margin-bottom: 0.16rem;
|
||
}
|
||
|
||
// 第2步功能说明区域 — 全宽
|
||
&__step2-faq {
|
||
width: 100%;
|
||
background: $bg-white;
|
||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
|
||
border-radius: 0.12rem;
|
||
padding: 0.24rem 0.32rem;
|
||
}
|
||
|
||
&__step2-faq-title {
|
||
font-size: 0.18rem;
|
||
font-weight: 620;
|
||
color: $accent;
|
||
margin-bottom: 0.13rem;
|
||
}
|
||
|
||
&__step2-faq-item {
|
||
border: 1px solid #F0F0F0;
|
||
border-radius: 0.12rem;
|
||
padding: 0.16rem 0.2rem;
|
||
margin-bottom: 0.13rem;
|
||
|
||
&:last-child { margin-bottom: 0; }
|
||
}
|
||
|
||
&__step2-faq-item-title {
|
||
font-size: 0.14rem;
|
||
font-weight: 620;
|
||
color: $text-dark;
|
||
margin-bottom: 0.08rem;
|
||
}
|
||
|
||
&__step2-faq-item-desc {
|
||
font-size: 0.14rem;
|
||
font-weight: 330;
|
||
color: $text-middle;
|
||
}
|
||
|
||
// 第2步筛选器行
|
||
&__step2-filters {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.16rem;
|
||
align-items: center;
|
||
}
|
||
|
||
// 第2步简历选择下拉
|
||
&__step2-resume-select {
|
||
width: 1.6rem;
|
||
|
||
.el-input__wrapper {
|
||
background: $bg-main;
|
||
border-radius: 0.12rem;
|
||
box-shadow: none !important;
|
||
padding: 0.12rem 0.16rem;
|
||
}
|
||
}
|
||
|
||
// 第2步自定义简历下拉
|
||
&__step2-resume-dropdown {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.12rem 0.16rem;
|
||
min-width: 1.6rem;
|
||
height: 0.43rem;
|
||
background: #F3F4F6;
|
||
border-radius: 0.12rem;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
transition: border-color 0.2s ease;
|
||
width: 1.6rem;
|
||
|
||
&:hover { border-color: darken($border-color, 10%); }
|
||
}
|
||
|
||
&__step2-resume-dropdown-text {
|
||
font-size: 0.14rem;
|
||
color: $text-dark;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 1.4rem;
|
||
}
|
||
|
||
&__step2-resume-dropdown-arrow {
|
||
width: 0.12rem;
|
||
height: 0.12rem;
|
||
color: $text-middle;
|
||
flex-shrink: 0;
|
||
margin-left: 0.16rem;
|
||
}
|
||
|
||
&__step2-resume-menu {
|
||
position: absolute;
|
||
top: calc(100% + 0.04rem);
|
||
left: 0;
|
||
min-width: 100%;
|
||
background: $bg-white;
|
||
border: 1px solid $border-color;
|
||
border-radius: 0.08rem;
|
||
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1);
|
||
z-index: 10;
|
||
padding: 0.04rem 0;
|
||
width: 1.6rem;
|
||
}
|
||
|
||
&__step2-resume-menu-item {
|
||
padding: 0.08rem 0.14rem;
|
||
font-size: 0.13rem;
|
||
color: $text-dark;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
transition: background 0.15s ease;
|
||
width: 100%;
|
||
|
||
&:hover { background: $bg-main; }
|
||
|
||
&--active {
|
||
color: $accent;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
// ==================== 第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.12rem 0.16rem;
|
||
background: $bg-main;
|
||
border-radius: 0.12rem;
|
||
font-size: 0.14rem;
|
||
color: $text-middle;
|
||
border: none;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.16rem;
|
||
min-width: 0.9rem;
|
||
height: 0.43rem;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
transition: background 0.2s ease;
|
||
|
||
&:hover { background: darken(#F3F4F6, 3%); }
|
||
}
|
||
|
||
&__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 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.16rem;
|
||
}
|
||
|
||
// 单个步骤卡片
|
||
&__install-card {
|
||
border: 1px solid #F0F0F0;
|
||
border-radius: 0.12rem;
|
||
padding: 0.16rem 0.2rem;
|
||
}
|
||
|
||
// 卡片内部行布局 — 左右分栏
|
||
&__install-card-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 0.24rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
// 左侧内容区
|
||
&__install-card-left {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
// 左侧头部（序号 + 标题描述）
|
||
&__install-card-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.12rem;
|
||
}
|
||
|
||
// 步骤序号徽标
|
||
&__install-card-num {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
background: #EDF9FA;
|
||
border-radius: 0.08rem;
|
||
font-size: 0.18rem;
|
||
font-weight: 620;
|
||
color: $accent;
|
||
flex-shrink: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
// 标题+描述容器
|
||
&__install-card-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
// 步骤标题
|
||
&__install-card-title {
|
||
font-size: 0.18rem;
|
||
font-weight: 620;
|
||
color: $text-dark;
|
||
margin: 0 0 0.04rem;
|
||
line-height: 0.24rem;
|
||
}
|
||
|
||
// 步骤描述
|
||
&__install-card-desc {
|
||
font-size: 0.14rem;
|
||
font-weight: 330;
|
||
color: $text-middle;
|
||
margin: 0;
|
||
line-height: 0.19rem;
|
||
}
|
||
|
||
// 右侧区域
|
||
&__install-card-right {
|
||
flex-shrink: 0;
|
||
width: 3.52rem;
|
||
}
|
||
|
||
// 右侧说明图片
|
||
&__install-card-img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
border-radius: 0.05rem;
|
||
}
|
||
|
||
// 步骤1：下载区域
|
||
&__install-download-box {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.04rem 0.04rem 0.04rem 0.16rem;
|
||
gap: 0.16rem;
|
||
background: $bg-main;
|
||
border-radius: 0.12rem;
|
||
height: 0.44rem;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
&__install-download-name {
|
||
font-size: 0.14rem;
|
||
font-weight: 450;
|
||
color: $text-dark;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&__install-download-btn2 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.04rem;
|
||
padding: 0.08rem 0.12rem;
|
||
background: $accent;
|
||
border: none;
|
||
border-radius: 0.08rem;
|
||
color: $bg-white;
|
||
font-size: 0.14rem;
|
||
font-weight: 620;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s ease;
|
||
white-space: nowrap;
|
||
|
||
&:hover { opacity: 0.85; }
|
||
|
||
svg { flex-shrink: 0; }
|
||
}
|
||
|
||
// 步骤2：浏览器地址链接行
|
||
&__install-browser-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.12rem;
|
||
margin-top: 0.16rem;
|
||
padding-left: 0.44rem;
|
||
}
|
||
|
||
&__install-browser-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.04rem;
|
||
padding: 0.12rem 0.16rem;
|
||
background: $bg-white;
|
||
border: 1px solid #F0F0F0;
|
||
border-radius: 0.08rem;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s ease;
|
||
|
||
&:hover { border-color: $accent; }
|
||
|
||
svg { flex-shrink: 0; }
|
||
}
|
||
|
||
&__install-browser-link-label {
|
||
font-size: 0.14rem;
|
||
font-weight: 450;
|
||
color: $text-middle;
|
||
margin-left: 0.04rem;
|
||
}
|
||
|
||
&__install-browser-link-copy {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.04rem;
|
||
margin-left: 0.16rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 450;
|
||
color: $accent;
|
||
|
||
svg { color: $accent; }
|
||
}
|
||
|
||
// ==================== 设置完成页 ====================
|
||
|
||
// 完成页容器 — 居中布局
|
||
&__complete {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
// 完成页占位图标
|
||
&__complete-icon {
|
||
height: 1.2rem;
|
||
margin-bottom: 0.32rem;
|
||
|
||
svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
// 完成页标题
|
||
&__complete-title {
|
||
font-size: 0.28rem;
|
||
font-weight: 700;
|
||
color: $text-dark;
|
||
margin: 0 0 0.12rem;
|
||
}
|
||
|
||
// 完成页描述
|
||
&__complete-desc {
|
||
font-size: 0.16rem;
|
||
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.12rem;
|
||
font-size: 0.15rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
width: 4rem;
|
||
|
||
&:hover { background: $btn-dark-hover; }
|
||
&:active { transform: scale(0.98); }
|
||
}
|
||
}
|
||
|
||
|
||
// ==================== 求职助手正式内容区域 ====================
|
||
.agent-main {
|
||
height: 100%;
|
||
display: flex;
|
||
|
||
// 左侧主区域（自适应撑满剩余宽度）
|
||
&__left {
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: var(--app-height, 100vh);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
// 右侧面板（固定宽度3.6rem）
|
||
&__right {
|
||
width: 3.6rem;
|
||
flex-shrink: 0;
|
||
height: var(--app-height, 100vh);
|
||
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;
|
||
justify-content: space-between;
|
||
padding: 0.16rem 0.24rem;
|
||
background: $bg-white;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 左侧状态信息区
|
||
&__top-bar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.12rem;
|
||
}
|
||
|
||
// 右侧按钮区
|
||
&__top-bar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
}
|
||
|
||
// 状态标签
|
||
&__status-tag {
|
||
font-size: 0.14rem;
|
||
font-weight: 450;
|
||
color: $text-middle;
|
||
background: $bg-main;
|
||
padding: 0.04rem 0.12rem;
|
||
border-radius: 0.14rem;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
|
||
// 准备就绪态 — 主题色
|
||
&--ready {
|
||
color: $accent;
|
||
background: #EDF9FA;
|
||
}
|
||
|
||
// 投递中态 — 橙色
|
||
&--applying {
|
||
color: #F59E0B;
|
||
background: #FFFBF5;
|
||
}
|
||
}
|
||
|
||
// 状态提示文字
|
||
&__status-text {
|
||
font-size: 0.14rem;
|
||
font-weight: 330;
|
||
color: $text-middle;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 进度数字（投递中时的 x/y）
|
||
&__status-progress {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.02rem 0.08rem;
|
||
background: $bg-main;
|
||
border-radius: 0.04rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 600;
|
||
color: $text-dark;
|
||
margin-left: 0.04rem;
|
||
}
|
||
|
||
// 岗位数量（准备就绪时的加粗数字）
|
||
&__status-count {
|
||
font-weight: 600;
|
||
color: $text-dark;
|
||
}
|
||
|
||
// 查看任务按钮
|
||
&__task-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.04rem;
|
||
padding: 0.08rem 0.12rem;
|
||
border: 1px solid #F0F0F0;
|
||
border-radius: 0.08rem;
|
||
background: $bg-white;
|
||
font-size: 0.14rem;
|
||
font-weight: 620;
|
||
color: $text-middle;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
white-space: nowrap;
|
||
height: 0.35rem;
|
||
box-sizing: border-box;
|
||
|
||
svg {
|
||
width: 0.16rem;
|
||
height: 0.16rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&:hover {
|
||
border-color: $border-color;
|
||
background: $bg-main;
|
||
}
|
||
}
|
||
|
||
// 开始/暂停投递主操作按钮
|
||
&__action-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.04rem;
|
||
padding: 0.08rem 0.12rem;
|
||
border: none;
|
||
border-radius: 0.08rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 620;
|
||
color: $bg-white;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
white-space: nowrap;
|
||
height: 0.35rem;
|
||
box-sizing: border-box;
|
||
|
||
svg {
|
||
width: 0.16rem;
|
||
height: 0.16rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 开始投递态 — 渐变绿色
|
||
&--start {
|
||
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
|
||
|
||
&:hover { opacity: 0.9; }
|
||
}
|
||
|
||
// 暂停投递态 — 橙色
|
||
&--pause {
|
||
background: #F59E0B;
|
||
|
||
&:hover { opacity: 0.9; }
|
||
}
|
||
}
|
||
|
||
// 右侧工具按钮区（包含查看任务按钮和下拉弹窗）
|
||
&__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 {
|
||
display: none;
|
||
}
|
||
|
||
// ==================== 中间内容区域 ====================
|
||
&__chat-area {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0.16rem 0.24rem;
|
||
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;
|
||
padding: 0.24rem;
|
||
background: $bg-white;
|
||
border-radius: 0.12rem;
|
||
}
|
||
|
||
// 进度列表标题
|
||
&__progress-list-header {
|
||
margin-bottom: 0.04rem;
|
||
}
|
||
|
||
&__progress-list-title {
|
||
font-size: 0.18rem;
|
||
font-weight: 600;
|
||
color: $text-dark;
|
||
line-height: 0.27rem;
|
||
}
|
||
|
||
&__progress-list-desc {
|
||
font-size: 0.12rem;
|
||
color: $text-middle;
|
||
line-height: 0.18rem;
|
||
margin-top: 0.04rem;
|
||
}
|
||
|
||
// 进度列表可滚动区域
|
||
&__progress-list-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.12rem;
|
||
max-height: 5rem;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
// ==================== 对话消息样式 ====================
|
||
|
||
// 对话行
|
||
&__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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==================== 简历预览抽屉 ====================
|
||
|
||
/* 遮罩层 */
|
||
.agent-resume-drawer-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: var(--app-height, 100vh);
|
||
background: rgba(0, 0, 0, 0.3);
|
||
z-index: 2000;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* 抽屉主体 */
|
||
.agent-resume-drawer {
|
||
width: 9.6rem;
|
||
max-width: 9.6rem;
|
||
height: var(--app-height, 100vh);
|
||
background: $bg-white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 0.14rem;
|
||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
|
||
|
||
/* 顶部标题栏 */
|
||
&__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.2rem 0.24rem;
|
||
height: 0.64rem;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid $border-color;
|
||
}
|
||
|
||
&__header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
}
|
||
|
||
/* 关闭按钮 */
|
||
&__close {
|
||
width: 0.24rem;
|
||
height: 0.24rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
&__close-icon {
|
||
width: 0.24rem;
|
||
height: 0.24rem;
|
||
color: $text-middle;
|
||
}
|
||
|
||
/* 标题文字 */
|
||
&__title {
|
||
font-size: 0.18rem;
|
||
font-weight: 620;
|
||
color: $text-dark;
|
||
line-height: 0.24rem;
|
||
}
|
||
|
||
/* 匹配分提示区域 */
|
||
&__score-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
}
|
||
|
||
&__score-tip {
|
||
font-size: 0.13rem;
|
||
font-weight: 400;
|
||
color: $text-dark;
|
||
line-height: 0.2rem;
|
||
background: #F0FAFB;
|
||
border-radius: 0.08rem;
|
||
padding: 0.06rem 0.12rem;
|
||
}
|
||
|
||
&__score-old {
|
||
font-weight: 630;
|
||
color: $accent;
|
||
}
|
||
|
||
&__score-new {
|
||
font-weight: 630;
|
||
color: $accent;
|
||
}
|
||
|
||
/* 匹配度环 */
|
||
&__score-ring {
|
||
position: relative;
|
||
width: 0.56rem;
|
||
height: 0.56rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__ring-svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&__ring-text {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
line-height: 1;
|
||
}
|
||
|
||
&__ring-number {
|
||
font-size: 0.16rem;
|
||
font-weight: 630;
|
||
color: $text-dark;
|
||
}
|
||
|
||
&__ring-label {
|
||
font-size: 0.08rem;
|
||
font-weight: 400;
|
||
color: $text-middle;
|
||
margin-top: 0.02rem;
|
||
}
|
||
|
||
/* 内容区域（可滚动） */
|
||
&__body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0.24rem;
|
||
}
|
||
}
|
||
|
||
/* 抽屉动画 */
|
||
.agent-resume-drawer-enter-active,
|
||
.agent-resume-drawer-leave-active {
|
||
transition: opacity 0.3s ease;
|
||
|
||
.agent-resume-drawer {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
}
|
||
|
||
.agent-resume-drawer-enter-from,
|
||
.agent-resume-drawer-leave-to {
|
||
opacity: 0;
|
||
|
||
.agent-resume-drawer {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
|
||
// ==================== 插件安装确认弹窗 ====================
|
||
|
||
/* 遮罩层 */
|
||
.agent-page__install-dialog-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2000;
|
||
}
|
||
|
||
/* 弹窗主体 */
|
||
.agent-page__install-dialog {
|
||
position: relative;
|
||
width: 3.84rem;
|
||
background: $bg-white;
|
||
border: 1px solid #F0F0F0;
|
||
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
|
||
border-radius: 0.12rem;
|
||
padding: 0.24rem 0.32rem 0.32rem;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 渐变背景 */
|
||
.agent-page__install-dialog-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
|
||
border-radius: 0.12rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 关闭按钮 */
|
||
.agent-page__install-dialog-close {
|
||
position: absolute;
|
||
top: 0.24rem;
|
||
right: 0.24rem;
|
||
width: 0.24rem;
|
||
height: 0.24rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1;
|
||
|
||
&:hover {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
/* 标题 */
|
||
.agent-page__install-dialog-title {
|
||
position: relative;
|
||
font-size: 0.18rem;
|
||
font-weight: 520;
|
||
color: $text-dark;
|
||
text-align: center;
|
||
margin: 0 0 0.2rem 0;
|
||
line-height: 0.24rem;
|
||
}
|
||
|
||
/* 描述文字 */
|
||
.agent-page__install-dialog-desc {
|
||
position: relative;
|
||
font-size: 0.16rem;
|
||
font-weight: 330;
|
||
color: $text-middle;
|
||
text-align: center;
|
||
line-height: 0.28rem;
|
||
margin: 0 0 0.24rem 0;
|
||
}
|
||
|
||
/* 底部按钮容器 */
|
||
.agent-page__install-dialog-btns {
|
||
position: relative;
|
||
display: flex;
|
||
gap: 0.08rem;
|
||
}
|
||
|
||
/* 按钮通用 */
|
||
.agent-page__install-dialog-btn {
|
||
flex: 1;
|
||
height: 0.37rem;
|
||
border-radius: 0.08rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 450;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
|
||
/* 描边按钮 — 还未安装 */
|
||
&--outline {
|
||
background: $bg-white;
|
||
border: 1px solid $accent;
|
||
color: $accent;
|
||
|
||
&:hover {
|
||
background: $theme-color;
|
||
}
|
||
}
|
||
|
||
/* 实心按钮 — 已安装，继续 */
|
||
&--primary {
|
||
background: $accent;
|
||
border: none;
|
||
color: #FFFFFF;
|
||
|
||
&:hover {
|
||
background: $accent-hover;
|
||
}
|
||
}
|
||
}
|