feat: 更新首页的样式
This commit is contained in:
+81
-35
@@ -8,21 +8,21 @@ import { Icon } from 'astro-icon/components';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="首页 | 智花 · 五道题在线教育"
|
||||
title="智花慧学 | 五道题"
|
||||
description="五道题国际中文教育官网首页，展示教学理念、课程概念、师资亮点与智能学习体验。"
|
||||
currentPath="/"
|
||||
>
|
||||
<!-- Hero：左文右图，装饰引号，无按钮 -->
|
||||
<section class="hero">
|
||||
<section class="hero index-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>
|
||||
<p class="hero-subtitle">智花，让学习更智能</p>
|
||||
</div>
|
||||
<div class="hero-split-art" style="position:relative">
|
||||
<!-- <div class="hero-split-art" style="position:relative">
|
||||
<span class="deco-quote top-right">"</span>
|
||||
<img src="/images/sketch/ead4c466c86cafe8f76435d59c15ac159aed5cc3.png" alt="用中文连接世界" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -33,39 +33,64 @@ import { Icon } from 'astro-icon/components';
|
||||
<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 class="index-left-right feature-card">
|
||||
<!-- 左侧大图 -->
|
||||
<div class="bento-hero">
|
||||
<div class="art-panel photo" style="height:100%">
|
||||
<img
|
||||
src="/images/index-left.png"
|
||||
alt="课程与学习体验可视化展示"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧文字卡片 -->
|
||||
<div class="bento-side soft">
|
||||
<h3>权威课程与师资</h3>
|
||||
<p>
|
||||
名师团队，打造科学系统的国际中文课程，覆盖 HSK
|
||||
分级、技能训练和进阶路径，兼顾学习效率与文化深度。
|
||||
</p>
|
||||
</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="" />
|
||||
<img
|
||||
src="/images/sketch/f1b84ab9a9a9c47ffa390d0bea93ab79d019625c.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<h3>AI智能学习技术</h3>
|
||||
<p>AI 驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。</p>
|
||||
<p>
|
||||
AI
|
||||
驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。
|
||||
</p>
|
||||
</article>
|
||||
<article class="feature-card soft card-with-thumb">
|
||||
<div class="card-thumb">
|
||||
<img src="/images/sketch/efa4288e0fad73637720bfd9ac094a67a39ed465.png" alt="" />
|
||||
<img
|
||||
src="/images/sketch/efa4288e0fad73637720bfd9ac094a67a39ed465.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<h3>个性化学习体验</h3>
|
||||
<p>根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。</p>
|
||||
<p>
|
||||
根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。
|
||||
</p>
|
||||
</article>
|
||||
<article class="feature-card soft card-with-thumb">
|
||||
<div class="card-thumb">
|
||||
<img src="/images/sketch/bcc2546bb5ac5489aaf0a6cd2501e09da4de3570.png" alt="" />
|
||||
<img
|
||||
src="/images/sketch/bcc2546bb5ac5489aaf0a6cd2501e09da4de3570.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<h3>国际化学习社区</h3>
|
||||
<p>全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。</p>
|
||||
<p>
|
||||
全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,14 +116,18 @@ import { Icon } from 'astro-icon/components';
|
||||
<Icon name="lucide:message-square-text" />
|
||||
<span>技能训练与情境化学习</span>
|
||||
</div>
|
||||
<p>围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。</p>
|
||||
<p>
|
||||
围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。
|
||||
</p>
|
||||
</article>
|
||||
<article class="info-card">
|
||||
<div class="info-card-title">
|
||||
<Icon name="lucide:user-round-check" />
|
||||
<span>个性化提高班</span>
|
||||
</div>
|
||||
<p>根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。</p>
|
||||
<p>
|
||||
根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
@@ -110,22 +139,39 @@ import { Icon } from 'astro-icon/components';
|
||||
<!-- 师资亮点 + 学习体验 -->
|
||||
<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 class="feature-card showcase-card">
|
||||
<div class="showcase-hero">
|
||||
<div class="showcase-title">师资亮点</div>
|
||||
<img
|
||||
src="/images/teacher.png"
|
||||
alt="师资亮点展示"
|
||||
/>
|
||||
</div>
|
||||
<div class="showcase-body">
|
||||
<p>
|
||||
国际中文教育名师团队倾力打造，经验丰富，专业权威，覆盖听说读写全领域，结合AI技术提供个性化学习体验。
|
||||
</p>
|
||||
<div class="card-action">
|
||||
<a class="btn btn-outline" href="/faculty">查看完整师资体系</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="feature-card">
|
||||
<p class="eyebrow">学习体验</p>
|
||||
<div class="art-panel photo">
|
||||
<img src="/images/sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png" alt="学习 App 界面与使用场景展示" />
|
||||
<article class="feature-card showcase-card">
|
||||
<div class="showcase-hero">
|
||||
<div class="showcase-title">学习体验</div>
|
||||
<img
|
||||
src="/images/study.png"
|
||||
alt="学习 App 界面与使用场景展示"
|
||||
/>
|
||||
</div>
|
||||
<div class="art-caption">
|
||||
<strong>学习 App 使用场景</strong>
|
||||
<span>练习界面 · AI 推荐路径 · 进度追踪</span>
|
||||
<div class="showcase-body">
|
||||
<p>
|
||||
展示APP使用场景：练习界面、AI推荐路径、进度追踪强调"每一次学习都智能、个性化"
|
||||
</p>
|
||||
<div class="card-action">
|
||||
<a class="btn btn-outline" href="#download">开始学习</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="mini-link" href="#download">开始学习</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user