Skip to content

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

feat: consolidate subject tutoring content

parent 8ca07403
Expand all 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
This diff is collapsed.
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