Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d556170969 | ||
|
|
1e103627f8 | ||
|
|
8b9ebd6ddc | ||
|
|
5abd6d27d6 | ||
|
|
bb7a8c55b2 | ||
|
|
a0f01dd697 | ||
|
|
58a027296a | ||
|
|
010a80be81 | ||
|
|
6c03793daf | ||
|
|
33ecccdcb0 | ||
|
|
d429bae98a | ||
|
|
0b9f2e7333 | ||
|
|
db46766d48 | ||
|
|
27d2592d06 | ||
|
|
c81c9b79dd | ||
|
|
5f4aab8d04 | ||
|
|
15971bffd9 | ||
|
|
bf84da7783 | ||
|
|
0911760e27 | ||
|
|
66026f211c | ||
|
|
7abe158dbb | ||
|
|
aed2535ab2 | ||
|
|
5f723e5573 | ||
|
|
8cd21e7b98 | ||
|
|
e8e2e09e62 | ||
|
|
4be35ced80 | ||
|
|
0e5c7d14d0 | ||
|
|
cf268520e1 | ||
|
|
cd64ded6ae | ||
|
|
ec6ba7ee35 | ||
|
|
72339f332d | ||
|
|
b25f2dde3a | ||
|
|
38e3957da2 |
@@ -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']
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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':
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
google-site-verification: google18c40aea647ea1cd.html
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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',
|
||||
})
|
||||
}
|
||||
|
||||
|
After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 1008 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 211 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 462 KiB |
|
Before Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 177 KiB |
|
Before Width: | Height: | Size: 246 KiB |
|
Before Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 221 KiB |
|
Before Width: | Height: | Size: 485 KiB |
|
Before Width: | Height: | Size: 232 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 390 KiB |
|
Before Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 408 KiB |
|
Before Width: | Height: | Size: 177 KiB |
|
Before Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 247 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 1.8 MiB |
@@ -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%);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
// 只显示一栏时缩窄面板
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧滑入动画
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
// 主内容区域
|
||||
&__content {
|
||||
margin-left: 2rem;
|
||||
margin-left: 2.2rem;
|
||||
flex: 1;
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
@@ -344,7 +344,7 @@
|
||||
&__quote-avatar {
|
||||
width: 0.38rem;
|
||||
height: 0.38rem;
|
||||
background: #D9E3EA;
|
||||
//background: #D9E3EA;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin-left: 2rem;
|
||||
margin-left: var(--nav-width, 2.2rem);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
// 右侧边栏
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* 业务配置文件 — 集中管理可开关的业务策略
|
||||
*/
|
||||
|
||||
/** 是否开启"个人资料为空时强制跳转到登录页简历上传"机制 */
|
||||
export const ENABLE_FORCE_RESUME_UPLOAD = true
|
||||
|
||||
/** 浏览器插件目标版本(用于判断用户是否需要更新插件) */
|
||||
export const PLUGIN_TARGET_VERSION = '0.1.1'
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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)
|
||||
|
||||