feat(ui): 品牌幕布改为蓝底白字并居中
底换成 bg-blue-500(#3b82f6)、巨字换成白色、水平居中对齐(撤销上一版的靠左),字号沿用 min(26vw, 40svh) 撑满半屏。
This commit is contained in:
1 parent
8a682e8ed2
commit
ae919459e4
1 file changed
+5
-7
@@ -187,7 +187,7 @@
|
||||
<CookieBanner />
|
||||
</div>
|
||||
|
||||
<!-- ===== 品牌幕布:滚到最底后继续滑,露出半屏深色底 + 灰色巨字 GVSDS =====
|
||||
<!-- ===== 品牌幕布:滚到最底后继续滑,露出半屏蓝色底 + 白色巨字 GVSDS =====
|
||||
幕布固定贴住视口下半屏(z-0),平时被内容层(z-1 + 白底)完整盖住;
|
||||
末尾留半屏透明占位,滚到底时占位区把幕布整块露出来("抽盖子"式的翻页观感)。
|
||||
用 z-0 / z-1 这对正数分层,而不是负 z-index:body 的不透明背景会吃掉负 z-index,
|
||||
@@ -566,11 +566,10 @@ watch(
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 巨字靠左:字号已经接近顶满宽度,左对齐让品牌字从左侧起笔 */
|
||||
justify-content: flex-start;
|
||||
padding-left: 2vw;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: #0a0f16;
|
||||
/* bg-blue-500 */
|
||||
background: #3b82f6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -585,8 +584,7 @@ watch(
|
||||
line-height: 1;
|
||||
letter-spacing: -0.015em;
|
||||
white-space: nowrap;
|
||||
/* 就用纯灰:background-clip: text 在部分环境下会把文字整段吃成透明,得不偿失 */
|
||||
color: #4b5563;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 末尾占位:与幕布等高(半屏,svh 避开移动端地址栏收缩导致的跳动),透明 → 露出幕布 */
|
||||
|
||||
Reference in new issue
Block a user