From 71323d9b63351fcfa5047c1b1681885fb841279b Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 2 Nov 2026 21:22:38 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=B8=83=E7=BD=AE=E4=BD=9C=E4=B8=9A):=20?=
 =?UTF-8?q?=E3=80=8C=E8=80=81=E5=B8=88=E6=94=B9=E4=BA=86=E8=BF=99=E8=8A=82?=
 =?UTF-8?q?=E8=AF=BE=E7=9A=84=E9=A2=98=E3=80=8D=E7=94=B5=E8=84=91=E4=B8=8A?=
 =?UTF-8?q?=E6=8C=AA=E5=88=B0=E5=8F=B3=E4=B8=8B=E8=A7=92=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E6=8C=A1=E4=BD=8F=E6=8F=90=E4=BA=A4=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=EF=BC=9B=E6=89=8B=E6=9C=BA=E4=B8=8A=E4=B8=8D=E5=86=8D=E5=87=BA?=
 =?UTF-8?q?=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

手机上照旧在顶栏下面（底下是运行例子 / 提交那条）。卡片宽度原来没算内边距和边框，
窄屏上左右各多出 22px，加 border-box。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../shared/components/LessonUpdateNotice.vue  | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/shared/components/LessonUpdateNotice.vue b/apps/web/src/shared/components/LessonUpdateNotice.vue
index 34cc401..1424e8b 100644
--- a/apps/web/src/shared/components/LessonUpdateNotice.vue
+++ b/apps/web/src/shared/components/LessonUpdateNotice.vue
@@ -5,7 +5,7 @@ import { useThemeVars } from 'naive-ui'
 import { LANGUAGE_SHOW_VALUE } from 'utils/constants'
 
 /**
- * 课上老师改了这节课的题：顶上居中一张卡，写清改了哪些，点「刷新」重新载入页面拿新的题单。
+ * 课上老师改了这节课的题：右下角一张卡，写清改了哪些，点「刷新」重新载入页面拿新的题单。
  * 不自己消失 —— 学生可能正低头写代码，几秒就没的提示等于没提示。代码草稿边写边存，刷新不丢。
  */
 const update = pendingLessonUpdate
@@ -74,12 +74,12 @@ function dismiss() {
 <style scoped>
 .notice {
   position: fixed;
-  /* 顶栏下面、居中：右上角是成就提示的位置，两个一起来不能叠上 */
-  top: 72px;
-  left: 50%;
-  transform: translateX(-50%);
+  /* 电脑上放右下角：放顶上会挡住编辑器那排按钮（提交、运行例子），右上角是成就提示的位置 */
+  right: 24px;
+  bottom: 24px;
   z-index: 3000;
-  width: min(480px, calc(100vw - 32px));
+  box-sizing: border-box;
+  width: min(420px, calc(100vw - 32px));
   padding: 16px 20px;
   border-radius: var(--oj-radius);
   border: 2px solid;
@@ -111,6 +111,19 @@ function dismiss() {
 .drop-enter-from,
 .drop-leave-to {
   opacity: 0;
-  transform: translate(-50%, -16px);
+  transform: translateY(16px);
+}
+/* 手机上还是顶栏下面一整条：底下是「运行例子 / 提交」那条（MobileActionBar），放下面就挡住它。
+   768 和 shared/composables/breakpoints 的 isMobile 是同一档 */
+@media (max-width: 768px) {
+  .notice {
+    top: 72px;
+    right: 16px;
+    bottom: auto;
+  }
+  .drop-enter-from,
+  .drop-leave-to {
+    transform: translateY(-16px);
+  }
 }
 </style>