增加原卷预览

src/data/exam.ts

@@ -3,7 +3,8 @@ export const examIntro = {
   eyebrow: "Class 612 Exam",
   description:
     "一份写给 2024 届 612 班的特别试卷。网页保留正文、插图与公式，原始版式可下载 Word 原卷查看。",
-  downloadHref: "/assets/exam/2024-exam.docx"
+  downloadHref: "https://s3.biss.click/OFFICE/exam-2024.pdf",
+  previewHref: "https://file.biss.click/onlinePreview?url=aHR0cHM6Ly9zMy5iaXNzLmNsaWNrL09GRklDRS9leGFtLTIwMjQucGRm&watermarkTxt=%E4%BB%85%E4%BE%9B%E9%A2%84%E8%A7%88"
 };
 
 export const examMath: Record<string, string> = {

src/pages/exam.astro

@@ -69,12 +69,33 @@ let questionNumber = 0;
         <h1>{examIntro.title}</h1>
         <p>{examIntro.description}</p>
         <div class="hero-actions">
+          <a class="button primary" href={examIntro.previewHref}>预览原卷</a>
           <a class="button primary" href={examIntro.downloadHref} download>下载原卷</a>
           <a class="button" href="#paper">阅读试卷</a>
         </div>
       </div>
     </section>
 
+    <section class="exam-preview-band" id="original-paper" aria-labelledby="original-paper-title">
+      <div class="section-inner">
+        <div class="exam-preview-head">
+          <div>
+            <p class="eyebrow">Original Paper</p>
+            <h2 id="original-paper-title">原卷预览</h2>
+          </div>
+          <a class="button" href={examIntro.downloadHref} target="_blank" rel="noreferrer">打开原卷</a>
+        </div>
+        <div class="exam-preview-frame">
+          <iframe src={examIntro.downloadHref} title="原卷预览" loading="lazy"></iframe>
+          <p>
+            如果预览没有显示，可以
+            <a href={examIntro.downloadHref} target="_blank" rel="noreferrer">打开原卷</a>
+            查看。
+          </p>
+        </div>
+      </div>
+    </section>
+
     <section class="exam-band" id="paper">
       <div class="section-inner">
         <div class="exam-workspace">

src/styles/global.css

@@ -844,6 +844,53 @@ h2 {
   font-weight: 800;
 }
 
+.exam-preview-band {
+  background: var(--paper);
+}
+
+.exam-preview-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: end;
+  margin-bottom: 18px;
+}
+
+.exam-preview-head h2 {
+  margin: 0;
+  color: var(--ink);
+  font-size: clamp(28px, 4vw, 42px);
+}
+
+.exam-preview-frame {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fffef9;
+  box-shadow: var(--shadow);
+}
+
+.exam-preview-frame iframe {
+  width: 100%;
+  height: min(78vh, 820px);
+  display: block;
+  border: 0;
+  background: #fff;
+}
+
+.exam-preview-frame p {
+  margin: 0;
+  padding: 12px 16px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.exam-preview-frame a {
+  color: var(--green);
+  font-weight: 800;
+}
+
 .exam-band {
   background:
     linear-gradient(0deg, rgba(244, 247, 238, 0.7), rgba(244, 247, 238, 0.7)),
@@ -1877,6 +1924,15 @@ h2 {
     padding-right: 0;
   }
 
+  .exam-preview-head {
+    display: grid;
+    align-items: start;
+  }
+
+  .exam-preview-head .button {
+    justify-self: start;
+  }
+
   .score-fab {
     position: fixed;
     right: 18px;