From fb394463c0da263850b44ca00fd2a15f45690a97 Mon Sep 17 00:00:00 2001 From: caozh Date: Wed, 1 Apr 2026 16:50:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- ...794446260668decb.png => index-hero-bg.png} | Bin ...7d7c6370d80413872e1.png => index-left.png} | Bin public/images/logo.png | Bin 0 -> 6974 bytes public/images/logo.svg | 9 ++ public/images/logo.webp | Bin 0 -> 498 bytes ...2d173271cca906677b2e190d.png => study.png} | Bin ...990110a1589b97e9328463.png => teacher.png} | Bin readme.md | 3 + src/components/Header.astro | 4 +- src/layouts/BaseLayout.astro | 2 +- src/pages/index.astro | 116 ++++++++++----- src/styles/global.css | 139 +++++++++++------- 13 files changed, 182 insertions(+), 93 deletions(-) rename public/images/{sketch/8ccfd197e95883a5800485bd794446260668decb.png => index-hero-bg.png} (100%) rename public/images/{sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png => index-left.png} (100%) create mode 100644 public/images/logo.png create mode 100644 public/images/logo.svg create mode 100644 public/images/logo.webp rename public/images/{sketch/2468a7414061f8fe2d173271cca906677b2e190d.png => study.png} (100%) rename public/images/{sketch/707985b319ec1b2f40990110a1589b97e9328463.png => teacher.png} (100%) create mode 100644 readme.md diff --git a/package.json b/package.json index b9770d0..3b99c26 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "type": "module", "version": "1.0.0", "scripts": { - "dev": "astro dev", + "dev": "astro dev --host 0.0.0.0", "build": "astro build", "preview": "astro preview" }, diff --git a/public/images/sketch/8ccfd197e95883a5800485bd794446260668decb.png b/public/images/index-hero-bg.png similarity index 100% rename from public/images/sketch/8ccfd197e95883a5800485bd794446260668decb.png rename to public/images/index-hero-bg.png diff --git a/public/images/sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png b/public/images/index-left.png similarity index 100% rename from public/images/sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png rename to public/images/index-left.png diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..b6d7e6c983cace037df804fabeae94ed84ba7ec8 GIT binary patch literal 6974 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 iU6(yJ4^1b$ + + + + + + + + diff --git a/public/images/logo.webp b/public/images/logo.webp new file mode 100644 index 0000000000000000000000000000000000000000..ab706afe15c746c020c9cae25461e14b76795f10 GIT binary patch literal 498 zcmVJn{NL--+gTmNZQB~y??lW z{t>ion-0Nz24isktabzs$oCWlkd~4y6TVS_G++WNkGLfs03-ppJCI=8R@E@)LF1=} zXoG~y{D&$&wIhh={{(P7uD_~1jr@o0t<&8evm$2+PwjG7duGtZ{7ku`_(ag<{KR-o z?SU4zd?kX#*ls!6TwF7wB<+L8hHw7;@@EbJi)SSqq+&fwa^|^#m9r1lQ?Y{;`RfF> zpM2p&rGZsl{?}mdt=O41$hxr@Ry!NPQHi>BZ^X_>bSQl8QG$GEte)5JO8IWDdCf9r zNg1+B{uJrAfJquKc}G_YZ%idfO{2VXn1Smdl5=i5KX>Sm}3 z_*>=u8vZDUlp4fbJ2h{OtJ(9D_6QJSjK*;=SJdeaS&~xZJWNH&wVtVw4pRMWuh+b# zB1y%S9g*0(8a>sKpgbk7G2HUHX@YV`@Dxum!VMMg*P{f>wbd0}THt-9nv30~0hS9B oek-mYFjddQRV$7X0NPf2*|^@`wU>;3i`!?NjeFZ`{j7uWAVdT7*8l(j literal 0 HcmV?d00001 diff --git a/public/images/sketch/2468a7414061f8fe2d173271cca906677b2e190d.png b/public/images/study.png similarity index 100% rename from public/images/sketch/2468a7414061f8fe2d173271cca906677b2e190d.png rename to public/images/study.png diff --git a/public/images/sketch/707985b319ec1b2f40990110a1589b97e9328463.png b/public/images/teacher.png similarity index 100% rename from public/images/sketch/707985b319ec1b2f40990110a1589b97e9328463.png rename to public/images/teacher.png diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..d5ab4a1 --- /dev/null +++ b/readme.md @@ -0,0 +1,3 @@ +npm install +npm run dev +npm run build \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index 10aba32..7f5cee6 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -19,9 +19,9 @@ const navItems = [
- +
- 智花|五道题在线教育 + 智花慧学|五道题
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 8731cf8..c575d20 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -20,7 +20,7 @@ const { title, description, currentPath } = Astro.props; {title} - +
diff --git a/src/pages/index.astro b/src/pages/index.astro index c369d5d..cc3a99c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -8,21 +8,21 @@ import { Icon } from 'astro-icon/components'; --- -
+

用中文连接世界

-

智花，让学习更智能

+

智花，让学习更智能

-
+
@@ -33,39 +33,64 @@ import { Icon } from 'astro-icon/components';

我们的优势

- -
-
- 课程与学习体验可视化展示 +
+ +
+
+ 课程与学习体验可视化展示 +
+
+ +
+

权威课程与师资

+

+ 名师团队，打造科学系统的国际中文课程，覆盖 HSK + 分级、技能训练和进阶路径，兼顾学习效率与文化深度。 +

- -
-

权威课程与师资

-

名师团队，打造科学系统的国际中文课程，覆盖 HSK 分级、技能训练和进阶路径，兼顾学习效率与文化深度。

-
+
- +

AI智能学习技术

-

AI 驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。

+

+ AI + 驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。 +

- +

个性化学习体验

-

根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。

+

+ 根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。 +

- +

国际化学习社区

-

全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。

+

+ 全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。 +

@@ -91,14 +116,18 @@ import { Icon } from 'astro-icon/components'; 技能训练与情境化学习
-

围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。

+

+ 围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。 +

个性化提高班
-

根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。

+

+ 根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。 +

@@ -110,22 +139,39 @@ import { Icon } from 'astro-icon/components';
-
-

师资亮点

-

国际中文教育名师团队倾力打造，经验丰富，专业权威。

-

课程教学设计覆盖全领域，结合 AI 技术提供更稳定的学习反馈与更灵活的课堂支持。

- 查看完整师资体系 +
+
+
师资亮点
+ 师资亮点展示 +
+
+

+ 国际中文教育名师团队倾力打造，经验丰富，专业权威，覆盖听说读写全领域，结合AI技术提供个性化学习体验。 +

+
+ 查看完整师资体系 +
+
-
-

学习体验

-
- 学习 App 界面与使用场景展示 +
+
+
学习体验
+ 学习 App 界面与使用场景展示
-
- 学习 App 使用场景 - 练习界面 · AI 推荐路径 · 进度追踪 +
+

+ 展示APP使用场景：练习界面、AI推荐路径、进度追踪强调"每一次学习都智能、个性化" +

+
+ 开始学习 +
- 开始学习
diff --git a/src/styles/global.css b/src/styles/global.css index d468002..fdbe4d7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -110,13 +110,13 @@ button { align-items: center; gap: 8px; white-space: nowrap; - font-size: 16px; + font-size: 24px; font-weight: 700; letter-spacing: 0.01em; } .brand-copy strong { - color: var(--brand-strong); + color: #1f2430; } .brand-copy span { @@ -133,7 +133,7 @@ button { .nav-link { position: relative; padding: 8px 0; - font-size: 13px; + font-size: 18px; font-weight: 700; color: #44423f; letter-spacing: 0.04em; @@ -215,6 +215,13 @@ button { padding: 92px 0 60px; } +.index-hero { + background-image: url('/images/index-hero-bg.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + .hero.centered { text-align: center; } @@ -243,8 +250,8 @@ button { .hero-subtitle { max-width: 640px; margin: 18px auto 0; - color: #a7a29e; - font-size: 14px; + color: #2875FF; + font-size: 30px; line-height: 1.9; letter-spacing: 0.04em; } @@ -363,29 +370,6 @@ button { 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; @@ -504,6 +488,53 @@ button { max-width: 540px; } +/* 展示型卡片（师资亮点 / 学习体验） */ +.showcase-card { + display: flex; + flex-direction: column; + padding: 0; + overflow: hidden; +} + +/* 图片区域：标题叠在图片上方 */ +.showcase-hero { + position: relative; +} + +.showcase-hero img { + width: 100%; + aspect-ratio: 16 / 10; + object-fit: cover; + display: block; +} + +.showcase-title { + position: absolute; + top: 28px; + left: 32px; + margin: 0; + color: #4986CB; + font-size: 32px; + font-weight: 800; + letter-spacing: 0.02em; + z-index: 1; +} + +/* 文字区域 */ +.showcase-body { + display: flex; + flex-direction: column; + flex: 1; + padding: 28px 34px 34px; +} + +.card-action { + display: flex; + justify-content: flex-end; + margin-top: auto; + padding-top: 24px; +} + .quote-card { padding: 48px; text-align: center; @@ -787,24 +818,36 @@ button { /* ========== 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; +/* 左图右文卡片 */ +.index-left-right { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0; + overflow: hidden; + max-height: 480px; } -.bento-grid .bento-side { - grid-row: 1 / 2; - grid-column: 2 / 3; +.index-left-right .bento-hero { + min-height: 320px; +} + +.index-left-right .bento-hero .art-panel { + border-radius: 0; + border: none; + box-shadow: none; +} + +.index-left-right .bento-side { + display: flex; + flex-direction: column; + justify-content: center; + padding: 40px 56px; } .bento-grid .bento-row { - grid-row: 2 / 3; - grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; @@ -972,7 +1015,6 @@ button { } .card-with-thumb .card-thumb { - padding: 28px 24px; display: flex; align-items: center; justify-content: center; @@ -980,7 +1022,6 @@ button { } .card-with-thumb .card-thumb img { - max-height: 160px; object-fit: contain; } @@ -1125,25 +1166,15 @@ button { max-width: none; } - .bento-grid { + .index-left-right { 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; + .index-left-right .bento-side { + padding: 28px; } .bento-grid .bento-row { - grid-column: 1; grid-template-columns: 1fr; } @@ -1191,7 +1222,7 @@ button { .brand-copy { gap: 6px; - font-size: 14px; + font-size: 24px; } .hero-actions {