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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user