feat: 更新首页的样式

2026-04-01 16:50:17 +08:00
parent baf44b9853
commit fb394463c0
13 changed files with 182 additions and 93 deletions
--- 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"
  },
--- a/public/images/sketch/8ccfd197e95883a5800485bd794446260668decb.png
+++ b/public/images/sketch/8ccfd197e95883a5800485bd794446260668decb.png
--- a/public/images/sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png
+++ b/public/images/sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png
--- a/public/images/logo.png
+++ b/public/images/logo.png
--- a/public/images/logo.svg
+++ b/public/images/logo.svg
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 43.4326 42.6396" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43.432617" height="42.639648" fill="none" customFrame="#000000">
+	<g id="组合 1">
+		<path id="Fill 29" d="M26.142 22.754C28.928 20.721 30.699 16.653 30.699 12.185C30.699 8.453 29.569 5.07 27.599 2.903L27.597 2.901C25.962 1.058 23.614 0 21.154 0C16.555 0 12.823 3.542 12.561 8.105C12.629 8.112 12.697 8.12 12.765 8.13C16.793 8.688 20.408 10.479 22.942 13.173C25.49 15.881 26.643 19.178 26.189 22.455C26.175 22.553 26.16 22.651 26.142 22.754Z" fill="rgb(49,123,255)" fill-rule="evenodd" />
+		<path id="Fill 30" d="M0.429332 16.2493C-0.991668 20.6233 1.22233 25.2673 5.48133 26.9263C5.51033 26.8633 5.53833 26.8023 5.56833 26.7393C7.34433 23.0813 10.1643 20.1973 13.5093 18.6193C16.8723 17.0333 20.3643 16.9553 23.3413 18.3993C23.4293 18.4423 23.5183 18.4883 23.6103 18.5363C22.5373 15.2593 19.2173 12.3173 14.9663 10.9373C13.2343 10.3733 11.4963 10.0923 9.86133 10.0923C8.14833 10.0923 6.54833 10.4003 5.18133 11.0173L5.17933 11.0183C2.92033 12.0033 1.18933 13.9103 0.429332 16.2493Z" fill="rgb(49,123,255)" fill-rule="evenodd" />
+		<path id="Fill 31" d="M21.1932 39.4748C21.1432 39.4288 21.0922 39.3828 21.0432 39.3348C14.9782 33.5008 13.8832 24.7628 18.6032 19.8558C18.6722 19.7848 18.7422 19.7128 18.8172 19.6418C15.3682 19.6488 11.5442 21.8988 8.91825 25.5138C6.72525 28.5328 5.65125 31.9328 5.97025 34.8438L5.97125 34.8478C6.21025 37.2998 7.48825 39.5358 9.47825 40.9818C13.1992 43.6848 18.2992 43.0128 21.1932 39.4748Z" fill="rgb(49,123,255)" fill-rule="evenodd" />
+		<path id="Fill 32" d="M35.7959 40.0178C39.5169 37.3138 40.4539 32.2558 37.9839 28.4108C37.9239 28.4438 37.8649 28.4778 37.8039 28.5098C34.2169 30.4258 30.2409 31.1008 26.6079 30.4118C22.9539 29.7178 20.0839 27.7288 18.5239 24.8108C18.4779 24.7238 18.4319 24.6348 18.3869 24.5408C17.3279 27.8238 18.2859 32.1558 20.9129 35.7708C23.1059 38.7888 26.0079 40.8618 28.8759 41.4568L28.8789 41.4568C31.2849 41.9878 33.8059 41.4628 35.7959 40.0178Z" fill="rgb(49,123,255)" fill-rule="evenodd" />
+		<path id="Fill 33" d="M42.2426 21.7159L42.2436 21.7139C43.4926 19.5889 43.7726 17.0289 43.0126 14.6899C41.5906 10.3159 37.0696 7.86194 32.6496 9.02294C32.6626 9.08894 32.6756 9.15594 32.6876 9.22394C34.1656 17.5079 29.9146 25.2219 23.2126 26.4169C23.1156 26.4349 23.0166 26.4499 22.9136 26.4649C25.7076 28.4859 30.1236 28.9139 34.3736 27.5319C37.9226 26.3799 40.7896 24.2599 42.2426 21.7159Z" fill="rgb(49,123,255)" fill-rule="evenodd" />
+	</g>
+</svg>
--- a/public/images/logo.webp
+++ b/public/images/logo.webp
--- a/public/images/sketch/2468a7414061f8fe2d173271cca906677b2e190d.png
+++ b/public/images/sketch/2468a7414061f8fe2d173271cca906677b2e190d.png
--- a/public/images/sketch/707985b319ec1b2f40990110a1589b97e9328463.png
+++ b/public/images/sketch/707985b319ec1b2f40990110a1589b97e9328463.png
--- a/readme.md
+++ b/readme.md
@@ -0,0 +1,3 @@
+npm install
+npm run dev
+npm run build
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -19,9 +19,9 @@ const navItems = [
 <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="" />
+      <img class="brand-mark" src="/images/logo.svg" alt="" />
      <div class="brand-copy">
-        <strong>智花</strong><span>|</span><span>五道题在线教育</span>
+        <strong>智花慧学</strong><span>|</span><span>五道题</span>
      </div>
    </a>

--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -20,7 +20,7 @@ const { title, description, currentPath } = Astro.props;
    <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" />
+    <link rel="icon" type="image/svg+xml" href="/images/logo.svg" />
  </head>
  <body>
    <div class="page-shell bg-wash">
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -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="index-left-right feature-card">
          <!-- 左侧大图 -->
          <div class="bento-hero">
            <div class="art-panel photo" style="height:100%">
-            <img src="/images/sketch/8ccfd197e95883a5800485bd794446260668decb.png" alt="课程与学习体验可视化展示" />
+              <img
+                src="/images/index-left.png"
+                alt="课程与学习体验可视化展示"
+              />
            </div>
          </div>
          <!-- 右侧文字卡片 -->
-        <article class="bento-side feature-card soft">
+          <div class="bento-side  soft">
            <h3>权威课程与师资</h3>
-          <p>名师团队，打造科学系统的国际中文课程，覆盖 HSK 分级、技能训练和进阶路径，兼顾学习效率与文化深度。</p>
-        </article>
+            <p>
+              名师团队，打造科学系统的国际中文课程，覆盖 HSK
+              分级、技能训练和进阶路径，兼顾学习效率与文化深度。
+            </p>
+          </div>
+        </div>
+
        <!-- 下方三列卡片：大缩略图 + 标题 + 描述 -->
        <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="showcase-body">
+          <p>
+            展示APP使用场景：练习界面、AI推荐路径、进度追踪强调"每一次学习都智能、个性化"
+          </p>
+          <div class="card-action">
+            <a class="btn btn-outline" href="#download">开始学习</a>
          </div>
-        <div class="art-caption">
-          <strong>学习 App 使用场景</strong>
-          <span>练习界面 · AI 推荐路径 · 进度追踪</span>
        </div>
-        <a class="mini-link" href="#download">开始学习</a>
      </article>
    </div>
  </section>
--- 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 {