diff --git a/assets/css/app.css b/assets/css/app.css index 87681d4..4994451 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -633,15 +633,43 @@ textarea.input { min-height: 76px; resize: vertical; } border-radius: 10px; box-shadow: 0 1px 3px rgba(43,38,32,.10); color: var(--ink); - transform: translate(-50%, -50%); /* 坐标给的是卡片中心 */ transition: border-color .15s ease, box-shadow .15s ease; overflow: hidden; pointer-events: auto; /* 父 .card_cont 是 none，这里恢复 */ } +/* ⚠️⚠️ 「鼠标放上去卡片会跳」的根因就在这里（用户 2026-10-03 反馈）。 + 库自带样式里有一条：`.f3 div.card:hover > div { transform: translate(0px,-2px); }` + —— 我们的 .kin-card 正好是 `div.card` 的**直接子 div**，于是鼠标一进卡片， + 这条规则就把**我们用来居中的 `transform: translate(-50%,-50%)` 整个覆盖掉**。 + 实测（1600×1000 视口、库缩放 0.9）：卡片从 translate(-59px,-66px) 变成 + translate(0,-2px)，整张卡**向右下跳 53.1 × 57.6 屏幕像素**（正好是半张卡）。 + 修法：不再用 transform 居中，改用 `inset: 0` + `margin: auto` + —— 绝对定位 + inset 全 0 + margin auto 就是"在包含块里居中"， + 完全不依赖 transform，库那条规则再怎么覆盖也影响不到位置。 + （也因此**不需要**去覆盖库的 :hover —— 少一处 !important，少一处将来的漂移。） + ⚠️ 别改回 `left/top: 50% + transform: translate(-50%,-50%)`：那正是这次的 bug。 */ +.kin-card { + inset: 0; + margin: auto; +} +/* ⚠️⚠️ 还要把库那条 `:hover` 位移**归零**（用户反馈的第二半）。 + 库的 family-chart.css:517 有： + `.f3 div.card:hover > div { transform: translate(0, -2px); }` + 它不只覆盖居中（那已由上面的 inset+margin auto 解决），还会给卡片加一个 + 纯视觉的"上浮 2px"——实测 mouse 一进卡片，屏幕位置就 dy = **-1.8px**。 + 2px 的抖动正是用户说的「那个框会移动一下」。 + 我们的卡片是**自绘的宣纸卡**，不需要库那套"悬停上浮"装饰，所以直接归零。 + ⚠️ 不能去改 vendor 里那份文件（升级库会整份覆盖，改动会静默消失）， + 所以在 app.css 里覆盖；app.css 在 family-chart.css **之后**加载（见 kin/tree.php）， + 同特异性下后写的赢，不需要 !important。 */ +.kin-chart.f3 div.card:hover > div { transform: none; } +.kin-chart.f3 div.card > div { transition: none; } .kin-card:hover { box-shadow: var(--shadow-l); border-color: var(--brand-2); } -/* 头像外框：**长方形**，宽度贴合头像显示宽度 */ +/* 头像外框：**长方形**，宽度贴合头像显示宽度。 + 用户 2026-10-03 第 7 条：**头像本身是链接**（点它进这个人的资料页）。 + ⚠️ 它是 不是 —— 见模板里的说明（"点哪儿去哪儿"用链接最自然）。 */ .kin-card .kin-ph { width: 96px; height: 72px; border-radius: 6px; overflow: hidden; background: #F1E7D6; flex: 0 0 auto; @@ -650,18 +678,9 @@ textarea.input { min-height: 76px; resize: vertical; } .kin-card .kin-ph img { width: 100%; height: 100%; object-fit: contain; display: block; } -/* 右下角「以 TA 为中心」：每个人都有一个。 - ⚠️ 单独一个 ' + // 两张提示分挂到头像/姓名下面，**悬停时才显形**（见 CSS 的 .kin-hint）： + // 这样"点哪儿去哪儿"一眼可辨，不悬停时又不占地方。 + + '资料' + + '以他为中心' + ''; }); @@ -296,27 +302,13 @@ $datumJson = json_encode( } /* 用户 2026-10-03 第 2 条：工具条三个按钮（看全部/回到我/回到我的家谱）已撤。 - 镜头由库自动 fit；下面只保留卡片右下角那个「以他为中心」的入口。 */ - - /* 用户第 1 条：每张卡片右下角一个「以他为中心」的按钮 —— 点了就以他重画一张家谱。 - ⚠️ 这个元素在卡片的 里，必须 preventDefault + stopPropagation， - 否则会先触发外面那个链接跳去成员页（用户反馈"容易误触"就是这个）。 - 另外用 mousedown/pointerdown/click 三处都拦，触摸设备上才稳。 */ - Array.prototype.forEach.call(root.querySelectorAll('.kin-focus'), function (btn) { - function go(e) { - e.preventDefault(); - e.stopPropagation(); - var bid = btn.getAttribute('data-focus-id') || ''; - if (bid) { window.location.href = '/index.php?r=kin&focus=' + encodeURIComponent(bid); } - } - btn.addEventListener('click', go); - btn.addEventListener('keydown', function (e) { - if (e.key === 'Enter' || e.key === ' ') { go(e); } - }); - ['mousedown', 'pointerdown', 'touchstart'].forEach(function (ev) { - btn.addEventListener(ev, function (e) { e.stopPropagation(); }, { passive: true }); - }); - }); + 镜头由库自动 fit。 + 用户 2026-10-03 第 7 条：「以 TA 为中心」的按钮也撤了 —— 现在**点姓名**就是 + 以他为中心（那个 直接指向 ?r=kin&focus=，是普通的页面跳转）。 + ⚠️ 原来这里有一大段"给那个小按钮绑 click + keydown + mousedown/pointerdown/ + touchstart 三处阻止冒泡"的代码，那是**用按钮干链接的活**才需要的补丁 + （防止先触发外层链接）。换成 之后整段删掉： + 少一段代码、少一类 bug，键盘与中键打开也天然可用。 */ })();