From 53426bd4c1c1d99bbc3673cd097b3106a1edb43f Mon Sep 17 00:00:00 2001 From: wangjia <809946525@qq.com> Date: Sun, 12 Jul 2026 16:44:52 +0800 Subject: [PATCH] =?UTF-8?q?fix(ds):=20.plan-banner=20=E7=AA=84=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=E6=8C=89=E9=92=AE=E6=8D=A2=E8=A1=8C=20+=20=E5=90=8D?= =?UTF-8?q?=E5=AD=97=E4=BF=9D=E5=BA=95=E5=AE=BD=E5=BA=A6(=E4=BF=AE=20Renew?= =?UTF-8?q?/Upgrade=20=E8=A6=86=E7=9B=96=E7=94=A8=E6=88=B7=E5=90=8D)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit pbn-row flex-wrap + pbn-info min-width:96px:窄容器下按钮换到下一行、 名字不再被挤成 me…;宽屏按钮仍靠右。容器驱动,桌面/移动/手机框一并生效。 Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u --- design/prototype/atoms.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/design/prototype/atoms.css b/design/prototype/atoms.css index 550e9c6..b9083eb 100644 --- a/design/prototype/atoms.css +++ b/design/prototype/atoms.css @@ -660,9 +660,11 @@ /* PLAN BANNER · 账户页套餐横幅（免费=surface / .is-pro=clay 渐变；对齐 _PlanBanner） */ .plan-banner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); } -.plan-banner .pbn-row { display: flex; align-items: center; gap: var(--space-3); } -.plan-banner .pbn-info { flex: 1 1 auto; min-width: 0; } +.plan-banner .pbn-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; row-gap: var(--space-4); } +.plan-banner .pbn-info { flex: 1 1 auto; min-width: 96px; } /* 给名字保底宽度,不被按钮挤成 me… */ .plan-banner .pbn-row > .btn { flex-shrink: 0; } +.plan-banner .pbn-row > .btn:last-child { margin-left: auto; } /* 宽屏靠右;窄屏换行到下方(整行) */ +@media (max-width: 380px){ .plan-banner .pbn-row > .btn:last-child { flex: 1 1 100%; margin-left: 0; } } .plan-banner .pbn-badge { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: var(--accent-subtle); color: var(--accent); } .plan-banner .pbn-badge > svg { width: 24px; height: 24px; } .plan-banner .pbn-name { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }