Skip to content

Commit 810b25d

Browse files
DvdBr3oDvdBr3o
committed
feat: 教学页.
1 parent 7e59518 commit 810b25d

6 files changed

Lines changed: 516 additions & 1 deletion

File tree

‎src/components/TeachingPracticePageContent.astro‎

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
---
2+
import BaseLayout from "@/layouts/BaseLayout.astro";
3+
import HomeTitle from "@/components/HomeTitle.astro";
4+
import ButtonGroup from "@/components/ButtonGroup.astro";
5+
import Button from "@/components/Button.astro";
6+
import DarkLightButton from "@/components/DarkLightButton.astro";
7+
import CardContainer from "@/components/CardContainer.astro";
8+
import Card from "@/components/Card.astro";
9+
import type { TeachingPracticeContent } from "@/i18n/teaching";
10+
11+
interface Props {
12+
content: TeachingPracticeContent;
13+
}
14+
15+
const { content } = Astro.props;
16+
---
17+
18+
<BaseLayout>
19+
<div class="practice-page">
20+
<section class="hero-section">
21+
<div class="hero-shell">
22+
<HomeTitle title={content.hero.title} subtitle={content.hero.subtitle} />
23+
<div class="hero-actions">
24+
<ButtonGroup>
25+
<Button href={content.hero.primaryHref}>{content.hero.primaryLabel}</Button>
26+
<DarkLightButton href={content.hero.secondaryHref}>
27+
{content.hero.secondaryLabel}
28+
</DarkLightButton>
29+
</ButtonGroup>
30+
</div>
31+
</div>
32+
</section>
33+
34+
<section class="overview-section">
35+
<div class="section-copy">
36+
<p class="eyebrow">{content.overview.eyebrow}</p>
37+
<h2>{content.overview.title}</h2>
38+
<p>{content.overview.description}</p>
39+
</div>
40+
41+
<CardContainer>
42+
{
43+
content.cards.map((card) => (
44+
<Card icon={card.icon} title={card.title}>
45+
{card.description}
46+
</Card>
47+
))
48+
}
49+
</CardContainer>
50+
</section>
51+
52+
<section class="showcase-section">
53+
{
54+
content.showcases.map((item, index) => (
55+
<article class={`showcase-card ${index % 2 === 0 ? "left" : "right"}`}>
56+
<div class="showcase-copy">
57+
<p class="eyebrow">{item.eyebrow}</p>
58+
<h3>{item.title}</h3>
59+
<p class="showcase-description">{item.description}</p>
60+
<ul class="showcase-list">
61+
{item.bullets.map((bullet) => <li>{bullet}</li>)}
62+
</ul>
63+
</div>
64+
65+
<div class="showcase-placeholder">
66+
<div class="placeholder-panel">
67+
<span class="placeholder-badge">Placeholder</span>
68+
<h4>{item.placeholderTitle}</h4>
69+
<p>{item.placeholderDescription}</p>
70+
</div>
71+
</div>
72+
</article>
73+
))
74+
}
75+
</section>
76+
</div>
77+
</BaseLayout>
78+
79+
<style>
80+
.practice-page {
81+
width: min(1200px, calc(100% - 32px));
82+
margin: 0 auto;
83+
padding: 32px 0 96px;
84+
display: flex;
85+
flex-direction: column;
86+
gap: 72px;
87+
}
88+
89+
.hero-section {
90+
padding-top: 12px;
91+
}
92+
93+
.hero-shell {
94+
display: flex;
95+
flex-direction: column;
96+
align-items: center;
97+
gap: 18px;
98+
text-align: center;
99+
}
100+
101+
.hero-shell :global(.container) {
102+
width: 100%;
103+
display: flex;
104+
flex-direction: column;
105+
align-items: center;
106+
text-align: center;
107+
padding-inline: 0;
108+
}
109+
110+
.hero-shell :global(.fluid-title) {
111+
width: min(100%, 12ch);
112+
text-align: center;
113+
font-size: clamp(2.8rem, 8vw, 4.4rem);
114+
line-height: 1.05;
115+
margin-bottom: 0;
116+
white-space: normal;
117+
text-wrap: balance;
118+
}
119+
120+
.hero-shell :global(.fluid-subtitle) {
121+
width: min(100%, 42rem);
122+
margin-top: 0;
123+
margin-left: 0;
124+
margin-right: 0;
125+
max-width: min(42rem, 100%);
126+
text-align: center;
127+
font-size: clamp(0.95rem, 1vw + 0.5rem, 1.15rem);
128+
line-height: 1.75;
129+
}
130+
131+
.hero-actions {
132+
display: flex;
133+
justify-content: center;
134+
}
135+
136+
.overview-section,
137+
.showcase-section {
138+
display: flex;
139+
flex-direction: column;
140+
gap: 24px;
141+
}
142+
143+
.section-copy {
144+
max-width: 760px;
145+
}
146+
147+
.section-copy h2 {
148+
margin: 0;
149+
font-size: clamp(2rem, 4vw, 3rem);
150+
font-family: "Satoshi-Bold", sans-serif;
151+
color: var(--text-color);
152+
}
153+
154+
.section-copy p:last-child {
155+
margin: 16px 0 0;
156+
color: var(--sub-text-color);
157+
line-height: 1.7;
158+
font-size: 1rem;
159+
}
160+
161+
.eyebrow {
162+
margin: 0 0 10px;
163+
text-transform: uppercase;
164+
letter-spacing: 0.12em;
165+
font-size: 0.85rem;
166+
color: var(--accent-color);
167+
}
168+
169+
.showcase-card {
170+
display: grid;
171+
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
172+
gap: 28px;
173+
padding: 28px;
174+
border-radius: 28px;
175+
border: 1px solid var(--border-color);
176+
background:
177+
linear-gradient(
178+
135deg,
179+
color-mix(in srgb, var(--bg-color-dimmer) 72%, transparent),
180+
color-mix(in srgb, var(--bg-color) 88%, transparent)
181+
);
182+
box-sizing: border-box;
183+
}
184+
185+
.showcase-card.right .showcase-copy {
186+
order: 2;
187+
}
188+
189+
.showcase-card.right .showcase-placeholder {
190+
order: 1;
191+
}
192+
193+
.showcase-copy {
194+
display: flex;
195+
flex-direction: column;
196+
justify-content: center;
197+
}
198+
199+
.showcase-copy h3 {
200+
margin: 0;
201+
font-size: clamp(1.6rem, 3vw, 2.4rem);
202+
color: var(--text-color);
203+
}
204+
205+
.showcase-description {
206+
margin: 14px 0 0;
207+
color: var(--sub-text-color);
208+
line-height: 1.75;
209+
}
210+
211+
.showcase-list {
212+
margin: 18px 0 0;
213+
padding-left: 1.1rem;
214+
color: var(--text-color-dimmer);
215+
line-height: 1.75;
216+
}
217+
218+
.showcase-placeholder {
219+
display: flex;
220+
align-items: stretch;
221+
}
222+
223+
.placeholder-panel {
224+
width: 100%;
225+
min-height: 260px;
226+
padding: 24px;
227+
border-radius: 24px;
228+
border: 1px dashed color-mix(in srgb, var(--accent-color) 40%, transparent);
229+
background:
230+
radial-gradient(
231+
circle at top right,
232+
color-mix(in srgb, var(--accent-color-extralight) 70%, transparent),
233+
transparent 50%
234+
),
235+
color-mix(in srgb, var(--bg-color-dimmer) 55%, transparent);
236+
display: flex;
237+
flex-direction: column;
238+
justify-content: flex-end;
239+
box-sizing: border-box;
240+
}
241+
242+
.placeholder-badge {
243+
width: fit-content;
244+
padding: 0.35rem 0.65rem;
245+
border-radius: 999px;
246+
background: color-mix(in srgb, var(--accent-color) 14%, transparent);
247+
color: var(--accent-color);
248+
font-size: 0.8rem;
249+
font-weight: 600;
250+
letter-spacing: 0.05em;
251+
text-transform: uppercase;
252+
}
253+
254+
.placeholder-panel h4 {
255+
margin: 18px 0 10px;
256+
font-size: 1.35rem;
257+
color: var(--text-color);
258+
}
259+
260+
.placeholder-panel p {
261+
margin: 0;
262+
color: var(--sub-text-color);
263+
line-height: 1.7;
264+
}
265+
266+
@media (max-width: 900px) {
267+
.practice-page {
268+
width: min(100%, calc(100% - 20px));
269+
gap: 56px;
270+
padding-bottom: 72px;
271+
}
272+
273+
.showcase-card {
274+
grid-template-columns: 1fr;
275+
}
276+
277+
.showcase-card.right .showcase-copy,
278+
.showcase-card.right .showcase-placeholder {
279+
order: initial;
280+
}
281+
}
282+
283+
@media (max-width: 640px) {
284+
.practice-page {
285+
padding-top: 20px;
286+
}
287+
288+
.hero-actions {
289+
width: 100%;
290+
}
291+
292+
.showcase-card {
293+
padding: 20px;
294+
border-radius: 22px;
295+
gap: 20px;
296+
}
297+
298+
.placeholder-panel {
299+
min-height: 220px;
300+
padding: 20px;
301+
}
302+
}
303+
</style>

‎src/components/Yatcc/YatccTopbar.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@ const translatePath = useTranslatedPath(lang);
4444
<div class="nav-dropdown-item nav-dropdown-cases">
4545
<NavDropdown>
4646
<div slot="title">{t("nav.cases")}</div>
47-
<Link href="#">{t("nav.teaching")}</Link>
47+
<Link href={translatePath("/teaching-practice")}>
48+
{t("nav.teaching")}
49+
</Link>
4850
<Link href="https://arcsysu.tech/">前沿研究</Link>
4951
</NavDropdown>
5052
</div>

0 commit comments

Comments
 (0)