diff --git a/components.d.ts b/components.d.ts index 3645be0..7519860 100644 --- a/components.d.ts +++ b/components.d.ts @@ -38,6 +38,11 @@ declare module 'vue' { ElTooltip: typeof import('element-plus/es')['ElTooltip'] FullscreenLoading: typeof import('./src/components/FullscreenLoading.vue')['default'] HelloWorld: typeof import('./src/components/HelloWorld.vue')['default'] + HomeAbout: typeof import('./src/components/HomeAbout.vue')['default'] + HomeAnnouncement: typeof import('./src/components/HomeAnnouncement.vue')['default'] + HomeContent: typeof import('./src/components/HomeContent.vue')['default'] + HomeJobRadar: typeof import('./src/components/HomeJobRadar.vue')['default'] + HomeMentor: typeof import('./src/components/HomeMentor.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'] diff --git a/src/api/announcement.ts b/src/api/announcement.ts index a0bb579..9bc78c0 100644 --- a/src/api/announcement.ts +++ b/src/api/announcement.ts @@ -91,6 +91,60 @@ export interface AnnouncementPageData { list: AnnouncementItem[] } +/** 校招公告统计数据 */ +export interface AnnouncementStatistics { + /** 今日新增公告数 */ + dayCount: number + /** 本月新增公告数 */ + monthCount: number + /** 累计公告数 */ + totalCount: number +} + +/** + * 获取公告最新更新时间 + * GET /public/recruitAnnouncement/lastUpdateTime + * 返回毫秒时间戳（如 1786387561000） + */ +export function fetchAnnouncementLastUpdateTime() { + return request.get>('/public/recruitAnnouncement/lastUpdateTime') +} + +/** + * 获取公告毕业年份标签列表 + * GET /public/recruitAnnouncement/year + * 返回年份数组，如 [2021, 2022, ..., 2029] + */ +export function fetchAnnouncementRecruitYearTags() { + return request.get>('/public/recruitAnnouncement/year') +} + +/** + * 获取公告学历筛选选项 + * GET /public/recruitAnnouncement/education + * 返回学历字符串数组，如 ["专科","中专","博士","大专","本科","硕士","高中"] + */ +export function fetchAnnouncementEducationOptions() { + return request.get>('/public/recruitAnnouncement/education') +} + +/** + * 获取公告招聘批次筛选选项 + * GET /public/recruitAnnouncement/batch + * 返回批次字符串数组 + */ +export function fetchAnnouncementBatchOptions() { + return request.get>('/public/recruitAnnouncement/batch') +} + +/** + * 获取校招公告统计数据 + * GET /public/recruitAnnouncement/statistics + */ +export function fetchAnnouncementStatistics() { + return request.get>('/public/recruitAnnouncement/statistics') +} + /** * 获取校招公告分页列表 * POST /public/recruitAnnouncement/page @@ -121,6 +175,8 @@ export interface AnnouncementDetail { title: string /** 公司简介 */ companyIntro: string + /** 公司规模 */ + companyScale: string /** 面向对象 */ targetAudience: string /** 专业要求 */ @@ -141,6 +197,10 @@ export interface AnnouncementDetail { inviteCode: string /** 信息来源说明 */ source: string + /** 公告地址 */ + announcementUrl: string + /** 投递地址 */ + applyUrl: string /** 发布时间 */ publishTime: InstantTime | null /** 清洗状态 */ @@ -176,3 +236,56 @@ export function fetchAnnouncementDetail(id: string) { params: { id }, }) } + + +// ==================== 校招公告推荐列表接口 ==================== + +/** 校招公告推荐请求参数 */ +export interface AnnouncementRecommendParams { + /** 当前页码，从1开始 */ + pageNum?: number + /** 每页条数 */ + pageSize?: number + /** 关键字 */ + keyword?: string + /** 公告ID（必传，字符串避免精度丢失） */ + announcementId: string +} + +/** 校招公告推荐列表项 */ +export interface AnnouncementRecommendItem { + /** 公告ID */ + id: number + /** 公司名称 */ + companyName: string + /** 公司logo */ + logoUrl: string + /** 岗位大类列表 */ + categoryNames: string[] + /** 热招城市列表 */ + cityNames: string[] +} + +/** 校招公告推荐分页数据 */ +export interface AnnouncementRecommendPageData { + /** 当前页码 */ + pageNum: number + /** 每页条数 */ + pageSize: number + /** 总记录数 */ + total: number + /** 数据列表 */ + list: AnnouncementRecommendItem[] +} + +/** + * 获取校招公告推荐列表 + * POST /public/recruitAnnouncement/recommend + */ +export function fetchAnnouncementRecommend(params: AnnouncementRecommendParams) { + return request.post>('/public/recruitAnnouncement/recommend', { + pageNum: params.pageNum ?? 1, + pageSize: params.pageSize ?? 100, + ...params, + }) +} diff --git a/src/api/jobs.ts b/src/api/jobs.ts index 3665475..33bf88b 100644 --- a/src/api/jobs.ts +++ b/src/api/jobs.ts @@ -146,7 +146,7 @@ export interface HotCityItem { * GET /job/industry/hot */ export function fetchHotIndustries() { - return request.get>('/job/industry/hot') + return request.get>('/job/public/industry/hot') } /** @@ -154,7 +154,7 @@ export function fetchHotIndustries() { * GET /job/category/hot */ export function fetchHotCategories() { - return request.get>('/job/category/hot') + return request.get>('/job/public/category/hot') } /** @@ -162,7 +162,7 @@ export function fetchHotCategories() { * GET /job/city/hot */ export function fetchHotCities() { - return request.get>('/job/city/hot') + return request.get>('/job/public/city/hot') } // ==================== 求职意向 ==================== diff --git a/src/assets/images/home/home-about-01.png b/src/assets/images/home/home-about-01.png new file mode 100644 index 0000000..08a1b80 Binary files /dev/null and b/src/assets/images/home/home-about-01.png differ diff --git a/src/assets/images/home/home-about-02.png b/src/assets/images/home/home-about-02.png new file mode 100644 index 0000000..35411b8 Binary files /dev/null and b/src/assets/images/home/home-about-02.png differ diff --git a/src/assets/images/home/home-about-03.png b/src/assets/images/home/home-about-03.png new file mode 100644 index 0000000..cacb5b9 Binary files /dev/null and b/src/assets/images/home/home-about-03.png differ diff --git a/src/assets/images/resume-list-img01.png b/src/assets/images/resume-list-img01.png new file mode 100644 index 0000000..91f717d Binary files /dev/null and b/src/assets/images/resume-list-img01.png differ diff --git a/src/assets/styles/components/agent-browser-install-guide.scss b/src/assets/styles/components/agent-browser-install-guide.scss index 3b22e05..5f85881 100644 --- a/src/assets/styles/components/agent-browser-install-guide.scss +++ b/src/assets/styles/components/agent-browser-install-guide.scss @@ -176,6 +176,7 @@ gap: 0.24rem; margin-bottom: 0.16rem; margin-left: 0.4rem; + flex-wrap: wrap; } .agent-browser-guide-drawer__browser-link { diff --git a/src/assets/styles/components/ai-chat.scss b/src/assets/styles/components/ai-chat.scss index faa874d..2571751 100644 --- a/src/assets/styles/components/ai-chat.scss +++ b/src/assets/styles/components/ai-chat.scss @@ -5,12 +5,10 @@ width: var(--chat-width, 3.6rem); height: var(--app-height, 100vh); background: $bg-white; - position: fixed; - right: 0; - top: 0; display: flex; flex-direction: column; box-sizing: border-box; + flex-shrink: 0; // ==================== 顶部头部区域 ==================== &__header { diff --git a/src/assets/styles/components/home-about.scss b/src/assets/styles/components/home-about.scss new file mode 100644 index 0000000..38177f9 --- /dev/null +++ b/src/assets/styles/components/home-about.scss @@ -0,0 +1,484 @@ +@use '../variables' as *; + +// ======================================== +// 首页-关于我们Tab样式 +// ======================================== +.home-about { + font-size: 0.14rem; + width: 100%; + + // ==================== Hero 区域 ==================== + &__hero { + position: relative; + padding: 0.6rem 0 0.8rem; + overflow: hidden; + } + + // 底部居中渐变浅色色块 + &__hero-orb { + position: absolute; + bottom: -2.5rem; + left: 50%; + transform: translateX(-50%); + width: 8rem; + height: 3rem; + border-radius: 50%; + background: rgba(82, 202, 209, 0.15); + filter: blur(1rem); + pointer-events: none; + } + + + + &__hero-inner { + position: relative; + z-index: 1; + text-align: center; + max-width: 12rem; + margin: 0 auto; + } + + &__hero-kicker { + font-size: 0.20rem; + line-height: 0.27rem; + font-weight: 450; + color: $accent; + margin-bottom: 0.24rem; + } + + &__hero-title { + font-size: 0.54rem; + line-height: 0.72rem; + font-weight: 630; + color: #111111; + margin-top: 0.24rem; + margin-bottom: 0.24rem; + } + + &__hero-subtitle { + font-size: 0.20rem; + line-height: 0.27rem; + font-weight: 330; + color: #64748B; + margin-bottom: 0.40rem; + } + + &__hero-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.84rem; + height: 0.56rem; + background: $accent; + border-radius: 0.16rem; + border: none; + font-size: 0.16rem; + line-height: 0.21rem; + font-weight: 520; + color: #FFFFFF; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: $accent-hover; + } + } + + // ==================== 通用 kicker ==================== + &__kicker { + display: block; + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 520; + color: $accent; + margin-bottom: 0.12rem; + } + + // ==================== 通用标题 ==================== + &__section-title { + font-size: 0.48rem; + line-height: 0.64rem; + font-weight: 520; + color: #111111; + text-align: center; + } + + &__section-subtitle { + font-size: 0.20rem; + line-height: 0.27rem; + font-weight: 330; + color: #64748B; + text-align: center; + margin-top: 0.16rem; + } + + // ==================== 产品介绍 ==================== + &__intro { + padding: 0.80rem 0; + background: $bg-white; + } + + &__intro-inner { + max-width: 12rem; + margin: 0 auto; + display: flex; + align-items: flex-start; + gap: 0.70rem; + } + + &__intro-img { + flex-shrink: 0; + width: 5.06rem; + height: 3.68rem; + background: #F5FAFA; + border-radius: 0.22rem; + display: flex; + align-items: center; + justify-content: center; + } + + &__intro-img-placeholder { + width: 100%; + height: 100%; + } + + &__intro-text { + flex: 1; + } + + &__intro-desc { + font-size: 0.16rem; + line-height: 0.24rem; + font-weight: 380; + color: #64748B; + margin-top: 0.16rem; + } + + // ==================== 功能亮点 ==================== + &__features { + position: relative; + padding: 0.80rem 0; + overflow: hidden; + } + + &__features-header { + text-align: center; + margin-bottom: 0.60rem; + } + + &__features-grid { + max-width: 12rem; + margin: 0 auto; + display: flex; + gap: 0.16rem; + justify-content: center; + } + + &__feature-card { + width: 2.68rem; + height: 2.97rem; + background: $bg-white; + box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06); + border-radius: 0.16rem; + padding: 0.24rem 0.24rem; + box-sizing: border-box; + } + + &__feature-icon { + width: 0.58rem; + height: 0.58rem; + background: #F4FBFB; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.16rem; + } + + &__feature-title { + font-size: 0.18rem; + line-height: 0.24rem; + font-weight: 520; + color: #111111; + margin-bottom: 0.08rem; + } + + &__feature-desc { + font-size: 0.14rem; + line-height: 0.24rem; + font-weight: 330; + color: $text-middle; + } + + // ==================== 为什么创立 ==================== + &__why { + padding: 0.80rem 0; + max-width: 12rem; + margin: 0 auto; + } + + &__why-header { + text-align: center; + margin-bottom: 0.60rem; + } + + &__why-content { + background: $bg-white; + box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06); + border-radius: 0.32rem; + padding: 0.40rem; + overflow: hidden; + } + + &__why-block { + display: flex; + align-items: flex-start; + gap: 0.40rem; + margin-bottom: 0.40rem; + + &:last-child { + margin-bottom: 0; + } + + &--reverse { + } + } + + &__why-text { + flex: 1; + + h3 { + font-size: 0.24rem; + line-height: 0.32rem; + font-weight: 520; + color: #111111; + margin-bottom: 0.16rem; + } + + p { + font-size: 0.16rem; + line-height: 0.30rem; + font-weight: 330; + color: $text-middle; + margin-bottom: 0.12rem; + } + } + + &__why-sign { + font-size: 0.16rem; + line-height: 0.30rem; + font-weight: 330; + color: $text-middle; + text-align: right; + } + + &__why-img { + flex-shrink: 0; + width: 5.44rem; + height: 2.59rem; + background: #F5FAFA; + border-radius: 0.16rem; + } + + // ==================== 万千毕业生信赖 ==================== + &__trust { + padding: 0.80rem 0; + max-width: 12rem; + margin: 0 auto; + } + + &__trust-header { + text-align: center; + margin-bottom: 0.60rem; + } + + &__trust-dark-card { + background: #111111; + border-radius: 0.16rem; + padding: 0.28rem 0.40rem; + margin-bottom: 0.24rem; + position: relative; + overflow: hidden; + } + + &__trust-dark-text { + max-width: 75%; + + p { + font-size: 0.16rem; + line-height: 0.30rem; + font-weight: 330; + color: #FFFFFF; + margin-bottom: 0.10rem; + + &:first-child { + font-weight: 520; + margin-bottom: 0.16rem; + } + } + } + + &__trust-dark-logo { + position: absolute; + right: 0.40rem; + top: 50%; + transform: translateY(-50%); + width: 1.64rem; + height: 1.64rem; + opacity: 0.1; + background: $bg-white; + border-radius: 50%; + } + + &__trust-cards { + display: flex; + gap: 0.24rem; + margin-bottom: 0.24rem; + } + + &__trust-card { + flex: 1; + background: $bg-white; + box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.05); + border-radius: 0.16rem; + padding: 0.24rem 0.28rem; + + h4 { + font-size: 0.18rem; + line-height: 0.24rem; + font-weight: 520; + color: #111111; + margin-bottom: 0.16rem; + } + + p { + font-size: 0.14rem; + line-height: 0.24rem; + font-weight: 330; + color: $text-middle; + } + } + + &__trust-summary { + font-size: 0.24rem; + line-height: 0.32rem; + font-weight: 520; + color: $text-dark; + text-align: center; + margin-top: 0.40rem; + } + + // ==================== 价值观 ==================== + &__values { + padding: 0.80rem 0; + max-width: 12rem; + margin: 0 auto; + } + + &__values-header { + text-align: center; + margin-bottom: 0.60rem; + } + + &__values-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.24rem; + } + + &__value-card { + background: #F9FAFB; + border-radius: 0.24rem; + padding: 0.32rem; + } + + &__value-icon { + margin-bottom: 0.16rem; + } + + &__value-title { + font-size: 0.24rem; + line-height: 0.32rem; + font-weight: 630; + color: #111111; + margin-bottom: 0.08rem; + } + + &__value-desc { + font-size: 0.18rem; + line-height: 0.24rem; + font-weight: 330; + color: $text-middle; + } + + // ==================== 联系我们 ==================== + &__contact { + padding: 0.80rem 0; + max-width: 12rem; + margin: 0 auto; + } + + &__contact-header { + text-align: center; + margin-bottom: 0.60rem; + } + + &__contact-grid { + display: flex; + gap: 0.24rem; + justify-content: center; + } + + &__contact-card { + flex: 1; + max-width: 3.77rem; + background: $bg-white; + box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06); + border-radius: 0.16rem; + padding: 0.24rem; + display: flex; + align-items: flex-start; + gap: 0.16rem; + } + + &__contact-icon { + flex-shrink: 0; + width: 0.58rem; + height: 0.58rem; + background: #F4FBFB; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + } + + &__contact-info { + h4 { + font-size: 0.18rem; + line-height: 0.24rem; + font-weight: 520; + color: #111111; + margin-bottom: 0.04rem; + } + + p { + font-size: 0.14rem; + line-height: 0.24rem; + font-weight: 330; + color: $text-middle; + margin-bottom: 0.08rem; + } + } + + &__contact-link { + font-size: 0.14rem; + line-height: 0.24rem; + font-weight: 520; + color: $accent; + text-decoration: none; + + &:hover { + color: $accent-hover; + } + } +} diff --git a/src/assets/styles/components/home-announcement.scss b/src/assets/styles/components/home-announcement.scss new file mode 100644 index 0000000..d236c6b --- /dev/null +++ b/src/assets/styles/components/home-announcement.scss @@ -0,0 +1,387 @@ +@use '../variables' as *; + +// ======================================== +// 首页-校招公告Tab样式 +// ======================================== +.home-announcement { + font-size: 0.14rem; + width: 100%; + + // 第一部分容器 + &__section { + width: 12rem; + margin: 0 auto; + padding: 0.6rem 0; + } + + // 标题区域 + &__header { + display: flex; + justify-content: space-between; + margin-bottom: 0.4rem; + } + + &__title { + font-size: 0.36rem; + line-height: 0.48rem; + font-weight: 700; + color: $text-dark; + margin-bottom: 0.12rem; + } + + &__subtitle { + font-size: 0.14rem; + line-height: 0.2rem; + color: $text-light; + } + + // ==================== 筛选面板（与岗位雷达一致） ==================== + &__filters { + background: $bg-white; + border: 1px solid #F0F0F0; + box-shadow: 0px 2px 6px rgba(15, 23, 42, 0.025); + border-radius: 0.14rem; + padding: 0.24rem 0.40rem; + margin-bottom: 0.32rem; + } + + &__filter-row { + display: flex; + align-items: center; + margin-bottom: 0.16rem; + + &:last-child { + margin-bottom: 0; + } + } + + &__filter-label { + width: 0.28rem; + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 450; + color: $text-light; + flex-shrink: 0; + margin-right: 0.24rem; + } + + &__filter-chips { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.14rem; + } + + &__chip { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.06rem 0.12rem; + border-radius: 999px; + background: #F5F8F8; + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 330; + color: $text-middle; + cursor: pointer; + transition: all 0.2s; + white-space: nowrap; + + &:hover { + background: #E8F7F8; + } + + &--active { + background: $accent; + color: #FFFFFF; + font-weight: 520; + + &:hover { + background: $accent-hover; + } + } + } + + // ==================== 公告卡片网格 ==================== + &__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.16rem; + } + + // 公告卡片 + &__card { + background: $bg-white; + border: 1px solid #E8F1F1; + border-radius: 0.16rem; + cursor: pointer; + transition: box-shadow 0.2s, border-color 0.2s; + overflow: hidden; + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); + border-color: #D0E8E8; + } + } + + // 卡片主体 + &__card-body { + display: flex; + padding: 0.16rem 0.20rem; + gap: 0.12rem; + } + + // 左侧logo容器 + &__card-logo-wrap { + flex-shrink: 0; + } + + &__card-logo { + width: 0.48rem; + height: 0.48rem; + border-radius: 0.08rem; + border: 1px solid #F4F4F4; + object-fit: cover; + + &--default { + display: flex; + align-items: center; + justify-content: center; + background: $bg-white; + } + } + + // 右侧内容区 + &__card-content { + flex: 1; + min-width: 0; + } + + // 标题行 + &__card-title-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.06rem; + } + + &__card-title { + font-size: 0.16rem; + line-height: 0.21rem; + font-weight: 520; + color: $text-dark; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + min-width: 0; + } + + // 公司类型标签（蓝色） + &__card-type-tag { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.02rem 0.08rem; + background: #ECF3FC; + border-radius: 0.04rem; + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 330; + color: #2672E1; + white-space: nowrap; + margin-left: 0.08rem; + flex-shrink: 0; + } + + // 标签行 + &__card-tags { + display: flex; + align-items: center; + gap: 0.08rem; + margin-bottom: 0.10rem; + } + + &__card-tag { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.02rem 0.08rem; + border-radius: 0.04rem; + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 330; + + // 批次标签（青色） + &--batch { + background: #F0FAFB; + color: $accent; + } + + // 学历标签（橙色） + &--edu { + background: #FAF2ED; + color: #D17E52; + font-weight: 305; + } + } + + // 信息行（岗位/城市） + &__card-info-line { + display: flex; + align-items: center; + gap: 0.04rem; + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 380; + color: #64748B; + margin-bottom: 0.04rem; + + &:last-child { + margin-bottom: 0; + } + } + + &__card-icon { + width: 0.16rem; + height: 0.16rem; + flex-shrink: 0; + } + + // 卡片底部渐变条 + &__card-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.10rem 0.20rem; + background: linear-gradient(270deg, rgba(159, 208, 81, 0.08) 0%, rgba(82, 202, 209, 0.08) 62.02%); + } + + &__card-update { + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 330; + color: #94A3B8; + } + + &__card-deadline { + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 520; + color: $text-dark; + } + + // ==================== 加载中 ==================== + &__loading { + display: flex; + align-items: center; + justify-content: center; + padding: 0.4rem 0; + gap: 0.08rem; + color: $text-light; + font-size: 0.14rem; + } + + &__spinner { + width: 0.2rem; + height: 0.2rem; + border: 2px solid #e5e7eb; + border-top-color: $accent; + border-radius: 50%; + animation: home-announcement-spin 0.8s linear infinite; + } + + // ==================== 查看更多按钮 ==================== + &__more { + display: flex; + justify-content: center; + margin-top: 0.32rem; + } + + &__more-btn { + padding: 0.10rem 0.40rem; + border-radius: 0.08rem; + background: $text-dark; + color: #FFFFFF; + font-size: 0.14rem; + line-height: 0.2rem; + font-weight: 500; + border: none; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: #333; + } + } + + // ==================== 首页版统计卡片 ==================== + &__stats-card { + display: flex; + align-items: center; + padding: 0.20rem 0.24rem; + gap: 0.40rem; + background: $bg-white; + border: 1px solid #F0F0F0; + box-shadow: 0px 2px 6px rgba(15, 23, 42, 0.025); + border-radius: 0.12rem; + } + + &__stats-title-wrap { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.08rem; + } + + &__stats-title { + font-size: 0.16rem; + line-height: 0.21rem; + font-weight: 520; + color: $text-dark; + } + + &__stats-date { + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 330; + color: #64748B; + } + + &__stats-data { + display: flex; + align-items: center; + gap: 0.20rem; + } + + &__stats-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.04rem; + } + + &__stats-num { + font-size: 0.30rem; + line-height: 0.40rem; + font-weight: 520; + color: $accent; + } + + &__stats-label { + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 330; + color: $text-middle; + } + + &__stats-divider { + width: 0; + height: 0.52rem; + border-left: 1px solid #F0F0F0; + } +} + +@keyframes home-announcement-spin { + to { transform: rotate(360deg); } +} diff --git a/src/assets/styles/components/home-job-radar.scss b/src/assets/styles/components/home-job-radar.scss new file mode 100644 index 0000000..6f11106 --- /dev/null +++ b/src/assets/styles/components/home-job-radar.scss @@ -0,0 +1,287 @@ +@use '../variables' as *; + +// ======================================== +// 首页-岗位雷达Tab样式 +// ======================================== +.home-job-radar { + font-size: 0.14rem; + width: 100%; + + // 第一部分容器 + &__section { + width: 12rem; + margin: 0 auto; + padding: 0.6rem 0; + } + + // 标题区域 + &__header { + text-align: center; + margin-bottom: 0.4rem; + } + + &__title { + font-size: 0.36rem; + line-height: 0.48rem; + font-weight: 700; + color: $text-dark; + margin-bottom: 0.12rem; + } + + &__subtitle { + font-size: 0.14rem; + line-height: 0.2rem; + color: $text-light; + } + + // ==================== 筛选面板 ==================== + &__filters { + background: $bg-white; + border: 1px solid #F0F0F0; + box-shadow: 0px 2px 6px rgba(15, 23, 42, 0.025); + border-radius: 0.14rem; + padding: 0.24rem 0.40rem; + margin-bottom: 0.32rem; + } + + // 筛选行 + &__filter-row { + display: flex; + align-items: center; + margin-bottom: 0.16rem; + + &:last-child { + margin-bottom: 0; + } + } + + // 筛选标签文字 + &__filter-label { + width: 0.28rem; + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 450; + color: $text-light; + flex-shrink: 0; + margin-right: 0.24rem; + } + + // 筛选chip容器 + &__filter-chips { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.14rem; + } + + // 筛选chip + &__chip { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.06rem 0.12rem; + border-radius: 999px; + background: #F5F8F8; + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 330; + color: $text-middle; + cursor: pointer; + transition: all 0.2s; + white-space: nowrap; + + &:hover { + background: #E8F7F8; + } + + // 选中态 + &--active { + background: $accent; + color: #FFFFFF; + font-weight: 520; + + &:hover { + background: $accent-hover; + } + } + } + + // ==================== 岗位卡片网格 ==================== + &__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.16rem; + } + + // 岗位卡片 + &__card { + background: $bg-white; + border: 1px solid #F0F0F0; + border-radius: 0.08rem; + padding: 0.16rem; + cursor: pointer; + transition: box-shadow 0.2s, border-color 0.2s; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 1.33rem; + box-sizing: border-box; + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); + border-color: #E0E0E0; + } + } + + // 卡片上半部分 + &__card-top { + // 无需额外样式 + } + + // 岗位标题 + &__card-title { + font-size: 0.16rem; + line-height: 0.21rem; + font-weight: 520; + color: $text-dark; + margin-bottom: 0.08rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + // 标签行 + &__card-tags { + display: flex; + align-items: center; + gap: 0.08rem; + } + + // 单个标签 + &__card-tag { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.03rem 0.06rem; + background: #F3F4F6; + border-radius: 0.04rem; + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 380; + color: $text-middle; + } + + // 卡片下半部分 + &__card-bottom { + display: flex; + align-items: center; + justify-content: space-between; + } + + // 公司信息 + &__card-company { + display: flex; + align-items: center; + gap: 0.04rem; + } + + // 公司logo + &__card-logo { + width: 0.24rem; + height: 0.24rem; + border-radius: 50%; + border: 1px solid #F4F4F4; + object-fit: cover; + flex-shrink: 0; + + &--default { + display: flex; + align-items: center; + justify-content: center; + background: $bg-white; + } + } + + // 公司名称 + &__card-company-name { + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 450; + color: $text-dark; + max-width: 1.69rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + // 公司类型标签 + &__card-company-type { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.03rem 0.06rem; + background: #ECFDF3; + border-radius: 0.04rem; + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 380; + color: #067647; + } + + // 发布时间 + &__card-time { + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 330; + color: $text-light; + text-align: right; + } + + // ==================== 加载中 ==================== + &__loading { + display: flex; + align-items: center; + justify-content: center; + padding: 0.4rem 0; + gap: 0.08rem; + color: $text-light; + font-size: 0.14rem; + } + + &__spinner { + width: 0.2rem; + height: 0.2rem; + border: 2px solid #e5e7eb; + border-top-color: $accent; + border-radius: 50%; + animation: spin 0.8s linear infinite; + } + + // ==================== 查看更多按钮 ==================== + &__more { + display: flex; + justify-content: center; + margin-top: 0.32rem; + } + + &__more-btn { + padding: 0.10rem 0.40rem; + border-radius: 0.08rem; + background: $text-dark; + color: #FFFFFF; + font-size: 0.14rem; + line-height: 0.2rem; + font-weight: 500; + border: none; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: #333; + } + } +} + +@keyframes spin { + to { transform: rotate(360deg); } +} diff --git a/src/assets/styles/components/home-mentor.scss b/src/assets/styles/components/home-mentor.scss new file mode 100644 index 0000000..6b02a9d --- /dev/null +++ b/src/assets/styles/components/home-mentor.scss @@ -0,0 +1,310 @@ +@use '../variables' as *; + +// ======================================== +// 首页-求职辅导Tab样式 +// ======================================== +.home-mentor { + font-size: 0.14rem; + width: 100%; + + // 第一部分容器 + &__section { + width: 12rem; + margin: 0 auto; + padding: 0.6rem 0; + } + + // 标题区域 + &__header { + text-align: center; + margin-bottom: 0.4rem; + } + + &__title { + font-size: 0.36rem; + line-height: 0.48rem; + font-weight: 700; + color: $text-dark; + margin-bottom: 0.12rem; + } + + &__subtitle { + font-size: 0.14rem; + line-height: 0.2rem; + color: $text-middle; + } + + // ==================== 行业分类Tab ==================== + &__tabs { + display: flex; + align-items: center; + justify-content: center; + gap: 0.08rem; + margin-bottom: 0.32rem; + } + + &__tab { + padding: 0.08rem 0.20rem; + border-radius: 999px; + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 400; + color: $text-dark; + cursor: pointer; + transition: all 0.2s; + white-space: nowrap; + border: 1px solid transparent; + + &:hover { + background: #F0FAFB; + color: $accent; + } + + // 选中态 + &--active { + background: $accent; + color: #FFFFFF; + font-weight: 500; + + &:hover { + background: $accent-hover; + color: #FFFFFF; + } + } + } + + // ==================== 导师列表 ==================== + &__list-wrap { + height: 11rem; + overflow-y: auto; + } + + &__list { + // 无需额外样式 + } + + &__no-more { + text-align: center; + padding: 0.24rem 0; + font-size: 0.14rem; + color: $text-light; + } + + // 导师卡片 + &__card { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.24rem 0.32rem; + background: $bg-white; + border: 1px solid #F0F0F0; + border-radius: 0.12rem; + margin-bottom: 0.12rem; + cursor: pointer; + transition: box-shadow 0.2s, border-color 0.2s; + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + border-color: #E0E8E8; + } + + &:last-child { + margin-bottom: 0; + } + } + + // 卡片左侧 — 限制最大宽度让右侧话题纵向对齐 + &__card-left { + display: flex; + align-items: center; + gap: 0.14rem; + flex: 1 1 0; + max-width: 50%; + min-width: 0; + } + + // 头像 + &__avatar-wrap { + flex-shrink: 0; + } + + &__avatar { + width: 0.56rem; + height: 0.56rem; + border-radius: 50%; + object-fit: cover; + } + + &__avatar-placeholder { + width: 0.56rem; + height: 0.56rem; + border-radius: 50%; + background: #EDF9FA; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.2rem; + font-weight: 600; + color: $accent; + } + + // 导师信息 + &__card-info { + flex: 1; + min-width: 0; + } + + &__card-name-row { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.10rem; + margin-bottom: 0.08rem; + } + + &__card-name { + font-size: 0.18rem; + line-height: 0.24rem; + font-weight: 600; + color: $text-dark; + } + + &__card-meta { + display: flex; + align-items: center; + gap: 0.04rem; + font-size: 0.13rem; + line-height: 0.18rem; + font-weight: 400; + color: $text-middle; + } + + &__card-agency-logo { + width: 0.18rem; + height: 0.18rem; + border-radius: 50%; + object-fit: cover; + } + + // 标签列表 + &__card-labels { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.06rem; + } + + &__card-label { + display: inline-flex; + align-items: center; + padding: 0.02rem 0.08rem; + background: #F0FAFB; + border-radius: 0.04rem; + font-size: 0.12rem; + line-height: 0.16rem; + font-weight: 330; + color: $accent; + white-space: nowrap; + } + + // 卡片右侧 — flex:1 让话题区自适应剩余空间 + &__card-right { + flex: 1 1 0; + display: flex; + align-items: center; + gap: 0.12rem; + min-width: 0; + } + + // 话题列表 — 占据右侧剩余空间，自动截断 + &__card-topics { + flex: 1; + min-width: 0; + } + + &__card-topic { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.12rem; + line-height: 1.6; + color: $text-middle; + } + + // 查看详情按钮 + &__detail-btn { + display: flex; + align-items: center; + gap: 0.04rem; + padding: 0; + border: none; + background: none; + font-size: 0.14rem; + line-height: 0.19rem; + font-weight: 450; + color: $accent; + cursor: pointer; + white-space: nowrap; + transition: color 0.2s; + + &:hover { + color: $accent-hover; + } + } + + // ==================== 加载中 ==================== + &__loading { + display: flex; + align-items: center; + justify-content: center; + padding: 0.4rem 0; + gap: 0.08rem; + color: $text-light; + font-size: 0.14rem; + } + + &__spinner { + width: 0.2rem; + height: 0.2rem; + border: 2px solid #e5e7eb; + border-top-color: $accent; + border-radius: 50%; + animation: home-mentor-spin 0.8s linear infinite; + } + + // 空列表 + &__empty { + text-align: center; + padding: 0.4rem 0; + font-size: 0.14rem; + color: $text-light; + } + + // ==================== 查看更多按钮 ==================== + &__more { + display: flex; + justify-content: center; + margin-top: 0.32rem; + } + + &__more-btn { + padding: 0.10rem 0.40rem; + border-radius: 0.08rem; + background: $text-dark; + color: #FFFFFF; + font-size: 0.14rem; + line-height: 0.2rem; + font-weight: 500; + border: none; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: #333; + } + } +} + +@keyframes home-mentor-spin { + to { transform: rotate(360deg); } +} diff --git a/src/assets/styles/components/side-nav.scss b/src/assets/styles/components/side-nav.scss index 068a257..a55d993 100644 --- a/src/assets/styles/components/side-nav.scss +++ b/src/assets/styles/components/side-nav.scss @@ -9,10 +9,8 @@ color: #fff; padding: 0.2rem 0.12rem; box-sizing: border-box; - position: fixed; - left: 0; - top: 0; z-index: 100; + flex-shrink: 0; // 窄版模式（window.innerWidth < 1440） &--narrow { diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 1a23d0e..db20379 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -49,6 +49,10 @@ @use './components/mentor-aside-panel.scss'; @use './components/agent-browser-install-guide.scss'; @use './components/login-dialog.scss'; +@use './components/home-job-radar.scss'; +@use './components/home-announcement.scss'; +@use './components/home-mentor.scss'; +@use './components/home-about.scss'; // 全局样式（优先级最高） @use './auto.scss'; diff --git a/src/assets/styles/pages/agent.scss b/src/assets/styles/pages/agent.scss index 76ac6d4..efebaaa 100644 --- a/src/assets/styles/pages/agent.scss +++ b/src/assets/styles/pages/agent.scss @@ -6,9 +6,9 @@ min-height: var(--app-height, 100vh); background: $bg-main; font-size: 0.14rem; + min-width: 12.8rem; // 主内容区域（左侧导航栏右边的部分） &__content { - margin-left: var(--nav-width, 2.2rem); flex: 1; overflow-y: auto; height: var(--app-height, 100vh); diff --git a/src/assets/styles/pages/announcement-detail.scss b/src/assets/styles/pages/announcement-detail.scss index 89c816b..3797d38 100644 --- a/src/assets/styles/pages/announcement-detail.scss +++ b/src/assets/styles/pages/announcement-detail.scss @@ -11,7 +11,6 @@ // 主内容区（与 JobDetail 一致，通过 margin-left 避开侧边栏） &__content { - margin-left: var(--nav-width, 2.2rem); flex: 1; height: var(--app-height, 100vh); box-sizing: border-box; @@ -473,6 +472,7 @@ color: $text-middle; line-height: 0.16rem; white-space: nowrap; + overflow: hidden; } // ==================== 校招推荐列表项 ==================== diff --git a/src/assets/styles/pages/announcement.scss b/src/assets/styles/pages/announcement.scss index b40209e..5894dd9 100644 --- a/src/assets/styles/pages/announcement.scss +++ b/src/assets/styles/pages/announcement.scss @@ -3,9 +3,9 @@ .announcement-page { display: flex; + min-width: 12.8rem; &__content { - margin-left: var(--nav-width, 2.2rem); flex: 1; padding-bottom: 0.18rem; height: var(--app-height, 100vh); @@ -17,7 +17,7 @@ // 页面标题 &__title { - font-size: 0.24rem; + font-size: 0.18rem; font-weight: 700; color: $text-dark; margin: 0; @@ -26,7 +26,7 @@ } &__subtitle { - font-size: 0.13rem; + font-size: 0.14rem; color: $text-light; padding: 0; } diff --git a/src/assets/styles/pages/home.scss b/src/assets/styles/pages/home.scss index e434034..b54d95b 100644 --- a/src/assets/styles/pages/home.scss +++ b/src/assets/styles/pages/home.scss @@ -9,13 +9,14 @@ .home-page { width: 100%; overflow-x: hidden; - background: #fff; + background: radial-gradient(63.8% 19.39% at 60.25% 0%, #CEF0F2 0%, #FFFFFF 100%) no-repeat top / 100% 5rem, #fff; color: #111; font-family: system-ui, -apple-system, sans-serif; // 全局基础行高重置，防止 1rem=100px 导致子元素继承异常行高 line-height: 1.5; font-size: 0.14rem; + // ==================== 顶部导航栏 ==================== .home-nav { position: sticky; @@ -33,6 +34,8 @@ display: flex; align-items: center; justify-content: space-between; + background: transparent; + transition: background 0.3s, box-shadow 0.3s; &--scorlled { position: fixed; @@ -67,6 +70,47 @@ display: block; } + // 中间Tab导航区域 + &__tabs { + display: flex; + align-items: center; + gap: 0.40rem; + } + + // 单个Tab项 + &__tab { + position: relative; + font-size: 0.14rem; + line-height: 0.2rem; + font-weight: 400; + color: $text-dark; + cursor: pointer; + padding-bottom: 0.06rem; + transition: font-weight 0.2s; + + &:hover { + color: $accent; + } + + // 选中态：加粗 + 底部下划线 + &--active { + font-weight: 600; + color: $text-dark; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 0.2rem; + height: 0.02rem; + background: $accent; + border-radius: 0.01rem; + } + } + } + // 导航右侧 CTA 按钮 &__btn { padding: 0.1rem 0.32rem; @@ -85,11 +129,9 @@ // ==================== Hero 主视觉区 ==================== .home-hero { - background: #fff; position: relative; overflow: hidden; font-size: 0.14rem; - background: radial-gradient(34.95% 29.57% at 60.26041666666667% 0%, rgba(206, 240, 242, 1) 0%, rgba(255, 255, 255, 1) 100%); // 背景色块 — 顶部 &__orb { position: absolute; @@ -107,7 +149,7 @@ height: 6rem; border-radius: 50%; filter: blur(0.5rem); - background: rgba(82, 202, 209, 0.24); + //background: rgba(82, 202, 209, 0.24); opacity: 0; } diff --git a/src/assets/styles/pages/job-detail.scss b/src/assets/styles/pages/job-detail.scss index 771c45e..249e54f 100644 --- a/src/assets/styles/pages/job-detail.scss +++ b/src/assets/styles/pages/job-detail.scss @@ -2,9 +2,9 @@ // ==================== 岗位详情页 ==================== .job-detail { + min-width: 12.8rem; + &__content { - margin-left: var(--nav-width, 2.2rem); - margin-right: var(--chat-width, 3.6rem); flex: 1; height: var(--app-height, 100vh); box-sizing: border-box; diff --git a/src/assets/styles/pages/jobs.scss b/src/assets/styles/pages/jobs.scss index 2a2d3ec..cfea8ab 100644 --- a/src/assets/styles/pages/jobs.scss +++ b/src/assets/styles/pages/jobs.scss @@ -4,10 +4,9 @@ .jobs-page { display: flex; + min-width: 12.8rem; &__content { - margin-left: var(--nav-width, 2.2rem); - margin-right: var(--chat-width, 3.6rem); flex: 1; padding-bottom: 0.18rem; height: var(--app-height, 100vh); @@ -15,6 +14,8 @@ overflow: hidden; background: $bg-main; font-size: 0.14rem; + display: flex; + flex-direction: column; } // 页面标题 @@ -601,11 +602,12 @@ } } - // 职位列表（用 calc 减去上方头部+筛选栏大致高度，保证列表独立滚动） + // 职位列表（flex:1 自动占满剩余空间，保证列表独立滚动） &__list { gap: 0; overflow-y: auto; - height: calc(var(--app-height, 100vh) - 1.8rem); + flex: 1; + min-height: 0; padding-bottom: 0.2rem; margin: 0 0.24rem; } diff --git a/src/assets/styles/pages/login.scss b/src/assets/styles/pages/login.scss index e30390d..0f1ec6f 100644 --- a/src/assets/styles/pages/login.scss +++ b/src/assets/styles/pages/login.scss @@ -1,6 +1,7 @@ @use '../variables' as *; /* 登录页面 — 左右分栏全屏布局 */ .login-view { + min-width: 12.8rem; font-size: 0.14rem; display: flex; align-items: flex-start; diff --git a/src/assets/styles/pages/mentor-detail.scss b/src/assets/styles/pages/mentor-detail.scss index 40cc17e..c0e8bb8 100644 --- a/src/assets/styles/pages/mentor-detail.scss +++ b/src/assets/styles/pages/mentor-detail.scss @@ -3,6 +3,7 @@ // ==================== 导师详情页样式 ==================== .mentor-detail { + min-width: 12.8rem; font-size: 0.14rem; width: 100%; height: var(--app-height, 100vh); @@ -14,7 +15,6 @@ flex: 1; height: 100%; overflow: hidden; - 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 4d4a2cb..9b1d7a0 100644 --- a/src/assets/styles/pages/mentor.scss +++ b/src/assets/styles/pages/mentor.scss @@ -3,6 +3,7 @@ // ==================== Mentor 导师页面样式 ==================== .mentor-page { + min-width: 12.8rem; font-size: 0.14rem; width: 100%; height: var(--app-height, 100vh); @@ -14,7 +15,6 @@ flex: 1; height: 100%; overflow: hidden; - margin-left: var(--nav-width, 2.2rem); } // 左侧主内容区 diff --git a/src/assets/styles/pages/profile.scss b/src/assets/styles/pages/profile.scss index 69f6a7d..28c2be8 100644 --- a/src/assets/styles/pages/profile.scss +++ b/src/assets/styles/pages/profile.scss @@ -2,8 +2,9 @@ // ==================== 个人资料页 ==================== .profile-page { + min-width: 12.8rem; + &__content { - 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 64b1b6b..f58bd36 100644 --- a/src/assets/styles/pages/resume-detail.scss +++ b/src/assets/styles/pages/resume-detail.scss @@ -2,8 +2,9 @@ // ==================== 简历详情页 ==================== .resume-detail { + min-width: 12.8rem; + &__content { - 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 54e5a99..c650f6f 100644 --- a/src/assets/styles/pages/resume.scss +++ b/src/assets/styles/pages/resume.scss @@ -1,9 +1,10 @@ @use '../variables' as *; -// ==================== 简历列表页 ==================== +// ==================== 简历列表页（卡片视图） ==================== .resume-page { + min-width: 12.8rem; + &__content { - margin-left: var(--nav-width, 2.2rem); flex: 1; height: var(--app-height, 100vh); box-sizing: border-box; @@ -29,246 +30,278 @@ margin: 0; } - &__upload-btn { - display: flex; - align-items: center; - gap: 0.06rem; - background: $btn-dark; - color: $bg-white; - border: none; - border-radius: 0.08rem; - padding: 0.08rem 0.14rem; - font-size: 0.13rem; - font-weight: 500; - cursor: pointer; - transition: background 0.2s; - - &:hover { - background: $btn-dark-hover; - } - } - - // 从个人资料创建按钮（描边样式） - &__create-btn { - display: flex; - align-items: center; - gap: 0.06rem; - background: $bg-white; - color: $accent; - border: 1px solid $accent; - border-radius: 0.08rem; - padding: 0.08rem 0.14rem; - font-size: 0.13rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s; - - &:hover { - background: rgba($accent, 0.06); - } - - &:disabled { - opacity: 0.6; - cursor: not-allowed; - } - } - - &__upload-icon { - width: 0.14rem; - height: 0.14rem; - } - - // 表格容器（超出时可滚动） - &__table-wrap { - background: $bg-white; - border-radius: 0.12rem; - margin: 0.18rem 0.17rem; + // 卡片网格容器 + &__card-grid { + flex: 1; overflow-y: auto; - flex: 0 1 auto; - min-height: 0; + padding: 0.24rem; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + gap: 0.24rem; } - &__table { - width: 100%; - border-collapse: collapse; - table-layout: fixed; - } - - &__th { - text-align: left; - padding: 0.14rem 0.2rem; - font-size: 0.12rem; - font-weight: 600; - color: $text-dark; - border-bottom: 1px solid $border-color; - white-space: nowrap; - width: 15%; - position: sticky; - top: 0; - background: $bg-white; - z-index: 1; - - &--action { - width: 25%; - } - } - - &__row { + // ==================== 简历卡片 ==================== + &__card { + width: 2.10rem; + height: 2.97rem; + border-radius: 0.12rem; cursor: pointer; - transition: background 0.15s; + transition: transform 0.3s ease, filter 0.3s ease; + position: relative; &:hover { - background: $theme-color; - } - - &:not(:last-child) { - border-bottom: 1px solid $border-color; + transform: translateY(-0.08rem); + filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.06)); } } - &__td { - padding: 0.16rem 0.2rem; - font-size: 0.13rem; - color: $text-dark; - vertical-align: middle; - - &--action { - position: relative; - text-align: center; - opacity: 0; - transition: opacity 0.15s; - } - - &--ellipsis { - max-width: 3.6rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - &__row:hover &__td--action { + // hover嵌套选择器 + &__card:hover &__card-more-btn { opacity: 1; } - - // 简历名称单元格 - &__name-cell { - display: flex; - align-items: center; - gap: 0.06rem; + &__card:hover &__card-edit-time { + opacity: 1; + height: 0.16rem; + margin-top: 0.04rem; + } + // hover时info向上扩展（absolute定位，卡片总高度不变） + &__card:hover &__card-info { + height: 0.86rem; } - &__avatar { - width: 0.3rem; - height: 0.3rem; + // 卡片预览图区域 + &__card-preview { + width: 100%; + height: 100%; + border-radius: 0.12rem; + background: $bg-white; + overflow: hidden; + position: relative; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0.12rem; + } + } + + // 默认标记（左上角） + &__card-default-tag { + position: absolute; + top: 0; + left: 0; + background: $accent; + color: #fff; + font-size: 0.12rem; + font-weight: 520; + padding: 0.02rem 0.08rem; + border-radius: 0.12rem 0 0.12rem 0; + z-index: 2; + line-height: 0.16rem; + } + + // 更多按钮（右上角圆形） + &__card-more-btn { + position: absolute; + top: 0.12rem; + right: 0.16rem; + width: 0.32rem; + height: 0.32rem; + background: $bg-white; border-radius: 50%; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; - color: $bg-white; - font-size: 0.13rem; - font-weight: 600; - flex-shrink: 0; + cursor: pointer; + opacity: 0; + transition: opacity 0.3s ease; + z-index: 3; + border: none; + + &:hover { + background: #f5f5f5; + } + + svg { + width: 0.18rem; + height: 0.18rem; + } } - &__name { - font-weight: 500; - max-width: 3.6rem; + // 更多菜单弹出层 + &__card-menu { + position: absolute; + top: 0.44rem; + right: 0.08rem; + width: 1.04rem; + background: $bg-white; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); + border-radius: 0.08rem; + padding: 0.06rem 0; + z-index: 10; + } + + &__card-menu-item { + display: flex; + align-items: center; + padding: 0.06rem 0.08rem; + gap: 0.04rem; + cursor: pointer; + font-size: 0.14rem; + font-weight: 380; + color: $text-middle; + transition: background 0.15s; + white-space: nowrap; + + &:hover { + background: #f9f9f9; + } + + // 设为默认特殊样式 + &--default { + background: #EDF9FA; + border-radius: 0.04rem; + margin: 0 0.06rem; + padding: 0.06rem 0.08rem; + color: $accent; + + &:hover { + background: #ddf3f5; + } + } + + // 删除按钮特殊样式 + &--delete { + svg { + color: $text-middle; + } + } + + svg { + width: 0.16rem; + height: 0.16rem; + flex-shrink: 0; + } + } + + // 卡片底部信息区域（absolute定位在卡片底部，hover时向上扩展，卡片总高度不变） + &__card-info { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: $bg-white; + box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.1); + border-radius: 0 0 0.12rem 0.12rem; + padding: 0.12rem; + height: 0.66rem; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + transition: height 0.3s ease; + z-index: 2; + } + + // 卡片信息头部（名称 + 编辑按钮） + &__card-info-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + // 简历名称 + &__card-name { + font-size: 0.14rem; + font-weight: 450; + color: #000; + max-width: 1.50rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 0.19rem; + } + + // 编辑图标按钮 + &__card-edit-btn { + width: 0.20rem; + height: 0.20rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border: none; + background: none; + padding: 0; + + &:hover { + opacity: 0.7; + } + + svg { + width: 0.14rem; + height: 0.14rem; + } + } + + // 目标岗位 + &__card-target { + font-size: 0.14rem; + font-weight: 330; + color: $text-middle; + line-height: 0.19rem; + margin-top: 0.04rem; + max-width: 1.80rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - &__default-tag { - font-size: 0.09rem; - color: $accent; - background: #EDF9FA; - border-radius: 0.04rem; - padding: 0.014rem 0.08rem; - padding-bottom: 0.02rem; - white-space: nowrap; - } - - // 编辑名称岗位图标按钮 - &__edit-btn { - background: none; - border: none; - color: $text-dark; - cursor: pointer; - padding: 0.02rem; - display: flex; - align-items: center; - justify-content: center; - transition: opacity 0.2s; - - &:hover { - opacity: 0.6; - } - } - - &__edit-icon { - font-size: 0.13rem; - } - - // 操作按钮容器 - &__actions { - display: flex; - align-items: center; - gap: 0.16rem; - justify-content: flex-end; - flex-wrap: wrap; - } - - // 行内操作按钮 - &__action-btn { - background: none; - border: none; + // 最后编辑时间（hover 时显示） + &__card-edit-time { font-size: 0.12rem; - color: $text-middle; - cursor: pointer; - padding: 0.04rem 0.08rem; - border-radius: 0.04rem; - white-space: nowrap; - transition: all 0.15s; - display: flex; - align-items: center; - - &:hover { - color: $text-dark; - } - - // 删除按钮红色 - &--delete { - color: #FD6464; - - &:hover { - color: #e04545; - } - } + font-weight: 330; + color: $text-light; + line-height: 0.16rem; + opacity: 0; + height: 0; + margin-top: 0; + overflow: hidden; + transition: opacity 0.3s ease, height 0.3s ease, margin-top 0.3s ease; } - // 更多按钮（已移除，保留兼容） - &__more-btn { - background: none; - border: none; - color: $text-light; - cursor: pointer; - padding: 0.04rem; - border-radius: 0.04rem; + // ==================== 新建卡片 ==================== + &__card-new { + width: 2.10rem; + height: 2.97rem; + border-radius: 0.12rem; + background: $bg-white; display: flex; align-items: center; justify-content: center; - transition: all 0.2s; + cursor: pointer; + transition: transform 0.3s ease, box-shadow 0.3s ease; + gap: 0.08rem; &:hover { - color: $text-dark; - background: $bg-main; + transform: translateY(-0.08rem); + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06); } - } - &__more-svg { - width: 0.16rem; - height: 0.16rem; + svg { + width: 0.32rem; + height: 0.32rem; + } + + span { + font-size: 0.18rem; + font-weight: 520; + color: $accent; + line-height: 0.24rem; + } } // 空状态提示 @@ -278,6 +311,18 @@ color: $text-light; font-size: 0.14rem; } + + // 加载中 + &__loading-box { + width: 100%; + padding: 0.2rem 0; + display: flex; + align-items: center; + justify-content: center; + gap: 0.08rem; + color: $text-light; + font-size: 0.12rem; + } } // ==================== 上传简历加载提示 ==================== diff --git a/src/components/HomeAbout.vue b/src/components/HomeAbout.vue new file mode 100644 index 0000000..b4543e6 --- /dev/null +++ b/src/components/HomeAbout.vue @@ -0,0 +1,250 @@ + + + diff --git a/src/components/HomeAnnouncement.vue b/src/components/HomeAnnouncement.vue new file mode 100644 index 0000000..bb998a5 --- /dev/null +++ b/src/components/HomeAnnouncement.vue @@ -0,0 +1,367 @@ + + + diff --git a/src/components/HomeContent.vue b/src/components/HomeContent.vue new file mode 100644 index 0000000..6950094 --- /dev/null +++ b/src/components/HomeContent.vue @@ -0,0 +1,503 @@ + + + diff --git a/src/components/HomeJobRadar.vue b/src/components/HomeJobRadar.vue new file mode 100644 index 0000000..f6f592c --- /dev/null +++ b/src/components/HomeJobRadar.vue @@ -0,0 +1,243 @@ + + + diff --git a/src/components/HomeMentor.vue b/src/components/HomeMentor.vue new file mode 100644 index 0000000..addafae --- /dev/null +++ b/src/components/HomeMentor.vue @@ -0,0 +1,324 @@ + + + diff --git a/src/components/SideNav.vue b/src/components/SideNav.vue index 07eca2d..bd74690 100644 --- a/src/components/SideNav.vue +++ b/src/components/SideNav.vue @@ -409,11 +409,11 @@ const mainMenus = computed(() => { const showShareDialog = ref(false) /** 是否为窄版导航（窗口宽度 < 1440px） */ -const isNarrow = ref(window.innerWidth < 1440) +const isNarrow = ref(window.innerWidth < 6440) /** 监听窗口宽度变化，动态切换窄版/宽版 */ function handleNavResize() { - isNarrow.value = window.innerWidth < 1440 + isNarrow.value = window.innerWidth < 6440 } const showMessageDialog = ref(false) const showFeedbackDialog = ref(false) diff --git a/src/plugins/remAdapt.ts b/src/plugins/remAdapt.ts index cd171d7..a3b4887 100644 --- a/src/plugins/remAdapt.ts +++ b/src/plugins/remAdapt.ts @@ -97,7 +97,7 @@ const remAdaptPlugin: Plugin = { docEl.style.setProperty('--app-height', '100vh') docEl.style.setProperty('--chat-width', '3.6rem') // 根据窗口宽度设置导航栏宽度CSS变量 - const navWidth = window.innerWidth < 1440 ? '0.8rem' : '2.2rem' + const navWidth = window.innerWidth < 6440 ? '0.8rem' : '2.2rem' docEl.style.setProperty('--nav-width', navWidth) } } diff --git a/src/views/Announcement.vue b/src/views/Announcement.vue index e4d1ae6..f317b0a 100644 --- a/src/views/Announcement.vue +++ b/src/views/Announcement.vue @@ -349,7 +349,7 @@ import JobStatsOverview from '@/components/JobStatsOverview.vue' import IndustrySelector from '@/components/tools/IndustrySelector.vue' import JobCategorySelector from '@/components/tools/JobCategorySelector.vue' import RegionSelector from '@/components/tools/RegionSelector.vue' -import { fetchAnnouncementList } from '@/api/announcement' +import { fetchAnnouncementList, fetchAnnouncementLastUpdateTime, fetchAnnouncementStatistics, fetchAnnouncementRecruitYearTags, fetchAnnouncementEducationOptions, fetchAnnouncementBatchOptions } from '@/api/announcement' import type { AnnouncementListParams, AnnouncementItem } from '@/api/announcement' import { fetchHotIndustries, fetchHotCategories, fetchHotCities } from '@/api/jobs' import type { HotIndustryItem, HotCategoryItem, HotCityItem } from '@/api/jobs' @@ -378,20 +378,41 @@ let filtersPanelObserver: ResizeObserver | null = null // ==================== 统计卡片数据 ==================== -/** 当前日期（MM.DD 格式） */ -const statsCurrentDate = computed(() => { - const now = new Date() - return `${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}` -}) +/** 最新更新时间（MM.DD 格式，从后端获取） */ +const statsCurrentDate = ref('--') /** 今日新增公告数 */ -const statsTodayCount = ref('128') +const statsTodayCount = ref('--') -/** 招聘中企业数 */ -const statsTotalCompany = ref('326') +/** 招聘中企业数（累计公告数） */ +const statsTotalCompany = ref('--') -/** 近7日截止数 */ -const statsDeadline7days = ref('42') +/** 近7日截止数（本月新增） */ +const statsDeadline7days = ref('--') + +/** 加载统计卡片数据 */ +async function loadStatsData() { + try { + // 并发请求最新更新时间和统计数据 + const [timeRes, statsRes] = await Promise.all([ + fetchAnnouncementLastUpdateTime(), + fetchAnnouncementStatistics(), + ]) + // 解析最新更新时间（毫秒时间戳转 MM.DD） + if (timeRes.code === '0' && timeRes.data) { + const date = new Date(Number(timeRes.data)) + statsCurrentDate.value = `${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}` + } + // 解析统计数据 + if (statsRes.code === '0' && statsRes.data) { + statsTodayCount.value = statsRes.data.dayCount ?? 0 + statsTotalCompany.value = statsRes.data.totalCount ?? 0 + statsDeadline7days.value = statsRes.data.monthCount ?? 0 + } + } catch (e) { + console.error('加载统计数据失败', e) + } +} // ==================== 热门分类数据 ==================== @@ -467,25 +488,56 @@ const showBatchDropdown = ref(false) // ==================== 筛选选项常量 ==================== -/** 毕业年份选项 */ -const recruitYearOptions = computed(() => { - const currentYear = new Date().getFullYear() - return [ - { label: '全部', value: 0 }, - { label: `${currentYear}届`, value: currentYear }, - { label: `${currentYear + 1}届`, value: currentYear + 1 }, - { label: `${currentYear + 2}届`, value: currentYear + 2 }, - ] -}) +/** 毕业年份选项（从后端接口获取） */ +const recruitYearOptions = ref<{ label: string; value: number }[]>([{ label: '全部', value: 0 }]) -/** 学历要求选项 */ -const educationOptions = ['不限', '大专及以上', '本科及以上', '硕士及以上', '博士及以上'] +/** 加载毕业年份标签 */ +async function loadRecruitYearTags() { + try { + const res = await fetchAnnouncementRecruitYearTags() + if (res.code === '0' && res.data) { + recruitYearOptions.value = [ + { label: '全部', value: 0 }, + ...res.data.map((year: number) => ({ label: `${year}届`, value: year })), + ] + } + } catch (e) { + console.error('加载毕业年份标签失败', e) + } +} + +/** 学历要求选项（从后端接口获取） */ +const educationOptions = ref(['不限']) + +/** 加载学历筛选选项 */ +async function loadEducationOptions() { + try { + const res = await fetchAnnouncementEducationOptions() + if (res.code === '0' && res.data) { + educationOptions.value = ['不限', ...res.data] + } + } catch (e) { + console.error('加载学历选项失败', e) + } +} /** 公司类型选项 */ const companyTypeOptions = ['全部', '央企', '国企', '上市企业', '外资企业', '民营企业', '事业单位'] -/** 招聘批次选项 */ -const batchOptions = ['全部', '秋招正式批', '秋招提前批', '春招正式批', '春招补录', '暑期实习'] +/** 招聘批次选项（从后端接口获取） */ +const batchOptions = ref(['全部']) + +/** 加载招聘批次选项 */ +async function loadBatchOptions() { + try { + const res = await fetchAnnouncementBatchOptions() + if (res.code === '0' && res.data) { + batchOptions.value = ['全部', ...res.data] + } + } catch (e) { + console.error('加载招聘批次选项失败', e) + } +} /** 热门搜索标签 */ const hotSearchTags = ref(['系统集成', 'AI产品经理', '广告投放', 'AI开发', '大模型']) @@ -806,7 +858,7 @@ const selectorDisplayStyle: Record = { const pageNum = ref(1) /** 每页条数 */ -const pageSize = ref(10) +const pageSize = ref(15) /** 总记录数 */ const total = ref(0) @@ -867,6 +919,8 @@ async function loadList() { console.error('加载校招公告列表失败', e) } finally { loading.value = false + // 首次加载后检查是否需要自动填满容器 + nextTick(() => { autoFillIfNeeded() }) } } @@ -892,6 +946,18 @@ async function loadNextPage() { console.error('加载下一页失败', e) } finally { loadingMore.value = false + // 加载下一页后继续检查是否需要填满容器 + nextTick(() => { autoFillIfNeeded() }) + } +} + +/** 自动填满容器：当列表内容不足以产生滚动条且还有更多数据时，自动加载下一页 */ +function autoFillIfNeeded() { + const el = listRef.value + if (!el) return + // 如果容器没有滚动条（内容高度不超过可视高度）且还有更多数据未加载 + if (el.scrollHeight <= el.clientHeight && !noMore.value && !loadingMore.value && !loading.value) { + loadNextPage() } } @@ -969,6 +1035,18 @@ onMounted(() => { // 加载热门分类 loadHotFilters() + // 加载统计卡片数据（从后端接口获取） + loadStatsData() + + // 加载毕业年份标签 + loadRecruitYearTags() + + // 加载学历筛选选项 + loadEducationOptions() + + // 加载招聘批次选项 + loadBatchOptions() + // 监听筛选面板高度变化 nextTick(() => { if (filtersPanelRef.value) { diff --git a/src/views/AnnouncementDetail.vue b/src/views/AnnouncementDetail.vue index 9ea3c81..191ee92 100644 --- a/src/views/AnnouncementDetail.vue +++ b/src/views/AnnouncementDetail.vue @@ -57,8 +57,8 @@
{{ detail.companyType }} - {{ detail.industryNames.join('/') }} - {{ companyScaleText }} + {{ detail.categoryNames.join('/') }} + {{ detail.companyScale}}
@@ -159,10 +159,10 @@

{{ detail.writtenExam }}

-
+
@@ -190,6 +190,8 @@ v-for="(job, idx) in otherJobs" :key="'other-' + idx" class="announcement-detail__job-item" + style="cursor: pointer;" + @click="router.push('/jobs/' + job.id)" >
{{ job.title }} @@ -231,6 +233,8 @@ v-for="(rec, idx) in recommendList" :key="'rec-' + idx" class="announcement-detail__rec-item" + style="cursor: pointer;" + @click="router.push('/announcement/' + rec.id)" > diff --git a/src/views/Home.vue b/src/views/Home.vue index f7f2b23..6b5999e 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,450 +1,50 @@