diff --git a/src/styles/pages/ecommerce-video.css b/src/styles/pages/ecommerce-video.css index 3e1113e..2230115 100644 --- a/src/styles/pages/ecommerce-video.css +++ b/src/styles/pages/ecommerce-video.css @@ -179,9 +179,9 @@ min-height: 0; overflow: auto; background: #101318; - padding: 26px; + padding: 32px 40px; display: flex; - align-items: center; + align-items: stretch; justify-content: center; } @@ -735,10 +735,10 @@ .ecom-video-tree { display: flex; - align-items: center; + align-items: stretch; gap: 0; width: 100%; - min-height: 0; + min-height: 100%; } /* ── Source node ── */ @@ -746,9 +746,9 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center; gap: 10px; flex-shrink: 0; - align-self: center; } .ecom-video-tree-node { @@ -762,8 +762,8 @@ } .ecom-video-tree-node--source { - width: 150px; - height: 190px; + width: 180px; + height: 230px; flex-shrink: 0; border-color: #1c4d3a; background: #162820; @@ -785,9 +785,9 @@ /* ── Text node (分镜文本) ── */ .ecom-video-tree-node--text { - min-width: 120px; - max-width: 150px; - padding: 14px 12px; + min-width: 140px; + max-width: 170px; + padding: 16px 14px; cursor: default; border-color: #2a3d30; background: #131d1a; @@ -824,8 +824,8 @@ /* ── Image node (分镜图) ── */ .ecom-video-tree-node--image, .ecom-video-tree-node--video { - width: 150px; - height: 120px; + width: 170px; + height: 136px; flex-shrink: 0; } @@ -919,7 +919,7 @@ /* ── Trunk connector (分支连接线) ── */ .ecom-video-tree__trunk { position: relative; - width: 48px; + width: 56px; flex-shrink: 0; align-self: stretch; } @@ -928,7 +928,7 @@ position: absolute; left: 0; top: 50%; - width: 24px; + width: 28px; height: 2px; background: #3a4550; transform: translateY(-50%); @@ -948,10 +948,15 @@ .ecom-video-tree__branches-line { position: absolute; - left: 24px; + left: 28px; top: 0; bottom: 0; - width: 24px; + width: 28px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; + padding: 0; } .ecom-video-tree__branches-line::before { @@ -965,24 +970,28 @@ } .ecom-video-tree__branch-tap { - position: absolute; - left: 0; + position: relative; + flex: 1; + display: flex; + align-items: center; +} + +.ecom-video-tree__branch-tap::before { + content: ""; + display: block; width: 100%; height: 2px; background: #3a4550; } -.ecom-video-tree__branch-tap:nth-child(1) { top: 0; } -.ecom-video-tree__branch-tap:nth-child(2) { top: 50%; transform: translateY(-50%); } -.ecom-video-tree__branch-tap:nth-child(3) { bottom: 0; } - .ecom-video-tree__branch-tap::after { content: ""; position: absolute; left: 0; - top: 0; + top: 50%; + transform: translateY(-50%); width: 100%; - height: 100%; + height: 2px; background: linear-gradient(90deg, transparent, #00ff88, transparent); animation: ecom-tree-branch-flow 2.4s ease-in-out infinite; } @@ -1016,18 +1025,19 @@ .ecom-video-tree__rows { display: flex; flex-direction: column; - justify-content: space-between; - gap: 20px; + gap: 0; flex: 1; min-width: 0; - align-self: center; - padding: 8px 0; + align-self: stretch; + padding: 0; } .ecom-video-tree__row { display: flex; align-items: center; - gap: 8px; + justify-content: flex-start; + flex: 1; + gap: 12px; animation: ecom-tree-row-in 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both; }