style(hover-nav): 优化导航按钮视觉效果与注释
1. 调整border-radius注释位置,补充为clip-path兜底说明 2. 简化旧版aspect-ratio兼容注释 3. 为通用背景添加同色边框消除抗锯齿毛刺 4. 为文字和图标添加凹陷雕刻式text-shadow增强立体感
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
/* 语言选择弹窗(底部弹出) */
|
||||
|
||||
Reference in New Issue
Block a user