修色板被裁切 + 让人看得出能选全色域

用户两个反馈:
① 色板直接被挡住了一半
② 它不是完全的颜色,好像只有蓝色

① 根因:色板用 position:absolute,而它在
   <details class="tax-form-box"> 里面,那个容器有 overflow:hidden。
   色相条正好在面板最底部 —— 被裁掉了,所以看不见。
   改 position:fixed,直接相对视口定位,任何祖先 overflow 都管不到。
   位置改由 JS 按触发按钮坐标算,并处理三种情况:
     右边超出→左移;下方不够→翻上方;都放不下→贴视口底边
   另加 resize/scroll 监听,避免滚动后色板漂走。

② 不是 bug,是 ① 的连带后果:
   HSV 色板本来就只显示当前色相的深浅变化,换颜色靠色相条。
   色相条被裁掉后,用户只看到一片蓝,自然以为只有蓝色。
   修好裁切后已实测 6 个色相各不相同:
     0°红 60°黄 120°绿 180°青 240°蓝 300°品红
   同时把色相条从 14px 加高到 18px 并加内描边,
   让它一眼就能认出是光谱条,而不是一条灰线。

验证(用真实后台容器结构复刻测试页,details 带 overflow:hidden):
  面板四边 elementFromPoint 都能命中自己 → 未被任何容器裁切
  色相条可见、高 18px;面板总高 367px
  滚到页面底部再开面板仍完整可见
  6 个色相取样互不相同,色板能覆盖全色域
  实际取色 #0ce779 正常
  4 个路由 200
This commit is contained in:
2026-11-04 19:01:04 +08:00
parent 338a35cacd
commit a2a3306169
3 changed files with 68 additions and 19 deletions
+1 -1
View File
@@ -8,7 +8,7 @@ if (!defined('FB_ROOT')) {
define('FB_ROOT', dirname(__DIR__));
// 静态资源版本号:改 assets/ 下的 css/js 后把这个数字 +1,
// 让浏览器与 CDN 缓存失效。全站只此一处,别再往页面里写死数字。
if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 43); }
if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 45); }
}
/* ------------------------------------------------------------------