feat: 使用 Astro 框架重构网站
This commit is contained in:
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
.astro/
|
||||||
96
about.html
96
about.html
@@ -1,96 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>关于我们 | 智花 · 五道题在线教育</title>
|
|
||||||
<meta name="description" content="了解五道题国际中文教育的企业介绍、企业愿景、使命、品牌故事与团队合作信息。" />
|
|
||||||
<link rel="stylesheet" href="assets/css/site.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-shell bg-wash">
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="container site-nav">
|
|
||||||
<a class="brand" href="index.html" aria-label="智花首页">
|
|
||||||
<img class="brand-mark" src="assets/images/logo-mark.svg" alt="" />
|
|
||||||
<div class="brand-copy"><strong>智花</strong><span>|</span><span>五道题在线教育</span></div>
|
|
||||||
</a>
|
|
||||||
<nav class="nav-links" aria-label="主导航">
|
|
||||||
<a class="nav-link" href="index.html">首页</a>
|
|
||||||
<a class="nav-link" href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a class="nav-link" href="curriculum.html">课程体系</a>
|
|
||||||
<a class="nav-link" href="faculty.html">师资团队</a>
|
|
||||||
<a class="nav-link current" href="about.html">关于我们</a>
|
|
||||||
</nav>
|
|
||||||
<div class="locale-pill"><span>简体中文</span></div>
|
|
||||||
<button class="menu-toggle" type="button" data-menu-toggle aria-expanded="false" aria-label="打开导航菜单">
|
|
||||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="container mobile-menu" data-mobile-menu>
|
|
||||||
<a href="index.html">首页</a>
|
|
||||||
<a href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a href="curriculum.html">课程体系</a>
|
|
||||||
<a href="faculty.html">师资团队</a>
|
|
||||||
<a class="current" href="about.html">关于我们</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="hero centered">
|
|
||||||
<div class="container hero-copy">
|
|
||||||
<p class="eyebrow">关于我们</p>
|
|
||||||
<p class="hero-subtitle" style="max-width:920px">智花（五道题北京科技有限公司）专注于国际中文教育创新，依托国际中文教学资源与研究力量，结合人工智能技术，为全球学习者提供智能化、个性化的中文学习体验。</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container split-section">
|
|
||||||
<article class="value-card">
|
|
||||||
<p class="eyebrow">企业愿景</p>
|
|
||||||
<h1 class="statement">智慧教育，连接未来。</h1>
|
|
||||||
<p class="lead">以科技赋能教育创新，推动全球学习方式的智能化变革。我们致力于让每一位学习者，都能通过智能技术获得更高效、更个性化、更有温度的学习体验。</p>
|
|
||||||
</article>
|
|
||||||
<div class="visual-stack dual">
|
|
||||||
<div class="art-panel photo"><img src="assets/images/sketch/6de9aa9e5d23da3009d3776b55c3b84c02a5aaa2.png" alt="企业愿景视觉展示" /></div>
|
|
||||||
<div class="art-panel photo"><img src="assets/images/sketch/7cdc25ddd57dfe8b8394e8b3ed7ffc28225b6471.png" alt="品牌与合作展示" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head"><p class="eyebrow">我们的使命</p></div>
|
|
||||||
<article class="feature-card quote-card">
|
|
||||||
<p class="lead" style="max-width:980px">以科技创新驱动中文教育发展，通过智能出题、语料检索与个性化教学，构建面向未来的智慧学习体系。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container grid-two">
|
|
||||||
<article class="feature-card">
|
|
||||||
<p class="eyebrow">品牌故事</p>
|
|
||||||
<h2 class="statement">“智花”寓意智慧与文化的绽放。</h2>
|
|
||||||
<p class="lead">它源于我们在国际中文教育领域多年的研究与实践，融合语言学、教育学与人工智能，致力于让中文学习更加智能、有趣、高效。</p>
|
|
||||||
</article>
|
|
||||||
<article class="value-card">
|
|
||||||
<p class="eyebrow">团队与合作</p>
|
|
||||||
<p class="lead" style="margin-top:0">我们拥有跨学科的专业团队，汇聚语言学、教育技术、人工智能等领域的研究者与教师，并与多家教育机构、高校及技术公司建立合作关系。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="site-footer">
|
|
||||||
<div class="container footer-main">
|
|
||||||
<div><h3>五道题（北京）科技有限公司</h3><p>地址：北京市海淀区</p><p>邮箱：support@fivequestions.cn</p></div>
|
|
||||||
<div><h3>关于我们</h3><div class="footer-links"><a href="teaching-philosophy.html">学习理念</a><a href="curriculum.html">课程体系</a><a href="faculty.html">师资团队</a></div></div>
|
|
||||||
<div><h3>下载应用</h3><div class="footer-links"><a href="index.html#download">App Store</a><a href="index.html#download">Google Play</a><a href="index.html#download">Download Android</a></div></div>
|
|
||||||
</div>
|
|
||||||
<div class="container footer-bottom">© 2026 五道题（北京）科技有限公司 保留所有权利</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<script src="assets/js/site.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
const toggle = document.querySelector("[data-menu-toggle]");
|
|
||||||
const menu = document.querySelector("[data-mobile-menu]");
|
|
||||||
|
|
||||||
if (toggle && menu) {
|
|
||||||
toggle.addEventListener("click", () => {
|
|
||||||
const isOpen = menu.classList.toggle("is-open");
|
|
||||||
toggle.setAttribute("aria-expanded", String(isOpen));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
6
astro.config.mjs
Normal file
6
astro.config.mjs
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import icon from 'astro-icon';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
integrations: [icon()],
|
||||||
|
});
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>课程体系 | 智花 · 五道题在线教育</title>
|
|
||||||
<meta name="description" content="展示五道题国际中文教育课程体系，包括 HSK 等级课程、技能训练、情境化学习与进阶课程。" />
|
|
||||||
<link rel="stylesheet" href="assets/css/site.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-shell bg-wash">
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="container site-nav">
|
|
||||||
<a class="brand" href="index.html" aria-label="智花首页">
|
|
||||||
<img class="brand-mark" src="assets/images/logo-mark.svg" alt="" />
|
|
||||||
<div class="brand-copy"><strong>智花</strong><span>|</span><span>五道题在线教育</span></div>
|
|
||||||
</a>
|
|
||||||
<nav class="nav-links" aria-label="主导航">
|
|
||||||
<a class="nav-link" href="index.html">首页</a>
|
|
||||||
<a class="nav-link" href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a class="nav-link current" href="curriculum.html">课程体系</a>
|
|
||||||
<a class="nav-link" href="faculty.html">师资团队</a>
|
|
||||||
<a class="nav-link" href="about.html">关于我们</a>
|
|
||||||
</nav>
|
|
||||||
<div class="locale-pill"><span>简体中文</span></div>
|
|
||||||
<button class="menu-toggle" type="button" data-menu-toggle aria-expanded="false" aria-label="打开导航菜单">
|
|
||||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="container mobile-menu" data-mobile-menu>
|
|
||||||
<a href="index.html">首页</a>
|
|
||||||
<a href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a class="current" href="curriculum.html">课程体系</a>
|
|
||||||
<a href="faculty.html">师资团队</a>
|
|
||||||
<a href="about.html">关于我们</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="hero centered">
|
|
||||||
<div class="container hero-copy">
|
|
||||||
<p class="eyebrow">课程体系</p>
|
|
||||||
<p class="hero-subtitle" style="max-width:920px">智花课程体系按照 HSK 等级科学设计，覆盖听说读写各项技能，同时提供情境化练习与个性化提高班，让每位中文学习者都能高效成长。</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container split-section">
|
|
||||||
<div class="stacked-copy">
|
|
||||||
<p class="eyebrow">HSK 等级课程</p>
|
|
||||||
<h1 class="statement">按照 HSK 等级划分，循序渐进掌握中文能力</h1>
|
|
||||||
</div>
|
|
||||||
<div class="art-panel photo"><img src="assets/images/sketch/67a807fec1b784684e1a026f0ee01f5072a571c7.png" alt="HSK 课程结构视觉展示" /></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container timeline">
|
|
||||||
<article class="timeline-card">
|
|
||||||
<div class="timeline-tag">技能训练</div>
|
|
||||||
<div><h2 class="statement">专注听、说、读、写四大核心技能，提升综合语言能力</h2><p class="lead">以模块化练习组织不同难度和目标的内容，配合即时反馈，让知识点巩固与技能迁移并行推进。</p></div>
|
|
||||||
</article>
|
|
||||||
<article class="timeline-card">
|
|
||||||
<div class="timeline-tag">情境化学习</div>
|
|
||||||
<div><h2 class="statement">通过真实情境和生活场景模拟，让学习更主动、更实用</h2><p class="lead">不只是记忆词汇与语法，更围绕表达、理解和沟通建立语境，让学习结果自然过渡到真实交流场景。</p></div>
|
|
||||||
</article>
|
|
||||||
<article class="timeline-card">
|
|
||||||
<div class="timeline-tag">进阶课程</div>
|
|
||||||
<div><h2 class="statement">根据学员水平和学习意愿组织，提高语言能力和实习竞争力</h2><p class="lead">围绕专项需求提供更具针对性的内容编排，帮助学习者在已有基础上完成进一步突破。</p></div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="site-footer">
|
|
||||||
<div class="container footer-main">
|
|
||||||
<div><h3>五道题（北京）科技有限公司</h3><p>地址：北京市海淀区</p><p>邮箱：support@fivequestions.cn</p></div>
|
|
||||||
<div><h3>关于我们</h3><div class="footer-links"><a href="teaching-philosophy.html">学习理念</a><a href="curriculum.html">课程体系</a><a href="faculty.html">师资团队</a></div></div>
|
|
||||||
<div><h3>下载应用</h3><div class="footer-links"><a href="index.html#download">App Store</a><a href="index.html#download">Google Play</a><a href="index.html#download">Download Android</a></div></div>
|
|
||||||
</div>
|
|
||||||
<div class="container footer-bottom">© 2026 五道题（北京）科技有限公司 保留所有权利</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<script src="assets/js/site.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
118
faculty.html
118
faculty.html
@@ -1,118 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>师资团队 | 智花 · 五道题在线教育</title>
|
|
||||||
<meta name="description" content="展示五道题国际中文教育师资团队、团队理念、名师风采、教学优势与加入我们信息。" />
|
|
||||||
<link rel="stylesheet" href="assets/css/site.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-shell bg-wash">
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="container site-nav">
|
|
||||||
<a class="brand" href="index.html" aria-label="智花首页">
|
|
||||||
<img class="brand-mark" src="assets/images/logo-mark.svg" alt="" />
|
|
||||||
<div class="brand-copy"><strong>智花</strong><span>|</span><span>五道题在线教育</span></div>
|
|
||||||
</a>
|
|
||||||
<nav class="nav-links" aria-label="主导航">
|
|
||||||
<a class="nav-link" href="index.html">首页</a>
|
|
||||||
<a class="nav-link" href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a class="nav-link" href="curriculum.html">课程体系</a>
|
|
||||||
<a class="nav-link current" href="faculty.html">师资团队</a>
|
|
||||||
<a class="nav-link" href="about.html">关于我们</a>
|
|
||||||
</nav>
|
|
||||||
<div class="locale-pill"><span>简体中文</span></div>
|
|
||||||
<button class="menu-toggle" type="button" data-menu-toggle aria-expanded="false" aria-label="打开导航菜单">
|
|
||||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="container mobile-menu" data-mobile-menu>
|
|
||||||
<a href="index.html">首页</a>
|
|
||||||
<a href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a href="curriculum.html">课程体系</a>
|
|
||||||
<a class="current" href="faculty.html">师资团队</a>
|
|
||||||
<a href="about.html">关于我们</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="hero centered">
|
|
||||||
<div class="container hero-copy">
|
|
||||||
<p class="eyebrow">教师团队</p>
|
|
||||||
<p class="hero-subtitle" style="max-width:920px">智花教师团队由国内外知名院校的专家与一线教师组成，致力于将专业教学与智能技术融合，为学习者提供高质量的国际中文教育。</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head"><p class="eyebrow">团队理念</p></div>
|
|
||||||
<article class="feature-card quote-card">
|
|
||||||
<h1 class="statement">我们相信语言学习不仅是知识的积累，更是文化与交流的桥梁。</h1>
|
|
||||||
<p class="lead">智花教师团队以专业、创新与温度为核心理念，让中文教学更生动、更智能、更具全球视野。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head"><p class="eyebrow">名师风采</p></div>
|
|
||||||
<p class="teacher-note">展示 3-6 位代表教师（头像 + 姓名 + 职称 + 专长）。当前页面按设计稿中的占位信息组织为静态展示卡片，后续可直接替换为真实师资内容。</p>
|
|
||||||
<div class="teacher-grid">
|
|
||||||
<article class="teacher-card">
|
|
||||||
<div class="portrait"><img src="assets/images/sketch/96160d0c2ec385f93e20c2798a0398a85ee806b8.png" alt="张无忌教师形象" /></div>
|
|
||||||
<h3>张无忌</h3>
|
|
||||||
<div class="teacher-meta">香港中文大学 · 语法 / 文化</div>
|
|
||||||
<p class="teacher-bio">长期从事国际中文教育研究，擅长课程设计与语言结构讲解，注重知识体系完整性与课堂互动。</p>
|
|
||||||
</article>
|
|
||||||
<article class="teacher-card">
|
|
||||||
<div class="portrait"><img src="assets/images/sketch/29f4f341ce881e60945dfb6b948c94e96cb42111.png" alt="白眉大侠教师形象" /></div>
|
|
||||||
<h3>白眉大侠</h3>
|
|
||||||
<div class="teacher-meta">北京外国语大学 · 口语 / 听力</div>
|
|
||||||
<p class="teacher-bio">强调真实语境中的表达能力训练，擅长把课堂任务拆解成可执行的高频语言动作。</p>
|
|
||||||
</article>
|
|
||||||
<article class="teacher-card">
|
|
||||||
<div class="portrait"><img src="assets/images/sketch/b9d0d9f11f269b89ff4d1b63e02b9d4f96443f92.png" alt="路飞教师形象" /></div>
|
|
||||||
<h3>路飞</h3>
|
|
||||||
<div class="teacher-meta">北京外国语大学 · 阅读 / 写作</div>
|
|
||||||
<p class="teacher-bio">关注阅读理解与书面表达的协同训练，帮助学习者在结构化输入中建立更稳定的输出能力。</p>
|
|
||||||
</article>
|
|
||||||
<article class="teacher-card">
|
|
||||||
<div class="portrait"><img src="assets/images/sketch/0c94065a7e790aea48c302d1f437e6a09cfe0573.png" alt="扫地僧教师形象" /></div>
|
|
||||||
<h3>扫地僧</h3>
|
|
||||||
<div class="teacher-meta">国际中文教育 · 综合提升</div>
|
|
||||||
<p class="teacher-bio">结合 AI 学习支持与长期教学经验，为不同学习阶段的学生制定更精细的成长建议与目标路径。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container grid-two">
|
|
||||||
<article class="value-card">
|
|
||||||
<p class="eyebrow">教学优势</p>
|
|
||||||
<h2 class="statement">教学经验与智能支持并行</h2>
|
|
||||||
<p class="lead">结合丰富教学经验与 AI 智能支持，教师团队能够精准评估学习水平，提供个性化指导，帮助学习者高效提升。</p>
|
|
||||||
</article>
|
|
||||||
<article class="feature-card cta-band">
|
|
||||||
<p class="eyebrow">诚邀加盟</p>
|
|
||||||
<h3>我们正在不断壮大，欢迎更多国际中文教育人才加入。</h3>
|
|
||||||
<p>共同建设开放、创新的智慧教学生态，让更多学习者在稳定高质量的环境中持续成长。</p>
|
|
||||||
<div class="hero-actions"><a class="btn btn-outline" href="about.html">加入我们</a></div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="site-footer">
|
|
||||||
<div class="container footer-main">
|
|
||||||
<div><h3>五道题（北京）科技有限公司</h3><p>地址：北京市海淀区</p><p>邮箱：support@fivequestions.cn</p></div>
|
|
||||||
<div><h3>关于我们</h3><div class="footer-links"><a href="teaching-philosophy.html">学习理念</a><a href="curriculum.html">课程体系</a><a href="faculty.html">师资团队</a></div></div>
|
|
||||||
<div><h3>下载应用</h3><div class="footer-links"><a href="index.html#download">App Store</a><a href="index.html#download">Google Play</a><a href="index.html#download">Download Android</a></div></div>
|
|
||||||
</div>
|
|
||||||
<div class="container footer-bottom">© 2026 五道题（北京）科技有限公司 保留所有权利</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<script src="assets/js/site.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
223
index.html
223
index.html
@@ -1,223 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>首页 | 智花 · 五道题在线教育</title>
|
|
||||||
<meta name="description" content="五道题国际中文教育官网首页，展示教学理念、课程概念、师资亮点与智能学习体验。" />
|
|
||||||
<link rel="stylesheet" href="assets/css/site.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-shell bg-wash">
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="container site-nav">
|
|
||||||
<a class="brand" href="index.html" aria-label="智花首页">
|
|
||||||
<img class="brand-mark" src="assets/images/logo-mark.svg" alt="" />
|
|
||||||
<div class="brand-copy"><strong>智花</strong><span>|</span><span>五道题在线教育</span></div>
|
|
||||||
</a>
|
|
||||||
<nav class="nav-links" aria-label="主导航">
|
|
||||||
<a class="nav-link current" href="index.html">首页</a>
|
|
||||||
<a class="nav-link" href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a class="nav-link" href="curriculum.html">课程体系</a>
|
|
||||||
<a class="nav-link" href="faculty.html">师资团队</a>
|
|
||||||
<a class="nav-link" href="about.html">关于我们</a>
|
|
||||||
</nav>
|
|
||||||
<div class="locale-pill">
|
|
||||||
<span>简体中文</span>
|
|
||||||
<svg viewBox="0 0 10 6" fill="none" aria-hidden="true">
|
|
||||||
<path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<button class="menu-toggle" type="button" data-menu-toggle aria-expanded="false" aria-label="打开导航菜单">
|
|
||||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
||||||
<path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="container mobile-menu" data-mobile-menu>
|
|
||||||
<a class="current" href="index.html">首页</a>
|
|
||||||
<a href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a href="curriculum.html">课程体系</a>
|
|
||||||
<a href="faculty.html">师资团队</a>
|
|
||||||
<a href="about.html">关于我们</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="hero centered">
|
|
||||||
<div class="container hero-copy">
|
|
||||||
<p class="eyebrow">理念大题</p>
|
|
||||||
<h1 class="hero-title">用中文连接世界</h1>
|
|
||||||
<p class="hero-subtitle">智花，让学习更智能。</p>
|
|
||||||
<div class="hero-actions">
|
|
||||||
<a class="btn btn-outline" href="curriculum.html">开始学习</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container split-hero">
|
|
||||||
<div class="stacked-copy">
|
|
||||||
<div class="intro-ribbon">首页内容总览</div>
|
|
||||||
<h2 class="statement">权威课程与师资，搭配智能学习体验</h2>
|
|
||||||
<p class="lead">
|
|
||||||
以国际中文教育为核心，围绕课程体系、名师团队、AI 个性化学习和多终端学习体验，建立一套清晰、稳定、可持续升级的静态展示站点。
|
|
||||||
</p>
|
|
||||||
<div class="hero-actions" style="justify-content:flex-start">
|
|
||||||
<a class="btn btn-primary" href="curriculum.html">查看完整课程体系</a>
|
|
||||||
<a class="btn btn-ghost" href="faculty.html">查看完整师资体系</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="art-panel">
|
|
||||||
<img src="assets/images/sketch/8ccfd197e95883a5800485bd794446260668decb.png" alt="课程与学习体验可视化展示" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head">
|
|
||||||
<p class="eyebrow">我们的优势（Why SmartBloom）</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid-two">
|
|
||||||
<article class="feature-card soft">
|
|
||||||
<div class="icon-wrap"><img src="assets/images/sketch/c2372a471e5be3eb7d87bf2c5a30fa458b5c897a.png" alt="" /></div>
|
|
||||||
<h3>权威课程与师资</h3>
|
|
||||||
<p>名师团队，打造科学系统的国际中文课程，覆盖 HSK 分级、技能训练和进阶路径，兼顾学习效率与文化深度。</p>
|
|
||||||
</article>
|
|
||||||
<article class="feature-card soft">
|
|
||||||
<div class="icon-wrap"><img src="assets/images/sketch/f1b84ab9a9a9c47ffa390d0bea93ab79d019625c.png" alt="" /></div>
|
|
||||||
<h3>AI 智能学习技术</h3>
|
|
||||||
<p>AI 驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。</p>
|
|
||||||
</article>
|
|
||||||
<article class="feature-card soft">
|
|
||||||
<div class="icon-wrap"><img src="assets/images/sketch/efa4288e0fad73637720bfd9ac094a67a39ed465.png" alt="" /></div>
|
|
||||||
<h3>个性化学习体验</h3>
|
|
||||||
<p>根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。</p>
|
|
||||||
</article>
|
|
||||||
<article class="feature-card soft">
|
|
||||||
<div class="icon-wrap"><img src="assets/images/sketch/bcc2546bb5ac5489aaf0a6cd2501e09da4de3570.png" alt="" /></div>
|
|
||||||
<h3>国际化学习社区</h3>
|
|
||||||
<p>全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head">
|
|
||||||
<p class="eyebrow">课程概览</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid-three">
|
|
||||||
<article class="info-card">
|
|
||||||
<h3>HSK 等级课程</h3>
|
|
||||||
<p>按照 HSK 等级精心设计，循序渐进，系统掌握中文语言能力。</p>
|
|
||||||
</article>
|
|
||||||
<article class="info-card">
|
|
||||||
<h3>技能训练与情境化学习</h3>
|
|
||||||
<p>围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。</p>
|
|
||||||
</article>
|
|
||||||
<article class="info-card">
|
|
||||||
<h3>个性化提高班</h3>
|
|
||||||
<p>根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<div class="hero-actions">
|
|
||||||
<a class="btn btn-outline" href="curriculum.html">查看完整课程体系</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="container grid-two">
|
|
||||||
<article class="feature-card headline-card">
|
|
||||||
<p class="eyebrow">师资亮点</p>
|
|
||||||
<h2 class="statement">国际中文教育名师团队倾力打造，经验丰富，专业权威。</h2>
|
|
||||||
<p class="lead">课程教学设计覆盖全领域，结合 AI 技术提供更稳定的学习反馈与更灵活的课堂支持。</p>
|
|
||||||
<a class="mini-link" href="faculty.html">查看完整师资体系</a>
|
|
||||||
</article>
|
|
||||||
<article class="feature-card">
|
|
||||||
<p class="eyebrow">学习体验</p>
|
|
||||||
<div class="art-panel photo">
|
|
||||||
<img src="assets/images/sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png" alt="学习 App 界面与使用场景展示" />
|
|
||||||
</div>
|
|
||||||
<div class="art-caption">
|
|
||||||
<strong>学习 App 使用场景</strong>
|
|
||||||
<span>练习界面 · AI 推荐路径 · 进度追踪</span>
|
|
||||||
</div>
|
|
||||||
<a class="mini-link" href="#download">开始学习</a>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact" id="download">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head">
|
|
||||||
<p class="eyebrow">下载应用</p>
|
|
||||||
<h2 class="section-title">随时开始你的中文学习</h2>
|
|
||||||
<p class="section-copy">保留设计稿中的下载入口位置，桌面端三列展开，移动端自动改为单列，便于静态部署后的直接访问与跳转替换。</p>
|
|
||||||
</div>
|
|
||||||
<div class="download-grid">
|
|
||||||
<article class="download-card">
|
|
||||||
<div class="download-meta">
|
|
||||||
<div class="download-icon"><img src="assets/images/sketch/707985b319ec1b2f40990110a1589b97e9328463.png" alt="" /></div>
|
|
||||||
<div><h3>App Store</h3><p>iPhone / iPad</p></div>
|
|
||||||
</div>
|
|
||||||
<p>适合 iOS 端学习者，保留与设计稿一致的下载入口位置，可直接替换为真实商店链接。</p>
|
|
||||||
</article>
|
|
||||||
<article class="download-card">
|
|
||||||
<div class="download-meta">
|
|
||||||
<div class="download-icon"><img src="assets/images/sketch/1efc835a38063c92536bf13de59691bb55426c59.png" alt="" /></div>
|
|
||||||
<div><h3>Google Play</h3><p>Android 商店安装</p></div>
|
|
||||||
</div>
|
|
||||||
<p>面向全球 Android 用户，支持静态页面先行交付，后续只需替换按钮地址即可上线使用。</p>
|
|
||||||
</article>
|
|
||||||
<article class="download-card">
|
|
||||||
<div class="download-meta">
|
|
||||||
<div class="download-icon"><img src="assets/images/sketch/2468a7414061f8fe2d173271cca906677b2e190d.png" alt="" /></div>
|
|
||||||
<div><h3>Download Android</h3><p>直链包下载</p></div>
|
|
||||||
</div>
|
|
||||||
<p>预留 APK 直链下载入口，与设计稿页脚下载区保持一致，方便不同渠道同步发布。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="site-footer">
|
|
||||||
<div class="container footer-main">
|
|
||||||
<div>
|
|
||||||
<h3>五道题（北京）科技有限公司</h3>
|
|
||||||
<p>地址：北京市海淀区</p>
|
|
||||||
<p>邮箱：support@fivequestions.cn</p>
|
|
||||||
<div class="social-row">
|
|
||||||
<a href="#" aria-label="微博"><svg viewBox="0 0 24 24"><path d="M10.1 20C5.77 20 2 18.02 2 14.83c0-1.67.89-3.59 2.42-5.42 2.04-2.44 4.41-3.55 5.29-2.47.4.48.32 1.31-.12 2.26-.2.43.17.31.17.31 1.85-.72 3.54-.84 4.08.16.28.52.17 1.22-.22 2.03-.16.34-.04.41.12.46 1.08.32 2.14.92 2.14 2.22 0 3.15-2.73 5.62-5.78 5.62z"/></svg></a>
|
|
||||||
<a href="#" aria-label="微信"><svg viewBox="0 0 24 24"><path d="M8.69 2.19C3.89 2.19 0 5.48 0 9.53c0 2.21 1.17 4.2 3 5.55a.59.59 0 0 1 .22.66l-.39 1.48a.33.33 0 0 0 .41.4l1.9-1.11a.86.86 0 0 1 .72-.1 10.2 10.2 0 0 0 2.84.4c.28 0 .54-.03.81-.05-.86-2.58.16-4.97 1.93-6.45 1.7-1.42 3.88-1.98 5.85-1.84-.58-3.58-4.2-6.34-8.6-6.34zM14.9 10.55c-3.7 0-6.9 2.57-6.9 5.75 0 3.19 3.2 5.7 6.9 5.7.6 0 1.19-.08 1.77-.24a.67.67 0 0 1 .56.08l1.47.86a.25.25 0 0 0 .35-.27l-.3-1.15a.46.46 0 0 1 .17-.51c1.76-1.37 2.7-3.08 2.7-4.98 0-3.18-3.21-5.75-6.9-5.75z"/></svg></a>
|
|
||||||
<a href="#" aria-label="Twitter"><svg viewBox="0 0 24 24"><path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.82l4.71 6.23z"/></svg></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>关于我们</h3>
|
|
||||||
<div class="footer-links">
|
|
||||||
<a href="teaching-philosophy.html">学习理念</a>
|
|
||||||
<a href="curriculum.html">课程体系</a>
|
|
||||||
<a href="faculty.html">师资团队</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>下载应用</h3>
|
|
||||||
<div class="footer-links">
|
|
||||||
<a href="#download">App Store</a>
|
|
||||||
<a href="#download">Google Play</a>
|
|
||||||
<a href="#download">Download Android</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container footer-bottom">© 2026 五道题（北京）科技有限公司 保留所有权利</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="assets/js/site.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
6057
package-lock.json
generated
Normal file
6057
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
15
package.json
Normal file
15
package.json
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"name": "fiveq-website",
|
||||||
|
"type": "module",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "^5.7.10",
|
||||||
|
"astro-icon": "^1.1.5",
|
||||||
|
"@iconify-json/lucide": "^1.2.32"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 355 B After Width: | Height: | Size: 355 B |
|
Before Width: | Height: | Size: 816 KiB After Width: | Height: | Size: 816 KiB |
|
Before Width: | Height: | Size: 664 KiB After Width: | Height: | Size: 664 KiB |
|
Before Width: | Height: | Size: 315 KiB After Width: | Height: | Size: 315 KiB |
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 390 KiB After Width: | Height: | Size: 390 KiB |
|
Before Width: | Height: | Size: 8.2 MiB After Width: | Height: | Size: 8.2 MiB |
|
Before Width: | Height: | Size: 352 KiB After Width: | Height: | Size: 352 KiB |
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 4.3 MiB After Width: | Height: | Size: 4.3 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 3.3 MiB After Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 4.0 MiB After Width: | Height: | Size: 4.0 MiB |
|
Before Width: | Height: | Size: 3.8 MiB After Width: | Height: | Size: 3.8 MiB |
|
Before Width: | Height: | Size: 408 KiB After Width: | Height: | Size: 408 KiB |
|
Before Width: | Height: | Size: 630 KiB After Width: | Height: | Size: 630 KiB |
|
Before Width: | Height: | Size: 266 KiB After Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 485 KiB After Width: | Height: | Size: 485 KiB |
|
Before Width: | Height: | Size: 288 KiB After Width: | Height: | Size: 288 KiB |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 241 KiB |
|
Before Width: | Height: | Size: 13 MiB After Width: | Height: | Size: 13 MiB |
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 3.0 MiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 270 KiB After Width: | Height: | Size: 270 KiB |
|
Before Width: | Height: | Size: 258 KiB After Width: | Height: | Size: 258 KiB |
53
src/components/Footer.astro
Normal file
53
src/components/Footer.astro
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* 全站页脚组件
|
||||||
|
* 包含公司信息、导航链接和社交媒体图标
|
||||||
|
*/
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container footer-main">
|
||||||
|
<div>
|
||||||
|
<h3>五道题（北京）科技有限公司</h3>
|
||||||
|
<p>地址：北京市海淀区</p>
|
||||||
|
<p>邮箱：support@fivequestions.cn</p>
|
||||||
|
<div class="social-row">
|
||||||
|
<!-- 微博（Lucide 无对应图标，保留内联 SVG） -->
|
||||||
|
<a href="#" aria-label="微博">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M10.1 20C5.77 20 2 18.02 2 14.83c0-1.67.89-3.59 2.42-5.42 2.04-2.44 4.41-3.55 5.29-2.47.4.48.32 1.31-.12 2.26-.2.43.17.31.17.31 1.85-.72 3.54-.84 4.08.16.28.52.17 1.22-.22 2.03-.16.34-.04.41.12.46 1.08.32 2.14.92 2.14 2.22 0 3.15-2.73 5.62-5.78 5.62z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<!-- 微信（Lucide 无对应图标，保留内联 SVG） -->
|
||||||
|
<a href="#" aria-label="微信">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M8.69 2.19C3.89 2.19 0 5.48 0 9.53c0 2.21 1.17 4.2 3 5.55a.59.59 0 0 1 .22.66l-.39 1.48a.33.33 0 0 0 .41.4l1.9-1.11a.86.86 0 0 1 .72-.1 10.2 10.2 0 0 0 2.84.4c.28 0 .54-.03.81-.05-.86-2.58.16-4.97 1.93-6.45 1.7-1.42 3.88-1.98 5.85-1.84-.58-3.58-4.2-6.34-8.6-6.34zM14.9 10.55c-3.7 0-6.9 2.57-6.9 5.75 0 3.19 3.2 5.7 6.9 5.7.6 0 1.19-.08 1.77-.24a.67.67 0 0 1 .56.08l1.47.86a.25.25 0 0 0 .35-.27l-.3-1.15a.46.46 0 0 1 .17-.51c1.76-1.37 2.7-3.08 2.7-4.98 0-3.18-3.21-5.75-6.9-5.75z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<!-- Twitter / X -->
|
||||||
|
<a href="#" aria-label="Twitter">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.82l4.71 6.23z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>关于我们</h3>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="/teaching-philosophy">学习理念</a>
|
||||||
|
<a href="/curriculum">课程体系</a>
|
||||||
|
<a href="/faculty">师资团队</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>下载应用</h3>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="/#download">App Store</a>
|
||||||
|
<a href="/#download">Google Play</a>
|
||||||
|
<a href="/#download">Download Android</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container footer-bottom">© 2026 五道题（北京）科技有限公司 保留所有权利</div>
|
||||||
|
</footer>
|
||||||
65
src/components/Header.astro
Normal file
65
src/components/Header.astro
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
---
|
||||||
|
import { Icon } from 'astro-icon/components';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
currentPath: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { currentPath } = Astro.props;
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ label: '首页', href: '/' },
|
||||||
|
{ label: '教学理念', href: '/teaching-philosophy' },
|
||||||
|
{ label: '课程体系', href: '/curriculum' },
|
||||||
|
{ label: '师资团队', href: '/faculty' },
|
||||||
|
{ label: '关于我们', href: '/about' },
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container site-nav">
|
||||||
|
<a class="brand" href="/" aria-label="智花首页">
|
||||||
|
<img class="brand-mark" src="/images/logo-mark.svg" alt="" />
|
||||||
|
<div class="brand-copy">
|
||||||
|
<strong>智花</strong><span>|</span><span>五道题在线教育</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="nav-links" aria-label="主导航">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<a
|
||||||
|
class:list={['nav-link', { current: currentPath === item.href }]}
|
||||||
|
href={item.href}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="locale-pill">
|
||||||
|
<span>简体中文</span>
|
||||||
|
<Icon name="lucide:chevron-down" size={10} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="menu-toggle"
|
||||||
|
type="button"
|
||||||
|
data-menu-toggle
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="打开导航菜单"
|
||||||
|
>
|
||||||
|
<Icon name="lucide:menu" size={22} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container mobile-menu" data-mobile-menu>
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<a
|
||||||
|
class:list={[{ current: currentPath === item.href }]}
|
||||||
|
href={item.href}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
45
src/layouts/BaseLayout.astro
Normal file
45
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
---
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import '../styles/global.css';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
/** 当前激活的导航项路径，如 "/" "/about" 等 */
|
||||||
|
currentPath: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, description, currentPath } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>{title}</title>
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/images/logo-mark.svg" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-shell bg-wash">
|
||||||
|
<Header currentPath={currentPath} />
|
||||||
|
<main>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
<!-- 移动端菜单切换 -->
|
||||||
|
<script>
|
||||||
|
const toggle = document.querySelector("[data-menu-toggle]");
|
||||||
|
const menu = document.querySelector("[data-mobile-menu]");
|
||||||
|
if (toggle && menu) {
|
||||||
|
toggle.addEventListener("click", () => {
|
||||||
|
const isOpen = menu.classList.toggle("is-open");
|
||||||
|
toggle.setAttribute("aria-expanded", String(isOpen));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
90
src/pages/about.astro
Normal file
90
src/pages/about.astro
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* 关于我们 - 严格按设计稿还原
|
||||||
|
* 结构：Hero文字 → 全宽Hero图 → 企业愿景 → 我们的使命（双栏）→ 品牌故事（双栏反向）→ 团队与合作（双栏）
|
||||||
|
*/
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
title="关于我们 | 智花 · 五道题在线教育"
|
||||||
|
description="了解五道题国际中文教育的企业介绍、企业愿景、使命、品牌故事与团队合作信息。"
|
||||||
|
currentPath="/about"
|
||||||
|
>
|
||||||
|
<!-- Hero 文字区 -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="hero-title">关于我们</h1>
|
||||||
|
<p class="hero-subtitle" style="margin-left:0;max-width:720px">
|
||||||
|
智花（五道题北京科技有限公司）专注于国际中文教育创新，依托国际中文教学资源与研究力量，结合人工智能技术，为全球学习者提供智能化、个性化的中文学习体验。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 全宽 Hero 图片 -->
|
||||||
|
<section class="section compact" style="padding-top:0">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-image" style="border-radius:0;box-shadow:none">
|
||||||
|
<img src="/images/sketch/6de9aa9e5d23da3009d3776b55c3b84c02a5aaa2.png" alt="企业愿景视觉展示" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 企业愿景 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">企业愿景</h2>
|
||||||
|
<p class="section-copy">
|
||||||
|
智慧教育，连接未来。<br />
|
||||||
|
我们致力于让每一位学习者，都能通过智能技术获得更高效、更个性化、更有温度的学习体验。以科技赋能教育创新，推动全球学习方式的智能化变革。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 我们的使命：文字左，图片右 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card">
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<h2>我们的使命</h2>
|
||||||
|
<p>以科技创新驱动中文教育发展，通过智能出题、语料检索与个性化教学，构建面向未来的智慧学习体系。</p>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-img photo">
|
||||||
|
<img src="/images/sketch/165dc7c938317262993013e2bf7108b0d8429d1e.png" alt="现代办公空间" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 品牌故事：图片左，文字右 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card reverse">
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<h2>品牌故事</h2>
|
||||||
|
<p>"智花"寓意智慧与文化的绽放。它源于我们在国际中文教育领域多年的研究与实践，融合语言学、教育学与人工智能，致力于让中文学习更加智能、有趣、高效。</p>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-img photo">
|
||||||
|
<img src="/images/sketch/d47cf2285609fda9339d16a5dae947ac4f22416e.png" alt="品牌故事" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 团队与合作：文字左，图片右 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card">
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<h2>团队与合作</h2>
|
||||||
|
<p>我们拥有跨学科的专业团队，汇聚语言学、教育技术、人工智能等领域的研究者与教师，并与多家教育机构、高校及技术公司建立合作关系。</p>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-img photo">
|
||||||
|
<img src="/images/sketch/7cdc25ddd57dfe8b8394e8b3ed7ffc28225b6471.png" alt="团队合作" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
83
src/pages/curriculum.astro
Normal file
83
src/pages/curriculum.astro
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* 课程体系 - 严格按设计稿还原
|
||||||
|
* 结构：Hero → 4个交替图文全宽卡片（HSK / 技能训练 / 情境化学习 / 进阶课程）
|
||||||
|
*/
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
title="课程体系 | 智花 · 五道题在线教育"
|
||||||
|
description="展示五道题国际中文教育课程体系，包括 HSK 等级课程、技能训练、情境化学习与进阶课程。"
|
||||||
|
currentPath="/curriculum"
|
||||||
|
>
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="hero-title">课程体系</h1>
|
||||||
|
<p class="hero-subtitle" style="margin-left:0;max-width:720px">
|
||||||
|
智花课程体系按照 HSK 等级科学设计，覆盖听说读写各项技能，同时提供情境化练习与个性化提高班，让每位中文学习者都能高效成长。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HSK 等级课程：文字左，图片右 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card">
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<h2>HSK等级课程</h2>
|
||||||
|
<p>按照 HSK 等级精心设计，循序渐进掌握中文能力</p>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-img">
|
||||||
|
<img src="/images/sketch/67a807fec1b784684e1a026f0ee01f5072a571c7.png" alt="HSK 课程结构" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 技能训练：图片左，文字右 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card reverse">
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<h2>技能训练</h2>
|
||||||
|
<p>专注听、说、读、写四大核心技能，提升综合语言能力</p>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-img">
|
||||||
|
<img src="/images/sketch/9286e6b5a91d38938547ebf3909e5d6886e79899.png" alt="技能训练" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 情境化学习：文字左，图片右 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card">
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<h2>情境化学习</h2>
|
||||||
|
<p>通过真实情境和生活场景模拟，让学习更主动、实用</p>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-img">
|
||||||
|
<img src="/images/sketch/eb55da7436f1cf69f9ce2a44234033426361d80d.png" alt="情境化学习" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 进阶课程：图片左，文字右 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card reverse">
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<h2>进阶课程</h2>
|
||||||
|
<p>根据学员水平和学习意愿组织，提高语言能力和实际竞争力</p>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-img">
|
||||||
|
<img src="/images/sketch/3fb13b6b14a9c9c38c19f57b131e9dbb84e9d2a8.png" alt="进阶课程" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
110
src/pages/faculty.astro
Normal file
110
src/pages/faculty.astro
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* 师资团队 - 严格按设计稿还原
|
||||||
|
* 结构：Hero（左文右图）→ 团队理念 → 名师风采（4列简洁卡片）→ 教学优势（全宽卡片）→ 诚邀加盟
|
||||||
|
*/
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
title="师资团队 | 智花 · 五道题在线教育"
|
||||||
|
description="展示五道题国际中文教育师资团队、团队理念、名师风采、教学优势与加入我们信息。"
|
||||||
|
currentPath="/faculty"
|
||||||
|
>
|
||||||
|
<!-- Hero：左文右图（地球仪插画） -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container hero-split">
|
||||||
|
<div class="hero-split-text">
|
||||||
|
<h1 class="hero-title">教师团队</h1>
|
||||||
|
<p class="hero-subtitle" style="margin-left:0;max-width:520px">
|
||||||
|
智花教师团队由国内外知名院校的专家与一线教师组成，致力于将专业教学与智能技术融合，为学习者提供高质量的国际中文教育。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-split-art">
|
||||||
|
<img src="/images/sketch/8f23517eccd3e10f8cdc63887d23cd0aaaa75181.png" alt="全球教育" style="max-width:480px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 团队理念 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">团队理念</h2>
|
||||||
|
<p class="section-copy">
|
||||||
|
我们相信语言学习不仅是知识的积累，更是文化与交流的桥梁。<br />
|
||||||
|
智花教师团队以专业、创新与温度为核心理念，让中文教学更生动、更智能、更具全球视野。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 名师风采：4列简洁卡片（仅头像+姓名+院校） -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">名师风采</h2>
|
||||||
|
</div>
|
||||||
|
<div class="teacher-grid">
|
||||||
|
<article class="teacher-card minimal">
|
||||||
|
<div class="portrait">
|
||||||
|
<img src="/images/sketch/96160d0c2ec385f93e20c2798a0398a85ee806b8.png" alt="张无忌" />
|
||||||
|
</div>
|
||||||
|
<h3>张无忌</h3>
|
||||||
|
<div class="teacher-meta">香港中文大学</div>
|
||||||
|
</article>
|
||||||
|
<article class="teacher-card minimal">
|
||||||
|
<div class="portrait">
|
||||||
|
<img src="/images/sketch/29f4f341ce881e60945dfb6b948c94e96cb42111.png" alt="白眉大侠" />
|
||||||
|
</div>
|
||||||
|
<h3>白眉大侠</h3>
|
||||||
|
<div class="teacher-meta">北京外国语大学</div>
|
||||||
|
</article>
|
||||||
|
<article class="teacher-card minimal">
|
||||||
|
<div class="portrait">
|
||||||
|
<img src="/images/sketch/b9d0d9f11f269b89ff4d1b63e02b9d4f96443f92.png" alt="路飞" />
|
||||||
|
</div>
|
||||||
|
<h3>路飞</h3>
|
||||||
|
<div class="teacher-meta">北京外国语大学</div>
|
||||||
|
</article>
|
||||||
|
<article class="teacher-card minimal">
|
||||||
|
<div class="portrait">
|
||||||
|
<img src="/images/sketch/0c94065a7e790aea48c302d1f437e6a09cfe0573.png" alt="扫地僧" />
|
||||||
|
</div>
|
||||||
|
<h3>扫地僧</h3>
|
||||||
|
<div class="teacher-meta">北京外国语大学</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 教学优势：全宽卡片，文字左图片右 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card">
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<p class="eyebrow">教学优势</p>
|
||||||
|
<h2>教学经验与智能支持并行</h2>
|
||||||
|
<p>结合丰富教学经验与 AI 智能支持，教师团队能够精准评估学习水平，提供个性化指导，帮助学习者高效提升。</p>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-img">
|
||||||
|
<img src="/images/sketch/eb55da7436f1cf69f9ce2a44234033426361d80d.png" alt="AI 智能教学" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 诚邀加盟：居中文案 + 按钮 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container" style="text-align:center">
|
||||||
|
<h2 class="section-title">诚邀加盟</h2>
|
||||||
|
<p class="section-copy">
|
||||||
|
智花教师团队正在不断壮大，我们诚邀更多国际中文教育专业人才加入。<br />
|
||||||
|
共同建设开放、创新的智慧教学生态。
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a class="btn btn-outline" href="/about">加入我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
132
src/pages/index.astro
Normal file
132
src/pages/index.astro
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* 首页 - 严格按设计稿还原
|
||||||
|
* 结构：Hero（左文右图+引号）→ 我们的优势（Bento）→ 课程概念（3列带图标）→ 师资亮点+学习体验（双栏）
|
||||||
|
*/
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
import { Icon } from 'astro-icon/components';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
title="首页 | 智花 · 五道题在线教育"
|
||||||
|
description="五道题国际中文教育官网首页，展示教学理念、课程概念、师资亮点与智能学习体验。"
|
||||||
|
currentPath="/"
|
||||||
|
>
|
||||||
|
<!-- Hero：左文右图，装饰引号，无按钮 -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container hero-split">
|
||||||
|
<div class="hero-split-text">
|
||||||
|
<h1 class="hero-title">用中文连接世界</h1>
|
||||||
|
<p class="hero-subtitle" style="margin-left:0;color:var(--brand)">智花，让学习更智能</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-split-art" style="position:relative">
|
||||||
|
<span class="deco-quote top-right">"</span>
|
||||||
|
<img src="/images/sketch/ead4c466c86cafe8f76435d59c15ac159aed5cc3.png" alt="用中文连接世界" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 我们的优势 - Bento 布局 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">我们的优势</h2>
|
||||||
|
</div>
|
||||||
|
<div class="bento-grid">
|
||||||
|
<!-- 左侧大图 -->
|
||||||
|
<div class="bento-hero">
|
||||||
|
<div class="art-panel photo" style="height:100%">
|
||||||
|
<img src="/images/sketch/8ccfd197e95883a5800485bd794446260668decb.png" alt="课程与学习体验可视化展示" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 右侧文字卡片 -->
|
||||||
|
<article class="bento-side feature-card soft">
|
||||||
|
<h3>权威课程与师资</h3>
|
||||||
|
<p>名师团队，打造科学系统的国际中文课程，覆盖 HSK 分级、技能训练和进阶路径，兼顾学习效率与文化深度。</p>
|
||||||
|
</article>
|
||||||
|
<!-- 下方三列卡片：大缩略图 + 标题 + 描述 -->
|
||||||
|
<div class="bento-row">
|
||||||
|
<article class="feature-card soft card-with-thumb">
|
||||||
|
<div class="card-thumb">
|
||||||
|
<img src="/images/sketch/f1b84ab9a9a9c47ffa390d0bea93ab79d019625c.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<h3>AI智能学习技术</h3>
|
||||||
|
<p>AI 驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card soft card-with-thumb">
|
||||||
|
<div class="card-thumb">
|
||||||
|
<img src="/images/sketch/efa4288e0fad73637720bfd9ac094a67a39ed465.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<h3>个性化学习体验</h3>
|
||||||
|
<p>根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card soft card-with-thumb">
|
||||||
|
<div class="card-thumb">
|
||||||
|
<img src="/images/sketch/bcc2546bb5ac5489aaf0a6cd2501e09da4de3570.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<h3>国际化学习社区</h3>
|
||||||
|
<p>全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 课程概念：带 Lucide 图标的标题 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">课程概念</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid-three">
|
||||||
|
<article class="info-card">
|
||||||
|
<div class="info-card-title">
|
||||||
|
<Icon name="lucide:book-text" />
|
||||||
|
<span>HSK 等级课程</span>
|
||||||
|
</div>
|
||||||
|
<p>按照 HSK 等级精心设计，循序渐进，系统掌握中文语言能力。</p>
|
||||||
|
</article>
|
||||||
|
<article class="info-card">
|
||||||
|
<div class="info-card-title">
|
||||||
|
<Icon name="lucide:message-square-text" />
|
||||||
|
<span>技能训练与情境化学习</span>
|
||||||
|
</div>
|
||||||
|
<p>围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。</p>
|
||||||
|
</article>
|
||||||
|
<article class="info-card">
|
||||||
|
<div class="info-card-title">
|
||||||
|
<Icon name="lucide:user-round-check" />
|
||||||
|
<span>个性化提高班</span>
|
||||||
|
</div>
|
||||||
|
<p>根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a class="btn btn-outline" href="/curriculum">查看完整课程体系</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 师资亮点 + 学习体验 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container grid-two">
|
||||||
|
<article class="feature-card headline-card">
|
||||||
|
<p class="eyebrow">师资亮点</p>
|
||||||
|
<h2 class="statement">国际中文教育名师团队倾力打造，经验丰富，专业权威。</h2>
|
||||||
|
<p class="lead">课程教学设计覆盖全领域，结合 AI 技术提供更稳定的学习反馈与更灵活的课堂支持。</p>
|
||||||
|
<a class="mini-link" href="/faculty">查看完整师资体系</a>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<p class="eyebrow">学习体验</p>
|
||||||
|
<div class="art-panel photo">
|
||||||
|
<img src="/images/sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png" alt="学习 App 界面与使用场景展示" />
|
||||||
|
</div>
|
||||||
|
<div class="art-caption">
|
||||||
|
<strong>学习 App 使用场景</strong>
|
||||||
|
<span>练习界面 · AI 推荐路径 · 进度追踪</span>
|
||||||
|
</div>
|
||||||
|
<a class="mini-link" href="#download">开始学习</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
126
src/pages/teaching-philosophy.astro
Normal file
126
src/pages/teaching-philosophy.astro
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* 教学理念 - 严格按设计稿还原
|
||||||
|
* 结构：Hero（蓝色渐变背景+右侧插画）→ 教育目标（双栏：左双图叠放+右文字）→ 教学方法（4圆形图标）→ 教学特色（3图片卡简短说明）→ 教育价值观（标签）
|
||||||
|
*/
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
title="教学理念 | 智花 · 五道题在线教育"
|
||||||
|
description="展示五道题国际中文教育的教学理念、教育目标、教学方法、教学特色与教育价值观。"
|
||||||
|
currentPath="/teaching-philosophy"
|
||||||
|
>
|
||||||
|
<!-- Hero：蓝色渐变背景 + 右侧插画 -->
|
||||||
|
<section class="hero philosophy-hero">
|
||||||
|
<div class="container hero-split">
|
||||||
|
<div class="hero-split-text">
|
||||||
|
<h1 class="hero-title">教学理念</h1>
|
||||||
|
<p class="hero-subtitle" style="margin-left:0">用中文连接世界，开启智慧学习新时代</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-split-art">
|
||||||
|
<img src="/images/sketch/53f5e9c4751757b91531fd260cf01f6eff8e1278.png" alt="AI 智慧学习" style="max-width:480px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 教育目标：双栏（左双图+右文字） -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-card">
|
||||||
|
<div class="edu-goal-images">
|
||||||
|
<div class="goal-photo">
|
||||||
|
<img src="/images/sketch/d5c638f4b093f233101f28a2872f10f3172a3ac4.png" alt="互动学习场景" />
|
||||||
|
</div>
|
||||||
|
<div class="goal-icon">
|
||||||
|
<img src="/images/sketch/3cfbe88194be43bcc0ab7a8e987c4d7eaad93ef5.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alt-card-text">
|
||||||
|
<p class="eyebrow" style="margin-bottom:16px">教育目标</p>
|
||||||
|
<h2>帮助学习者掌握语言能力<br />理解中华文化</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 教学方法：4 个圆形图标 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">教学方法</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid-four">
|
||||||
|
<div class="method-item">
|
||||||
|
<div class="method-icon">
|
||||||
|
<img src="/images/sketch/1abbe19f0bf338ca5914e4918c80e2a0166fb3c6.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<span class="method-label">HSK分级课程</span>
|
||||||
|
</div>
|
||||||
|
<div class="method-item">
|
||||||
|
<div class="method-icon">
|
||||||
|
<img src="/images/sketch/9286e6b5a91d38938547ebf3909e5d6886e79899.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<span class="method-label">听、说、读、写技能训练</span>
|
||||||
|
</div>
|
||||||
|
<div class="method-item">
|
||||||
|
<div class="method-icon">
|
||||||
|
<img src="/images/sketch/3cfbe88194be43bcc0ab7a8e987c4d7eaad93ef5.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<span class="method-label">情境化学习</span>
|
||||||
|
</div>
|
||||||
|
<div class="method-item">
|
||||||
|
<div class="method-icon">
|
||||||
|
<img src="/images/sketch/abfcce4aed0c6b426ced3e4a00ca599ddb0bc080.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<span class="method-label">AI个性化推荐</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 教学特色：3 个图片卡片（简短说明） -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">教学特色</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid-three">
|
||||||
|
<article class="feature-thumb-card">
|
||||||
|
<img class="thumb-img" src="/images/sketch/d5c638f4b093f233101f28a2872f10f3172a3ac4.png" alt="互动与沉浸" />
|
||||||
|
<div class="thumb-caption">体现学习过程的互动性和沉浸感</div>
|
||||||
|
</article>
|
||||||
|
<article class="feature-thumb-card">
|
||||||
|
<img class="thumb-img" src="/images/sketch/4f0c158d4abd3ded7bc18fb50aedeedc77691076.png" alt="强调个性化" />
|
||||||
|
<div class="thumb-caption">提供因材施教、因需教个性化</div>
|
||||||
|
</article>
|
||||||
|
<article class="feature-thumb-card">
|
||||||
|
<img class="thumb-img" src="/images/sketch/e008645eb4e8bd0b78d8a748abedf9702a1944c0.png" alt="高效可追踪" />
|
||||||
|
<div class="thumb-caption">高效、有趣、可追踪的学习体验</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 教育价值观：标签行 -->
|
||||||
|
<section class="section compact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">教育价值观</h2>
|
||||||
|
</div>
|
||||||
|
<div class="value-list" style="justify-content:center;margin-top:0">
|
||||||
|
<span>专业权威</span>
|
||||||
|
<span>智能科技</span>
|
||||||
|
<span>国际化视野</span>
|
||||||
|
<span>以学习者为中心</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 教学理念 Hero 蓝色渐变背景（更醒目） */
|
||||||
|
.philosophy-hero {
|
||||||
|
background: linear-gradient(145deg, rgba(122, 160, 255, 0.12) 0%, rgba(238, 243, 255, 0.9) 40%, rgba(122, 160, 255, 0.08) 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -56,6 +56,7 @@ button {
|
|||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 页面外壳 ========== */
|
||||||
.page-shell {
|
.page-shell {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow-x: clip;
|
overflow-x: clip;
|
||||||
@@ -66,6 +67,7 @@ button {
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 粘性导航栏 ========== */
|
||||||
.site-header {
|
.site-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -183,6 +185,7 @@ button {
|
|||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
box-shadow: 0 8px 24px rgba(49, 50, 56, 0.08);
|
box-shadow: 0 8px 24px rgba(49, 50, 56, 0.08);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu {
|
.mobile-menu {
|
||||||
@@ -207,6 +210,7 @@ button {
|
|||||||
color: var(--brand-strong);
|
color: var(--brand-strong);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== Hero 区域 ========== */
|
||||||
.hero {
|
.hero {
|
||||||
padding: 92px 0 60px;
|
padding: 92px 0 60px;
|
||||||
}
|
}
|
||||||
@@ -253,6 +257,7 @@ button {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 按钮 ========== */
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -266,6 +271,7 @@ button {
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
|
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
@@ -290,6 +296,7 @@ button {
|
|||||||
color: var(--muted-strong);
|
color: var(--muted-strong);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 通用区域 ========== */
|
||||||
.section {
|
.section {
|
||||||
padding: 122px 0;
|
padding: 122px 0;
|
||||||
}
|
}
|
||||||
@@ -319,6 +326,7 @@ button {
|
|||||||
line-height: 1.95;
|
line-height: 1.95;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 分栏布局 ========== */
|
||||||
.split-hero,
|
.split-hero,
|
||||||
.split-section {
|
.split-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -345,6 +353,7 @@ button {
|
|||||||
line-height: 1.95;
|
line-height: 1.95;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 图片面板 ========== */
|
||||||
.art-panel {
|
.art-panel {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: var(--radius-xl);
|
border-radius: var(--radius-xl);
|
||||||
@@ -388,21 +397,7 @@ button {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-ribbon {
|
/* ========== 网格系统 ========== */
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 22px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-two {
|
.grid-two {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
@@ -415,6 +410,13 @@ button {
|
|||||||
gap: 30px;
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-four {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 卡片通用 ========== */
|
||||||
.feature-card,
|
.feature-card,
|
||||||
.info-card,
|
.info-card,
|
||||||
.teacher-card,
|
.teacher-card,
|
||||||
@@ -472,6 +474,7 @@ button {
|
|||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 图标容器 ========== */
|
||||||
.icon-wrap {
|
.icon-wrap {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -488,6 +491,7 @@ button {
|
|||||||
height: 34px;
|
height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 特殊卡片变体 ========== */
|
||||||
.headline-card {
|
.headline-card {
|
||||||
padding: 44px;
|
padding: 44px;
|
||||||
}
|
}
|
||||||
@@ -515,6 +519,7 @@ button {
|
|||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 视觉堆叠 ========== */
|
||||||
.visual-stack {
|
.visual-stack {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
@@ -532,6 +537,7 @@ button {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 图片说明 ========== */
|
||||||
.art-caption {
|
.art-caption {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -553,29 +559,71 @@ button {
|
|||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline {
|
/* ========== 标签和值列表 ========== */
|
||||||
display: grid;
|
.pill-list,
|
||||||
gap: 28px;
|
.value-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 14px;
|
||||||
|
margin-top: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-card {
|
.pill-list span,
|
||||||
display: grid;
|
.value-list span {
|
||||||
grid-template-columns: 200px minmax(0, 1fr);
|
display: inline-flex;
|
||||||
gap: 28px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 0 18px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-tag {
|
/* ========== Ribbon 标签 ========== */
|
||||||
color: var(--accent);
|
.intro-ribbon {
|
||||||
font-size: 18px;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-card .statement {
|
/* ========== CTA 横幅 ========== */
|
||||||
font-size: clamp(24px, 3vw, 42px);
|
.cta-band {
|
||||||
|
padding: 42px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cta-band h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(28px, 4vw, 42px);
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-band p {
|
||||||
|
max-width: 760px;
|
||||||
|
margin: 18px auto 0;
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-band .hero-actions {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 教师卡片 ========== */
|
||||||
.teacher-grid {
|
.teacher-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
@@ -584,6 +632,7 @@ button {
|
|||||||
|
|
||||||
.teacher-card {
|
.teacher-card {
|
||||||
padding: 22px;
|
padding: 22px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.teacher-card .portrait {
|
.teacher-card .portrait {
|
||||||
@@ -620,61 +669,7 @@ button {
|
|||||||
line-height: 1.85;
|
line-height: 1.85;
|
||||||
}
|
}
|
||||||
|
|
||||||
.teacher-note {
|
/* ========== 下载区 ========== */
|
||||||
margin: 0 auto 34px;
|
|
||||||
max-width: 840px;
|
|
||||||
color: var(--muted);
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill-list,
|
|
||||||
.value-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 14px;
|
|
||||||
margin-top: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill-list span,
|
|
||||||
.value-list span {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 42px;
|
|
||||||
padding: 0 18px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
color: var(--muted-strong);
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-band {
|
|
||||||
padding: 42px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-band h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: clamp(28px, 4vw, 42px);
|
|
||||||
line-height: 1.25;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-band p {
|
|
||||||
max-width: 760px;
|
|
||||||
margin: 18px auto 0;
|
|
||||||
color: var(--muted-strong);
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.95;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-band .hero-actions {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-grid {
|
.download-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
@@ -707,6 +702,7 @@ button {
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 页脚 ========== */
|
||||||
.site-footer {
|
.site-footer {
|
||||||
margin-top: 120px;
|
margin-top: 120px;
|
||||||
background: var(--footer);
|
background: var(--footer);
|
||||||
@@ -768,6 +764,7 @@ button {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 背景装饰 ========== */
|
||||||
.bg-wash {
|
.bg-wash {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@@ -787,6 +784,309 @@ button {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== Bento 网格（首页"我们的优势"） ========== */
|
||||||
|
.bento-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid .bento-hero {
|
||||||
|
grid-row: 1 / 2;
|
||||||
|
grid-column: 1 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid .bento-side {
|
||||||
|
grid-row: 1 / 2;
|
||||||
|
grid-column: 2 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid .bento-row {
|
||||||
|
grid-row: 2 / 3;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 交替图文卡片（课程体系等） ========== */
|
||||||
|
.alt-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
gap: 0;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid rgba(216, 221, 232, 0.85);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card.reverse {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card.reverse > * {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card-text {
|
||||||
|
padding: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card-text h2 {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
font-size: clamp(24px, 3vw, 36px);
|
||||||
|
line-height: 1.25;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card-text p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card-img {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px;
|
||||||
|
min-height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card-img img {
|
||||||
|
max-width: 260px;
|
||||||
|
max-height: 220px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card-img.photo {
|
||||||
|
padding: 0;
|
||||||
|
min-height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card-img.photo img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: none;
|
||||||
|
max-height: none;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 圆形图标项（教学方法） ========== */
|
||||||
|
.method-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-icon {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(180deg, rgba(122, 160, 255, 0.12), rgba(122, 160, 255, 0.03));
|
||||||
|
border: 1px solid rgba(216, 221, 232, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-icon img {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 全宽 Hero 图片 ========== */
|
||||||
|
.hero-image {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 分栏 Hero（左文右图） ========== */
|
||||||
|
.hero-split {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
gap: 48px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 80px 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-split-text {
|
||||||
|
max-width: 560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-split-art {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-split-art img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 装饰引号 ========== */
|
||||||
|
.deco-quote {
|
||||||
|
position: absolute;
|
||||||
|
color: var(--brand);
|
||||||
|
opacity: 0.15;
|
||||||
|
font-size: 120px;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deco-quote.top-right {
|
||||||
|
top: -20px;
|
||||||
|
right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 带缩略图的卡片（首页"我们的优势"底部3卡片） ========== */
|
||||||
|
.card-with-thumb {
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-with-thumb .card-thumb {
|
||||||
|
padding: 28px 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(180deg, #f8f9fd, #edf1ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-with-thumb .card-thumb img {
|
||||||
|
max-height: 160px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-with-thumb h3 {
|
||||||
|
padding: 20px 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-with-thumb p {
|
||||||
|
padding: 0 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 信息卡片图标标题（课程概念） ========== */
|
||||||
|
.info-card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.22;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card-title svg,
|
||||||
|
.info-card-title [data-icon] {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
color: var(--brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 简洁教师卡片（无边框阴影） ========== */
|
||||||
|
.teacher-card.minimal {
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-card.minimal h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-card.minimal .teacher-meta {
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 教育目标双图叠放 ========== */
|
||||||
|
.edu-goal-images {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.2fr 0.8fr;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: end;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-goal-images .goal-photo {
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-goal-images .goal-photo img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-goal-images .goal-icon {
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-goal-images .goal-icon img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 教学特色简洁卡片 ========== */
|
||||||
|
.feature-thumb-card {
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid rgba(216, 221, 232, 0.85);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-thumb-card .thumb-img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 10;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-thumb-card .thumb-caption {
|
||||||
|
padding: 16px 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 响应式 ========== */
|
||||||
@media (max-width: 1180px) {
|
@media (max-width: 1180px) {
|
||||||
.site-nav {
|
.site-nav {
|
||||||
min-height: 88px;
|
min-height: 88px;
|
||||||
@@ -804,10 +1104,10 @@ button {
|
|||||||
.split-hero,
|
.split-hero,
|
||||||
.split-section,
|
.split-section,
|
||||||
.grid-three,
|
.grid-three,
|
||||||
|
.grid-four,
|
||||||
.teacher-grid,
|
.teacher-grid,
|
||||||
.download-grid,
|
.download-grid,
|
||||||
.footer-main,
|
.footer-main {
|
||||||
.timeline-card {
|
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -816,12 +1116,43 @@ button {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-card {
|
.hero-split {
|
||||||
gap: 18px;
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-tag {
|
.hero-split-text {
|
||||||
font-size: 15px;
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid .bento-hero,
|
||||||
|
.bento-grid .bento-side {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid .bento-hero {
|
||||||
|
grid-row: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid .bento-side {
|
||||||
|
grid-row: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid .bento-row {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card.reverse {
|
||||||
|
direction: ltr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -838,6 +1169,10 @@ button {
|
|||||||
padding: 64px 0 32px;
|
padding: 64px 0 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero-split {
|
||||||
|
padding: 48px 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
padding: 82px 0;
|
padding: 82px 0;
|
||||||
}
|
}
|
||||||
@@ -868,7 +1203,26 @@ button {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alt-card-text {
|
||||||
|
padding: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card-img {
|
||||||
|
padding: 24px;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
margin-top: 82px;
|
margin-top: 82px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.method-icon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-icon img {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>教学理念 | 智花 · 五道题在线教育</title>
|
|
||||||
<meta name="description" content="展示五道题国际中文教育的教学理念、教育目标、教学方法、教学特色与教育价值观。" />
|
|
||||||
<link rel="stylesheet" href="assets/css/site.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-shell bg-wash">
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="container site-nav">
|
|
||||||
<a class="brand" href="index.html" aria-label="智花首页">
|
|
||||||
<img class="brand-mark" src="assets/images/logo-mark.svg" alt="" />
|
|
||||||
<div class="brand-copy"><strong>智花</strong><span>|</span><span>五道题在线教育</span></div>
|
|
||||||
</a>
|
|
||||||
<nav class="nav-links" aria-label="主导航">
|
|
||||||
<a class="nav-link" href="index.html">首页</a>
|
|
||||||
<a class="nav-link current" href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a class="nav-link" href="curriculum.html">课程体系</a>
|
|
||||||
<a class="nav-link" href="faculty.html">师资团队</a>
|
|
||||||
<a class="nav-link" href="about.html">关于我们</a>
|
|
||||||
</nav>
|
|
||||||
<div class="locale-pill"><span>简体中文</span></div>
|
|
||||||
<button class="menu-toggle" type="button" data-menu-toggle aria-expanded="false" aria-label="打开导航菜单">
|
|
||||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="container mobile-menu" data-mobile-menu>
|
|
||||||
<a href="index.html">首页</a>
|
|
||||||
<a class="current" href="teaching-philosophy.html">教学理念</a>
|
|
||||||
<a href="curriculum.html">课程体系</a>
|
|
||||||
<a href="faculty.html">师资团队</a>
|
|
||||||
<a href="about.html">关于我们</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="hero centered">
|
|
||||||
<div class="container hero-copy">
|
|
||||||
<p class="eyebrow">教学理念</p>
|
|
||||||
<p class="hero-subtitle" style="margin-top:0">用中文连接世界，开启智慧学习新时代</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head"><p class="eyebrow">教育目标</p></div>
|
|
||||||
<article class="feature-card headline-card">
|
|
||||||
<h1 class="statement">帮助学习者掌握语言能力<br />理解中华文化</h1>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container split-section">
|
|
||||||
<div>
|
|
||||||
<p class="eyebrow">教学方法</p>
|
|
||||||
<div class="pill-list">
|
|
||||||
<span>HSK 分级课程</span>
|
|
||||||
<span>听说读写技能训练</span>
|
|
||||||
<span>情境化学习</span>
|
|
||||||
<span>AI 个性化推荐</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="visual-stack">
|
|
||||||
<div class="art-panel photo"><img src="assets/images/sketch/d5c638f4b093f233101f28a2872f10f3172a3ac4.png" alt="个性化互动学习场景" /></div>
|
|
||||||
<div class="visual-stack dual">
|
|
||||||
<div class="art-panel photo"><img src="assets/images/sketch/4f0c158d4abd3ded7bc18fb50aedeedc77691076.png" alt="在线课堂教学场景" /></div>
|
|
||||||
<div class="art-panel photo"><img src="assets/images/sketch/e008645eb4e8bd0b78d8a748abedf9702a1944c0.png" alt="协作学习与讨论场景" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head"><p class="eyebrow">教学特色</p></div>
|
|
||||||
<div class="grid-three">
|
|
||||||
<article class="value-card"><h3>互动与沉浸</h3><p>体现学习过程的互动性和沉浸感，通过多轮反馈与真实任务场景建立更自然的表达习惯。</p></article>
|
|
||||||
<article class="value-card"><h3>强调个性化</h3><p>围绕学习差异调整节奏、内容和任务强度，让不同学习者都能在适合的路径上持续推进。</p></article>
|
|
||||||
<article class="value-card"><h3>高效可追踪</h3><p>提供高效、有趣、可追踪的学习体验，让学习状态可见、学习成果可感知、学习反馈可持续。</p></article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section compact">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-head"><p class="eyebrow">教育价值观</p></div>
|
|
||||||
<article class="feature-card quote-card">
|
|
||||||
<div class="value-list" style="justify-content:center">
|
|
||||||
<span>专业权威</span><span>智能科技</span><span>国际化视野</span><span>以学习者为中心</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="site-footer">
|
|
||||||
<div class="container footer-main">
|
|
||||||
<div><h3>五道题（北京）科技有限公司</h3><p>地址：北京市海淀区</p><p>邮箱：support@fivequestions.cn</p></div>
|
|
||||||
<div><h3>关于我们</h3><div class="footer-links"><a href="teaching-philosophy.html">学习理念</a><a href="curriculum.html">课程体系</a><a href="faculty.html">师资团队</a></div></div>
|
|
||||||
<div><h3>下载应用</h3><div class="footer-links"><a href="index.html#download">App Store</a><a href="index.html#download">Google Play</a><a href="index.html#download">Download Android</a></div></div>
|
|
||||||
</div>
|
|
||||||
<div class="container footer-bottom">© 2026 五道题（北京）科技有限公司 保留所有权利</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<script src="assets/js/site.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
3
tsconfig.json
Normal file
3
tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict"
|
||||||
|
}
|
||||||
BIN
设计稿/五道题网页.sketch
Normal file
BIN
设计稿/五道题网页.sketch
Normal file
Binary file not shown.
Reference in New Issue
Block a user