style(passport): 将授权页面主题切换为蓝色风格

- 新增蓝色主题扫描线与发光动画样式 - 添加不同颜色主题的粒子元素动画类 - 修改授权页面背景渐变为蓝色调 - 调整网格背景和渐变光晕颜色为蓝色系列 - 蓝色主题粒子背景与动画细节优化 - 更新按钮和文本渐变颜色为蓝色风格 - 按钮阴影和边框颜色修改为蓝色系 - 同意协议文本颜色切换为蓝色 - 底部指示点颜色替换为蓝色调，增强视觉统一性
2026-04-11 08:42:42 +08:00
parent ad6fb13ec1
commit 0b5f8293e5
3 changed files with 89 additions and 25 deletions
--- a/.workbuddy/expert-history.json
+++ b/.workbuddy/expert-history.json
@@ -35,5 +35,5 @@
      }
    ]
  },
-  "lastUpdated": 1775867452878
+  "lastUpdated": 1775868078061
 }
--- 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;
--- 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 (
-    <View className="min-h-screen relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)' }}>
+    <View className="min-h-screen relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #0a0a1a 0%, #0d1528 50%, #0a1520 100%)' }}>

      {/* 背景科技元素 */}
      {/* 网格背景 */}
      <View style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
-        backgroundImage: `linear-gradient(rgba(138, 43, 226, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 43, 226, 0.1) 1px, transparent 1px)`,
+        backgroundImage: `linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px)`,
        backgroundSize: '50px 50px', opacity: 0.5,
      }} />

      {/* 渐变光晕 - 左上 */}
      <View style={{
        position: 'absolute', top: '-30%', left: '-20%', width: '60%', height: '60%',
-        background: 'radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%)',
+        background: 'radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%)',
        filter: 'blur(40px)',
      }} />

      {/* 渐变光晕 - 右下 */}
      <View style={{
        position: 'absolute', bottom: '-20%', right: '-20%', width: '50%', height: '50%',
-        background: 'radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%)',
+        background: 'radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%)',
        filter: 'blur(50px)',
      }} />

@@ -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) => (
-        <View key={index} className="particle" style={{
+        <View key={index} className="particle-blue" style={{
          position: 'absolute', top: particle.top, left: particle.left,
          width: particle.size, height: particle.size, borderRadius: '50%',
-          background: index % 2 === 0 ? '#a855f7' : '#3b82f6',
+          background: index % 2 === 0 ? '#3b82f6' : '#6366f1',
          boxShadow: index % 2 === 0
-            ? '0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(168, 85, 247, 0.4)'
-            : '0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.4)',
+            ? '0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.4)'
+            : '0 0 10px rgba(99, 102, 241, 0.8), 0 0 20px rgba(99, 102, 241, 0.4)',
          animationDelay: particle.delay,
        }} />
      ))}
@@ -256,8 +256,8 @@ const QRConfirmPage: React.FC = () => {
      {/* 扫描线效果 */}
      <View style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: '2px',
-        background: 'linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent)',
-        animation: 'scanline 3s ease-in-out infinite',
+        background: 'linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent)',
+        animation: 'scanline-blue 3s ease-in-out infinite',
      }} />

      {/* 主内容区域 */}
@@ -267,15 +267,15 @@ const QRConfirmPage: React.FC = () => {
        <View className="flex flex-col items-center mb-12">
          <View style={{
            width: '100px', height: '100px', borderRadius: '24px',
-            background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.2))',
-            border: '1px solid rgba(168, 85, 247, 0.3)',
+            background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2))',
+            border: '1px solid rgba(59, 130, 246, 0.3)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: '20px', position: 'relative', overflow: 'hidden',
          }}>
            {/* Logo 内光效 */}
            <View style={{
              position: 'absolute', top: '-50%', left: '-50%', width: '200%', height: '200%',
-              background: 'conic-gradient(from 0deg, transparent, rgba(168, 85, 247, 0.1), transparent, rgba(59, 130, 246, 0.1), transparent)',
+              background: 'conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.15), transparent, rgba(99, 102, 241, 0.15), transparent)',
              animation: 'rotate 4s linear infinite',
            }} />
            <Text style={{ fontSize: '48px', position: 'relative', zIndex: 1 }}>🔐</Text>
@@ -283,7 +283,7 @@ const QRConfirmPage: React.FC = () => {

          <Text style={{
            fontSize: '28px', fontWeight: '700',
-            background: 'linear-gradient(90deg, #a855f7, #6366f1, #3b82f6)',
+            background: 'linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            backgroundClip: 'text', marginBottom: '8px',
          }}>websopy</Text>
@@ -294,7 +294,7 @@ const QRConfirmPage: React.FC = () => {

          <View style={{
            width: '60px', height: '3px',
-            background: 'linear-gradient(90deg, transparent, #a855f7, transparent)',
+            background: 'linear-gradient(90deg, transparent, #3b82f6, transparent)',
            marginTop: '20px', borderRadius: '2px',
          }} />
        </View>
@@ -302,9 +302,9 @@ const QRConfirmPage: React.FC = () => {
        {/* 主按钮 - 渐变发光按钮 */}
        <View style={{
          width: '100%', maxWidth: '320px',
-          background: 'linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #6366f1 100%)',
+          background: 'linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #6366f1 100%)',
          borderRadius: '30px', padding: '2px',
-          boxShadow: '0 0 30px rgba(168, 85, 247, 0.4), 0 0 60px rgba(168, 85, 247, 0.2)',
+          boxShadow: '0 0 30px rgba(59, 130, 246, 0.4), 0 0 60px rgba(59, 130, 246, 0.2)',
        }}>
          <Button
            open-type="getPhoneNumber"
@@ -331,23 +331,23 @@ const QRConfirmPage: React.FC = () => {
            <View style={{
              width: '18px', height: '18px', borderRadius: '4px',
              border: agreementChecked ? 'none' : '1px solid rgba(255, 255, 255, 0.3)',
-              background: agreementChecked ? 'linear-gradient(135deg, #7c3aed, #a855f7)' : 'transparent',
+              background: agreementChecked ? 'linear-gradient(135deg, #1d4ed8, #3b82f6)' : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {agreementChecked && <Text style={{ color: '#fff', fontSize: '12px' }}>✓</Text>}
            </View>
          </View>
          <Text style={{ color: 'rgba(255, 255, 255, 0.5)', fontSize: '12px' }}>我已阅读并同意</Text>
-          <Text style={{ color: '#a855f7', fontSize: '12px', padding: '4px 2px' }} onClick={() => openAgreement('service')}>《服务协议》</Text>
+          <Text style={{ color: '#3b82f6', fontSize: '12px', padding: '4px 2px' }} onClick={() => openAgreement('service')}>《服务协议》</Text>
          <Text style={{ color: 'rgba(255, 255, 255, 0.5)', fontSize: '12px' }}>和</Text>
-          <Text style={{ color: '#a855f7', fontSize: '12px', padding: '4px 2px' }} onClick={() => openAgreement('privacy')}>《隐私政策》</Text>
+          <Text style={{ color: '#3b82f6', fontSize: '12px', padding: '4px 2px' }} onClick={() => openAgreement('privacy')}>《隐私政策》</Text>
        </View>

        {/* 底部装饰 */}
        <View style={{ position: 'absolute', bottom: '40px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <View style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#a855f7', boxShadow: '0 0 10px rgba(168, 85, 247, 0.8)' }} />
-          <Text style={{ color: 'rgba(255, 255, 255, 0.3)', fontSize: '11px' }}>安全加密连接</Text>
          <View style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#3b82f6', boxShadow: '0 0 10px rgba(59, 130, 246, 0.8)' }} />
+          <Text style={{ color: 'rgba(255, 255, 255, 0.3)', fontSize: '11px' }}>安全加密连接</Text>
+          <View style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#6366f1', boxShadow: '0 0 10px rgba(99, 102, 241, 0.8)' }} />
        </View>
      </View>
    </View>