Skip to content

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

feat: 新增产品页面及相关功能

上级 bb987f90
隐藏空白字符变更
内嵌 并排
正在显示 包含 904 行增加 和 0 行删除
app/assets/css/base.css
浏览文件 @ ea2ecab8
...@@ -40,3 +40,9 @@ img { ...@@ -40,3 +40,9 @@ img {
:root { :root {
--main-color: #aa1941; --main-color: #aa1941;
} }
/* 通用居中容器 */
.w1200 {
max-width: 1200px;
margin: 0 auto;
}
app/pages/products/index.vue 0 → 100644
浏览文件 @ ea2ecab8
<script setup>
import { ElMessage } from 'element-plus'
import { submitApplicationForm } from '@/api/index'
// —— 板块数据（按业务内容分）——
const groups = [
{
id: 'ai',
title: 'AI 数字教学',
desc: '面向院校通识教学与课程数字化建设，提供 AI 课程、数字教材和智能学习平台。',
items: [
{
tag: '通识课程',
name: '人工智能基础·数据分析实践通识课',
note: '通过真实数据分析任务，帮助学生建立数据思维并掌握基础分析方法。',
detailText: '了解课程',
intro: '/bi',
platform: '',
},
{
tag: '通识课程',
name: '人工智能应用实践通识课',
note: '面向各专业学生，通过实践任务训练生成式 AI 的理解与应用能力。',
detailText: '了解课程',
intro: '/ai',
platform: '',
},
{
tag: '教学资源',
name: '数字教材',
note: '支持课程内容数字化组织、交互学习与教学资源持续更新。',
detailText: '了解产品',
intro: '/book',
platform: '',
},
{
tag: '智能学习平台',
name: '个性化智能学习平台',
note: '覆盖课程学习、在线教学与学习过程管理，为师生提供统一学习空间。',
detailText: '',
intro: '',
platform: 'https://saas-learn.ezijing.com/',
},
],
},
{
id: 'platform',
title: '专业建设与实践教学',
desc: '面向新商科、新工科与低空经济专业建设，提供贴近产业场景的实训平台、实验室和赛事服务。',
items: [
{
tag: '新商科实训',
name: '商业数据分析实践教学平台',
note: '围绕真实商业数据任务，训练数据处理、分析和可视化决策能力。',
detailText: '了解平台',
intro: '/platform/new-business-studies/1',
platform: 'https://saas-lab.ezijing.com',
},
{
tag: '新商科实训',
name: '数字营销实践教学平台',
note: '覆盖市场分析、用户洞察与营销执行，训练企业数字化营销核心技能。',
detailText: '了解平台',
intro: '/platform/new-business-studies/2',
platform: 'https://saas-dml-web.ezijing.com',
},
{
tag: '新商科实验室',
name: 'AIGC智能营销实验室',
note: '覆盖内容生成、营销策划与效果优化，支持 AIGC 营销实践教学。',
detailText: '了解方案',
intro: '/platform/new-business-studies/3',
platform: '',
},
{
tag: '新商科实验室',
name: 'AIGC金融工程智能创新实验室',
note: '融合 AIGC 与金融工程任务，支持量化分析和金融产品创新实践。',
detailText: '了解方案',
intro: '/platform/new-business-studies/4',
platform: '',
},
{
tag: '新商科实验室',
name: 'AIGC融媒体实验室',
note: '面向内容生产与传播场景，训练 AIGC 创作和多平台分发能力。',
detailText: '了解方案',
intro: '/platform/new-business-studies/5',
platform: '',
},
{
tag: '新商科实验室',
name: 'AIGC网络直播实验室',
note: '覆盖虚拟主播、内容生成与直播互动，构建智能直播实践场景。',
detailText: '了解方案',
intro: '/platform/new-business-studies/6',
platform: '',
},
{
tag: '新工科实验室',
name: '大数据实践教学平台',
note: '覆盖数据采集、处理与分析，构建从基础认知到项目实践的教学环境。',
detailText: '了解方案',
intro: '/platform/new-engineering/1',
platform: '',
},
{
tag: '新工科实验室',
name: '人工智能实践教学平台',
note: '围绕人工智能基础与典型应用，提供完整的开发与实践教学环境。',
detailText: '了解方案',
intro: '/platform/new-engineering/2',
platform: '',
},
{
tag: '新工科实验室',
name: '信息安全实践教学平台',
note: '面向信创安全场景，训练系统安全、运维管理与风险防护能力。',
detailText: '了解方案',
intro: '/platform/new-engineering/3',
platform: '',
},
{
tag: '新工科实验室',
name: '网络安全实验室',
note: '围绕网络攻防和安全运维场景，建设实战型网络安全教学环境。',
detailText: '了解方案',
intro: '/platform/new-engineering/4',
platform: '',
},
{
tag: '新工科实验室',
name: '物联网实验室',
note: '覆盖 5G、感知设备与边缘计算，支持物联网系统开发实践。',
detailText: '了解方案',
intro: '/platform/new-engineering/5',
platform: '',
},
{
tag: '低空经济',
name: '低空经济实训',
note: '覆盖低空数据分析、无人机应用与物流运营，支撑低空经济人才实训。',
detailText: '了解方案',
intro: '/platform/dk',
platform: '',
},
{
tag: '赛事服务',
name: '职业技能大赛服务',
note: '面向国赛、省赛和行业赛，提供赛项支持、训练平台与备赛指导。',
detailText: '了解赛事',
intro: '/competition',
platform: '',
},
],
},
{
id: 'degree',
title: '国际教育与学位项目',
desc: '为个人学习者提供海外硕士与国际学位项目，覆盖硕士、MBA、EMBA 和 DBA。',
items: [
{
tag: '国际留学',
name: '雪城大学硕士项目',
note: '提供计算机工程、计算机科学和电气工程三个硕士方向。',
detailText: '查看项目',
intro: 'https://syracuse-plus.ezijing.com/',
platform: '',
},
{
tag: '国际留学',
name: '斯蒂文斯理工学院硕士项目',
note: '聚焦工程管理方向的海外硕士项目。',
detailText: '查看项目',
intro: 'https://sit-plus.ezijing.com/',
platform: '',
},
{
tag: '国际留学',
name: '石溪分校金融学硕士',
note: '纽约州立大学石溪分校金融学硕士项目。',
detailText: '查看项目',
intro: 'https://sbu-plus.ezijing.com/',
platform: '',
},
{
tag: '国际留学',
name: '德保罗大学硕士项目',
note: '面向金融专业进阶学习的海外硕士项目。',
detailText: '查看项目',
intro: 'https://depaul-plus.ezijing.com/',
platform: '',
},
{
tag: '国际学位',
name: '教育学硕士（儿童/家庭）MED',
note: '面向儿童与家庭教育方向的国际教育学硕士项目。',
detailText: '查看项目',
intro: 'https://cu.ezijing.com/',
platform: '',
},
{
tag: '国际学位',
name: '玛丽伍德大学学位项目',
note: '覆盖数字时代领航人才 EMBA 与综合管理方向 MBA。',
detailText: '查看项目',
intro: 'https://marywood.ezijing.com/',
platform: '',
},
{
tag: '国际学位',
name: '瑞士酒店管理大学 MBA',
note: '面向酒店与服务业管理方向的国际 MBA 项目。',
detailText: '查看项目',
intro: 'https://shms.ezijing.com/',
platform: '',
},
{
tag: '国际学位',
name: '科创企业家学者项目 DBA',
note: '面向科创企业家的管理与创新学习项目。',
detailText: '查看项目',
intro: 'https://ppai.ezijing.com/',
platform: '',
},
],
},
{
id: 'career',
title: '职业学习与就业服务',
desc: '提供职业技能课程、能力认证与就业辅导，支持从能力提升到职业发展的完整路径。',
items: [
{
tag: '职业认证',
name: '职业技能证书',
note: '提供人工智能、数据分析和数字营销等方向的职业技能课程与认证。',
detailText: '了解认证',
intro: '/certificate',
platform: '',
},
{
tag: '职业认证',
name: '1+X金融产品数字化营销',
note: '围绕金融产品数字化营销岗位能力，提供课程学习与职业技能认证。',
detailText: '了解认证',
intro: 'https://x.ezijing.com',
platform: '',
},
{
tag: '专业课程',
name: '私人财富风险管理课程',
note: '面向高净值人群与理财顾问，建立财富风险识别与管理能力。',
detailText: '了解课程',
intro: 'https://prp.ezijing.com/',
platform: '',
},
{
tag: '就业服务',
name: '就业服务',
note: '提供 1V1 定制辅导、企业内推与企业直签等就业支持服务。',
detailText: '了解服务',
intro: '/job',
platform: '',
},
],
},
]
// —— 首屏重点体验产品 ——
const featuredProducts = [
{
label: '智能教学',
title: '个性化智能学习平台',
action: '立即体验',
href: 'https://saas-learn.ezijing.com/',
},
{
label: '实践教学',
title: '商业数据分析实践教学平台',
action: '立即体验',
href: 'https://saas-lab.ezijing.com',
},
{
label: '实践教学',
title: '数字营销实践教学平台',
action: '立即体验',
href: 'https://saas-dml-web.ezijing.com',
},
]
// —— 分类导航（4 大板块）——
const navItems = groups.map((g) => ({ id: g.id, title: g.title }))
const activeGroup = ref(groups[0].id)
// —— 工具 ——
const isExternal = (href) => /^https?:\/\//.test(href || '')
// —— 分类导航：平滑滚动到对应产品模块 ——
const selectGroup = (id) => {
activeGroup.value = id
document.getElementById(`group-${id}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
// —— 咨询表单 ——
const phone = ref('')
const submitting = ref(false)
const handleConsult = async () => {
const mobile = phone.value.trim()
if (!/^1[3-9]\d{9}$/.test(mobile)) {
ElMessage.error('请输入正确的手机号')
return
}
if (submitting.value) return
submitting.value = true
try {
const res = await submitApplicationForm({
name: '官网产品咨询',
phone: mobile,
project_id: 5004,
channel: process.client ? localStorage.getItem('channel_num') || 10000 : 10000,
comment: '#咨询来源：官网产品与服务页',
})
if (res?.status === 200 && res?.error === 0) {
ElMessage.success('提交成功，产品顾问将尽快与您联系')
phone.value = ''
} else {
ElMessage.error(res?.message || '提交失败，请稍后重试')
}
} catch (error) {
ElMessage.error(error?.data?.message || error?.message || '提交失败，请稍后重试')
} finally {
submitting.value = false
}
}
</script>
<template>
<main class="products-page">
<!-- ===== ① 顶部 Hero + 重点体验产品 ===== -->
<section class="hero">
<div class="w1200 hero-inner">
<div class="hero-content">
<h1 class="hero-title">清控紫荆教育产品与服务</h1>
<p class="hero-desc">
面向院校、政府与企业、个人学习者，提供 AI 教学、数字技能实训、学位教育与职业发展服务。
</p>
<form class="hero-consult-form" @submit.prevent="handleConsult">
<input
v-model="phone"
class="hero-consult-input"
type="tel"
maxlength="11"
placeholder="请输入您的手机号"
aria-label="手机号"
autocomplete="tel" />
<button class="hero-consult-btn" type="submit" :disabled="submitting">
{{ submitting ? '提交中...' : '立即咨询' }}
</button>
</form>
</div>
<div class="featured-products">
<a
v-for="item in featuredProducts"
:key="item.title"
:href="item.href"
target="_blank"
rel="noopener noreferrer"
class="featured-product">
<span class="featured-product-label">{{ item.label }}</span>
<h2 class="featured-product-title">
{{ item.title }}
<span aria-hidden="true">→</span>
</h2>
<span class="featured-product-action">{{ item.action }} <span aria-hidden="true">›</span></span>
</a>
</div>
</div>
</section>
<!-- ===== ② 「全部产品」标题与分类 ===== -->
<section class="catalog-head">
<div class="w1200 catalog-head-inner">
<div class="catalog-head-main">
<div class="catalog-title-wrap">
<p class="catalog-eyebrow">全部产品</p>
<h2 class="catalog-title">了解清控紫荆所有产品与服务</h2>
</div>
</div>
<nav class="cate-nav" aria-label="产品分类">
<button
v-for="nav in navItems"
:key="nav.id"
class="cate-nav-item"
:class="{ active: activeGroup === nav.id }"
type="button"
@click="selectGroup(nav.id)">
{{ nav.title }}
</button>
</nav>
</div>
</section>
<!-- ===== ③ 各板块模块 + 产品卡片 ===== -->
<section class="w1200 products-main">
<!-- 板块 -->
<template v-for="group in groups" :key="group.id">
<div class="group-block" :id="`group-${group.id}`">
<div class="group-block-head">
<h2 class="group-block-title">{{ group.title }}</h2>
<p class="group-block-desc">{{ group.desc }}</p>
</div>
<div class="item-grid">
<div class="item-card" v-for="item in group.items" :key="item.name">
<component
:is="item.intro ? 'a' : 'div'"
:href="item.intro || undefined"
:target="isExternal(item.intro) ? '_blank' : undefined"
:rel="isExternal(item.intro) ? 'noopener noreferrer' : undefined"
class="item-card-body">
<div class="item-card-meta">
<span class="item-card-tag">{{ item.tag }}</span>
</div>
<h3 class="item-card-title">{{ item.name }}</h3>
<p class="item-card-desc">{{ item.note }}</p>
<span v-if="item.intro && item.detailText" class="item-card-detail">
{{ item.detailText }} <span aria-hidden="true">→</span>
</span>
</component>
<div v-if="item.platform" class="item-card-actions">
<a :href="item.platform" target="_blank" rel="noopener noreferrer" class="item-card-action-primary">
立即体验
<span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</template>
</section>
</main>
</template>
<style scoped lang="scss">
.products-page {
min-height: 100vh;
background: #fff;
color: #1f2329;
}
/* ===== ④ 板块 ===== */
.products-main {
padding: 46px 0 56px;
}
.group-block {
scroll-margin-top: 20px;
& + .group-block {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid #e6e8ec;
}
}
.group-block-head {
margin-bottom: 18px;
padding-left: 12px;
border-left: 4px solid var(--main-color);
.group-block-title {
margin: 0 0 6px;
font-size: 24px;
font-weight: 700;
}
.group-block-desc {
margin: 0;
color: #8a9097;
font-size: 14px;
line-height: 1.7;
}
}
.item-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.item-card {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 220px;
overflow: hidden;
border: 1px solid #e4e7ec;
border-radius: 4px;
background: #fff;
transition:
border-color 0.2s,
box-shadow 0.2s,
transform 0.2s;
&:hover {
border-color: rgba(170, 25, 65, 0.48);
box-shadow: 0 12px 30px rgba(46, 53, 64, 0.08);
transform: translateY(-2px);
}
}
.item-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: 22px 22px 18px;
color: inherit;
text-decoration: none;
}
.item-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
font-size: 12px;
line-height: 1;
}
.item-card-tag {
color: #747b85;
}
.item-card-title {
margin: 0;
color: #1f2329;
font-size: 17px;
font-weight: 600;
line-height: 1.5;
transition: color 0.2s;
}
.item-card-body[href]:hover .item-card-title {
color: var(--main-color);
}
.item-card-desc {
margin: 9px 0 0;
color: #737b86;
font-size: 13px;
line-height: 1.75;
}
.item-card-detail {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 6px;
margin-top: auto;
padding-top: 18px;
color: #535b65;
font-size: 13px;
transition: color 0.2s;
}
.item-card-detail > span,
.item-card-action-primary > span {
transition: transform 0.2s;
}
.item-card-body[href]:hover .item-card-detail {
color: var(--main-color);
}
.item-card-body[href]:hover .item-card-detail > span,
.item-card-action-primary:hover > span {
transform: translateX(4px);
}
.item-card-actions {
display: flex;
align-items: center;
min-height: 42px;
padding: 0 22px 20px;
}
.item-card-action-primary {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--main-color);
font-size: 14px;
font-weight: 600;
}
.item-card-action-primary:hover {
color: #7d1030;
}
.item-card-body[href]:focus-visible,
.item-card-action-primary:focus-visible {
outline: 2px solid var(--main-color);
outline-offset: -2px;
}
/* ===== 参考产品列表页的首屏结构 ===== */
.hero {
position: relative;
overflow: hidden;
padding: 76px 0 64px;
border-bottom: 0;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 248, 252, 0.9) 46%, rgba(224, 235, 250, 0.92) 100%),
#eef3fa;
}
.hero::before,
.hero::after {
position: absolute;
content: '';
pointer-events: none;
}
.hero::before {
top: -180px;
right: -80px;
width: 760px;
height: 620px;
border: 1px solid rgba(74, 119, 175, 0.12);
background: repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.28) 0,
rgba(255, 255, 255, 0.28) 7px,
rgba(116, 152, 196, 0.08) 8px,
rgba(116, 152, 196, 0.08) 10px
);
transform: rotate(8deg);
}
.hero::after {
right: -160px;
bottom: -330px;
width: 850px;
height: 620px;
background: linear-gradient(135deg, rgba(154, 193, 235, 0.08), rgba(70, 148, 220, 0.28));
transform: rotate(-12deg);
}
.hero-inner {
position: relative;
z-index: 1;
display: block;
padding: 0;
}
.hero-content {
width: 760px;
}
.hero-title {
margin: 0 0 24px;
color: #171a20;
font-size: 48px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1.22;
}
.hero-desc {
max-width: 760px;
color: #5f6670;
font-size: 17px;
line-height: 1.8;
}
.hero-consult-form {
display: flex;
width: 650px;
margin-top: 30px;
gap: 0;
}
.hero-consult-input {
flex: 1;
min-width: 0;
height: 54px;
padding: 0 20px;
border: 1px solid rgba(222, 226, 232, 0.92);
border-right: 0;
border-radius: 0;
background: rgba(255, 255, 255, 0.88);
color: #1f2329;
font-size: 15px;
outline: none;
box-shadow: none;
}
.hero-consult-input::placeholder {
color: #a0a6ae;
}
.hero-consult-input:focus {
border-color: var(--main-color);
box-shadow: inset 0 0 0 1px var(--main-color);
}
.hero-consult-btn {
flex-shrink: 0;
height: 54px;
min-width: 148px;
padding: 0 28px;
border: 1px solid var(--main-color);
border-radius: 0;
background: var(--main-color);
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.hero-consult-btn:hover {
border-color: #7d1030;
background: #7d1030;
}
.hero-consult-btn:disabled {
border-color: #c98799;
background: #c98799;
cursor: not-allowed;
}
.featured-products {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 78px;
border: 1px solid rgba(222, 227, 234, 0.9);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 16px 36px rgba(55, 81, 111, 0.08);
backdrop-filter: blur(8px);
}
.featured-product {
min-width: 0;
min-height: 156px;
padding: 26px 34px 24px;
color: #1d2129;
transition: background 0.2s ease;
}
.featured-product + .featured-product {
border-left: 1px solid #e6e9ee;
}
.featured-product:hover {
color: #1d2129;
background: rgba(255, 255, 255, 0.9);
}
.featured-product-label {
display: block;
margin-bottom: 13px;
color: #69717c;
font-size: 14px;
}
.featured-product-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 0;
color: #1f2329;
font-size: 20px;
font-weight: 600;
line-height: 1.45;
}
.featured-product-title > span {
flex-shrink: 0;
font-size: 24px;
font-weight: 400;
transition: transform 0.2s ease;
}
.featured-product:hover .featured-product-title > span {
transform: translateX(4px);
}
.featured-product-action {
display: inline-block;
margin-top: 16px;
color: var(--main-color);
font-size: 14px;
}
.catalog-head {
background: linear-gradient(180deg, #e2ecf9 0%, #f2f5fa 100%);
padding: 54px 0 0;
}
.catalog-head-inner {
padding: 0;
}
.catalog-head-main {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.catalog-eyebrow {
margin: 0 0 10px;
color: #4f5660;
font-size: 15px;
}
.catalog-title {
margin: 0;
color: #171a20;
font-size: 38px;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.3;
}
.cate-nav {
display: flex;
flex-wrap: wrap;
gap: 44px;
margin-top: 42px;
padding: 0;
border: 0;
background: transparent;
}
.cate-nav-item {
position: relative;
padding: 0 0 18px;
border: 0;
border-radius: 0;
background: transparent;
color: #343a42;
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: color 0.2s ease;
}
.cate-nav-item::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
background: var(--main-color);
content: '';
opacity: 0;
transform: scaleX(0.45);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.cate-nav-item:hover,
.cate-nav-item.active {
color: var(--main-color);
}
.cate-nav-item.active::after {
opacity: 1;
transform: scaleX(1);
}
.group-block {
scroll-margin-top: 24px;
}
.group-block-head {
padding-left: 0;
border-left: 0;
}
.group-block-head .group-block-title {
font-size: 26px;
}
@media (max-width: 1240px) {
.hero-inner,
.catalog-head-inner {
padding-right: 24px;
padding-left: 24px;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论