feat: 提交第一版代码
This commit is contained in:
96
about.html
Normal file
96
about.html
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
<!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>
|
||||||
874
assets/css/site.css
Normal file
874
assets/css/site.css
Normal file
@@ -0,0 +1,874 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #fffdfb;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--surface-soft: #f8f9fd;
|
||||||
|
--surface-accent: #f4f7ff;
|
||||||
|
--line: #ece7e2;
|
||||||
|
--line-strong: #d8dde8;
|
||||||
|
--text: #2d2a28;
|
||||||
|
--muted: #8e8a87;
|
||||||
|
--muted-strong: #686461;
|
||||||
|
--accent: #f28877;
|
||||||
|
--brand: #7aa0ff;
|
||||||
|
--brand-strong: #4b76eb;
|
||||||
|
--brand-soft: #eef3ff;
|
||||||
|
--footer: #313238;
|
||||||
|
--footer-muted: #b8bcc6;
|
||||||
|
--shadow-soft: 0 22px 70px rgba(38, 52, 90, 0.08);
|
||||||
|
--shadow-card: 0 14px 48px rgba(43, 53, 84, 0.08);
|
||||||
|
--radius-xl: 36px;
|
||||||
|
--radius-lg: 24px;
|
||||||
|
--radius-md: 18px;
|
||||||
|
--content: 1320px;
|
||||||
|
--nav-h: 104px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: Manrope, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell {
|
||||||
|
position: relative;
|
||||||
|
overflow-x: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: min(calc(100% - 48px), var(--content));
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(255, 253, 251, 0.9);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: auto 0 0;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(26, 29, 38, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
min-height: var(--nav-h);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-copy {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-copy strong {
|
||||||
|
color: var(--brand-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-copy span {
|
||||||
|
color: #1f2430;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 34px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #44423f;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.current {
|
||||||
|
color: var(--brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.current::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -10px;
|
||||||
|
margin: auto;
|
||||||
|
width: 18px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.locale-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.locale-pill svg {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-toggle {
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: var(--surface);
|
||||||
|
box-shadow: 0 8px 24px rgba(49, 50, 56, 0.08);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu {
|
||||||
|
display: none;
|
||||||
|
padding: 0 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu.is-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu a {
|
||||||
|
display: block;
|
||||||
|
padding: 14px 18px;
|
||||||
|
border-radius: 16px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu a.current {
|
||||||
|
background: var(--brand-soft);
|
||||||
|
color: var(--brand-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 92px 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero.centered {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy {
|
||||||
|
max-width: 920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0 0 28px;
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(40px, 5vw, 72px);
|
||||||
|
line-height: 1.15;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 18px auto 0;
|
||||||
|
color: #a7a29e;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.9;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 18px;
|
||||||
|
margin-top: 44px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 48px;
|
||||||
|
padding: 0 24px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
border-color: rgba(122, 160, 255, 0.4);
|
||||||
|
color: var(--brand);
|
||||||
|
background: rgba(255, 255, 255, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, #7aa0ff, #5f84ef);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 14px 34px rgba(95, 132, 239, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
background: var(--surface);
|
||||||
|
border-color: var(--line);
|
||||||
|
color: var(--muted-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 122px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section.compact {
|
||||||
|
padding-top: 88px;
|
||||||
|
padding-bottom: 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
margin: 0 auto 58px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(26px, 3.3vw, 48px);
|
||||||
|
line-height: 1.18;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-copy {
|
||||||
|
max-width: 780px;
|
||||||
|
margin: 22px auto 0;
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-hero,
|
||||||
|
.split-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||||
|
gap: 56px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked-copy {
|
||||||
|
max-width: 560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statement {
|
||||||
|
font-size: clamp(34px, 4.5vw, 56px);
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
margin: 20px 0 0;
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-panel {
|
||||||
|
position: relative;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 247, 255, 0.96));
|
||||||
|
border: 1px solid rgba(216, 221, 232, 0.7);
|
||||||
|
box-shadow: var(--shadow-soft);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-panel::before,
|
||||||
|
.art-panel::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-panel::before {
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
top: -80px;
|
||||||
|
right: -60px;
|
||||||
|
background: radial-gradient(circle, rgba(122, 160, 255, 0.26), rgba(122, 160, 255, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-panel::after {
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
left: -50px;
|
||||||
|
bottom: -40px;
|
||||||
|
background: radial-gradient(circle, rgba(242, 136, 119, 0.18), rgba(242, 136, 119, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-panel img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-panel.photo img {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
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 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-three {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card,
|
||||||
|
.info-card,
|
||||||
|
.teacher-card,
|
||||||
|
.timeline-card,
|
||||||
|
.value-card,
|
||||||
|
.download-card {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid rgba(216, 221, 232, 0.85);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card,
|
||||||
|
.info-card,
|
||||||
|
.timeline-card,
|
||||||
|
.value-card {
|
||||||
|
padding: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card.soft {
|
||||||
|
background: linear-gradient(180deg, #ffffff, #fafbff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h3,
|
||||||
|
.info-card h3,
|
||||||
|
.timeline-card h3,
|
||||||
|
.value-card h3,
|
||||||
|
.download-card h3 {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 1.22;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p,
|
||||||
|
.info-card p,
|
||||||
|
.timeline-card p,
|
||||||
|
.value-card p,
|
||||||
|
.download-card p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card .mini-link,
|
||||||
|
.download-card .mini-link {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-top: 26px;
|
||||||
|
color: var(--brand);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrap {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 68px;
|
||||||
|
height: 68px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: linear-gradient(180deg, rgba(122, 160, 255, 0.15), rgba(122, 160, 255, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrap img {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline-card {
|
||||||
|
padding: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline-card .statement {
|
||||||
|
font-size: clamp(28px, 4vw, 50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline-card .lead {
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-card {
|
||||||
|
padding: 48px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-card .statement {
|
||||||
|
font-size: clamp(30px, 4vw, 52px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-card .lead {
|
||||||
|
max-width: 700px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-stack.dual {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-stack .art-panel {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-stack .art-panel.photo {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-caption {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 22px;
|
||||||
|
padding-top: 18px;
|
||||||
|
border-top: 1px solid rgba(216, 221, 232, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-caption strong {
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.art-caption span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
display: grid;
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 200px minmax(0, 1fr);
|
||||||
|
gap: 28px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-tag {
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-card .statement {
|
||||||
|
font-size: clamp(24px, 3vw, 42px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-card {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-card .portrait {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
border-radius: 22px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(216, 221, 232, 0.75);
|
||||||
|
background: linear-gradient(160deg, #eef3ff, #fff6f1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-card .portrait img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 0.86;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-card h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-meta {
|
||||||
|
margin-top: 6px;
|
||||||
|
color: var(--brand-strong);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teacher-bio {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: var(--muted-strong);
|
||||||
|
font-size: 14px;
|
||||||
|
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 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-card {
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-icon {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: linear-gradient(135deg, rgba(122, 160, 255, 0.16), rgba(122, 160, 255, 0.03));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-icon img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
margin-top: 120px;
|
||||||
|
background: var(--footer);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-main {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.35fr 0.8fr 0.8fr;
|
||||||
|
gap: 48px;
|
||||||
|
padding: 60px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer h3 {
|
||||||
|
margin: 0 0 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer p,
|
||||||
|
.site-footer a {
|
||||||
|
color: var(--footer-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-row a {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-row svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 22px 0 30px;
|
||||||
|
color: rgba(255, 255, 255, 0.46);
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-wash {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-wash::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 12% 12%, rgba(122, 160, 255, 0.08), transparent 24%),
|
||||||
|
radial-gradient(circle at 88% 18%, rgba(242, 136, 119, 0.08), transparent 22%),
|
||||||
|
radial-gradient(circle at 78% 86%, rgba(122, 160, 255, 0.05), transparent 24%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-wash > * {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.site-nav {
|
||||||
|
min-height: 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links,
|
||||||
|
.locale-pill {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-hero,
|
||||||
|
.split-section,
|
||||||
|
.grid-three,
|
||||||
|
.teacher-grid,
|
||||||
|
.download-grid,
|
||||||
|
.footer-main,
|
||||||
|
.timeline-card {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-two,
|
||||||
|
.visual-stack.dual {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-card {
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-tag {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
:root {
|
||||||
|
--nav-h: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: min(calc(100% - 32px), var(--content));
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 64px 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 82px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card,
|
||||||
|
.info-card,
|
||||||
|
.timeline-card,
|
||||||
|
.value-card,
|
||||||
|
.download-card,
|
||||||
|
.teacher-card,
|
||||||
|
.headline-card,
|
||||||
|
.quote-card,
|
||||||
|
.cta-band {
|
||||||
|
padding: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-copy {
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
margin-top: 82px;
|
||||||
|
}
|
||||||
|
}
|
||||||
5
assets/images/logo-mark.svg
Normal file
5
assets/images/logo-mark.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
|
||||||
|
<rect x="2" y="2" width="36" height="36" rx="18" fill="#7AA0FF"/>
|
||||||
|
<path d="M12 15.5h5v9h-5zm11 0h5v9h-5zM17.5 12h5v5h-5zm0 12h5v5h-5z" fill="#fff"/>
|
||||||
|
<path d="M9.5 26.5c1.5-2.9 4.2-4.2 7-4.2h7c2.7 0 5.4 1.3 7 4.2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 355 B |
Binary file not shown.
|
After Width: | Height: | Size: 816 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 664 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 352 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 630 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
9
assets/js/site.js
Normal file
9
assets/js/site.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
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));
|
||||||
|
});
|
||||||
|
}
|
||||||
86
curriculum.html
Normal file
86
curriculum.html
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<!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
Normal file
118
faculty.html
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<!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
Normal file
223
index.html
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
<!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>
|
||||||
111
teaching-philosophy.html
Normal file
111
teaching-philosophy.html
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
<!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>
|
||||||
BIN
设计稿/about.png
Normal file
BIN
设计稿/about.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
设计稿/curriculum.png
Normal file
BIN
设计稿/curriculum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
设计稿/faculty.png
Normal file
BIN
设计稿/faculty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
设计稿/index.png
Normal file
BIN
设计稿/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
设计稿/teaching-philosophy.png
Normal file
BIN
设计稿/teaching-philosophy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Reference in New Issue
Block a user