style(排行榜、活动): 加载动画补充背景
This commit is contained in:
parent
5dde701998
commit
d1b67da5e5
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user