fix(w05): 互换动画提到与卡同级 —— 三列网格中间留实体动画道,卡片相应收窄

2026-08-31 用户:「不要把这个动画做到背景板上,会被卡片覆盖;和卡片做到一级,
可以压缩一点卡片的大小」—— 上一稿的对向穿行点走在卡后,只在缝里闪现,基本看不见。
.dossiers 改三列网格(minmax(0,1fr) 76px minmax(0,1fr)):卡片各占左右列自然收窄,
中间 76px 是**谁也盖不住的实体动画道** —— ⇄ 徽居中轻呼吸,两枚信号点绕徽轨道对转
(此上彼下绕圈 = 两颗料换位),底下的虚线总线在道里露出来把两张卡接起来。
窄屏(<620px)卡片竖排,动画道随之收起。浏览器两帧相位实证在转;
105 包内 + 2531 全仓;2.12.1 装库核过(orbit/lane)。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LKMZDwMbyKzjw6Hembwvet

activities/part-substitution-assessment/src/views/style.ts

@@ -269,18 +269,23 @@ table.on tr.jc-row-static td{background:var(--acc-wash);border-top:1px dashed va
     repeating-linear-gradient(90deg, rgba(46,107,255,.045) 0 1px, transparent 1px 26px),
     linear-gradient(158deg, var(--acc-wash) 0%, #fff 62%, var(--acc-wash) 100%)}
 .board::before{content:"";position:absolute;left:4%;right:4%;top:50%;border-top:2px dashed var(--acc-line)}
-/* 「可替换」动画(2026-08-31 用户定:两卡之间要做出可互换的效果)——
-   两枚信号点沿总线**对向穿行**(左料换到右、右料换到左),中央一枚 ⇄ 徽轻呼吸;
-   点走在卡片背后(z 序),只在两卡之间的缝里现身 —— 像两颗料在板上换位。 */
-.swapfx{position:absolute;left:0;right:0;top:50%;height:0;z-index:0;pointer-events:none;--swx:min(26vw,240px)}
-.sw-ic{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:34px;height:34px;padding:7px;box-sizing:border-box;color:var(--acc);background:#fff;border:1px solid var(--acc-line);border-radius:999px;box-shadow:0 4px 12px rgba(18,38,63,.14);z-index:2;animation:swbreathe 2.8s ease-in-out infinite}
-.sw-dot{position:absolute;left:50%;top:-13px;width:8px;height:8px;margin-left:-4px;border-radius:999px;background:var(--acc);box-shadow:0 0 8px 2px var(--acc-soft)}
-.sw-ltr{animation:swltr 3.2s linear infinite}
-.sw-rtl{top:7px;animation:swrtl 3.2s linear infinite}
-@keyframes swltr{0%{transform:translateX(calc(-1 * var(--swx)));opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(var(--swx));opacity:0}}
-@keyframes swrtl{0%{transform:translateX(var(--swx));opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(calc(-1 * var(--swx)));opacity:0}}
+/* 「可替换」动画(2026-08-31 用户第二稿:「不要做到背景板上,背景板会被卡片覆盖;
+   和卡片做到一级,可以压缩一点卡片的大小」)—— .dossiers 改三列网格,中间留一条
+   **实体动画道**(卡片各占左右列、相应收窄,谁也盖不住它):中央 ⇄ 徽轻呼吸,
+   两枚信号点绕徽**轨道对转**(此上彼下地绕圈 = 两颗料换位),底下横穿的虚线总线
+   在道里露出来把两张卡接起来。 */
+.swapfx{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
+.sw-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;padding:8px;box-sizing:border-box;color:var(--acc);background:#fff;border:1px solid var(--acc-line);border-radius:999px;box-shadow:0 4px 12px rgba(18,38,63,.16);animation:swbreathe 2.8s ease-in-out infinite}
+.sw-orbit{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;animation:sworbit 4.5s linear infinite}
+.sw-dot{position:absolute;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:999px;background:var(--acc);box-shadow:0 0 8px 2px var(--acc-soft)}
+.sw-d1{top:-4px}
+.sw-d2{bottom:-4px}
+@keyframes sworbit{to{transform:rotate(360deg)}}
 @keyframes swbreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
-.dossiers{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px}
+/* 三列网格:左右两列给卡,中间 76px 是动画道 —— 与卡同级的真实空间,不被覆盖 */
+.dossiers{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);row-gap:16px}
+.dossiers > .dossier:nth-of-type(odd){grid-column:1}
+.dossiers > .dossier:nth-of-type(even){grid-column:3}
 .dossier{display:flex;flex-direction:column;gap:11px;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:15px 16px 14px;box-shadow:0 8px 22px rgba(18,38,63,.09);transition:box-shadow .18s,transform .18s}
 .dossier:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,38,63,.13)}
 .dz-top{display:flex;align-items:center;gap:12px}
@@ -439,6 +444,8 @@ html.editable .dossier:not(.on):not(:has(.pback.on)):has(.flip-tg:checked) .pen-
   .card-head{padding:16px 14px 18px}
   .dz-grid{grid-template-columns:1fr}
   .swapfx{display:none}
+  .dossiers{grid-template-columns:1fr}
+  .dossiers > .dossier:nth-of-type(odd),.dossiers > .dossier:nth-of-type(even){grid-column:1}
   .pback{grid-template-columns:1fr}
   .ftiles{grid-template-columns:1fr}
   .card-bd{padding:16px 14px 6px}