专题页面

2026-05-03 20:33:26 +08:00
parent 27c801a7fd
commit bfcef23698
3 changed files with 740 additions and 0 deletions
@@ -0,0 +1,164 @@
+---
+import "../styles/anniversary.css";
+
+const memoryCards = [
+  {
+    kicker: "2021",
+    title: "把名字写进同一张名单",
+    text: "从陌生的座位、军训的队列，到第一次一起等铃声响起，班级的故事从那时开始慢慢有了形状。"
+  },
+  {
+    kicker: "2022",
+    title: "普通日子也有回声",
+    text: "网课、考试、活动、晚自习，很多当时只觉得匆忙的片段，后来都变成了可以反复想起的证据。"
+  },
+  {
+    kicker: "2023",
+    title: "高三把我们推向同一个方向",
+    text: "倒计时、试卷、誓师和一次次模拟，把每个人的步伐压得很紧，也把彼此留得更深。"
+  },
+  {
+    kicker: "2024",
+    title: "毕业不是散场",
+    text: "离开校门以后，我们去了不同的地方，但那些一起走过的清晨和黄昏，仍然在这里被好好保存。"
+  }
+];
+
+const gallery = [
+  "/assets/campus-hero.png",
+  "/assets/exam/image1.png",
+  "/assets/exam/image3.jpg",
+  "/assets/exam/image4.jpeg",
+  "/assets/exam/image5.jpg",
+  "/assets/exam/image6.jpg"
+];
+
+const backgroundMusic = "/assets/anniversary/background-music.mp3";
+const anniversaryVideo = "/assets/anniversary/anniversary-video.mp4";
+const videoPoster = "/assets/campus-hero.png";
+---
+
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>2024届12班周年专题</title>
+    <meta
+      name="description"
+      content="2024届12班周年专题页，收下那些毕业之后仍然清晰的瞬间。"
+    />
+  </head>
+  <body>
+    <main class="anniversary-page">
+      <section class="hero" aria-labelledby="hero-title">
+        <img class="hero-media" src="/assets/campus-hero.png" alt="校园记忆" />
+        <div class="hero-shade" aria-hidden="true"></div>
+        <nav class="topbar" aria-label="周年专题导航">
+          <a class="home-link" href="/">2024届12班</a>
+          <div class="topbar-links">
+            <a href="#memory">时间切片</a>
+            <a href="#gallery">影像回放</a>
+            <a href="#letter">写给我们</a>
+          </div>
+        </nav>
+        <div class="hero-content">
+          <p class="eyebrow">毕业周年专题</p>
+          <h1 id="hero-title">我们仍在同一段青春里相遇</h1>
+          <p class="hero-copy">
+            从 2024 年夏天出发，到今天再次回望。这里不急着总结人生，只把一起经过的日子重新点亮。
+          </p>
+          <div class="hero-actions" aria-label="页面入口">
+            <a class="primary-action" href="#memory">开始回望</a>
+            <a class="secondary-action" href="/gallery/">去照片墙</a>
+          </div>
+        </div>
+        <aside class="music-player" aria-label="背景音乐">
+          <span class="music-mark" aria-hidden="true">♪</span>
+          <div class="music-copy">
+            <strong>背景乐</strong>
+            <span>替换 public/assets/anniversary/background-music.mp3</span>
+          </div>
+          <audio controls preload="metadata" loop>
+            <source src={backgroundMusic} type="audio/mpeg" />
+          </audio>
+        </aside>
+        <div class="hero-count">
+          <strong>2</strong>
+          <span>周年纪念</span>
+        </div>
+      </section>
+
+      <section class="ticker" aria-label="纪念短句">
+        <span>铃声响过</span>
+        <span>操场还亮着</span>
+        <span>试卷翻页</span>
+        <span>合照定格</span>
+        <span>名字仍被记得</span>
+      </section>
+
+      <section class="memory-section" id="memory" aria-labelledby="memory-title">
+        <div class="section-heading">
+          <p class="eyebrow">Time Slices</p>
+          <h2 id="memory-title">把三年拆成几束光</h2>
+        </div>
+        <div class="memory-grid">
+          {
+            memoryCards.map((card) => (
+              <article class="memory-card">
+                <span>{card.kicker}</span>
+                <h3>{card.title}</h3>
+                <p>{card.text}</p>
+              </article>
+            ))
+          }
+        </div>
+      </section>
+
+      <section class="gallery-section" id="gallery" aria-labelledby="gallery-title">
+        <div class="section-heading">
+          <p class="eyebrow">Replay</p>
+          <h2 id="gallery-title">一些会自己发光的画面</h2>
+        </div>
+        <div class="video-feature" aria-label="周年视频">
+          <div class="video-frame">
+            <video controls preload="metadata" poster={videoPoster}>
+              <source src={anniversaryVideo} type="video/mp4" />
+            </video>
+          </div>
+          <div class="video-caption">
+            <p class="eyebrow">Film</p>
+            <h3>周年视频</h3>
+            <p>
+              替换 public/assets/anniversary/anniversary-video.mp4，这里会显示为专题视频播放区。
+            </p>
+          </div>
+        </div>
+        <div class="photo-strip">
+          {
+            gallery.map((src, index) => (
+              <figure class={`photo-card photo-card-${index + 1}`}>
+                <img src={src} alt={`周年纪念影像 ${index + 1}`} loading={index === 0 ? "eager" : "lazy"} />
+              </figure>
+            ))
+          }
+        </div>
+      </section>
+
+      <section class="letter-section" id="letter" aria-labelledby="letter-title">
+        <div class="letter-panel">
+          <p class="eyebrow">For Us</p>
+          <h2 id="letter-title">写给毕业后的我们</h2>
+          <p>
+            后来的我们会遇见新的城市、新的课程、新的工作和新的自己。可只要有人再次提起那间教室、那次考试、那张合照，
+            2024届12班就会短暂地重新集合。
+          </p>
+          <p>
+            愿每一次回到这里，都不是为了停在过去，而是确认：那些一起认真生活过的日子，已经成为继续往前走的底气。
+          </p>
+          <a href="/messages/">留下新的近况</a>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,575 @@
+:root {
+  color: #24170f;
+  background: #f7efe3;
+  font-family:
+    "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui,
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background:
+    linear-gradient(90deg, rgba(36, 23, 15, 0.05) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(36, 23, 15, 0.05) 1px, transparent 1px),
+    #f7efe3;
+  background-size: 42px 42px;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.anniversary-page {
+  overflow: hidden;
+}
+
+.hero {
+  position: relative;
+  min-height: 92vh;
+  display: grid;
+  align-items: end;
+  padding: 28px clamp(18px, 5vw, 72px) 64px;
+  color: #fff9ed;
+  isolation: isolate;
+}
+
+.hero-media,
+.hero-shade {
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+}
+
+.hero-media {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.96) contrast(1.04);
+}
+
+.hero-shade {
+  z-index: -1;
+  background:
+    linear-gradient(90deg, rgba(22, 12, 7, 0.86), rgba(22, 12, 7, 0.34) 58%, rgba(22, 12, 7, 0.52)),
+    linear-gradient(0deg, rgba(22, 12, 7, 0.9), transparent 44%);
+}
+
+.topbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  align-items: center;
+  padding: 24px clamp(18px, 5vw, 72px);
+}
+
+.home-link,
+.topbar-links a {
+  border: 1px solid rgba(255, 249, 237, 0.42);
+  background: rgba(255, 249, 237, 0.1);
+  backdrop-filter: blur(14px);
+}
+
+.home-link {
+  padding: 12px 16px;
+  font-weight: 800;
+}
+
+.topbar-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.topbar-links a {
+  padding: 10px 13px;
+  font-size: 14px;
+}
+
+.hero-content {
+  width: min(900px, 100%);
+  padding-top: 96px;
+}
+
+.eyebrow {
+  margin: 0 0 14px;
+  color: #c75f2a;
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.hero .eyebrow {
+  color: #ffd36c;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  max-width: 980px;
+  margin-bottom: 22px;
+  font-size: clamp(46px, 8vw, 118px);
+  line-height: 0.96;
+  letter-spacing: 0;
+  text-wrap: balance;
+}
+
+.hero-copy {
+  max-width: 720px;
+  margin-bottom: 32px;
+  color: rgba(255, 249, 237, 0.84);
+  font-size: clamp(18px, 2vw, 24px);
+  line-height: 1.7;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.primary-action,
+.secondary-action,
+.letter-panel a {
+  display: inline-flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 22px;
+  font-weight: 900;
+}
+
+.primary-action,
+.letter-panel a {
+  background: #ffd36c;
+  color: #24170f;
+}
+
+.secondary-action {
+  border: 1px solid rgba(255, 249, 237, 0.5);
+  color: #fff9ed;
+}
+
+.music-player {
+  position: fixed;
+  right: clamp(14px, 3vw, 34px);
+  bottom: clamp(14px, 3vw, 34px);
+  z-index: 20;
+  width: min(420px, calc(100vw - 28px));
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 12px 14px;
+  align-items: center;
+  padding: 14px;
+  border: 1px solid rgba(255, 249, 237, 0.34);
+  background: rgba(20, 35, 29, 0.46);
+  backdrop-filter: blur(18px);
+  box-shadow: 0 18px 50px rgba(22, 12, 7, 0.24);
+}
+
+.music-mark {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #ffd36c;
+  color: #24170f;
+  font-size: 24px;
+  font-weight: 900;
+}
+
+.music-copy {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.music-copy strong,
+.music-copy span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.music-copy strong {
+  font-size: 15px;
+}
+
+.music-copy span {
+  color: rgba(255, 249, 237, 0.66);
+  font-size: 12px;
+}
+
+.music-player audio {
+  grid-column: 1 / -1;
+  width: 100%;
+  height: 38px;
+}
+
+.hero-count {
+  position: absolute;
+  right: clamp(18px, 5vw, 72px);
+  bottom: 42px;
+  display: grid;
+  place-items: center;
+  width: clamp(108px, 14vw, 172px);
+  aspect-ratio: 1;
+  border: 1px solid rgba(255, 249, 237, 0.4);
+  border-radius: 50%;
+  background: rgba(255, 249, 237, 0.12);
+  backdrop-filter: blur(16px);
+}
+
+.hero-count strong {
+  font-size: clamp(42px, 7vw, 82px);
+  line-height: 0.9;
+}
+
+.hero-count span {
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.ticker {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding: 18px clamp(18px, 5vw, 72px);
+  color: #fff9ed;
+  background: #24170f;
+  scrollbar-width: none;
+}
+
+.ticker span {
+  flex: 0 0 auto;
+  padding: 8px 16px;
+  border: 1px solid rgba(255, 249, 237, 0.25);
+  border-radius: 999px;
+  color: rgba(255, 249, 237, 0.82);
+  font-size: 14px;
+}
+
+.memory-section,
+.gallery-section,
+.letter-section {
+  padding: clamp(64px, 9vw, 120px) clamp(18px, 5vw, 72px);
+}
+
+.section-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
+  gap: 28px;
+  align-items: end;
+  margin-bottom: 34px;
+}
+
+.section-heading h2,
+.letter-panel h2 {
+  margin-bottom: 0;
+  color: #24170f;
+  font-size: clamp(34px, 5vw, 72px);
+  line-height: 1.04;
+  letter-spacing: 0;
+}
+
+.memory-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border: 1px solid #24170f;
+  background: #24170f;
+  gap: 1px;
+}
+
+.memory-card {
+  min-height: 360px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 24px;
+  background: #f7efe3;
+}
+
+.memory-card span {
+  color: #c75f2a;
+  font-size: 46px;
+  font-weight: 950;
+  line-height: 1;
+}
+
+.memory-card h3 {
+  margin-bottom: 16px;
+  font-size: 25px;
+  line-height: 1.18;
+  letter-spacing: 0;
+}
+
+.memory-card p,
+.letter-panel p {
+  color: rgba(36, 23, 15, 0.72);
+  font-size: 16px;
+  line-height: 1.9;
+}
+
+.gallery-section {
+  color: #fff9ed;
+  background: #14231d;
+}
+
+.gallery-section .section-heading h2 {
+  color: #fff9ed;
+}
+
+.video-feature {
+  display: grid;
+  grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.32fr);
+  gap: clamp(18px, 4vw, 42px);
+  align-items: end;
+  margin-bottom: clamp(28px, 5vw, 58px);
+}
+
+.video-frame {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  border: 1px solid rgba(255, 249, 237, 0.18);
+  background:
+    linear-gradient(135deg, rgba(255, 211, 108, 0.22), transparent),
+    rgba(255, 249, 237, 0.08);
+}
+
+.video-frame video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.video-caption {
+  padding-bottom: 10px;
+}
+
+.video-caption h3 {
+  margin-bottom: 14px;
+  color: #fff9ed;
+  font-size: clamp(28px, 4vw, 52px);
+  line-height: 1.08;
+}
+
+.video-caption p:last-child {
+  margin-bottom: 0;
+  color: rgba(255, 249, 237, 0.7);
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+.photo-strip {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-auto-rows: 86px;
+  gap: 14px;
+}
+
+.photo-card {
+  margin: 0;
+  min-height: 180px;
+  overflow: hidden;
+  background: rgba(255, 249, 237, 0.1);
+}
+
+.photo-card img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.photo-card-1 {
+  grid-column: span 5;
+  grid-row: span 5;
+}
+
+.photo-card-2 {
+  grid-column: span 3;
+  grid-row: span 3;
+}
+
+.photo-card-3 {
+  grid-column: span 4;
+  grid-row: span 4;
+}
+
+.photo-card-4 {
+  grid-column: span 4;
+  grid-row: span 3;
+}
+
+.photo-card-5 {
+  grid-column: span 3;
+  grid-row: span 4;
+}
+
+.photo-card-6 {
+  grid-column: span 5;
+  grid-row: span 3;
+}
+
+.letter-section {
+  display: grid;
+  min-height: 76vh;
+  align-items: center;
+  background:
+    linear-gradient(135deg, rgba(199, 95, 42, 0.16), transparent 36%),
+    #f7efe3;
+}
+
+.letter-panel {
+  width: min(820px, 100%);
+  margin-inline: auto;
+  border-left: 6px solid #c75f2a;
+  padding: 12px 0 12px clamp(24px, 5vw, 56px);
+}
+
+.letter-panel h2 {
+  margin-bottom: 24px;
+}
+
+.letter-panel a {
+  margin-top: 14px;
+}
+
+@media (max-width: 900px) {
+  .hero {
+    min-height: 88vh;
+    padding-bottom: 42px;
+  }
+
+  .topbar {
+    align-items: flex-start;
+  }
+
+  .topbar-links {
+    max-width: 190px;
+  }
+
+  .hero-count {
+    position: static;
+    margin-top: 38px;
+  }
+
+  .music-player {
+    width: min(420px, calc(100vw - 28px));
+  }
+
+  .section-heading {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .memory-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .photo-strip {
+    grid-template-columns: repeat(6, 1fr);
+    grid-auto-rows: 72px;
+  }
+
+  .video-feature {
+    grid-template-columns: 1fr;
+  }
+
+  .photo-card-1,
+  .photo-card-3,
+  .photo-card-6 {
+    grid-column: span 6;
+  }
+
+  .photo-card-2,
+  .photo-card-4,
+  .photo-card-5 {
+    grid-column: span 3;
+  }
+}
+
+@media (max-width: 560px) {
+  .topbar {
+    position: relative;
+    padding: 0 0 42px;
+    flex-direction: column;
+  }
+
+  .topbar-links {
+    max-width: none;
+    justify-content: flex-start;
+  }
+
+  .hero {
+    min-height: auto;
+    padding-top: 18px;
+  }
+
+  h1 {
+    font-size: 44px;
+  }
+
+  .hero-copy {
+    font-size: 17px;
+  }
+
+  .music-player {
+    grid-template-columns: auto minmax(0, 1fr);
+    padding: 12px;
+  }
+
+  .music-mark {
+    width: 38px;
+  }
+
+  .music-copy span {
+    display: none;
+  }
+
+  .memory-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .memory-card {
+    min-height: 280px;
+  }
+
+  .photo-strip {
+    display: flex;
+    overflow-x: auto;
+    padding-bottom: 10px;
+  }
+
+  .photo-card {
+    flex: 0 0 78%;
+    height: 320px;
+  }
+
+  .letter-panel {
+    border-left-width: 4px;
+  }
+}