From 0b5f8293e52e597a4c2a604aaa029d757beb48cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Sat, 11 Apr 2026 08:42:42 +0800
Subject: [PATCH] =?UTF-8?q?style(passport):=20=E5=B0=86=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2=E4=B8=BA?=
 =?UTF-8?q?=E8=93=9D=E8=89=B2=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增蓝色主题扫描线与发光动画样式
- 添加不同颜色主题的粒子元素动画类
- 修改授权页面背景渐变为蓝色调
- 调整网格背景和渐变光晕颜色为蓝色系列
- 蓝色主题粒子背景与动画细节优化
- 更新按钮和文本渐变颜色为蓝色风格
- 按钮阴影和边框颜色修改为蓝色系
- 同意协议文本颜色切换为蓝色
- 底部指示点颜色替换为蓝色调，增强视觉统一性
---
 .workbuddy/expert-history.json    |  2 +-
 src/app.scss                      | 66 ++++++++++++++++++++++++++++++-
 src/passport/qr-confirm/index.tsx | 46 ++++++++++-----------
 3 files changed, 89 insertions(+), 25 deletions(-)

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 (
-    <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>