style(hover-nav): 优化导航按钮视觉效果与注释

1.  调整border-radius注释位置,补充为clip-path兜底说明
2.  简化旧版aspect-ratio兼容注释
3.  为通用背景添加同色边框消除抗锯齿毛刺
4.  为文字和图标添加凹陷雕刻式text-shadow增强立体感
This commit is contained in:
2026-07-02 15:21:31 +08:00
parent c430c8971c
commit 15a61fdc39

View File

@@ -252,6 +252,7 @@ export default {
'max-width': '80rpx',
'max-height': '80rpx',
'aspect-ratio': '1',
// border-radius 保留作 clip-path 不支持时的 fallback
'border-radius': '50%',
'flex-shrink': '0',
'flex-grow': '0',
@@ -743,9 +744,7 @@ export default {
border: 0;
padding: 0;
overflow: hidden;
/* CSS 端兜底:即使 inline-style 失效,也能保证 1:1 比例
* (微信小程序基础库 < 3.0 不支持 aspect-ratio,但 width/height 已固定 80rpx,
* 此处主要给 H5/新版小程序双保险) */
/* CSS 端兜底:即使 inline-style 失效,也能保证 1:1 比例 */
aspect-ratio: 1;
/* 锁死宽高,防止父级 flex 容器压缩 */
min-width: 80rpx;
@@ -759,7 +758,10 @@ export default {
}
.common-bg {
background-color: var(--hover-nav-bg-color);
background-color: var(--hover-nav-bg-color);
/* 完全扁平:只保留 1px 同色描边消除抗锯齿边缘毛刺,
* 不加任何阴影/内高光,按钮与背景"贴"在同一平面上。 */
box-shadow: 0 0 0 1px var(--hover-nav-bg-color);
}
.btn-item text {
@@ -784,6 +786,15 @@ export default {
position: relative;
box-sizing: border-box;
aspect-ratio: 1;
/* 立体效果:文字/图标本身与按钮同色,无法用普通阴影做出"凸起"。
* 这里用 text-shadow 做"凹陷雕刻"效果:
* - 上方一道更亮的阴影,模拟从顶部打光时文字上半部的高光;
* - 下方一道更暗的阴影,模拟文字下半部的背光。
* 两道同向偏移的小阴影叠加后,文字在按钮平面上被"压"出立体感。
* 用透明文字 + 阴影颜色与背景色相协调,保证按钮整体风格统一。 */
text-shadow:
0 1rpx 0 rgba(255, 255, 255, 0.45),
0 -1rpx 0 rgba(0, 0, 0, 0.18);
}
.iconfont text,
@@ -829,6 +840,10 @@ export default {
text-overflow: clip;
color: inherit;
font-weight: inherit;
/* 与 .iconfont 同一套凹陷雕刻式 text-shadow,保证语言文字也有立体感 */
text-shadow:
0 1rpx 0 rgba(255, 255, 255, 0.45),
0 -1rpx 0 rgba(0, 0, 0, 0.18);
}
/* 语言选择弹窗(底部弹出) */