/* ══════════════════════════════════════════════════════════════════════
底部栏样式(2026-10-10)
后台「界面预览」页可以给底部导航换皮,4 种:
default 传统通栏(一直以来的样子,本文件不参与)
float1 悬浮胶囊 · 选中项图标下面带一个小圆点 ← 参考图一
float2 悬浮胶囊 · 选中项是一块圆角高亮底(包图标+字) ← 参考图二
float3 悬浮胶囊 · 选中项图标上有一枚圆形亮底(只包图标) ← 参考图三
靠 上的 class 切换,由 h5.js 的 applyH5Nav() 写:
body.bar-float1 / bar-float2 / bar-float3 (default 时三个都不加)
★ 为什么单独一层文件:这层要在 pro.css 之后加载,才能压掉各主题里写死的 .tabbar 背景。
★ 回退 = 删掉 index.html 里本文件那一行 ,主播端立刻回到传统通栏。
★★ 高度必须和 h5.css 联动(这是最容易出错的地方):
--tabbar-h / --tabbar-gap 两个变量
· #appView.h5-page 的 padding-bottom → 正文不被胶囊压住
· .chat-input 的 bottom → AI 输入栏正好落在胶囊上方
· body.kb-open 的键盘态留白 → 键盘弹起时也留对
改这两个值,上面三处会自己跟着走。默认 86px / 0px = 老样子。
══════════════════════════════════════════════════════════════════════ */
/* ---------- 胶囊的几何 ---------- */
body.bar-float1,
body.bar-float2,
body.bar-float3{
--tabbar-h:66px;
--tabbar-gap:12px;
}
body.bar-float1 .tabbar,
body.bar-float2 .tabbar,
body.bar-float3 .tabbar{
/* 收窄 + 居中:用 width + margin auto,**不能用 transform**(键盘收起动画在用 transform) */
left:0;right:0;margin:0 auto;
width:calc(100% - 26px);
max-width:460px;
bottom:calc(var(--tabbar-gap) + env(safe-area-inset-bottom));
height:var(--tabbar-h);
padding:7px;
box-sizing:border-box;
border-radius:999px;
border-top:0;
background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.97));
backdrop-filter:blur(24px) saturate(1.7);
-webkit-backdrop-filter:blur(24px) saturate(1.7);
box-shadow:0 14px 34px -12px rgba(52,62,130,.34),
0 3px 10px -2px rgba(52,62,130,.12),
inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .18s ease,bottom .22s ease,width .22s ease;
overflow:hidden;
}
/* 键盘弹起:整条移出屏幕(用像素位移,百分比在矮胶囊上会露一截) */
body.bar-float1.kb-open .tabbar,
body.bar-float2.kb-open .tabbar,
body.bar-float3.kb-open .tabbar{
transform:translateY(calc(var(--tabbar-h) + var(--tabbar-gap) + 18px));
}
/* ---------- 胶囊里的格子 ---------- */
body.bar-float1 .tabbar button,
body.bar-float2 .tabbar button,
body.bar-float3 .tabbar button{
border-radius:999px;
gap:2px;
font-size:10.5px;
transition:color .2s,background .2s;
}
body.bar-float1 .tabbar button svg,
body.bar-float2 .tabbar button svg,
body.bar-float3 .tabbar button svg{
width:23px;height:23px;
transition:transform .2s;
}
body.bar-float1 .tabbar button.on svg,
body.bar-float2 .tabbar button.on svg,
body.bar-float3 .tabbar button.on svg{
/* 胶囊有 overflow:hidden,光晕别开太大,否则顶部会被裁掉 */
filter:drop-shadow(0 2px 5px rgba(140,100,240,.34));
}
body.bar-float1 .tabbar button.on{font-weight:600}
body.bar-float2 .tabbar button.on{font-weight:600}
body.bar-float3 .tabbar button.on{font-weight:600}
/* ══════════════ 悬浮 1:选中项下面一个小圆点 ══════════════ */
body.bar-float1 .tabbar button{position:relative;padding-bottom:10px}
body.bar-float1 .tabbar button.on::after{
content:"";position:absolute;left:50%;bottom:3px;
width:4.5px;height:4.5px;margin-left:-2.25px;border-radius:50%;
background:var(--primary);
box-shadow:0 0 7px rgba(140,100,240,.6);
}
/* ══════════════ 悬浮 2:选中项一块圆角高亮底 ══════════════ */
body.bar-float2 .tabbar button{
height:calc(var(--tabbar-h) - 14px);
border-radius:16px;
background:transparent;
}
body.bar-float2 .tabbar button.on{
/* 老机型不认 color-mix → 先用中性浅灰底兜住(任何主题下都不难看),
认的浏览器再用主题色覆盖 */
background:rgba(130,130,155,.15);
background:color-mix(in srgb,var(--primary) 13%,transparent);
}
/* ══════════════ 悬浮 3:选中项图标一枚圆形亮底 ══════════════ */
body.bar-float3 .tabbar button{position:relative}
body.bar-float3 .tabbar button.on::before{
content:"";position:absolute;left:50%;
/* 圆心落在图标正中(padding 7px + 内容居中后的图标中心),不是按钮中心 —— 否则会压到文字 */
top:calc((var(--tabbar-h) - 14px) / 2 - 7.5px);
width:33px;height:33px;margin:-16.5px 0 0 -16.5px;
border-radius:50%;
background:rgba(130,130,155,.16);
background:color-mix(in srgb,var(--primary) 14%,transparent);
}
body.bar-float3 .tabbar button.on svg{position:relative;z-index:1}
/* ══════════════ AI 输入栏也跟着收窄,和胶囊左右对齐 ══════════════
.chat-input 在 app.css:116 是 left:0;right:0;max-width:480px;margin:0 auto,
手机上 max-width 不生效 → 满宽贴边。悬浮态下胶囊左右各收 13px,
输入栏如果还满宽就是"上宽下窄"两条不对齐的边,很显眼。
★ 只在**非键盘态**收窄:键盘弹起时底部栏已整条移出屏幕,输入栏贴键盘,满宽更自然;
而且聊天页键盘态走 pro.css §18i 的 flex 布局(margin:0 由那边接管),这里别掺和。
★ 底部留 9px:和胶囊顶边之间透口气,圆角就不会跟胶囊的弧形顶撞出两个小月牙。 */
body.bar-float1:not(.kb-open) .chat-input,
body.bar-float2:not(.kb-open) .chat-input,
body.bar-float3:not(.kb-open) .chat-input{
box-sizing:border-box;
left:0;right:0;margin:0 auto;
width:calc(100% - 26px);
max-width:460px;
bottom:calc(var(--tabbar-h,66px) + var(--tabbar-gap,12px) + 9px + var(--kb,0px));
border-top:0;
border-radius:20px;
box-shadow:0 12px 28px -14px rgba(52,62,130,.30),
0 2px 8px -2px rgba(52,62,130,.10);
}
/* 深色主题下换深一点的投影,白影在深底上是灰雾 */
body.theme-galaxy.bar-float1:not(.kb-open) .chat-input,
body.theme-galaxy.bar-float2:not(.kb-open) .chat-input,
body.theme-galaxy.bar-float3:not(.kb-open) .chat-input,
body.theme-tech.bar-float1:not(.kb-open) .chat-input,
body.theme-tech.bar-float2:not(.kb-open) .chat-input,
body.theme-tech.bar-float3:not(.kb-open) .chat-input{
box-shadow:0 14px 32px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(120,150,255,.10);
}
/* ══════════════ 深色主题:换成深色玻璃 + 一圈淡淡的描边 ══════════════ */
body.theme-galaxy.bar-float1 .tabbar,
body.theme-galaxy.bar-float2 .tabbar,
body.theme-galaxy.bar-float3 .tabbar{
background:linear-gradient(180deg,rgba(18,24,50,.86),rgba(11,16,36,.96));
box-shadow:0 16px 38px -14px rgba(0,0,0,.78),
0 0 0 1px rgba(120,150,255,.16),
inset 0 1px 0 rgba(255,255,255,.06);
}
body.theme-tech.bar-float1 .tabbar,
body.theme-tech.bar-float2 .tabbar,
body.theme-tech.bar-float3 .tabbar{
background:linear-gradient(180deg,rgba(15,20,36,.86),rgba(8,12,24,.96));
box-shadow:0 16px 38px -14px rgba(0,0,0,.78),
0 0 0 1px rgba(45,212,255,.16),
inset 0 1px 0 rgba(255,255,255,.06);
}
/* 深色主题下「选中项高亮」也要深一号,浅色底会在深玻璃上糊掉 */
body.theme-galaxy.bar-float2 .tabbar button.on,
body.theme-tech.bar-float2 .tabbar button.on{
background:rgba(140,160,255,.16);
background:color-mix(in srgb,var(--primary) 22%,transparent);
}
body.theme-galaxy.bar-float3 .tabbar button.on::before,
body.theme-tech.bar-float3 .tabbar button.on::before{
background:rgba(140,160,255,.16);
background:color-mix(in srgb,var(--primary) 22%,transparent);
}
/* 低端机(关了毛玻璃):胶囊用更实的底,别糊成一团 */
body.low-gpu.bar-float1 .tabbar,
body.low-gpu.bar-float2 .tabbar,
body.low-gpu.bar-float3 .tabbar{
background:rgba(255,255,255,.97);
backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.low-gpu.theme-galaxy.bar-float1 .tabbar,
body.low-gpu.theme-galaxy.bar-float2 .tabbar,
body.low-gpu.theme-galaxy.bar-float3 .tabbar,
body.low-gpu.theme-tech.bar-float1 .tabbar,
body.low-gpu.theme-tech.bar-float2 .tabbar,
body.low-gpu.theme-tech.bar-float3 .tabbar{
background:rgba(13,18,38,.98);
}
/* ══════════════ 窄屏兜底 ══════════════ */
@media (max-width:360px){
body.bar-float1 .tabbar,
body.bar-float2 .tabbar,
body.bar-float3 .tabbar{width:calc(100% - 20px);padding:6px}
body.bar-float1 .tabbar button,
body.bar-float2 .tabbar button,
body.bar-float3 .tabbar button{font-size:10px}
body.bar-float1 .tabbar button svg,
body.bar-float2 .tabbar button svg,
body.bar-float3 .tabbar button svg{width:21px;height:21px}
}
/* ══════════════════════════════════════════════════════════════════════
第二批样式(2026-10-11,需求 AL)
后台「底部栏样式」又加了 4 款,都是「大圆角悬浮条」(不是第一版的胶囊):
halo 光环 白底 · 图标仍是细线条,AI 那格换成「圆环 + AI」,选中项一圈淡紫光环
orb 光球 白底 · 六个图标全换成**渐变彩色实心**,一眼立体
geo 几何 白底 · 极简细线条(1.5),AI 那格换成渐变四角星
dark 暗黑科技 深色底 · 图标发白光,选中项蓝紫发光,AI 是发光 A 星标
★★ 分工(别搞混):
· 「容器长相 + 图标着色/发光」= 本文件(靠 body.bar-xxx 切)
· 「图标形状本身」= h5.js 的 BAR_SKIN 表(halo/geo/dark 只换 AI 一格,orb 换全部 6 格)
★ 高度还是走 --tabbar-h / --tabbar-gap 两个变量,和第一版完全同一套联动关系。
══════════════════════════════════════════════════════════════════════ */
/* ---------- 几何:大圆角悬浮条 ---------- */
body.bar-halo,
body.bar-orb,
body.bar-geo,
body.bar-dark{
--tabbar-h:66px;
--tabbar-gap:12px;
}
body.bar-halo .tabbar,
body.bar-orb .tabbar,
body.bar-geo .tabbar,
body.bar-dark .tabbar{
left:0;right:0;margin:0 auto;
width:calc(100% - 26px);
max-width:460px;
bottom:calc(var(--tabbar-gap) + env(safe-area-inset-bottom));
height:var(--tabbar-h);
padding:7px;
box-sizing:border-box;
border-radius:22px; /* 大圆角,不是全圆胶囊 —— 跟第一版拉开区别 */
border-top:0;
background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.99));
backdrop-filter:blur(24px) saturate(1.6);
-webkit-backdrop-filter:blur(24px) saturate(1.6);
box-shadow:0 12px 30px -12px rgba(52,62,130,.30),
0 2px 8px -2px rgba(52,62,130,.10),
inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .18s ease,bottom .22s ease,width .22s ease;
overflow:hidden;
}
/* 键盘弹起:整条移出屏幕 */
body.bar-halo.kb-open .tabbar,
body.bar-orb.kb-open .tabbar,
body.bar-geo.kb-open .tabbar,
body.bar-dark.kb-open .tabbar{
transform:translateY(calc(var(--tabbar-h) + var(--tabbar-gap) + 18px));
}
/* ---------- 条里的格子 ---------- */
body.bar-halo .tabbar button,
body.bar-orb .tabbar button,
body.bar-geo .tabbar button,
body.bar-dark .tabbar button{
border-radius:15px;
gap:2px;
font-size:10.5px;
transition:color .2s,background .2s,transform .2s;
}
body.bar-halo .tabbar button svg,
body.bar-orb .tabbar button svg,
body.bar-geo .tabbar button svg,
body.bar-dark .tabbar button svg{
width:24px;height:24px;
transition:transform .2s;
}
body.bar-halo .tabbar button.on,
body.bar-orb .tabbar button.on,
body.bar-geo .tabbar button.on,
body.bar-dark .tabbar button.on{font-weight:600}
body.bar-halo .tabbar button.on svg,
body.bar-orb .tabbar button.on svg,
body.bar-geo .tabbar button.on svg,
body.bar-dark .tabbar button.on svg{transform:scale(1.06)}
/* ══════════ 光环 halo ══════════ */
body.bar-halo .tabbar button{position:relative}
/* 选中项背上一圈淡紫光晕:用 radial-gradient 做柔边,比 box-shadow 更像"光环" */
body.bar-halo .tabbar button.on::before{
content:"";position:absolute;left:50%;
top:calc((var(--tabbar-h) - 14px) / 2 - 9px);
width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
background:radial-gradient(circle,rgba(139,107,250,.26) 0%,rgba(139,107,250,.10) 52%,rgba(139,107,250,0) 72%);
pointer-events:none;
}
body.bar-halo .tabbar button.on svg{position:relative;z-index:1}
/* ══════════ 光球 orb ══════════
图标自带渐变填充(h5.js 里内联了 ),所以这层只管"别把颜色盖掉 + 加一点投影层次" */
body.bar-orb .tabbar button.on svg{
filter:drop-shadow(0 3px 7px rgba(110,80,230,.34));
}
/* ══════════ 几何 geo ══════════
线更细(1.5),整体更"轻";AI 那格是渐变四角星,不受这条影响(它是实心填充) */
body.bar-geo .tabbar button svg{stroke-width:1.5}
body.bar-geo .tabbar button.on{letter-spacing:.3px}
/* ══════════ 暗黑科技 dark ══════════ */
body.bar-dark .tabbar{
background:linear-gradient(180deg,#161A38 0%,#0A0D1E 100%);
box-shadow:0 18px 38px -14px rgba(0,0,0,.72),
0 0 0 1px rgba(120,150,255,.16),
inset 0 1px 0 rgba(255,255,255,.06);
}
body.bar-dark .tabbar button{color:#8B94B8}
body.bar-dark .tabbar button.on{color:#7FB0FF}
/* 选中项:双层 drop-shadow 叠出"发光"感(单层只会像描边) */
body.bar-dark .tabbar button.on svg{
filter:drop-shadow(0 0 5px rgba(110,160,255,.95)) drop-shadow(0 0 13px rgba(124,92,250,.6));
}
/* 深色底上白字更清楚,别让它继续偏灰 */
body.bar-dark .tabbar button.on{text-shadow:0 0 10px rgba(110,160,255,.45)}
/* 暗黑款本身已是深色,galaxy/tech 主题下不用再换底 */
body.theme-galaxy.bar-dark .tabbar,
body.theme-tech.bar-dark .tabbar{
background:linear-gradient(180deg,#161A38 0%,#0A0D1E 100%);
}
/* 低端机(关了毛玻璃):白底款用实色兜住 */
body.low-gpu.bar-halo .tabbar,
body.low-gpu.bar-orb .tabbar,
body.low-gpu.bar-geo .tabbar{
background:rgba(255,255,255,.98);
backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* ══════════════ AI 输入栏也跟着收窄,和悬浮条左右对齐 ══════════════ */
body.bar-halo:not(.kb-open) .chat-input,
body.bar-orb:not(.kb-open) .chat-input,
body.bar-geo:not(.kb-open) .chat-input,
body.bar-dark:not(.kb-open) .chat-input{
box-sizing:border-box;
left:0;right:0;margin:0 auto;
width:calc(100% - 26px);
max-width:460px;
bottom:calc(var(--tabbar-h,66px) + var(--tabbar-gap,12px) + 9px + var(--kb,0px));
border-top:0;
border-radius:20px;
box-shadow:0 12px 28px -14px rgba(52,62,130,.30),
0 2px 8px -2px rgba(52,62,130,.10);
}
body.theme-galaxy.bar-halo:not(.kb-open) .chat-input,
body.theme-galaxy.bar-orb:not(.kb-open) .chat-input,
body.theme-galaxy.bar-geo:not(.kb-open) .chat-input,
body.theme-galaxy.bar-dark:not(.kb-open) .chat-input,
body.theme-tech.bar-halo:not(.kb-open) .chat-input,
body.theme-tech.bar-orb:not(.kb-open) .chat-input,
body.theme-tech.bar-geo:not(.kb-open) .chat-input,
body.theme-tech.bar-dark:not(.kb-open) .chat-input{
box-shadow:0 14px 32px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(120,150,255,.10);
}
/* ══════════════ 窄屏兜底 ══════════════ */
@media (max-width:360px){
body.bar-halo .tabbar,
body.bar-orb .tabbar,
body.bar-geo .tabbar,
body.bar-dark .tabbar{width:calc(100% - 20px);padding:6px}
body.bar-halo .tabbar button,
body.bar-orb .tabbar button,
body.bar-geo .tabbar button,
body.bar-dark .tabbar button{font-size:10px}
body.bar-halo .tabbar button svg,
body.bar-orb .tabbar button svg,
body.bar-geo .tabbar button svg,
body.bar-dark .tabbar button svg{width:21px;height:21px}
}
/* ══════════════════════════════════════════════════════════════════════
光球 2 orb2(2026-10-11,负责人原话:"点那个闪电(闪念)的图标也会亮,
不点的话上面图标也是灰色的")
★★ 实现思路:图标跟「光球」**一模一样** —— h5.js 里一行 `BAR_SKIN.orb2 = BAR_SKIN.orb`;
容器长相也整个复用 —— h5.js 在 orb2 下会额外挂一个 `bar-orb` class。
所以这里只写「亮不亮」这一层差异,**一个图标都没重画**。
★ 为什么用 CSS filter 而不是另写一套灰图标:
另写一套的话,主播每点一次底部导航都要重跑 applyBarSkin 去换 SVG(会闪);
用 filter 的话,switchTab 只是把 .on 从这格挪到那格,亮度跟着 .on 自己就变了 ——
零成本、零闪烁,而且以后换图标两边一起生效。
══════════════════════════════════════════════════════════════════════ */
/* 未选中:整块压成灰 */
body.bar-orb2 .tabbar button svg{
filter:grayscale(1) brightness(.95) opacity(.45);
transition:filter .24s ease,transform .24s ease;
}
/* 选中:恢复彩色 → 放大 → 再压一层跟自己同色的光 */
body.bar-orb2 .tabbar button.on svg{
position:relative;z-index:1;
filter:drop-shadow(0 2px 7px rgba(var(--glow,139,107,250),.6));
transform:scale(1.12);
}
/* 选中格背后的一团柔光(颜色跟该格图标的主色走) */
body.bar-orb2 .tabbar button{position:relative}
body.bar-orb2 .tabbar button.on::before{
content:"";position:absolute;left:50%;
top:calc((var(--tabbar-h) - 14px) / 2 - 10px);
width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
background:radial-gradient(circle,rgba(var(--glow,139,107,250),.26) 0%,
rgba(var(--glow,139,107,250),.09) 55%,rgba(var(--glow,139,107,250),0) 74%);
pointer-events:none;
}
/* 每格一个光晕色 —— 跟 BAR_SKIN.orb 里那一格渐变的主色调对齐 */
body.bar-orb2 .tabbar button[data-tab="partner"].on{--glow:167,139,250} /* 紫 + 金星 */
body.bar-orb2 .tabbar button[data-tab="thought"].on{--glow:145,113,252} /* 紫:闪念 */
body.bar-orb2 .tabbar button[data-tab="study"].on {--glow:47,107,228} /* 蓝:学习 */
body.bar-orb2 .tabbar button[data-tab="wall"].on {--glow:47,182,90} /* 绿:成长墙 */
body.bar-orb2 .tabbar button[data-tab="exam"].on {--glow:247,103,7} /* 橙:目标 */
body.bar-orb2 .tabbar button[data-tab="ai"].on {--glow:124,92,250} /* 紫:AI 导师 */
body.bar-orb2 .tabbar button[data-tab="me"].on {--glow:110,124,152} /* 灰蓝:我的 */
/* 选中项文字也跟着亮一下 */
body.bar-orb2 .tabbar button.on{
font-weight:600;
text-shadow:0 0 10px rgba(var(--glow,139,107,250),.30);
}