From 15a61fdc39d4b853bed6a06d5567917e0710bf98 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Thu, 2 Jul 2026 15:21:31 +0800
Subject: [PATCH] =?UTF-8?q?style(hover-nav):=20=E4=BC=98=E5=8C=96=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=8C=89=E9=92=AE=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E4=B8=8E=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  调整border-radius注释位置，补充为clip-path兜底说明
2.  简化旧版aspect-ratio兼容注释
3.  为通用背景添加同色边框消除抗锯齿毛刺
4.  为文字和图标添加凹陷雕刻式text-shadow增强立体感
---
 components/hover-nav/hover-nav.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/hover-nav/hover-nav.vue b/components/hover-nav/hover-nav.vue
index 10828c7..529d221 100644
--- a/components/hover-nav/hover-nav.vue
+++ b/components/hover-nav/hover-nav.vue
@@ -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);
 }
 
 /* 语言选择弹窗(底部弹出) */