feat: refine Qiyouxue colors and typography

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@astrojs/node": "9.5.5",
         "@astrojs/sitemap": "^3.7.3",
+        "@fontsource-variable/noto-sans-sc": "5.3.0",
         "astro": "5.18.2",
         "gray-matter": "^4.0.3",
         "mammoth": "^1.12.0",
@@ -741,6 +742,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource-variable/noto-sans-sc": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-sc/-/noto-sans-sc-5.3.0.tgz",
+      "integrity": "sha512-lNar1dF7Ik/lHNPo/7JWG0TolXY29LtsqYgMvEysooZ5bsO9uH4shJmRrwyJ3PjyTPljhpMJEK0jDuLSU4vJ1w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@astrojs/node": "9.5.5",
     "@astrojs/sitemap": "^3.7.3",
+    "@fontsource-variable/noto-sans-sc": "5.3.0",
     "astro": "5.18.2",
     "gray-matter": "^4.0.3",
     "mammoth": "^1.12.0",

public/admin/style.css

 :root {
   --primary: #1473E6;
-  --primary-dark: #073B83;
-  --deep: #103C5B;
+  --primary-dark: #1473E6;
+  --deep: #0E61C8;
   --light: #F1F7FF;
   --bg: #FCFDFC;
   --surface: #fff;
@@ -33,13 +33,13 @@ button, .button { min-height: 40px; padding: 0 17px; display: inline-flex; align
 #captcha-image { width: 132px; height: 46px; flex: 0 0 auto; cursor: pointer; background: var(--light); border: 1px solid var(--border); border-radius: 9px; }
 input, textarea, select { width: 100%; padding: 11px 13px; color: var(--text); background: white; border: 1px solid var(--border); border-radius: 9px; }
 input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.14); border-color: var(--primary); }
-.topbar { min-height: 68px; padding: 12px 28px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: white; background: #4F94D4; }
+.topbar { min-height: 68px; padding: 12px 28px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: white; background: var(--primary); }
 .topbar > div:first-child { display: flex; align-items: center; gap: 13px; }
 .topbar strong { color: var(--primary); font-size: 19px; }
 .topbar span { font-size: 13px; opacity: .76; }
 .top-actions { display: flex; align-items: center; gap: 9px; }
 .topbar .ghost { color: white; border-color: rgba(255,255,255,.24); }
-.pending-badge { padding: 5px 10px; color: #9fd8ff; background: rgba(67,183,232,.12); border: 1px solid rgba(67,183,232,.3); border-radius: 999px; }
+.pending-badge { padding: 5px 10px; color: #cfe2ff; background: rgba(20,115,230,.12); border: 1px solid rgba(20,115,230,.3); border-radius: 999px; }
 .view { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 70px; }
 .view-head { margin-bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
 .view-head p { margin: 0 0 5px; color: var(--primary-dark); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
@@ -55,7 +55,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
 .status { padding: 2px 8px; border-radius: 999px; }
 .status.live { color: #0D966A; background: #DFF8EE; }
 .status.new-draft { color: #145da8; background: #eaf3ff; }
-.status.edited-draft { color: #0d7794; background: #e8f9fc; }
+.status.edited-draft { color: #145da8; background: #eaf3ff; }
 .row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
 .row-actions button:disabled { cursor: default; opacity: .48; transform: none; }
 .row-more-actions summary { min-height: 34px; padding-inline: 13px; font-size: 12px; }

public/og-cover.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
   <rect width="1200" height="630" fill="#FCFDFC"/>
-  <rect x="0" y="0" width="18" height="630" fill="#43D4E8"/>
+  <rect x="0" y="0" width="18" height="630" fill="#1473e6"/>
   <rect x="740" y="70" width="360" height="490" rx="32" fill="#F1F7FF" stroke="#DCE8EF" stroke-width="2"/>
   <circle cx="920" cy="245" r="96" fill="#1473E6"/>
   <path d="M854 230h132M854 258h132M880 200l40-32 40 32" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
-  <circle cx="1010" cy="145" r="25" fill="#43D4E8"/>
+  <circle cx="1010" cy="145" r="25" fill="#1473e6"/>
   <text x="82" y="118" fill="#1473E6" font-family="sans-serif" font-size="20" font-weight="700" letter-spacing="4">QIYOUXUE · 1 ON 1</text>
   <text x="82" y="255" fill="#142033" font-family="sans-serif" font-size="76" font-weight="800">先看清问题</text>
   <text x="82" y="355" fill="#1473E6" font-family="sans-serif" font-size="76" font-weight="800">再规划每一步</text>
   <text x="82" y="442" fill="#526070" font-family="sans-serif" font-size="28">小学 · 初中 · 高中在线一对一个性化辅导</text>
-  <rect x="82" y="508" width="210" height="54" rx="9" fill="#43D4E8"/>
+  <rect x="82" y="508" width="210" height="54" rx="9" fill="#1473e6"/>
   <text x="187" y="543" text-anchor="middle" fill="#142033" font-family="sans-serif" font-size="20" font-weight="700">启优学一对一</text>
 </svg>

src/components/Footer.astro

@@ -3,7 +3,7 @@ import logo from "../../pic/启优学LOGO-白色透明.png";
 import { site } from "../data/site";
 ---
 <footer class="site-footer"><div class="container footer-grid">
-  <div class="footer-brand"><a href="/" class="footer-logo" aria-label="启优学首页"><img src={logo.src} width="1214" height="910" loading="lazy" alt="启优学一对一" /></a><p>优质师资直达，个性化辅导看得见。</p><div class="footer-tags"><span>小学</span><span>初中</span><span>高中</span></div></div>
+  <div class="footer-brand"><a href="/" class="footer-logo" aria-label="启优学首页"><img src={logo.src} width="1214" height="910" loading="lazy" alt="启优学一对一" /></a><p>优质师资直达，个性化辅导看得见。</p></div>
   <div><h2>了解启优学</h2><a href="/about/">关于我们</a><a href="/methodology/">教学服务</a><a href="/articles/">学习资讯</a><a href="/faq/">常见问题</a></div>
   <div><h2>学习需求</h2>{site.services.map((item) => <a href={`/services/${item.slug}/`}>{item.name}</a>)}</div>
   <div class="footer-contact"><h2>课程咨询</h2><a class="footer-phone" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>周一至周日 · 7×24 小时</p><a href={`mailto:${site.contact.email}`}>{site.contact.email}</a><a class="footer-arrow" href="/contact/">预约学情分析</a></div>

src/data/site.ts

@@ -85,7 +85,7 @@ export const site = {
   faq: [
     { q: "启优学一对一是什么？", a: "启优学一对一是面向小学、初中、高中学生的在线一对一辅导品牌，主要提供小初高校内学科个性化辅导服务。课程以学情诊断为起点，根据年级、学科基础、教材版本、薄弱点和学习目标匹配教师。" },
     { q: "主要提供哪些课程？", a: "覆盖基础夯实、同步校内、偏科补弱、阶段复习、升学冲刺和拔高培优等学习场景。课程根据学生实际学情制定，不是统一模板课。" },
-    { q: "覆盖哪些年级和科目？", a: "覆盖小学1—6年级、初中1—3年级和高中1—3年级，支持语文、数学、英语、物理、化学、生物、地理、道德与法治等常见校内学科。具体开课情况以咨询确认为准。" },
+    { q: "覆盖哪些年级和科目？", a: "覆盖小学1-6年级、初中1-3年级和高中1-3年级，支持语文、数学、英语、物理、化学、生物、地理、道德与法治等常见校内学科。具体开课情况以咨询确认为准。" },
     { q: "可以只辅导一科吗？", a: "可以，尤其适合单科拖分、偏科明显或某一学科基础断层的学生。平台会先判断具体知识漏洞，再匹配对应学科教师，不强制多科打包。" },
     { q: "如何匹配教师？", a: "根据学生年级、学科、教材版本、当前基础、学习目标和沟通特点进行匹配。匹配成功后通常安排固定教师长期授课；如适配度明显不合适，可联系课程服务人员协助评估调整。" },
     { q: "课程如何开展？", a: "通过专属线上平台授课，支持课堂互动、课程回放和学习记录。课堂中教师会通过提问、作答和即时纠错检查理解情况。" },

src/layouts/Base.astro

 ---
 import "../styles/global.css";
+import "@fontsource-variable/noto-sans-sc";
 import logo from "../../pic/启优学LOGO-透明.png";
 import { getImage } from "astro:assets";
 import { site } from "../data/site";

src/pages/index.astro

@@ -12,7 +12,7 @@ const latest = (await getPublishedArticles()).slice(0, 3);
 const jsonLd = [{ "@context": "https://schema.org", "@type": "Service", name: "启优学在线一对一个性化辅导", provider: { "@id": new URL("/#organization", Astro.site).href }, areaServed: { "@type": "Country", name: "中国" }, audience: { "@type": "EducationalAudience", educationalRole: "student" }, description: site.home.subhead }, { "@context": "https://schema.org", "@type": "FAQPage", mainEntity: site.faq.slice(0, 4).map((item) => ({ "@type": "Question", name: item.q, acceptedAnswer: { "@type": "Answer", text: item.a } })) }];
 ---
 <Base title={site.seo.title} jsonLd={jsonLd}><Header /><main id="main-content">
-  <section class="home-hero"><div class="container home-hero__grid"><div class="home-hero__copy" data-reveal><div class="hero-label"><strong>小初高在线辅导</strong></div><h1>不是多上一节课<br /><em>是让每一步更适合孩子</em></h1><p>{site.home.subhead}</p><div class="hero__actions"><a class="button" href="/contact/">免费领取学情分析</a><a class="button button--outline" href="#workflow">了解学习流程</a></div><div class="hero__proof"><span>固定教师</span><span>互动课堂</span><span>课程回放</span><span>阶段复盘</span></div></div><div class="home-hero__visual" data-reveal><div class="image-frame"><Image src={heroImage} widths={[580, 760, 980]} sizes="(max-width: 760px) 100vw, 52vw" alt="启优学老师与学生在线一对一互动学习" format="webp" loading="eager" fetchpriority="high" /></div></div></div><div class="container stage-ruler" aria-label="覆盖学段"><span>小学 1—6 年级</span><i></i><span>初中 1—3 年级</span><i></i><span>高中 1—3 年级</span></div></section>
+  <section class="home-hero"><div class="container home-hero__grid"><div class="home-hero__copy" data-reveal><div class="hero-label"><strong>小初高在线辅导</strong></div><h1>不是多上一节课<br /><em>是让每一步更适合孩子</em></h1><p>{site.home.subhead}</p><div class="hero__actions"><a class="button" href="/contact/">免费领取学情分析</a><a class="button button--outline" href="#workflow">了解学习流程</a></div><div class="hero__proof"><span>固定教师</span><span>互动课堂</span><span>课程回放</span><span>阶段复盘</span></div></div><div class="home-hero__visual" data-reveal><div class="image-frame"><Image src={heroImage} widths={[580, 760, 980]} sizes="(max-width: 760px) 100vw, 52vw" alt="启优学老师与学生在线一对一互动学习" format="webp" loading="eager" fetchpriority="high" /></div></div></div><div class="container stage-ruler" aria-label="覆盖学段"><span>小学 1-6 年级</span><i></i><span>初中 1-3 年级</span><i></i><span>高中 1-3 年级</span></div></section>
 
   <section class="stat-band"><div class="container stat-grid">{site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div><p class="data-note">师资数据来源于启优学一对一教务系统内部统计，截至 2026 年 7 月；相关数据会随师资及业务情况动态更新。</p></section>
 

src/pages/services/index.astro

@@ -3,4 +3,4 @@ import Base from "../../layouts/Base.astro"; import Header from "../../component
 const title = `学科辅导｜${site.brand.name}`; const description = "启优学一对一覆盖基础巩固、偏科补弱、校内同步、阶段复习与升学冲刺等小初高学习需求。";
 const jsonLd = { "@context": "https://schema.org", "@type": "ItemList", name: "启优学学科辅导", itemListElement: site.services.map((item, index) => ({ "@type": "ListItem", position: index + 1, name: item.name, url: new URL(`/services/${item.slug}/`, Astro.site).href })) };
 ---
-<Base {title} {description} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 学科辅导</div><h1>同一个年级<br /><em>也应该有不同的学习路径</em></h1><p>覆盖小学、初中和高中常见校内学科。从当前基础、教材进度和具体问题出发，确定近期最需要解决的任务。</p></div></section><nav class="anchor-nav"><div class="container">{site.services.map((item) => <a href={`#${item.slug}`}>{item.name}</a>)}</div></nav><section class="section-pad section-blue"><div class="container service-list">{site.services.map((item) => <article id={item.slug} class="service-detail"><div class="service-detail__content" data-reveal><div class="service-detail__summary"><h2>{item.name}</h2><p class="lead">{item.intro}</p><a class="button button--outline" href={`/services/${item.slug}/`}>查看适配方式</a></div><div class="service-detail__delivery"><ul>{item.features.map((feature) => <li>{feature}</li>)}</ul><div class="capability-pills">{item.capabilities.map((capability) => <span>{capability.label}</span>)}</div></div></div></article>)}</div></section><section class="section-pad section-white"><div class="container"><SectionHeading title="学段不同，学习重点也不同" description="小学关注基础与习惯，初中梳理知识结构与偏科问题，高中更重视知识体系、题型方法与复习节奏。" align="center" /><div class="stage-grid">{[["小学","1—6 年级","语文 · 数学 · 英语"],["初中","1—3 年级","语数英 · 物理 · 化学 · 道法 · 地理"],["高中","1—3 年级","语数英 · 物化生 · 政史地"]].map(([name,grade,subjects])=><article data-reveal><span>{grade}</span><h3>{name}</h3><p>{subjects}</p></article>)}</div></div></section><CTA title="不确定孩子适合哪种学习安排？" text="先提供年级、教材进度、近期试卷与最希望解决的问题，再判断一对一是否适合。" /></main><Footer /></Base>
+<Base {title} {description} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 学科辅导</div><h1>同一个年级<br /><em>也应该有不同的学习路径</em></h1><p>覆盖小学、初中和高中常见校内学科。从当前基础、教材进度和具体问题出发，确定近期最需要解决的任务。</p></div></section><nav class="anchor-nav"><div class="container">{site.services.map((item) => <a href={`#${item.slug}`}>{item.name}</a>)}</div></nav><section class="section-pad section-blue"><div class="container service-list">{site.services.map((item) => <article id={item.slug} class="service-detail"><div class="service-detail__content" data-reveal><div class="service-detail__summary"><h2>{item.name}</h2><p class="lead">{item.intro}</p><a class="button button--outline" href={`/services/${item.slug}/`}>查看适配方式</a></div><div class="service-detail__delivery"><ul>{item.features.map((feature) => <li>{feature}</li>)}</ul><div class="capability-pills">{item.capabilities.map((capability) => <span>{capability.label}</span>)}</div></div></div></article>)}</div></section><section class="section-pad section-white"><div class="container"><SectionHeading title="学段不同，学习重点也不同" description="小学关注基础与习惯，初中梳理知识结构与偏科问题，高中更重视知识体系、题型方法与复习节奏。" align="center" /><div class="stage-grid">{[["小学","1-6 年级","语文 · 数学 · 英语"],["初中","1-3 年级","语数英 · 物理 · 化学 · 道法 · 地理"],["高中","1-3 年级","语数英 · 物化生 · 政史地"]].map(([name,grade,subjects])=><article data-reveal><span>{grade}</span><h3>{name}</h3><p>{subjects}</p></article>)}</div></div></section><CTA title="不确定孩子适合哪种学习安排？" text="先提供年级、教材进度、近期试卷与最希望解决的问题，再判断一对一是否适合。" /></main><Footer /></Base>