style: 使用 CSS 变量统一管理主题颜色

将硬编码的颜色值替换为 CSS 变量 --primary-color 和 --primary-color-rgb

@@ -11,6 +11,7 @@
   --error-color: #EF4444;
   --color-primary: var(--primary-color);
   --color-text: #9CA3AF;
+  --primary-color-rgb: 84, 171, 174;
 }
 
 .bg-blue-500 {

@@ -59,7 +59,7 @@ const scrollToTop = () => {
   bottom: 250rpx;
   width: 80rpx;
   height: 80rpx;
-  background: rgba(64, 158, 255, 0.8);
+  background: rgba(var(--primary-color-rgb), 0.8);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -70,7 +70,7 @@ const scrollToTop = () => {
   z-index: 999;
 
   &:hover {
-    background: rgba(64, 158, 255, 1);
+    background: rgba(var(--primary-color-rgb), 1);
     transform: translateY(-4rpx);
   }
 

 <!--
  * @Date: 2025-01-09 00:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-09 15:54:03
+ * @LastEditTime: 2025-09-09 16:22:15
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @Description: 排行榜卡片组件
 -->
@@ -329,7 +329,7 @@ defineExpose({
 
 <style lang="less">
 .ranking-card {
-  background: linear-gradient(180deg, #4A90E2 0%, #357ABD 100%);
+  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
   border-radius: 20rpx;
   padding: 40rpx;
   margin: 30rpx;
@@ -405,7 +405,7 @@ defineExpose({
       cursor: pointer;
 
       &.active {
-        color: #4A90E2;
+        color: var(--primary-color);
         font-weight: 600;
         transform: scale(1.02);
       }
@@ -506,7 +506,7 @@ defineExpose({
         align-items: center;
         justify-content: center;
         position: relative;
-        background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
         border-radius: 16rpx 16rpx 0 0;
         box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
 
@@ -600,7 +600,7 @@ defineExpose({
         .my-rank-number {
           width: 48rpx;
           height: 48rpx;
-          background: #4A90E2;
+          background: var(--primary-color);
           border-radius: 50%;
           display: flex;
           align-items: center;
@@ -648,7 +648,7 @@ defineExpose({
         .my-steps {
           font-size: 26rpx;
           font-weight: bold;
-          color: #4A90E2;
+          color: var(--primary-color);
           margin-bottom: 6rpx;
         }
 

 <!--
  * @Date: 2025-09-01 13:07:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-09 15:56:24
+ * @LastEditTime: 2025-09-09 16:21:17
  * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
  * @Description: 文件描述
 -->
@@ -346,7 +346,7 @@ onMounted(async () => {
 <style lang="less">
 .family-rank-page {
   min-height: 100vh;
-  background: linear-gradient(180deg, #4A90E2 0%, #357ABD 100%);
+  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
   padding-bottom: 120rpx;
 
   .header {
@@ -393,7 +393,7 @@ onMounted(async () => {
         cursor: pointer;
 
         &.active {
-          color: #4A90E2;
+          color: var(--primary-color);
           font-weight: 600;
           transform: scale(1.02);
         }
@@ -500,7 +500,7 @@ onMounted(async () => {
         align-items: center;
         justify-content: center;
         position: relative;
-        background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
         border-radius: 20rpx 20rpx 0 0;
         box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
 
@@ -649,7 +649,7 @@ onMounted(async () => {
         .steps {
           font-size: 32rpx;
           font-weight: bold;
-          color: #4A90E2;
+          color: var(--primary-color);
         }
       }
     }
@@ -712,7 +712,7 @@ onMounted(async () => {
         .my-rank-number {
           width: 60rpx;
           height: 60rpx;
-          background: #4A90E2;
+          background: var(--primary-color);
           border-radius: 50%;
           display: flex;
           align-items: center;
@@ -760,7 +760,7 @@ onMounted(async () => {
         .my-steps {
           font-size: 32rpx;
           font-weight: bold;
-          color: #4A90E2;
+          color: var(--primary-color);
           margin-bottom: 8rpx;
         }