Skip to content

Q
qiyouxue
Commit e9d9cb8e authored by tao355667's avatar tao355667
Browse files
Options

feat: consolidate subject tutoring content

parent 8ca07403
Show whitespace changes
Inline Side-by-side
Showing with 359 additions and 9 deletions
src/data/site.ts
View file @ e9d9cb8e
......@@ -132,7 +132,7 @@ export const site = {
nav: [
{ href: "/", label: "首页", children: [{ href: "/#services", label: "学习需求" }, { href: "/#workflow", label: "服务流程" }, { href: "/#teachers", label: "师资标准" }] },
{ href: "/services/", label: "学科辅导", children: [
{ href: "/services/foundation/", label: "基础巩固" }, { href: "/services/subject-improvement/", label: "偏科补弱" }, { href: "/services/school-sync/", label: "同步学习" }, { href: "/services/exam-planning/", label: "阶段复习" },
{ href: "/services/#stages", label: "覆盖学段" }, { href: "/services/#needs", label: "常见学习需求" }, { href: "/services/#process", label: "一对一服务流程" }, { href: "/services/#overview", label: "课程说明" },
] },
{ href: "/methodology/", label: "教学服务", children: [{ href: "/methodology/#workflow", label: "四步学习流程" }, { href: "/methodology/#delivery", label: "反馈与复盘" }] },
{ href: "/about/", label: "关于启优学", children: [{ href: "/about/#position", label: "品牌介绍" }, { href: "/about/#advantages", label: "教学优势" }] },
......
src/pages/about/index.astro
View file @ e9d9cb8e
---
import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import CTA from "../../components/CTA.astro"; import SectionHeading from "../../components/SectionHeading.astro"; import { site } from "../../data/site";
const title=`关于启优学｜${site.brand.name}`; const description="了解启优学一对一的品牌定位、教育理念、师资匹配方式与在线个性化教学服务。";
import Base from "../../layouts/Base.astro";
import Header from "../../components/Header.astro";
import Footer from "../../components/Footer.astro";
import CTA from "../../components/CTA.astro";
import SectionHeading from "../../components/SectionHeading.astro";
import brandImage from "../../../pic/主页大图素材-1.png";
import { Image } from "astro:assets";
import { site } from "../../data/site";
const title = `关于我们｜${site.brand.name}`;
const description = `${site.brand.name}是${site.brand.legalName}旗下在线一对一个性化辅导品牌，面向小学、初中和高中学生提供学情沟通、教师匹配、在线授课、课后反馈与阶段复盘服务。`;
const serviceFacts = [
["服务对象", "小学、初中和高中阶段学生"],
["授课方式", "在线一对一个性化辅导"],
["服务流程", "需求沟通、学情诊断、教师匹配、在线授课、课后反馈、阶段复盘"],
["客服热线", `${site.contact.phoneDisplay}（周一至周日 7×24 小时）`],
];
---
<Base {title} {description}><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>{site.about.position}</p></div></section><section id="position" class="section-pad section-white"><div class="container about-intro-layout"><div><SectionHeading title={site.about.heading} /></div><div class="story-column">{site.about.story.map((paragraph)=><p data-reveal>{paragraph}</p>)}</div></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></section><section id="advantages" class="section-pad section-blue"><div class="container"><SectionHeading title="从看见问题，到看见每一步进展" description="诊断、匹配、互动、回放、反馈与复盘，共同组成可以持续调整的学习服务。" /><div class="advantage-grid">{site.about.advantages.map((item)=><article data-reveal><h3>{item.title}</h3><p>{item.desc}</p></article>)}</div></div></section><section class="section-pad principle-section"><div class="container principle-layout"><div><h2>我们的教育理念</h2><p>成绩是阶段结果，理解力、方法和主动思考能力则陪伴更久。</p></div><div>{[["启发引导","拒绝单向灌输，通过提问与反馈培养主动思考。"],["因材施教","从真实学情出发，为不同学生确定不同任务。"],["能力优先","关注知识掌握，也重视方法、表达与学习习惯。"],["长期陪伴","固定教师持续跟踪，在阶段复盘中稳步调整。"]].map(([name,text])=><article data-reveal><div><h3>{name}</h3><p>{text}</p></div></article>)}</div></div></section><section class="section-pad vision-section"><div class="container vision-card" data-reveal><blockquote>“{site.about.vision}”</blockquote><p>因材施教不是一句口号，而是每一次诊断、匹配与调整。</p></div></section><CTA /></main><Footer /></Base>
<Base {title} {description}>
<Header />
<main id="main-content">
<section class="page-hero about-hero">
<div class="container page-hero__inner" data-reveal>
<div class="breadcrumb"><a href="/">首页</a> / 关于我们</div>
<p class="about-hero__kicker">关于启优学</p>
<h1>在线一对一<br /><em>个性化辅导品牌</em></h1>
<p>{site.brand.tagline}；打破地域壁垒，让优质教育触手可及。</p>
</div>
</section>
<section id="position" class="section-pad section-white">
<div class="container about-brand-layout">
<figure class="about-brand-visual" data-reveal>
<Image src={brandImage} widths={[640, 900, 1200]} sizes="(max-width: 760px) 100vw, 46vw" alt="启优学老师与学生通过在线课堂开展一对一个性化辅导" format="webp" />
<figcaption>在线一对一互动课堂场景示意</figcaption>
</figure>
<div class="about-brand-copy">
<SectionHeading title="我们是什么" description={site.about.position} />
<div class="story-column">
{site.about.story.map((paragraph) => <p data-reveal>{paragraph}</p>)}
</div>
</div>
</div>
<div class="container about-facts" data-reveal>
{serviceFacts.map(([label, value]) => (
<article>
<span>{label}</span>
{label === "客服热线" ? <a href={`tel:${site.contact.phone}`}>{value}</a> : <strong>{value}</strong>}
</article>
))}
</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>
</section>
<section id="advantages" class="section-pad section-blue">
<div class="container">
<SectionHeading title="从看见问题，到看见每一步进展" description="三维学情诊断、教师匹配、互动授课、课程回放、学习反馈与阶段复盘，共同组成可以持续调整的学习服务。" />
<div class="advantage-grid">
{site.about.advantages.map((item) => <article data-reveal><h3>{item.title}</h3><p>{item.desc}</p></article>)}
</div>
<div class="about-access-bar" data-reveal>
<div><span>便捷咨询</span><strong>多个官方入口，随时了解课程与服务</strong></div>
<nav aria-label="启优学官方咨询入口">
<a href={`https://${site.contact.website}`}>官方网站</a>
<span>微信小程序「启优学一对一」</span>
<a href={`tel:${site.contact.phone}`}>官方电话 {site.contact.phoneDisplay}</a>
</nav>
</div>
</div>
</section>
<section class="section-pad principle-section">
<div class="container principle-layout">
<div>
<h2>我们的教育理念</h2>
<p>成绩是阶段结果，理解力、方法和主动思考能力则陪伴更久。</p>
</div>
<div>
{[
["启发引导", "拒绝单向灌输，通过提问与反馈点燃内驱力，培养主动思考。"],
["因材施教", "从真实学情出发，以三维诊断为依据确定个性化阶段任务。"],
["能力优先", "关注知识掌握和阶段成绩，也重视方法、表达与综合能力。"],
["长期陪伴", "固定教师持续跟踪，在反馈与阶段复盘中稳步调整。"],
].map(([name, text]) => <article data-reveal><div><h3>{name}</h3><p>{text}</p></div></article>)}
</div>
</div>
</section>
<section class="section-pad vision-section">
<div class="container vision-card" data-reveal>
<blockquote>“{site.about.vision}”</blockquote>
<p>因材施教不是一句口号，而是每一次诊断、匹配与调整。</p>
</div>
</section>
<CTA />
</main>
<Footer />
</Base>
src/pages/index.astro
View file @ e9d9cb8e
......@@ -27,7 +27,7 @@ const jsonLd = [{ "@context": "https://schema.org", "@type": "Service", name: "
<section class="subject-overview section-pad"><div class="container"><div class="subject-overview__head" data-reveal><div><h2>小学、初中、高中<br />个性化学习支持</h2><p class="subject-overview__lead">通过学情诊断、教师匹配与阶段复盘，为学生制定有针对性的在线一对一学习方案。</p></div><p class="subject-overview__intro">启优学一对一面向小学、初中和高中学生，提供学情诊断、教师匹配、专属学习方案、课堂过程反馈和课后学习报告，帮助家长清晰了解孩子的学习进展。</p></div><div class="subject-overview__grid">{subjects.map((item) => <article class={`subject-card subject-card--${item.tone}`} data-reveal><div class="subject-card__icon"><SubjectIcon name={item.icon} /></div><div><h3>{item.name}</h3><p>{item.desc}</p></div></article>)}</div><div class="subject-support-note" data-reveal><strong>更多校内科目支持</strong><p>还支持生物、地理、道德与法治等常见校内科目，具体开课情况以咨询确认为准。</p></div></div></section>
<section id="services" class="section-pad section-blue needs-section"><div class="container"><div class="needs-layout"><div class="needs-intro" data-reveal><p class="subject-overview__label">课程怎么选</p><h2>孩子最近<br />卡在哪一步？</h2><p>基础没跟上、单科薄弱，或是需要配合校内进度、准备阶段考试，都可以从眼前的具体问题说起。</p><a class="text-link" href="/services/">查看课程说明</a></div><div class="needs-list">{site.services.map((item) => <a href={`/services/${item.slug}/`} data-reveal><span>{item.index}</span><div><h3>{item.name}</h3><p>{item.intro}</p></div><strong>查看</strong></a>)}</div></div><div class="needs-context" data-reveal><strong>常见学习需求</strong><p>{site.home.scenarios.join("、")}。</p><p>可以先安排一门学科；如有多科需求，会在了解具体情况后分别规划。</p></div></div></section>
<section id="services" class="section-pad section-blue needs-section"><div class="container"><div class="needs-layout"><div class="needs-intro" data-reveal><p class="subject-overview__label">课程怎么选</p><h2>孩子最近<br />卡在哪一步？</h2><p>基础没跟上、单科薄弱，或是需要配合校内进度、准备阶段考试，都可以从眼前的具体问题说起。</p><a class="text-link" href="/services/">查看课程说明</a></div><div class="needs-list">{site.services.map((item) => <a href={`/services/#${item.slug}`} data-reveal><span>{item.index}</span><div><h3>{item.name}</h3><p>{item.intro}</p></div><strong>查看</strong></a>)}</div></div><div class="needs-context" data-reveal><strong>常见学习需求</strong><p>{site.home.scenarios.join("、")}。</p><p>可以先安排一门学科；如有多科需求，会在了解具体情况后分别规划。</p></div></div></section>
<section id="workflow" class="section-pad section-white workflow-section"><div class="container"><div class="workflow-head"><div><SectionHeading title="六项课程服务环节" description="从诊断到复盘，每一步都有清楚的任务和可核验标准，家长知道为什么这样安排，学生知道下一步做什么。" /></div><a class="button button--outline" href="/methodology/">查看完整教学服务</a></div><div class="workflow-grid">{site.workflow.map((item) => <article class="workflow-card" data-reveal><div class="workflow-card__marker"><span>{item.number}</span></div><div class="workflow-card__body"><h3>{item.title}</h3><p>{item.desc}</p></div></article>)}</div></div></section>
......
src/pages/services/index.astro
View file @ e9d9cb8e
---
import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import CTA from "../../components/CTA.astro"; import SectionHeading from "../../components/SectionHeading.astro"; import { site } from "../../data/site";
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 })) };
import Base from "../../layouts/Base.astro";
import Header from "../../components/Header.astro";
import Footer from "../../components/Footer.astro";
import CTA from "../../components/CTA.astro";
import SectionHeading from "../../components/SectionHeading.astro";
import { site } from "../../data/site";
const title = `学科辅导｜${site.brand.name}`;
const description = "启优学一对一覆盖小学、初中和高中，根据学生当前基础、教材进度和阶段任务，提供在线一对一个性化学科辅导。";
const stages = [
{
range: "小学 1—6 年级",
name: "小学阶段",
subjects: "语文 · 数学 · 英语",
desc: "关注基础知识、阅读与表达、计算准确性、审题习惯和学习方法，可围绕校内同步、知识巩固、错题分析与小初衔接等需求展开。",
},
{
range: "初中 1—3 年级",
name: "初中阶段",
subjects: "语数英 · 物理 · 化学等",
desc: "梳理知识结构，定位具体薄弱点，兼顾校内进度、阶段复习、偏科改善与中考相关学习任务。",
},
{
range: "高中 1—3 年级",
name: "高中阶段",
subjects: "语数英 · 物化生 · 政史地",
desc: "结合选科、课程进度和阶段目标，拆分知识理解、题型方法、综合应用与复习节奏等问题。",
},
];
const needs = [
{ id: "foundation", number: "01", title: "基础巩固", desc: "回顾关键概念与基础题型，找到影响后续学习的知识缺口。" },
{ id: "subject-improvement", number: "02", title: "偏科补弱", desc: "围绕具体学科、章节和错误类型安排优先任务，避免泛泛重复。" },
{ id: "school-sync", number: "03", title: "同步学习", desc: "结合教材版本和学校进度进行讲解、练习与错题复盘。" },
{ id: "exam-planning", number: "04", title: "阶段复习", desc: "根据测验、期中期末或升学阶段的时间安排梳理复习重点。" },
{ id: "method-adjustment", number: "05", title: "方法调整", desc: "从审题、表达、计算、记忆和复习习惯中识别可改进环节。" },
{ id: "advanced-learning", number: "06", title: "进阶学习", desc: "在基础掌握较稳定后，根据学生情况拓展综合应用和思维训练。" },
];
const process = [
{ number: "01", title: "沟通学习情况", desc: "了解学生年级、教材版本、学校进度、近期试卷或错题，以及当前最希望解决的问题。" },
{ number: "02", title: "诊断并确定优先任务", desc: "区分知识缺口、解题方法和学习习惯等原因，把宽泛目标拆成可以检查的阶段任务。" },
{ number: "03", title: "匹配教师与学习节奏", desc: "综合学段、学科、学生基础、目标和沟通特点匹配教师，并明确近期内容、节奏与检查方式。" },
{ number: "04", title: "授课、反馈与阶段调整", desc: "课堂中检查理解情况，课后记录待巩固问题，并根据阶段表现调整后续安排。" },
];
const jsonLd = {
"@context": "https://schema.org",
"@type": "Service",
name: "启优学 K12 在线一对一学科辅导",
provider: { "@id": new URL("/#organization", Astro.site).href },
audience: { "@type": "EducationalAudience", educationalRole: "student" },
description,
};
---
<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 subject-service-hero">
<div class="container page-hero__inner" data-reveal>
<div class="breadcrumb"><a href="/">首页</a> / 学科辅导</div>
<p class="subject-service-hero__kicker">K12 学科教育 · 多元课程</p>
<h1>从当前学情出发<br /><em>让每一步学习更有针对性</em></h1>
<p>优质师资直达，个性化辅导看得见；打破地域壁垒，让优质教育触手可及。</p>
</div>
</section>
<nav class="anchor-nav" aria-label="本页内容">
<div class="container">
<a href="#overview"><span>01</span>课程说明</a>
<a href="#stages"><span>02</span>覆盖学段</a>
<a href="#needs"><span>03</span>学习需求</a>
<a href="#process"><span>04</span>服务流程</a>
</div>
</nav>
<section id="overview" class="section-pad section-white subject-service-overview">
<div class="container subject-service-overview__grid">
<div data-reveal>
<p class="subject-overview__label">启优学学科教育是什么</p>
<h2>先看清问题<br />再安排课程</h2>
</div>
<div class="subject-service-overview__copy" data-reveal>
<p>课程从学生当前情况出发，通过需求沟通和学情诊断明确优先问题，再结合学段、学科、教材进度和学习目标匹配教师。</p>
<p>授课过程中关注学生是否真正理解知识与方法，并通过课后反馈和阶段复盘调整后续安排。</p>
<aside>一对一辅导不采用统一进度覆盖所有学生，也不承诺相同的成绩结果。实际课程内容、教师、时间和费用，以咨询后双方确认的方案为准。</aside>
</div>
</div>
</section>
<section id="stages" class="section-pad section-blue subject-stage-section">
<div class="container">
<SectionHeading title="覆盖小学、初中和高中阶段" description="不同学段面对的问题不同，课程重点会根据学生当前基础、校内进度和阶段任务进行安排。" />
<div class="subject-stage-grid">
{stages.map((stage) => (
<article data-reveal>
<div class="subject-stage-card__meta"><span>{stage.range}</span><small>{stage.subjects}</small></div>
<h3>{stage.name}</h3>
<p>{stage.desc}</p>
</article>
))}
</div>
<p class="subject-stage-note">具体科目和教师资源需结合当前开课情况确认。</p>
</div>
</section>
<section id="needs" class="section-pad section-white subject-needs-section">
<div class="container">
<div class="subject-needs-head">
<SectionHeading title="常见学习需求" description="课程不按固定标签套用方案，而是从当前最需要解决的问题开始确定优先顺序。" />
<p>六类需求可以组合安排，也可以先聚焦一门学科或一个具体问题。</p>
</div>
<div class="subject-needs-grid">
{needs.map((need) => (
<article id={need.id} data-reveal>
<span>{need.number}</span>
<h3>{need.title}</h3>
<p>{need.desc}</p>
</article>
))}
</div>
</div>
</section>
<section id="process" class="section-pad subject-process-section">
<div class="container">
<div class="section-heading section-heading--center section-heading--light" data-reveal>
<h2>一对一学习服务如何开展</h2>
<p>从了解学习情况到阶段复盘，具体环节会根据学生需求和实际课程方案调整。</p>
</div>
<div class="subject-process-path">
{process.map((step) => (
<article data-reveal>
<span>{step.number}</span>
<div><h3>{step.title}</h3><p>{step.desc}</p></div>
</article>
))}
</div>
</div>
</section>
<CTA title="先了解孩子目前最需要解决的问题" text="准备年级、教材进度、近期试卷或错题和阶段目标，从一次学情沟通开始。" />
</main>
<Footer />
</Base>
src/styles/global.css
View file @ e9d9cb8e
......@@ -61,3 +61,108 @@
@media(max-width:760px){.teacher-profile__intro{grid-template-columns:1fr;gap:26px}.teacher-profile__intro h2{font-size:40px}.teacher-profile__intro>div>p{font-size:15px}.teacher-match{margin-top:38px}.teacher-match__head{display:block;padding:18px 0}.teacher-match__head span{display:block;margin-top:7px;line-height:1.6}.teacher-match__grid{grid-template-columns:1fr 1fr}.teacher-match__grid article,.teacher-match__grid article:first-child{min-height:106px;padding:17px 14px;border-right:1px solid #c8def5;border-bottom:1px solid #c8def5}.teacher-match__grid article:nth-child(even){border-right:0}.teacher-match__grid article:last-child{grid-column:1/3;border-right:0;border-bottom:0}.teacher-match__grid article:nth-last-child(2){border-bottom:0}}
.teacher-profile__intro h2>span{display:inline-block;white-space:nowrap}
@media(min-width:761px){.teacher-profile__intro{grid-template-columns:1.08fr .92fr;gap:78px}}
/* 学科辅导单页：四个连续信息模块，减少跨页查找。 */
.subject-service-hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#f1f7ff 0%,#fff 76%)}
.subject-service-hero::after{position:absolute;right:-8vw;bottom:-220px;width:520px;height:520px;border:78px solid rgba(20,115,230,.055);border-radius:50%;content:""}
.subject-service-hero__kicker,.about-hero__kicker{margin:0 0 15px!important;color:var(--brand-blue)!important;font-size:13px!important;font-weight:700;letter-spacing:.08em}
.subject-service-overview,.subject-stage-section,.subject-needs-section,.subject-process-section{scroll-margin-top:132px}
.subject-service-overview__grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:110px;align-items:start}
.subject-service-overview h2{margin:0;font-size:clamp(40px,4.5vw,58px);letter-spacing:-.035em}
.subject-service-overview__copy>p{margin-bottom:20px;color:var(--text-secondary);font-size:17px;line-height:1.9}
.subject-service-overview__copy aside{margin-top:32px;padding:20px 22px;border-left:3px solid var(--brand-blue);color:#53697d;background:#f3f8ff;font-size:13px;line-height:1.8}
.subject-stage-section .section-heading{max-width:830px}
.subject-stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.subject-stage-grid article{min-height:340px;padding:30px;border:1px solid #cfe2f6;border-top:4px solid var(--brand-blue);border-radius:14px;background:#fff;box-shadow:var(--shadow-card)}
.subject-stage-card__meta{display:flex;min-height:48px;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--divider)}
.subject-stage-card__meta span{color:var(--brand-blue);font-size:12px;font-weight:700}
.subject-stage-card__meta small{color:var(--text-muted);font-size:11px;text-align:right}
.subject-stage-grid h3{margin:28px 0 14px;font-size:29px}
.subject-stage-grid article>p{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.85}
.subject-stage-note{margin:18px 0 0;color:var(--text-muted);font-size:12px;text-align:right}
.subject-needs-head{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:48px}
.subject-needs-head>.section-heading{max-width:720px}
.subject-needs-head>p{max-width:330px;margin:0 0 5px;color:var(--text-muted);font-size:13px;text-align:right}
.subject-needs-grid{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid var(--border);border-radius:16px;background:#fff}
.subject-needs-grid article{min-height:220px;padding:28px;scroll-margin-top:150px;border-right:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.subject-needs-grid article:nth-child(3n){border-right:0}
.subject-needs-grid article:nth-last-child(-n+3){border-bottom:0}
.subject-needs-grid article>span{color:var(--brand-blue);font-size:12px;font-weight:800;letter-spacing:.1em}
.subject-needs-grid h3{margin:32px 0 11px;font-size:24px}
.subject-needs-grid p{margin:0;color:var(--text-secondary);font-size:14px}
.subject-process-section{color:#fff;background:#1473e6}
.subject-process-section .section-heading{max-width:850px}
.subject-process-path{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px}
.subject-process-path::before{position:absolute;top:25px;right:12.5%;left:12.5%;height:1px;background:rgba(255,255,255,.35);content:""}
.subject-process-path article{position:relative;padding:0 24px;text-align:center}
.subject-process-path article>span{position:relative;z-index:1;display:grid;width:52px;height:52px;margin:0 auto 28px;place-items:center;border:1px solid rgba(255,255,255,.55);border-radius:50%;color:var(--brand-blue);background:#fff;font-size:12px;font-weight:800;box-shadow:0 0 0 8px #1473e6}
.subject-process-path h3{margin:0 0 13px;color:#fff;font-size:21px}
.subject-process-path p{margin:0;color:#e5f1ff;font-size:13px;line-height:1.75}
/* 关于页：用真实服务信息和课堂场景完成品牌介绍。 */
.about-hero{background:linear-gradient(125deg,#f1f7ff 0%,#fff 76%)}
.about-brand-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:76px;align-items:start}
.about-brand-visual{position:sticky;top:112px;margin:0;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:#edf6ff;box-shadow:var(--shadow-card)}
.about-brand-visual img{width:100%;aspect-ratio:1.16;object-fit:cover}
.about-brand-visual figcaption{padding:12px 17px;color:var(--text-muted);background:#fff;font-size:11px}
.about-brand-copy .section-heading{margin-bottom:32px}
.about-brand-copy .section-heading>p{font-size:16px;line-height:1.9}
.about-brand-copy .story-column p:last-child{border-bottom:0}
.about-facts{display:grid;grid-template-columns:1fr 1fr 1.75fr 1.35fr;margin-top:70px;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#f7fbff}
.about-facts article{min-height:132px;padding:23px;border-right:1px solid var(--border)}
.about-facts article:last-child{border-right:0}
.about-facts span{display:block;margin-bottom:14px;color:var(--brand-blue);font-size:11px;font-weight:700;letter-spacing:.06em}
.about-facts strong,.about-facts a{display:block;color:#263b4f;font-size:14px;font-weight:600;line-height:1.75}
.about-facts a{color:var(--brand-blue)}
.about-access-bar{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:18px;padding:24px 27px;border:1px solid #c8def5;border-radius:12px;background:#fff}
.about-access-bar>div span{display:block;margin-bottom:5px;color:var(--brand-blue);font-size:11px;font-weight:700;letter-spacing:.08em}
.about-access-bar>div strong{font-size:15px}
.about-access-bar nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 22px;color:#49647e;font-size:13px}
.about-access-bar nav a{color:var(--brand-blue);font-weight:600}
/* 联系页主按钮与品牌蓝背景保持清晰对比。 */
.contact-hero .hero__actions>.button:first-child{border-color:#fff;color:#0b5eba;background:#fff;box-shadow:0 8px 22px rgba(6,52,105,.18)}
.contact-hero .hero__actions>.button:first-child:hover{border-color:#fff;color:#084f9c;background:#edf6ff}
.contact-hero .hero__actions>.button:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:3px}
@media(max-width:1080px){
.subject-stage-grid article{min-height:365px}
.about-brand-layout{gap:48px}
.about-facts{grid-template-columns:1fr 1fr}
.about-facts article:nth-child(2){border-right:0}
.about-facts article:nth-child(-n+2){border-bottom:1px solid var(--border)}
}
@media(max-width:760px){
.subject-service-hero::after{right:-180px;bottom:-210px;width:400px;height:400px}
.subject-service-hero+.anchor-nav .container{width:100%;grid-template-columns:repeat(4,1fr)}
.subject-service-hero+.anchor-nav a{padding:11px 3px;font-size:11px;line-height:1.45}
.subject-service-hero+.anchor-nav a span{display:block;margin:0 0 2px}
.subject-service-overview__grid{grid-template-columns:1fr;gap:36px}
.subject-service-overview h2{font-size:38px}
.subject-service-overview__copy>p{font-size:15px}
.subject-stage-grid{grid-template-columns:1fr;gap:12px;margin-top:34px}
.subject-stage-grid article{min-height:auto;padding:24px}
.subject-stage-grid h3{margin-top:22px;font-size:25px}
.subject-stage-note{text-align:left}
.subject-needs-head{display:block;margin-bottom:34px}
.subject-needs-head>p{margin-top:18px;text-align:left}
.subject-needs-grid{grid-template-columns:1fr}
.subject-needs-grid article{min-height:auto;padding:24px;border-right:0;border-bottom:1px solid var(--divider)!important}
.subject-needs-grid article:last-child{border-bottom:0!important}
.subject-needs-grid h3{margin-top:20px}
.subject-process-path{grid-template-columns:1fr;gap:0;margin-top:46px}
.subject-process-path::before{top:26px;bottom:26px;left:25px;width:1px;height:auto}
.subject-process-path article{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:0 0 34px;text-align:left}
.subject-process-path article:last-child{padding-bottom:0}
.subject-process-path article>span{margin:0;box-shadow:0 0 0 6px #1473e6}
.subject-process-path h3{font-size:19px}
.about-brand-layout{grid-template-columns:1fr;gap:38px}
.about-brand-visual{position:static}
.about-brand-copy .section-heading{margin-bottom:26px}
.about-facts{grid-template-columns:1fr;margin-top:46px}
.about-facts article,.about-facts article:nth-child(2){min-height:auto;border-right:0;border-bottom:1px solid var(--border)}
.about-facts article:last-child{border-bottom:0}
.about-access-bar{display:block;padding:22px}
.about-access-bar nav{display:grid;justify-content:start;margin-top:20px}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment