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

style(加载动画): 将加载动画的样式抽象成一个新的公共组件，然后在页面中使用

Browse Source
This commit is contained in:
hzj 2026-05-15 16:39:50 +08:00
parent fe031a37ba
commit fd0a3a6202
30 changed files with 74 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/LoadingContent.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="loading-content">
<img
:src="loadingImg"
alt=""
class="loading-spinner-image"
:style="{ width: size, height: size, margin: spinnerMargin }"
/>
<p v-if="$slots.default" :style="textStyle">
<slot />
</p>
</div>
</template>
<script setup>
import loadingImg from '@/assets/icon/Azizi/loading.webp'
defineProps({
size: {
type: String,
default: '80px',
},
spinnerMargin: {
type: String,
default: '0 auto',
},
textStyle: {
type: [String, Object, Array],
default: '',
},
})
</script>
<style scoped>
.loading-spinner-image {
position: relative;
z-index: 1;
display: block;
object-fit: contain;
}
</style>

32
src/components/LoadingSpinner.vue
View File

@ -1,32 +0,0 @@
<template>
<img
:src="loadingImg"
alt=""
class="loading-spinner-image"
:style="{ width: size, height: size, margin }"
/>
</template>
<script setup>
import loadingImg from '@/assets/icon/Azizi/loading.webp'
defineProps({
size: {
type: String,
default: '80px',
},
margin: {
type: String,
default: '0 auto',
},
})
</script>
<style scoped>
.loading-spinner-image {
position: relative;
z-index: 1;
display: block;
object-fit: contain;
}
</style>

4
src/main.js
View File

@ -14,7 +14,7 @@ import { useLangStore } from '@/stores/lang'
import i18n, { initI18n, setLocale } from './locales/i18n' import i18n, { initI18n, setLocale } from './locales/i18n'
import App from './App.vue' import App from './App.vue'
import LoadingSpinner from './components/LoadingSpinner.vue' import LoadingContent from './components/LoadingContent.vue'
import router from './router' import router from './router'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
@ -28,7 +28,7 @@ pinia.use(piniaPluginPersistedstate)
const app = createApp(App) const app = createApp(App)
app.directive('smart-img', smartImage) app.directive('smart-img', smartImage)
app.component('LoadingSpinner', LoadingSpinner) app.component('LoadingContent', LoadingContent)
app.use(router) app.use(router)
app.use(pinia) app.use(pinia)

6
src/views/Activities/DailyRecharge/index.vue
View File

@ -2,11 +2,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<!-- 加载动画 -->
<LoadingSpinner />
<p>{{ t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -3,10 +3,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -2,11 +2,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<!-- 加载动画 -->
<LoadingSpinner />
<p>{{ t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -3,10 +3,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -2,10 +2,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

5
src/views/Activities/LuckyDollars/Season5/index.vue
View File

@ -2,10 +2,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

5
src/views/Activities/PokerAce/index.vue
View File

@ -2,10 +2,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<LoadingSpinner />
<p>{{ t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -2,11 +2,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<!-- 加载动画 -->
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -10,8 +10,7 @@
<div style="padding: 16px; position: relative; z-index: 2"> <div style="padding: 16px; position: relative; z-index: 2">
<div v-if="loading" class="loading-state"> <div v-if="loading" class="loading-state">
<LoadingSpinner margin="0 auto 16px" /> <LoadingContent spinner-margin="0 auto 16px">{{ t('loading') }}...</LoadingContent>
<p>{{ t('loading') }}...</p>
</div> </div>
<div v-else style="display: flex; flex-direction: column; gap: 12px"> <div v-else style="display: flex; flex-direction: column; gap: 12px">

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

@ -44,8 +44,7 @@
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="loading" class="loading-container"> <div v-if="loading" class="loading-container">
<LoadingSpinner /> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<p>{{ t('loading') }}...</p>
</div> </div>
<!-- 账单列表 --> <!-- 账单列表 -->

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

@ -84,8 +84,7 @@
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="loading" class="loading-container"> <div v-if="loading" class="loading-container">
<LoadingSpinner /> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<p>{{ t('loading') }}...</p>
</div> </div>
<!-- 成员列表 --> <!-- 成员列表 -->
@ -204,8 +203,7 @@
<div> <div>
<!-- 加载更多状态 --> <!-- 加载更多状态 -->
<div v-if="loadingMore" class="loading-more"> <div v-if="loadingMore" class="loading-more">
<LoadingSpinner size="20px" margin="0 auto 8px" /> <LoadingContent size="20px" spinner-margin="0 auto 8px">{{ t('loading') }}...</LoadingContent>
<p>{{ t('loading') }}...</p>
</div> </div>
<!-- 没有更多数据提示 --> <!-- 没有更多数据提示 -->

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

@ -77,8 +77,7 @@
<!-- 加载成员 --> <!-- 加载成员 -->
<div v-if="loading" class="loading-container"> <div v-if="loading" class="loading-container">
<LoadingSpinner /> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<p>{{ t('loading') }}...</p>
</div> </div>
<!-- 成员列表 --> <!-- 成员列表 -->

3
src/views/CPReward/index.vue
View File

@ -3,8 +3,7 @@
<GeneralHeader :title="t('cp_reward')" :isHomePage="true" color="black" class="page-header" /> <GeneralHeader :title="t('cp_reward')" :isHomePage="true" color="black" class="page-header" />
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<LoadingSpinner /> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<p>{{ t('loading') }}...</p>
</div> </div>
<div v-show="!isLoading" class="reward-content"> <div v-show="!isLoading" class="reward-content">

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

@ -3,8 +3,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<LoadingSpinner /> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<p>{{ $t('loading') }}...</p>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -7,8 +7,7 @@
<BackgroundLayer :backgroundImages="[imageUrl('bg')]" /> <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner /> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<p>{{ $t('loading') }}...</p>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -7,8 +7,7 @@
<BackgroundLayer :backgroundImages="[imageUrl('bg1New'), imageUrl('bg2'), imageUrl('bg3')]" /> <BackgroundLayer :backgroundImages="[imageUrl('bg1New'), imageUrl('bg2'), imageUrl('bg3')]" />
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner /> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<p>{{ $t('loading') }}...</p>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -2,11 +2,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<!-- 加载动画 -->
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -3,11 +3,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<!-- 加载动画 -->
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -3,11 +3,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent :text-style="{ color: '#fff' }">{{ $t('loading') }}...</LoadingContent>
<!-- 加载动画 -->
<LoadingSpinner />
<p style="color: #fff">{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -5,10 +5,7 @@
:style="{ backgroundColor: currentRankingConfig.backgroundColor }" :style="{ backgroundColor: currentRankingConfig.backgroundColor }"
> >
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<LoadingSpinner />
<p>{{ t('loading') }}...</p>
</div>
</div> </div>
<div v-else style="position: relative; z-index: 4"> <div v-else style="position: relative; z-index: 4">

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

@ -3,11 +3,7 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<div class="loading-content"> <LoadingContent>{{ $t('loading') }}...</LoadingContent>
<!-- 加载动画 -->
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -112,8 +112,7 @@
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="isSearching" class="loading-state"> <div v-if="isSearching" class="loading-state">
<LoadingSpinner margin="0 auto 16px" /> <LoadingContent spinner-margin="0 auto 16px">{{ t('searching') }}...</LoadingContent>
<p>{{ t('searching') }}...</p>
</div> </div>
<!-- 空状态 --> <!-- 空状态 -->

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

@ -91,10 +91,9 @@
" "
> >
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner margin="0 auto 16px" /> <LoadingContent spinner-margin="0 auto 16px" :text-style="{ fontSize: '14px' }">
{{ t('loading') }}...
<!-- 提示文本 --> </LoadingContent>
<p style="margin: 0; font-size: 14px">{{ t('loading') }}...</p>
</div> </div>
<!-- 用户列表(加载完...) --> <!-- 用户列表(加载完...) -->

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

@ -11,8 +11,7 @@
<!-- 权限校验加载状态 --> <!-- 权限校验加载状态 -->
<div v-if="checkingAccess" class="loading-container"> <div v-if="checkingAccess" class="loading-container">
<LoadingSpinner /> <LoadingContent>{{ t('checking_permissions') }}...</LoadingContent>
<p>{{ t('checking_permissions') }}...</p>
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->

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

@ -44,8 +44,7 @@
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="loading" class="loading-container"> <div v-if="loading" class="loading-container">
<LoadingSpinner /> <LoadingContent>{{ t('loading') }}...</LoadingContent>
<p>{{ t('loading') }}...</p>
</div> </div>
<!-- 报告列表 --> <!-- 报告列表 -->

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

@ -11,8 +11,7 @@
<div class="content"> <div class="content">
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="loading" class="loading-state"> <div v-if="loading" class="loading-state">
<LoadingSpinner margin="0 auto 16px" /> <LoadingContent spinner-margin="0 auto 16px">{{ t('loading') }}...</LoadingContent>
<p>{{ t('loading') }}...</p>
</div> </div>
<!-- 错误状态 --> <!-- 错误状态 -->

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

@ -71,8 +71,7 @@
<!-- 角色检查加载状态 --> <!-- 角色检查加载状态 -->
<div v-if="isLoadingRole" class="loading-state"> <div v-if="isLoadingRole" class="loading-state">
<LoadingSpinner margin="0 auto 16px" /> <LoadingContent spinner-margin="0 auto 16px">{{ t('checking_permissions') }}...</LoadingContent>
<p>{{ t('checking_permissions') }}...</p>
</div> </div>
<!-- 搜索结果 --> <!-- 搜索结果 -->
@ -179,8 +178,7 @@
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="isSearching" class="loading-state"> <div v-if="isSearching" class="loading-state">
<LoadingSpinner margin="0 auto 16px" /> <LoadingContent spinner-margin="0 auto 16px">{{ t('searching') }}...</LoadingContent>
<p>{{ t('searching') }}...</p>
</div> </div>
</div> </div>