Skip to content

P
project-www-pc
提交 2d82a083 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 新增优雇

上级 9bc13210
隐藏空白字符变更
内嵌 并排
正在显示 包含 2474 行增加 和 1 行删除
app/components/YouguEndLanding.vue 0 → 100644
浏览文件 @ 2d82a083
<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
/**
* 优雇 Agent 三端二级页（学校端 / 学生端 / 企业端）共用版式。
* 三个页面结构一致、仅文案与条目数不同，因此用同一组件承载，数据由各页面传入。
*/
const props = defineProps({
page: { type: Object, required: true },
})
// 与源站一致的入场延迟节奏：首项无延迟，其后 d1 ~ d4
const delay = (index) => (index ? `d${Math.min(index, 4)}` : '')
const rootEl = ref(null)
let observer = null
function scrollToSection(id) {
rootEl.value?.querySelector(`#${id}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
onMounted(() => {
const el = rootEl.value
if (!el) return
const targets = el.querySelectorAll('.reveal')
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (reduceMotion || !('IntersectionObserver' in window)) {
targets.forEach((item) => item.classList.add('visible'))
return
}
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return
entry.target.classList.add('visible')
observer.unobserve(entry.target)
})
},
{ threshold: 0.14 },
)
targets.forEach((item) => observer.observe(item))
})
onBeforeUnmount(() => {
observer?.disconnect()
observer = null
})
</script>
<template>
<main ref="rootEl" class="yougu-end">
<!-- ================= Hero / Banner ================= -->
<header class="hero">
<h1 class="sr-only">{{ page.h1 }}</h1>
<div class="banner-wrap">
<img
class="banner-img"
:src="page.banner"
:alt="page.bannerAlt"
width="1920"
height="615"
fetchpriority="high" />
</div>
<div class="hero-actions">
<div class="container hero-actions-inner">
<div class="hero-tags">
<span v-for="(tag, i) in page.tags" :key="i">
<b v-if="tag.strong">{{ tag.strong }}</b>{{ tag.text }}
</span>
</div>
<div class="hero-btns">
<a href="#cta" class="btn btn-primary" @click.prevent="scrollToSection('cta')">详情咨询</a>
<a href="#positioning" class="btn btn-outline" @click.prevent="scrollToSection('positioning')">了解详情</a>
</div>
</div>
</div>
</header>
<!-- ================= 平台定位 ================= -->
<section id="positioning" class="section intro">
<div class="container">
<div class="kicker reveal">Positioning</div>
<h2 class="h2 reveal d1">平台定位</h2>
<!-- 正文为静态文案，含 <b> 强调标记 -->
<p
v-for="(para, i) in page.leads"
:key="`lead-${i}`"
class="lead reveal"
:class="`d${i + 2}`"
v-html="para" />
<div class="pos-float reveal d3">
<p v-for="(para, i) in page.float" :key="`float-${i}`" v-html="para" />
</div>
</div>
</section>
<!-- ================= 核心功能 ================= -->
<section id="features" class="section features">
<div class="container">
<div class="kicker reveal">Core Capabilities</div>
<h2 class="h2 reveal d1">核心功能</h2>
<div class="route">
<div v-for="(item, i) in page.features" :key="item.title" class="route-item reveal" :class="delay(i)">
<div class="route-node" aria-hidden="true">{{ String(i + 1).padStart(2, '0') }}</div>
<article class="route-card">
<div class="route-head">
<h3>{{ item.title }}</h3>
<p class="feat-sub">{{ item.sub }}</p>
</div>
<p>{{ item.desc }}</p>
</article>
</div>
</div>
</div>
</section>
<!-- ================= 平台价值 ================= -->
<section id="value" class="section value">
<div class="container">
<div class="kicker reveal">Value</div>
<h2 class="h2 reveal d1">平台价值</h2>
<div class="value-grid">
<article
v-for="(item, i) in page.values"
:key="item.title"
class="value-col reveal"
:class="delay(i)">
<div class="vico" aria-hidden="true">
<svg viewBox="0 0 24 24" v-html="item.icon" />
</div>
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</article>
</div>
</div>
</section>
<!-- ================= CTA ================= -->
<section id="cta" class="cta">
<div class="container">
<h2>欢迎咨询<em>{{ page.productName }}</em></h2>
<p class="sub">{{ page.ctaSub }}</p>
<div class="qr-block reveal">
<div class="qr-card">
<span class="qr-corner tl"></span><span class="qr-corner tr"></span>
<span class="qr-corner bl"></span><span class="qr-corner br"></span>
<img src="/images/yougu/qr.webp" :alt="`${page.productName}详情咨询微信二维码`" width="230" height="230" loading="lazy" />
<div class="qr-caption">微信扫码 · 详情咨询<span>添加顾问，获取平台详情与咨询服务</span></div>
</div>
<p class="apply-note">{{ page.applyNote }}</p>
</div>
</div>
</section>
</main>
</template>
<style lang="scss" scoped>
/* ============ Design Tokens ============ */
.yougu-end {
--red: #ab0a3d;
--red-deep: #7e0730;
--gold: #c97d31;
--ink: #17110f;
--ink-2: #3d322e;
--ink-3: #8a7c76;
--paper: #faf7f5;
--card: #ffffff;
--line: #ede4df;
--shadow-hover: 0 28px 64px rgba(42, 13, 22, 0.14);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
color: var(--ink);
background: var(--paper);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
img {
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ============ Hero / Banner ============ */
.hero {
position: relative;
background: #fff;
}
.banner-wrap {
max-width: 1920px;
margin: 0 auto;
line-height: 0;
overflow: hidden;
}
.banner-img {
display: block;
width: 100%;
height: auto;
}
.hero-actions {
background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
border-bottom: 1px solid var(--line);
}
.hero-actions-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px 26px;
flex-wrap: wrap;
padding: 22px 24px;
}
.hero-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
span {
font-size: 13px;
font-weight: 700;
color: var(--ink-2);
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 15px;
box-shadow: 0 2px 8px rgba(42, 13, 22, 0.03);
b {
color: var(--red);
}
}
}
.hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 9px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition:
transform 0.25s var(--ease),
box-shadow 0.25s;
}
.btn-primary {
padding: 15px 32px;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
box-shadow:
0 10px 30px rgba(171, 10, 61, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
&::after {
content: '→';
font-size: 16px;
transition: transform 0.25s var(--ease);
}
&:hover {
color: #fff;
transform: translateY(-3px);
box-shadow:
0 16px 40px rgba(171, 10, 61, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
&::after {
transform: translateX(3px);
}
}
}
.btn-outline {
padding: 15px 32px;
border-radius: 12px;
color: var(--red);
background: #fff;
border: 1px solid rgba(171, 10, 61, 0.3);
font-weight: 700;
&:hover {
color: var(--red);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(171, 10, 61, 0.14);
border-color: rgba(171, 10, 61, 0.5);
}
}
@media (max-width: 640px) {
.hero-actions-inner {
justify-content: center;
text-align: center;
}
}
/* ============ Sections common ============ */
.section {
padding: 96px 0;
position: relative;
overflow: hidden;
> .container {
position: relative;
z-index: 1;
}
}
.kicker {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: center;
gap: 12px;
&::before {
content: '';
width: 26px;
height: 1px;
background: var(--gold);
}
}
.h2 {
margin-top: 16px;
font-size: clamp(26px, 3.6vw, 40px);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
}
.lead {
margin-top: 16px;
max-width: 1080px;
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.85;
b {
color: var(--ink);
}
}
/* ============ Intro（平台定位） ============ */
.intro {
padding: 88px 0 92px;
background:
radial-gradient(980px 480px at 8% -5%, rgba(171, 10, 61, 0.065), transparent 62%),
radial-gradient(780px 430px at 105% 42%, rgba(201, 125, 49, 0.055), transparent 58%), var(--paper);
.lead {
margin-top: 18px;
}
}
/* 通栏红块 */
.pos-float {
position: relative;
z-index: 2;
width: 100%;
margin-top: 26px;
background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
border-radius: 16px;
padding: 36px 44px;
box-shadow: 0 24px 52px rgba(126, 7, 48, 0.28);
&::before {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
background: radial-gradient(520px 220px at 90% -25%, rgba(255, 255, 255, 0.15), transparent 62%);
pointer-events: none;
}
p {
position: relative;
font-size: 16.5px;
line-height: 1.95;
color: rgba(255, 255, 255, 0.95);
margin: 0;
b {
color: #f5d9a8;
}
}
p + p {
margin-top: 14px;
}
}
@media (max-width: 900px) {
.pos-float {
padding: 26px 22px;
border-radius: 13px;
margin-top: 20px;
p {
font-size: 14px;
line-height: 1.9;
}
}
}
/* ============ Features（核心功能） ============ */
.features {
background:
radial-gradient(920px 480px at 100% -5%, rgba(171, 10, 61, 0.06), transparent 60%),
radial-gradient(760px 420px at -4% 55%, rgba(128, 128, 128, 0.05), transparent 55%), var(--card);
}
.route {
margin-top: 44px;
position: relative;
}
.route-item {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 26px;
align-items: start;
padding-bottom: 18px;
&:last-child {
padding-bottom: 0;
}
&::before {
content: '';
position: absolute;
left: 27px;
top: 28px;
bottom: -28px;
width: 2px;
background: linear-gradient(180deg, rgba(171, 10, 61, 0.42), rgba(201, 125, 49, 0.42));
border-radius: 2px;
}
&:last-child::before {
display: none;
}
}
.route-node {
position: relative;
z-index: 1;
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 17px;
font-weight: 900;
color: #fff;
background: linear-gradient(140deg, var(--red), var(--red-deep));
box-shadow: 0 12px 26px rgba(171, 10, 61, 0.28);
font-variant-numeric: tabular-nums;
}
.route-item:last-child .route-node {
background: linear-gradient(140deg, var(--gold), #b96a22);
box-shadow: 0 12px 26px rgba(201, 125, 49, 0.3);
}
.route-card {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px 30px;
display: grid;
grid-template-columns: minmax(0, 266px) minmax(0, 1fr);
gap: 10px 34px;
align-items: center;
transition:
transform 0.3s var(--ease),
box-shadow 0.3s var(--ease),
border-color 0.3s;
&::before {
content: '';
position: absolute;
left: -26px;
top: 27px;
width: 26px;
height: 2px;
background: rgba(171, 10, 61, 0.34);
}
&:hover {
transform: translateX(4px);
box-shadow: var(--shadow-hover);
border-color: rgba(171, 10, 61, 0.16);
}
> p {
font-size: 14px;
color: var(--ink-2);
line-height: 1.85;
}
}
.route-head {
.feat-sub {
margin-top: 7px;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.005em;
color: var(--red);
line-height: 1.5;
}
h3 {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.35;
}
}
@media (max-width: 820px) {
.route {
margin-top: 34px;
}
.route-item {
grid-template-columns: 44px minmax(0, 1fr);
gap: 16px;
&::before {
left: 21px;
top: 22px;
bottom: -22px;
}
}
.route-node {
width: 44px;
height: 44px;
font-size: 15px;
}
.route-card {
grid-template-columns: 1fr;
gap: 0;
padding: 20px 20px 22px;
&::before {
display: none;
}
> p {
margin-top: 10px;
}
}
.route-head h3 {
font-size: 17.5px;
}
}
/* ============ Value（平台价值） ============ */
.value {
background: radial-gradient(900px 460px at 50% -10%, rgba(171, 10, 61, 0.05), transparent 60%), var(--paper);
}
.value-grid {
display: grid;
gap: 22px;
margin-top: 46px;
grid-template-columns: 1fr;
@media (min-width: 820px) {
grid-template-columns: repeat(2, 1fr);
}
}
.value-col {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 30px 28px;
position: relative;
overflow: hidden;
transition:
transform 0.32s var(--ease),
box-shadow 0.32s var(--ease),
border-color 0.3s;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--red), var(--gold));
}
&:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
border-color: rgba(171, 10, 61, 0.16);
}
.vico {
width: 46px;
height: 46px;
border-radius: 13px;
display: grid;
place-items: center;
margin-bottom: 16px;
color: var(--red);
background: linear-gradient(135deg, rgba(171, 10, 61, 0.1), rgba(201, 125, 49, 0.13));
svg {
display: block;
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
}
h3 {
margin-top: 10px;
font-size: 19px;
font-weight: 800;
color: var(--ink);
}
p {
margin-top: 14px;
font-size: 14px;
color: var(--ink-2);
line-height: 1.85;
}
}
/* ============ CTA（详情咨询） ============ */
.cta {
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
padding: 96px 0 88px;
background: radial-gradient(120% 120% at 50% 0%, #c22650 0%, #ab0a3d 50%, #7e0730 100%);
&::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
pointer-events: none;
}
.container {
position: relative;
z-index: 1;
}
h2 {
font-size: clamp(30px, 4.6vw, 48px);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
em {
font-style: normal;
color: #f0cf9a;
}
}
.sub {
margin: 18px auto 0;
color: rgba(255, 255, 255, 0.82);
font-size: 15.5px;
max-width: 680px;
line-height: 1.7;
}
}
.qr-block {
margin: 44px auto 0;
max-width: 460px;
}
.qr-card {
position: relative;
display: inline-block;
padding: 20px 20px 16px;
border-radius: 22px;
background: #fff;
box-shadow:
0 24px 60px rgba(60, 4, 22, 0.34),
0 2px 0 rgba(255, 255, 255, 0.5) inset;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 22px 22px 0 0;
background: linear-gradient(90deg, var(--red), var(--gold));
}
img {
display: block;
width: 230px;
height: 230px;
border-radius: 12px;
image-rendering: -webkit-optimize-contrast;
}
}
.qr-caption {
margin-top: 14px;
font-size: 14px;
font-weight: 800;
color: var(--ink);
letter-spacing: 0.01em;
span {
display: block;
margin-top: 4px;
font-size: 12px;
font-weight: 500;
color: #9a8f92;
letter-spacing: 0.02em;
}
}
.qr-corner {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid rgba(201, 125, 49, 0.55);
border-radius: 3px;
&.tl {
top: 9px;
left: 9px;
border-right: 0;
border-bottom: 0;
}
&.tr {
top: 9px;
right: 9px;
border-left: 0;
border-bottom: 0;
}
&.bl {
bottom: 9px;
left: 9px;
border-right: 0;
border-top: 0;
}
&.br {
bottom: 9px;
right: 9px;
border-left: 0;
border-top: 0;
}
}
@media (max-width: 420px) {
.qr-card img {
width: 200px;
height: 200px;
}
}
.apply-note {
margin-top: 20px;
font-size: 13px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.8;
}
/* ============ Reveal ============ */
.reveal {
opacity: 0;
transform: translateY(26px);
transition:
opacity 0.8s var(--ease),
transform 0.8s var(--ease);
&.visible {
opacity: 1;
transform: translateY(0);
}
}
.d1 {
transition-delay: 0.06s;
}
.d2 {
transition-delay: 0.12s;
}
.d3 {
transition-delay: 0.18s;
}
.d4 {
transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.route-card,
.value-col,
.btn {
transition: none;
}
}
}
</style>
app/middleware/device.global.js
浏览文件 @ 2d82a083
......@@ -13,7 +13,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
if (process.server) {
// 服务端使用 301 重定向
return navigateTo(redirectUrl, { redirectCode: 301, external: true })
return navigateTo(redirectUrl, { redirectCode: 302, external: true })
} else {
// 客户端使用 window.location
window.location.href = redirectUrl
......
app/pages/yougu/enterprise.vue 0 → 100644
浏览文件 @ 2d82a083
<script setup>
// 企业端 · 人才桥
const page = {
productName: '紫荆优雇Agent·人才桥',
h1: '企业端 · 紫荆优雇Agent·人才桥 — AI校企人才匹配与用人反馈平台正式发布',
banner: '/images/yougu/enterprise-banner.webp',
bannerAlt: '企业端 紫荆优雇Agent·人才桥：AI校企人才匹配与用人反馈平台，连接校园人才、赋能企业未来',
tags: [{ strong: '企业端', text: ' · 人才桥' }, { text: '连接校园人才 · 赋能企业未来' }],
leads: [
'进入“十五五”时期，高等教育人才培养与产业发展的协同关系愈发受到重视。2026年6月印发的《教育发展“十五五”规划》提出优化人才培养布局、服务现代化产业体系建设，并将推进教育数智化变革列为综合改革重要任务。2026年4月，教育部等五部门发布《“人工智能+教育”行动计划》，明确要根据产业结构智能升级优化调整学科专业设置，提升专业设置对产业发展的适配性。人才供需两端如何实现精准对接，已成为产业界与教育界共同面对的核心课题。',
'对于企业而言，招人长期依赖简历筛选，难以判断学生的真实能力；对于学校而言，学生为什么被录用、差距在哪里，缺少来自用人端的反馈。校企之间需要一条把用人标准、能力证据与录用结果连接起来的通道。基于此，<b>紫荆优雇Agent·人才桥</b>——AI 校企人才匹配与用人反馈平台正式推出。',
],
float: [
'<b>紫荆优雇Agent·人才桥</b>面向用人企业，围绕岗位需求解析、人才能力匹配、实战任务验证和招聘过程管理，帮助企业更精准地识别、筛选和验证高校人才，推动招聘从“看简历”走向“看能力、验能力、精准识人”。',
'同时，平台将企业在岗位发布、人才筛选、面试评价和录用过程中沉淀的真实用人数据反馈学校，为专业建设、课程优化和学生能力培养提供市场依据，形成企业用人结果反哺人才培养的闭环。',
],
features: [
{
title: '定标准',
sub: 'AI把业务需求转化为岗位能力标准',
desc: '通过AI与企业HR、业务负责人交互，解析岗位职责、业务场景和人才要求，将传统JD进一步转化为结构化的岗位能力要求、业务任务和评价标准，帮助企业更准确地定义“这个岗位到底需要什么样的人”。',
},
{
title: '找人才',
sub: 'AI按岗位能力精准匹配候选人',
desc: '将岗位能力标准与学生的课程、项目、实训、证书和能力记录进行智能匹配，形成候选人才画像和匹配结果，帮助企业从大量简历中更快识别与岗位要求高度适配的人才。',
},
{
title: '验能力',
sub: '用实战任务验证岗位胜任力',
desc: '围绕具体岗位设置微型业务任务或实战考核，通过学生完成任务的过程和结果，进一步验证专业能力、问题解决能力、工具应用能力和岗位胜任力，让企业从“简历上说会”进一步判断“实际能不能做”。',
},
{
title: '做决策',
sub: '沉淀招聘评价与用人反馈',
desc: '将人才筛选、实战评价、面试反馈、录用结果等招聘过程数据持续沉淀，帮助企业形成更加完整的人才判断依据；同时将企业真实岗位标准、能力评价和录用反馈结构化回流学校，为人才培养改进提供真实用人数据。',
},
],
values: [
{
icon: '<path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>',
title: '企业岗位标准更清晰',
desc: '把业务部门实际用人要求转化为结构化岗位能力标准，减少HR与业务部门之间的信息偏差，让招聘从一开始就更准确。',
},
{
icon: '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
title: '人才识别更精准',
desc: '不再主要依赖学历、关键词和简历描述，而是结合学生真实项目、实训和能力记录进行匹配，帮助企业更快识别真正适合岗位的人才。',
},
{
icon: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/>',
title: '人才能力可验证',
desc: '通过岗位实战任务和过程评价进一步验证候选人的真实能力，为筛选、面试和录用提供更充分依据，提升人才选择质量。',
},
{
icon: '<path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"/><path d="M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>',
title: '培养改进更精准',
desc: '企业在岗位定义、人才筛选、能力验证和录用过程中沉淀的真实用人数据持续反馈学校，帮助学校更准确识别学生能力短板和培养差距，为专业建设、课程优化和实践教学改进提供依据。',
},
],
ctaSub: '留下您的姓名＋联系方式，我们会在第一时间联系您，为您解答紫荆优雇Agent·人才桥平台相关问题。',
applyNote: '长按识别或使用微信扫一扫，我们的顾问将为您介绍紫荆优雇Agent·人才桥平台，并提供详情咨询。',
}
useHead({
title: '企业端 · 紫荆优雇Agent·人才桥 — AI校企人才匹配与用人反馈平台',
meta: [
{
hid: 'description',
name: 'description',
content:
'紫荆优雇Agent·人才桥AI校企人才匹配与用人反馈平台：岗位需求解析、人才能力匹配、实战任务验证、用人结果反馈，推动校企人才对接从“简历匹配”走向“能力匹配”。',
},
],
})
</script>
<template>
<YouguEndLanding :page="page" />
</template>
app/pages/yougu/index.vue 0 → 100644
浏览文件 @ 2d82a083
<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
useHead({
title: '紫荆·优雇 Agent ｜ AI 一体化人才供需协同平台',
meta: [
{
hid: 'keywords',
name: 'keywords',
content: '紫荆优雇,优雇Agent,产教融合,专业建设,人才培养,就业服务,AI人才匹配,校企合作',
},
{
hid: 'description',
name: 'description',
content:
'紫荆·优雇 Agent 是 AI 一体化人才供需协同平台，以统一的岗位与能力标准为数据底座，连接产业、学校、学生与企业，贯通产业需求洞察、专业建设决策、学生能力培养、企业人才匹配与就业反馈全过程。',
},
],
})
// 三端分述卡片。icon 为静态装饰性 SVG 内容，仅作展示。
const ends = [
{
tag: '学校端',
product: '产教图谱',
sub: '高校专业建设与人才培养AI决策智能体',
desc: '专业动态适配产业，以产业需求为导向的专业与课程调整。',
to: '/yougu/school',
icon: '<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"/><path d="M22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/>',
feats: [
{ name: '看清产业', note: '｜洞察产业与岗位需求' },
{ name: '对准专业', note: '｜研判专业与市场匹配' },
{ name: '找准差距', note: '｜定位岗位能力与课程缺口' },
{ name: '推动改进', note: '｜形成专业持续诊改闭环' },
],
},
{
tag: '学生端',
product: '北斗星',
sub: '生涯发展与就业能力提升 AI 平台',
desc: '就业能力提前养成，让生涯教育贯穿人才培养全过程。',
to: '/yougu/student',
icon: '<circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>',
feats: [
{ name: '生涯前移', note: '｜从“毕业季”走向“大学四年”' },
{ name: '能力形成', note: '｜从“知道缺什么”到“真正练出来”' },
{ name: '成长有据', note: '｜从“学过什么”到“练成什么”' },
{ name: 'AI陪伴', note: '｜让个性化指导覆盖更多学生' },
],
},
{
tag: '企业端',
product: '人才桥',
sub: 'AI 校企人才匹配与用人反馈平台',
desc: '从看简历到看能力，基于真实能力与项目成果精准匹配。',
to: '/yougu/enterprise',
icon: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
feats: [
{ name: '定标准', note: '｜AI把业务需求转化为岗位能力标准' },
{ name: '找人才', note: '｜AI按岗位能力精准匹配候选人' },
{ name: '验能力', note: '｜用实战任务验证岗位胜任力' },
{ name: '做决策', note: '｜沉淀招聘评价与用人反馈' },
],
},
]
// 核心功能：看清产业 → 对准专业 → 教出能力 → 接住用人 → 反馈改进
const capabilities = [
{
title: '看清产业',
sub: 'AI持续洞察产业与人才需求变化',
desc: '基于产业、岗位和企业用人数据，持续分析产业发展趋势、岗位需求变化和核心能力要求，将外部市场变化转化为学校可理解、可使用的人才需求信号，帮助学校及时判断产业往哪里发展、岗位需要什么能力、未来需要培养什么样的人才。',
},
{
title: '对准专业',
sub: 'AI支撑专业、课程与资源精准调整',
desc: '将产业岗位能力要求与学校专业、课程、实训、证书等培养要素进行智能匹配，识别专业适配度、课程覆盖度和能力缺口，为专业动态调整、培养方案优化、课程改革及师资实训资源配置提供数据依据。',
},
{
title: '教出能力',
sub: 'AI职业发展教练陪伴学生全过程成长',
desc: '围绕每名学生的专业背景、个人特点、目标岗位和能力差距，提供持续的AI职业发展陪伴，覆盖职业探索、能力诊断、项目实践、简历优化、面试训练与求职复盘，帮助学生持续回答三个问题：我适合做什么、我还缺什么、我下一步该练什么。推动学生从“学过什么”进一步走向“真正练成什么、能够证明什么”。',
},
{
title: '接住用人',
sub: 'AI从简历筛选走向真实能力匹配',
desc: '将企业真实岗位要求与学生的项目、实训、能力记录和求职表现进行智能匹配，并通过真实业务任务、岗位实践等方式进一步验证岗位胜任力，帮助企业从“看学历、看简历”进一步走向看能力、验能力、精准识人，提升校企人才匹配质量。',
},
{
title: '反馈改进',
sub: 'AI让就业结果真正反哺人才培养',
desc: '持续分析企业邀约、面试、录用、淘汰及岗位评价等就业反馈，识别学生共性能力短板和专业培养差距，并将结果回流至专业、课程和人才培养体系，推动学校持续优化人才培养。最终形成：产业AI洞察 → 学校AI决策 → 学生AI成长 → 企业AI匹配 → 就业AI反馈，构建贯通“产业—专业—学生—企业—就业”的持续改进闭环。',
},
]
const values = [
{
title: '专业建设有依据',
desc: '把产业变化、岗位需求和能力标准转化为专业建设的数据依据，帮助学校明确为什么调、调什么、先调哪里、调整后效果如何，推动专业建设从经验判断走向数据决策。',
},
{
title: '学生成长有证据',
desc: '围绕学生四年成长持续沉淀职业方向、能力训练、项目实践、求职准备和就业过程，让学校不仅知道学生“学了什么”，更能看到练成了什么、还缺什么、是否具备岗位需要的能力。',
},
{
title: '校企育人有反馈',
desc: '企业通过企业端发布真实岗位、明确用人标准，并结合学生能力记录、实战任务与面试表现开展人才识别与选拔；学校则通过企业端沉淀的岗位需求、能力要求和录用反馈，更准确地了解企业“需要什么人、看重什么能力、学生还差什么”，并将这些用人信息持续反馈至专业建设、课程优化和人才培养。',
},
{
title: '就业过程可治理',
desc: '把原本集中在毕业季的就业工作前移到大学全过程，使学校能够提前看到学生职业方向、能力差距、求职进展和重点帮扶对象，推动就业工作从“毕业时看结果”转向“培养过程中持续干预”。',
},
{
title: '人才培养有闭环',
desc: '把产业、学校、学生与企业真正连接起来，形成“产业需求 → 专业建设 → 学生能力 → 企业用人 → 就业反馈 → 培养改进”的完整闭环，推动学校从关注最终就业结果，进一步走向人才培养全过程的持续优化。',
},
]
const rootEl = ref(null)
let observer = null
// 同页锚点滚动（浮动按钮与 hero 按钮）
function scrollToSection(id) {
const target = rootEl.value?.querySelector(`#${id}`)
target?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
onMounted(() => {
const el = rootEl.value
if (!el) return
const targets = el.querySelectorAll('.reveal')
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (reduceMotion || !('IntersectionObserver' in window)) {
targets.forEach((item) => item.classList.add('visible'))
return
}
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return
entry.target.classList.add('visible')
observer.unobserve(entry.target)
})
},
{ threshold: 0.14 },
)
targets.forEach((item) => observer.observe(item))
})
onBeforeUnmount(() => {
observer?.disconnect()
observer = null
})
</script>
<template>
<main ref="rootEl" class="yougu-page">
<!-- ================= Hero / Banner ================= -->
<header class="hero">
<h1 class="sr-only">紫荆·优雇 Agent — AI 一体化人才供需协同平台</h1>
<div class="banner-wrap">
<img
class="banner-img"
src="/images/yougu/banner.webp"
alt="紫荆·优雇 Agent — AI 一体化人才供需协同平台"
width="1920"
height="807"
fetchpriority="high" />
</div>
<div class="hero-actions">
<div class="container hero-actions-inner">
<div class="hero-tags">
<span><b>学校端</b> · 产教图谱</span>
<span><b>学生端</b> · 北斗星</span>
<span><b>企业端</b> · 人才桥</span>
</div>
<div class="hero-btns">
<a href="#cta" class="btn btn-primary" @click.prevent="scrollToSection('cta')">详情咨询</a>
<a href="#intro" class="btn btn-outline" @click.prevent="scrollToSection('intro')">了解详情</a>
</div>
</div>
</div>
</header>
<!-- ================= 平台定位 + 三端协同链路 ================= -->
<section id="intro" class="section intro">
<div class="container">
<div class="intro-inner">
<div class="kicker reveal">Positioning</div>
<h2 class="h2 reveal d1">平台定位</h2>
<p class="lead reveal d2">
紫荆优雇 Agent 面向高校人才培养与高质量就业，以统一的岗位与能力标准为数据底座，连接产业、学校、学生与企业，通过产业需求洞察、专业建设决策、学生能力培养、企业人才匹配与就业反馈分析，贯通“产业需求—专业建设—学生能力—企业用人—就业反馈—培养改进”全过程，帮助学校把产业需要什么人、学校应该怎么培养、学生实际练成什么、企业最终如何评价连接起来，形成数据驱动、持续优化的人才培养与就业闭环。推动高校人才培养从“相对分段管理”走向“产业需求牵引、学生能力形成、企业用人验证、就业反馈改进”的全过程协同。
</p>
</div>
<!-- 三端协同生态图（设计稿整图） -->
<div class="eco reveal d2">
<img src="/images/yougu/eco.webp" alt="紫荆·优雇 Agent 三端协同生态图" width="1607" height="841" loading="lazy" />
</div>
<!-- 三端分述卡片（点击进入各端二级页） -->
<div class="scene-grid">
<NuxtLink
v-for="item in ends"
:key="item.tag"
class="scene-link"
:to="item.to"
:aria-label="`进入${item.tag}产品页`">
<article class="scene-card reveal">
<header class="scene-head">
<div class="scene-head-top">
<span class="end-tag"><i></i>{{ item.tag }}</span>
<span class="scene-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" v-html="item.icon" />
</span>
</div>
<div class="head-lockup">
<div class="head-title">
<span class="brand">紫荆优雇<em>Agent</em></span>
<span class="tsep">·</span>
<h3>{{ item.product }}</h3>
</div>
<p class="scene-sub">{{ item.sub }}</p>
</div>
</header>
<div class="scene-body">
<p class="scene-desc">{{ item.desc }}</p>
<ul class="feat-list">
<li v-for="feat in item.feats" :key="feat.name">
<b>{{ feat.name }}</b><span class="fx">{{ feat.note }}</span>
</li>
</ul>
<span class="scene-go">进入{{ item.tag }}<i class="arw">→</i></span>
</div>
</article>
</NuxtLink>
</div>
</div>
</section>
<!-- ================= 核心功能 ================= -->
<section id="features" class="section features">
<div class="container">
<div class="kicker reveal">Core Capabilities</div>
<h2 class="h2 reveal d1">核心功能</h2>
<p class="lead reveal d2">
围绕人才培养与就业全过程，形成五个核心环节：看清产业 → 对准专业 → 教出能力 → 接住用人 → 反馈改进。
</p>
<div class="route">
<div
v-for="(item, index) in capabilities"
:key="item.title"
class="route-item"
:class="index ? `d${Math.min(index, 4)}` : ''">
<div class="route-node" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</div>
<article class="route-card">
<div class="route-head">
<h3>{{ item.title }}</h3>
<p class="feat-sub">{{ item.sub }}</p>
</div>
<p>{{ item.desc }}</p>
</article>
</div>
</div>
</div>
</section>
<!-- ================= 平台价值 ================= -->
<section id="value" class="section value">
<div class="container">
<div class="kicker reveal">Platform Value</div>
<h2 class="h2 reveal d1">平台价值</h2>
<p class="lead reveal d2">
把产业、学校、学生与企业真正连接起来，形成：产业需求 → 专业建设 → 学生能力 → 企业用人 → 就业反馈 → 培养改进。
</p>
<div class="value-grid">
<div
v-for="(item, index) in values"
:key="item.title"
class="value-col reveal"
:class="index ? `d${Math.min(index, 4)}` : ''">
<div class="num">{{ String(index + 1).padStart(2, '0') }}</div>
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</div>
</div>
</div>
</section>
<!-- ================= 详情咨询 ================= -->
<section id="cta" class="cta">
<div class="container">
<h2>欢迎咨询<em>紫荆优雇 Agent</em></h2>
<p class="sub">
深度落地"十五五"教育规划要求，将"人工智能+教育、产教融合、专业动态调整、就业提质、生涯教育"转化为校、生、企三端可落地、可操作、可溯源的数字化工具。
</p>
<div class="qr-block reveal">
<div class="qr-card">
<span class="qr-corner tl"></span><span class="qr-corner tr"></span>
<span class="qr-corner bl"></span><span class="qr-corner br"></span>
<img src="/images/yougu/qr.webp" alt="紫荆·优雇 Agent 详情咨询微信二维码" width="230" height="230" loading="lazy" />
<div class="qr-caption">微信扫码 · 详情咨询<span>添加顾问，获取平台详情与咨询服务</span></div>
</div>
<p class="apply-note">长按识别或使用微信扫一扫，我们的顾问将为您介绍紫荆·优雇 Agent 平台，并提供详情咨询。</p>
</div>
</div>
</section>
</main>
</template>
<style lang="scss" scoped>
/* ============ Design Tokens ============ */
.yougu-page {
--red: #ab0a3d;
--red-deep: #7e0730;
--gold: #c97d31;
--ink: #17110f;
--ink-2: #3d322e;
--ink-3: #8a7c76;
--paper: #faf7f5;
--card: #ffffff;
--line: #ede4df;
--shadow-hover: 0 28px 64px rgba(42, 13, 22, 0.14);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
color: var(--ink);
background: var(--paper);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
img {
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ============ Hero / Banner ============ */
.hero {
position: relative;
background: #fff;
}
.banner-wrap {
max-width: 1920px;
margin: 0 auto;
line-height: 0;
overflow: hidden;
}
.banner-img {
display: block;
width: 100%;
height: auto;
}
.hero-actions {
background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
border-bottom: 1px solid var(--line);
}
.hero-actions-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px 26px;
flex-wrap: wrap;
padding: 22px 24px;
}
.hero-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
span {
font-size: 13px;
font-weight: 700;
color: var(--ink-2);
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 15px;
box-shadow: 0 2px 8px rgba(42, 13, 22, 0.03);
}
b {
color: var(--red);
}
}
.hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 9px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition:
transform 0.25s var(--ease),
box-shadow 0.25s;
}
.btn-primary {
padding: 15px 32px;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
box-shadow:
0 10px 30px rgba(171, 10, 61, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
&::after {
content: '→';
font-size: 16px;
transition: transform 0.25s var(--ease);
}
&:hover {
color: #fff;
transform: translateY(-3px);
box-shadow:
0 16px 40px rgba(171, 10, 61, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
&::after {
transform: translateX(3px);
}
}
}
.btn-outline {
padding: 15px 32px;
border-radius: 12px;
color: var(--red);
background: #fff;
border: 1px solid rgba(171, 10, 61, 0.3);
font-weight: 700;
&:hover {
color: var(--red);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(171, 10, 61, 0.14);
border-color: rgba(171, 10, 61, 0.5);
}
}
/* ============ Sections common ============ */
.section {
padding: 96px 0;
position: relative;
overflow: hidden;
> .container {
position: relative;
z-index: 1;
}
}
.kicker {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: center;
gap: 12px;
&::before {
content: '';
width: 26px;
height: 1px;
background: var(--gold);
}
}
.h2 {
margin-top: 16px;
font-size: clamp(26px, 3.6vw, 40px);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
}
.lead {
margin-top: 16px;
max-width: 1080px;
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.85;
}
/* ============ Intro ============ */
.intro {
padding: 88px 0 92px;
background:
radial-gradient(980px 480px at 8% -5%, rgba(171, 10, 61, 0.065), transparent 62%),
radial-gradient(780px 430px at 105% 42%, rgba(201, 125, 49, 0.055), transparent 58%), var(--paper);
.lead {
margin-top: 18px;
}
}
.eco {
margin-top: 30px;
position: relative;
&::before {
content: '';
position: absolute;
left: 50%;
top: 47%;
transform: translate(-50%, -50%);
width: min(64%, 640px);
height: 60%;
z-index: 0;
pointer-events: none;
background: radial-gradient(closest-side, rgba(194, 38, 80, 0.1), rgba(201, 125, 49, 0.05) 60%, transparent 82%);
filter: blur(30px);
}
img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
max-width: 1000px;
margin: 0 auto;
}
}
/* —— 三端卡片 —— */
.scene-grid {
display: grid;
gap: 24px;
margin-top: 44px;
grid-template-columns: 1fr;
@media (min-width: 860px) {
grid-template-columns: repeat(3, 1fr);
}
}
.scene-link {
display: block;
text-decoration: none;
color: inherit;
border-radius: 22px;
outline: none;
}
.scene-card {
position: relative;
border-radius: 22px;
padding: 0;
background: #fff;
border: 1px solid var(--line);
overflow: hidden;
transition:
transform 0.34s var(--ease),
box-shadow 0.34s var(--ease),
border-color 0.3s;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 2;
background: linear-gradient(90deg, var(--red), var(--red-deep));
}
&:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
border-color: rgba(171, 10, 61, 0.16);
}
}
.scene-link:nth-child(2) .scene-card::before {
background: linear-gradient(90deg, #f0cf9a, #b96a22);
}
.scene-link:nth-child(2) .scene-card:hover {
border-color: rgba(201, 125, 49, 0.28);
}
/* —— 头部品牌带（通栏晕染 + 底部分隔线）—— */
.scene-head {
position: relative;
padding: 32px 30px 28px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, rgba(171, 10, 61, 0.065) 0%, rgba(171, 10, 61, 0.018) 58%, rgba(171, 10, 61, 0) 100%);
}
.scene-link:nth-child(2) .scene-card .scene-head {
background: linear-gradient(180deg, rgba(201, 125, 49, 0.09) 0%, rgba(201, 125, 49, 0.022) 58%, rgba(201, 125, 49, 0) 100%);
}
.scene-head-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
/* 右上产品标识（与左上端胶囊两端对齐） */
.scene-mark {
width: 42px;
height: 42px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(171, 10, 61, 0.075);
color: var(--red);
box-shadow: 0 6px 16px rgba(171, 10, 61, 0.07);
svg {
display: block;
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
}
.scene-link:nth-child(2) .scene-card .scene-mark {
background: rgba(201, 125, 49, 0.12);
color: #b96a22;
box-shadow: 0 6px 16px rgba(201, 125, 49, 0.09);
}
/* 端标签 */
.end-tag {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.08em;
color: #fff;
background: linear-gradient(135deg, var(--red), var(--red-deep));
padding: 9px 19px 9px 15px;
border-radius: 999px;
box-shadow: 0 8px 20px rgba(171, 10, 61, 0.26);
i {
display: block;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
}
}
.scene-link:nth-child(2) .scene-card .end-tag {
background: linear-gradient(135deg, #e8b57a, #b96a22);
box-shadow: 0 7px 18px rgba(201, 125, 49, 0.24);
}
/* 产品名单行排布：紫荆优雇Agent · 产教图谱（字同大） */
.head-lockup {
margin-top: 20px;
}
.head-title {
display: flex;
align-items: baseline;
flex-wrap: wrap;
.brand {
font-size: 24px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--ink);
white-space: nowrap;
em {
font-style: normal;
color: var(--gold);
}
}
.tsep {
margin: 0 10px;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 1;
color: rgba(42, 13, 22, 0.3);
white-space: nowrap;
}
h3 {
margin: 0;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--ink);
white-space: nowrap;
}
}
@media (max-width: 420px) {
.head-title .brand,
.head-title h3,
.head-title .tsep {
font-size: 20px;
}
.head-title .tsep {
margin: 0 8px;
}
}
/* 副标题：竖向色条引导 */
.scene-sub {
position: relative;
margin-top: 22px;
padding-left: 13px;
font-size: 14px;
font-weight: 700;
color: var(--red);
line-height: 1.6;
&::before {
content: '';
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, var(--red), var(--red-deep));
}
}
.scene-link:nth-child(2) .scene-card .scene-sub {
color: #b96a22;
&::before {
background: linear-gradient(180deg, #e8b57a, #b96a22);
}
}
/* —— 正文 —— */
.scene-body {
padding: 26px 30px 34px;
}
.scene-card .scene-desc {
font-size: 13.5px;
color: var(--ink-2);
line-height: 1.82;
}
.feat-list {
list-style: none;
margin-top: 18px;
display: grid;
gap: 0;
li {
display: flex;
gap: 10px;
font-size: 13.5px;
color: var(--ink-2);
line-height: 1.5;
padding: 11px 0;
border-top: 1px solid var(--line);
&:first-child {
border-top: 0;
}
&::before {
content: '';
flex: 0 0 auto;
margin-top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}
b {
flex: 0 0 auto;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
}
.fx {
color: var(--ink-3);
}
}
}
/* 卡片底部行动按钮 */
.scene-go {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: fit-content;
min-width: 168px;
margin: 26px auto 2px;
padding: 13px 26px;
border-radius: 10px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
color: #fff;
background: linear-gradient(135deg, var(--red), var(--red-deep));
box-shadow: 0 10px 22px rgba(171, 10, 61, 0.2);
transition:
transform 0.32s var(--ease),
box-shadow 0.32s var(--ease);
.arw {
font-style: normal;
line-height: 1;
color: rgba(255, 255, 255, 0.92);
transition: transform 0.32s var(--ease);
}
}
.scene-link:nth-child(2) .scene-card .scene-go {
background: linear-gradient(135deg, #e8b57a, #b96a22);
box-shadow: 0 10px 22px rgba(201, 125, 49, 0.24);
}
.scene-link:hover .scene-card .scene-go {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(171, 10, 61, 0.3);
.arw {
transform: translateX(4px);
}
}
.scene-link:nth-child(2):hover .scene-card .scene-go {
box-shadow: 0 16px 30px rgba(201, 125, 49, 0.32);
}
/* ============ Features（核心功能） ============ */
.features {
background:
radial-gradient(920px 480px at 100% -5%, rgba(171, 10, 61, 0.06), transparent 60%),
radial-gradient(760px 420px at -4% 55%, rgba(128, 128, 128, 0.05), transparent 55%), var(--card);
}
.route {
margin-top: 44px;
position: relative;
}
.route-item {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 26px;
align-items: start;
padding-bottom: 18px;
&:last-child {
padding-bottom: 0;
}
&::before {
content: '';
position: absolute;
left: 27px;
top: 28px;
bottom: -28px;
width: 2px;
background: linear-gradient(180deg, rgba(171, 10, 61, 0.42), rgba(201, 125, 49, 0.42));
border-radius: 2px;
}
&:last-child::before {
display: none;
}
}
.route-node {
position: relative;
z-index: 1;
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 17px;
font-weight: 900;
color: #fff;
background: linear-gradient(140deg, var(--red), var(--red-deep));
box-shadow: 0 12px 26px rgba(171, 10, 61, 0.28);
font-variant-numeric: tabular-nums;
}
.route-item:last-child .route-node {
background: linear-gradient(140deg, var(--gold), #b96a22);
box-shadow: 0 12px 26px rgba(201, 125, 49, 0.3);
}
.route-card {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px 30px;
display: grid;
grid-template-columns: minmax(0, 266px) minmax(0, 1fr);
gap: 10px 34px;
align-items: center;
transition:
transform 0.3s var(--ease),
box-shadow 0.3s var(--ease),
border-color 0.3s;
&::before {
content: '';
position: absolute;
left: -26px;
top: 27px;
width: 26px;
height: 2px;
background: rgba(171, 10, 61, 0.34);
}
&:hover {
transform: translateX(4px);
box-shadow: var(--shadow-hover);
border-color: rgba(171, 10, 61, 0.16);
}
> p {
font-size: 14px;
color: var(--ink-2);
line-height: 1.85;
}
}
.route-head {
h3 {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.35;
}
.feat-sub {
margin-top: 7px;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.005em;
color: var(--red);
line-height: 1.5;
}
}
@media (max-width: 820px) {
.route {
margin-top: 34px;
}
.route-item {
grid-template-columns: 44px minmax(0, 1fr);
gap: 16px;
&::before {
left: 21px;
top: 22px;
bottom: -22px;
}
}
.route-node {
width: 44px;
height: 44px;
font-size: 15px;
}
.route-card {
grid-template-columns: 1fr;
gap: 0;
padding: 20px 20px 22px;
&::before {
display: none;
}
> p {
margin-top: 10px;
}
}
.route-head h3 {
font-size: 17.5px;
}
}
/* ============ Value（平台价值） ============ */
.value {
background: radial-gradient(900px 460px at 50% -10%, rgba(171, 10, 61, 0.05), transparent 60%), var(--paper);
}
.value-grid {
display: grid;
gap: 22px;
margin-top: 38px;
grid-template-columns: 1fr;
@media (min-width: 860px) {
grid-template-columns: repeat(2, 1fr);
> .value-col:nth-child(5) {
grid-column: 1 / -1;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 24px;
align-items: center;
padding: 32px 34px;
.num {
grid-area: 1 / 1 / 3 / 2;
}
h3 {
grid-area: 1 / 2 / 2 / 3;
margin-top: 0;
}
p {
grid-area: 2 / 2 / 3 / 3;
margin-top: 8px;
}
}
}
}
.value-col {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 30px 30px 32px;
position: relative;
overflow: hidden;
transition:
transform 0.32s var(--ease),
box-shadow 0.32s var(--ease),
border-color 0.3s;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--red), var(--gold));
}
&:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
border-color: rgba(171, 10, 61, 0.16);
}
.num {
width: 42px;
height: 42px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 17px;
font-weight: 900;
color: #fff;
background: linear-gradient(135deg, var(--red), var(--red-deep));
box-shadow: 0 10px 24px rgba(171, 10, 61, 0.28);
font-variant-numeric: tabular-nums;
}
h3 {
margin-top: 18px;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
}
p {
margin-top: 14px;
font-size: 14px;
color: var(--ink-2);
line-height: 1.85;
}
}
@media (max-width: 860px) {
.value-grid {
margin-top: 34px;
}
.value-col {
padding: 26px 22px 28px;
}
}
/* ============ CTA（详情咨询） ============ */
.cta {
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
padding: 96px 0 88px;
background: radial-gradient(120% 120% at 50% 0%, #c22650 0%, #ab0a3d 50%, #7e0730 100%);
&::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
pointer-events: none;
}
.container {
position: relative;
z-index: 1;
}
h2 {
font-size: clamp(30px, 4.6vw, 48px);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
em {
font-style: normal;
color: #f0cf9a;
}
}
.sub {
margin: 18px auto 0;
color: rgba(255, 255, 255, 0.82);
font-size: 15.5px;
max-width: 680px;
line-height: 1.7;
}
}
.qr-block {
margin: 44px auto 0;
max-width: 460px;
}
.qr-card {
position: relative;
display: inline-block;
padding: 20px 20px 16px;
border-radius: 22px;
background: #fff;
box-shadow:
0 24px 60px rgba(60, 4, 22, 0.34),
0 2px 0 rgba(255, 255, 255, 0.5) inset;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 22px 22px 0 0;
background: linear-gradient(90deg, var(--red), var(--gold));
}
img {
display: block;
width: 230px;
height: 230px;
border-radius: 12px;
image-rendering: -webkit-optimize-contrast;
}
}
.qr-caption {
margin-top: 14px;
font-size: 14px;
font-weight: 800;
color: var(--ink);
letter-spacing: 0.01em;
span {
display: block;
margin-top: 4px;
font-size: 12px;
font-weight: 500;
color: #9a8f92;
letter-spacing: 0.02em;
}
}
.qr-corner {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid rgba(201, 125, 49, 0.55);
border-radius: 3px;
&.tl {
top: 9px;
left: 9px;
border-right: 0;
border-bottom: 0;
}
&.tr {
top: 9px;
right: 9px;
border-left: 0;
border-bottom: 0;
}
&.bl {
bottom: 9px;
left: 9px;
border-right: 0;
border-top: 0;
}
&.br {
bottom: 9px;
right: 9px;
border-left: 0;
border-top: 0;
}
}
@media (max-width: 420px) {
.qr-card img {
width: 200px;
height: 200px;
}
}
.apply-note {
margin-top: 20px;
font-size: 13px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.8;
}
/* ============ Reveal ============ */
.reveal {
opacity: 0;
transform: translateY(26px);
transition:
opacity 0.8s var(--ease),
transform 0.8s var(--ease);
&.visible {
opacity: 1;
transform: translateY(0);
}
}
.d1 {
transition-delay: 0.06s;
}
.d2 {
transition-delay: 0.12s;
}
.d3 {
transition-delay: 0.18s;
}
.d4 {
transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.scene-card,
.route-card,
.value-col,
.btn,
.scene-go {
transition: none;
}
}
}
</style>
app/pages/yougu/school.vue 0 → 100644
浏览文件 @ 2d82a083
<script setup>
// 学校端 · 产教图谱
const page = {
productName: '紫荆优雇Agent·产教图谱',
h1: '学校端 · 紫荆优雇Agent·产教图谱 — 高校专业建设与人才培养AI决策智能体正式发布',
banner: '/images/yougu/school-banner.webp',
bannerAlt:
'学校端 紫荆优雇Agent·产教图谱：高校专业建设与人才培养AI决策智能体，服务高校专业建设与人才培养决策',
tags: [{ strong: '学校端', text: ' · 产教图谱' }, { text: '连接教育 · 人才 · 产业' }],
leads: [
'进入“十五五”时期，高等教育人才培养与产业发展的协同关系进一步受到重视。2026年6月印发的《教育发展“十五五”规划》提出优化人才培养布局、服务现代化产业体系建设，并将推进教育数智化变革作为综合改革的重要任务；规划同时明确提出，探索运用人工智能、大数据等数智技术赋能教育评价改革，切实减轻基层负担。2026年4月发布的《“人工智能+教育”行动计划》进一步提出，根据产业结构智能升级优化调整学科专业设置，提升专业设置对产业发展的适配性。',
'对于高校而言，专业建设、课程改革、产教融合和就业质量之间正在形成更加紧密的联系。如何看清产业变化、判断专业方向、诊断培养短板，也成为高校人才培养数字化转型的重要课题。基于此，<b>紫荆优雇Agent·产教图谱</b>——高校 AI 人才培养决策智能体正式推出。',
],
float: [
'<b>紫荆优雇Agent·产教图谱</b>面向高校专业建设与人才培养决策，以产业需求为起点、以统一产教图谱为数据底座，持续连接产业、岗位、能力、专业与课程，通过产业动态监测、专业供需匹配、岗位能力分析与课程差距诊断，帮助学校看清产业变化、研判专业布局、找准人才培养差距，为专业动态调整、人才培养方案优化、课程改革和资源配置提供数据依据，形成“产业监测—专业决策—课程改革—人才培养—就业反馈”的持续诊改闭环，推动专业建设从“经验判断”走向“数据决策”。',
],
features: [
{
title: '看清产业',
sub: '产业链全景分析与人才需求动态洞察',
desc: '动态监测产业链、重点企业、技术方向和岗位需求变化，生成产业链全景图和产业监测大屏，呈现产业结构、关键环节、重点企业及发展趋势，帮助学校看清产业发展方向和人才需求变化。',
},
{
title: '对准专业',
sub: '产业—岗位—专业供需匹配分析',
desc: '将产业链环节、技术方向、岗位需求与学校专业布局进行关联分析，构建产业—岗位—专业供需关系，量化专业对产业重点环节和核心岗位的支撑程度，识别已有优势、薄弱方向与布局空白，为专业新增、优化、调整及资源配置提供依据。',
},
{
title: '找准差距',
sub: '岗位能力图谱与课程能力诊断',
desc: '对核心岗位进行能力拆解，提取知识、技能、工具、证书和职业素养等要求，形成岗位能力图谱，并与学校现有课程体系进行映射，构建课程—能力关联关系，精准回答“岗位需要什么、学校教了什么、课程还缺什么”。',
},
{
title: '推动改进',
sub: '智能预警、整改闭环与成果输出',
desc: '建立专业、岗位、能力与课程的匹配度预警机制，自动识别关键差距，形成可整改的问题清单和调整建议；通过预警—整改—再评价—版本对比持续跟踪改进成效，并将过程与结果沉淀为专业建设、培养方案修订、教学诊改、评估申报和汇报答辩等成果材料。',
},
],
values: [
{
icon: '<path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>',
title: '专业调整有依据',
desc: '将产业趋势、岗位需求、就业去向与专业匹配情况转化为可量化、可追溯的数据依据，支撑专业的“增、减、转、优”和专业群结构优化，让专业调整从经验研判走向数据决策。',
},
{
icon: '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
title: '课程改革有方向',
desc: '从产业需求逐层下钻至岗位、能力和课程，明确岗位需要什么能力、学校已经覆盖什么、课程还缺什么，为人才培养方案修订、课程内容更新、实训建设与评价标准优化提供清晰依据。',
},
{
icon: '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
title: '资源投入有优先级',
desc: '综合产业需求强度、岗位发展趋势、专业匹配程度和能力短板，帮助学校判断师资、实训、课程、证书及专业建设资源应优先投入哪些方向，让有限资源投向更有需求、更有基础、更需要补强的领域。',
},
{
icon: '<path d="M3 3v18h18"/><path d="M7 16l4-5 3 3 5-7"/>',
title: '建设成效可追踪',
desc: '持续记录专业建设中的问题、预警、整改和改善情况，通过跨批次、跨年度对比验证调整成效，使专业建设过程有记录、整改有依据、效果可验证，推动专业建设从“材料汇报”走向可计算、可追踪、可复盘。',
},
],
ctaSub: '留下您的姓名＋联系方式，我们会在第一时间联系您，为您解答紫荆优雇Agent·产教图谱平台相关问题。',
applyNote: '长按识别或使用微信扫一扫，我们的顾问将为您介绍紫荆优雇Agent·产教图谱平台，并提供详情咨询。',
}
useHead({
title: '学校端 · 紫荆优雇Agent·产教图谱 — 高校专业建设与人才培养AI决策智能体',
meta: [
{
hid: 'description',
name: 'description',
content:
'紫荆优雇Agent·产教图谱高校AI人才培养决策智能体正式发布：动态产业需求分析、产教供需图谱匹配、建设指标数字化诊断、就业数据反向赋能人才培养。',
},
],
})
</script>
<template>
<YouguEndLanding :page="page" />
</template>
app/pages/yougu/student.vue 0 → 100644
浏览文件 @ 2d82a083
<script setup>
// 学生端 · 北斗星
const page = {
productName: '紫荆优雇Agent·北斗星',
h1: '学生端 · 紫荆优雇Agent·北斗星 — 高校生涯发展与就业能力提升AI平台正式发布',
banner: '/images/yougu/student-banner.webp',
bannerAlt: '学生端 紫荆优雇Agent·北斗星：高校生涯发展与就业能力提升AI平台，以北斗之光指引职业方向',
tags: [{ strong: '学生端', text: ' · 北斗星' }, { text: '以北斗之光 · 指引职业方向' }],
leads: [
'2026年4月，教育部等五部门印发《“人工智能+教育”行动计划》，提出建设学生数字档案，根据学生能力、特质和兴趣动态优化学习路径；同时推动人工智能赋能高校学生就业能力提升，助力学生成长与就业。2026年6月印发的《教育发展“十五五”规划》设置专栏部署<b>高校毕业生高质量充分就业促进计划</b>，实施高校毕业生就业扩容提质行动，强调推进教育数智化变革、提升教育服务能力。在这一背景下，高校学生的就业准备正在从毕业阶段的集中求职，逐步向贯穿大学全过程的生涯教育、能力培养和实践成长延伸。基于这一需求，<b>紫荆优雇Agent·北斗星</b>——高校生涯教育与就业能力提升 AI 平台正式推出。',
],
float: [
'<b>紫荆优雇Agent·北斗星</b>是面向高校生涯教育与就业能力培养的 AI 平台。平台以 AI 职业发展教练为核心，围绕职业认知、方向探索、能力诊断、实践训练、求职准备与就业指导，为每名学生提供贯穿大学四年的个性化职业发展支持，帮助学校将生涯教育与就业指导从毕业阶段前移至人才培养全过程，推动学生更早明确方向、更早形成能力、更充分做好就业准备。',
],
features: [
{
title: '看方向',
sub: '从大一开始明确未来方向',
desc: '通过职业测评、行业图谱、职业档案、岗位探索等，帮助学生认识自己、理解行业、明确目标岗位，把生涯教育从毕业季前移到大学四年。让学生尽早回答：我适合什么？未来能做什么？应该往哪里努力？',
},
{
title: '找差距',
sub: '看清距离目标岗位还差什么',
desc: '基于目标岗位要求，对照学生已有课程、技能、项目、证书和实践经历，形成岗位能力差距诊断，帮助学生明确已经具备什么、还缺什么、下一步应该重点提升什么。把职业规划从“知道方向”进一步落到：岗位需要什么，我现在还差什么。',
},
{
title: '练能力',
sub: '把岗位要求真正练成能力',
desc: '围绕岗位能力差距，通过微型实战、项目实践、智能项目导师等方式，让学生在真实任务中持续训练、获得反馈并改进能力，同时沉淀课程、项目、实训、证书和评价成果。推动学生从“知道自己缺什么”走向“真正把能力练出来”，并让大学四年的成长从“学过什么”逐步转化为“练成了什么、能够证明什么”。',
},
{
title: '做求职',
sub: '把四年成长转化为岗位语言',
desc: '将学生四年积累的课程、项目、实训、证书和能力记录转化为面向目标岗位的求职档案，根据不同岗位形成差异化简历与求职表达，实现一岗一版、千岗千面。帮助学生解决：我有能力，但怎么让企业看懂我的能力。',
},
{
title: '去职场',
sub: 'AI职业发展教练陪伴就业全过程',
desc: '为每名学生配备专属AI职业发展教练，结合个人特点、目标岗位和成长进度，持续提供职业探索、能力训练、求职准备与就业指导；通过AI面试、面试复盘、合同分析、多Offer比较等，帮助学生提升求职表现与就业决策能力。让个性化职业发展指导真正实现：贯穿大学四年、覆盖每一名学生。',
},
],
values: [
{
icon: '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/>',
title: '生涯教育贯穿大学四年',
desc: '将职业认知、生涯探索和就业准备从毕业阶段前移到大学全过程，帮助学生更早认识行业、明确方向、建立目标，让生涯教育真正融入人才培养过程。',
},
{
icon: '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
title: '就业能力提前形成',
desc: '围绕目标岗位，把课程学习、能力训练、项目实践和求职准备连接起来，让学生在毕业前持续积累岗位所需能力，推动就业能力从“毕业时补课”转向“大学期间逐步形成”。',
},
{
icon: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 15l2 2 4-4"/>',
title: '学生成长有据可循',
desc: '持续沉淀学生在课程、项目、实训、证书和能力训练中的成长记录，让学校不仅看到学生“学过什么”，更能够看到“练成了什么、还缺什么”，为学生成长评价和精准指导提供依据。',
},
{
icon: '<path d="M3 12h4l3 8 4-16 3 8h4"/>',
title: '就业工作走向全过程治理',
desc: '将学生的职业方向、能力形成、求职准备和就业进展纳入全过程管理，帮助学校更早发现方向不清、能力不足、准备不充分等问题，并及时开展分层指导与重点帮扶，推动就业工作从结果统计走向过程治理。',
},
],
ctaSub: '留下您的姓名＋联系方式，我们会在第一时间联系您，为您解答紫荆优雇Agent·北斗星平台相关问题。',
applyNote: '长按识别或使用微信扫一扫，我们的顾问将为您介绍紫荆优雇Agent·北斗星平台，并提供详情咨询。',
}
useHead({
title: '学生端 · 紫荆优雇Agent·北斗星 — 高校生涯发展与就业能力提升AI平台',
meta: [
{
hid: 'description',
name: 'description',
content:
'紫荆优雇Agent·北斗星高校生涯发展与就业能力提升AI平台正式发布：职业探索智能体、实战背书智能体、求职顾问智能体、面试决胜智能体，让生涯教育贯穿培养全过程。',
},
],
})
</script>
<template>
<YouguEndLanding :page="page" />
</template>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论