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>
|
<template>
|
||||||
<div class="calendar-page">
|
<div class="calendar-page">
|
||||||
<div class="container">
|
<div class="calendar-page__inner">
|
||||||
<h1 class="calendar-page__title">{{ t('tabs.calendar') }}</h1>
|
<h1 class="calendar-page__title">{{ t('tabs.calendar') }}</h1>
|
||||||
<div class="calendar-page__frame">
|
<div class="calendar-page__frame">
|
||||||
<!-- 加载占位骨架(覆盖层,iframe 加载完成后淡出) -->
|
<!-- 加载占位骨架(覆盖层,iframe 加载完成后淡出) -->
|
||||||
@@ -43,6 +43,14 @@ const loaded = ref(false)
|
|||||||
.calendar-page {
|
.calendar-page {
|
||||||
padding: var(--space-2xl) 0;
|
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 {
|
.calendar-page__title {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
margin-bottom: var(--space-lg);
|
margin-bottom: var(--space-lg);
|
||||||
@@ -55,8 +63,8 @@ const loaded = ref(false)
|
|||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
/* 自适应宽高:宽屏 16:9,窄屏更高 */
|
/* 自适应宽高:宽屏 16:9,窄屏更高 */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 4 / 3;
|
aspect-ratio: 16 / 10;
|
||||||
min-height: 400px;
|
min-height: 500px;
|
||||||
}
|
}
|
||||||
.calendar-page__iframe {
|
.calendar-page__iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -86,9 +94,10 @@ const loaded = ref(false)
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 769px) {
|
@media (max-width: 768px) {
|
||||||
.calendar-page__frame {
|
.calendar-page__frame {
|
||||||
aspect-ratio: 16 / 10;
|
aspect-ratio: 4 / 3;
|
||||||
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user