diff --git a/website/src/components/RosePieChart.jsx b/website/src/components/RosePieChart.jsx
index 3f858fd..0e46e33 100644
--- a/website/src/components/RosePieChart.jsx
+++ b/website/src/components/RosePieChart.jsx
@@ -5,7 +5,7 @@ const chartData = [
{ value: 25, name: '校企益邦' },
{ value: 25, name: '科研管理系统' },
{ value: 25, name: '智慧党建平台' },
- { value: 25, name: '商咖五级进阶' },
+ { value: 25, name: '实训管理平台' },
];
const color = '#043b8f';
diff --git a/website/src/data/products.js b/website/src/data/products.js
index 53ead4d..8ee5f83 100644
--- a/website/src/data/products.js
+++ b/website/src/data/products.js
@@ -7,10 +7,15 @@ export const products = [
slug: 'smart-campus',
name: '校企益邦',
slogan: '实习过程全掌控,就业数据一目了然',
- themeColor: '#2563EB',
+ themeColor: '#60ce93',
heroImage: new URL('../assets/images/Carousel/xq.png', import.meta.url).href,
- themeFrom: '#1e40af',
- themeTo: '#3b82f6',
+ screenshots: [
+ new URL('../assets/images/xq/xq1.png', import.meta.url).href,
+ new URL('../assets/images/xq/xq2.png', import.meta.url).href,
+ new URL('../assets/images/xq/xq3.png', import.meta.url).href,
+ ],
+ themeFrom: '#047857',
+ themeTo: '#34d399',
icon: Building2,
brief: '面向职业院校实习就业管理的专业化平台,覆盖实习计划制定、过程跟踪、数据采集、鉴定评价全流程,已服务广西多所职业院校,帮助学校轻松应对教育厅数据上报要求。',
tags: ['实习计划管理', 'GPS签到+电子围栏', '问卷式日志', '多维鉴定评价'],
@@ -45,10 +50,15 @@ export const products = [
slug: 'exam-system',
name: '科研管理系统',
slogan: '让科研管理告别纸质时代',
- themeColor: '#EA580C',
+ themeColor: '#0c86cf',
heroImage: new URL('../assets/images/Carousel/ky.png', import.meta.url).href,
- themeFrom: '#c2410c',
- themeTo: '#f97316',
+ screenshots: [
+ new URL('../assets/images/ky/ky1.png', import.meta.url).href,
+ new URL('../assets/images/ky/ky2.jpeg', import.meta.url).href,
+ new URL('../assets/images/ky/ky3.jpeg', import.meta.url).href,
+ ],
+ themeFrom: '#075985',
+ themeTo: '#38bdf8',
icon: ClipboardCheck,
brief: '面向高校及科研院所的全生命周期科研业务管理平台。覆盖项目申报、评审立项、经费管控、成果登记到数据统计的全流程数字化,已帮助多所高校实现科研管理从纸质流转到"一网通办"的跨越。',
tags: ['在线申报审批', '智能查重防重复', '经费精细管控', '成果自动赋分'],
@@ -85,10 +95,16 @@ export const products = [
slug: 'teaching-resource',
name: '智慧党建平台',
slogan: '党建工作有痕,年终考核无忧',
- themeColor: '#7C3AED',
+ themeColor: '#aa3130',
heroImage: new URL('../assets/images/Carousel/zh.png', import.meta.url).href,
- themeFrom: '#6d28d9',
- themeTo: '#8b5cf6',
+ heroSize: 'small',
+ screenshots: [
+ new URL('../assets/images/zh/zh1.png', import.meta.url).href,
+ new URL('../assets/images/zh/zh2.png', import.meta.url).href,
+ new URL('../assets/images/zh/zh3.jpeg', import.meta.url).href,
+ ],
+ themeFrom: '#7f1d1d',
+ themeTo: '#dc2626',
icon: BookOpen,
brief: '面向高校及职业院校各级党组织的智慧党建管理系统。以"党业融合、指标驱动、全程留痕"为核心理念,将三会一课、党员活动、工作记录等日常工作自动关联考核指标,实现年终考核"零重复填报"。',
tags: ['三级考核指标', '三会一课数字化', '万能工作记录', '实时进度看板'],
@@ -131,12 +147,17 @@ export const products = [
},
{
slug: 'internship',
- name: '商咖五级进阶',
+ name: '实训管理平台',
slogan: '五级渐进,让每一次成长都看得见',
- themeColor: '#059669',
+ themeColor: '#8b50ee',
heroImage: new URL('../assets/images/Carousel/sk.png', import.meta.url).href,
- themeFrom: '#047857',
- themeTo: '#10b981',
+ screenshots: [
+ new URL('../assets/images/sk/sk1.png', import.meta.url).href,
+ new URL('../assets/images/sk/sk2.jpeg', import.meta.url).href,
+ new URL('../assets/images/sk/sk3.jpeg', import.meta.url).href,
+ ],
+ themeFrom: '#5b21b6',
+ themeTo: '#a78bfa',
icon: GraduationCap,
brief: '专为职业院校商科专业群打造的实训项目管理系统。以"项目—模块—任务"三级结构为骨架,以"咖豆积分+技能画像"为引擎,将抽象的五级进阶培养模式变成可量化、可追踪、可激励的线上实战平台。',
tags: ['三级精细管理', '咖豆积分引擎', '五级自动晋级', '动态技能画像'],
diff --git a/website/src/index.css b/website/src/index.css
index 9e3fc94..658dbb1 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -55,7 +55,7 @@ body {
/* Product page hero art titles */
.hero-product-title {
- font-family: "ZCOOL XiaoWei", "STSong", "SimSun", serif;
+ font-family: "STSong", "SimSun", "NSimSun", serif;
letter-spacing: 0.3em;
color: white;
text-shadow: 0 4px 60px rgba(0, 162, 234, 0.3),
@@ -63,7 +63,7 @@ body {
}
.hero-product-slogan {
- font-family: "Ma Shan Zheng", "STXingkai", cursive;
+ font-family: "STKaiti", "KaiTi", "DFKai-SB", cursive;
letter-spacing: 0.15em;
color: white;
text-shadow: 0 2px 40px rgba(0, 162, 234, 0.25),
diff --git a/website/src/pages/ProductPage.jsx b/website/src/pages/ProductPage.jsx
index fcceae9..65619e7 100644
--- a/website/src/pages/ProductPage.jsx
+++ b/website/src/pages/ProductPage.jsx
@@ -1,15 +1,14 @@
import { useParams, Link } from 'react-router-dom'
-import { ChevronDown, ArrowRight, Shield, Clock, Headphones, AlertCircle } from 'lucide-react'
+import { ChevronDown, ArrowRight, Shield, Clock, Headphones, AlertCircle } from 'lucide-react'
import { getProduct } from '../data/products'
import ScrollReveal from '../components/ScrollReveal'
import StatNumber from '../components/StatNumber'
+import Carousel from '../components/Carousel'
export default function ProductPage() {
const { slug } = useParams()
const product = getProduct(slug)
-
-
if (!product) {
return (
@@ -22,47 +21,89 @@ export default function ProductPage() {
)
}
+ // 将 hex 主题色转为 RGB 分量,用于 rgba() 可变透明度
+ const hex = product.themeColor.replace('#', '')
+ const r = parseInt(hex.slice(0, 2), 16)
+ const g = parseInt(hex.slice(2, 4), 16)
+ const b = parseInt(hex.slice(4, 6), 16)
+
// const Icon = product.icon
// const otherProducts = products.filter(p => p.slug !== slug)
return (
-
+
{/* ── Hero ── */}
-
- {/* Background image */}
- {product.heroImage && (
-
-

+
+ {/* Desktop: left image + right card */}
+
+ {/* Image - left */}
+
+ {product.heroImage && (
+

+ )}
- )}
- {/* Black overlay */}
-
-
-
-
-
-
- {product.name}
-
-
- {product.slogan}
-
-
- {/* Stats */}
- {product.stats && (
-
- {product.stats.map((s, i) => (
-
-
-
+ {/* Content - right */}
+
+
+
+ {product.name}
+
+
+ {product.slogan}
+
+ {product.stats && (
+
+ {product.stats.map((s, i) => (
+
-
{s.label}
-
- ))}
-
+ ))}
+
+ )}
+
+
+
+ {/* Mobile: stacked layout */}
+
+ {product.heroImage && (
+

)}
+
+
+ 智慧教育解决方案
+
+
+ {product.name}
+
+
+ {product.slogan}
+
+ {product.stats && (
+
+ {product.stats.map((s, i) => (
+
+ ))}
+
+ )}
+
@@ -73,9 +114,9 @@ export default function ProductPage() {
{/* Floating decorative shapes */}
-
-
-
+
+
+
{product.brief}
@@ -87,12 +128,12 @@ export default function ProductPage() {
{product.tags.map((tag, i) => (
+ style={{ backgroundColor: product.themeColor }}>
{tag}
-
+
))}
@@ -108,8 +149,8 @@ export default function ProductPage() {
-
- Pain Points
+
+ Pain Points
{product.painPointsTitle || `${product.name}解决的核心问题`}
@@ -121,7 +162,7 @@ export default function ProductPage() {
{product.painPoints.map((item, i) => (
-
+
{/* Pain point */}
@@ -130,8 +171,8 @@ export default function ProductPage() {
{item.title}
{/* Solution */}
-
@@ -148,8 +189,8 @@ export default function ProductPage() {
-
- Core Features
+
+ Core Features
核心功能
@@ -159,7 +200,7 @@ export default function ProductPage() {
适用对象:
{product.target.split('、').map((t, i) => (
- {t.trim()}
+ {t.trim()}
))}
@@ -170,16 +211,16 @@ export default function ProductPage() {
{product.features.map((f, i) => (
-
+
-
-
+
+
-
0{i + 1}
-
+
0{i + 1}
+
{f.title}
{f.desc}
@@ -191,14 +232,35 @@ export default function ProductPage() {
+ {/* ── Product Showcase ── */}
+ {product.screenshots && product.screenshots.length > 0 && (
+
+
+
+
+
+
+ Product Showcase
+
+
+ 产品展示
+
+
+
+
+
+
+
+ )}
+
{/* ── Advantages ── */}
-
- Why Choose Us
+
+ Why Choose Us
为什么选择我们
@@ -213,18 +275,18 @@ export default function ProductPage() {
{ icon: Headphones, title: '专属服务', desc: '7×24 小时响应,专属客户经理全程陪伴' },
].map((item, i) => (
-
+
-
-
+
+
-
{item.title}
{item.desc}
@@ -243,8 +305,8 @@ export default function ProductPage() {
-
- FAQ
+
+ FAQ
常见问题
@@ -255,20 +317,20 @@ export default function ProductPage() {
{product.faq.map((item, i) => (
-
-
-
+
+
+
- Q{i + 1}
+ Q{i + 1}
{item.q}
-
-
+
+
-
@@ -282,10 +344,10 @@ export default function ProductPage() {
{/* ── CTA ── */}
+ style={{ background: `linear-gradient(135deg, ${product.themeFrom || '#0a1628'}, ${product.themeTo || '#0f1f3a'})` }}>
@@ -313,8 +375,6 @@ export default function ProductPage() {
-
-
)
-}
+}
\ No newline at end of file