fix: 日历用全宽(突破 .container 1080px 限制)

日历页改用全宽容器(calendar-page__inner,max-width:100%),
不受全局 .container 的 1080px 限制,仅留左右内边距。
宽屏 1400px 时 frame 从 1032px -> 1352px,iframe 1350x843;
窄屏仍自适应。aspect-ratio 默认 16:10(min-height 500px),
窄屏回退 4:3。
This commit is contained in:
Zikai
2026-07-13 14:17:49 +00:00
parent 337d516c08
commit 19b301b937

View File

@@ -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>