33 Commits
Author SHA1 Message Date
xuxin d556170969 1.1岗位列表等新版本 2026-08-11 11:54:35 +08:00
xuxin 1e103627f8 加一个超级管理员登陆页面 2026-08-05 14:32:33 +08:00
xuxin 8b9ebd6ddc 删掉之前测试时用过的一个无效旧token 2026-07-29 15:18:24 +08:00
xuxin 5abd6d27d6 联系二维码图片存oss图片链接缓存oss里的 2026-07-27 14:31:02 +08:00
xuxin bb7a8c55b2 4个mvp补丁 2026-07-24 18:15:31 +08:00
xuxin a0f01dd697 插件上传谷歌商店验证文件 2026-07-22 10:01:10 +08:00
xuxin 58a027296a 隐私协议单独加个页面 2026-07-21 11:29:26 +08:00
xuxin 010a80be81 隐私协议单独加个页面 2026-07-21 11:20:01 +08:00
xuxin 6c03793daf 去掉offer派插件test和www不同环境域名的通信隔离 2026-07-17 20:19:59 +08:00
xuxin 33ecccdcb0 bug处理加文字样式微调 2026-07-17 20:00:24 +08:00
xuxin d429bae98a 备案号 2026-07-17 16:49:46 +08:00
xuxin 0b9f2e7333 备案号 2026-07-17 16:48:39 +08:00
xuxin db46766d48 个人资料教育经历学历类型保存bug,和岗位为列表页查询条件添加公司类型分类 2026-07-17 16:28:50 +08:00
xuxin 27d2592d06 bug修改 2026-07-17 15:12:41 +08:00
xuxin c81c9b79dd 没有个人资料时检测跳转登陆页,登陆页改造,添加新的业务配置文件来控制功能开关 2026-07-17 12:01:34 +08:00
xuxin 5f4aab8d04 bug处理 2026-07-16 18:36:40 +08:00
xuxin 15971bffd9 友盟跟踪记录 2026-07-16 16:30:07 +08:00
xuxin bf84da7783 bug处理,插件版本同步 2026-07-15 16:36:20 +08:00
xuxin 0911760e27 3个需求处理和插件通信组件引入(和插件共用的一个ts) 2026-07-15 09:49:21 +08:00
xuxin 66026f211c bug处理 2026-07-14 11:44:09 +08:00
xuxin 7abe158dbb bug处理 2026-07-13 23:01:49 +08:00
xuxin aed2535ab2 登陆和首页微调 2026-07-13 20:56:06 +08:00
xuxin 5f723e5573 ai助手投递偏好设置修复 2026-07-10 16:57:43 +08:00
xuxin 8cd21e7b98 ai助手投递偏好设置修复 2026-07-10 16:29:31 +08:00
xuxin e8e2e09e62 样式小bug修改-01 2026-07-10 11:38:56 +08:00
xuxin 4be35ced80 ai助手本地不缓存没有完成的投递记录 2026-07-10 10:37:35 +08:00
xuxin 0e5c7d14d0 AI投递助手样式优化 2026-07-10 10:01:07 +08:00
xuxin cf268520e1 AI投递助手 2026-07-10 02:08:41 +08:00
xuxin cd64ded6ae AI润色用新加载特效 2026-07-09 16:26:29 +08:00
xuxin ec6ba7ee35 简历详情样式微调 2026-07-09 16:04:25 +08:00
xuxin 72339f332d 简历详情样式微调 2026-07-09 15:27:31 +08:00
xuxin b25f2dde3a 左侧菜单微调 2026-07-09 11:45:36 +08:00
xuxin 38e3957da2 导师搜索标签 2026-07-09 10:47:14 +08:00
141 changed files with 11363 additions and 4119 deletions
+3 -3
View File
@@ -13,6 +13,7 @@ declare module 'vue' {
export interface GlobalComponents {
AgentApplyProgress: typeof import('./src/components/AgentApplyProgress.vue')['default']
AgentApplyProgressPanel: typeof import('./src/components/AgentApplyProgressPanel.vue')['default']
AgentBrowserInstallGuide: typeof import('./src/components/AgentBrowserInstallGuide.vue')['default']
AgentChatJobList: typeof import('./src/components/AgentChatJobList.vue')['default']
AgentJobPreviewPanel: typeof import('./src/components/AgentJobPreviewPanel.vue')['default']
AgentMatchJobAdd: typeof import('./src/components/AgentMatchJobAdd.vue')['default']
@@ -30,17 +31,15 @@ declare module 'vue' {
ElDialog: typeof import('element-plus/es')['ElDialog']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
FullscreenLoading: typeof import('./src/components/FullscreenLoading.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IndustrySelector: typeof import('./src/components/tools/IndustrySelector.vue')['default']
JobApplyMethodDialog: typeof import('./src/components/JobApplyMethodDialog.vue')['default']
JobCategorySelector: typeof import('./src/components/tools/JobCategorySelector.vue')['default']
JobDislikeDialog: typeof import('./src/components/JobDislikeDialog.vue')['default']
JobFeedbackDialog: typeof import('./src/components/JobFeedbackDialog.vue')['default']
@@ -53,6 +52,7 @@ declare module 'vue' {
MemberAccessDialog: typeof import('./src/components/MemberAccessDialog.vue')['default']
MemberDialog: typeof import('./src/components/MemberDialog.vue')['default']
MentorAsidePanel: typeof import('./src/components/MentorAsidePanel.vue')['default']
MentorQrCodeDialog: typeof import('./src/components/MentorQrCodeDialog.vue')['default']
ProfileEditDrawer: typeof import('./src/components/ProfileEditDrawer.vue')['default']
ProfilePageContent: typeof import('./src/components/ProfilePageContent.vue')['default']
ProfileWelcomeDialog: typeof import('./src/components/ProfileWelcomeDialog.vue')['default']
+10
View File
@@ -7,6 +7,16 @@
<title>Offer派 - 大学生AI求职平台 | 智能岗位匹配·一键自动网申·AI简历优化</title>
<meta name="description" content="Offer派是专为大学生打造的AI求职平台,提供智能岗位匹配、一键自动网申、岗位定制简历、内推人脉直通等功能,让校招求职效率提升80%。" />
<meta name="keywords" content="大学生求职,校招,AI求职,智能匹配,自动网申,简历优化,内推,Offer派" />
<!-- 友盟统计 -->
<script>
var _czc = _czc || [];
(function () {
var um = document.createElement("script");
um.src = "https://v1.cnzz.com/z.js?id=1281490571&async=1";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(um, s);
})();
</script>
</head>
<body>
<div id="app"></div>
+1
View File
@@ -20,6 +20,7 @@
"vuex": "^4.1.0"
},
"devDependencies": {
"@types/chrome": "^0.2.2",
"@types/markdown-it": "^14.1.2",
"@types/node": "^24.10.1",
"@vitejs/plugin-vue": "^6.0.2",
+28
View File
@@ -36,6 +36,9 @@ importers:
specifier: ^4.1.0
version: 4.1.0(vue@3.5.29(typescript@5.9.3))
devDependencies:
'@types/chrome':
specifier: ^0.2.2
version: 0.2.2
'@types/markdown-it':
specifier: ^14.1.2
version: 14.1.2
@@ -490,9 +493,21 @@ packages:
'@sxzz/popperjs-es@2.11.8':
resolution: {integrity: sha512-wOwESXvvED3S8xBmcPWHs2dUuzrE4XiZeFu7e1hROIJkm02a49N120pmOXxY33sBb6hArItm5W5tcg1cBtV+HQ==}
'@types/chrome@0.2.2':
resolution: {integrity: sha512-8rSMZ4cvo2xmaSyQg0sN5yRL7oiDkntLoiHxUhfwQnv1mvnkrdoZ25SlNrKWmYKaeP50WvrfWj1pmc02+U9KKw==}
'@types/estree@1.0.8':
resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
'@types/filesystem@0.0.36':
resolution: {integrity: sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA==}
'@types/filewriter@0.0.33':
resolution: {integrity: sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g==}
'@types/har-format@1.2.16':
resolution: {integrity: sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==}
'@types/linkify-it@5.0.0':
resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
@@ -1365,8 +1380,21 @@ snapshots:
'@sxzz/popperjs-es@2.11.8': {}
'@types/chrome@0.2.2':
dependencies:
'@types/filesystem': 0.0.36
'@types/har-format': 1.2.16
'@types/estree@1.0.8': {}
'@types/filesystem@0.0.36':
dependencies:
'@types/filewriter': 0.0.33
'@types/filewriter@0.0.33': {}
'@types/har-format@1.2.16': {}
'@types/linkify-it@5.0.0': {}
'@types/lodash-es@4.17.12':
+1
View File
@@ -0,0 +1 @@
google-site-verification: google18c40aea647ea1cd.html
+29 -6
View File
@@ -23,7 +23,7 @@ export interface AgentConfig {
autoOptimizeResume?: number
/** 自动匹配分析 0=关闭 1=开启 */
autoMatchAnalysis?: number
/** 是否愿意接受部门调剂 */
/** 是否开启深度人岗匹配分析,可选值:是/否(null或空字符串视为关闭) */
acceptDeptTransfer?: string
/** 是否接受地点调剂 */
acceptLocationTransfer?: string
@@ -71,8 +71,8 @@ export interface AgentJobMatchDetail {
/** 推荐岗位项 */
export interface AgentRecommendJob {
/** 岗位 ID */
id: number
/** 岗位 ID(字符串,避免大整数精度丢失) */
id: string | number
/** 岗位名称 */
title: string
/** 薪资描述 */
@@ -103,6 +103,10 @@ export interface AgentRecommendJob {
matchScore: number
/** 匹配度详情 */
matchDetail: AgentJobMatchDetail
/** 学历要求 0=不限 1=大专 2=本科 3=硕士 4=博士 */
education?: number
/** 招聘分类 0=社招 1=校招 2=实习 3=其他 */
recruitCategory?: number
}
/** 求职助手岗位推荐返回数据 */
@@ -297,8 +301,27 @@ export interface OptimizeResumeParams {
*/
export function optimizeAgentResume(params: OptimizeResumeParams) {
return aiService.post('/job-agent/optimize-resume', params, {
headers: {
Token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjIwMzUyNTM4OTg5MTk4NzA0NjUsInV1SWQiOiI2MmQ5MDE2NTcyNzY0ZmNjODNjZTIyYjRjODA5ZmU5MiJ9.eE-Q5rio5J5kxkS-XPYdmk-1Tgvg6kj6NGoKWMFNU14',
},
}).then(res => res.data)
}
// ==================== 岗位匹配度评分(Python 后端) ====================
/** 匹配度评分请求参数 */
export interface MatchScoreParams {
/** 定制简历 ID(字符串,避免大整数精度丢失) */
customizeResumeId?: string
/** 普通简历 ID(关闭优化时使用) */
resumeId?: string
/** 岗位 ID(字符串,避免大整数精度丢失) */
jobId: string
}
/**
* 岗位匹配度评分
* POST /job-agent/match-score
* @returns data 为匹配度分数(0-100
*/
export function fetchMatchScore(params: MatchScoreParams) {
return aiService.post<any, { data: AiResult<number> }>('/job-agent/match-score', params).then(res => res.data)
}
+13
View File
@@ -54,6 +54,19 @@ export async function smsLogin(mobileNumber: string, code: string, inviteCode?:
return res
}
/**
* 超级管理员登录
* POST /public/login/superAdminLogin
* Body: { mobileNumber, password }
* 返回结构与 smsLogin 一致
*/
export function superAdminLogin(mobileNumber: string, password: string) {
return request.post<any, ApiResult<LoginData>>('/public/login/superAdminLogin', {
mobileNumber,
password,
})
}
/**
* 检查登录状态
* GET /public/checkLogin
+102 -2
View File
@@ -3,6 +3,16 @@ import aiService from '@/utils/aiRequest'
import type { ApiResult } from '@/api/auth'
import type { AiResult } from '@/utils/aiRequest'
// ==================== 岗位总数 ====================
/**
* 获取全网实时岗位总数
* GET /job/count
*/
export function fetchJobCount() {
return request.get<any, ApiResult<number>>('/job/count')
}
// ==================== 匹配详情 ====================
/** 匹配度详情 */
@@ -23,12 +33,16 @@ export interface JobListItem {
id: string
/** 岗位标题 */
title: string
/** 薪资描述 */
salary?: string
/** 公司全称 */
companyName: string
/** 公司简称 */
companyShortName: string
/** 公司类型(如"上市企业" */
companyType: string
/** 公司Logo URL */
companyLogoUrl?: string
/** 公司标签列表(如 ["新能源汽车", "乘用车制造", "10000人以上"] */
companyTags: string[]
/** 地区名称 */
@@ -41,13 +55,19 @@ export interface JobListItem {
sourceUrl: string
/** 是否已收藏 */
isFavorite: boolean
/** 投递状态(null=未投递,0=已投递 1=面试中 2=有Offer 3=未通过 4=已结束) */
applicationStatus?: number | null
/** 岗位状态:0=有效 1=已下架 2=已过期 */
status: number
/** 发布日期 */
expireAt?: string | null
/** 脚本名字 */
pyname?: string
/** 综合匹配分(0-100 */
matchScore: number
/** 匹配度详情 */
matchDetail: MatchDetail
/** 招聘分类:0=社招 1=校招 2=实习 */
/** 招聘分类:0=社招 1=校招 2=实习 3=其他 */
recruitCategory?: number
/** 学历要求 0=不限 1=大专 2=本科 3=硕士 4=博士 */
education?: number
@@ -87,11 +107,62 @@ export interface JobListParams {
statusFilter?: number[]
/** 搜索关键词 */
keyword?: string
/** 招聘分类 0=招 1=实习 2=社招 3=其他 */
/** 招聘分类 0=招 1=校招 2=实习 3=其他 */
recruitCategory?: number
/** 排除岗位ID列表(用于推荐时排除已推荐过的) */
excludeJobIds?: number[]
/** 公司类型列表(上市企业、独角兽、国企等,可多选) */
companyTypes?: string[]
/** 学历要求列表 0=不限 1=大专 2=本科 3=硕士 4=博士(可多选) */
educations?: number[]
/** 发布开始时间(ISO 8601格式,如 "2026-08-10T21:00:00Z" */
publishStartTime?: string
/** 发布截止时间(ISO 8601格式,如 "2026-08-11T21:00:00Z" */
publishEndTime?: string
}
// ==================== 热门推荐接口 ====================
/** 热门行业项 */
export interface HotIndustryItem {
id: number
name: string
}
/** 热门岗位项 */
export interface HotCategoryItem {
id: number
name: string
}
/** 热门城市项 */
export interface HotCityItem {
code: string
name: string
}
/**
* 获取热门推荐行业
* GET /job/industry/hot
*/
export function fetchHotIndustries() {
return request.get<any, ApiResult<HotIndustryItem[]>>('/job/industry/hot')
}
/**
* 获取热门推荐岗位
* GET /job/category/hot
*/
export function fetchHotCategories() {
return request.get<any, ApiResult<HotCategoryItem[]>>('/job/category/hot')
}
/**
* 获取热门推荐城市
* GET /job/city/hot
*/
export function fetchHotCities() {
return request.get<any, ApiResult<HotCityItem[]>>('/job/city/hot')
}
// ==================== 求职意向 ====================
@@ -145,6 +216,32 @@ export function fetchJobList(params: JobListParams = {}) {
})
}
/**
* 获取筛选岗位数量
* POST /job/list/count
* @param params 与岗位列表相同的筛选参数
*/
export function fetchJobListCount(params: JobListParams = {}) {
return request.post<any, ApiResult<number>>('/job/list/count', {
pageNum: params.pageNum ?? 1,
pageSize: params.pageSize ?? 10,
...params,
})
}
/**
* 深度匹配岗位列表
* POST /job/list/match
* @param params 与岗位列表相同的筛选参数
*/
export function fetchJobListMatch(params: JobListParams = {}) {
return request.post<any, ApiResult<JobPageData>>('/job/list/match', {
pageNum: params.pageNum ?? 1,
pageSize: params.pageSize ?? 15,
...params,
})
}
// ==================== 收藏列表 ====================
/** 收藏列表请求参数 */
@@ -483,6 +580,9 @@ export function fetchSkillGap(jobId: string) {
/** 定制简历接口返回的简历数据 */
export interface CustomizeResumeData {
/** 简历基本信息 */
id?: string
resumeId?: string
resumeName?: string
resume: {
avatarUrl?: string
name?: string
+3 -5
View File
@@ -243,10 +243,8 @@ export function fetchMentorMockChat(mentorId: string): Promise<MentorMockChatRes
*/
export function fetchMentorQrCode(teacherId: string): Promise<any> {
return request.post('/public/mentor/getQrCode', {
key: {
path: 'pages/teacher/teacher',
teacherId,
loginAppid: 'wx3adfa65f9d8db17d',
},
path: 'pages/teacher/teacher',
teacherId,
loginAppid: 'wx3adfa65f9d8db17d',
})
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1008 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 462 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 485 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 390 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 408 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 247 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

+30 -2
View File
@@ -361,7 +361,9 @@ body:not(#_) {
.aliite-e{
align-items: flex-end;
}
.aliite-st{
align-items: stretch;
}
//英文字母或数字一行溢出超出,打断
.word-bra{
word-break: break-all;
@@ -529,6 +531,11 @@ body:not(#_) {
.color-2{
color: #222;
}
.color-2F7DEA{
color: #2F7DEA;
}
.color-3{
color: #333;
}
@@ -581,6 +588,10 @@ body:not(#_) {
.color-9B9EAB{
color:#9B9EAB;
}
.color-D31414{
color: #D31414;
}
.color-accent{
color:$accent;
}
@@ -620,7 +631,12 @@ body:not(#_) {
.border-red1{
border: 0.01rem solid #C86667;
}
.border-EDF9FA-bottom-2{
border: 0.02rem solid #EDF9FA;
}
.border-F0F0F0-bottom-1{
border: 0.01rem solid #F0F0F0;
}
//圆角
.border-ra0{border-radius: 0rem;}
.border-ra1{border-radius: 0.01rem;}
@@ -700,6 +716,11 @@ body:not(#_) {
background: $bg-white;
}
.bg-linear-1{
background: linear-gradient(to right, #52CAD1, #9FD051)
}
/*文字超出隐藏*/
.text-over-h{
white-space: nowrap; /* 保持文本在一行内显示 */
@@ -885,6 +906,9 @@ body:not(#_) {
.max-w1200{
max-width: 12rem;
}
.max-w602{
max-width: 6.02rem;
}
.w0{width: 0rem;}
.w1{width: 0.01rem;} .w2{width: 0.02rem;} .w3{width: 0.03rem;} .w4{width: 0.04rem;} .w5{width: 0.05rem;} .w6{width: 0.06rem;} .w7{width: 0.07rem;} .w8{width: 0.08rem;} .w9{width: 0.09rem;} .w10{width: 0.1rem;} .w11{width: 0.11rem;} .w12{width: 0.12rem;} .w13{width: 0.13rem;} .w14{width: 0.14rem;} .w15{width: 0.15rem;} .w16{width: 0.16rem;} .w17{width: 0.17rem;} .w18{width: 0.18rem;} .w19{width: 0.19rem;} .w20{width: 0.2rem;} .w21{width: 0.21rem;} .w22{width: 0.22rem;} .w23{width: 0.23rem;} .w24{width: 0.24rem;} .w25{width: 0.25rem;} .w26{width: 0.26rem;} .w27{width: 0.27rem;} .w28{width: 0.28rem;} .w29{width: 0.29rem;} .w30{width: 0.3rem;} .w31{width: 0.31rem;} .w32{width: 0.32rem;} .w33{width: 0.33rem;} .w34{width: 0.34rem;} .w35{width: 0.35rem;} .w36{width: 0.36rem;} .w37{width: 0.37rem;} .w38{width: 0.38rem;} .w39{width: 0.39rem;} .w40{width: 0.4rem;} .w41{width: 0.41rem;} .w42{width: 0.42rem;} .w43{width: 0.43rem;} .w44{width: 0.44rem;} .w45{width: 0.45rem;} .w46{width: 0.46rem;} .w47{width: 0.47rem;} .w48{width: 0.48rem;} .w49{width: 0.49rem;} .w50{width: 0.5rem;} .w51{width: 0.51rem;} .w52{width: 0.52rem;} .w53{width: 0.53rem;} .w54{width: 0.54rem;} .w55{width: 0.55rem;} .w56{width: 0.56rem;} .w57{width: 0.57rem;} .w58{width: 0.58rem;} .w59{width: 0.59rem;} .w60{width: 0.6rem;} .w61{width: 0.61rem;} .w62{width: 0.62rem;} .w63{width: 0.63rem;} .w64{width: 0.64rem;} .w65{width: 0.65rem;} .w66{width: 0.66rem;} .w67{width: 0.67rem;} .w68{width: 0.68rem;} .w69{width: 0.69rem;} .w70{width: 0.7rem;} .w71{width: 0.71rem;} .w72{width: 0.72rem;} .w73{width: 0.73rem;} .w74{width: 0.74rem;} .w75{width: 0.75rem;} .w76{width: 0.76rem;} .w77{width: 0.77rem;} .w78{width: 0.78rem;} .w79{width: 0.79rem;} .w80{width: 0.8rem;} .w81{width: 0.81rem;} .w82{width: 0.82rem;} .w83{width: 0.83rem;} .w84{width: 0.84rem;} .w85{width: 0.85rem;} .w86{width: 0.86rem;} .w87{width: 0.87rem;} .w88{width: 0.88rem;} .w89{width: 0.89rem;} .w90{width: 0.9rem;} .w91{width: 0.91rem;} .w92{width: 0.92rem;} .w93{width: 0.93rem;} .w94{width: 0.94rem;} .w95{width: 0.95rem;} .w96{width: 0.96rem;} .w97{width: 0.97rem;} .w98{width: 0.98rem;} .w99{width: 0.99rem;}
.w100{width: 1rem;}
@@ -905,12 +929,16 @@ body:not(#_) {
.w192{width: 1.92rem;}
.w200{width: 2rem;}
.w244{width: 2.44rem;}
.w263{width: 2.63rem;}
.w444{width: 4.44rem;}
.w706{width: 7.06rem;}
.w1200{width:12rem}
/*height*/
.h0{height: 0rem;}
.h1{height: 0.01rem;} .h2{height: 0.02rem;} .h3{height: 0.03rem;} .h4{height: 0.04rem;} .h5{height: 0.05rem;} .h6{height: 0.06rem;} .h7{height: 0.07rem;} .h8{height: 0.08rem;} .h9{height: 0.09rem;} .h10{height: 0.1rem;} .h11{height: 0.11rem;} .h12{height: 0.12rem;} .h13{height: 0.13rem;} .h14{height: 0.14rem;} .h15{height: 0.15rem;} .h16{height: 0.16rem;} .h17{height: 0.17rem;} .h18{height: 0.18rem;} .h19{height: 0.19rem;} .h20{height: 0.2rem;} .h21{height: 0.21rem;} .h22{height: 0.22rem;} .h23{height: 0.23rem;} .h24{height: 0.24rem;} .h25{height: 0.25rem;} .h26{height: 0.26rem;} .h27{height: 0.27rem;} .h28{height: 0.28rem;} .h29{height: 0.29rem;} .h30{height: 0.3rem;} .h31{height: 0.31rem;} .h32{height: 0.32rem;} .h33{height: 0.33rem;} .h34{height: 0.34rem;} .h35{height: 0.35rem;} .h36{height: 0.36rem;} .h37{height: 0.37rem;} .h38{height: 0.38rem;} .h39{height: 0.39rem;} .h40{height: 0.4rem;} .h41{height: 0.41rem;} .h42{height: 0.42rem;} .h43{height: 0.43rem;} .h44{height: 0.44rem;} .h45{height: 0.45rem;} .h46{height: 0.46rem;} .h47{height: 0.47rem;} .h48{height: 0.48rem;} .h49{height: 0.49rem;} .h50{height: 0.5rem;} .h51{height: 0.51rem;} .h52{height: 0.52rem;} .h53{height: 0.53rem;} .h54{height: 0.54rem;} .h55{height: 0.55rem;} .h56{height: 0.56rem;} .h57{height: 0.57rem;} .h58{height: 0.58rem;} .h59{height: 0.59rem;} .h60{height: 0.6rem;} .h61{height: 0.61rem;} .h62{height: 0.62rem;} .h63{height: 0.63rem;} .h64{height: 0.64rem;} .h65{height: 0.65rem;} .h66{height: 0.66rem;} .h67{height: 0.67rem;} .h68{height: 0.68rem;} .h69{height: 0.69rem;} .h70{height: 0.7rem;} .h71{height: 0.71rem;} .h72{height: 0.72rem;} .h73{height: 0.73rem;} .h74{height: 0.74rem;} .h75{height: 0.75rem;} .h76{height: 0.76rem;} .h77{height: 0.77rem;} .h78{height: 0.78rem;} .h79{height: 0.79rem;} .h80{height: 0.8rem;} .h81{height: 0.81rem;} .h82{height: 0.82rem;} .h83{height: 0.83rem;} .h84{height: 0.84rem;} .h85{height: 0.85rem;} .h86{height: 0.86rem;} .h87{height: 0.87rem;} .h88{height: 0.88rem;} .h89{height: 0.89rem;} .h90{height: 0.9rem;} .h91{height: 0.91rem;} .h92{height: 0.92rem;} .h93{height: 0.93rem;} .h94{height: 0.94rem;} .h95{height: 0.95rem;} .h96{height: 0.96rem;} .h97{height: 0.97rem;} .h98{height: 0.98rem;} .h99{height: 0.99rem;}
.h100{height: 1rem;}
.h452{height: 4.52rem;}
//行高
.lh0{line-height: 0rem;}
@@ -1,317 +1,240 @@
@use '../variables' as *;
// 申请进度消息组件
// 投递进度卡片组件(新版4步骤)
.agent-apply-progress {
background: $bg-middle;
border-radius: 0.12rem;
padding: 0.2rem;
font-size: 0.14rem;
background: $bg-white;
border: 1px solid #F0F0F0;
border-radius: 0.08rem;
padding: 0.16rem 0.2rem;
// 顶部标题栏
&__header {
// 已完成状态
&--completed {
opacity: 0.9;
}
// 顶部区域:岗位信息 + 步骤条
&__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.16rem;
}
&__title {
font-size: 0.15rem;
font-weight: 600;
color: $text-dark;
// 可点击状态(暂停/恢复)
&--clickable {
cursor: pointer;
color: $accent;
&:hover {
opacity: 0.8;
}
}
}
&__cancel {
font-size: 0.13rem;
color: $text-middle;
cursor: pointer;
&:hover {
color: $text-dark;
}
}
// 岗位信息卡片
&__job-card {
display: flex;
align-items: center;
gap: 0.12rem;
background: $bg-white;
border-radius: 0.1rem;
padding: 0.14rem 0.16rem;
margin-bottom: 0.2rem;
}
&__job-icon {
width: 0.36rem;
height: 0.36rem;
border-radius: 0.08rem;
background: $bg-main;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: $text-middle;
svg {
width: 0.2rem;
height: 0.2rem;
}
}
&__job-info {
min-width: 0;
}
&__job-company {
font-size: 0.14rem;
font-weight: 600;
color: $text-dark;
line-height: 1.4;
}
&__job-title {
font-size: 0.12rem;
color: $text-middle;
line-height: 1.4;
}
// 步骤列表
&__steps {
display: flex;
flex-direction: column;
gap: 0.14rem;
}
&__step {
display: flex;
align-items: flex-start;
gap: 0.1rem;
flex-wrap: wrap;
}
// 勾选框
&__step-check {
width: 0.18rem;
height: 0.18rem;
border: 1.5px solid $text-light;
border-radius: 0.03rem;
// 岗位信息
&__job-info {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 0.01rem;
svg {
width: 0.12rem;
height: 0.12rem;
}
// 已完成态
&--done {
border-color: $text-dark;
background: $text-dark;
color: $bg-white;
}
gap: 0.28rem;
}
&__step-label {
font-size: 0.14rem;
&__job-title {
font-size: 0.18rem;
font-weight: 620;
color: $text-dark;
line-height: 0.2rem;
line-height: 0.27rem;
}
// 步骤展开内容
&__step-content {
width: 100%;
margin-top: 0.08rem;
padding-left: 0.28rem;
}
// 第2步:简历确认区域
&__resume-confirm {
display: flex;
align-items: center;
justify-content: space-between;
background: $bg-white;
border-radius: 0.08rem;
padding: 0.1rem 0.14rem;
}
&__resume-file {
&__company {
display: flex;
align-items: center;
gap: 0.08rem;
}
&__file-icon {
width: 0.18rem;
height: 0.18rem;
color: $text-dark;
}
&__company-logo {
width: 0.24rem;
height: 0.24rem;
border-radius: 0.04rem;
object-fit: cover;
&__resume-name {
font-size: 0.13rem;
color: $text-dark;
}
&--placeholder {
background: $bg-main;
display: flex;
align-items: center;
justify-content: center;
color: $text-middle;
&__confirm-btn {
height: 0.28rem;
padding: 0 0.16rem;
background: $btn-dark;
color: $bg-white;
border: none;
border-radius: 0.14rem;
font-size: 0.12rem;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: $btn-dark-hover;
}
&:disabled {
background: $text-light;
cursor: not-allowed;
svg {
width: 0.14rem;
height: 0.14rem;
}
}
}
// 第3步:投递操作区域
&__apply-area {
background: $bg-white;
border-radius: 0.08rem;
padding: 0.14rem 0.16rem;
&__company-name {
font-size: 0.18rem;
font-weight: 330;
color: $text-dark;
line-height: 0.27rem;
}
&__apply-desc {
font-size: 0.12rem;
color: $text-middle;
line-height: 1.8;
margin: 0;
}
&__apply-actions {
// 步骤条
&__steps {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.1rem;
margin-top: 0.14rem;
gap: 0.12rem;
}
&__skip-btn {
font-size: 0.12rem;
color: $text-middle;
cursor: pointer;
text-decoration: underline;
// 步骤项
&__step-item {
display: flex;
align-items: center;
gap: 0.08rem;
}
&:hover {
// 步骤图标
&__step-icon {
width: 0.40rem;
height: 0.40rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
svg {
width: 0.20rem;
height: 0.20rem;
}
// 已完成
&--done {
background: $accent;
color: #fff;
}
// 进行中
&--active {
background: #EDF9FA;
color: $accent;
}
// 待处理
&--pending {
background: $bg-main;
color: $text-middle;
}
}
// 步骤文字区域
&__step-text {
display: flex;
flex-direction: column;
gap: 0.04rem;
}
// 步骤名称
&__step-name {
font-size: 0.14rem;
font-weight: 620;
line-height: 0.19rem;
&--done {
color: $text-dark;
}
&--disabled {
color: $text-light;
cursor: not-allowed;
pointer-events: none;
&--active {
color: $text-dark;
}
&--pending {
color: $text-middle;
}
}
&__applied-btn {
height: 0.28rem;
padding: 0 0.14rem;
background: $btn-dark;
color: $bg-white;
border: none;
border-radius: 0.14rem;
// 步骤状态文字
&__step-status {
font-size: 0.12rem;
cursor: pointer;
transition: all 0.2s;
font-weight: 330;
line-height: 0.16rem;
&:hover {
background: $btn-dark-hover;
&--done {
color: #9FD051;
}
&:disabled {
background: $text-light;
cursor: not-allowed;
&--active {
color: #F59E0B;
}
&--pending {
color: $text-middle;
}
}
&__goto-btn {
height: 0.28rem;
padding: 0 0.14rem;
background: $btn-dark;
color: $bg-white;
border: none;
border-radius: 0.14rem;
font-size: 0.12rem;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: $btn-dark-hover;
}
&:disabled {
background: $text-light;
cursor: not-allowed;
}
}
}
// 右侧面板:简历生成进度
.agent-resume-generating {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 0.4rem;
// 进度条容器
&__progress-bar {
width: 100%;
max-width: 3rem;
height: 0.04rem;
background: $border-color;
border-radius: 0.02rem;
overflow: hidden;
margin-bottom: 0.2rem;
// 步骤连接线
&__step-line {
width: 0.40rem;
height: 0.02rem;
background: #E5E7EB;
flex-shrink: 0;
}
&__progress-fill {
height: 100%;
background: $text-dark;
border-radius: 0.02rem;
transition: width 0.3s ease;
}
&__title {
font-size: 0.18rem;
font-weight: 700;
color: $text-dark;
margin-bottom: 0.1rem;
// 底部区域:提示 + 按钮
&__bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 0.16rem;
}
// 提示文字
&__hint {
font-size: 0.14rem;
font-weight: 450;
color: $text-middle;
line-height: 0.19rem;
// 警告色(橙色)
&--warning {
color: #F59E0B;
}
// 匹配度偏低(红橙色)
&--low-match {
color: #FE6D52;
}
// 强调色(品牌色)
&--accent {
color: $accent;
}
}
// 操作按钮区
&__actions {
display: flex;
align-items: center;
gap: 0.06rem;
font-size: 0.12rem;
color: $text-middle;
gap: 0.16rem;
}
&__hint-icon {
width: 0.14rem;
height: 0.14rem;
color: $accent;
// 按钮基础样式
&__btn {
height: 0.27rem;
padding: 0.04rem 0.12rem;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 380;
line-height: 0.19rem;
text-align: center;
cursor: pointer;
border: none;
transition: opacity 0.2s;
&:hover {
opacity: 0.85;
}
// 边框按钮
&--outline {
background: transparent;
border: 1px solid $accent;
color: $accent;
}
// 实心按钮
&--primary {
background: $accent;
color: #FFFFFF;
}
}
}
@@ -0,0 +1,158 @@
// Agent浏览器插件安装步骤指引组件样式
@use '../variables' as *;
/* 步骤内容区域 */
.agent-browser-guide-drawer__body {
flex: 1;
overflow-y: auto;
padding: 0 0.32rem 0.32rem;
display: flex;
flex-direction: column;
gap: 0.16rem;
font-size: 0.14rem;
}
/* 步骤卡片 */
.agent-browser-guide-drawer__card {
border: 1px solid #F0F0F0;
border-radius: 0.12rem;
padding: 0.16rem 0.2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.agent-browser-guide-drawer__step-row {
display: flex;
align-items: flex-start;
gap: 0.12rem;
margin-bottom: 0.16rem;
margin-right: 1rem;
}
.agent-browser-guide-drawer__step-num {
display: flex;
justify-content: center;
align-items: 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;
}
.agent-browser-guide-drawer__step-info {
flex: 1;
}
.agent-browser-guide-drawer__step-title {
font-size: 0.18rem;
font-weight: 620;
color: $text-dark;
line-height: 0.24rem;
margin: 0 0 0.04rem;
}
.agent-browser-guide-drawer__step-desc {
font-size: 0.14rem;
font-weight: 330;
color: $text-middle;
line-height: 0.19rem;
margin: 0;
}
/* 下载按钮区域 */
.agent-browser-guide-drawer__download-box {
display: flex;
align-items: center;
gap: 0.16rem;
padding: 0.04rem 0.04rem 0.04rem 0.16rem;
background: $bg-main;
border-radius: 0.12rem;
height: 0.44rem;
margin-left: 0.4rem;
}
.agent-browser-guide-drawer__download-name {
font-size: 0.14rem;
font-weight: 450;
color: $text-dark;
line-height: 0.19rem;
}
.agent-browser-guide-drawer__download-btn {
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: background 0.2s;
&:hover {
background: $accent-hover;
}
}
/* 浏览器链接区域 */
.agent-browser-guide-drawer__browser-links {
display: flex;
align-items: flex-start;
gap: 0.24rem;
margin-bottom: 0.16rem;
margin-left: 0.4rem;
}
.agent-browser-guide-drawer__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;
font-size: 0.14rem;
font-weight: 450;
color: $text-middle;
cursor: pointer;
transition: border-color 0.2s;
&:hover {
border-color: $accent;
}
svg {
flex-shrink: 0;
}
span {
white-space: nowrap;
}
}
.agent-browser-guide-drawer__copy-btn {
display: flex;
align-items: center;
gap: 0.04rem;
color: $accent;
font-size: 0.14rem;
font-weight: 450;
margin-left: 0.12rem;
}
/* 步骤示意图 */
.agent-browser-guide-drawer__step-img {
width: 100%;
max-width: 3.52rem;
border-radius: 0.08rem;
margin-top: 0.12rem;
margin-left: 0.4rem;
}
@@ -2,25 +2,50 @@
// ==================== Agent推荐岗位列表组件样式 ====================
.agent-chat-job-list {
background: $bg-middle;
background: $bg-white;
border: 1px solid #F0F0F0;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
border-radius: 0.12rem;
padding: 0.24rem;
font-size: 0.14rem;
// 标题
&__header {
font-size: 0.18rem;
font-weight: 700;
font-size: 0.22rem;
font-weight: 620;
color: $text-dark;
margin-bottom: 0.06rem;
margin-bottom: 0.04rem;
line-height: 0.29rem;
}
// 推荐说明文字
&__summary {
font-size: 0.13rem;
font-size: 0.14rem;
font-weight: 330;
color: $text-middle;
margin-bottom: 0.18rem;
line-height: 1.5;
margin-bottom: 0.16rem;
line-height: 0.19rem;
}
// 可滚动岗位列表区域(默认显示约3.5个岗位高度)
&__scroll {
max-height: 3.64rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: $border-color transparent;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: $border-color;
border-radius: 2px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
// 单个岗位项
@@ -28,31 +53,38 @@
display: flex;
align-items: center;
justify-content: space-between;
background: $bg-white;
border-radius: 0.1rem;
flex-wrap: wrap;
padding: 0.16rem 0.2rem;
margin-bottom: 0.1rem;
border: 1px solid #F0F0F0;
border-radius: 0.08rem;
margin-bottom: 0.08rem;
cursor: pointer;
transition: border-color 0.2s ease;
&:last-of-type {
&:last-child {
margin-bottom: 0;
}
&:hover {
border-color: $accent;
}
}
// 左侧信息区域(可点击
&__info {
// 左侧区域(匹配度 + 岗位信息
&__left {
display: flex;
align-items: center;
gap: 0.14rem;
flex-wrap: wrap;
gap: 0.16rem;
flex: 1;
min-width: 0;
cursor: pointer;
}
// 匹配度环形容器
&__score {
width: 0.62rem;
height: 0.62rem;
position: relative;
width: 0.48rem;
height: 0.48rem;
flex-shrink: 0;
}
@@ -68,98 +100,148 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.11rem;
font-weight: 700;
color: $text-dark;
font-size: 0.14rem;
font-weight: 630;
color: #9FD051;
line-height: 0.22rem;
}
// 岗位详情
// 岗位详情区域
&__detail {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.24rem;
}
// 岗位标题行(岗位名 + 公司
// 岗位标题行(岗位名 + 公司)
&__title-row {
display: flex;
align-items: center;
gap: 0.08rem;
margin-bottom: 0.04rem;
flex-wrap: wrap;
gap: 0.32rem;
}
// 岗位名称
&__title {
font-size: 0.15rem;
font-weight: 600;
font-size: 0.18rem;
font-weight: 620;
color: $text-dark;
line-height: 1.4;
line-height: 0.27rem;
}
// 公司名前的圆点
&__company-dot {
font-size: 0.08rem;
color: $text-light;
// 公司信息容器
&__company {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.08rem;
}
// 公司 Logo
&__company-logo {
width: 0.24rem;
height: 0.24rem;
border-radius: 0.04rem;
object-fit: cover;
}
// 公司名称
&__company {
font-size: 0.13rem;
color: $text-middle;
&__company-name {
font-size: 0.18rem;
font-weight: 330;
color: $text-dark;
line-height: 0.27rem;
white-space: nowrap;
}
// 标签行
&__tags {
display: flex;
gap: 0.06rem;
align-items: center;
flex-wrap: wrap;
gap: 0.12rem;
}
// 单个标签
&__tag {
font-size: 0.11rem;
font-size: 0.14rem;
font-weight: 330;
color: $text-middle;
background: $bg-main;
padding: 0.02rem 0.08rem;
border-radius: 0.03rem;
line-height: 0.19rem;
display: flex;
align-items: center;
gap: 0.02rem;
svg {
width: 0.16rem;
height: 0.16rem;
color: $text-middle;
}
// 招聘分类标签(校招等)
&--category {
padding: 0.02rem 0.04rem;
background: #EDF9FA;
border-radius: 0.04rem;
font-size: 0.12rem;
color: $accent;
}
}
// 右侧操作按钮区域
&__actions {
display: flex;
align-items: center;
gap: 0.14rem;
flex-wrap: wrap;
gap: 0.08rem;
flex-shrink: 0;
margin-left: 0.16rem;
}
// 不再推荐按钮
&__dismiss-btn {
font-size: 0.12rem;
color: $text-light;
height: 0.35rem;
padding: 0 0.12rem;
background: transparent;
border: none;
font-size: 0.14rem;
font-weight: 620;
color: $accent;
cursor: pointer;
white-space: nowrap;
transition: color 0.2s ease;
transition: opacity 0.2s ease;
border-radius: 0.08rem;
&:hover {
color: $text-middle;
opacity: 0.7;
}
}
// 加入投递按钮
&__add-btn {
height: 0.32rem;
padding: 0 0.16rem;
display: flex;
align-items: center;
gap: 0.04rem;
height: 0.35rem;
padding: 0 0.12rem;
background: $accent;
color: $bg-white;
border: none;
border-radius: 0.16rem;
font-size: 0.12rem;
font-weight: 500;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 620;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
line-height: 0.32rem;
svg {
width: 0.16rem;
height: 0.16rem;
flex-shrink: 0;
}
&:hover {
opacity: 0.85;
@@ -172,37 +254,55 @@
// 已加入状态
&--added {
background: $bg-main;
color: $text-middle;
border: 1px solid $border-color;
background: transparent;
color: $accent;
border: 1px solid $accent;
}
}
// 空状态
&__empty {
text-align: center;
color: $text-light;
padding: 0.4rem 0;
font-size: 0.14rem;
}
// 底部按钮区域
&__footer {
display: flex;
justify-content: center;
gap: 0.16rem;
margin-top: 0.2rem;
gap: 0.32rem;
margin-top: 0.24rem;
flex-wrap: wrap;
}
// 换一批按钮
&__refresh-btn {
height: 0.4rem;
padding: 0 0.4rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.04rem;
height: 0.43rem;
padding: 0 0.16rem;
min-width: 2.8rem;
background: $bg-white;
color: $text-dark;
border: 1px solid $border-color;
border-radius: 0.2rem;
color: $accent;
border: 1px solid $accent;
border-radius: 0.22rem;
font-size: 0.14rem;
font-weight: 500;
font-weight: 620;
cursor: pointer;
transition: all 0.2s ease;
line-height: 0.4rem;
svg {
width: 0.16rem;
height: 0.16rem;
flex-shrink: 0;
}
&:hover {
border-color: $accent;
color: $accent;
background: #EDF9FA;
}
&:disabled {
@@ -213,17 +313,27 @@
// 全部添加按钮
&__add-all-btn {
height: 0.4rem;
padding: 0 0.4rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.04rem;
height: 0.43rem;
padding: 0 0.16rem;
min-width: 2.8rem;
background: $accent;
color: $bg-white;
border: none;
border-radius: 0.2rem;
border-radius: 0.22rem;
font-size: 0.14rem;
font-weight: 500;
font-weight: 620;
cursor: pointer;
transition: all 0.2s ease;
line-height: 0.4rem;
svg {
width: 0.16rem;
height: 0.16rem;
flex-shrink: 0;
}
&:hover {
opacity: 0.85;
@@ -1,187 +1,113 @@
@use '../variables' as *;
/* Agent岗位预览面板样式 */
.agent-job-preview-panel {
/* Agent岗位预览抽屉 — 从浏览器右侧弹出 */
/* 遮罩层 */
.agent-job-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-job-drawer {
width: 6.4rem;
height: var(--app-height, 100vh);
background: $bg-white;
display: flex;
flex-direction: column;
height: 100%;
background: $bg-white;
border-radius: 0.2rem;
overflow: hidden;
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.16rem 0.2rem;
border-bottom: 1px solid $border-color;
padding: 0.2rem 0.24rem;
height: 0.64rem;
box-sizing: border-box;
}
/* 返回按钮 */
&__back {
&__header-left {
display: flex;
align-items: center;
gap: 0.06rem;
gap: 0.16rem;
}
/* 关闭按钮 */
&__close {
width: 0.24rem;
height: 0.24rem;
cursor: pointer;
font-size: 0.15rem;
font-weight: 500;
color: $text-dark;
display: flex;
align-items: center;
justify-content: center;
}
&__back-icon {
width: 0.16rem;
height: 0.16rem;
}
/* 添加按钮 */
&__add-btn {
padding: 0.06rem 0.16rem;
background: $btn-dark;
color: $bg-white;
border: none;
border-radius: 0.06rem;
font-size: 0.13rem;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: $btn-dark-hover;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
/* 移出按钮 */
&__remove-btn {
padding: 0.06rem 0.16rem;
background: $bg-white;
&__close-icon {
width: 0.24rem;
height: 0.24rem;
color: $text-middle;
border: 1px solid $border-color;
border-radius: 0.06rem;
font-size: 0.13rem;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
&:hover {
background: $bg-main;
color: $danger;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* 标题文字 */
&__title {
font-size: 0.18rem;
font-weight: 620;
color: $text-dark;
line-height: 0.24rem;
}
/* 内容区域(可滚动) */
&__body {
flex: 1;
overflow-y: auto;
padding: 0.2rem;
padding: 0.24rem;
}
/* 岗位卡片 */
&__card {
background: $bg-main;
border-radius: 0.12rem;
padding: 0.2rem;
margin-bottom: 0.16rem;
}
&__card-top {
/* 岗位标题区域 */
&__job-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.24rem;
margin-bottom: 0.24rem;
}
&__card-left {
&__job-info {
flex: 1;
min-width: 0;
}
/* 公司行 */
&__company-row {
display: flex;
align-items: center;
gap: 0.08rem;
margin-bottom: 0.08rem;
}
&__company-icon {
width: 0.28rem;
height: 0.28rem;
border-radius: 0.06rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: $bg-middle;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
svg {
width: 0.18rem;
height: 0.18rem;
color: $text-middle;
}
}
&__company-name {
font-size: 0.14rem;
font-weight: 500;
color: $text-dark;
}
&__time {
font-size: 0.12rem;
color: $text-light;
margin-left: 0.06rem;
}
/* 岗位标题 */
&__job-title {
font-size: 0.17rem;
font-weight: 600;
font-size: 0.24rem;
font-weight: 620;
color: $text-dark;
margin: 0.06rem 0 0.1rem;
line-height: 0.32rem;
margin: 0 0 0.08rem;
}
/* 元信息 */
&__meta {
display: flex;
align-items: center;
gap: 0.16rem;
flex-wrap: wrap;
}
&__meta-item {
display: flex;
align-items: center;
gap: 0.04rem;
font-size: 0.12rem;
color: $text-middle;
}
&__meta-icon {
width: 0.14rem;
height: 0.14rem;
flex-shrink: 0;
line-height: 0.16rem;
font-weight: 330;
}
/* 匹配度环 */
&__match {
position: relative;
width: 0.6rem;
height: 0.6rem;
width: 0.62rem;
height: 0.62rem;
flex-shrink: 0;
}
@@ -195,28 +121,141 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.13rem;
font-weight: 600;
color: $text-dark;
font-size: 0.14rem;
font-weight: 630;
color: #9FD051;
}
/* 内容段落 */
&__section {
margin-bottom: 0.2rem;
margin-bottom: 0.24rem;
}
&__section-title {
font-size: 0.14rem;
font-size: 0.18rem;
font-weight: 600;
color: $text-dark;
margin-bottom: 0.1rem;
line-height: 0.24rem;
margin-bottom: 0.16rem;
/* 加分项标题样式 */
&--bonus {
font-size: 0.14rem;
font-weight: 330;
color: $text-dark;
line-height: 0.19rem;
}
}
&__section-content {
font-size: 0.13rem;
font-size: 0.14rem;
color: $text-middle;
line-height: 1.8;
line-height: 0.19rem;
font-weight: 330;
white-space: pre-wrap;
word-break: break-word;
}
/* 技能标签 */
&__tags {
display: flex;
flex-wrap: wrap;
gap: 0.08rem;
margin-bottom: 0.12rem;
}
&__tag {
display: flex;
justify-content: center;
align-items: center;
padding: 0.04rem 0.06rem;
background: $bg-main;
border-radius: 0.04rem;
font-size: 0.12rem;
color: $text-middle;
line-height: 0.18rem;
font-weight: 330;
}
/* 公司概况 */
&__company {
display: flex;
flex-direction: column;
gap: 0.12rem;
}
&__company-row {
display: flex;
align-items: flex-start;
gap: 0.12rem;
}
&__company-logo {
width: 0.48rem;
height: 0.48rem;
border-radius: 0.08rem;
overflow: hidden;
flex-shrink: 0;
background: #EDF9FA;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
svg {
width: 0.32rem;
height: 0.32rem;
}
}
&__company-info {
display: flex;
flex-direction: column;
gap: 0.06rem;
}
&__company-name {
font-size: 0.18rem;
font-weight: 620;
color: $text-dark;
line-height: 0.24rem;
}
&__company-detail {
font-size: 0.14rem;
font-weight: 400;
color: $text-middle;
line-height: 0.19rem;
}
&__company-desc {
font-size: 0.14rem;
font-weight: 330;
color: $text-middle;
line-height: 0.24rem;
}
}
/* 抽屉动画 */
.agent-job-drawer-enter-active,
.agent-job-drawer-leave-active {
transition: opacity 0.3s ease;
.agent-job-drawer {
transition: transform 0.3s ease;
}
}
.agent-job-drawer-enter-from,
.agent-job-drawer-leave-to {
opacity: 0;
.agent-job-drawer {
transform: translateX(100%);
}
}
@@ -1,185 +1,632 @@
@use '../variables' as *;
// ==================== Agent设置面板样式(精简版 ====================
// ==================== Agent设置面板样式(重新设计 ====================
.agent-setting-panel {
height: 100%;
background: $bg-middle;
border-radius: 0.12rem;
position: relative;
width: 3.60rem;
height: var(--app-height, 100vh);
background: #FFFFFF;
font-size: 0.14rem;
overflow-y: auto;
// 隐藏滚动条
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar { display: none; }
// 内容区域
&__body {
padding: 0.28rem 0.24rem;
// 头部标题区
&__header {
padding: 0.24rem 0.24rem 0;
}
// 每个设置区块
&__title {
font-size: 0.20rem;
font-weight: 630;
line-height: 0.27rem;
color: #1A1A1A;
}
&__subtitle {
margin-top: 0.04rem;
font-size: 0.14rem;
font-weight: 330;
line-height: 0.19rem;
color: #6B7280;
}
// 分隔线
&__divider {
width: 3.12rem;
height: 1px;
margin: 0.24rem auto;
background: #F0F0F0;
}
// 通用区块
&__section {
margin-bottom: 0.28rem;
&:last-child {
margin-bottom: 0;
}
padding: 0 0.24rem;
margin-bottom: 0.08rem;
}
// 区块头部(标题 + 编辑按钮)
// 区块头部
&__section-header {
display: flex;
align-items: center;
gap: 0.1rem;
margin-bottom: 0.12rem;
justify-content: space-between;
margin-bottom: 0.08rem;
}
// 区块标题
&__section-title {
font-size: 0.16rem;
font-weight: 700;
color: $text-dark;
font-weight: 620;
line-height: 0.21rem;
color: #1A1A1A;
}
// 编辑按钮
&__edit-btn {
font-size: 0.13rem;
display: flex;
align-items: center;
gap: 0.04rem;
font-size: 0.14rem;
font-weight: 450;
color: $accent;
cursor: pointer;
white-space: nowrap;
svg {
width: 0.14rem;
height: 0.14rem;
}
&:hover {
opacity: 0.7;
}
}
// 个人资料信息
&__profile-info {
padding-left: 0.02rem;
}
&__profile-name {
font-size: 0.18rem;
font-weight: 600;
color: $text-dark;
margin-bottom: 0.04rem;
}
&__profile-sub {
font-size: 0.13rem;
// 个人信息文字
&__info-text {
font-size: 0.14rem;
font-weight: 330;
line-height: 0.19rem;
color: $text-middle;
}
// 求职目标标签
&__goal-tags {
display: flex;
flex-wrap: wrap;
gap: 0.08rem;
// 求职偏好内容
&__goal-content {
font-size: 0.14rem;
font-weight: 330;
line-height: 0.24rem;
color: $text-middle;
p {
margin: 0;
}
}
&__goal-tag {
padding: 0.06rem 0.14rem;
border: 1px solid $accent;
border-radius: 0.16rem;
font-size: 0.13rem;
color: $accent;
background: transparent;
}
// 空状态文字
// 空状态
&__empty-text {
font-size: 0.13rem;
font-size: 0.14rem;
color: $text-light;
}
// 简历选择下拉
&__resume-select {
width: 100%;
margin-top: 0.06rem;
.el-input__wrapper {
border-radius: 0.08rem;
}
}
// 投递偏好项
&__pref-item {
// 简历下拉
&__resume-dropdown {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: space-between;
padding: 0.12rem 0;
padding: 0.08rem 0.12rem;
margin-top: 0.08rem;
background: #F3F4F6;
border-radius: 0.08rem;
cursor: pointer;
}
& + & {
border-top: none;
&__resume-name {
font-size: 0.14rem;
font-weight: 450;
color: $text-middle;
}
&__resume-arrow {
width: 0.14rem;
height: 0.14rem;
transition: transform 0.2s;
&--open {
transform: rotate(180deg);
}
}
&__pref-left {
display: flex;
align-items: flex-start;
gap: 0.1rem;
flex: 1;
min-width: 0;
&__resume-options {
margin-top: 0.04rem;
background: #FFFFFF;
border: 1px solid #F0F0F0;
border-radius: 0.08rem;
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.06);
overflow: hidden;
}
// 勾选图标
&__pref-check {
width: 0.2rem;
height: 0.2rem;
flex-shrink: 0;
color: $text-light;
margin-top: 0.02rem;
&__resume-option {
padding: 0.08rem 0.12rem;
font-size: 0.14rem;
color: $text-dark;
cursor: pointer;
svg {
width: 100%;
height: 100%;
&:hover {
background: #F6FCFC;
}
&--active {
color: $text-dark;
color: $accent;
background: #F6FCFC;
}
}
// 偏好文字
&__pref-text {
// 开关项
&__switch-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.16rem 0;
}
&__switch-text {
display: flex;
flex-direction: column;
gap: 0.03rem;
gap: 0.04rem;
}
&__pref-label {
&__switch-label {
font-size: 0.14rem;
font-weight: 500;
color: $text-dark;
font-weight: 450;
line-height: 0.19rem;
color: #1A1A1A;
}
&__pref-desc {
&__switch-desc {
font-size: 0.12rem;
color: $text-light;
line-height: 1.4;
font-weight: 330;
line-height: 0.16rem;
color: $text-middle;
}
// 浏览器按钮
// 自定义开关
&__toggle {
position: relative;
width: 0.42rem;
height: 0.24rem;
background: #F3F4F6;
border-radius: 0.12rem;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
&--on {
background: $accent;
.agent-setting-panel__toggle-dot {
left: 0.20rem;
}
}
}
&__toggle-dot {
position: absolute;
width: 0.18rem;
height: 0.18rem;
left: 0.04rem;
top: 0.03rem;
background: #FFFFFF;
border-radius: 50%;
transition: left 0.2s;
}
// 浏览器插件按钮
&__browser-btns {
display: flex;
gap: 0.1rem;
margin-top: 0.08rem;
gap: 0.16rem;
margin-top: 0.12rem;
}
&__browser-btn {
padding: 0.08rem 0.2rem;
background: $bg-white;
border: 1px solid $border-color;
border-radius: 0.2rem;
font-size: 0.13rem;
color: $text-dark;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 0.04rem;
padding: 0.12rem 0.16rem;
background: #FFFFFF;
border: 1px solid #F0F0F0;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 450;
color: $text-middle;
cursor: pointer;
transition: all 0.2s ease;
transition: border-color 0.2s;
svg {
width: 0.16rem;
height: 0.16rem;
}
&:hover {
border-color: $accent;
color: $accent;
}
&--active {
border-color: $accent;
}
}
// ==================== 编辑弹窗 ====================
&__edit-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 2000;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding-top: 1.20rem;
padding-right: 0.30rem;
}
&__edit-dialog {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.24rem 0.32rem;
gap: 0.24rem;
width: 4.80rem;
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
border: 1px solid #F0F0F0;
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
border-radius: 0.12rem;
font-size: 0.14rem;
}
&__edit-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
&__edit-dialog-title {
font-size: 0.18rem;
font-weight: 620;
line-height: 0.24rem;
color: #1A1A1A;
}
&__edit-dialog-close {
width: 0.24rem;
height: 0.24rem;
cursor: pointer;
&:hover {
opacity: 0.6;
}
}
&__edit-dialog-body {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.16rem;
}
&__edit-row {
display: flex;
gap: 0.08rem;
}
&__edit-field {
display: flex;
flex-direction: column;
gap: 0.08rem;
flex: 1;
&--full {
width: 100%;
}
}
&__edit-label {
font-size: 0.14rem;
font-weight: 330;
line-height: 0.19rem;
color: $text-middle;
}
&__edit-input {
box-sizing: border-box;
width: 100%;
padding: 0.08rem 0.16rem;
background: #FFFFFF;
border: 1px solid #AEE6EA;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 330;
line-height: 0.19rem;
color: #1A1A1A;
outline: none;
transition: border-color 0.2s;
&:focus {
border-color: $accent;
}
&::placeholder {
color: $text-light;
}
}
&__edit-city {
width: 100%;
}
&__edit-dialog-save {
width: 100%;
padding: 0.12rem 0.16rem;
background: $accent;
border: none;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 450;
line-height: 0.19rem;
color: #FFFFFF;
cursor: pointer;
transition: opacity 0.2s;
&:hover {
opacity: 0.85;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
// ==================== 浏览器插件安装教程抽屉 ====================
/* 遮罩层 */
.agent-browser-guide-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-browser-guide-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;
padding: 0.2rem 0.24rem;
height: 0.64rem;
box-sizing: border-box;
}
&__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;
}
/* 内容区域 */
&__body {
flex: 1;
overflow-y: auto;
padding: 0 0.32rem 0.32rem;
display: flex;
flex-direction: column;
gap: 0.16rem;
font-size: 0.14rem;
}
/* 步骤卡片 */
&__card {
border: 1px solid #F0F0F0;
border-radius: 0.12rem;
padding: 0.16rem 0.2rem;
display: flex;
flex-wrap: wrap;
}
&__step-row {
display: flex;
align-items: flex-start;
gap: 0.12rem;
margin-bottom: 0.16rem;
margin-right: 1rem;
}
&__step-num {
display: flex;
justify-content: center;
align-items: 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;
}
&__step-info {
flex: 1;
}
&__step-title {
font-size: 0.18rem;
font-weight: 620;
color: $text-dark;
line-height: 0.24rem;
margin: 0 0 0.04rem;
}
&__step-desc {
font-size: 0.14rem;
font-weight: 330;
color: $text-middle;
line-height: 0.19rem;
margin: 0;
}
/* 下载按钮区域 */
&__download-box {
display: flex;
align-items: center;
gap: 0.16rem;
padding: 0.04rem 0.04rem 0.04rem 0.16rem;
background: $bg-main;
border-radius: 0.12rem;
height: 0.44rem;
margin-left: 0.4rem;
}
&__download-name {
font-size: 0.14rem;
font-weight: 450;
color: $text-dark;
line-height: 0.19rem;
}
&__download-btn {
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: background 0.2s;
&:hover {
background: $accent-hover;
}
}
/* 浏览器链接区域 */
&__browser-links {
display: flex;
align-items: flex-start;
gap: 0.24rem;
margin-bottom: 0.16rem;
margin-left: 0.4rem;
}
&__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;
font-size: 0.14rem;
font-weight: 450;
color: $text-middle;
cursor: pointer;
transition: border-color 0.2s;
&:hover {
border-color: $accent;
}
svg {
flex-shrink: 0;
}
span {
white-space: nowrap;
}
}
&__copy-btn {
display: flex;
align-items: center;
gap: 0.04rem;
color: $accent;
font-size: 0.14rem;
font-weight: 450;
margin-left: 0.12rem;
}
/* 步骤示意图 */
&__step-img {
width: 100%;
max-width: 3.52rem;
border-radius: 0.08rem;
margin-top: 0.12rem;
margin-left: 0.4rem;
}
}
/* 抽屉动画 */
.agent-browser-guide-drawer-enter-active,
.agent-browser-guide-drawer-leave-active {
transition: opacity 0.3s ease;
.agent-browser-guide-drawer {
transition: transform 0.3s ease;
}
}
.agent-browser-guide-drawer-enter-from,
.agent-browser-guide-drawer-leave-to {
opacity: 0;
.agent-browser-guide-drawer {
transform: translateX(100%);
}
}
@@ -0,0 +1,220 @@
@use '../variables' as *;
/* 投递任务抽屉 — 从浏览器右侧弹出 */
/* 遮罩层 */
.agent-task-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-task-drawer {
width: 6.4rem;
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;
}
&__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;
}
/* Tab 切换按钮区域 */
&__tabs {
display: flex;
align-items: flex-start;
gap: 0.16rem;
padding: 0 0.24rem 0.2rem;
}
&__tab {
display: flex;
align-items: center;
padding: 0.08rem 0.12rem;
gap: 0.04rem;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 450;
line-height: 0.19rem;
cursor: pointer;
border: 1px solid #F0F0F0;
background: $bg-white;
color: $text-middle;
transition: all 0.2s;
&--active {
background: $accent;
color: $bg-white;
border-color: $accent;
}
}
/* 列表内容区域 */
&__body {
flex: 1;
overflow-y: auto;
padding: 0 0.24rem 0.2rem;
display: flex;
flex-direction: column;
gap: 0.16rem;
}
/* 空状态 */
&__empty {
text-align: center;
color: $text-light;
font-size: 0.14rem;
padding: 0.4rem 0;
}
/* 岗位卡片 */
&__card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.16rem 0.2rem;
background: $bg-white;
border: 1px solid #F0F0F0;
border-radius: 0.08rem;
box-sizing: border-box;
}
&__card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.12rem;
}
/* 岗位标题 */
&__card-title {
font-size: 0.18rem;
font-weight: 620;
color: $text-dark;
line-height: 0.27rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 公司信息行 */
&__card-company {
display: flex;
align-items: center;
gap: 0.08rem;
font-size: 0.18rem;
font-weight: 330;
color: $text-dark;
line-height: 0.27rem;
}
&__card-logo {
width: 0.24rem;
height: 0.24rem;
border-radius: 0.04rem;
object-fit: cover;
flex-shrink: 0;
}
&__card-logo-placeholder {
width: 0.24rem;
height: 0.24rem;
color: $text-light;
flex-shrink: 0;
}
/* 移出任务按钮 */
&__remove-btn {
display: flex;
align-items: center;
padding: 0.08rem 0.12rem;
gap: 0.04rem;
border: 1px solid $accent;
border-radius: 0.08rem;
background: $bg-white;
font-size: 0.14rem;
font-weight: 450;
color: $accent;
line-height: 0.19rem;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
flex-shrink: 0;
&:hover {
background: $accent;
color: $bg-white;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
/* 抽屉动画 */
.agent-task-drawer-enter-active,
.agent-task-drawer-leave-active {
transition: opacity 0.3s ease;
.agent-task-drawer {
transition: transform 0.3s ease;
}
}
.agent-task-drawer-enter-from,
.agent-task-drawer-leave-to {
opacity: 0;
.agent-task-drawer {
transform: translateX(100%);
}
}
+3 -3
View File
@@ -42,7 +42,7 @@
&__name {
font-size: 0.15rem;
font-weight: 520;
font-weight: 620;
line-height: 0.22rem;
color: $text-dark;
}
@@ -99,7 +99,7 @@
&__welcome-title {
font-size: 0.14rem;
font-weight: 520;
font-weight: 620;
line-height: 0.16rem;
color: $text-dark;
}
@@ -299,7 +299,7 @@
&__topics-title {
font-size: 0.14rem;
font-weight: 520;
font-weight: 620;
line-height: 0.19rem;
color: #52CAD1;
}
@@ -56,15 +56,11 @@
// ==================== 下拉面板 ====================
&__panel {
position: absolute;
top: calc(100% + 0.06rem);
left: 0;
width: 3.6rem;
background: $bg-white;
border: 1px solid $border-color;
border-radius: 0.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 100;
padding: 0.1rem;
// 只显示一栏时缩窄面板
@@ -57,15 +57,11 @@
// ==================== 下拉面板 ====================
&__panel {
position: absolute;
top: calc(100% + 0.06rem);
left: 0;
width: 4.8rem;
background: $bg-white;
border: 1px solid $border-color;
border-radius: 0.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 100;
padding: 0.1rem;
// 只显示一栏时缩窄面板
+81 -101
View File
@@ -1,145 +1,125 @@
@use '../variables' as *;
// ==================== 求职偏好弹窗样式重新设计 ====================
// 遮罩层 右上角定位
.job-goal-dialog__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 2000;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding-top: 1.20rem;
padding-right: 0.30rem;
}
.job-goal-dialog {
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0;
}
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.24rem 0.32rem;
gap: 0.24rem;
width: 4.80rem;
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
border: 1px solid #F0F0F0;
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
border-radius: 0.12rem;
font-size: 0.14rem;
// 头部
&__header {
display: flex;
align-items: center;
gap: 0.12rem;
padding: 0.2rem 0.24rem 0.16rem;
}
&__close-btn {
background: none;
border: none;
cursor: pointer;
color: $text-dark;
font-size: 0.16rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.04rem;
border-radius: 0.04rem;
transition: background 0.2s;
&:hover {
background: $bg-main;
}
justify-content: space-between;
width: 100%;
}
&__title {
font-size: 0.16rem;
font-weight: 700;
color: $text-dark;
font-size: 0.18rem;
font-weight: 620;
line-height: 0.24rem;
color: #1A1A1A;
}
&__close-btn {
width: 0.24rem;
height: 0.24rem;
cursor: pointer;
&:hover {
opacity: 0.6;
}
}
// 表单区块
&__section {
padding: 0.12rem 0.24rem;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.08rem;
}
&__label {
font-size: 0.14rem;
font-weight: 600;
color: $text-dark;
margin-bottom: 0.12rem;
}
&__tags {
display: flex;
flex-wrap: wrap;
gap: 0.08rem;
margin-bottom: 0.1rem;
}
&__tag {
display: inline-flex;
align-items: center;
gap: 0.06rem;
background: $bg-main;
border: 1px solid $border-color;
border-radius: 0.16rem;
padding: 0.05rem 0.12rem;
font-size: 0.13rem;
color: $text-dark;
}
&__tag-close {
cursor: pointer;
font-size: 0.12rem;
color: $text-light;
transition: color 0.2s;
&:hover {
color: $danger;
}
}
&__select {
width: 100%;
.el-select__wrapper {
background: $bg-main;
border-radius: 0.08rem;
box-shadow: none;
border: 1px solid $border-color;
}
font-weight: 330;
line-height: 0.19rem;
color: $text-middle;
}
// 招聘类型按钮组
&__type-group {
display: flex;
gap: 0.12rem;
gap: 0.10rem;
}
&__type-btn {
flex: 1;
padding: 0.1rem 0;
border: 1px solid $border-color;
border-radius: 0.2rem;
background: $bg-white;
color: $text-dark;
font-size: 0.13rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.08rem 0.16rem;
width: 0.96rem;
height: 0.35rem;
background: #F3F4F6;
border: none;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 330;
color: #1A1A1A;
cursor: pointer;
transition: all 0.2s;
&:hover {
border-color: $text-light;
opacity: 0.8;
}
&--active {
background: $btn-dark;
border-color: $btn-dark;
color: $bg-white;
font-weight: 500;
background: $accent;
color: #FFFFFF;
}
}
&__footer {
padding: 0.3rem 0.24rem 0.24rem;
display: flex;
justify-content: center;
}
// 保存按钮
&__save-btn {
width: 100%;
padding: 0.12rem 0;
padding: 0.12rem 0.16rem;
background: $accent;
color: $bg-white;
border: none;
border-radius: 0.24rem;
font-size: 0.16rem;
font-weight: 600;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 450;
line-height: 0.19rem;
color: #FFFFFF;
cursor: pointer;
transition: background 0.2s;
transition: opacity 0.2s;
&:hover {
background: $accent-hover;
opacity: 0.85;
}
}
}
@@ -1,5 +1,86 @@
@use '../variables' as *;
/* ==================== 岗位统计卡片 ==================== */
.job-stats-cards {
display: flex;
align-items: center;
gap: 0.16rem;
margin-left: auto;
filter: drop-shadow(0px 2px 10px rgba(0, 221, 179, 0.16));
/* 全网实时岗位卡片 */
&__count-card {
position: relative;
height: 0.43rem;
background: #0A171C;
border: 1px solid #1C4C55;
border-radius: 0.05rem;
}
/* 状态指示圆点 */
&__dot {
//position: absolute;
width: 0.08rem;
height: 0.08rem;
background: #2FE9F4;
border-radius: 50%;
box-shadow: 0px 0px 4px rgba(47, 233, 244, 0.75);
}
/* 岗位数字 */
&__count-num {
font-family: 'MiSans';
font-weight: 630;
font-size: 0.16rem;
line-height: 0.21rem;
color: #F4FFFF;
}
/* 岗位标签文字 */
&__count-label {
font-family: 'MiSans';
font-weight: 330;
font-size: 0.10rem;
line-height: 0.13rem;
color: #8AA8AF;
}
/* 可投率卡片 */
&__match-card {
position: relative;
width: 0.52rem;
height: 0.42rem;
background: #08161B;
border: 1px solid #20626D;
border-radius: 0.05rem;
}
/* 可投率数字 */
&__match-num {
position: absolute;
left: 0.08rem;
top: 0.04rem;
font-family: 'MiSans';
font-weight: 630;
font-size: 0.16rem;
line-height: 0.21rem;
color: #2FE9F4;
}
/* 可投率标签文字 */
&__match-label {
position: absolute;
left: 0.08rem;
top: 0.245rem;
font-family: 'MiSans';
font-weight: 620;
font-size: 0.10rem;
line-height: 0.13rem;
color: #8FB7BE;
}
}
.job-page-header {
@@ -524,7 +524,7 @@
&__gap-item-title {
font-size: 0.14rem;
font-weight: 520;
font-weight: 620;
color: $text-dark;
line-height: 0.19rem;
margin-bottom: 0.04rem;
@@ -1398,9 +1398,9 @@
}
}
// 立即去投递按钮
// 下载专属简历按钮
&__submit-btn {
flex: 1;
width: 100%;
height: 0.48rem;
background: $btn-dark;
color: $bg-white;
@@ -1415,6 +1415,20 @@
background: $btn-dark-hover;
}
}
// 下载专属简历按钮包裹含下拉菜单定位
&__submit-wrap {
position: relative;
flex: 1;
.job-resume-custom-dialog__top-download-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 0.06rem;
width: 100%;
}
}
}
// 右侧滑入动画
+377 -264
View File
@@ -1,4 +1,4 @@
// 会员弹窗样式新版
// 会员弹窗样式 新版黑金左右布局
@use '../variables' as *;
// 遮罩层
@@ -10,82 +10,163 @@
display: flex;
align-items: center;
justify-content: center;
// 扫码支付弹窗的遮罩层级更高
&--qrcode {
z-index: 2400;
}
font-size: 0.14rem;
}
// 弹窗主体
// 弹窗主体 左右布局
.member-dialog {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.24rem 0.32rem;
gap: 0.24rem;
width: 4.8rem;
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
border: 1px solid #F0F0F0;
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
border-radius: 0.12rem;
width: 6.49rem;
height: 4rem;
border-radius: 0.16rem;
box-shadow: 0 0.025rem 0.05rem rgba(60, 38, 13, 0.22);
border: 0.00625rem solid #D9B873;
font-size: 0.14rem;
// 扫码支付弹窗变体
&--qrcode {
// ==================== 左侧黑金权益栏 ====================
&__left {
position: relative;
width: 2rem;
height: 100%;
background: linear-gradient(180deg, #0F001E 0%, #1A0B09 18.09%, #452206 66.19%, #2C1500 100%);
padding: 0.24rem 0.20rem;
box-sizing: border-box;
overflow: hidden;
flex-shrink: 0;
border-radius: 0.16rem 0 0 0.16rem;
}
// 装饰线条背景
&__left-deco {
position: absolute;
width: 4.47rem;
height: 2.39rem;
left: -0.52rem;
top: -0.75rem;
background: radial-gradient(ellipse at center, rgba(255, 230, 175, 0.08) 0%, transparent 70%);
pointer-events: none;
}
&__left-title {
position: relative;
font-weight: 600;
font-size: 0.16rem;
line-height: 0.21rem;
color: #FFE9A6;
margin: 0 0 0.06rem;
}
&__left-subtitle {
position: relative;
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: #F4E5CC;
margin: 0 0 0.2rem;
}
// ==================== 左栏权益卡片 ====================
&__benefits {
position: relative;
display: flex;
flex-direction: column;
gap: 0.16rem;
}
&__benefit-card {
box-sizing: border-box;
width: 1.56rem;
height: 0.6rem;
border: 0.00625rem solid #9C6D2D;
border-radius: 0.08rem;
display: flex;
align-items: center;
padding: 0 0.12rem;
gap: 0.12rem;
}
&__benefit-icon {
width: 0.32rem;
height: 0.32rem;
background: #4C3517;
border: 0.00625rem solid #D5A64A;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
svg {
width: 0.16rem;
height: 0.16rem;
}
}
&__benefit-info {
display: flex;
flex-direction: column;
gap: 0.04rem;
}
&__benefit-name {
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: #FFE6AF;
}
&__benefit-desc {
font-weight: 330;
font-size: 0.1rem;
line-height: 0.13rem;
color: #F4E5CC;
}
// ==================== 左右分割金边 ====================
&__divider {
width: 0.01rem;
height: 100%;
background: #D6B15B;
flex-shrink: 0;
}
// ==================== 右侧内容区 ====================
&__right {
flex: 1;
background: linear-gradient(179.38deg, #FCEDD8 0.54%, #FEFBF5 19.09%);
display: flex;
flex-direction: column;
padding: 0.2rem 0.24rem;
box-sizing: border-box;
position: relative;
border-radius: 0 0.16rem 0.16rem 0;
}
// ==================== 顶部标题行 ====================
&__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
align-items: center;
margin-bottom: 0.2rem;
}
&__header-left {
display: flex;
flex-direction: column;
gap: 0.04rem;
&__title {
font-weight: 600;
font-size: 0.18rem;
line-height: 0.24rem;
color: #1F160F;
margin: 0;
}
&__header-right {
&__header-actions {
display: flex;
align-items: center;
gap: 0.16rem;
}
&__title {
font-weight: 520;
font-size: 0.18rem;
line-height: 0.24rem;
color: $text-dark;
margin: 0;
}
&__subtitle {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: $text-middle;
margin: 0;
}
&__contact {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: $text-light;
cursor: pointer;
&:hover {
color: $text-middle;
}
}
// 联系客服外层包装用于定位二维码弹出框
// 联系客服
&__contact-wrap {
position: relative;
display: inline-flex;
@@ -96,7 +177,18 @@
}
}
// 联系客服二维码弹出框
&__contact {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: #2F343B;
cursor: pointer;
&:hover {
color: #1F160F;
}
}
&__contact-qr {
display: none;
position: absolute;
@@ -122,7 +214,6 @@
}
}
// 二维码弹出框底部箭头
&__contact-qr-arrow {
position: absolute;
bottom: -0.07rem;
@@ -133,7 +224,6 @@
border-left: 0.08rem solid transparent;
border-right: 0.08rem solid transparent;
border-top: 0.08rem solid $bg-white;
filter: drop-shadow(0 0.02rem 0.02rem rgba(0, 0, 0, 0.05));
}
&__close {
@@ -143,355 +233,378 @@
align-items: center;
justify-content: center;
font-size: 0.14rem;
color: $text-middle;
color: #2F343B;
cursor: pointer;
&:hover {
color: $text-dark;
color: #1F160F;
}
}
// ==================== 套餐选择区域 ====================
&__plans {
display: flex;
gap: 0.13rem;
width: 100%;
gap: 0.2rem;
margin-bottom: 0.2rem;
}
&__plan-card {
box-sizing: border-box;
width: 1.2rem;
height: 1.4rem;
background: #FFFDF8;
border: 1px solid #E7C991;
border-radius: 0.08rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.12rem 0.16rem;
gap: 0.04rem;
width: 1.3rem;
height: 1.01rem;
background: $bg-white;
border: 1px solid #F0F0F0;
border-radius: 0.08rem;
gap: 0.08rem;
cursor: pointer;
transition: border-color 0.2s;
position: relative;
transition: border-color 0.2s, box-shadow 0.2s;
&:hover {
border-color: $accent;
border-color: #B77D24;
}
// 选中 粗边框
// 选中态
&--active {
border: 3px solid $accent;
background: linear-gradient(180deg, #FFF4D8 0%, #FDF9F1 100%);
border: 2px solid #B77D24;
box-shadow: 0 0.04rem 0.08rem rgba(183, 125, 36, 0.2);
}
}
&__plan-recommend {
// 推荐角标
&__plan-badge {
position: absolute;
top: -0.1rem;
left: 10%;
top: -0.12rem;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: $accent;
color: $bg-white;
font-size: 0.1rem;
padding: 0.02rem 0.08rem;
border-radius: 0.08rem;
font-weight: 520;
background: #C28A2F;
border: 0.00625rem solid #F0D091;
border-radius: 0.075rem;
padding: 0.04rem 0.12rem;
font-weight: 600;
font-size: 0.12rem;
line-height: 0.16rem;
color: #FFFFFF;
}
&__plan-name {
font-weight: 450;
font-weight: 600;
font-size: 0.14rem;
line-height: 0.19rem;
text-align: center;
color: $text-dark;
color: #1F160F;
}
&__plan-price {
display: flex;
align-items: flex-end;
align-items: baseline;
justify-content: center;
gap: 0.04rem;
padding: 0.04rem 0;
}
&__plan-price-symbol {
font-weight: 450;
font-weight: 600;
font-size: 0.14rem;
line-height: 0.19rem;
color: $text-dark;
color: #1F160F;
}
&__plan-price-num {
font-weight: 630;
font-size: 0.24rem;
line-height: 0.18rem;
color: $text-dark;
font-weight: 600;
font-size: 0.28rem;
line-height: 0.37rem;
color: #1F160F;
}
&__plan-original-price {
&__plan-original {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
text-decoration: line-through;
color: $text-light;
color: #7A7D82;
margin-left: 0.04rem;
}
&__plan-daily {
&__plan-tag {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
text-align: center;
color: $accent;
color: #3B2A1E;
}
// ==================== 会员权益区域 ====================
&__benefits {
width: 100%;
}
&__benefits-title {
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: $text-dark;
margin: 0 0 0.16rem;
}
&__benefits-cards {
display: flex;
gap: 0.13rem;
width: 100%;
}
&__benefit-card {
box-sizing: border-box;
// ==================== 支付方式选择步骤一 ====================
&__step-pay {
flex: 1;
display: flex;
align-items: center;
padding: 0.12rem 0.16rem;
gap: 0.1rem;
background: $bg-white;
border: 1px solid #AEE6EA;
border-radius: 0.08rem;
}
&__benefit-icon {
width: 0.4rem;
height: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
background: #EDF9FA;
border-radius: 50%;
flex-shrink: 0;
svg {
width: 0.24rem;
height: 0.24rem;
}
}
&__benefit-info {
display: flex;
flex-direction: column;
gap: 0.04rem;
}
&__benefit-name {
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: $accent;
}
&__benefit-desc {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: $text-middle;
}
// ==================== 支付方式选择 ====================
&__payment {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
&__payment-section {
margin-bottom: 0.16rem;
}
&__payment-label {
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: $text-dark;
color: #1F160F;
display: block;
margin-bottom: 0.08rem;
}
&__payment-methods {
display: flex;
align-items: center;
gap: 0.24rem;
}
&__payment-item {
box-sizing: border-box;
width: 1.88rem;
height: 0.58rem;
background: #FFFDF8;
border: 1px solid #E7C991;
border-radius: 0.08rem;
display: flex;
align-items: center;
padding: 0.04rem 0.08rem;
gap: 0.06rem;
border-radius: 0.04rem;
padding: 0 0.2rem;
gap: 0.12rem;
cursor: pointer;
transition: background 0.2s;
position: relative;
transition: border-color 0.2s;
svg {
width: 0.16rem;
height: 0.16rem;
width: 0.32rem;
height: 0.32rem;
flex-shrink: 0;
}
// 微信选中态
&--wechat-active {
background: #EBFEF4;
}
// 支付宝选中态
&--alipay-active {
background: #EBF3FF;
// 选中态
&--active {
border-color: #B77D24;
}
}
&__payment-text {
font-weight: 520;
font-size: 0.12rem;
line-height: 0.18rem;
font-weight: 600;
font-size: 0.13rem;
line-height: 0.17rem;
color: #1F160F;
}
&--wechat {
color: #07C160;
}
// 选中圆圈
&__payment-radio {
box-sizing: border-box;
width: 0.14rem;
height: 0.14rem;
background: #FFFDF8;
border: 1px solid #E7C991;
border-radius: 50%;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
&--alipay {
color: #1677FF;
.member-dialog__payment-item--active & {
border-color: #C28A2F;
}
}
// ==================== 购买按钮 ====================
&__payment-radio-inner {
width: 0.08rem;
height: 0.08rem;
background: #C28A2F;
border-radius: 50%;
}
// ==================== 底部栏步骤一/步骤二共用 ====================
&__bottom-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.66rem;
background: #FCF4E8;
border-top: 1px solid #E9D4B1;
border-radius: 0 0 0.16rem 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.24rem;
box-sizing: border-box;
&--qrcode {
height: 1.7rem;
padding: 0.2rem 0.24rem;
gap: 0.24rem;
justify-content: flex-start;
}
}
&__footer-price {
display: flex;
align-items: baseline;
gap: 0.04rem;
}
&__footer-price-label {
font-weight: 330;
font-size: 0.12rem;
line-height: 0.16rem;
color: #1F160F;
margin-right: 0.08rem;
}
&__footer-price-symbol {
font-weight: 600;
font-size: 0.14rem;
color: #1F160F;
}
&__footer-price-num {
font-weight: 600;
font-size: 0.24rem;
line-height: 0.32rem;
color: #1F160F;
}
// 购买会员按钮
&__buy-btn {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0.08rem 0.12rem;
height: 0.35rem;
background: #AEE6EA;
padding: 0.08rem 0.24rem;
height: 0.33rem;
background: #C88E35;
border: 1px solid #F0D091;
box-shadow: 0 0.02rem 0.05rem rgba(154, 104, 32, 0.18);
border-radius: 0.08rem;
border: none;
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: $bg-white;
cursor: default;
opacity: 0.4;
transition: background 0.2s, opacity 0.2s;
font-weight: 600;
font-size: 0.13rem;
line-height: 0.15rem;
color: #FFFFFF;
cursor: pointer;
border: 1px solid #F0D091;
transition: opacity 0.2s;
// 选择了支付方式后变为主题色不透明可点击
&--active {
background: $accent;
opacity: 1;
cursor: pointer;
&:hover {
opacity: 0.9;
}
&:hover {
background: $accent-hover;
}
&:disabled {
opacity: 0.5;
cursor: default;
}
}
// ==================== 扫码支付弹窗内容 ====================
&__qrcode-content {
// ==================== 扫码支付区域底部栏内 ====================
&__qrcode-box {
width: 1.2rem;
height: 1.2rem;
border: 2px solid #B77D24;
border-radius: 0.0rem;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
flex-shrink: 0;
}
&__qrcode-iframe {
border: none;
border-radius: 0.04rem;
}
.qrcode-zhifubao{
transform: scale(0.52);
width: 2.2rem !important;
height: 2.2rem !important;
padding-top: 0.1rem;
padding-left: 0.1rem;
box-sizing: border-box;
}
.qrcode-wechat{
transform: scale(0.66);
width: 1.6rem !important;
height: 1.6rem !important;
box-sizing: border-box;
}
&__qrcode-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.16rem;
width: 100%;
}
&__qrcode-image {
width: 2.1rem;
height: 2.1rem;
display: flex;
align-items: center;
justify-content: center;
}
&__payment-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 0.08rem;
}
&__wechat-qr-iframe {
width: 2.2rem;
height: 2.2rem;
border: none;
border-radius: 0.08rem;
gap: 0.12rem;
}
&__qrcode-price-row {
display: flex;
align-items: flex-end;
gap: 0.08rem;
align-items: center;
gap: 0.04rem;
}
&__qrcode-price {
font-weight: 630;
&__qrcode-price-symbol {
font-weight: 600;
font-size: 0.18rem;
color: #1F160F;
}
&__qrcode-price-num {
font-size: 0.32rem;
line-height: 0.25rem;
color: $text-dark;
font-weight: 600;
line-height: 0.37rem;
color: #1F160F;
}
&__qrcode-tip {
font-weight: 330;
font-size: 0.14rem;
line-height: 0.1rem;
color: $text-dark;
line-height: 0.19rem;
color: #1F160F;
margin-left: 0.08rem;
vertical-align: middle;
}
&__qrcode-agreement {
font-weight: 330;
font-size: 0.14rem;
line-height: 0.19rem;
color: $text-light;
font-size: 0.12rem;
line-height: 0.16rem;
color: #3B2A1E;
margin: 0;
a {
color: $text-light;
color: #A86718;
text-decoration: none;
&:hover {
color: $accent;
color: #A86718;
}
}
}
// 已支付成功按钮
// 已支付成功按钮
&__paid-btn {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0.08rem 0.12rem;
height: 0.35rem;
background: $accent;
padding: 0.08rem 0.24rem;
height: 0.33rem;
width: fit-content;
background: #C88E35;
border: 1px solid #F0D091;
box-shadow: 0 0.02rem 0.05rem rgba(154, 104, 32, 0.18);
border-radius: 0.08rem;
border: none;
font-weight: 450;
font-size: 0.14rem;
line-height: 0.19rem;
color: $bg-white;
font-weight: 600;
font-size: 0.13rem;
line-height: 0.15rem;
color: #FFFFFF;
cursor: pointer;
transition: background 0.2s;
transition: opacity 0.2s;
&:hover {
background: $accent-hover;
opacity: 0.9;
}
}
}
@@ -69,7 +69,7 @@
}
&__stat-num {
font-weight: 520;
font-weight: 620;
font-size: 0.24rem;
line-height: 0.32rem;
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
@@ -107,7 +107,7 @@
}
&__section-text {
font-weight: 520;
font-weight: 620;
font-size: 0.16rem;
line-height: 0.21rem;
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
@@ -159,7 +159,7 @@
}
&__reason-title {
font-weight: 520;
font-weight: 620;
font-size: 0.14rem;
line-height: 0.19rem;
color: $text-dark;
@@ -195,7 +195,7 @@
}
&__direction-name {
font-weight: 520;
font-weight: 620;
font-size: 0.14rem;
line-height: 0.19rem;
color: $text-dark;
@@ -234,7 +234,7 @@
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
border-radius: 0.12rem;
border: none;
font-weight: 520;
font-weight: 620;
font-size: 0.14rem;
line-height: 0.19rem;
color: $bg-white;
@@ -383,7 +383,7 @@
}
&__title {
font-weight: 520;
font-weight: 620;
font-size: 0.18rem;
line-height: 0.24rem;
color: #1A1A1A;
@@ -9,7 +9,7 @@
line-height: 1.5;
background: #F7F7F7;
border-radius: 0.12rem;
padding: 0.1rem;
padding: 0.16rem;
box-sizing: border-box;
// 表单内容区
@@ -305,7 +305,7 @@
// AI润色结果区域
&__ai-result {
margin-top: 0.16rem;
margin-top: 0.04rem;
}
&__ai-result-label {
@@ -317,7 +317,7 @@
&__ai-result-card {
padding: 0.1rem 0.12rem;
background: linear-gradient(to bottom,#F5FFFD,#ffffff);
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.5rem);
border-radius: 0.06rem;
}
@@ -438,13 +438,13 @@
}
&__save-btn {
padding: 0.06rem 0.2rem;
padding: 0.06rem 0.24rem;
font-size: 0.13rem;
font-weight: 600;
color: $bg-white;
background: $btn-dark;
border: none;
border-radius: 0.2rem;
border-radius: 0.08rem;
cursor: pointer;
transition: all 0.2s;
@@ -454,13 +454,13 @@
}
&__cancel-btn {
padding: 0.06rem 0.2rem;
padding: 0.06rem 0.24rem;
font-size: 0.13rem;
font-weight: 600;
color: $accent;
background: transparent;
border: 1px solid $accent;
border-radius: 0.2rem;
border-radius: 0.08rem;
cursor: pointer;
transition: all 0.2s;
@@ -251,17 +251,15 @@
&__tag {
font-size: 0.12rem;
color: $text-dark;
background: $bg-main;
border: 1px solid $border-color;
border-radius: 0.16rem;
padding: 0.05rem 0.16rem;
color: $accent;
background: #fff;
border: 1px solid $accent;
border-radius: 0.04rem;
padding: 0.05rem 0.08rem;
transition: all 0.2s;
&:hover {
border-color: $accent;
color: $accent;
background: $theme-color;
}
}
@@ -55,15 +55,11 @@
// ==================== 下拉面板 ====================
&__panel {
position: absolute;
top: calc(100% + 0.06rem);
left: 0;
width: 4.2rem;
background: $bg-white;
border: 1px solid $border-color;
border-radius: 0.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 100;
padding: 0.1rem;
// level=2 时只有两栏面板收窄
@@ -112,29 +112,30 @@
// ---- 卡片容器 ----
&__card {
background: transparent;
background: #fff;
border-radius: 0.1rem;
padding: 0.16rem;
border: 1px solid $border-color;
position: relative;
overflow: hidden;
&--ai {
border: 1px solid rgba($accent, 0.3);
/* 顶部渐变背景层,不遮挡内容 */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.1rem;
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.5rem);
z-index: 0;
}
}
/* 顶部渐变背景层,不遮挡内容 */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.1rem;
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.8rem);
z-index: 0;
}
/* 让卡片内所有内容在渐变之上 */
> * {
@@ -218,7 +218,7 @@
&__mcard-title {
font-size: 0.18rem;
font-weight: 520;
font-weight: 620;
color: #FFFFFF;
line-height: 0.24rem;
@@ -242,7 +242,7 @@
&__mcard-remain-days {
font-size: 0.18rem;
font-weight: 520;
font-weight: 620;
color: #FFFFFF;
line-height: 0.24rem;
}
@@ -328,7 +328,7 @@
&__feedback-label {
font-size: 0.14rem;
font-weight: 520;
font-weight: 620;
color: #1A1A1A;
line-height: 0.19rem;
}
@@ -44,7 +44,7 @@
&__title {
font-size: 0.18rem;
font-weight: 520;
font-weight: 620;
line-height: 0.24rem;
color: $text-dark;
margin: 0;
@@ -217,7 +217,7 @@
span {
font-size: 0.14rem;
font-weight: 520;
font-weight: 620;
line-height: 0.19rem;
text-align: center;
color: #FFFFFF;
+254 -50
View File
@@ -3,7 +3,7 @@
.side-nav {
display: flex;
flex-direction: column;
width: 2rem;
width: 2.2rem;
height: var(--app-height, 100vh);
background: $bg-white;
color: #fff;
@@ -12,6 +12,14 @@
position: fixed;
left: 0;
top: 0;
z-index: 100;
// 窄版模式window.innerWidth < 1440
&--narrow {
width: 0.8rem;
padding: 0.16rem 0.10rem;
align-items: center;
}
&__header {
display: flex;
@@ -21,6 +29,12 @@
margin-bottom: 0.2rem;
}
// 窄版header居中
&--narrow &__header {
justify-content: center;
padding: 0.1rem 0;
}
&__avatar {
width: 0.36rem;
height: 0.36rem;
@@ -43,6 +57,12 @@
width: 1.32rem;
height: 0.34rem;
display: block;
// 窄版logo
&--narrow {
width: 0.46rem;
height: auto;
}
}
&__menu {
@@ -52,7 +72,13 @@
flex: 1;
}
// 窄版菜单宽度撑满
&--narrow &__menu {
width: 100%;
}
&__item {
position: relative;
display: flex;
align-items: center;
gap: 0.04rem;
@@ -79,16 +105,43 @@
}
}
// 窄版导航项纵向居中排列
&--narrow &__item {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.04rem;
padding: 0.1rem 0.06rem;
}
&__item-icon {
width: 0.2rem;
height: 0.2rem;
object-fit: contain;
font-size: 0.16rem;
// 内部SVG/img统一撑满容器
svg, img {
width: 100%;
height: 100%;
display: block;
}
}
// 窄版图标放大防止scale缩放后图标过小
&--narrow &__item-icon {
width: 0.24rem;
height: 0.24rem;
}
&__item-label {
flex: 1;
}
// 窄版label字号缩小
&--narrow &__item-label {
font-size: 0.11rem;
white-space: nowrap;
}
&__badge {
@@ -100,12 +153,107 @@
font-weight: 600;
}
/* 索引0菜单项的"全网"小标签 */
&__tag-quanwang {
display: flex;
align-items: center;
justify-content: center;
padding: 0.02rem 0.04rem;
min-width: 0.28rem;
height: 0.17rem;
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
border-radius: 0.04rem;
font-family: 'MiSans';
font-style: normal;
font-weight: 620;
font-size: 0.10rem;
line-height: 0.13rem;
text-align: center;
color: #FFFFFF;
flex: none;
// 窄版角标样式右上角定位
&--corner {
position: absolute;
top: -0.07rem;
right: -0.05rem;
min-width: auto;
padding: 0.02rem 0.04rem;
height: 0.17rem;
font-size: 0.10rem;
line-height: 0.12rem;
border-radius: 0.03rem;
}
}
// 公测群二维码弹出层hover索引5时显示
&__qrcode-popup {
position: absolute;
top: calc(100% + 0.08rem);
left: 0;
padding: 0.08rem;
background: #fff;
border-radius: 0.08rem;
box-shadow: 0 0.02rem 0.12rem rgba(0, 0, 0, 0.08);
z-index: 100;
}
&__qrcode-img {
display: block;
width: auto;
height: auto;
max-width: 1.6rem;
border-radius: 0.04rem;
}
&__footer {
display: flex;
flex-direction: column;
gap: 0.04rem;
padding-top: 0.12rem;
}
// 窄版footer居中
&--narrow &__footer {
align-items: center;
width: 100%;
}
}
// ==================== 窄版邀请图片卡片 ====================
.side-nav__referral-card-narrow {
display: flex;
justify-content: center;
margin-top: 0.12rem;
}
.side-nav__referral-card-narrow-img {
width: 0.56rem;
height: 0.85rem;
display: block;
border-radius: 0.06rem;
}
// ==================== 窄版用户信息 ====================
.side-nav__user-info-narrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.06rem;
cursor: pointer;
padding: 0.08rem 0;
border-radius: 0.08rem;
&:hover {
}
}
.side-nav__user-avatar-narrow {
width: 0.26rem;
height: 0.26rem;
border-radius: 50%;
display: block;
}
.side-nav__dialog-overlay {
@@ -192,7 +340,7 @@
flex-shrink: 0;
span:first-child {
font-weight: 520;
font-weight: 620;
font-size: 0.18rem;
line-height: 0.24rem;
color: $text-dark;
@@ -264,7 +412,7 @@
}
.side-nav__message-list-title {
font-weight: 520;
font-weight: 620;
font-size: 0.14rem;
line-height: 0.19rem;
color: $text-dark;
@@ -458,84 +606,120 @@
// ==================== 邀请会员卡片 ====================
.side-nav__referral-card {
position: relative;
width: 100%;
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
height: 2.21rem;
background: linear-gradient(90deg, #DFF5F6 0%, #FBFDF7 100%);
box-shadow: 0px 0px 0.08rem rgba(0, 0, 0, 0.06);
border-radius: 0.08rem;
padding: 0.16rem;
box-sizing: border-box;
margin-top: 0.12rem;
overflow: hidden;
}
// 顶部区域标题在左上礼物图片定位在右下角
.side-nav__referral-top {
position: relative;
padding: 0.2rem 0.16rem 0.4rem;
}
.side-nav__referral-top-text {
position: relative;
z-index: 1;
}
.side-nav__referral-title {
font-size: 0.16rem;
font-size: 0.18rem;
font-weight: 630;
color: #FFFFFF;
line-height: 0.21rem;
color: #1A1A1A;
line-height: 0.24rem;
&--accent {
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}
.side-nav__referral-subtitle {
font-size: 0.10rem;
font-size: 0.14rem;
font-weight: 330;
color: #EAFBFC;
line-height: 0.13rem;
margin-top: 0.04rem;
color: #6A7282;
line-height: 0.19rem;
margin-top: 0.08rem;
}
// 礼物图片absolute定位在顶部区域的右下角底部被毛玻璃面板遮住
.side-nav__referral-gift {
position: absolute;
right: 0.10rem;
bottom: 0.02rem;
width: 0.68rem;
height: 0.68rem;
mix-blend-mode: darken;
}
// 白色毛玻璃面板覆盖在礼物底部之上
.side-nav__referral-panel {
background: #FFFFFF;
box-shadow: 0px 0.02rem 0.06rem rgba(26, 26, 26, 0.05);
border-radius: 0.06rem;
padding: 0.10rem 0.08rem;
margin-top: 0.10rem;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.38rem;
background: rgba(255, 255, 255, 0.4);
border: 1px solid #FFFFFF;
border-bottom: none;
backdrop-filter: blur(3px);
border-radius: 0.08rem 0.08rem 0 0;
box-sizing: border-box;
padding: 0.16rem;
}
.side-nav__referral-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.08rem;
}
.side-nav__referral-label {
font-size: 0.10rem;
font-size: 0.14rem;
font-weight: 330;
color: #6B7280;
line-height: 0.13rem;
color: #6A7282;
line-height: 0.19rem;
}
.side-nav__referral-value {
font-size: 0.10rem;
font-weight: 520;
color: #52CAD1;
line-height: 0.13rem;
font-size: 0.14rem;
font-weight: 450;
line-height: 0.19rem;
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.side-nav__referral-track {
width: 100%;
height: 0.02rem;
background: #D7F1F3;
border-radius: 9999px;
margin-top: 0.06rem;
height: 0.06rem;
background: #EDF9FA;
border-radius: 0.06rem;
margin-top: 0.1rem;
overflow: hidden;
}
.side-nav__referral-fill {
height: 100%;
background: #52CAD1;
border-radius: 9999px;
}
.side-nav__referral-divider {
width: 100%;
border-top: 0.01rem solid #8C8C8C;
margin-top: 0.08rem;
border-radius: 0.06rem;
}
.side-nav__referral-tip {
font-size: 0.10rem;
font-size: 0.12rem;
font-weight: 330;
color: #1A1A1A;
line-height: 0.13rem;
margin-top: 0.08rem;
color: #6A7282;
line-height: 0.16rem;
margin-top: 0.06rem;
strong {
font-weight: 630;
@@ -543,16 +727,22 @@
}
.side-nav__referral-action {
font-size: 0.11rem;
font-weight: 520;
color: #52CAD1;
line-height: 0.15rem;
text-align: center;
margin-top: 0.08rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 0.40rem;
background: linear-gradient(90deg, #36C1C9 16.99%, #AFE9D0 100%);
box-shadow: inset 0px 0px 0.06rem rgba(255, 255, 255, 0.5);
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 600;
color: #FFFFFF;
margin-top: 0.12rem;
cursor: pointer;
&:hover {
opacity: 0.8;
opacity: 0.9;
}
}
@@ -596,7 +786,7 @@
padding: 0.02rem 0.04rem;
border-radius: 0.04rem;
font-size: 0.10rem;
font-weight: 520;
font-weight: 620;
line-height: 0.13rem;
width: fit-content;
@@ -660,18 +850,32 @@
bottom: calc(100% + 0.08rem);
left: 0;
width: 100%;
min-width: 1.65rem;
background: #FFFFFF;
border: 1px solid #F0F0F0;
box-shadow: 0px 0.02rem 0.08rem rgba(0, 0, 0, 0.04);
border-radius: 0.08rem;
overflow: hidden;
z-index: 100;
z-index: 1000;
}
.side-nav__account-popup-header {
padding: 0.16rem;
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 38.18%);
border-radius: 0.08rem 0.08rem 0 0;
/* 正式会员背景 */
&--formal {
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 38.18%);
}
/* 试用会员背景 */
&--trial {
background: linear-gradient(180deg, #FEF5E7 0%, #FFFFFF 38.18%);
}
/* 免费用户背景 */
&--free {
background: linear-gradient(180deg, #F1F2F4 0%, #FFFFFF 38.18%);
}
}
.side-nav__account-popup-header-row {
@@ -5,7 +5,7 @@
font-size: 0.14rem;
position: fixed;
inset: 0;
z-index: 2000;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
@@ -49,7 +49,7 @@
}
.step-progress-overlay__title {
font-weight: 520;
font-weight: 620;
font-size: 0.18rem;
line-height: 0.24rem;
color: $text-dark;
+1
View File
@@ -44,6 +44,7 @@
@use './components/member-access-dialog.scss';
@use './components/step-progress-overlay.scss';
@use './components/mentor-aside-panel.scss';
@use './components/agent-browser-install-guide.scss';
// 全局样式优先级最高
@use './auto.scss';
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -7,7 +7,7 @@
// 主内容区域
&__content {
margin-left: 2rem;
margin-left: 2.2rem;
flex: 1;
padding: 0.4rem 0.6rem;
}
+1 -1
View File
@@ -344,7 +344,7 @@
&__quote-avatar {
width: 0.38rem;
height: 0.38rem;
background: #D9E3EA;
//background: #D9E3EA;
border-radius: 50%;
flex-shrink: 0;
}
+56 -42
View File
@@ -142,18 +142,21 @@
// 主标题
&__title {
font-size: 0.54rem;
font-size: 0.48rem;
font-weight: 600;
line-height: 0.71rem;
letter-spacing: -0.03rem;
line-height: 0.61rem;
letter-spacing: 0.03rem;
color: #111;
margin: 0;
>span{
width: 1.51rem;
}
}
// 副标题描述
&__desc {
font-size: 0.2rem;
line-height: 0.325rem;
font-size: 0.16rem;
line-height: 0.2rem;
color: #9ca3af;
margin-top: 0.1rem;
}
@@ -162,12 +165,11 @@
&__cta {
margin-top: 0.69rem;
width: 1.84rem;
height: 0.56rem;
//line-height: 0.24rem;
height: 0.52rem;
border-radius: 0.16rem;
background: linear-gradient(90deg, rgba(82, 202, 209, 1) 0%, rgba(83, 217, 200, 1) 100%);
background: $accent;
color: #fff;
font-size: 0.18rem;
font-size: 0.15rem;
font-weight: 600;
border: none;
cursor: pointer;
@@ -178,8 +180,9 @@
// 右侧卡片区
&__right {
flex-shrink: 0;
box-shadow: 0px 0px 15.45px rgba(82, 202, 209, 0.1);
//box-shadow: 0px 0px 15.45px rgba(82, 202, 209, 0.1);
border-radius: 0.16rem;
background: #FCFEFE;
}
&__right-top{
@@ -365,25 +368,25 @@
.stat-card {
background: #fff;
border-radius: 0.16rem;
width: 2.03rem;
height: 1.87rem;
width: 1.9rem;
height: 1.9rem;
text-align: center;
padding-top:0.38rem;
box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.05);
// 大数字
&__num {
font-size: 0.48rem;
font-size: 0.38rem;
font-weight: 900;
color: #52CAD1;
color: #2A8186;
line-height: 0.63rem;
}
// 描述文字
&__label {
font-size: 0.16rem;
font-size: 0.13rem;
line-height: 0.22rem;
color: #9ca3af;
color: #8D9399;
margin-top: 0.12rem;
letter-spacing: 0.0035rem;
}
@@ -391,7 +394,7 @@
// ==================== 岗位展示区 ====================
.home-jobs-showcase {
padding: 1rem 0;
padding: 0.85rem 0 0.7rem 0;
position: relative;
overflow: hidden;
background: #fff;
@@ -441,20 +444,20 @@
// 副标题
&__sub {
font-size: 0.2rem;
font-size: 0.15rem;
line-height: 0.28rem;
color: #999;
margin-top: 0.2rem;
margin-top: 0.19rem;
}
// 玻璃态展示盒子
&__box {
margin-top: 0.6rem;
margin-top: 0.87rem;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 40px rgba(82, 202, 209, 0.12);
backdrop-filter: blur(100px);
border-radius: 0.4rem;
border-radius: 0.1rem;
padding: 0.64rem 0;
}
@@ -472,7 +475,7 @@
.ticker-track {
display: flex;
gap: 0.16rem;
gap: 0.30rem;
width: max-content;
animation: ticker-scroll 20s linear infinite;
}
@@ -483,16 +486,16 @@
.showcase-stat {
text-align: center;
&__num {
font-size: 0.48rem;
font-size: 0.40rem;
line-height: 0.6rem;
font-weight: 900;
color: #1d1d1d;
.accent { color: $accent; }
color: #2A8186;
.accent { color: #2A8186; }
}
&__label {
font-size: 0.18rem;
font-size: 0.14rem;
line-height: 0.28rem;
color: #64748b;
color: #8D9399;
margin-top: 0.08rem;
}
}
@@ -500,7 +503,7 @@
// 单个岗位滚动卡片
.job-ticker {
flex-shrink: 0;
background: rgba(30, 30, 46, 0.9);
background: #12383A;
backdrop-filter: blur(36px);
border-radius: 0.12rem;
padding: 0.2rem 0.24rem;
@@ -545,16 +548,17 @@
min-width: 0;
h2 {
font-size: 0.48rem;
font-size: 0.34rem;
font-weight: 600;
line-height: 0.63rem;
line-height: 0.43rem;
letter-spacing: 0.02rem;
color: #111;
margin: 0;
}
p {
font-size: 0.2rem;
line-height: 0.325rem;
font-size: 0.14rem;
line-height: 0.2rem;
color: #999;
margin-top: 0.16rem;
}
@@ -566,12 +570,13 @@
display: inline-flex;
align-items: center;
gap: 0.12rem;
padding: 0.15rem 0.4rem;
border-radius: 0.16rem;
background: #111111;
padding: 0 0.22rem;
border-radius: 0.12rem;
background: $accent;
color: #fff;
font-size: 0.16rem;
line-height: 0.28rem;
font-size: 0.12rem;
height: 0.42rem;
line-height: 0.42rem;
font-weight: 600;
border: none;
cursor: pointer;
@@ -582,7 +587,8 @@
}
svg {
flex-shrink: 0;
color: $btn-dark;
color: #fff;
font-size: 0.12rem;
}
}
@@ -1069,7 +1075,7 @@
margin-bottom: 0.8rem;
h2 {
font-size: 0.48rem;
font-size: 0.38rem;
line-height: 0.48rem;
font-weight: 600;
letter-spacing: -0.012rem;
@@ -1077,12 +1083,12 @@
}
p {
font-size: 0.16rem;
font-size: 0.15rem;
line-height: 0.24rem;
color: #9ca3af;
letter-spacing: 0.0rem;
text-transform: uppercase;
margin-top: 0.24rem;
margin-top: 0.14rem;
}
}
@@ -1612,10 +1618,18 @@
margin: 0.6rem auto 0;
text-align: center;
padding-top: 0.4rem;
display: flex;
justify-content: center;
gap: 0.2rem;
p {
font-size: 0.12rem;
line-height: 0.16rem;
color: #9ca3af;
}
a{
font-size: 0.12rem;
text-decoration: none;
color: #9ca3af;
}
}
+5 -4
View File
@@ -3,7 +3,7 @@
// ==================== 岗位详情页 ====================
.job-detail {
&__content {
margin-left: 2rem;
margin-left: var(--nav-width, 2.2rem);
margin-right: var(--chat-width, 3.6rem);
flex: 1;
height: var(--app-height, 100vh);
@@ -167,14 +167,15 @@
display: flex;
align-items: center;
justify-content: center;
padding: 0.08rem 0.16rem;
width: 0.88rem;
height: 0.37rem;
line-height: 0.37rem;
background: $accent;
border: 1px solid $accent;
border-radius: 0.08rem;
color: $bg-white;
font-size: 0.14rem;
font-weight: 600;
line-height: 0.19rem;
cursor: pointer;
transition: background 0.2s;
@@ -227,7 +228,7 @@
&__match-label {
font-size: 0.13rem;
font-weight: 520;
font-weight: 620;
line-height: 0.17rem;
color: #9FD051;
}
File diff suppressed because it is too large Load Diff
+44 -41
View File
@@ -177,7 +177,7 @@
display: flex;
align-items: center;
gap: 0.12rem;
width: 3.41rem;
width: 4rem;
img{
width: 1.6rem;
@@ -230,12 +230,12 @@
display: flex;
flex-direction: column;
gap: 0.24rem;
width: 3.41rem;
width: 4rem;
}
/* 标题 */
.login-view__heading {
width: 3.41rem;
width: 4rem;
display: flex;
flex-direction: column;
gap: 0.05rem;
@@ -243,15 +243,16 @@
.login-view__title {
font-weight: 700;
font-size: 0.18rem;
font-size: 0.24rem;
line-height: 0.22rem;
color: #18181A;
}
.login-view__subtitle {
font-weight: 400;
font-size: 0.10rem;
line-height: 0.12rem;
font-size: 0.14rem;
margin-top: 0.08rem;
margin-bottom: 0.08rem;
color: #616367;
>span:nth-child(2){
@@ -264,12 +265,12 @@
box-sizing: border-box;
display: flex;
align-items: center;
width: 3.41rem;
height: 0.40rem;
width: 4rem;
height: 0.56rem;
background: #FFFFFF;
border: 1px solid #C8C9CD;
box-shadow: 0 0.08rem 0.20rem rgba(15, 83, 87, 0.05);
border-radius: 0.08rem;
border-radius: 0.12rem;
}
/* 手机图标 */
@@ -292,7 +293,7 @@
.login-view__country-label {
margin-left: 0.06rem;
font-weight: 500;
font-size: 0.12rem;
font-size: 0.14rem;
line-height: 0.15rem;
color: #202124;
white-space: nowrap;
@@ -330,7 +331,7 @@
border: none;
background: transparent;
font-weight: 400;
font-size: 0.12rem;
font-size: 0.14rem;
line-height: 0.15rem;
color: #202124;
outline: none;
@@ -342,14 +343,14 @@
/* ==================== 发送验证码按钮(步骤一) ==================== */
.login-view__send-btn {
width: 3.41rem;
height: 0.40rem;
width: 4rem;
height: 0.43rem;
background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%);
box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15);
border-radius: 0.08rem;
border-radius: 0.12rem;
border: none;
font-weight: 600;
font-size: 0.12rem;
font-size: 0.14rem;
line-height: 0.15rem;
color: #FFFFFF;
cursor: pointer;
@@ -391,8 +392,8 @@
display: flex;
justify-content: center;
align-items: center;
width: 0.42rem;
height: 0.46rem;
width: 0.56rem;
height: 0.56rem;
background: #FAFBFC;
border: 1px solid #E2E8F0;
border-radius: 0.12rem;
@@ -401,12 +402,12 @@
.login-view__otp-box--active {
background: #F3FFFD;
border: 2px solid #12C7BE;
border: 1px solid $accent;
}
.login-view__otp-box--filled {
background: #F3FFFD;
border: 2px solid #12C7BE;
border: 2px solid $accent;
}
.login-view__otp-digit {
@@ -421,7 +422,7 @@
display: inline-block;
width: 2px;
height: 0.28rem;
background: #12C7BE;
background: $accent;
border-radius: 1px;
animation: login-otp-blink 1s ease-in-out infinite;
}
@@ -444,14 +445,14 @@
}
.login-view__sms-status--error {
color: #E85635;
color: #EF4444;
}
/* ==================== 状态按钮(步骤二) ==================== */
.login-view__status-btn {
width: 100%;
height: 0.4rem;
background: linear-gradient(90deg, #12C7BE 0%, #06B6D4 100%);
height: 0.43rem;
background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%);
border-radius: 0.12rem;
border: none;
font-weight: 600;
@@ -494,7 +495,7 @@
display: flex;
align-items: center;
gap: 0.06rem;
width: 3.41rem;
width: 4rem;
}
.login-view__checkbox {
@@ -547,7 +548,7 @@
/* ==================== 简历上传阶段 — 右侧面板 ==================== */
.login-view__form-wrap--resume {
width: 3.41rem;
width: 4rem;
}
/* 上传区域 */
@@ -565,7 +566,7 @@
transition: border-color 0.2s;
&:hover {
border-color: #12C7BE;
border-color: $accent;
}
}
@@ -592,15 +593,16 @@
.login-view__upload-btn {
height: 0.4rem;
line-height: 0.4rem;
background: linear-gradient(90deg, #12C7BE 0%, #06B6D4 100%);
line-height: 0.43rem;
background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%);
border: none;
border-radius: 0.08rem;
font-size: 0.16rem;
font-size: 0.14rem;
font-weight: 600;
color: #FFFFFF;
cursor: pointer;
transition: opacity 0.2s;
margin-bottom: -0.1rem;
&:hover {
opacity: 0.9;
@@ -610,7 +612,7 @@
/* 解析中状态 — 新版步骤面板 */
.login-view__parse-panel {
box-sizing: border-box;
width: 3.41rem;
width: 4rem;
padding: 0.24rem;
background: #F6FFFF;
border: 1px solid #D6F1EF;
@@ -767,13 +769,13 @@
/* 解析中按钮(禁用样式) */
.login-view__parse-btn {
width: 3.41rem;
height: 0.40rem;
width: 4rem;
height: 0.43rem;
background: #A6EAE7;
border-radius: 0.08rem;
border: none;
font-weight: 600;
font-size: 0.12rem;
font-size: 0.14rem;
line-height: 0.15rem;
color: #FFFFFF;
cursor: not-allowed;
@@ -782,7 +784,7 @@
/* ==================== 状态4:上传成功面板 ==================== */
.login-view__success-panel {
box-sizing: border-box;
width: 3.41rem;
width: 4rem;
padding: 0.28rem 0.24rem;
background: #F6FFFB;
border: 1px solid #BCEED7;
@@ -863,13 +865,13 @@
/* 进入后台按钮 */
.login-view__success-btn {
width: 3.41rem;
height: 0.40rem;
width: 4rem;
height: 0.43rem;
background: #4FC2C9;
border-radius: 0.08rem;
border: none;
font-weight: 600;
font-size: 0.12rem;
font-size: 0.14rem;
line-height: 0.15rem;
color: #FFFFFF;
cursor: pointer;
@@ -883,7 +885,7 @@
/* ==================== 状态3:上传失败面板 ==================== */
.login-view__failed-panel {
box-sizing: border-box;
width: 3.41rem;
width: 4rem;
padding: 0.28rem 0.24rem;
background: #FFFBFA;
border: 1px solid #FADBD5;
@@ -964,14 +966,14 @@
/* 重新上传按钮 */
.login-view__failed-btn {
width: 3.41rem;
height: 0.40rem;
width: 4rem;
height: 0.43rem;
background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%);
box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15);
border-radius: 0.08rem;
border: none;
font-weight: 600;
font-size: 0.12rem;
font-size: 0.14rem;
line-height: 0.15rem;
color: #FFFFFF;
cursor: pointer;
@@ -990,4 +992,5 @@
color: #999;
padding-top: 0.3rem;
border-top: 1px solid #E7F2F3;
text-decoration: none;
}
+1 -1
View File
@@ -14,7 +14,7 @@
flex: 1;
height: 100%;
overflow: hidden;
margin-left: 2rem;
margin-left: var(--nav-width, 2.2rem);
display: flex;
}
+42 -4
View File
@@ -14,7 +14,7 @@
flex: 1;
height: 100%;
overflow: hidden;
margin-left: 2rem;
margin-left: var(--nav-width, 2.2rem);
}
// 左侧主内容区
@@ -63,17 +63,55 @@
margin-top: 0.02rem;
}
// 推荐搜索标签
&__quick-tags {
display: flex;
align-items: center;
gap: 0.08rem;
margin-right: 0.16rem;
flex-wrap: wrap;
}
&__quick-label {
font-size: 0.13rem;
color: $text-middle;
white-space: nowrap;
}
&__quick-tag {
font-size: 0.12rem;
color: $accent;
border: 0.012rem solid $accent;
border-radius: 0.04rem;
padding: 0.03rem 0.08rem;
cursor: pointer;
white-space: nowrap;
background: #fff;
transition: background 0.15s;
&:hover {
background: #EDF9FA;
}
// 小屏视口宽度 < 1440px只显示第一个标签
@media (max-width: 1439px) {
& ~ & {
display: none;
}
}
}
// 搜索框
&__search-wrap {
position: relative;
display: flex;
align-items: center;
width: 2.8rem;
width: 3rem;
background: $bg-white;
border: 1px solid $border-color;
border-radius: 0.2rem;
border-radius: 0.08rem;
padding: 0 0.12rem;
height: 0.36rem;
height: 0.32rem;
&:focus-within {
border-color: $accent;
+5 -3
View File
@@ -3,9 +3,9 @@
// ==================== 个人资料页 ====================
.profile-page {
&__content {
margin-left: 2rem;
margin-left: var(--nav-width, 2.2rem);
flex: 1;
padding: 0.12rem 0.36rem;
padding-bottom: 0.12rem;
height: var(--app-height, 100vh);
box-sizing: border-box;
overflow: hidden;
@@ -17,7 +17,8 @@
// 页面标题区
&__header {
margin-bottom: 0.16rem;
padding: 0.16rem 0.24rem;
background: #fff;
}
&__title {
@@ -51,6 +52,7 @@
flex: 1;
min-height: 0;
overflow: hidden;
margin: 0.16rem 0.24rem;
}
// 右侧边栏
+6 -7
View File
@@ -3,7 +3,7 @@
// ==================== 简历详情页 ====================
.resume-detail {
&__content {
margin-left: 2rem;
margin-left: var(--nav-width, 2.2rem);
flex: 1;
padding-bottom: 0.24rem;
height: var(--app-height, 100vh);
@@ -21,7 +21,7 @@
margin-bottom: 0.16rem;
background: #fff;
>h2{
font-size: 0.24rem;
font-size: 0.18rem;
font-weight: 700;
color: $text-dark;
}
@@ -116,8 +116,7 @@
justify-content: space-between;
background: $bg-white;
border-radius: 0.12rem;
padding: 0.18rem 0.24rem;
padding-top: 0.3rem;
padding: 0.28rem 0.32rem;
margin-bottom: 0.16rem;
/* B/C/D 评级渐变背景 */
@@ -305,7 +304,7 @@
&__card {
background: $bg-white;
border-radius: 0.1rem;
margin: 0.4rem 0.18rem;
margin: 0.24rem 0.18rem;
&:hover .resume-detail__section-header {
background: #F0FAFA;
@@ -445,7 +444,7 @@
bottom: 0.02rem;
width: 100%;
height: 0.06rem;
background: #12C7BE;
background: $accent;
border-radius: 0.02rem;
z-index: -1;
}
@@ -727,7 +726,7 @@
background: $bg-white;
border: 1px solid $accent;
border-radius: 0.04rem;
padding: 0.05rem 0.14rem;
padding: 0.05rem 0.08rem;
transition: all 0.2s;
&:hover {
+13 -2
View File
@@ -3,7 +3,7 @@
// ==================== 简历列表页 ====================
.resume-page {
&__content {
margin-left: 2rem;
margin-left: var(--nav-width, 2.2rem);
flex: 1;
height: var(--app-height, 100vh);
box-sizing: border-box;
@@ -23,7 +23,7 @@
}
&__title {
font-size: 0.24rem;
font-size: 0.18rem;
font-weight: 700;
color: $text-dark;
margin: 0;
@@ -138,6 +138,13 @@
opacity: 0;
transition: opacity 0.15s;
}
&--ellipsis {
max-width: 3.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&__row:hover &__td--action {
@@ -166,6 +173,10 @@
&__name {
font-weight: 500;
max-width: 3.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__default-tag {
+9
View File
@@ -0,0 +1,9 @@
/**
*
*/
/** 是否开启"个人资料为空时强制跳转到登录页简历上传"机制 */
export const ENABLE_FORCE_RESUME_UPLOAD = true
/** 浏览器插件目标版本(用于判断用户是否需要更新插件) */
export const PLUGIN_TARGET_VERSION = '0.1.1'
+269 -123
View File
@@ -1,88 +1,153 @@
<template>
<!-- 申请进度消息组件 -->
<div class="agent-apply-progress">
<!-- 顶部标题栏 -->
<div class="agent-apply-progress__header">
<!-- 三重状态投递完成 / 暂停投递 / 开始投递 -->
<span
class="agent-apply-progress__title"
:class="{ 'agent-apply-progress__title--clickable': titleClickable }"
@click="handleTitleClick"
>{{ titleText }}</span>
<span v-if="currentStep < 4" class="agent-apply-progress__cancel" @click="handleCancel">取消</span>
</div>
<!-- 岗位信息卡片 -->
<div class="agent-apply-progress__job-card">
<div class="agent-apply-progress__job-icon">
<svg viewBox="0 0 24 24" fill="none">
<rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/>
<rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/>
<rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/>
<rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/>
</svg>
</div>
<!-- 投递进度卡片组件新版4步骤 -->
<div class="agent-apply-progress" :class="{ 'agent-apply-progress--completed': isCompleted }">
<!-- 顶部岗位信息 + 步骤条 -->
<div class="agent-apply-progress__top">
<!-- 左侧岗位名称和公司 -->
<div class="agent-apply-progress__job-info">
<div class="agent-apply-progress__job-company">{{ jobInfo?.companyShortName || jobInfo?.companyName || '' }}</div>
<div class="agent-apply-progress__job-title">{{ jobInfo?.title || '' }}</div>
<span class="agent-apply-progress__job-title">{{ jobInfo?.title || '' }}</span>
<div class="agent-apply-progress__company">
<img
v-if="(jobInfo as any)?.companyLogoUrl"
:src="(jobInfo as any).companyLogoUrl"
class="agent-apply-progress__company-logo"
alt="logo"
/>
<div v-else class="agent-apply-progress__company-logo agent-apply-progress__company-logo--placeholder">
<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.2"/></svg>
</div>
<span class="agent-apply-progress__company-name">{{ jobInfo?.companyShortName || jobInfo?.companyName || '' }}</span>
</div>
</div>
<!-- 右侧步骤条 -->
<div class="agent-apply-progress__steps">
<!-- 第1步优化简历 -->
<div class="agent-apply-progress__step-item">
<div class="agent-apply-progress__step-icon" :class="stepIconClass(1)">
<!-- 已完成图标 -->
<svg v-if="currentStep > 1" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_517_2052)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.875 2.08333C11.875 2.02808 11.8531 1.97509 11.814 1.93602C11.7749 1.89695 11.7219 1.875 11.6667 1.875H5.83335C5.22557 1.875 4.64267 2.11644 4.2129 2.54621C3.78313 2.97598 3.54169 3.55888 3.54169 4.16667V15.8333C3.54169 16.4411 3.78313 17.024 4.2129 17.4538C4.64267 17.8836 5.22557 18.125 5.83335 18.125H14.1667C14.7745 18.125 15.3574 17.8836 15.7871 17.4538C16.2169 17.024 16.4584 16.4411 16.4584 15.8333V7.6225C16.4584 7.56725 16.4364 7.51426 16.3973 7.47519C16.3583 7.43612 16.3053 7.41417 16.25 7.41417H12.5C12.3343 7.41417 12.1753 7.34832 12.0581 7.23111C11.9409 7.1139 11.875 6.95493 11.875 6.78917V2.08333ZM12.5 10.2083C12.6658 10.2083 12.8248 10.2742 12.942 10.3914C13.0592 10.5086 13.125 10.6676 13.125 10.8333C13.125 10.9991 13.0592 11.1581 12.942 11.2753C12.8248 11.3925 12.6658 11.4583 12.5 11.4583H7.50002C7.33426 11.4583 7.17529 11.3925 7.05808 11.2753C6.94087 11.1581 6.87502 10.9991 6.87502 10.8333C6.87502 10.6676 6.94087 10.5086 7.05808 10.3914C7.17529 10.2742 7.33426 10.2083 7.50002 10.2083H12.5ZM12.5 13.5417C12.6658 13.5417 12.8248 13.6075 12.942 13.7247C13.0592 13.8419 13.125 14.0009 13.125 14.1667C13.125 14.3324 13.0592 14.4914 12.942 14.6086C12.8248 14.7258 12.6658 14.7917 12.5 14.7917H7.50002C7.33426 14.7917 7.17529 14.7258 7.05808 14.6086C6.94087 14.4914 6.87502 14.3324 6.87502 14.1667C6.87502 14.0009 6.94087 13.8419 7.05808 13.7247C7.17529 13.6075 7.33426 13.5417 7.50002 13.5417H12.5Z" fill="white"/>
<path d="M13.125 2.35322C13.125 2.19988 13.2858 2.10238 13.405 2.19822C13.5061 2.27988 13.5958 2.37488 13.6742 2.48322L16.185 5.98072C16.2417 6.06072 16.18 6.16405 16.0817 6.16405H13.3333C13.2781 6.16405 13.2251 6.1421 13.186 6.10303C13.1469 6.06396 13.125 6.01097 13.125 5.95572V2.35322Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_517_2052">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
<!-- 进行中/待处理图标简历 -->
<svg v-else width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_481_4042)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.875 2.08333C11.875 2.02808 11.8531 1.97509 11.814 1.93602C11.7749 1.89695 11.7219 1.875 11.6667 1.875H5.83335C5.22557 1.875 4.64267 2.11644 4.2129 2.54621C3.78313 2.97598 3.54169 3.55888 3.54169 4.16667V15.8333C3.54169 16.4411 3.78313 17.024 4.2129 17.4538C4.64267 17.8836 5.22557 18.125 5.83335 18.125H14.1667C14.7745 18.125 15.3574 17.8836 15.7871 17.4538C16.2169 17.024 16.4584 16.4411 16.4584 15.8333V7.6225C16.4584 7.56725 16.4364 7.51426 16.3973 7.47519C16.3583 7.43612 16.3053 7.41417 16.25 7.41417H12.5C12.3343 7.41417 12.1753 7.34832 12.0581 7.23111C11.9409 7.1139 11.875 6.95493 11.875 6.78917V2.08333ZM12.5 10.2083C12.6658 10.2083 12.8248 10.2742 12.942 10.3914C13.0592 10.5086 13.125 10.6676 13.125 10.8333C13.125 10.9991 13.0592 11.1581 12.942 11.2753C12.8248 11.3925 12.6658 11.4583 12.5 11.4583H7.50002C7.33426 11.4583 7.17529 11.3925 7.05808 11.2753C6.94087 11.1581 6.87502 10.9991 6.87502 10.8333C6.87502 10.6676 6.94087 10.5086 7.05808 10.3914C7.17529 10.2742 7.33426 10.2083 7.50002 10.2083H12.5ZM12.5 13.5417C12.6658 13.5417 12.8248 13.6075 12.942 13.7247C13.0592 13.8419 13.125 14.0009 13.125 14.1667C13.125 14.3324 13.0592 14.4914 12.942 14.6086C12.8248 14.7258 12.6658 14.7917 12.5 14.7917H7.50002C7.33426 14.7917 7.17529 14.7258 7.05808 14.6086C6.94087 14.4914 6.87502 14.3324 6.87502 14.1667C6.87502 14.0009 6.94087 13.8419 7.05808 13.7247C7.17529 13.6075 7.33426 13.5417 7.50002 13.5417H12.5Z" fill="currentColor"/>
<path d="M13.125 2.35322C13.125 2.19988 13.2858 2.10238 13.405 2.19822C13.5061 2.27988 13.5958 2.37488 13.6742 2.48322L16.185 5.98072C16.2417 6.06072 16.18 6.16405 16.0817 6.16405H13.3333C13.2781 6.16405 13.2251 6.1421 13.186 6.10303C13.1469 6.06396 13.125 6.01097 13.125 5.95572V2.35322Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_481_4042">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="agent-apply-progress__step-text">
<span class="agent-apply-progress__step-name" :class="stepNameClass(1)">优化简历</span>
<span class="agent-apply-progress__step-status" :class="stepStatusClass(1)">{{ stepStatusText(1) }}</span>
</div>
</div>
<!-- 连接线 -->
<div class="agent-apply-progress__step-line"></div>
<!-- 第2步匹配分析 -->
<div class="agent-apply-progress__step-item">
<div class="agent-apply-progress__step-icon" :class="stepIconClass(2)">
<svg v-if="currentStep > 2" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.84365 2.87333C6.34198 1.415 8.35698 1.37083 8.94782 2.74083L8.99782 2.87417L9.67032 4.84083C9.82444 5.29186 10.0735 5.70459 10.4007 6.05119C10.7279 6.39778 11.1256 6.67018 11.567 6.85L11.7478 6.9175L13.7145 7.58917C15.1728 8.0875 15.217 10.1025 13.8478 10.6933L13.7145 10.7433L11.7478 11.4158C11.2966 11.5699 10.8837 11.8189 10.537 12.146C10.1903 12.4732 9.91773 12.871 9.73782 13.3125L9.67032 13.4925L8.99865 15.46C8.50032 16.9183 6.48531 16.9625 5.89531 15.5933L5.84365 15.46L5.17198 13.4933C5.01796 13.0422 4.76896 12.6293 4.44177 12.2825C4.11457 11.9358 3.71681 11.6632 3.27532 11.4833L3.09531 11.4158L1.12865 10.7442C-0.330519 10.2458 -0.374685 8.23083 0.995315 7.64083L1.12865 7.58917L3.09531 6.9175C3.54634 6.76338 3.95907 6.51433 4.30567 6.18714C4.65226 5.85995 4.92466 5.46224 5.10448 5.02083L5.17198 4.84083L5.84365 2.87333ZM14.0878 1.50573e-07C14.2437 -1.96643e-07 14.3965 0.0437319 14.5288 0.126226C14.6611 0.208721 14.7676 0.326669 14.8362 0.466667L14.8761 0.564167L15.1678 1.41917L16.0236 1.71083C16.1799 1.76391 16.3168 1.86218 16.4172 1.99318C16.5175 2.12418 16.5767 2.28202 16.5872 2.44668C16.5977 2.61135 16.5592 2.77544 16.4763 2.91816C16.3935 3.06087 16.2702 3.17578 16.122 3.24833L16.0236 3.28833L15.1686 3.58L14.877 4.43583C14.8238 4.59202 14.7255 4.72892 14.5944 4.82916C14.4634 4.92941 14.3055 4.98849 14.1409 4.99894C13.9762 5.00938 13.8121 4.9707 13.6695 4.88782C13.5268 4.80493 13.412 4.68156 13.3395 4.53333L13.2995 4.43583L13.0078 3.58083L12.152 3.28917C11.9957 3.23609 11.8588 3.13782 11.7585 3.00682C11.6581 2.87582 11.599 2.71799 11.5884 2.55332C11.5779 2.38865 11.6165 2.22456 11.6993 2.08184C11.7821 1.93913 11.9054 1.82422 12.0536 1.75167L12.152 1.71167L13.007 1.42L13.2986 0.564167C13.3548 0.399521 13.4612 0.256591 13.6027 0.155416C13.7442 0.0542408 13.9138 -0.000104401 14.0878 1.50573e-07Z" fill="white"/>
</svg>
<!-- 匹配分析图标 -->
<svg v-else width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.84365 2.87333C6.34198 1.415 8.35698 1.37083 8.94782 2.74083L8.99782 2.87417L9.67032 4.84083C9.82444 5.29186 10.0735 5.70459 10.4007 6.05119C10.7279 6.39778 11.1256 6.67018 11.567 6.85L11.7478 6.9175L13.7145 7.58917C15.1728 8.0875 15.217 10.1025 13.8478 10.6933L13.7145 10.7433L11.7478 11.4158C11.2966 11.5699 10.8837 11.8189 10.537 12.146C10.1903 12.4732 9.91773 12.871 9.73782 13.3125L9.67032 13.4925L8.99865 15.46C8.50032 16.9183 6.48531 16.9625 5.89531 15.5933L5.84365 15.46L5.17198 13.4933C5.01796 13.0422 4.76896 12.6293 4.44177 12.2825C4.11457 11.9358 3.71681 11.6632 3.27532 11.4833L3.09531 11.4158L1.12865 10.7442C-0.330519 10.2458 -0.374685 8.23083 0.995315 7.64083L1.12865 7.58917L3.09531 6.9175C3.54634 6.76338 3.95907 6.51433 4.30567 6.18714C4.65226 5.85995 4.92466 5.46224 5.10448 5.02083L5.17198 4.84083L5.84365 2.87333ZM14.0878 1.50573e-07C14.2437 -1.96643e-07 14.3965 0.0437319 14.5288 0.126226C14.6611 0.208721 14.7676 0.326669 14.8362 0.466667L14.8761 0.564167L15.1678 1.41917L16.0236 1.71083C16.1799 1.76391 16.3168 1.86218 16.4172 1.99318C16.5175 2.12418 16.5767 2.28202 16.5872 2.44668C16.5977 2.61135 16.5592 2.77544 16.4763 2.91816C16.3935 3.06087 16.2702 3.17578 16.122 3.24833L16.0236 3.28833L15.1686 3.58L14.877 4.43583C14.8238 4.59202 14.7255 4.72892 14.5944 4.82916C14.4634 4.92941 14.3055 4.98849 14.1409 4.99894C13.9762 5.00938 13.8121 4.9707 13.6695 4.88782C13.5268 4.80493 13.412 4.68156 13.3395 4.53333L13.2995 4.43583L13.0078 3.58083L12.152 3.28917C11.9957 3.23609 11.8588 3.13782 11.7585 3.00682C11.6581 2.87582 11.599 2.71799 11.5884 2.55332C11.5779 2.38865 11.6165 2.22456 11.6993 2.08184C11.7821 1.93913 11.9054 1.82422 12.0536 1.75167L12.152 1.71167L13.007 1.42L13.2986 0.564167C13.3548 0.399521 13.4612 0.256591 13.6027 0.155416C13.7442 0.0542408 13.9138 -0.000104401 14.0878 1.50573e-07Z" fill="#6A7282"/>
</svg>
</div>
<div class="agent-apply-progress__step-text">
<span class="agent-apply-progress__step-name" :class="stepNameClass(2)">匹配分析</span>
<span class="agent-apply-progress__step-status" :class="stepStatusClass(2)">{{ stepStatusText(2) }}</span>
</div>
</div>
<!-- 连接线 -->
<div class="agent-apply-progress__step-line"></div>
<!-- 第3步前往投递 -->
<div class="agent-apply-progress__step-item">
<div class="agent-apply-progress__step-icon" :class="stepIconClass(3)">
<svg v-if="currentStep > 3" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5965 1.67729C14.9565 0.681458 13.9915 -0.283541 12.9957 0.0772919L0.824837 4.47896C-0.17433 4.84063 -0.295164 6.20396 0.624003 6.73646L4.509 8.98563L7.97817 5.51646C8.13534 5.36466 8.34584 5.28066 8.56434 5.28256C8.78283 5.28446 8.99185 5.3721 9.14635 5.52661C9.30086 5.68112 9.3885 5.89013 9.3904 6.10862C9.3923 6.32712 9.3083 6.53762 9.1565 6.69479L5.68734 10.164L7.93734 14.049C8.469 14.9681 9.83234 14.8465 10.194 13.8481L14.5965 1.67729Z" fill="white"/>
</svg>
<!-- 前往投递图标箭头 -->
<svg v-else width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5965 1.67729C14.9565 0.681458 13.9915 -0.283541 12.9957 0.0772919L0.824837 4.47896C-0.17433 4.84063 -0.295164 6.20396 0.624003 6.73646L4.509 8.98563L7.97817 5.51646C8.13534 5.36466 8.34584 5.28066 8.56434 5.28256C8.78283 5.28446 8.99185 5.3721 9.14635 5.52661C9.30086 5.68112 9.3885 5.89013 9.3904 6.10862C9.3923 6.32712 9.3083 6.53762 9.1565 6.69479L5.68734 10.164L7.93734 14.049C8.469 14.9681 9.83234 14.8465 10.194 13.8481L14.5965 1.67729Z" fill="#6A7282"/>
</svg>
</div>
<div class="agent-apply-progress__step-text">
<span class="agent-apply-progress__step-name" :class="stepNameClass(3)">前往投递</span>
<span class="agent-apply-progress__step-status" :class="stepStatusClass(3)">{{ stepStatusText(3) }}</span>
</div>
</div>
<!-- 连接线 -->
<div class="agent-apply-progress__step-line"></div>
<!-- 第4步结果确认 -->
<div class="agent-apply-progress__step-item">
<div class="agent-apply-progress__step-icon" :class="stepIconClass(4)">
<svg v-if="currentStep > 4" width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83333 13.3333L2.5 10L3.675 8.825L5.83333 10.975L11.325 5.48333L12.5 6.66667M7.5 1.66667C7.72101 1.66667 7.93297 1.75446 8.08926 1.91074C8.24554 2.06702 8.33333 2.27899 8.33333 2.5C8.33333 2.72101 8.24554 2.93298 8.08926 3.08926C7.93297 3.24554 7.72101 3.33333 7.5 3.33333C7.27899 3.33333 7.06702 3.24554 6.91074 3.08926C6.75446 2.93298 6.66667 2.72101 6.66667 2.5C6.66667 2.27899 6.75446 2.06702 6.91074 1.91074C7.06702 1.75446 7.27899 1.66667 7.5 1.66667ZM13.3333 1.66667H9.85C9.5 0.7 8.58333 0 7.5 0C6.41667 0 5.5 0.7 5.15 1.66667H1.66667C1.22464 1.66667 0.800716 1.84226 0.488155 2.15482C0.175595 2.46738 0 2.89131 0 3.33333V15C0 15.442 0.175595 15.8659 0.488155 16.1785C0.800716 16.4911 1.22464 16.6667 1.66667 16.6667H13.3333C13.7754 16.6667 14.1993 16.4911 14.5118 16.1785C14.8244 15.8659 15 15.442 15 15V3.33333C15 2.89131 14.8244 2.46738 14.5118 2.15482C14.1993 1.84226 13.7754 1.66667 13.3333 1.66667Z" fill="white"/>
</svg>
<!-- 结果确认图标勾选框 -->
<svg v-else width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83333 13.3333L2.5 10L3.675 8.825L5.83333 10.975L11.325 5.48333L12.5 6.66667M7.5 1.66667C7.72101 1.66667 7.93297 1.75446 8.08926 1.91074C8.24554 2.06702 8.33333 2.27899 8.33333 2.5C8.33333 2.72101 8.24554 2.93298 8.08926 3.08926C7.93297 3.24554 7.72101 3.33333 7.5 3.33333C7.27899 3.33333 7.06702 3.24554 6.91074 3.08926C6.75446 2.93298 6.66667 2.72101 6.66667 2.5C6.66667 2.27899 6.75446 2.06702 6.91074 1.91074C7.06702 1.75446 7.27899 1.66667 7.5 1.66667ZM13.3333 1.66667H9.85C9.5 0.7 8.58333 0 7.5 0C6.41667 0 5.5 0.7 5.15 1.66667H1.66667C1.22464 1.66667 0.800716 1.84226 0.488155 2.15482C0.175595 2.46738 0 2.89131 0 3.33333V15C0 15.442 0.175595 15.8659 0.488155 16.1785C0.800716 16.4911 1.22464 16.6667 1.66667 16.6667H13.3333C13.7754 16.6667 14.1993 16.4911 14.5118 16.1785C14.8244 15.8659 15 15.442 15 15V3.33333C15 2.89131 14.8244 2.46738 14.5118 2.15482C14.1993 1.84226 13.7754 1.66667 13.3333 1.66667Z" fill="#6A7282"/>
</svg>
</div>
<div class="agent-apply-progress__step-text">
<span class="agent-apply-progress__step-name" :class="stepNameClass(4)">结果确认</span>
<span class="agent-apply-progress__step-status" :class="stepStatusClass(4)">{{ stepStatusText(4) }}</span>
</div>
</div>
</div>
</div>
<!-- 步骤列表 -->
<div class="agent-apply-progress__steps">
<!-- 第1步优化简历 -->
<div class="agent-apply-progress__step">
<div class="agent-apply-progress__step-check" :class="{ 'agent-apply-progress__step-check--done': currentStep > 1 }">
<svg v-if="currentStep > 1" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<span class="agent-apply-progress__step-label">优化简历</span>
</div>
<!-- 底部提示文字 + 操作按钮 -->
<div class="agent-apply-progress__bottom">
<!-- 提示文字 -->
<span class="agent-apply-progress__hint" :class="hintClass">{{ hintText }}</span>
<!-- 第2步确认简历 -->
<div class="agent-apply-progress__step">
<div class="agent-apply-progress__step-check" :class="{ 'agent-apply-progress__step-check--done': currentStep > 2 }">
<svg v-if="currentStep > 2" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<span class="agent-apply-progress__step-label">确认简历</span>
<!-- 第2步展开内容简历确认区域 -->
<div v-if="currentStep === 2" class="agent-apply-progress__step-content">
<div class="agent-apply-progress__resume-confirm">
<div class="agent-apply-progress__resume-file">
<svg viewBox="0 0 24 24" fill="none" class="agent-apply-progress__file-icon"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
<span class="agent-apply-progress__resume-name">{{ resumeName }}</span>
</div>
<button class="agent-apply-progress__confirm-btn" :disabled="paused" @click="handleConfirmResume">确定</button>
</div>
</div>
</div>
<!-- 操作按钮区域 -->
<div v-if="showActions" class="agent-apply-progress__actions">
<!-- 第1步完成查看优化简历 + 确认简历 -->
<template v-if="currentStep === 1 && stepPhase === 'done'">
<button class="agent-apply-progress__btn agent-apply-progress__btn--outline" @click="handleViewResume">查看优化简历</button>
<button class="agent-apply-progress__btn agent-apply-progress__btn--primary" @click="handleConfirmResume">确认简历</button>
</template>
<!-- 3步分析投递页面 -->
<div class="agent-apply-progress__step">
<div class="agent-apply-progress__step-check" :class="{ 'agent-apply-progress__step-check--done': currentStep > 3 }">
<svg v-if="currentStep > 3" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<span class="agent-apply-progress__step-label">分析投递页面</span>
<!-- 第3步展开内容投递操作区域 -->
<div v-if="currentStep === 3" class="agent-apply-progress__step-content">
<div class="agent-apply-progress__apply-area">
<p class="agent-apply-progress__apply-desc">该职位仅支持在申请网站原地址使用自动填充功能</p>
<p class="agent-apply-progress__apply-desc">请点击"去投递"打开申请网站我们的自动填写插件将自动弹出</p>
<p class="agent-apply-progress__apply-desc">点击"自动填写"核对信息并提交申请然后返回本页点击"我已申请"继续</p>
<div class="agent-apply-progress__apply-actions">
<span class="agent-apply-progress__skip-btn" :class="{ 'agent-apply-progress__skip-btn--disabled': paused }" @click="handleSkip">跳过</span>
<button class="agent-apply-progress__applied-btn" :disabled="paused" @click="handleApplied">我已投递</button>
<button class="agent-apply-progress__goto-btn" :disabled="paused" @click="handleGoApply">去投递</button>
</div>
</div>
</div>
</div>
<!-- 2步匹配度偏低不投递 + 继续投递 -->
<template v-if="currentStep === 2 && stepPhase === 'low-match'">
<button class="agent-apply-progress__btn agent-apply-progress__btn--outline" @click="handleNotApply">不投递</button>
<button class="agent-apply-progress__btn agent-apply-progress__btn--primary" @click="handleContinueApply">继续投递</button>
</template>
<!-- 4提交申请 -->
<div class="agent-apply-progress__step">
<div class="agent-apply-progress__step-check" :class="{ 'agent-apply-progress__step-check--done': currentStep > 3 }">
<svg v-if="currentStep > 3" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<span class="agent-apply-progress__step-label">提交申请</span>
<!-- 3前往投递 -->
<template v-if="currentStep === 3 && stepPhase === 'ready'">
<button class="agent-apply-progress__btn agent-apply-progress__btn--primary" @click="handleGoApply">前往投递</button>
</template>
<!-- 第4步不投递 + 已投递 -->
<template v-if="currentStep === 4 && stepPhase === 'confirm'">
<button class="agent-apply-progress__btn agent-apply-progress__btn--outline" @click="handleNotApply">不投递</button>
<button class="agent-apply-progress__btn agent-apply-progress__btn--primary" @click="handleApplied">已投递</button>
</template>
</div>
</div>
</div>
@@ -90,88 +155,169 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { createChannelBridge } from '@/utils/channelBridge'
import type { JobListItem } from '@/api/jobs'
const store = useStore()
// ==================== Props ====================
const props = defineProps<{
/** 岗位信息 */
jobInfo: JobListItem | null
/** 当前步骤(1-4,大于该步骤表示已完成) */
/** 当前步骤(1-4,大于4表示全部完成) */
currentStep: number
/** 简历名称(第2步确认时显示) */
resumeName?: string
/** 是否暂停状态 */
paused?: boolean
/** 当前步骤的阶段:loading=请求中, done=完成可操作, low-match=匹配度偏低, ready=准备就绪, confirm=待确认 */
stepPhase?: 'loading' | 'done' | 'low-match' | 'ready' | 'confirm'
/** 匹配度分数(第2步用) */
matchScore?: number
/** 投递完成时间(第4步完成后显示) */
completedTime?: string
}>()
// ==================== ====================
/** 标题文字:投递完成 / 暂停投递 / 开始投递 */
const titleText = computed(() => {
if (props.currentStep >= 4) return '投递完成'
if (props.paused && props.currentStep > 1) return '开始投递'
if (!props.paused && props.currentStep > 1) return '暂停投递'
return '开始投递'
/** 是否为已完成状态 */
const isCompleted = computed(() => props.currentStep > 4)
/** 提示文字 */
const hintText = computed(() => {
if (isCompleted.value && props.completedTime) {
return `投递时间:${props.completedTime}`
}
if (props.currentStep === 1) {
if (props.stepPhase === 'done') return '已完成岗位专属简历优化,请确认本次投递使用的简历'
return '正在根据岗位信息优化简历...'
}
if (props.currentStep === 2) {
if (props.stepPhase === 'low-match') return `当前匹配度偏低:${props.matchScore ?? 0}分,是否仍要继续投递?`
return '正在根据最终投递简历复核岗位匹配度...'
}
if (props.currentStep === 3) {
return '已准备好投递信息,请前往招聘官网完成申请'
}
if (props.currentStep === 4) {
return '请确认该岗位是否已经完成投递'
}
return ''
})
/** 标题是否可点击(暂停投递 或 暂停后的开始投递) */
const titleClickable = computed(() => {
if (props.currentStep >= 4) return false
return props.currentStep > 1
/** 提示文字样式class */
const hintClass = computed(() => {
if (isCompleted.value) return ''
if (props.currentStep === 1 && props.stepPhase === 'done') return 'agent-apply-progress__hint--warning'
if (props.currentStep === 2 && props.stepPhase === 'low-match') return 'agent-apply-progress__hint--low-match'
if (props.currentStep === 3) return 'agent-apply-progress__hint--accent'
if (props.currentStep === 4) return 'agent-apply-progress__hint--accent'
return ''
})
/** 是否显示操作按钮 */
const showActions = computed(() => {
if (isCompleted.value) return false
if (props.currentStep === 1 && props.stepPhase === 'done') return true
if (props.currentStep === 2 && props.stepPhase === 'low-match') return true
if (props.currentStep === 3 && props.stepPhase === 'ready') return true
if (props.currentStep === 4 && props.stepPhase === 'confirm') return true
return false
})
/** 步骤图标样式class */
function stepIconClass(step: number) {
if (props.currentStep > step) return 'agent-apply-progress__step-icon--done'
if (props.currentStep === step) return 'agent-apply-progress__step-icon--active'
return 'agent-apply-progress__step-icon--pending'
}
/** 步骤名称样式class */
function stepNameClass(step: number) {
if (props.currentStep > step) return 'agent-apply-progress__step-name--done'
if (props.currentStep === step) return 'agent-apply-progress__step-name--active'
return 'agent-apply-progress__step-name--pending'
}
/** 步骤状态文字样式class */
function stepStatusClass(step: number) {
if (props.currentStep > step) return 'agent-apply-progress__step-status--done'
if (props.currentStep === step) return 'agent-apply-progress__step-status--active'
return 'agent-apply-progress__step-status--pending'
}
/** 步骤状态文字 */
function stepStatusText(step: number) {
if (props.currentStep > step) return '已完成'
if (props.currentStep === step) return '进行中'
return '待处理'
}
// ==================== ====================
const emit = defineEmits<{
/** 取消投递流程 */
(e: 'cancel'): void
/** 确认简历(第2步) */
/** 查看优化简历(第1步完成) */
(e: 'viewResume'): void
/** 确认简历(第1步完成 → 进入第2步) */
(e: 'confirmResume'): void
/** 跳过投递(第3步 */
(e: 'skip'): void
/** 我已投递(第3步 */
(e: 'applied'): void
/** 投递(第3步,打开原链接 */
/** 投递(第2步匹配度低 或 第4步取消 */
(e: 'notApply'): void
/** 继续投递(第2步匹配度低时继续 */
(e: 'continueApply'): void
/** 前往投递(第3步) */
(e: 'goApply'): void
/** 暂停/恢复投递 */
(e: 'togglePause'): void
/** 已投递(第4步确认) */
(e: 'applied'): void
}>()
// ==================== ====================
/** 点击标题(暂停/恢复) */
function handleTitleClick() {
if (!titleClickable.value) return
emit('togglePause')
}
/** 取消 */
function handleCancel() {
emit('cancel')
/** 查看优化简历 */
function handleViewResume() {
emit('viewResume')
}
/** 确认简历 */
function handleConfirmResume() {
if (props.paused) return
emit('confirmResume')
}
/** 跳过 */
function handleSkip() {
if (props.paused) return
emit('skip')
/** 不投递 */
function handleNotApply() {
emit('notApply')
}
/** 我已投递 */
function handleApplied() {
if (props.paused) return
emit('applied')
/** 继续投递 */
function handleContinueApply() {
emit('continueApply')
}
/** 去投递 */
function handleGoApply() {
if (props.paused) return
/** 前往投递 — 跨域 put 投递链接给插件 */
async function handleGoApply() {
const link = props.jobInfo?.sourceUrl
if (link) {
const bridge = createChannelBridge({ domain: store.state.bridgeDomain })
try {
// get
const existing = await bridge.get<{ linkList: string[] }>(store.state.bridgeDomain, 'offerpaiDeliveryLinkList', true)
const linkList: string[] = existing?.linkList || []
// push
if (!linkList.includes(link)) {
linkList.push(link)
}
// put
await bridge.put<{ linkList: string[] }>(store.state.bridgeDomain, 'offerpaiDeliveryLinkList', { linkList }, true)
} catch (e) {
console.error('[AgentApplyProgress] 跨域 put 投递链接失败', e)
} finally {
bridge.destroy()
}
}
emit('goApply')
}
/** 已投递 */
function handleApplied() {
emit('applied')
}
</script>
+171
View File
@@ -0,0 +1,171 @@
<!-- Agent页面 - 浏览器插件安装步骤指引组件 -->
<template>
<div class="agent-browser-guide-drawer__body">
<!-- 步骤1下载插件包 -->
<div class="agent-browser-guide-drawer__card">
<div class="mr100">
<div class="agent-browser-guide-drawer__step-row mr0">
<span class="agent-browser-guide-drawer__step-num">1</span>
<div class="agent-browser-guide-drawer__step-info">
<h4 class="agent-browser-guide-drawer__step-title">下载并解压插件压缩包</h4>
<p class="agent-browser-guide-drawer__step-desc">下载 Offer派自动投递助手安装包并将下载好的插件压缩包解压</p>
</div>
</div>
<div class="agent-browser-guide-drawer__download-box w263">
<span class="agent-browser-guide-drawer__download-name">Offer派智能投递助手.zip</span>
<button class="agent-browser-guide-drawer__download-btn" @click="downloadExtension">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 2v8M8 10L5 7M8 10l3-3M3 13h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>下载</span>
</button>
</div>
</div>
<!-- 步骤1示意图 -->
<img src="@/assets/images/agent-setting/1-1.png" alt="打开开发者模式" class="agent-browser-guide-drawer__step-img" />
</div>
<!-- 步骤2打开扩展管理页面 -->
<div class="agent-browser-guide-drawer__card">
<div>
<div class="agent-browser-guide-drawer__step-row">
<span class="agent-browser-guide-drawer__step-num">2</span>
<div class="agent-browser-guide-drawer__step-info">
<h4 class="agent-browser-guide-drawer__step-title">打开扩展管理页面</h4>
<p class="agent-browser-guide-drawer__step-desc">在浏览器地址栏输入对应地址并回车打开扩展管理页面</p>
</div>
</div>
<!-- 浏览器地址链接 -->
<div class="agent-browser-guide-drawer__browser-links">
<div class="agent-browser-guide-drawer__browser-link" @click="copyToClipboard('chrome://extensions')">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_guide_chrome)">
<path d="M8.00027 12.4507C10.4587 12.4507 12.4516 10.4577 12.4516 7.99929C12.4516 5.54085 10.4587 3.54785 8.00027 3.54785C5.54183 3.54785 3.54883 5.54085 3.54883 7.99929C3.54883 10.4577 5.54177 12.4507 8.0002 12.4507" fill="white"/>
<path d="M2.24303 5.81204C1.91094 5.23683 1.52061 4.63314 1.07203 4.00098C0.369757 5.21706 2.38548e-05 6.59661 1.15428e-09 8.0009C-2.38525e-05 9.4052 0.369663 10.7848 1.07189 12.0009C1.77412 13.217 2.78414 14.2268 4.0004 14.9288C5.21666 15.6307 6.59629 16.0001 8.00059 15.9998C8.73688 14.9671 9.2368 14.2225 9.50034 13.766C10.0065 12.8893 10.6612 11.6341 11.4643 10.0004V9.99941C11.1134 10.6077 10.6086 11.113 10.0005 11.4643C9.39241 11.8156 8.70256 12.0006 8.0003 12.0007C7.29804 12.0008 6.60813 11.816 5.99995 11.4649C5.39178 11.1138 4.88677 10.6087 4.53571 10.0005C3.44496 7.96623 2.68073 6.57004 2.24303 5.81204Z" fill="#229342"/>
<path d="M8.00046 16.0002C9.05106 16.0004 10.0914 15.7936 11.0621 15.3916C12.0327 14.9896 12.9147 14.4003 13.6575 13.6574C14.4004 12.9145 14.9896 12.0325 15.3915 11.0619C15.7935 10.0912 16.0002 9.05084 16 8.00024C15.9997 6.59593 15.6297 5.21644 14.9273 4.00043C13.4118 3.85105 12.2933 3.77637 11.5719 3.77637C10.7539 3.77637 9.56323 3.85105 7.9999 4.00043L7.99902 4.00105C8.7013 4.00071 9.39128 4.18529 9.99958 4.53623C10.6079 4.88717 11.113 5.39211 11.4643 6.00024C11.8155 6.60838 12.0004 7.29828 12.0004 8.00056C12.0004 8.70284 11.8155 9.39274 11.4642 10.0009L8.00046 16.0002Z" fill="#FBC116"/>
<path d="M8.00013 11.1677C9.74913 11.1677 11.1669 9.74992 11.1669 8.00086C11.1669 6.2518 9.74913 4.83398 8.00006 4.83398C6.25113 4.83398 4.83325 6.25186 4.83325 8.00086C4.83325 9.74986 6.25113 11.1677 8.00013 11.1677Z" fill="#1A73E8"/>
<path d="M8.00027 4.00027H14.9276C14.2256 2.78399 13.2158 1.77397 11.9997 1.07176C10.7835 0.369547 9.40396 -9.50021e-05 7.99965 1.83149e-08C6.59534 9.50388e-05 5.21581 0.369924 3.99978 1.0723C2.78374 1.77467 1.77406 2.78484 1.07227 4.00121L4.53595 10.0006L4.53689 10.0011C4.18549 9.39306 4.00037 8.70322 4.00017 8.00095C3.99996 7.29868 4.18467 6.60873 4.53571 6.0005C4.88676 5.39226 5.39177 4.88718 5.99995 4.53605C6.60814 4.18491 7.29806 4.0001 8.00033 4.00021L8.00027 4.00027Z" fill="#E33B2E"/>
</g>
<defs>
<clipPath id="clip0_guide_chrome">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
<span>Chrome浏览器chrome://extensions</span>
<span class="agent-browser-guide-drawer__copy-btn">
<svg viewBox="0 0 14 14" fill="none" width="12" height="12"><rect x="4" y="4" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1"/><path d="M10 4V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h1" stroke="currentColor" stroke-width="1"/></svg>
复制
</span>
</div>
<div class="agent-browser-guide-drawer__browser-link" @click="copyToClipboard('edge://extensions')">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_guide_edge)">
<path d="M14.4375 11.9059C14.225 12.0184 14.0062 12.1184 13.7812 12.1996C13.0625 12.4684 12.3062 12.6059 11.5375 12.6059C8.5812 12.6059 6.0062 10.5746 6.0062 7.96211C6.01245 7.24961 6.4062 6.59336 7.0312 6.25586C4.3562 6.36836 3.6687 9.15586 3.6687 10.7871C3.6687 15.4059 7.92495 15.8746 8.8437 15.8746C9.33745 15.8746 10.0812 15.7309 10.5312 15.5871L10.6125 15.5621C12.3375 14.9684 13.8 13.8059 14.775 12.2621C14.85 12.1434 14.8125 11.9934 14.7 11.9184C14.6187 11.8684 14.5187 11.8621 14.4375 11.9059Z" fill="url(#paint0_linear_guide_edge)"/>
<path opacity="0.35" d="M14.4375 11.9059C14.225 12.0184 14.0062 12.1184 13.7812 12.1996C13.0625 12.4684 12.3062 12.6059 11.5375 12.6059C8.5812 12.6059 6.0062 10.5746 6.0062 7.96211C6.01245 7.24961 6.4062 6.59336 7.0312 6.25586C4.3562 6.36836 3.6687 9.15586 3.6687 10.7871C3.6687 15.4059 7.92495 15.8746 8.8437 15.8746C9.33745 15.8746 10.0812 15.7309 10.5312 15.5871L10.6125 15.5621C12.3375 14.9684 13.8 13.8059 14.775 12.2621C14.85 12.1434 14.8125 11.9934 14.7 11.9184C14.6187 11.8684 14.5187 11.8621 14.4375 11.9059Z" fill="url(#paint1_radial_guide_edge)"/>
<path d="M6.60629 15.0877C6.05004 14.7439 5.56879 14.2877 5.18754 13.7564C3.54379 11.5064 4.03754 8.3502 6.28754 6.70645C6.52504 6.5377 6.76879 6.38145 7.03129 6.25645C7.22504 6.1627 7.55629 6.0002 8.00004 6.00645C8.63129 6.0127 9.22504 6.3127 9.60629 6.81895C9.85629 7.15645 10 7.5627 10.0063 7.9877C10.0063 7.9752 11.5375 3.0127 5.00629 3.0127C2.26254 3.0127 0.00628588 5.61895 0.00628588 7.9002C-0.00621412 9.10645 0.256286 10.3064 0.762536 11.4002C2.48754 15.0752 6.68754 16.8752 10.5375 15.5939C9.21879 16.0064 7.78129 15.8252 6.60629 15.0877Z" fill="url(#paint2_linear_guide_edge)"/>
<path opacity="0.41" d="M6.60629 15.0877C6.05004 14.7439 5.56879 14.2877 5.18754 13.7564C3.54379 11.5064 4.03754 8.3502 6.28754 6.70645C6.52504 6.5377 6.76879 6.38145 7.03129 6.25645C7.22504 6.1627 7.55629 6.0002 8.00004 6.00645C8.63129 6.0127 9.22504 6.3127 9.60629 6.81895C9.85629 7.15645 10 7.5627 10.0063 7.9877C10.0063 7.9752 11.5375 3.0127 5.00629 3.0127C2.26254 3.0127 0.00628588 5.61895 0.00628588 7.9002C-0.00621412 9.10645 0.256286 10.3064 0.762536 11.4002C2.48754 15.0752 6.68754 16.8752 10.5375 15.5939C9.21879 16.0064 7.78129 15.8252 6.60629 15.0877Z" fill="url(#paint3_radial_guide_edge)"/>
<path d="M9.51875 9.30625C9.46875 9.36875 9.3125 9.4625 9.3125 9.6625C9.3125 9.825 9.41875 9.98125 9.60625 10.1125C10.5062 10.7375 12.2 10.6562 12.2063 10.6562C12.875 10.6562 13.525 10.475 14.1 10.1375C15.275 9.45 16 8.19375 16 6.83125C16.0187 5.43125 15.5 4.5 15.2937 4.0875C13.9688 1.49375 11.1062 0 8 0C3.625 0 0.0625 3.5125 0 7.8875C0.03125 5.60625 2.3 3.7625 5 3.7625C5.21875 3.7625 6.46875 3.78125 7.625 4.39375C8.64375 4.93125 9.18125 5.575 9.55 6.21875C9.9375 6.8875 10.0063 7.725 10.0063 8.0625C10.0063 8.39375 9.8375 8.89375 9.51875 9.30625Z" fill="url(#paint4_radial_guide_edge)"/>
<path d="M9.51875 9.30625C9.46875 9.36875 9.3125 9.4625 9.3125 9.6625C9.3125 9.825 9.41875 9.98125 9.60625 10.1125C10.5062 10.7375 12.2 10.6562 12.2063 10.6562C12.875 10.6562 13.525 10.475 14.1 10.1375C15.275 9.45 16 8.19375 16 6.83125C16.0187 5.43125 15.5 4.5 15.2937 4.0875C13.9688 1.49375 11.1062 0 8 0C3.625 0 0.0625 3.5125 0 7.8875C0.03125 5.60625 2.3 3.7625 5 3.7625C5.21875 3.7625 6.46875 3.78125 7.625 4.39375C8.64375 4.93125 9.18125 5.575 9.55 6.21875C9.9375 6.8875 10.0063 7.725 10.0063 8.0625C10.0063 8.39375 9.8375 8.89375 9.51875 9.30625Z" fill="url(#paint5_radial_guide_edge)"/>
</g>
<defs>
<linearGradient id="paint0_linear_guide_edge" x1="3.66895" y1="11.0634" x2="14.8116" y2="11.0634" gradientUnits="userSpaceOnUse">
<stop stop-color="#0C59A4"/>
<stop offset="1" stop-color="#114A8B"/>
</linearGradient>
<radialGradient id="paint1_radial_guide_edge" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.82444 11.1519) scale(5.96065 5.662)">
<stop offset="0.72" stop-opacity="0"/>
<stop offset="0.95" stop-opacity="0.53"/>
<stop offset="1"/>
</radialGradient>
<linearGradient id="paint2_linear_guide_edge" x1="9.54822" y1="6.23432" x2="2.58741" y2="13.8163" gradientUnits="userSpaceOnUse">
<stop stop-color="#1B9DE2"/>
<stop offset="0.16" stop-color="#1595DF"/>
<stop offset="0.67" stop-color="#0680D7"/>
<stop offset="1" stop-color="#0078D4"/>
</linearGradient>
<radialGradient id="paint3_radial_guide_edge" cx="0" cy="0" r="1" gradientTransform="matrix(1.34287 -8.86118 7.162 1.0743 4.41307 12.4383)" gradientUnits="userSpaceOnUse">
<stop offset="0.76" stop-opacity="0"/>
<stop offset="0.95" stop-opacity="0.5"/>
<stop offset="1"/>
</radialGradient>
<radialGradient id="paint4_radial_guide_edge" cx="0" cy="0" r="1" gradientTransform="matrix(-0.506075 12.6493 -26.9472 -1.0119 1.61573 2.96205)" gradientUnits="userSpaceOnUse">
<stop stop-color="#35C1F1"/>
<stop offset="0.11" stop-color="#34C1ED"/>
<stop offset="0.23" stop-color="#2FC2DF"/>
<stop offset="0.31" stop-color="#2BC3D2"/>
<stop offset="0.67" stop-color="#36C752"/>
</radialGradient>
<radialGradient id="paint5_radial_guide_edge" cx="0" cy="0" r="1" gradientTransform="matrix(1.70345 5.83918 -4.74533 1.39926 15.0038 4.83786)" gradientUnits="userSpaceOnUse">
<stop stop-color="#66EB6E"/>
<stop offset="1" stop-color="#66EB6E" stop-opacity="0"/>
</radialGradient>
<clipPath id="clip0_guide_edge">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
<span>Edge浏览器edge://extensions</span>
<span class="agent-browser-guide-drawer__copy-btn">
<svg viewBox="0 0 14 14" fill="none" width="12" height="12"><rect x="4" y="4" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1"/><path d="M10 4V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h1" stroke="currentColor" stroke-width="1"/></svg>
复制
</span>
</div>
</div>
</div>
<!-- 步骤2示意图 -->
<img src="@/assets/images/agent-setting/2-1.png" alt="输入扩展地址" class="agent-browser-guide-drawer__step-img" />
</div>
<!-- 步骤3打开开发者模式 -->
<div class="agent-browser-guide-drawer__card">
<div class="agent-browser-guide-drawer__step-row">
<span class="agent-browser-guide-drawer__step-num">3</span>
<div class="agent-browser-guide-drawer__step-info">
<h4 class="agent-browser-guide-drawer__step-title">打开开发者模式</h4>
<p class="agent-browser-guide-drawer__step-desc"><span class="color-D31414">Chrome浏览器</span>在扩展管理页面的右上角找到开发者模式开关并打开</p>
<p class="agent-browser-guide-drawer__step-desc mt3"><span class="color-2F7DEA">Edge浏览器</span>在扩展管理页面左下角找到开发者模式开关并打开</p>
</div>
</div>
<!-- 步骤3示意图 -->
<img src="@/assets/images/agent-setting/3-1.png" alt="打开开发者模式" class="agent-browser-guide-drawer__step-img max-w602" />
</div>
<!-- 步骤4将CRX安装包拖入安装 -->
<div class="agent-browser-guide-drawer__card">
<div class="agent-browser-guide-drawer__step-row">
<span class="agent-browser-guide-drawer__step-num">4</span>
<div class="agent-browser-guide-drawer__step-info">
<h4 class="agent-browser-guide-drawer__step-title">点击加载未打包的扩展程序</h4>
<p class="agent-browser-guide-drawer__step-desc">点击"加载未打包的扩展程序"选择解压后的插件文件夹完成安装</p>
</div>
</div>
<!-- 步骤4示意图 -->
<img src="@/assets/images/agent-setting/4-1.png" alt="拖入安装" class="agent-browser-guide-drawer__step-img" />
</div>
</div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
/** 插件下载地址 */
const extensionDownloadUrl = 'https://offerpie.oss-cn-guangzhou.aliyuncs.com/extension/Offer派智能投递助手.zip'
/** 下载插件 */
function downloadExtension() {
window.open(extensionDownloadUrl, '_blank')
}
/** 复制文本到剪贴板 */
function copyToClipboard(text: string) {
navigator.clipboard.writeText(text).then(() => {
ElMessage.success('已复制到剪贴板')
}).catch(() => {
ElMessage.error('复制失败,请手动复制')
})
}
/** 暴露方法给父组件调用 */
defineExpose({ downloadExtension })
</script>
+83 -65
View File
@@ -1,106 +1,127 @@
<template>
<!-- Agent推荐岗位列表组件 展示推荐岗位卡片 -->
<!-- Agent推荐岗位列表组件 展示推荐岗位卡片可滚动 -->
<div class="agent-chat-job-list">
<!-- 标题 -->
<div class="agent-chat-job-list__header">为你推荐的岗位</div>
<!-- 推荐说明文字 -->
<div class="agent-chat-job-list__summary">{{ summary || '根据求职目标和简历信息智能推荐' }}</div>
<!-- 岗位列表显示前3个 -->
<div
v-for="job in displayJobs"
:key="job.id"
class="agent-chat-job-list__item"
>
<!-- 左侧匹配度环形 + 岗位信息 -->
<div class="agent-chat-job-list__info" @click="handleClickJob(job)">
<!-- 匹配度环形 -->
<div class="agent-chat-job-list__score">
<svg class="agent-chat-job-list__ring" viewBox="0 0 44 44">
<circle cx="22" cy="22" r="18" fill="none" stroke="#E8E8E8" stroke-width="3" />
<circle
cx="22" cy="22" r="18" fill="none"
stroke="#4FC2C9" stroke-width="3"
stroke-linecap="round"
:stroke-dasharray="2 * Math.PI * 18"
:stroke-dashoffset="2 * Math.PI * 18 * (1 - (job.matchScore || 0) / 100)"
transform="rotate(-90 22 22)"
/>
</svg>
<span class="agent-chat-job-list__score-text">{{ job.matchScore || 0 }}%</span>
</div>
<!-- 岗位详情 -->
<div class="agent-chat-job-list__detail">
<div class="agent-chat-job-list__title-row">
<span class="agent-chat-job-list__title">{{ job.title }}</span>
<span v-if="job.companyShortName || job.companyName" class="agent-chat-job-list__company-dot"></span>
<span class="agent-chat-job-list__company">{{ job.companyShortName || job.companyName }}</span>
<!-- 岗位列表可滚动区域默认展示约3.5个高度 -->
<div class="agent-chat-job-list__scroll">
<div
v-for="job in jobs"
:key="job.id"
class="agent-chat-job-list__item"
@click="handleClickJob(job)"
>
<!-- 左侧匹配度方块 + 岗位信息 -->
<div class="agent-chat-job-list__left">
<!-- 匹配度环形 -->
<div class="agent-chat-job-list__score">
<svg class="agent-chat-job-list__ring" viewBox="0 0 62 62">
<circle cx="31" cy="31" r="27" fill="none" stroke="#E9F4D7" stroke-width="4" />
<circle
cx="31" cy="31" r="27" fill="none"
stroke="#9FD051" stroke-width="4"
stroke-linecap="round"
:stroke-dasharray="2 * Math.PI * 27"
:stroke-dashoffset="2 * Math.PI * 27 * (1 - (job.matchScore || 0) / 100)"
transform="rotate(-90 31 31)"
/>
</svg>
<span class="agent-chat-job-list__score-text">{{ job.matchScore || 0 }}%</span>
</div>
<!-- 标签 -->
<div class="agent-chat-job-list__tags">
<span v-if="job.regionName" class="agent-chat-job-list__tag">{{ job.regionName }}</span>
<span v-if="job.categoryName" class="agent-chat-job-list__tag">{{ job.categoryName }}</span>
<span v-for="tag in job.tags?.slice(0, 2)" :key="tag" class="agent-chat-job-list__tag">{{ tag }}</span>
<!-- 岗位详情 -->
<div class="agent-chat-job-list__detail">
<!-- 第一行岗位名称 + 公司 -->
<div class="agent-chat-job-list__title-row">
<span class="agent-chat-job-list__title">{{ job.title }}</span>
<!-- 公司信息 -->
<span v-if="job.companyShortName || job.companyName" class="agent-chat-job-list__company">
<img v-if="job.companyLogoUrl" :src="job.companyLogoUrl" class="agent-chat-job-list__company-logo" alt="" />
<span class="agent-chat-job-list__company-name">{{ job.companyShortName || job.companyName }}</span>
</span>
</div>
<!-- 第二行标签地区学历招聘类型等 -->
<div class="agent-chat-job-list__tags">
<span v-if="job.regionName" class="agent-chat-job-list__tag agent-chat-job-list__tag--location">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 1.5A4.5 4.5 0 0 0 3.5 6C3.5 9.5 8 14.5 8 14.5s4.5-5 4.5-8.5A4.5 4.5 0 0 0 8 1.5Z" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
{{ job.regionName }}
</span>
<span v-if="formatEducation(job.education)" class="agent-chat-job-list__tag">{{ formatEducation(job.education) }}</span>
<span v-if="formatEmploymentType(job.recruitCategory)" class="agent-chat-job-list__tag agent-chat-job-list__tag--category">{{ formatEmploymentType(job.recruitCategory) }}</span>
</div>
</div>
</div>
</div>
<!-- 右侧操作按钮 -->
<div class="agent-chat-job-list__actions">
<!-- 不再推荐 -->
<span class="agent-chat-job-list__dismiss-btn" @click.stop="handleDismiss(job)">不再推荐</span>
<!-- 添加/已加入按钮 -->
<button
v-if="job.applicationStatus === -1"
class="agent-chat-job-list__add-btn agent-chat-job-list__add-btn--added"
disabled
>已加入</button>
<button
v-else
class="agent-chat-job-list__add-btn"
:disabled="loadingJobIds.includes(job.id)"
@click.stop="handleAdd(job)"
>+ 加入投递</button>
<!-- 右侧操作按钮 -->
<div class="agent-chat-job-list__actions" @click.stop>
<!-- 不再推荐按钮已加入时不显示 -->
<button
v-if="job.applicationStatus !== -1"
class="agent-chat-job-list__dismiss-btn"
@click="handleDismiss(job)"
>不再推荐</button>
<!-- 已加入状态 -->
<button
v-if="job.applicationStatus === -1"
class="agent-chat-job-list__add-btn agent-chat-job-list__add-btn--added"
disabled
>
<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M3 8.5l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
加入
</button>
<!-- 加入投递按钮 -->
<button
v-else
class="agent-chat-job-list__add-btn"
:disabled="loadingJobIds?.includes(job.id)"
@click="handleAdd(job)"
>
<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
加入投递
</button>
</div>
</div>
</div>
<!-- 空状态 -->
<div class="color-9" v-if="displayJobs.length === 0">
暂无相关职位推荐
</div>
<div v-if="jobs.length === 0" class="agent-chat-job-list__empty">暂无相关职位推荐</div>
<!-- 底部按钮区域 -->
<div v-if="displayJobs.length > 0" class="agent-chat-job-list__footer">
<div v-if="jobs.length > 0" class="agent-chat-job-list__footer">
<!-- 换一批按钮 -->
<button class="agent-chat-job-list__refresh-btn" :disabled="refreshing" @click="handleRefresh">
<svg viewBox="0 0 16 16" fill="none" width="16" height="16"><path d="M2.5 8a5.5 5.5 0 0 1 9.9-3.2M13.5 8a5.5 5.5 0 0 1-9.9 3.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M12 2v3h-3M4 14v-3h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
{{ refreshing ? '加载中...' : '换一批' }}
</button>
<!-- 全部添加按钮 -->
<button class="agent-chat-job-list__add-all-btn" @click="handleAddAll">全部添加</button>
<button class="agent-chat-job-list__add-all-btn" @click="handleAddAll">
<svg viewBox="0 0 16 16" fill="none" width="16" height="16"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
全部添加
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { AgentRecommendJob } from '@/api/agent'
import { formatEducation, formatEmploymentType } from '@/stores/index'
/** 组件 Props */
const props = defineProps<{
/** 推荐说明文字 */
summary: string
/** 当前展示的岗位列表数据(父组件已随机抽取10个) */
/** 当前展示的岗位列表数据 */
jobs: AgentRecommendJob[]
/** 正在请求中的岗位 ID 列表 */
loadingJobIds?: number[]
loadingJobIds?: (string | number)[]
/** 是否正在换一批加载中 */
refreshing?: boolean
}>()
/** 事件 */
const emit = defineEmits<{
/** 点击查看全部岗位(打开右侧面板) */
(e: 'viewAll'): void
/** 点击岗位查看详情 */
(e: 'clickJob', job: AgentRecommendJob): void
/** 添加单个岗位到待投递 */
@@ -113,9 +134,6 @@ const emit = defineEmits<{
(e: 'dismiss', job: AgentRecommendJob): void
}>()
/** 只显示前3个岗位 */
const displayJobs = computed(() => props.jobs.slice(0, 3))
/** 点击岗位 — 通知父组件打开岗位预览 */
function handleClickJob(job: AgentRecommendJob) {
emit('clickJob', job)

Some files were not shown because too many files have changed in this diff Show More