From 19b301b9373e8cbbe51666d5d2e5c9de35a2b447 Mon Sep 17 00:00:00 2001
From: Zikai <zikai@local>
Date: Mon, 13 Jul 2026 14:17:49 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=97=A5=E5=8E=86=E7=94=A8=E5=85=A8?=
 =?UTF-8?q?=E5=AE=BD=EF=BC=88=E7=AA=81=E7=A0=B4=20.container=201080px=20?=
 =?UTF-8?q?=E9=99=90=E5=88=B6=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

日历页改用全宽容器（calendar-page__inner，max-width:100%），
不受全局 .container 的 1080px 限制，仅留左右内边距。
宽屏 1400px 时 frame 从 1032px -> 1352px，iframe 1350x843；
窄屏仍自适应。aspect-ratio 默认 16:10（min-height 500px），
窄屏回退 4:3。
---
 src/modules/calendar/Calendar.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/modules/calendar/Calendar.vue b/src/modules/calendar/Calendar.vue
index 5c2b497..17837c0 100644
--- a/src/modules/calendar/Calendar.vue
+++ b/src/modules/calendar/Calendar.vue
@@ -17,7 +17,7 @@ const loaded = ref(false)
 
 <template>
   <div class="calendar-page">
-    <div class="container">
+    <div class="calendar-page__inner">
       <h1 class="calendar-page__title">{{ t('tabs.calendar') }}</h1>
       <div class="calendar-page__frame">
         <!-- 加载占位骨架（覆盖层，iframe 加载完成后淡出） -->
@@ -43,6 +43,14 @@ const loaded = ref(false)
 .calendar-page {
   padding: var(--space-2xl) 0;
 }
+/* 日历页用全宽容器（不受全局 .container 的 1080px 限制），仅留左右内边距 */
+.calendar-page__inner {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 var(--space-lg);
+  box-sizing: border-box;
+}
 .calendar-page__title {
   font-size: 1.6rem;
   margin-bottom: var(--space-lg);
@@ -55,8 +63,8 @@ const loaded = ref(false)
   border: 1px solid var(--border);
   /* 自适应宽高：宽屏 16:9，窄屏更高 */
   width: 100%;
-  aspect-ratio: 4 / 3;
-  min-height: 400px;
+  aspect-ratio: 16 / 10;
+  min-height: 500px;
 }
 .calendar-page__iframe {
   width: 100%;
@@ -86,9 +94,10 @@ const loaded = ref(false)
   opacity: 0;
 }
 
-@media (min-width: 769px) {
+@media (max-width: 768px) {
   .calendar-page__frame {
-    aspect-ratio: 16 / 10;
+    aspect-ratio: 4 / 3;
+    min-height: 400px;
   }
 }
 </style>