fix(site): 修复 WebKit 渲染下终端顶部控制栏直角溢出 Bug

- 根因分析:Chrome/Safari 等 WebKit 渲染引擎中,子元素的 backdrop-blur-sm 会穿透并破坏父容器 overflow-hidden 的圆角裁切,导致顶部 bg-slate-900 控制栏出现尖锐直角;
- 修复方案:为顶部控制栏显式加上 rounded-t-2xl,为底部内容区显式加上 rounded-b-2xl,彻底解决直角与圆角混杂问题。
This commit is contained in:
tianma-if committed 2026-07-27 17:51:35 +08:00
1 parent 4e9d651c9a
commit 23d4e7e5f2
1 file changed
+3 -3
@@ -104,8 +104,8 @@ const copy = isEnglish
<!-- Pireel-style Premium Terminal Prompt Window -->
<div class="mx-auto max-w-3xl rounded-2xl border border-slate-800 bg-slate-950 shadow-2xl overflow-hidden font-mono text-xs sm:text-sm">
<!-- Top Window Bar -->
<div class="flex items-center justify-between border-b border-slate-800/80 bg-slate-900/90 px-3.5 sm:px-4 py-2.5 backdrop-blur-sm select-none">
<!-- Top Window Bar (Explicit rounded-t-2xl to prevent WebKit backdrop-blur overflow) -->
<div class="flex items-center justify-between border-b border-slate-800/80 bg-slate-900/90 rounded-t-2xl px-3.5 sm:px-4 py-2.5 backdrop-blur-sm select-none">
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5 mr-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-[#ff5f57] inline-block opacity-80"></span>
@@ -132,7 +132,7 @@ const copy = isEnglish
</div>
<!-- Prompt Content Body with Pireel Code Typography & Highlighting -->
<div class="p-4 sm:p-6 text-slate-200 leading-relaxed font-mono space-y-3 bg-slate-950/95 select-text">
<div class="p-4 sm:p-6 text-slate-200 leading-relaxed font-mono space-y-3 bg-slate-950/95 rounded-b-2xl select-text">
<p class="text-slate-400 font-semibold text-xs sm:text-sm">
{isEnglish ? "Please complete EdgeEver deployment online:" : "请在线完成 EdgeEver 部署:"}
</p>