diff --git a/.workbuddy/expert-history.json b/.workbuddy/expert-history.json index 9248da0..007653c 100644 --- a/.workbuddy/expert-history.json +++ b/.workbuddy/expert-history.json @@ -35,5 +35,5 @@ } ] }, - "lastUpdated": 1775867452878 + "lastUpdated": 1775868078061 } \ No newline at end of file diff --git a/src/app.scss b/src/app.scss index 001e324..55d9b95 100644 --- a/src/app.scss +++ b/src/app.scss @@ -140,6 +140,23 @@ image { } } +@keyframes scanline-green { + 0% { + top: 0; + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 100%; + opacity: 0; + } +} + @keyframes rotate { from { transform: rotate(0deg); @@ -158,11 +175,58 @@ image { } } -/* 粒子元素样式 */ +@keyframes glow-green { + 0%, 100% { + box-shadow: 0 0 20px rgba(34, 197, 94, 0.4), 0 0 40px rgba(34, 197, 94, 0.2); + } + 50% { + box-shadow: 0 0 30px rgba(34, 197, 94, 0.6), 0 0 60px rgba(34, 197, 94, 0.3); + } +} + +/* 粒子元素样式 - 紫色主题 */ .particle { animation: float 3s ease-in-out infinite, pulse 2s ease-in-out infinite; } +/* 粒子元素样式 - 绿色主题 */ +.particle-green { + animation: float 3s ease-in-out infinite, pulse 2s ease-in-out infinite; +} + +/* 粒子元素样式 - 蓝色主题 */ +.particle-blue { + animation: float 3s ease-in-out infinite, pulse 2s ease-in-out infinite; +} + +/* 扫描线 - 蓝色主题 */ +@keyframes scanline-blue { + 0% { + top: 0; + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 100%; + opacity: 0; + } +} + +/* 发光效果 - 蓝色主题 */ +@keyframes glow-blue { + 0%, 100% { + box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2); + } + 50% { + box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3); + } +} + /* 按钮发光效果 */ .authorize-btn:not([disabled]) { animation: glow 2s ease-in-out infinite; diff --git a/src/passport/qr-confirm/index.tsx b/src/passport/qr-confirm/index.tsx index a8417a7..a01f594 100644 --- a/src/passport/qr-confirm/index.tsx +++ b/src/passport/qr-confirm/index.tsx @@ -205,29 +205,29 @@ const QRConfirmPage: React.FC = () => { Taro.navigateTo({ url: `/passport/webview/index?url=${targetUrl}` }); }; - // 科技风格授权页面 + // 科技风格授权页面 - 蓝色主题 return ( - + {/* 背景科技元素 */} {/* 网格背景 */} {/* 渐变光晕 - 左上 */} {/* 渐变光晕 - 右下 */} @@ -242,13 +242,13 @@ const QRConfirmPage: React.FC = () => { { top: '75%', left: '25%', size: 4, delay: '1.2s' }, { top: '80%', left: '75%', size: 5, delay: '0.8s' }, ].map((particle, index) => ( - ))} @@ -256,8 +256,8 @@ const QRConfirmPage: React.FC = () => { {/* 扫描线效果 */} {/* 主内容区域 */} @@ -267,15 +267,15 @@ const QRConfirmPage: React.FC = () => { {/* Logo 内光效 */} 🔐 @@ -283,7 +283,7 @@ const QRConfirmPage: React.FC = () => { websopy @@ -294,7 +294,7 @@ const QRConfirmPage: React.FC = () => { @@ -302,9 +302,9 @@ const QRConfirmPage: React.FC = () => { {/* 主按钮 - 渐变发光按钮 */}