diff --git a/src/views/Activities/LesserBairam/index.vue b/src/views/Activities/LesserBairam/index.vue
index ffb47ee..1ce6e1e 100644
--- a/src/views/Activities/LesserBairam/index.vue
+++ b/src/views/Activities/LesserBairam/index.vue
@@ -6,7 +6,7 @@
       <!-- 页面背景 -->
       <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
 
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -3615,16 +3615,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
 .reward-wrapper {
   width: 100%;
   overflow: hidden;
@@ -3682,15 +3672,6 @@ onUnmounted(() => {
   margin-right: 4vw;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .ruleBt {
   width: 5vw;
   min-width: 0;
diff --git a/src/views/Activities/LoginReward/index.vue b/src/views/Activities/LoginReward/index.vue
index f8c7193..03999c4 100644
--- a/src/views/Activities/LoginReward/index.vue
+++ b/src/views/Activities/LoginReward/index.vue
@@ -6,7 +6,7 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]" />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ t('loading') }}...</p>
     </div>
 
@@ -337,25 +337,6 @@ onUnmounted(() => {})
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .scrollY::-webkit-scrollbar {
   display: none;
 }
diff --git a/src/views/Activities/LuckyDollars/Season3/index.vue b/src/views/Activities/LuckyDollars/Season3/index.vue
index 3db3905..6635986 100644
--- a/src/views/Activities/LuckyDollars/Season3/index.vue
+++ b/src/views/Activities/LuckyDollars/Season3/index.vue
@@ -6,7 +6,7 @@
       <!-- 页面背景 -->
       <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
 
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -3112,16 +3112,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
 .reward-wrapper {
   width: 100%;
   overflow: hidden;
@@ -3179,15 +3169,6 @@ onUnmounted(() => {
   margin-right: 4vw;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .ruleBt {
   width: 5vw;
   min-width: 0;
diff --git a/src/views/Activities/LuckyDollars/Season4/index.vue b/src/views/Activities/LuckyDollars/Season4/index.vue
index 4c2a9c2..612c6dc 100644
--- a/src/views/Activities/LuckyDollars/Season4/index.vue
+++ b/src/views/Activities/LuckyDollars/Season4/index.vue
@@ -2,7 +2,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-show="isLoading" class="loading-container">
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -2767,24 +2767,6 @@ onUnmounted(() => {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 
 .scrollbar::-webkit-scrollbar {
   display: none;
diff --git a/src/views/Activities/SpringFestival/Ranking.vue b/src/views/Activities/SpringFestival/Ranking.vue
index 54eb719..839874f 100644
--- a/src/views/Activities/SpringFestival/Ranking.vue
+++ b/src/views/Activities/SpringFestival/Ranking.vue
@@ -429,25 +429,6 @@ onUnmounted(() => {})
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .scrollY::-webkit-scrollbar {
   display: none;
 }
diff --git a/src/views/Activities/SpringFestival/RankingReward.vue b/src/views/Activities/SpringFestival/RankingReward.vue
index 7bf9869..086b783 100644
--- a/src/views/Activities/SpringFestival/RankingReward.vue
+++ b/src/views/Activities/SpringFestival/RankingReward.vue
@@ -200,25 +200,6 @@ onUnmounted(() => {})
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .scrollY::-webkit-scrollbar {
   display: none;
 }
diff --git a/src/views/Activities/SpringFestival/RechargeReward.vue b/src/views/Activities/SpringFestival/RechargeReward.vue
index 63fc4d5..d0eeb6b 100644
--- a/src/views/Activities/SpringFestival/RechargeReward.vue
+++ b/src/views/Activities/SpringFestival/RechargeReward.vue
@@ -509,25 +509,6 @@ onUnmounted(() => {})
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .ruleBt {
   width: 4vw;
   min-width: 0;
diff --git a/src/views/Activities/SpringFestival/Task.vue b/src/views/Activities/SpringFestival/Task.vue
index af01e02..22fcbfe 100644
--- a/src/views/Activities/SpringFestival/Task.vue
+++ b/src/views/Activities/SpringFestival/Task.vue
@@ -1185,25 +1185,6 @@ onUnmounted(() => {})
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .ruleBt {
   width: 4vw;
   min-width: 0;
diff --git a/src/views/Activities/SpringFestival/index.vue b/src/views/Activities/SpringFestival/index.vue
index 2fbecd7..be0ca52 100644
--- a/src/views/Activities/SpringFestival/index.vue
+++ b/src/views/Activities/SpringFestival/index.vue
@@ -16,7 +16,7 @@
       />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -1512,25 +1512,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .timeBox {
   width: 100%;
   display: flex;
diff --git a/src/views/AgencyCenter/Message.vue b/src/views/AgencyCenter/Message.vue
index 3febafd..73d17be 100644
--- a/src/views/AgencyCenter/Message.vue
+++ b/src/views/AgencyCenter/Message.vue
@@ -10,7 +10,7 @@
 
     <div style="padding: 16px; position: relative; z-index: 2">
       <div v-if="loading" class="loading-state">
-        <div class="loading-spinner"></div>
+        <LoadingSpinner margin="0 auto 16px" />
         <p>{{ t('loading') }}...</p>
       </div>
 
@@ -238,25 +238,6 @@ onMounted(() => {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #8b5cf6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .user-info {
   display: flex;
   align-items: center;
diff --git a/src/views/AgencyCenter/TeamBill.vue b/src/views/AgencyCenter/TeamBill.vue
index de3ea79..84c129a 100644
--- a/src/views/AgencyCenter/TeamBill.vue
+++ b/src/views/AgencyCenter/TeamBill.vue
@@ -44,7 +44,7 @@
 
         <!-- 加载状态 -->
         <div v-if="loading" class="loading-container">
-          <div class="loading-spinner"></div>
+          <LoadingSpinner />
           <p>{{ t('loading') }}...</p>
         </div>
 
@@ -466,25 +466,6 @@ onMounted(() => {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #8b5cf6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .bill-item {
   background-color: white;
   padding: 16px;
diff --git a/src/views/AgencyCenter/TeamMember.vue b/src/views/AgencyCenter/TeamMember.vue
index f1d298e..3861457 100644
--- a/src/views/AgencyCenter/TeamMember.vue
+++ b/src/views/AgencyCenter/TeamMember.vue
@@ -84,7 +84,7 @@
 
       <!-- 加载状态 -->
       <div v-if="loading" class="loading-container">
-        <div class="loading-spinner"></div>
+        <LoadingSpinner />
         <p>{{ t('loading') }}...</p>
       </div>
 
@@ -204,7 +204,7 @@
         <div>
           <!-- 加载更多状态 -->
           <div v-if="loadingMore" class="loading-more">
-            <div class="loading-spinner small"></div>
+            <LoadingSpinner size="20px" margin="0 auto 8px" />
             <p>{{ t('loading') }}...</p>
           </div>
 
@@ -622,32 +622,6 @@ input::placeholder {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #8b5cf6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-.loading-spinner.small {
-  width: 20px;
-  height: 20px;
-  border-width: 2px;
-  margin-bottom: 8px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 /* 加载更多状态 */
 .loading-more {
   display: flex;
diff --git a/src/views/AgencyCenter/components/TeamBillMore.vue b/src/views/AgencyCenter/components/TeamBillMore.vue
index 23a1890..7ee4e4a 100644
--- a/src/views/AgencyCenter/components/TeamBillMore.vue
+++ b/src/views/AgencyCenter/components/TeamBillMore.vue
@@ -77,7 +77,7 @@
 
     <!-- 加载成员 -->
     <div v-if="loading" class="loading-container">
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ t('loading') }}...</p>
     </div>
 
@@ -653,25 +653,6 @@ input::placeholder {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #8b5cf6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 /* 空数据状态 */
 .empty-state {
   display: flex;
diff --git a/src/views/GoodID/index.vue b/src/views/GoodID/index.vue
index 176f5ab..5880703 100644
--- a/src/views/GoodID/index.vue
+++ b/src/views/GoodID/index.vue
@@ -3,7 +3,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -331,25 +331,6 @@ input::placeholder {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
diff --git a/src/views/Invitation/InviteToRegister.vue b/src/views/Invitation/InviteToRegister.vue
index 68f1cdd..9a9cb6e 100644
--- a/src/views/Invitation/InviteToRegister.vue
+++ b/src/views/Invitation/InviteToRegister.vue
@@ -7,7 +7,7 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -846,25 +846,6 @@ onMounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 12px;
diff --git a/src/views/Invitation/inviteNewUser.vue b/src/views/Invitation/inviteNewUser.vue
index 95979c0..3dc26b4 100644
--- a/src/views/Invitation/inviteNewUser.vue
+++ b/src/views/Invitation/inviteNewUser.vue
@@ -7,7 +7,7 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg1New'), imageUrl('bg2'), imageUrl('bg3')]" />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -1873,25 +1873,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 12px;
diff --git a/src/views/PlatformPolicy/PlatformPolicy.vue b/src/views/PlatformPolicy/PlatformPolicy.vue
index 83bf174..bf6de71 100644
--- a/src/views/PlatformPolicy/PlatformPolicy.vue
+++ b/src/views/PlatformPolicy/PlatformPolicy.vue
@@ -195,26 +195,6 @@ onMounted(() => {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #8b5cf6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 /* 政策列表 */
 .policy-list {
   display: flex;
diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index 61c2ebb..c4aaf7d 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -6,7 +6,7 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]" />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -2047,16 +2047,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
 .scrollX::-webkit-scrollbar {
   display: none;
 }
@@ -2072,15 +2062,6 @@ onUnmounted(() => {
   left: 0;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 textarea::placeholder {
   font-size: 0.8em;
   font-weight: bold;
diff --git a/src/views/Ranking/GamesKing/index.vue b/src/views/Ranking/GamesKing/index.vue
index e4f2dc7..e7b9b76 100644
--- a/src/views/Ranking/GamesKing/index.vue
+++ b/src/views/Ranking/GamesKing/index.vue
@@ -14,7 +14,7 @@
       />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -1496,26 +1496,6 @@ onUnmounted(() => {
   z-index: 0;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
diff --git a/src/views/Ranking/KingAndQueen/TopList.vue b/src/views/Ranking/KingAndQueen/TopList.vue
index 34a6fad..f4d0385 100644
--- a/src/views/Ranking/KingAndQueen/TopList.vue
+++ b/src/views/Ranking/KingAndQueen/TopList.vue
@@ -7,7 +7,7 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p style="color: #fff">{{ $t('loading') }}...</p>
     </div>
 
@@ -1224,25 +1224,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index 224e7b0..affef57 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/src/views/Ranking/Overall/Ranking.vue
@@ -7,7 +7,7 @@
       <BackgroundLayer :backgroundImages="[currentBgImage]" />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -756,25 +756,6 @@ onMounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
index 4d41700..957cb80 100644
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@@ -7,7 +7,7 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
 
       <!-- 加载动画 -->
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ $t('loading') }}...</p>
     </div>
 
@@ -1355,25 +1355,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
diff --git a/src/views/RechargeAgency/SearchUser.vue b/src/views/RechargeAgency/SearchUser.vue
index 4775a7d..dab7737 100644
--- a/src/views/RechargeAgency/SearchUser.vue
+++ b/src/views/RechargeAgency/SearchUser.vue
@@ -112,7 +112,7 @@
 
       <!-- 加载状态 -->
       <div v-if="isSearching" class="loading-state">
-        <div class="loading-spinner"></div>
+        <LoadingSpinner margin="0 auto 16px" />
         <p>{{ t('searching') }}...</p>
       </div>
 
@@ -426,25 +426,6 @@ input::placeholder {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .loading-state p {
   margin: 0;
   font-size: 14px;
diff --git a/src/views/RechargeAgency/SellerRecordsView.vue b/src/views/RechargeAgency/SellerRecordsView.vue
index bc569b8..f48a148 100644
--- a/src/views/RechargeAgency/SellerRecordsView.vue
+++ b/src/views/RechargeAgency/SellerRecordsView.vue
@@ -91,7 +91,7 @@
         "
       >
         <!-- 加载动画 -->
-        <div class="loading-spinner"></div>
+        <LoadingSpinner margin="0 auto 16px" />
 
         <!-- 提示文本 -->
         <p style="margin: 0; font-size: 14px">{{ t('loading') }}...</p>
@@ -485,25 +485,6 @@ onMounted(async () => {
   display: none;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .transaction-type {
   font-size: 12px;
   color: #9ca3af;
diff --git a/src/views/RechargeAgency/index.vue b/src/views/RechargeAgency/index.vue
index bc808c5..6afc6f9 100644
--- a/src/views/RechargeAgency/index.vue
+++ b/src/views/RechargeAgency/index.vue
@@ -11,7 +11,7 @@
 
     <!-- 权限校验加载状态 -->
     <div v-if="checkingAccess" class="loading-container">
-      <div class="loading-spinner"></div>
+      <LoadingSpinner />
       <p>{{ t('checking_permissions') }}...</p>
     </div>
 
@@ -657,25 +657,6 @@ onMounted(() => {})
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #f59e0b;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .content {
   padding: 16px;
   position: relative;
diff --git a/src/views/Wallet/Detail/HistorySalary.vue b/src/views/Wallet/Detail/HistorySalary.vue
index e848142..7184958 100644
--- a/src/views/Wallet/Detail/HistorySalary.vue
+++ b/src/views/Wallet/Detail/HistorySalary.vue
@@ -44,7 +44,7 @@
 
         <!-- 加载状态 -->
         <div v-if="loading" class="loading-container">
-          <div class="loading-spinner"></div>
+          <LoadingSpinner />
           <p>{{ t('loading') }}...</p>
         </div>
 
@@ -588,25 +588,6 @@ onMounted(async () => {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #8b5cf6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 /* 空数据状态 */
 .empty-state {
   display: flex;
diff --git a/src/views/Wallet/Detail/InformationDetails.vue b/src/views/Wallet/Detail/InformationDetails.vue
index 63deec0..8076054 100644
--- a/src/views/Wallet/Detail/InformationDetails.vue
+++ b/src/views/Wallet/Detail/InformationDetails.vue
@@ -11,7 +11,7 @@
     <div class="content">
       <!-- 加载状态 -->
       <div v-if="loading" class="loading-state">
-        <div class="loading-spinner"></div>
+        <LoadingSpinner margin="0 auto 16px" />
         <p>{{ t('loading') }}...</p>
       </div>
 
@@ -241,25 +241,6 @@ onMounted(() => {
   color: #666;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #8b5cf6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .loading-state p {
   margin: 0;
   font-size: 14px;
diff --git a/src/views/Wallet/Transfer/SearchPayee.vue b/src/views/Wallet/Transfer/SearchPayee.vue
index 5507235..e20c6ad 100644
--- a/src/views/Wallet/Transfer/SearchPayee.vue
+++ b/src/views/Wallet/Transfer/SearchPayee.vue
@@ -71,7 +71,7 @@
 
       <!-- 角色检查加载状态 -->
       <div v-if="isLoadingRole" class="loading-state">
-        <div class="loading-spinner"></div>
+        <LoadingSpinner margin="0 auto 16px" />
         <p>{{ t('checking_permissions') }}...</p>
       </div>
 
@@ -179,7 +179,7 @@
 
       <!-- 加载状态 -->
       <div v-if="isSearching" class="loading-state">
-        <div class="loading-spinner"></div>
+        <LoadingSpinner margin="0 auto 16px" />
         <p>{{ t('searching') }}...</p>
       </div>
     </div>
@@ -405,25 +405,6 @@ onMounted(() => {})
   padding: 40px 20px;
 }
 
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #8b5cf6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 16px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .loading-state p {
   margin: 0;
   color: #666;