样式
build / build (push) Successful in 3m10s

This commit is contained in:
wanghu
2026-10-23 16:46:07 +08:00
parent 8e9663350d
commit e6979104b6
2 changed files with 17 additions and 4 deletions
+11 -4
View File
@@ -48,8 +48,9 @@ const showHero = computed(
<layout v-if="isLogin" :layoutData="layoutData" /> <layout v-if="isLogin" :layoutData="layoutData" />
<div v-if="isLogin" class="base-wrap-main alone-page"> <div v-if="isLogin" class="base-wrap-main alone-page">
<div class="main-wrapper"> <div class="main-wrapper">
<!-- 方案D · 蓝天校园:hero 刊头(首页/全校列表)+ 栏目条 + 页面内容 --> <!-- 方案D · 蓝天校园:hero 刊头(首页/全校列表)+ 栏目条 + 页面内容;
<div class="app-frame"> no-hero:无刊头页由 body 顶部留白让出固定顶栏,刊头页靠 hero 负 margin 压入顶栏玻璃之下 -->
<div class="app-frame" :class="{ 'no-hero': !showHero }">
<HomeHero v-if="showHero"></HomeHero> <HomeHero v-if="showHero"></HomeHero>
<ModuleBar></ModuleBar> <ModuleBar></ModuleBar>
<div class="app-frame-body"> <div class="app-frame-body">
@@ -77,13 +78,19 @@ body {
max-width: 1180px; max-width: 1180px;
margin: 0 auto; margin: 0 auto;
} }
/* hero 顶入玻璃顶栏之下(对齐原型 topbar margin-bottom:-51px 的叠压效果) */ /* hero 刊头从视口顶起步:base-wrap-main 零 padding 后无需再抵消旧留白,
fixed 玻璃顶栏(z30)直接叠压刊头顶部,即原型 topbar margin-bottom:-51px 的效果 */
.app-frame .hero { .app-frame .hero {
margin-top: -50px; margin-top: 0;
} }
.app-frame-body { .app-frame-body {
padding: 12px 0 56px; padding: 12px 0 56px;
} }
/* 无刊头页(记录/成长足迹/区域等):base-wrap-main 已零 padding,固定顶栏(51px)悬在内容上方,
这里补回让位(51px 栏高 + 12px 原间隙),栏目条(module-bar)不致压入顶栏之下 */
.app-frame.no-hero {
padding-top: 63px;
}
/* 全站页脚:固定窗口底部始终可见,玻璃质感与顶栏呼应;滚动内容以上留白防遮挡 */ /* 全站页脚:固定窗口底部始终可见,玻璃质感与顶栏呼应;滚动内容以上留白防遮挡 */
.app-footer { .app-footer {
position: fixed; position: fixed;
+6
View File
@@ -35,6 +35,12 @@ body::after { right: -160px; }
晚于本样式注入)均不得遮挡 body 的天空渐变:html 前缀提到 (0,1,1) 与加载顺序无关地稳赢。 晚于本样式注入)均不得遮挡 body 的天空渐变:html 前缀提到 (0,1,1) 与加载顺序无关地稳赢。
背景透出是本应用对皮肤声明的唯一越权缝,其余外观仍交皮肤管控 */ 背景透出是本应用对皮肤声明的唯一越权缝,其余外观仍交皮肤管控 */
html .base-wrap-main { background: transparent; } html .base-wrap-main { background: transparent; }
/* 布局壳纠正(老壳 layout.css 的 56px 顶留白 + 线上皮肤 base.layout.css 的
padding:calc(var(--topbar-h) + var(--crumb-h)) 0 0 var(--side-w) 均不适用本应用):
本应用自渲染 fixed 玻璃顶栏、1180px 居中单列,内容从视口顶全宽起步(刊头以负 margin 压入顶栏玻璃之下),
外壳不得再加 padding;高度占满视口。html 前缀提到 (0,1,1),与加载顺序无关地压过两者。
固定顶栏(51px)的让位由 .app-frame.no-hero .app-frame-body 按页处理,见 App.vue */
html .base-wrap-main { padding: 0; height: 100%; }
a { text-decoration: none; color: inherit; } a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; } ul, ol { list-style: none; }
.container { width: 1180px; margin: 0 auto; } .container { width: 1180px; margin: 0 auto; }