diff --git a/packages/client/src/styles/global.scss b/packages/client/src/styles/global.scss index cdf6613..1c4003f 100644 --- a/packages/client/src/styles/global.scss +++ b/packages/client/src/styles/global.scss @@ -159,6 +159,8 @@ $neon-hv: var(--accent-hover); // 镂空管壁 + 双层外发光(内紧外散) @mixin neon-tube($glow: 0.32, $wall: 1px) { + position: relative; + overflow: hidden; color: $neon; background: transparent; border: $wall solid rgba(var(--accent-primary-rgb), 0.55); @@ -169,6 +171,31 @@ $neon-hv: var(--accent-hover); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.45); } +// 扫光:一道白光从左扫到右。周期大部分时间停在暗处,只在 62%→86% 之间走一趟, +// 避免常驻动画造成视觉噪音。 +@keyframes neon-sheen { + 0%, 62% { transform: translateX(-140%); } + 86%, 100% { transform: translateX(320%); } +} + +@mixin neon-sheen() { + &::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 38%; + background: linear-gradient(90deg, + transparent, + oklch(1 0 0 / 0.28), + transparent); + transform: translateX(-140%); + animation: neon-sheen 3.4s ease-in-out infinite; + pointer-events: none; + } +} + // Arco 为按钮写了 `.arco-btn-primary[type='button']` / `[type='submit']` / `[type='reset']` // 三个属性选择器变体,把特异性从 (0,1,0) 抬到 (0,2,0);它的 hover 变体则是 // `.arco-btn-primary[type='submit']:hover` → (0,3,0)。所以下面每条规则都用 @@ -211,6 +238,7 @@ $neon-hv: var(--accent-hover); .arco-btn.arco-btn-primary[type='submit'], .arco-btn.arco-btn-primary[type='reset'] { @include neon-tube(0.34); + @include neon-sheen; font-weight: 600; &:not(.arco-btn-disabled):hover { @@ -238,6 +266,8 @@ $neon-hv: var(--accent-hover); // 危险操作:同构的霓虹管,颜色换成红 @mixin neon-tube-danger($glow: 0.28) { + position: relative; + overflow: hidden; color: $error; background: transparent; border: 1px solid rgba(var(--error-rgb), 0.5); @@ -325,6 +355,8 @@ $neon-hv: var(--accent-hover); .arco-btn.arco-btn-primary[type='button'].arco-btn-loading, .arco-btn.arco-btn-primary[type='submit'].arco-btn-loading { @include neon-tube(0.4); + // 提交中扫光暂停,用脉冲表示"通电中",避免两个动画叠加 + &::after { animation: none; opacity: 0; } animation: neon-pulse 1.1s ease-in-out infinite; } diff --git a/packages/client/src/views/LoginView.vue b/packages/client/src/views/LoginView.vue index a357439..5188c81 100644 --- a/packages/client/src/views/LoginView.vue +++ b/packages/client/src/views/LoginView.vue @@ -86,10 +86,8 @@ function fillDefaultCredentials() {