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 14:27:38 +08:00
parent 50786678bc
commit 5ae3ad9590
16 changed files with 77 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/活动页/竞品H5与性能优化分析.md
View File

@ -264,7 +264,7 @@ backdrop-filter
低端机模式和系统“减少动态效果”模式都不再暂停 `.scroll-wrapper` 这类跑马灯动画，避免 iOS 或低端安卓上排行榜、奖励列表、用户昵称等文本滚动完全不动。系统开启“减少动态效果”时，只暂停弹幕这类更重的装饰动画。
同时，多个活动页和榜单页的 `isLoading` 预加载阶段已取消渲染 `BackgroundLayer`，只保留 `LoadingSpinner` 和 loading 文案，避免加载态和正式页面重复创建背景图层。
同时，多个活动页和榜单页的 `isLoading` 预加载阶段已取消渲染 `BackgroundLayer`、背景图片和其他装饰节点，只保留 `LoadingSpinner` 和 loading 文案。两者统一包在 `.loading-content` 容器中，使用半透明黑底、8px 圆角和 10px 内边距，避免加载态和正式页面重复创建背景图层。
### 10. 弹幕组件专项优化

2
src/components/LoadingSpinner.vue
View File

@ -17,7 +17,7 @@ defineProps({
},
margin: {
type: String,
default: '0 auto 12px',
default: '0 auto',
},
})
</script>

16
src/styles/global.css
View File

@ -34,3 +34,19 @@ html.reduce-motion-mode .barrage-item {
transform: none !important;
will-change: auto !important;
}
/* 统一 loading 内容容器，避免预加载阶段渲染额外背景或装饰节点。 */
.loading-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.4);
}
.loading-content p {
margin: 0;
text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -3,16 +3,11 @@
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<img
v-smart-img
:src="imageUrl('bg2')"
alt=""
style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: -1"
/>
<!-- 加载动画 -->
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
<div class="loading-content">
<!-- 加载动画 -->
<LoadingSpinner />
<p>{{ $t('loading') }}...</p>
</div>
</div>
<!-- 主要内容 -->

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

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

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

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

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

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