hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 各个页面中使用加载动画组件

Browse Source
This commit is contained in:
hzj 2026-04-13 10:44:01 +08:00
parent c1961eed4b
commit 1405c723bd
28 changed files with 25 additions and 565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/Activities/LesserBairam/index.vue
View File

@ -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;

21
src/views/Activities/LoginReward/index.vue
View File

@ -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;
}

21
src/views/Activities/LuckyDollars/Season3/index.vue
View File

@ -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;

20
src/views/Activities/LuckyDollars/Season4/index.vue
View File

@ -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;

19
src/views/Activities/SpringFestival/Ranking.vue
View File

@ -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;
}

19
src/views/Activities/SpringFestival/RankingReward.vue
View File

@ -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;
}

19
src/views/Activities/SpringFestival/RechargeReward.vue
View File

@ -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;

19
src/views/Activities/SpringFestival/Task.vue
View File

@ -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;

21
src/views/Activities/SpringFestival/index.vue
View File

@ -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;

21
src/views/AgencyCenter/Message.vue
View File

@ -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;

21
src/views/AgencyCenter/TeamBill.vue
View File

@ -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;

30
src/views/AgencyCenter/TeamMember.vue
View File

@ -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;

21
src/views/AgencyCenter/components/TeamBillMore.vue
View File

@ -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;

21
src/views/GoodID/index.vue
View File

@ -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;

21
src/views/Invitation/InviteToRegister.vue
View File

@ -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;

21
src/views/Invitation/inviteNewUser.vue
View File

@ -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;

20
src/views/PlatformPolicy/PlatformPolicy.vue
View File

@ -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;

21
src/views/Ranking/Couple/index.vue
View File

@ -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;

22
src/views/Ranking/GamesKing/index.vue
View File

@ -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;

21
src/views/Ranking/KingAndQueen/TopList.vue
View File

@ -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;

21
src/views/Ranking/Overall/Ranking.vue
View File

@ -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;

21
src/views/Ranking/WeeklyStar/WeeklyStar.vue
View File

@ -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;

21
src/views/RechargeAgency/SearchUser.vue
View File

@ -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;

21
src/views/RechargeAgency/SellerRecordsView.vue
View File

@ -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;

21
src/views/RechargeAgency/index.vue
View File

@ -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;

21
src/views/Wallet/Detail/HistorySalary.vue
View File

@ -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;

21
src/views/Wallet/Detail/InformationDetails.vue
View File

@ -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;

23
src/views/Wallet/Transfer/SearchPayee.vue
View File

@ -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;