Commit b80c7dca authored by tao355667's avatar tao355667

feat: refine Qiyouxue visual design

parent ad00ed3a
:root { :root {
--primary: #0868AC; --primary: #1473E6;
--primary-dark: #164A72; --primary-dark: #073B83;
--deep: #103C5B; --deep: #103C5B;
--light: #EEF7FC; --light: #F1F7FF;
--bg: #FCFDFC; --bg: #FCFDFC;
--surface: #fff; --surface: #fff;
--text: #142033; --text: #142033;
--muted: #6b7280; --muted: #6b7280;
--border: #E2E8F0; --border: #E2E8F0;
--danger: #c04444; --danger: #c04444;
font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); } body { margin: 0; color: var(--text); background: var(--bg); }
...@@ -33,13 +33,13 @@ button, .button { min-height: 40px; padding: 0 17px; display: inline-flex; align ...@@ -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; } #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, 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); } 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: #071D3B; } .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 > div:first-child { display: flex; align-items: center; gap: 13px; } .topbar > div:first-child { display: flex; align-items: center; gap: 13px; }
.topbar strong { color: var(--primary); font-size: 19px; } .topbar strong { color: var(--primary); font-size: 19px; }
.topbar span { font-size: 13px; opacity: .76; } .topbar span { font-size: 13px; opacity: .76; }
.top-actions { display: flex; align-items: center; gap: 9px; } .top-actions { display: flex; align-items: center; gap: 9px; }
.topbar .ghost { color: white; border-color: rgba(255,255,255,.24); } .topbar .ghost { color: white; border-color: rgba(255,255,255,.24); }
.pending-badge { padding: 5px 10px; color: #ffe49b; background: rgba(255,206,94,.12); border: 1px solid rgba(255,206,94,.3); border-radius: 999px; } .pending-badge { padding: 5px 10px; color: #9fd8ff; background: rgba(67,183,232,.12); border: 1px solid rgba(67,183,232,.3); border-radius: 999px; }
.view { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 70px; } .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 { 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; } .view-head p { margin: 0 0 5px; color: var(--primary-dark); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
...@@ -54,8 +54,8 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,. ...@@ -54,8 +54,8 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.article-row code { color: #9a8d7e; } .article-row code { color: #9a8d7e; }
.status { padding: 2px 8px; border-radius: 999px; } .status { padding: 2px 8px; border-radius: 999px; }
.status.live { color: #0D966A; background: #DFF8EE; } .status.live { color: #0D966A; background: #DFF8EE; }
.status.new-draft { color: #916300; background: #fff2c7; } .status.new-draft { color: #145da8; background: #eaf3ff; }
.status.edited-draft { color: #9c4c22; background: #ffeadc; } .status.edited-draft { color: #0d7794; background: #e8f9fc; }
.row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.row-actions button:disabled { cursor: default; opacity: .48; transform: none; } .row-actions button:disabled { cursor: default; opacity: .48; transform: none; }
.row-more-actions summary { min-height: 34px; padding-inline: 13px; font-size: 12px; } .row-more-actions summary { min-height: 34px; padding-inline: 13px; font-size: 12px; }
...@@ -90,7 +90,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,. ...@@ -90,7 +90,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.editor-titlebar > .status { margin-bottom: 4px; padding: 6px 12px; font-size: 13px; } .editor-titlebar > .status { margin-bottom: 4px; padding: 6px 12px; font-size: 13px; }
.back-button { min-height: auto; width: max-content; padding: 0; color: var(--muted); background: transparent; border-radius: 0; } .back-button { min-height: auto; width: max-content; padding: 0; color: var(--muted); background: transparent; border-radius: 0; }
.back-button:hover { color: var(--primary-dark); } .back-button:hover { color: var(--primary-dark); }
.version-note { margin: -12px 0 18px; padding: 13px 16px; color: #6b5a4f; background: #F8EEE6; border: 1px solid var(--border); border-radius: 11px; font-size: 13px; } .version-note { margin: -12px 0 18px; padding: 13px 16px; color: #365a78; background: #eef7ff; border: 1px solid var(--border); border-radius: 11px; font-size: 13px; }
.auto-meta { margin: 0; padding: 11px 13px; color: var(--muted); background: #F7F9FC; border-radius: 9px; font-size: 12px; } .auto-meta { margin: 0; padding: 11px 13px; color: var(--muted); background: #F7F9FC; border-radius: 9px; font-size: 12px; }
.editor-head { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 15px; } .editor-head { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.editor-head > div { display: flex; align-items: center; gap: 9px; } .editor-head > div { display: flex; align-items: center; gap: 9px; }
...@@ -112,7 +112,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,. ...@@ -112,7 +112,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.more-actions[open] summary { color: var(--primary-dark); border-color: var(--primary); } .more-actions[open] summary { color: var(--primary-dark); border-color: var(--primary); }
.action-menu { min-width: 180px; padding: 7px; position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; gap: 2px; background: white; border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 14px 36px rgba(75,34,26,.16); } .action-menu { min-width: 180px; padding: 7px; position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; gap: 2px; background: white; border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 14px 36px rgba(75,34,26,.16); }
.menu-action { width: 100%; min-height: 38px; padding: 0 11px; justify-content: flex-start; color: var(--text); background: transparent; border-radius: 7px; font-size: 13px; } .menu-action { width: 100%; min-height: 38px; padding: 0 11px; justify-content: flex-start; color: var(--text); background: transparent; border-radius: 7px; font-size: 13px; }
.menu-action:hover { background: #FAF1EA; } .menu-action:hover { background: #f1f7ff; }
.menu-action.danger { color: var(--danger); } .menu-action.danger { color: var(--danger); }
.menu-action.danger:hover { background: #fff0f0; } .menu-action.danger:hover { background: #fff0f0; }
#message { margin-left: 8px; color: var(--muted); font-size: 13px; } #message { margin-left: 8px; color: var(--muted); font-size: 13px; }
...@@ -134,7 +134,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,. ...@@ -134,7 +134,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.manager-create input { min-width: 0; } .manager-create input { min-width: 0; }
.manager-create button { flex: 0 0 auto; white-space: nowrap; } .manager-create button { flex: 0 0 auto; white-space: nowrap; }
.category-manager-list { margin-top: 8px; display: grid; gap: 8px; } .category-manager-list { margin-top: 8px; display: grid; gap: 8px; }
.category-manager-row { padding: 13px 14px; background: #FAF7F1; border: 1px solid var(--border); border-radius: 11px; } .category-manager-row { padding: 13px 14px; background: #f5f9fd; border: 1px solid var(--border); border-radius: 11px; }
.category-row-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .category-row-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.category-row-name { min-width: 0; display: grid; gap: 3px; } .category-row-name { min-width: 0; display: grid; gap: 3px; }
.category-row-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .category-row-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
...@@ -151,9 +151,9 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,. ...@@ -151,9 +151,9 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.category-inline-actions button, .replacement-options button { min-height: 32px; padding-inline: 11px; font-size: 12px; } .category-inline-actions button, .replacement-options button { min-height: 32px; padding-inline: 11px; font-size: 12px; }
.confirm-danger { color: white; background: var(--danger); } .confirm-danger { color: white; background: var(--danger); }
.replacement-options button { color: var(--primary-dark); background: white; border: 1px solid var(--border); } .replacement-options button { color: var(--primary-dark); background: white; border: 1px solid var(--border); }
.replacement-options button:hover { border-color: var(--primary); background: #FBEAE6; } .replacement-options button:hover { border-color: var(--primary); background: #eaf3ff; }
.build-card { width: min(780px, 100%); } .build-card { width: min(780px, 100%); }
#build-log { max-height: 62vh; margin: 0; padding: 18px; overflow: auto; color: var(--muted); background: #faf7f1; white-space: pre-wrap; font-size: 12px; } #build-log { max-height: 62vh; margin: 0; padding: 18px; overflow: auto; color: var(--muted); background: #f5f9fd; white-space: pre-wrap; font-size: 12px; }
@media (max-width: 760px) { @media (max-width: 760px) {
.topbar, .view-head, .article-row { align-items: flex-start; flex-direction: column; } .topbar, .view-head, .article-row { align-items: flex-start; flex-direction: column; }
.top-actions { width: 100%; flex-wrap: wrap; } .top-actions { width: 100%; flex-wrap: wrap; }
......
public/favicon.png

166 KB | W: | H:

public/favicon.png

117 KB | W: | H:

public/favicon.png
public/favicon.png
public/favicon.png
public/favicon.png
  • 2-up
  • Swipe
  • Onion skin
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630"> <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 width="1200" height="630" fill="#FCFDFC"/>
<rect x="0" y="0" width="18" height="630" fill="#F6B900"/> <rect x="0" y="0" width="18" height="630" fill="#43D4E8"/>
<rect x="740" y="70" width="360" height="490" rx="32" fill="#EEF7FC" stroke="#DCE8EF" stroke-width="2"/> <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="#0868AC"/> <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"/> <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="#F6B900"/> <circle cx="1010" cy="145" r="25" fill="#43D4E8"/>
<text x="82" y="118" fill="#0868AC" font-family="sans-serif" font-size="20" font-weight="700" letter-spacing="4">QIYOUXUE · 1 ON 1</text> <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="#172B3A" font-family="sans-serif" font-size="76" font-weight="800">先看清问题</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="#0868AC" 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="#4B5E6B" font-family="sans-serif" font-size="28">小学 · 初中 · 高中在线一对一个性化辅导</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="#F6B900"/> <rect x="82" y="508" width="210" height="54" rx="9" fill="#43D4E8"/>
<text x="187" y="543" text-anchor="middle" fill="#172B3A" font-family="sans-serif" font-size="20" font-weight="700">启优学一对一</text> <text x="187" y="543" text-anchor="middle" fill="#142033" font-family="sans-serif" font-size="20" font-weight="700">启优学一对一</text>
</svg> </svg>
...@@ -5,6 +5,6 @@ ...@@ -5,6 +5,6 @@
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "#FCFDFC", "background_color": "#FCFDFC",
"theme_color": "#0868AC", "theme_color": "#1473E6",
"lang": "zh-CN" "lang": "zh-CN"
} }
...@@ -26,16 +26,15 @@ const pages = paginationWindow(currentPage, lastPage); ...@@ -26,16 +26,15 @@ const pages = paginationWindow(currentPage, lastPage);
{items.length ? ( {items.length ? (
<div class="article-grid"> <div class="article-grid">
{items.map((item, index) => ( {items.map((item) => (
<article class="article-card" data-reveal> <article class="article-card" data-reveal>
<a href={`/articles/${item.id}/`} aria-label={`阅读:${item.data.title}`}> <a href={`/articles/${item.id}/`} aria-label={`阅读:${item.data.title}`}>
<div class="article-card__meta"> <div class="article-card__meta">
<span>{item.data.category}</span><time datetime={fmtDate(item.data.date)}>{fmtDate(item.data.date)}</time> <span>{item.data.category}</span><time datetime={fmtDate(item.data.date)}>{fmtDate(item.data.date)}</time>
</div> </div>
<div class="article-card__index">{String((currentPage - 1) * 9 + index + 1).padStart(2, "0")}</div>
<h2>{item.data.title}</h2> <h2>{item.data.title}</h2>
<p>{item.data.excerpt}</p> <p>{item.data.excerpt}</p>
<strong>阅读全文 <span>↗</span></strong> <strong>阅读全文</strong>
</a> </a>
</article> </article>
))} ))}
......
...@@ -3,4 +3,4 @@ import Base from "../layouts/Base.astro"; import Header from "./Header.astro"; i ...@@ -3,4 +3,4 @@ import Base from "../layouts/Base.astro"; import Header from "./Header.astro"; i
interface Props { items: Article[]; categories: CategoryInfo[]; totalCount: number; activeSlug: string | null; activeName: string | null; currentPage: number; lastPage: number; basePath: string; } interface Props { items: Article[]; categories: CategoryInfo[]; totalCount: number; activeSlug: string | null; activeName: string | null; currentPage: number; lastPage: number; basePath: string; }
const {items,categories,totalCount,activeSlug,activeName,currentPage,lastPage,basePath}=Astro.props as Props; const heading=activeName??"学习资讯"; const pageSuffix=currentPage>1?`|第${currentPage}页`:""; const title=`${heading}${pageSuffix}|${site.brand.name}`; const description=activeName?`启优学${activeName}分类文章,分享学情判断、学科方法与家庭学习规划。`:"启优学学习资讯:关于小初高学情判断、学习方法、阶段复习和在线一对一服务的公开说明。"; const keywords=[heading,"学习方法","学情诊断","在线一对一",site.brand.name]; const pageUrl=new URL(`${basePath}${currentPage>1?`/page/${currentPage}`:""}/`,Astro.site).href; const jsonLd={"@context":"https://schema.org","@type":"CollectionPage",name:heading,description,url:pageUrl,inLanguage:"zh-CN",mainEntity:{"@type":"ItemList",itemListElement:items.map((item,index)=>({"@type":"ListItem",position:(currentPage-1)*PAGE_SIZE+index+1,name:item.data.title,url:new URL(`/articles/${item.id}/`,Astro.site).href}))}}; const {items,categories,totalCount,activeSlug,activeName,currentPage,lastPage,basePath}=Astro.props as Props; const heading=activeName??"学习资讯"; const pageSuffix=currentPage>1?`|第${currentPage}页`:""; const title=`${heading}${pageSuffix}|${site.brand.name}`; const description=activeName?`启优学${activeName}分类文章,分享学情判断、学科方法与家庭学习规划。`:"启优学学习资讯:关于小初高学情判断、学习方法、阶段复习和在线一对一服务的公开说明。"; const keywords=[heading,"学习方法","学情诊断","在线一对一",site.brand.name]; const pageUrl=new URL(`${basePath}${currentPage>1?`/page/${currentPage}`:""}/`,Astro.site).href; const jsonLd={"@context":"https://schema.org","@type":"CollectionPage",name:heading,description,url:pageUrl,inLanguage:"zh-CN",mainEntity:{"@type":"ItemList",itemListElement:items.map((item,index)=>({"@type":"ListItem",position:(currentPage-1)*PAGE_SIZE+index+1,name:item.data.title,url:new URL(`/articles/${item.id}/`,Astro.site).href}))}};
--- ---
<Base {title} {description} {keywords} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/articles/">学习资讯</a>{activeName&&` / ${activeName}`}</div><div class="eyebrow"><span></span>LEARNING NOTES</div><h1>{heading}</h1><p>{description}</p></div></section><section class="section-pad section-blue"><div class="container"><ArticleListing {items} {categories} {totalCount} {activeSlug} {currentPage} {lastPage} {basePath} /></div></section></main><Footer /></Base> <Base {title} {description} {keywords} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/articles/">学习资讯</a>{activeName&&` / ${activeName}`}</div><h1>{heading}</h1><p>{description}</p></div></section><section class="section-pad section-blue"><div class="container"><ArticleListing {items} {categories} {totalCount} {activeSlug} {currentPage} {lastPage} {basePath} /></div></section></main><Footer /></Base>
...@@ -3,4 +3,4 @@ import { site } from "../data/site"; ...@@ -3,4 +3,4 @@ import { site } from "../data/site";
interface Props { title?: string; text?: string; } interface Props { title?: string; text?: string; }
const { title = "先了解学情,再决定怎么学", text = "准备学生年级、意向学科、近期试卷或错题与阶段目标,领取一对一专属学情分析。" } = Astro.props; const { title = "先了解学情,再决定怎么学", text = "准备学生年级、意向学科、近期试卷或错题与阶段目标,领取一对一专属学情分析。" } = Astro.props;
--- ---
<section class="cta-band"><div class="container cta-band__inner" data-reveal><div><div class="eyebrow eyebrow--light"><span></span>START WITH LEARNING PROFILE</div><h2>{title}</h2><p>{text}</p></div><div class="cta-band__actions"><a class="button button--yellow" href="/contact/">预约学情分析 <span>↗</span></a><a class="text-link text-link--light" href={`tel:${site.contact.phone}`}>电话 {site.contact.phoneDisplay}</a></div></div></section> <section class="cta-band"><div class="container cta-band__inner" data-reveal><div><h2>{title}</h2><p>{text}</p></div><div class="cta-band__actions"><a class="button button--white" href="/contact/">预约学情分析</a><a class="text-link text-link--light" href={`tel:${site.contact.phone}`}>电话 {site.contact.phoneDisplay}</a></div></div></section>
--- ---
import { site } from "../data/site"; import { site } from "../data/site";
--- ---
<dialog class="contact-dialog" data-contact-dialog aria-labelledby="contact-dialog-title"><div class="contact-dialog__panel"><button class="contact-dialog__close" type="button" data-contact-dialog-close aria-label="关闭联系方式弹窗">×</button><div class="contact-dialog__heading"><div class="eyebrow"><span></span>COURSE CONSULTATION</div><h2 id="contact-dialog-title">从一次学情沟通开始</h2><p>准备学生年级、地区、意向学科、当前情况与阶段目标,我们会协助梳理下一步。</p></div><div class="contact-dialog__grid"><article><span>01</span><h3>官方电话</h3><a class="contact-dialog__primary" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>周一至周日 · 7×24 小时</p></article><article><span>02</span><h3>微信小程序</h3><strong>启优学一对一</strong><p>搜索小程序名称提交咨询</p></article><article><span>03</span><h3>联系邮箱</h3><a class="contact-dialog__primary contact-dialog__email" href={`mailto:${site.contact.email}`}>{site.contact.email}</a><p>服务反馈与商务合作</p></article><article><span>04</span><h3>官方网站</h3><a class="contact-dialog__primary contact-dialog__website" href={`https://${site.contact.website}/`}>{site.contact.website}</a><p>启优学官方信息窗口</p></article></div></div></dialog> <dialog class="contact-dialog" data-contact-dialog aria-labelledby="contact-dialog-title"><div class="contact-dialog__panel"><button class="contact-dialog__close" type="button" data-contact-dialog-close aria-label="关闭联系方式弹窗">×</button><div class="contact-dialog__heading"><h2 id="contact-dialog-title">从一次学情沟通开始</h2><p>准备学生年级、地区、意向学科、当前情况与阶段目标,我们会协助梳理下一步。</p></div><div class="contact-dialog__grid"><article><h3>官方电话</h3><a class="contact-dialog__primary" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>周一至周日 · 7×24 小时</p></article><article><h3>微信小程序</h3><strong>启优学一对一</strong><p>搜索小程序名称提交咨询</p></article><article><h3>联系邮箱</h3><a class="contact-dialog__primary contact-dialog__email" href={`mailto:${site.contact.email}`}>{site.contact.email}</a><p>服务反馈与商务合作</p></article><article><h3>官方网站</h3><a class="contact-dialog__primary contact-dialog__website" href={`https://${site.contact.website}/`}>{site.contact.website}</a><p>启优学官方信息窗口</p></article></div></div></dialog>
--- ---
import logo from "../../pic/启优学LOGO-白底.jpg"; import logo from "../../pic/启优学LOGO-白色透明.png";
import { site } from "../data/site"; import { site } from "../data/site";
--- ---
<footer class="site-footer"><div class="container footer-grid"> <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="1725" height="970" 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 class="footer-tags"><span>小学</span><span>初中</span><span>高中</span></div></div>
<div><h2>了解启优学</h2><a href="/about/">关于我们</a><a href="/methodology/">教学服务</a><a href="/articles/">学习资讯</a><a href="/faq/">常见问题</a></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><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/">预约学情分析 <span>↗</span></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>
</div><div class="container footer-bottom"><p>© {new Date().getFullYear()} 启优学一对一</p><p><a href="https://beian.miit.gov.cn/" rel="nofollow">冀ICP备2025133748号-7</a> · 具体课程、教师、时间与费用以咨询确认方案为准</p></div></footer> </div><div class="container footer-bottom"><p>© {new Date().getFullYear()} 启优学一对一</p><p><a href="https://beian.miit.gov.cn/" rel="nofollow">冀ICP备2025133748号-7</a> · 具体课程、教师、时间与费用以咨询确认方案为准</p></div></footer>
--- ---
import logo from "../../pic/启优学LOGO-白底.jpg"; import logo from "../../pic/启优学LOGO-透明.png";
import { site } from "../data/site"; import { site } from "../data/site";
import { categoryToSlug, getCategoryNames } from "../lib/articles"; import { categoryToSlug, getCategoryNames } from "../lib/articles";
const path = Astro.url.pathname; const path = Astro.url.pathname;
...@@ -9,9 +9,9 @@ const nav = site.nav.map((item) => item.href === "/articles/" ? { ...item, child ...@@ -9,9 +9,9 @@ const nav = site.nav.map((item) => item.href === "/articles/" ? { ...item, child
--- ---
<header class="site-header" data-header> <header class="site-header" data-header>
<div class="container site-header__inner"> <div class="container site-header__inner">
<a class="brand" href="/" aria-label="启优学首页"><img src={logo.src} width="1725" height="970" alt="启优学一对一" /></a> <a class="brand" href="/" aria-label="启优学首页"><img src={logo.src} width="1214" height="910" alt="启优学一对一" /></a>
<nav class="desktop-nav" aria-label="主导航"><ul>{nav.map((item) => <li class="nav-item"><a class="nav-link" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="nav-dropdown"><ul>{item.children.map((child) => <li><a href={child.href}>{child.label}<span aria-hidden="true">↗</span></a></li>)}</ul></div></li>)}</ul></nav> <nav class="desktop-nav" aria-label="主导航"><ul>{nav.map((item) => <li class="nav-item"><a class="nav-link" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="nav-dropdown"><ul>{item.children.map((child) => <li><a href={child.href}>{child.label}</a></li>)}</ul></div></li>)}</ul></nav>
<a class="button button--small header-cta" href="/contact/">预约学情分析 <span>↗</span></a> <a class="button button--small header-cta" href="/contact/">预约学情分析</a>
<details class="mobile-nav"><summary aria-label="打开导航菜单"><span></span><span></span><span></span></summary><nav data-mobile-nav aria-label="移动端导航">{nav.map((item) => <div class="mobile-nav__group"><a class="mobile-nav__primary" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="mobile-subnav">{item.children.map((child) => <a href={child.href}>{child.label}</a>)}</div></div>)}<a class="button" href="/contact/">预约学情分析</a></nav></details> <details class="mobile-nav"><summary aria-label="打开导航菜单"><span></span><span></span><span></span></summary><nav data-mobile-nav aria-label="移动端导航">{nav.map((item) => <div class="mobile-nav__group"><a class="mobile-nav__primary" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="mobile-subnav">{item.children.map((child) => <a href={child.href}>{child.label}</a>)}</div></div>)}<a class="button" href="/contact/">预约学情分析</a></nav></details>
</div> </div>
</header> </header>
--- ---
interface Props { eyebrow: string; title: string; description?: string; align?: "left" | "center"; light?: boolean; } interface Props { title: string; description?: string; align?: "left" | "center"; light?: boolean; }
const { eyebrow, title, description, align = "left", light = false } = Astro.props; const { title, description, align = "left", light = false } = Astro.props;
--- ---
<div class:list={["section-heading", `section-heading--${align}`, { "section-heading--light": light }]} data-reveal> <div class:list={["section-heading", `section-heading--${align}`, { "section-heading--light": light }]} data-reveal>
<div class="eyebrow"><span></span>{eyebrow}</div><h2>{title}</h2>{description && <p>{description}</p>} <h2>{title}</h2>{description && <p>{description}</p>}
</div> </div>
--- ---
import "../styles/global.css"; import "../styles/global.css";
import logo from "../../pic/启优学LOGO-白底.jpg"; import logo from "../../pic/启优学LOGO-透明.png";
import { getImage } from "astro:assets"; import { getImage } from "astro:assets";
import { site } from "../data/site"; import { site } from "../data/site";
import ContactDialog from "../components/ContactDialog.astro"; import ContactDialog from "../components/ContactDialog.astro";
...@@ -10,13 +10,12 @@ const cleanMeta = (value: string) => value.replace(/<[^>]*>/g, " ").replace(/\s+ ...@@ -10,13 +10,12 @@ const cleanMeta = (value: string) => value.replace(/<[^>]*>/g, " ").replace(/\s+
const metaTitle = cleanMeta(title); const metaDescription = cleanMeta(description); const metaTitle = cleanMeta(title); const metaDescription = cleanMeta(description);
const metaKeywords = (typeof keywords === "string" ? keywords.split(",") : keywords).map((keyword) => cleanMeta(keyword)).filter(Boolean).join(","); const metaKeywords = (typeof keywords === "string" ? keywords.split(",") : keywords).map((keyword) => cleanMeta(keyword)).filter(Boolean).join(",");
const optimizedLogo = await getImage({ src: logo, width: 480, format: "webp" }); const optimizedLogo = await getImage({ src: logo, width: 480, format: "webp" });
const optimizedFavicon = await getImage({ src: logo, width: 128, height: 128, fit: "cover", format: "png" });
const canonical = new URL(Astro.url.pathname, Astro.site).href; const ogImage = new URL(image, Astro.site).href; const canonical = new URL(Astro.url.pathname, Astro.site).href; const ogImage = new URL(image, Astro.site).href;
const organizationLd = { "@context": "https://schema.org", "@type": ["EducationalOrganization", "Organization"], "@id": new URL("/#organization", Astro.site).href, name: site.brand.name, alternateName: [site.brand.shortName, site.brand.englishName], legalName: site.brand.legalName, url: new URL("/", Astro.site).href, logo: new URL(optimizedLogo.src, Astro.site).href, slogan: site.brand.tagline, description: site.home.subhead, telephone: site.contact.phone, email: site.contact.email, areaServed: { "@type": "Country", name: "中国" } }; const organizationLd = { "@context": "https://schema.org", "@type": ["EducationalOrganization", "Organization"], "@id": new URL("/#organization", Astro.site).href, name: site.brand.name, alternateName: [site.brand.shortName, site.brand.englishName], legalName: site.brand.legalName, url: new URL("/", Astro.site).href, logo: new URL(optimizedLogo.src, Astro.site).href, slogan: site.brand.tagline, description: site.home.subhead, telephone: site.contact.phone, email: site.contact.email, areaServed: { "@type": "Country", name: "中国" } };
const websiteLd = { "@context": "https://schema.org", "@type": "WebSite", "@id": new URL("/#website", Astro.site).href, url: new URL("/", Astro.site).href, name: site.brand.name, inLanguage: "zh-CN", publisher: { "@id": new URL("/#organization", Astro.site).href } }; const websiteLd = { "@context": "https://schema.org", "@type": "WebSite", "@id": new URL("/#website", Astro.site).href, url: new URL("/", Astro.site).href, name: site.brand.name, inLanguage: "zh-CN", publisher: { "@id": new URL("/#organization", Astro.site).href } };
const webPageLd = { "@context": "https://schema.org", "@type": "WebPage", "@id": `${canonical}#webpage`, url: canonical, name: metaTitle, description: metaDescription, inLanguage: "zh-CN", isPartOf: { "@id": new URL("/#website", Astro.site).href }, about: { "@id": new URL("/#organization", Astro.site).href }, primaryImageOfPage: { "@type": "ImageObject", url: ogImage, caption: imageAlt } }; const webPageLd = { "@context": "https://schema.org", "@type": "WebPage", "@id": `${canonical}#webpage`, url: canonical, name: metaTitle, description: metaDescription, inLanguage: "zh-CN", isPartOf: { "@id": new URL("/#website", Astro.site).href }, about: { "@id": new URL("/#organization", Astro.site).href }, primaryImageOfPage: { "@type": "ImageObject", url: ogImage, caption: imageAlt } };
const pageLd = Array.isArray(jsonLd) ? jsonLd : [jsonLd]; const serializedLd = JSON.stringify([organizationLd, websiteLd, webPageLd, ...pageLd.filter((item) => Object.keys(item).length > 0)]).replace(/</g, "\\u003c"); const pageLd = Array.isArray(jsonLd) ? jsonLd : [jsonLd]; const serializedLd = JSON.stringify([organizationLd, websiteLd, webPageLd, ...pageLd.filter((item) => Object.keys(item).length > 0)]).replace(/</g, "\\u003c");
--- ---
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#FCFDFC" /><meta name="color-scheme" content="light" /><title>{metaTitle}</title><meta name="description" content={metaDescription} /><meta name="keywords" content={metaKeywords} /><meta name="robots" content={noindex ? "noindex,nofollow" : "index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"} /><link rel="canonical" href={canonical} /><link rel="icon" href={optimizedFavicon.src} type="image/png" sizes="128x128" /><link rel="apple-touch-icon" href={optimizedFavicon.src} /><link rel="manifest" href="/site.webmanifest" /><link rel="alternate" hreflang="zh-CN" href={canonical} /><link rel="alternate" hreflang="x-default" href={canonical} /><meta property="og:type" content={ogType} /><meta property="og:title" content={metaTitle} /><meta property="og:description" content={metaDescription} /><meta property="og:url" content={canonical} /><meta property="og:image" content={ogImage} /><meta property="og:image:alt" content={imageAlt} /><meta property="og:site_name" content={site.brand.name} /><meta property="og:locale" content="zh_CN" />{publishedTime && <meta property="article:published_time" content={publishedTime} />}{modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}{articleSection && <meta property="article:section" content={articleSection} />}{articleAuthor && <meta property="article:author" content={articleAuthor} />}<meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content={metaTitle} /><meta name="twitter:description" content={metaDescription} /><meta name="twitter:image" content={ogImage} /><script type="application/ld+json" set:html={serializedLd} is:inline></script></head><body><a class="skip-link" href="#main-content">跳到主要内容</a><slot /><ContactDialog /><script is:inline> <!doctype html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#1473E6" /><meta name="color-scheme" content="light" /><title>{metaTitle}</title><meta name="description" content={metaDescription} /><meta name="keywords" content={metaKeywords} /><meta name="robots" content={noindex ? "noindex,nofollow" : "index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"} /><link rel="canonical" href={canonical} /><link rel="icon" href="/favicon.png" type="image/png" sizes="512x512" /><link rel="apple-touch-icon" href="/favicon.png" /><link rel="manifest" href="/site.webmanifest" /><link rel="alternate" hreflang="zh-CN" href={canonical} /><link rel="alternate" hreflang="x-default" href={canonical} /><meta property="og:type" content={ogType} /><meta property="og:title" content={metaTitle} /><meta property="og:description" content={metaDescription} /><meta property="og:url" content={canonical} /><meta property="og:image" content={ogImage} /><meta property="og:image:alt" content={imageAlt} /><meta property="og:site_name" content={site.brand.name} /><meta property="og:locale" content="zh_CN" />{publishedTime && <meta property="article:published_time" content={publishedTime} />}{modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}{articleSection && <meta property="article:section" content={articleSection} />}{articleAuthor && <meta property="article:author" content={articleAuthor} />}<meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content={metaTitle} /><meta name="twitter:description" content={metaDescription} /><meta name="twitter:image" content={ogImage} /><script type="application/ld+json" set:html={serializedLd} is:inline></script></head><body><a class="skip-link" href="#main-content">跳到主要内容</a><slot /><ContactDialog /><script is:inline>
const header=document.querySelector('[data-header]');const syncHeader=()=>header?.classList.toggle('is-scrolled',scrollY>12);addEventListener('scroll',syncHeader,{passive:true});syncHeader();const observer='IntersectionObserver'in window?new IntersectionObserver(entries=>entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('is-visible');observer.unobserve(entry.target)}}),{threshold:.08}):null;document.querySelectorAll('[data-reveal]').forEach(el=>observer?observer.observe(el):el.classList.add('is-visible'));document.querySelectorAll('[data-mobile-nav] a').forEach(link=>link.addEventListener('click',()=>link.closest('details')?.removeAttribute('open')));const dialog=document.querySelector('[data-contact-dialog]');const mobile=()=>matchMedia('(max-width:760px),(hover:none) and (pointer:coarse)').matches;document.addEventListener('click',event=>{const trigger=event.target.closest('[data-open-contact]');const phone=event.target.closest('a[href^="tel:"]');if(!dialog||(!trigger&&(!phone||mobile())))return;event.preventDefault();dialog.showModal()});dialog?.querySelector('[data-contact-dialog-close]')?.addEventListener('click',()=>dialog.close());dialog?.addEventListener('click',event=>{if(event.target===dialog)dialog.close()}); const header=document.querySelector('[data-header]');const syncHeader=()=>header?.classList.toggle('is-scrolled',scrollY>12);addEventListener('scroll',syncHeader,{passive:true});syncHeader();const observer='IntersectionObserver'in window?new IntersectionObserver(entries=>entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('is-visible');observer.unobserve(entry.target)}}),{threshold:.08}):null;document.querySelectorAll('[data-reveal]').forEach(el=>observer?observer.observe(el):el.classList.add('is-visible'));document.querySelectorAll('[data-mobile-nav] a').forEach(link=>link.addEventListener('click',()=>link.closest('details')?.removeAttribute('open')));const dialog=document.querySelector('[data-contact-dialog]');const mobile=()=>matchMedia('(max-width:760px),(hover:none) and (pointer:coarse)').matches;document.addEventListener('click',event=>{const trigger=event.target.closest('[data-open-contact]');const phone=event.target.closest('a[href^="tel:"]');if(!dialog||(!trigger&&(!phone||mobile())))return;event.preventDefault();dialog.showModal()});dialog?.querySelector('[data-contact-dialog-close]')?.addEventListener('click',()=>dialog.close());dialog?.addEventListener('click',event=>{if(event.target===dialog)dialog.close()});
</script></body></html> </script></body></html>
...@@ -132,7 +132,7 @@ function captchaSvg(code: string): string { ...@@ -132,7 +132,7 @@ function captchaSvg(code: string): string {
const colors = ["#8E1C17", "#6F1511", "#D1251A", "#5c3a2e"]; const colors = ["#8E1C17", "#6F1511", "#D1251A", "#5c3a2e"];
const randomBetween = (min: number, max: number) => crypto.randomInt(min, max + 1); const randomBetween = (min: number, max: number) => crypto.randomInt(min, max + 1);
const pick = <T>(items: T[]): T => items[crypto.randomInt(items.length)]; const pick = <T>(items: T[]): T => items[crypto.randomInt(items.length)];
let content = `<rect width="${width}" height="${height}" fill="#F4E6D6"/>`; let content = `<rect width="${width}" height="${height}" fill="#EAF3FF"/>`;
for (let index = 0; index < 4; index += 1) { for (let index = 0; index < 4; index += 1) {
content += `<line x1="${randomBetween(0, width)}" y1="${randomBetween(0, height)}" x2="${randomBetween(0, width)}" y2="${randomBetween(0, height)}" stroke="${pick(colors)}" stroke-width="1" opacity="0.45"/>`; content += `<line x1="${randomBetween(0, width)}" y1="${randomBetween(0, height)}" x2="${randomBetween(0, width)}" y2="${randomBetween(0, height)}" stroke="${pick(colors)}" stroke-width="1" opacity="0.45"/>`;
} }
......
--- ---
import Base from "../layouts/Base.astro"; import Header from "../components/Header.astro"; import Footer from "../components/Footer.astro"; import Base from "../layouts/Base.astro"; import Header from "../components/Header.astro"; import Footer from "../components/Footer.astro";
--- ---
<Base title="页面未找到|启优学" description="你访问的页面不存在。" noindex><Header /><main id="main-content"><section class="not-found"><div class="container" data-reveal><span>404</span><div class="eyebrow"><span></span>PAGE NOT FOUND</div><h1>这一页暂时找不到了</h1><p>可以返回首页,继续了解启优学在线一对一课程与教学服务。</p><a class="button button--yellow" href="/">返回首页</a></div></section></main><Footer /></Base> <Base title="页面未找到|启优学" description="你访问的页面不存在。" noindex><Header /><main id="main-content"><section class="not-found"><div class="container" data-reveal><span>404</span><h1>这一页暂时找不到了</h1><p>可以返回首页,继续了解启优学在线一对一课程与教学服务。</p><a class="button" href="/">返回首页</a></div></section></main><Footer /></Base>
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
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"; 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 title=`关于启优学|${site.brand.name}`; const description="了解启优学一对一的品牌定位、教育理念、师资匹配方式与在线个性化教学服务。";
--- ---
<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><div class="eyebrow"><span></span>ABOUT QIYOUXUE</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 eyebrow="OUR POSITION" title={site.about.heading} /></div><div class="story-column">{site.about.story.map((paragraph,index)=><p data-reveal><span>0{index+1}</span>{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 eyebrow="TEACHING ADVANTAGES" title="从看见问题,到看见每一步进展" description="诊断、匹配、互动、回放、反馈与复盘,共同组成可以持续调整的学习服务。" /><div class="advantage-grid">{site.about.advantages.map((item,index)=><article data-reveal><span>0{index+1}</span><h3>{item.title}</h3><p>{item.desc}</p></article>)}</div></div></section><section class="section-pad principle-section"><div class="container principle-layout"><div><div class="eyebrow eyebrow--light"><span></span>EDUCATION PRINCIPLES</div><h2>我们的教育理念</h2><p>成绩是阶段结果,理解力、方法和主动思考能力则陪伴更久。</p></div><div>{[["启发引导","拒绝单向灌输,通过提问与反馈培养主动思考。"],["因材施教","从真实学情出发,为不同学生确定不同任务。"],["能力优先","关注知识掌握,也重视方法、表达与学习习惯。"],["长期陪伴","固定教师持续跟踪,在阶段复盘中稳步调整。"]].map(([name,text],index)=><article data-reveal><span>0{index+1}</span><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><span>QIYOUXUE · OUR VISION</span><blockquote>“{site.about.vision}”</blockquote><div><i></i><p>因材施教不是一句口号,而是每一次诊断、匹配与调整。</p></div></div></section><CTA /></main><Footer /></Base> <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>
--- ---
import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import { site } from "../../data/site"; const title=`联系我们|${site.brand.name}`; const description=`联系启优学一对一,咨询课程安排、教师匹配和学习方案。客服电话 ${site.contact.phoneDisplay}。`; import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import { site } from "../../data/site"; const title=`联系我们|${site.brand.name}`; const description=`联系启优学一对一,咨询课程安排、教师匹配和学习方案。客服电话 ${site.contact.phoneDisplay}。`;
--- ---
<Base {title} {description}><Header /><main id="main-content"><section class="contact-hero"><div class="container contact-hero__grid"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / 联系我们</div><div class="eyebrow eyebrow--light"><span></span>CONTACT QIYOUXUE</div><h1>{site.contact.heading}</h1><p>{site.contact.intro}</p><div class="hero__actions"><a class="button button--yellow" href={`tel:${site.contact.phone}`}>电话咨询 <span>↗</span></a><a class="button button--ghost" href={`mailto:${site.contact.email}`}>发送邮件</a></div></div><div class="contact-hours" data-reveal><span>7×24</span><strong>服务时间</strong><p>周一至周日</p></div></div></section><section class="section-pad section-blue"><div class="container contact-grid"><article data-reveal><span>01</span><h2>客服电话</h2><a class="contact-big-link" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>课程咨询与服务反馈</p></article><article data-reveal><span>02</span><h2>微信小程序</h2><strong class="contact-big-link">启优学一对一</strong><p>搜索小程序名称提交预约</p></article><article data-reveal><span>03</span><h2>联系邮箱</h2><a class="contact-big-link contact-big-link--small" href={`mailto:${site.contact.email}`}>{site.contact.email}</a><p>商务合作与服务反馈</p></article><article data-reveal><span>04</span><h2>官方网站</h2><a class="contact-big-link contact-big-link--small" href={`https://${site.contact.website}`}>{site.contact.website}</a><p>官方课程与服务信息</p></article></div></section><section class="section-pad section-white"><div class="container visit-grid"><div><div class="eyebrow"><span></span>BEFORE WE TALK</div><h2>准备这些信息<br />让沟通更聚焦</h2><p>无需制作复杂材料,近期试卷或错题和最关心的问题就足够开始。</p></div><ol>{[["学生年级与地区","帮助确认学段、教材与当前可匹配资源"],["意向学科与教材进度","了解目前正在学习的内容与具体章节"],["近期试卷或错题","定位知识缺口、方法与学习习惯问题"],["当前情况与阶段目标","确定近期任务与适合的检查方式"]].map(([name,text],index)=><li><span>0{index+1}</span><div><strong>{name}</strong><p>{text}</p></div></li>)}</ol></div></section><section class="contact-bottom"><div class="container"><p>QIYOUXUE · PERSONAL LEARNING</p><h2>先看清问题<br />再规划每一步</h2><a class="button button--yellow" href={`tel:${site.contact.phone}`}>立即联系 {site.contact.phoneDisplay}</a></div></section></main><Footer /></Base> <Base {title} {description}><Header /><main id="main-content"><section class="contact-hero"><div class="container contact-hero__grid"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / 联系我们</div><h1>{site.contact.heading}</h1><p>{site.contact.intro}</p><div class="hero__actions"><a class="button" href={`tel:${site.contact.phone}`}>电话咨询</a><a class="button button--ghost" href={`mailto:${site.contact.email}`}>发送邮件</a></div></div><div class="contact-hours" data-reveal><span>7×24</span><strong>服务时间</strong><p>周一至周日</p></div></div></section><section class="section-pad section-blue"><div class="container contact-grid"><article data-reveal><h2>客服电话</h2><a class="contact-big-link" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>课程咨询与服务反馈</p></article><article data-reveal><h2>微信小程序</h2><strong class="contact-big-link">启优学一对一</strong><p>搜索小程序名称提交预约</p></article><article data-reveal><h2>联系邮箱</h2><a class="contact-big-link contact-big-link--small" href={`mailto:${site.contact.email}`}>{site.contact.email}</a><p>商务合作与服务反馈</p></article><article data-reveal><h2>官方网站</h2><a class="contact-big-link contact-big-link--small" href={`https://${site.contact.website}`}>{site.contact.website}</a><p>官方课程与服务信息</p></article></div></section><section class="section-pad section-white"><div class="container visit-grid"><div><h2>准备这些信息<br />让沟通更聚焦</h2><p>无需制作复杂材料,近期试卷或错题和最关心的问题就足够开始。</p></div><ol>{[["学生年级与地区","帮助确认学段、教材与当前可匹配资源"],["意向学科与教材进度","了解目前正在学习的内容与具体章节"],["近期试卷或错题","定位知识缺口、方法与学习习惯问题"],["当前情况与阶段目标","确定近期任务与适合的检查方式"]].map(([name,text])=><li><div><strong>{name}</strong><p>{text}</p></div></li>)}</ol></div></section><section class="contact-bottom"><div class="container"><h2>先看清问题<br />再规划每一步</h2><a class="button button--white" href={`tel:${site.contact.phone}`}>立即联系 {site.contact.phoneDisplay}</a></div></section></main><Footer /></Base>
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
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 { site } from "../../data/site"; 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 { site } from "../../data/site";
const title=`常见问题|${site.brand.name}`; const description="启优学一对一关于课程适配、覆盖学段与科目、教师匹配、课堂回放、课后反馈和咨询预约的常见问题。"; const jsonLd={"@context":"https://schema.org","@type":"FAQPage",mainEntity:site.faq.map(item=>({"@type":"Question",name:item.q,acceptedAnswer:{"@type":"Answer",text:item.a}}))}; const title=`常见问题|${site.brand.name}`; const description="启优学一对一关于课程适配、覆盖学段与科目、教师匹配、课堂回放、课后反馈和咨询预约的常见问题。"; const jsonLd={"@context":"https://schema.org","@type":"FAQPage",mainEntity:site.faq.map(item=>({"@type":"Question",name:item.q,acceptedAnswer:{"@type":"Answer",text:item.a}}))};
--- ---
<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><div class="eyebrow"><span></span>PARENTS OFTEN ASK</div><h1>关于在线一对一<br /><em>家长关心的问题</em></h1><p>从课程适配、教师匹配到课堂反馈,把重要信息公开说明。</p></div></section><section class="section-pad section-blue"><div class="container faq-layout"><aside data-reveal><span>01 — {String(site.faq.length).padStart(2,"0")}</span><h2>启优学一对一 FAQ</h2><p>具体课程、教师、时间与费用,以咨询后双方确认的信息为准。</p><a class="button button--outline" href="/contact/">预约咨询</a></aside><div class="faq-list">{site.faq.map((item,index)=><details data-reveal open={index===0}><summary><span>{String(index+1).padStart(2,"0")}</span><strong>{item.q}</strong><i></i></summary><div><p>{item.a}</p></div></details>)}</div></div></section><CTA /></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><section class="section-pad section-blue"><div class="container faq-layout"><aside data-reveal><h2>启优学一对一 FAQ</h2><p>具体课程、教师、时间与费用,以咨询后双方确认的信息为准。</p><a class="button button--outline" href="/contact/">预约咨询</a></aside><div class="faq-list">{site.faq.map((item,index)=><details data-reveal open={index===0}><summary><strong>{item.q}</strong><i></i></summary><div><p>{item.a}</p></div></details>)}</div></div></section><CTA /></main><Footer /></Base>
This diff is collapsed.
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
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"; 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 title=`教学服务|${site.brand.name}`; const description="了解启优学一对一从学情沟通、问题诊断、教师匹配到课堂反馈与阶段复盘的教学服务流程。";
--- ---
<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><div class="eyebrow"><span></span>TEACHING SERVICE</div><h1>不从一套课程开始<br /><em>从孩子当前的问题开始</em></h1><p>通过学情沟通和诊断,把宽泛目标拆成近期任务,再匹配教师、开展互动课堂并持续复盘。</p></div></section><section id="workflow" class="section-pad section-white"><div class="container"><SectionHeading eyebrow="LEARNING LOOP" title="四步形成可持续调整的学习闭环" description="每一轮课堂与反馈,都会成为下一轮安排的依据。" align="center" /><div class="method-flow">{site.workflow.map((item,index)=><article data-reveal><div><span>{item.number}</span><i>{index<3?"→":"↻"}</i></div><h2>{item.title}</h2><p>{item.desc}</p></article>)}</div></div></section><section id="delivery" class="section-pad delivery-section"><div class="container delivery-layout"><div><SectionHeading eyebrow="VISIBLE FEEDBACK" title="课堂过程有记录,下一步有依据" description="学习服务不仅是一节在线课,也包含课堂互动、课程回放、课后记录和阶段沟通。" light /></div><div class="delivery-grid">{[["01","学情沟通","年级、教材、试卷、错题与目标等基础信息"],["02","课堂互动","提问、作答、即时纠错与难度调整"],["03","课后反馈","本节内容、掌握情况、仍需巩固的问题"],["04","阶段复盘","结合课堂与练习表现调整后续安排"]].map(([num,name,text])=><article data-reveal><span>{num}</span><h3>{name}</h3><p>{text}</p></article>)}</div></div></section><section class="section-pad section-blue"><div class="container"><SectionHeading eyebrow="SERVICE BOUNDARIES" title="把重要信息提前说清楚" align="center" /><div class="principle-grid">{[["适配","一对一更适合问题较明确、需要个别讲解节奏或持续反馈的学生。"],["透明","实际课程、教师、时间、费用与反馈形式以双方确认的方案为准。"],["共同参与","学习效果还会受到基础、频率、练习、周期与家庭配合等因素影响。"]].map(([name,text],index)=><article data-reveal><span>0{index+1}</span><h3>{name}</h3><p>{text}</p></article>)}</div></div></section><CTA /></main><Footer /></Base> <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>通过学情沟通和诊断,把宽泛目标拆成近期任务,再匹配教师、开展互动课堂并持续复盘。</p></div></section><section id="workflow" class="section-pad section-white"><div class="container"><SectionHeading title="四步形成可持续调整的学习闭环" description="每一轮课堂与反馈,都会成为下一轮安排的依据。" align="center" /><div class="method-flow">{site.workflow.map((item)=><article data-reveal><h2>{item.title}</h2><p>{item.desc}</p></article>)}</div></div></section><section id="delivery" class="section-pad delivery-section"><div class="container delivery-layout"><div><SectionHeading title="课堂过程有记录,下一步有依据" description="学习服务不仅是一节在线课,也包含课堂互动、课程回放、课后记录和阶段沟通。" light /></div><div class="delivery-grid">{[["学情沟通","年级、教材、试卷、错题与目标等基础信息"],["课堂互动","提问、作答、即时纠错与难度调整"],["课后反馈","本节内容、掌握情况、仍需巩固的问题"],["阶段复盘","结合课堂与练习表现调整后续安排"]].map(([name,text])=><article data-reveal><h3>{name}</h3><p>{text}</p></article>)}</div></div></section><section class="section-pad section-blue"><div class="container"><SectionHeading title="把重要信息提前说清楚" align="center" /><div class="principle-grid">{[["适配","一对一更适合问题较明确、需要个别讲解节奏或持续反馈的学生。"],["透明","实际课程、教师、时间、费用与反馈形式以双方确认的方案为准。"],["共同参与","学习效果还会受到基础、频率、练习、周期与家庭配合等因素影响。"]].map(([name,text])=><article data-reveal><h3>{name}</h3><p>{text}</p></article>)}</div></div></section><CTA /></main><Footer /></Base>
...@@ -3,4 +3,4 @@ import Base from "../../layouts/Base.astro"; import Header from "../../component ...@@ -3,4 +3,4 @@ import Base from "../../layouts/Base.astro"; import Header from "../../component
export function getStaticPaths(){return site.services.map(service=>({params:{slug:service.slug},props:{service}}));} type Service=(typeof site.services)[number]; const {service}=Astro.props as {service:Service}; const related=site.services.filter(item=>item.slug!==service.slug); export function getStaticPaths(){return site.services.map(service=>({params:{slug:service.slug},props:{service}}));} type Service=(typeof site.services)[number]; const {service}=Astro.props as {service:Service}; const related=site.services.filter(item=>item.slug!==service.slug);
const jsonLd={"@context":"https://schema.org","@type":"Service",name:service.name,serviceType:"在线一对一个性化辅导",description:service.seoDescription,provider:{"@id":new URL("/#organization",Astro.site).href},areaServed:{"@type":"Country",name:"中国"}}; const jsonLd={"@context":"https://schema.org","@type":"Service",name:service.name,serviceType:"在线一对一个性化辅导",description:service.seoDescription,provider:{"@id":new URL("/#organization",Astro.site).href},areaServed:{"@type":"Country",name:"中国"}};
--- ---
<Base title={service.seoTitle} description={service.seoDescription} keywords={service.seoKeywords} {jsonLd}><Header /><main id="main-content"><section class="service-hero"><div class="container service-hero__inner"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/services/">学科辅导</a> / {service.name}</div><div class="service-hero__tag"><span>{service.index}</span>{service.kicker}</div><h1>{service.name}<br /><em>{service.intro}</em></h1><div class="hero__actions"><a class="button button--yellow" href="/contact/">预约学情分析 <span>↗</span></a><a class="button button--outline" href="#capabilities">了解课程重点</a></div></div><div class="plan-sheet" data-reveal><div><small>PERSONAL LEARNING PLAN</small><strong>个性化阶段方案</strong></div>{service.capabilities.map((item,index)=><article><span>0{index+1}</span><div><small>{item.label}</small><p>{item.value}</p></div><i>✓</i></article>)}<p>示意内容 · 实际方案以学情沟通后确认为准</p></div></div></section><section id="capabilities" class="section-pad section-blue"><div class="container service-cap-layout"><div><div class="eyebrow"><span></span>HOW IT WORKS</div><h2>把宽泛目标<br />拆成可检查的任务</h2><p>{service.seoDescription}</p></div><div class="service-cap-grid">{service.capabilities.map((item,index)=><article data-reveal><span>0{index+1}</span><h3>{item.label}</h3><p>{item.value}</p></article>)}</div></div></section><section class="section-pad section-white"><div class="container service-feature-layout"><div class="service-symbol" data-reveal><small>QIYOUXUE</small><strong>{service.index}</strong><span>1 ON 1</span></div><div><div class="eyebrow"><span></span>COURSE FOCUS</div><h2>课程如何围绕学生展开</h2><ul class="large-check-list">{service.features.map((feature,index)=><li data-reveal><span>0{index+1}</span><p>{feature}</p></li>)}</ul></div></div></section><section class="section-pad process-section"><div class="container"><div class="section-heading section-heading--center section-heading--light"><div class="eyebrow"><span></span>LEARNING PROCESS</div><h2>四步形成学习闭环</h2><p>课程、教师、时间与学习结果受多种因素影响,具体安排以双方确认的方案为准。</p></div><div class="process-grid">{service.process.map((step,index)=><article data-reveal><span>0{index+1}</span><h3>{step}</h3><i>{index<3?"→":"↻"}</i></article>)}</div></div></section><nav class="related-services" aria-label="其他学习需求"><div class="container">{related.map(item=><a href={`/services/${item.slug}/`}><span>{item.index}</span><strong>{item.name}</strong><i>↗</i></a>)}</div></nav><CTA title={`先判断${service.name}是否适合孩子`} text="准备近期试卷、错题、教材进度和阶段目标,从一次学情沟通开始。" /></main><Footer /></Base> <Base title={service.seoTitle} description={service.seoDescription} keywords={service.seoKeywords} {jsonLd}><Header /><main id="main-content"><section class="service-hero"><div class="container service-hero__inner"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/services/">学科辅导</a> / {service.name}</div><h1>{service.name}<br /><em>{service.intro}</em></h1><div class="hero__actions"><a class="button" href="/contact/">预约学情分析</a><a class="button button--outline" href="#capabilities">了解课程重点</a></div></div><div class="plan-sheet" data-reveal><div><strong>个性化阶段方案</strong></div>{service.capabilities.map((item)=><article><div><small>{item.label}</small><p>{item.value}</p></div></article>)}<p>示意内容 · 实际方案以学情沟通后确认为准</p></div></div></section><section id="capabilities" class="section-pad section-blue"><div class="container service-cap-layout"><div><h2>把宽泛目标<br />拆成可检查的任务</h2><p>{service.seoDescription}</p></div><div class="service-cap-grid">{service.capabilities.map((item)=><article data-reveal><h3>{item.label}</h3><p>{item.value}</p></article>)}</div></div></section><section class="section-pad section-white"><div class="container service-feature-layout"><div><h2>课程如何围绕学生展开</h2><ul class="large-check-list">{service.features.map((feature)=><li data-reveal><p>{feature}</p></li>)}</ul></div></div></section><section class="section-pad process-section"><div class="container"><div class="section-heading section-heading--center section-heading--light"><h2>四步形成学习闭环</h2><p>课程、教师、时间与学习结果受多种因素影响,具体安排以双方确认的方案为准。</p></div><div class="process-grid">{service.process.map((step)=><article data-reveal><h3>{step}</h3></article>)}</div></div></section><nav class="related-services" aria-label="其他学习需求"><div class="container">{related.map(item=><a href={`/services/${item.slug}/`}><strong>{item.name}</strong></a>)}</div></nav><CTA title={`先判断${service.name}是否适合孩子`} text="准备近期试卷、错题、教材进度和阶段目标,从一次学情沟通开始。" /></main><Footer /></Base>
...@@ -3,4 +3,4 @@ import Base from "../../layouts/Base.astro"; import Header from "../../component ...@@ -3,4 +3,4 @@ import Base from "../../layouts/Base.astro"; import Header from "../../component
const title = `学科辅导|${site.brand.name}`; const description = "启优学一对一覆盖基础巩固、偏科补弱、校内同步、阶段复习与升学冲刺等小初高学习需求。"; 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 })) }; 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><div class="eyebrow"><span></span>SUBJECT SUPPORT</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}`}><span>{item.index}</span>{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"><div class="eyebrow"><span></span>{item.kicker}</div><h2>{item.name}</h2><p class="lead">{item.intro}</p><a class="button button--outline" href={`/services/${item.slug}/`}>查看适配方式 <span>↗</span></a></div><div class="service-detail__delivery"><ul>{item.features.map((feature) => <li><span>✓</span>{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 eyebrow="STAGES & SUBJECTS" 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>
This diff is collapsed.
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