diff --git a/src/api/jobs.ts b/src/api/jobs.ts index a3c38aa..2bb4d9b 100644 --- a/src/api/jobs.ts +++ b/src/api/jobs.ts @@ -33,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[] /** 地区名称 */ @@ -51,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 @@ -97,12 +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>('/job/industry/hot') +} + +/** + * 获取热门推荐岗位 + * GET /job/category/hot + */ +export function fetchHotCategories() { + return request.get>('/job/category/hot') +} + +/** + * 获取热门推荐城市 + * GET /job/city/hot + */ +export function fetchHotCities() { + return request.get>('/job/city/hot') } // ==================== 求职意向 ==================== @@ -156,6 +216,32 @@ export function fetchJobList(params: JobListParams = {}) { }) } +/** + * 获取筛选岗位数量 + * POST /job/list/count + * @param params 与岗位列表相同的筛选参数 + */ +export function fetchJobListCount(params: JobListParams = {}) { + return request.post>('/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>('/job/list/match', { + pageNum: params.pageNum ?? 1, + pageSize: params.pageSize ?? 15, + ...params, + }) +} + // ==================== 收藏列表 ==================== /** 收藏列表请求参数 */ diff --git a/src/assets/images/logo-min.png b/src/assets/images/logo-min.png new file mode 100644 index 0000000..9099ffa Binary files /dev/null and b/src/assets/images/logo-min.png differ diff --git a/src/assets/images/nav/avatar-default.png b/src/assets/images/nav/avatar-default.png new file mode 100644 index 0000000..a55a6ad Binary files /dev/null and b/src/assets/images/nav/avatar-default.png differ diff --git a/src/assets/images/nav/gift.png b/src/assets/images/nav/gift.png new file mode 100644 index 0000000..41b0f70 Binary files /dev/null and b/src/assets/images/nav/gift.png differ diff --git a/src/assets/images/nav/referral-card-min.png b/src/assets/images/nav/referral-card-min.png new file mode 100644 index 0000000..555f31b Binary files /dev/null and b/src/assets/images/nav/referral-card-min.png differ diff --git a/src/assets/styles/components/industry-selector.scss b/src/assets/styles/components/industry-selector.scss index 90f569c..7b6b9aa 100644 --- a/src/assets/styles/components/industry-selector.scss +++ b/src/assets/styles/components/industry-selector.scss @@ -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; // 只显示一栏时缩窄面板 diff --git a/src/assets/styles/components/job-category-selector.scss b/src/assets/styles/components/job-category-selector.scss index 0ec37a2..2ccc809 100644 --- a/src/assets/styles/components/job-category-selector.scss +++ b/src/assets/styles/components/job-category-selector.scss @@ -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; // 只显示一栏时缩窄面板 diff --git a/src/assets/styles/components/member-dialog.scss b/src/assets/styles/components/member-dialog.scss index 737674d..dadf04a 100644 --- a/src/assets/styles/components/member-dialog.scss +++ b/src/assets/styles/components/member-dialog.scss @@ -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: 620; - 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: 620; + 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: 620; - 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; } } } diff --git a/src/assets/styles/components/region-selector.scss b/src/assets/styles/components/region-selector.scss index 79c569e..4a5a7c8 100644 --- a/src/assets/styles/components/region-selector.scss +++ b/src/assets/styles/components/region-selector.scss @@ -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 时只有两栏，面板收窄 diff --git a/src/assets/styles/components/side-nav.scss b/src/assets/styles/components/side-nav.scss index 1c94db7..068a257 100644 --- a/src/assets/styles/components/side-nav.scss +++ b/src/assets/styles/components/side-nav.scss @@ -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,6 +72,11 @@ flex: 1; } + // 窄版菜单宽度撑满 + &--narrow &__menu { + width: 100%; + } + &__item { position: relative; display: flex; @@ -80,18 +105,45 @@ } } + // 窄版导航项：纵向居中排列 + &--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 { } + // 窄版label字号缩小 + &--narrow &__item-label { + font-size: 0.11rem; + white-space: nowrap; + } + &__badge { background: #e85635; color: #fff; @@ -119,6 +171,19 @@ 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时显示） @@ -147,6 +212,48 @@ 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 { @@ -499,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: 620; - 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; @@ -584,16 +727,22 @@ } .side-nav__referral-action { - font-size: 0.11rem; - font-weight: 620; - 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; } } @@ -701,12 +850,13 @@ 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 { diff --git a/src/assets/styles/pages/agent.scss b/src/assets/styles/pages/agent.scss index e9ee1db..5ee8063 100644 --- a/src/assets/styles/pages/agent.scss +++ b/src/assets/styles/pages/agent.scss @@ -8,7 +8,7 @@ font-size: 0.14rem; // 主内容区域（左侧导航栏右边的部分） &__content { - margin-left: 2.2rem; + margin-left: var(--nav-width, 2.2rem); flex: 1; overflow-y: auto; height: var(--app-height, 100vh); @@ -1928,7 +1928,7 @@ .agent-page__install-dialog-title { position: relative; font-size: 0.18rem; - font-weight: 520; + font-weight: 600; color: $text-dark; text-align: center; margin: 0 0 0.2rem 0; diff --git a/src/assets/styles/pages/job-detail.scss b/src/assets/styles/pages/job-detail.scss index 92de6c0..771c45e 100644 --- a/src/assets/styles/pages/job-detail.scss +++ b/src/assets/styles/pages/job-detail.scss @@ -3,7 +3,7 @@ // ==================== 岗位详情页 ==================== .job-detail { &__content { - margin-left: 2.2rem; + margin-left: var(--nav-width, 2.2rem); margin-right: var(--chat-width, 3.6rem); flex: 1; height: var(--app-height, 100vh); diff --git a/src/assets/styles/pages/jobs.scss b/src/assets/styles/pages/jobs.scss index 6fb9a5a..8f3797b 100644 --- a/src/assets/styles/pages/jobs.scss +++ b/src/assets/styles/pages/jobs.scss @@ -6,7 +6,7 @@ display: flex; &__content { - margin-left: 2.2rem; + margin-left: var(--nav-width, 2.2rem); margin-right: var(--chat-width, 3.6rem); flex: 1; padding-bottom: 0.18rem; @@ -80,7 +80,7 @@ // 筛选条件外层白色背景条 &__filters-bar { border-radius: 0.12rem; - margin: 0 0.24rem 0.5rem 0.24rem; + margin: 0 0.24rem 0.12rem 0.24rem; } // AI 推荐提示条外层 @@ -196,7 +196,223 @@ color: $text-light; } - // 筛选条件 + // 筛选面板 + &__filters-panel { + background: $bg-white; + border: 1px solid #F0F0F0; + box-shadow: 0px 2px 6px rgba(15, 23, 42, 0.025); + border-radius: 0.12rem; + padding: 0.12rem 0.16rem; + display: flex; + flex-direction: column; + gap: 0.12rem; + } + + // 筛选行 + &__filter-row { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 0.08rem 0.16rem; + background: $bg-white; + } + + &__filter-row-inner { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.16rem; + flex: 1; + min-width: 0; + } + + // 筛选行标题（行业/岗位/地点/筛选） + &__filter-row-label { + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 380; + color: $text-middle; + flex-shrink: 0; + white-space: nowrap; + } + + // 筛选chip组容器外层（让"更多"固定在行最右边） + &__filter-chips-wrap { + display: flex; + align-items: flex-start; + gap: 0.08rem; + flex: 1; + min-width: 0; + + // "更多"选择器组件固定在右边 + > .industry-selector, + > .job-category-selector, + > .region-selector { + flex-shrink: 0; + margin-left: auto; + align-self: flex-end; + } + } + + // 筛选chip组容器（允许换行） + &__filter-chips { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + align-content: center; + gap: 0.08rem; + flex: 1; + min-width: 0; + } + + // 筛选chip（默认灰色背景） + &__filter-chip { + display: flex; + justify-content: center; + align-items: center; + padding: 0.04rem 0.08rem; + background: #F3F4F6; + border-radius: 0.04rem; + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 330; + color: $text-dark; + cursor: pointer; + white-space: nowrap; + user-select: none; + transition: all 0.15s; + border: 1px solid transparent; + + &:hover { + background: #E8F8F9; + color: $accent; + } + + // 选中态（带边框浅色背景） + &--active { + background: #F4FBFB; + border-color: $accent; + color: $accent; + font-weight: 520; + } + + // 选中态（实心品牌色背景，用于"全部/全国"按钮选中时） + &--active-solid { + background: $accent; + color: #FFFFFF; + font-weight: 520; + border-color: $accent; + } + } + + // 底部筛选行（下拉按钮组） + &__filter-row--bottom { + // 不换行 + } + + // 下拉按钮组容器 + &__filter-dropdowns { + display: flex; + align-items: center; + gap: 0.08rem; + flex-wrap: wrap; + } + + // 下拉按钮项 + &__dropdown-item { + display: flex; + align-items: center; + gap: 0.02rem; + padding: 0.04rem 0.08rem; + border: 1px solid #F0F0F0; + border-radius: 0.04rem; + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 330; + color: $text-dark; + cursor: pointer; + white-space: nowrap; + position: relative; + user-select: none; + transition: all 0.15s; + + &:hover { + border-color: $accent; + color: $accent; + } + .el-range-separator{ + padding-bottom:0.03rem !important; + } + } + + &__dropdown-arrow { + width: 0.12rem; + height: 0.12rem; + color: $text-middle; + flex-shrink: 0; + } + + // 清空筛选条件按钮 + &__clear-filters { + font-size: 0.12rem; + color: $text-middle; + cursor: pointer; + white-space: nowrap; + flex-shrink: 0; + + &:hover { + color: $accent; + } + } + + // 筛选数量 + 深度匹配提示条 + &__filter-count-bar { + display: flex; + align-items: center; + gap: 0.12rem; + margin-top: 0.08rem; + } + + &__filter-count-text { + font-size: 0.12rem; + color: $text-middle; + white-space: nowrap; + } + + &__filter-count-num { + color: $accent; + font-weight: 600; + } + + // 深度匹配按钮 + &__deep-match-btn { + padding: 0 0.08rem; + height: 0.20rem; + line-height: 0.16rem; + border: none; + border-radius: 0.04rem; + background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%); + color: #fff; + font-size: 0.12rem; + font-weight: 500; + cursor: pointer; + white-space: nowrap; + flex-shrink: 0; + transition: opacity 0.2s; + + &:hover { + opacity: 0.85; + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } + + // 筛选条件（保留旧的兼容） &__filters { display: flex; align-items: center; @@ -248,6 +464,34 @@ box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.08); z-index: 20; min-width: 100%; + + // 发布时间date-picker容器 + &__dropdown-item--time { + padding: 0; + border: none; + + // 覆盖el-date-picker内部样式适配筛选行 + :deep(.el-input__wrapper) { + box-shadow: none; + border: 1px solid #F0F0F0; + border-radius: 0.04rem; + padding: 0 0.06rem; + font-size: 0.12rem; + } + + :deep(.el-range-input) { + font-size: 0.12rem; + } + + :deep(.el-range-separator) { + font-size: 0.12rem; + padding: 0 0.02rem; + } + + :deep(.el-input__icon) { + font-size: 0.12rem; + } + } } // 下拉菜单选项 @@ -279,15 +523,16 @@ } &__search-box { - flex: 1; display: flex; align-items: center; background: $bg-white; border-radius: 0.08rem; - padding: 0.08rem 0.14rem; - min-width: 1.6rem; + padding: 0.10rem 0.14rem; + border: 1px solid #F0F0F0; + margin-top: 0.12rem; &:focus-within { + border-color: $accent; } } @@ -297,6 +542,7 @@ color: $text-light; margin-right: 0.08rem; flex-shrink: 0; + cursor: pointer; } &__search-input { @@ -319,458 +565,315 @@ height: calc(var(--app-height, 100vh) - 1.8rem); padding-bottom: 0.2rem; margin: 0 0.24rem; - - // 列表中每张卡片间距用 margin-bottom 替代 gap - & > .jobs-page__job-card { - margin-bottom: 0.12rem; - - &:last-child { - margin-bottom: 0; - } - } } - &__job-card { - background: $bg-white; - border-radius: 0.12rem; - padding: 0.2rem 0.24rem; - transition: all 0.25s ease; - border: 0.02rem solid transparent; - cursor: pointer; - position: relative; - - &:hover { - box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.06); - //background: #fbfbfb; - } - - &--selected { - border-color: $accent; - background: $selected-color; - box-shadow: 0 0.02rem 0.12rem rgba(79, 194, 201, 0.12); - } - } - - &__job-main { - display: flex; - align-items: stretch; - gap: 0.2rem; - } - - // ========== 左栏：职位信息 ========== - &__col-left { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; // 纵排，配合 meta-bottom 的 margin-top: auto 把它推到底部 - } - - &__job-title-row { - display: flex; - align-items: center; - gap: 0.08rem; - } - - &__job-name { - font-size: 0.18rem; - font-weight: 620; - color: #000000; - line-height: 0.24rem; - } - - // 收藏红心 - &__favorite-btn { - background: none; - border: none; - cursor: pointer; - padding: 0.02rem; - display: flex; - align-items: center; - color: #8C8C8C; - transition: color 0.2s; - - &:hover { - color: $danger; - } - - &--liked { - color: $danger; - } - } - - &__favorite-svg { - width: 0.16rem; - height: 0.16rem; - } - - &__job-remove { - color: $text-light; - cursor: pointer; - background: none; - border: none; - padding: 0.04rem; - border-radius: 0.04rem; - transition: all 0.2s; - display: flex; - align-items: center; - - &:hover { - color: $danger; - background: #FFF0ED; - } - } - - &__remove-svg { - width: 0.14rem; - height: 0.14rem; - } - - // 职位标签 - &__job-tags { - display: flex; - gap: 0.08rem; - flex-wrap: wrap; - margin-top: 0.14rem; - } - - &__job-tag { - display: flex; - align-items: center; - justify-content: center; - padding: 0.04rem 0.06rem; - background: #F4F4F4; - border-radius: 0.04rem; - font-size: 0.12rem; - font-weight: 330; - color: #929292; - line-height: 0.16rem; - } - - // 底部：地区 + 学历 + 招聘分类，margin-top: auto 把它推到左栏底部 - &__job-meta-bottom { - display: flex; - align-items: center; + // 网格容器：列数由 CSS 变量 --job-grid-cols 控制（JS 动态计算） + &__grid { + display: grid; + grid-template-columns: repeat(var(--job-grid-cols, 3), 1fr); gap: 0.12rem; - margin-top: auto; - padding-top: 0.08rem; - flex-wrap: wrap; } - &__meta-location { + // ========== 新卡片样式 ========== + &__job-card { + position: relative; + height: 1.33rem; + border: 1px solid #F0F0F0; + border-radius: 0.08rem; + padding: 0.16rem; + box-sizing: border-box; + cursor: pointer; + transition: box-shadow 0.2s; + overflow: hidden; + + &:hover { + box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.08); + } + + // hover 时隐藏公司信息行，显示操作按钮行 + &:hover .jobs-page__card-bottom--info { + opacity: 0; + pointer-events: none; + } + + &:hover .jobs-page__card-bottom--actions { + opacity: 1; + pointer-events: auto; + } + } + + // 上半部分容器 + &__card-top { display: flex; - align-items: center; - gap: 0.02rem; - font-size: 0.14rem; - font-weight: 330; - color: #8C8C8C; - line-height: 0.19rem; + align-items: flex-start; + justify-content: space-between; + gap: 0.08rem; } - &__location-icon { - width: 0.18rem; - height: 0.18rem; - color: #8C8C8C; - flex-shrink: 0; - } - - &__meta-edu { - font-size: 0.14rem; - font-weight: 330; - color: #8C8C8C; - line-height: 0.19rem; - } - - &__meta-recruit { - display: flex; - align-items: center; - justify-content: center; - padding: 0.02rem 0.06rem; - background: #EDF9FA; - border-radius: 0.04rem; - font-size: 0.12rem; - font-weight: 330; - color: #fff; - line-height: 0.16rem; - } - - // ========== 中栏：公司信息（居中） ========== - &__col-center { - flex: 1; // 参与 flex 空间分配，获得真实宽度约束 - min-width: 0; // 防止内容撑破 flex 容器 - } - - // 公司信息容器，需要 min-width 才能让内部标签换行 - &__company-info { + // 上半左侧 + &__card-top-left { min-width: 0; + flex: 1; } - &__company-row { - display: flex; - align-items: center; - gap: 0.06rem; - margin-bottom: 0.06rem; - flex-wrap: wrap; + // 岗位标题 + &__card-title { + font-size: 0.16rem; + font-weight: 520; + color: #1A1A1A; + line-height: 0.21rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } - &__company-logo { - width: 0.24rem; - height: 0.24rem; - border-radius: 0.04rem; + // 标签行 + &__card-tags { display: flex; align-items: center; - justify-content: center; - flex-shrink: 0; - font-size: 0.24rem; - color: #8C8C8C; + gap: 0.08rem; + margin-top: 0.08rem; + flex-wrap: nowrap; overflow: hidden; } - &__company-name { - font-size: 0.18rem; - font-weight: 330; - color: #000000; - line-height: 0.24rem; - } - - &__company-tags { - display: flex; - align-items: center; - gap: 0.08rem; - flex-wrap: wrap; - min-width: 0; // 允许内容收缩触发换行 - margin-top: 0.14rem; - } - - &__company-tag { + // 单个标签 + &__card-tag { display: flex; align-items: center; justify-content: center; - padding: 0.04rem 0.06rem; - background: #F4F4F4; + padding: 0.03rem 0.06rem; + background: #F3F4F6; border-radius: 0.04rem; font-size: 0.12rem; - font-weight: 330; - color: #929292; + font-weight: 380; + color: #6A7282; line-height: 0.16rem; + white-space: nowrap; + flex-shrink: 0; } - // ========== 右栏：操作按钮 ========== - &__col-right { - display: flex; - flex-direction: column; + // 右侧匹配度 + &__card-match { text-align: right; + flex-shrink: 0; } - &__job-action-right { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.1rem; + &__card-match-score { + display: block; + font-size: 0.22rem; + font-weight: 520; + line-height: 0.29rem; + text-align: center; } - &__job-helper { + &__card-match-label { + display: block; + font-size: 0.12rem; + font-weight: 450; + line-height: 0.16rem; + text-align: center; + margin-top: 0.02rem; + } + + // 未登录锁定态 + &__card-match--locked { display: flex; align-items: center; justify-content: center; - text-align: center; - width: 0.88rem; - height: 0.37rem; - line-height: 0.37rem; - border: 1.23px solid $accent; - border-radius: 0.08rem; + } + + &__card-lock-icon { + width: 0.24rem; + height: 0.24rem; + color: $text-light; + } + + // 下半部分通用定位 + &__card-bottom { + position: absolute; + left: 0.16rem; + right: 0.16rem; + bottom: 0.12rem; + display: flex; + align-items: center; + justify-content: space-between; + transition: opacity 0.2s; + } + + // 默认显示公司信息 + &__card-bottom--info { + opacity: 1; + } + + // hover 时显示操作按钮（默认隐藏） + &__card-bottom--actions { + opacity: 0; + pointer-events: none; + gap: 0.08rem; + } + + // 公司信息行 + &__card-company { + display: flex; + align-items: center; + gap: 0.04rem; + min-width: 0; + flex: 1; + } + + // 公司 logo + &__card-company-logo { + width: 0.24rem; + height: 0.24rem; + border-radius: 0.12rem; + border: 1px solid #F4F4F4; + flex-shrink: 0; + object-fit: cover; + + &--default { + display: flex; + align-items: center; + justify-content: center; + background: #FFFFFF; + } + } + + // 公司名称 + &__card-company-name { + font-size: 0.14rem; + font-weight: 450; + color: #1A1A1A; + line-height: 0.19rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 1.1rem; + } + + // 公司类型标签 + &__card-company-type { + display: flex; + align-items: center; + justify-content: center; + padding: 0.03rem 0.06rem; + background: #ECFDF3; + border-radius: 0.04rem; + font-size: 0.12rem; + font-weight: 380; + color: #067647; + line-height: 0.16rem; + white-space: nowrap; + flex-shrink: 0; + } + + // 发布时间 + &__card-publish-time { + font-size: 0.12rem; + font-weight: 330; + color: #99A1AF; + line-height: 0.16rem; + white-space: nowrap; + flex-shrink: 0; + } + + // ========== hover 操作按钮行 ========== + // 三点更多按钮 + &__card-more-btn { + width: 0.32rem; + height: 0.32rem; + border: none; background: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.04rem; + transition: background 0.2s; + flex-shrink: 0; + + &:hover { + background: #F3F4F6; + } + } + + // 问Nova按钮 + &__card-ask-btn { + flex: 1; + height: 0.32rem; + background: #EDF9FA; + border: none; + border-radius: 0.06rem; font-size: 0.14rem; font-weight: 450; color: $accent; cursor: pointer; - transition: all 0.2s; + transition: background 0.2s; white-space: nowrap; &:hover { - background: $theme-color; + background: #D9F2F4; } } - &__job-apply-btn { - display: flex; - align-items: center; - justify-content: center; - width: 0.88rem; - height: 0.37rem; - line-height: 0.35rem; + // 去投递按钮 + &__card-apply-btn { + flex: 1; + height: 0.32rem; background: $accent; border: none; - border-radius: 0.08rem; + border-radius: 0.06rem; font-size: 0.14rem; font-weight: 450; color: #FFFFFF; cursor: pointer; - transition: all 0.2s; + transition: background 0.2s; white-space: nowrap; &:hover { background: $accent-hover; } - - &--active { - background: $accent; - color: #FFFFFF; - } - } - - // 不再显示（默认隐藏，hover 卡片时显示） - &__hide-btn { - display: block; - margin-top: auto; - font-size: 0.14rem; - font-weight: 330; - color: #8C8C8C; - cursor: pointer; - transition: color 0.2s, opacity 0.2s; - line-height: 0.19rem; - white-space: nowrap; - opacity: 0; - - &:hover { - color: $text-dark; - } - } - - // hover 卡片时显示"不再显示"按钮 - &__job-card:hover &__hide-btn { - opacity: 1; } // 弹出菜单 - &__job-popup { + &__card-popup { position: absolute; - right: 1.4rem; - top: 0.5rem; - background: $bg-white; - border: 1px solid #E8E8E8; - border-radius: 0.1rem; + left: 0; + bottom: 0.4rem; + background: #FFFFFF; + border: 1px solid #F0F0F0; + border-radius: 0.08rem; padding: 0.06rem 0; - box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.1); + box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.1); z-index: 10; + min-width: 1.2rem; } - &__job-popup-item { - padding: 0.08rem 0.2rem; - font-size: 0.12rem; - color: $text-dark; + // 弹出菜单项 + &__card-popup-item { + display: flex; + align-items: center; + gap: 0.08rem; + padding: 0.08rem 0.16rem; + font-size: 0.14rem; + color: #1A1A1A; cursor: pointer; white-space: nowrap; - transition: all 0.15s; + transition: background 0.15s; &:hover { - background: $theme-color; - color: $accent-hover; - } - } - - // ========== 最右侧：匹配度 ========== - &__job-match { - width: 1.01rem; - text-align: center; - flex-shrink: 0; - border-radius: 0.08rem; - padding: 0.14rem 0.1rem; - transition: all 0.25s ease; - - &--high { - background: #FBFDF7; + background: #EDF9FA; } - &--medium { - background: #FFFBF5; + svg { + flex-shrink: 0; } - &--low { - background: #FFF6F5; + span { + color: inherit; } } - &__match-ring { - position: relative; - width: 0.62rem; - height: 0.62rem; - margin: 0 auto; - } - - &__ring-svg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - &__match-score { - font-size: 0.18rem; - font-weight: 620; - line-height: 0.62rem; - position: absolute; - top: 0; - left: 0; - width: 100%; - text-align: center; - z-index: 1; - } - - &__match-level { - font-size: 0.13rem; - font-weight: 620; - line-height: 0.19rem; - margin-top: 0.04rem; - } - - // 高匹配度颜色 - &__job-match--high &__match-score { - color: #9FD051; - } - - &__job-match--high &__match-level { - color: #9FD051; - } - - // 中匹配度颜色 - &__job-match--medium &__match-score { - color: #F59E0B; - } - - &__job-match--medium &__match-level { - color: #F59E0B; - } - - // 低匹配度颜色 - &__job-match--low &__match-score { - color: #FE6D52; - } - - &__job-match--low &__match-level { - color: #FE6D52; - } - - // 未登录锁定态 - &__job-match--locked { - background: $bg-main; - border: 1px solid #E8E8E8; - } - - &__lock-icon { - width: 0.32rem; - height: 0.32rem; - color: $text-light; - display: block; - margin: 0 auto 0.06rem; - } - - &__match-lock-text { - font-size: 0.1rem; - color: $text-light; - white-space: nowrap; - } - // 收藏统计栏 &__fav-stats { display: flex; diff --git a/src/assets/styles/pages/mentor-detail.scss b/src/assets/styles/pages/mentor-detail.scss index d3cd15b..40cc17e 100644 --- a/src/assets/styles/pages/mentor-detail.scss +++ b/src/assets/styles/pages/mentor-detail.scss @@ -14,7 +14,7 @@ flex: 1; height: 100%; overflow: hidden; - margin-left: 2.2rem; + margin-left: var(--nav-width, 2.2rem); display: flex; } diff --git a/src/assets/styles/pages/mentor.scss b/src/assets/styles/pages/mentor.scss index 7c21346..4d4a2cb 100644 --- a/src/assets/styles/pages/mentor.scss +++ b/src/assets/styles/pages/mentor.scss @@ -14,7 +14,7 @@ flex: 1; height: 100%; overflow: hidden; - margin-left: 2.2rem; + margin-left: var(--nav-width, 2.2rem); } // 左侧主内容区 diff --git a/src/assets/styles/pages/profile.scss b/src/assets/styles/pages/profile.scss index 2070622..69f6a7d 100644 --- a/src/assets/styles/pages/profile.scss +++ b/src/assets/styles/pages/profile.scss @@ -3,7 +3,7 @@ // ==================== 个人资料页 ==================== .profile-page { &__content { - margin-left: 2.2rem; + margin-left: var(--nav-width, 2.2rem); flex: 1; padding-bottom: 0.12rem; height: var(--app-height, 100vh); diff --git a/src/assets/styles/pages/resume-detail.scss b/src/assets/styles/pages/resume-detail.scss index 257223c..64b1b6b 100644 --- a/src/assets/styles/pages/resume-detail.scss +++ b/src/assets/styles/pages/resume-detail.scss @@ -3,7 +3,7 @@ // ==================== 简历详情页 ==================== .resume-detail { &__content { - margin-left: 2.2rem; + margin-left: var(--nav-width, 2.2rem); flex: 1; padding-bottom: 0.24rem; height: var(--app-height, 100vh); diff --git a/src/assets/styles/pages/resume.scss b/src/assets/styles/pages/resume.scss index 0e3490a..54e5a99 100644 --- a/src/assets/styles/pages/resume.scss +++ b/src/assets/styles/pages/resume.scss @@ -3,7 +3,7 @@ // ==================== 简历列表页 ==================== .resume-page { &__content { - margin-left: 2.2rem; + margin-left: var(--nav-width, 2.2rem); flex: 1; height: var(--app-height, 100vh); box-sizing: border-box; diff --git a/src/components/AgentTaskListDropdown.vue b/src/components/AgentTaskListDropdown.vue index 87cab15..6cb1a67 100644 --- a/src/components/AgentTaskListDropdown.vue +++ b/src/components/AgentTaskListDropdown.vue @@ -152,11 +152,11 @@ function switchTab(tab: 'pending' | 'completed') { activeTab.value = tab } -/** 加载待投递列表（pageSize=300） */ +/** 加载待投递列表（pageSize=200） */ async function loadPendingList() { pendingLoading.value = true try { - const res = await fetchAgentTaskList({ pageNum: 1, pageSize: 300, tab: 1 }) + const res = await fetchAgentTaskList({ pageNum: 1, pageSize: 200, tab: 1 }) if (res.code === '0' && res.data) { pendingList.value = res.data.list || [] } diff --git a/src/components/MemberDialog.vue b/src/components/MemberDialog.vue index 9f369d3..d23720d 100644 --- a/src/components/MemberDialog.vue +++ b/src/components/MemberDialog.vue @@ -3,71 +3,41 @@
- +
- -
-
-

会员中心

-

解锁更多求职功能，让投递更高效

-
-
- - - 联系客服 -
- 客服二维码 -
-
- - ✕ -
-
- - -
-
- -
- - - - - - - - - - 推荐
- -
{{ plan.name }}
- -
- ¥ - {{ plan.priceInt }} - {{ plan.originalPrice }} -
- -
{{ plan.tag }}
-
-
- - -
-

会员权益

-
+ +
+ +
+ +

Offer派会员专享权益

+

解锁更多功能，让求职更高效

+ +
- - - + + + +
+
+ AI智能投递 + 会员专享 +
+
+
+
+ + + + + + + + + +
@@ -77,107 +47,184 @@
- - - + +
- AI+投递助手 - 会员专享 + 海量岗位数据 + 全网实时更新 +
+
+
+
+ + + + +
+
+ 校招公告速递 + 名企动态抢先看
- -
- 选择支付方式 -
-
- - - - - 微信支付 -
-
- - - 支 - - 支付宝支付 + +
+ + +
+ +
+

会员中心

+
+ + + 联系客服 +
+ 客服二维码 +
+
+ + + ✕
-
- - - -
-
- - -
-
- - -
-
-

扫码支付

+ +
+
+ +
超值推荐
+ +
{{ plan.name }}
+ +
+ ¥ + {{ plan.priceInt }} + {{ plan.originalPrice }} +
+ +
{{ plan.tag }}
+
-
- ✕ + + +
+ +
+ 选择支付方式 +
+ +
+ + + + + + + + + + + + 微信支付 + +
+
+
+
+ +
+ + + + + + + + + + + 支付宝支付 + +
+
+
+
+
+
+
+ + +
+ + + + +
- -
- -
- -
- -
- -
- - -
- ¥{{ currentPlan.priceInt }} - 扫码完成支付 -
- - -

- 开通即代表同意 《会员服务协议》 -

-
- - -
@@ -203,19 +250,14 @@ const store = useStore() // ==================== 类型定义 ==================== -/** 套餐项类型（包含后端完整数据 + 前端展示字段） */ +/** 套餐项类型 */ interface PlanItem { key: string name: string - /** 整数价格（元），用于显示 */ priceInt: string - /** 划线价（元） */ originalPrice: string - /** 标签描述（接口tag字段，如"轻量体验"、"低至¥0.56/天"） */ tag: string - /** 是否推荐 */ recommend?: boolean - /** 后端原始数据，下单时使用 */ raw: MemberProduct } @@ -224,22 +266,22 @@ interface PlanItem { /** 当前选中的套餐 key */ const selectedPlan = ref('') -/** 当前选中的支付方式（wechat / alipay），默认不选 */ +/** 当前选中的支付方式 */ const selectedPayment = ref('') -/** 是否显示扫码支付弹窗 */ +/** 是否显示扫码支付区域 */ const showQrCode = ref(false) -/** 支付宝表单 HTML（用于 iframe 渲染） */ +/** 支付宝表单 HTML */ const paymentFormHtml = ref('') -/** 微信支付 code_url（用于生成二维码） */ +/** 微信支付 code_url */ const wechatCodeUrl = ref('') -/** 微信二维码 iframe 的 srcdoc HTML */ +/** 微信二维码 iframe srcdoc */ const wechatQrHtml = computed(() => { if (!wechatCodeUrl.value) return '' - return `