style(排行榜、活动): 加载动画补充背景

This commit is contained in:
hzj 2026-02-13 11:26:46 +08:00
parent 5dde701998
commit d1b67da5e5
7 changed files with 69 additions and 0 deletions

View File

@ -2,6 +2,10 @@
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]" />
<!-- 加载动画 -->
<div class="loading-spinner"></div>
<p>{{ t('loading') }}...</p>
</div>
@ -328,6 +332,9 @@ onUnmounted(() => {})
justify-content: center;
align-items: center;
color: #666;
overflow: hidden;
position: relative;
}
.loading-spinner {

View File

@ -3,6 +3,10 @@
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
<!-- 加载动画 -->
<div class="loading-spinner"></div>
<p>{{ $t('loading') }}...</p>
</div>
@ -838,6 +842,9 @@ onMounted(() => {
justify-content: center;
align-items: center;
color: #666;
overflow: hidden;
position: relative;
}
.loading-spinner {

View File

@ -2,6 +2,10 @@
<div class="fullPage">
<!-- 预加载状态 -->
<div v-show="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]" />
<!-- 加载动画 -->
<div class="loading-spinner"></div>
<p>{{ $t('loading') }}...</p>
</div>
@ -1913,6 +1917,9 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
color: #666;
overflow: hidden;
position: relative;
}
.loading-spinner {

View File

@ -3,6 +3,28 @@
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
<img
v-smart-img
:src="imageUrl('bg2')"
alt=""
style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: -1"
/>
<!-- <div class="bg">
<itemCenter :imgUrl="imageUrl('bg')" style="position: absolute; z-index: 0">
<img
v-smart-img
:src="webpUrl('bg')"
alt=""
style="display: block; width: 100%; object-fit: cover"
/>
</itemCenter>
</div> -->
<!-- 加载动画 -->
<div class="loading-spinner"></div>
<p>{{ $t('loading') }}...</p>
</div>
@ -742,6 +764,7 @@ import {
activityResource, //
} from '@/api/activity.js'
import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue'
import TopUser from './components/topUser.vue'
import maskLayer from '@/components/MaskLayer.vue'
@ -1163,6 +1186,10 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
color: #666;
overflow: hidden;
position: relative;
z-index: 0;
}
.loading-spinner {

View File

@ -3,6 +3,10 @@
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
<!-- 加载动画 -->
<div class="loading-spinner"></div>
<p style="color: #fff">{{ $t('loading') }}...</p>
</div>
@ -1215,6 +1219,9 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
color: #666;
overflow: hidden;
position: relative;
}
.loading-spinner {

View File

@ -3,6 +3,10 @@
<div class="fullPage" :style="{ backgroundColor }">
<!-- 预加载状态 -->
<div v-show="isLoading" class="loading-container">
<!-- 背景图 -->
<BackgroundLayer :backgroundImages="[currentBgImage]" />
<!-- 加载动画 -->
<div class="loading-spinner"></div>
<p>{{ $t('loading') }}...</p>
</div>
@ -749,6 +753,9 @@ onMounted(() => {
justify-content: center;
align-items: center;
color: #666;
overflow: hidden;
position: relative;
}
.loading-spinner {

View File

@ -3,6 +3,10 @@
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
<!-- 加载动画 -->
<div class="loading-spinner"></div>
<p>{{ $t('loading') }}...</p>
</div>
@ -1335,6 +1339,9 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
color: #666;
overflow: hidden;
position: relative;
}
.loading-spinner {