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

feat(周星榜页面): 使用背景图组件

Browse Source
This commit is contained in:
hzj 2026-01-05 17:48:59 +08:00
parent 860ff82ccd
commit e13e679b1e
1 changed files with 712 additions and 676 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<!-- src/views/Ranking/WeeklyStar/WeeklyStar.vue -->
<template>
<div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<div class="loading-spinner"></div>
@ -8,7 +8,11 @@
</div>
<!-- 主要内容 -->
<div v-else>
<div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
<div style="width: 100vw; position: relative">
<!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div>
@ -306,7 +310,12 @@
<!-- top模块 -->
<div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
<!-- top背景图 -->
<img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
<img
v-smart-img
:src="imageUrl('topBg')"
alt=""
style="width: 100%; display: block"
/>
<!-- 标题 -->
<div
style="
@ -339,7 +348,10 @@
v-for="gift in topItem.propsGroup.activityRewardProps"
style="display: flex; flex-direction: column; align-items: center"
>
<itemCenter :imgUrl="imageUrl('giftItemBg')" style="width: 90%; margin-bottom: 3px">
<itemCenter
:imgUrl="imageUrl('giftItemBg')"
style="width: 90%; margin-bottom: 3px"
>
<!-- gift图 -->
<img
v-smart-img
@ -364,7 +376,12 @@
<div v-show="exchargeShow" style="display: flex; justify-content: center">
<div style="position: relative; width: 100%">
<!-- 背景图 -->
<img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
<img
v-smart-img
:src="imageUrl('longBg')"
alt=""
style="width: 100%; display: block"
/>
<!-- 标题 -->
<div
@ -561,7 +578,12 @@
<!-- history弹窗 -->
<div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
<!-- 背景图 -->
<img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
<img
v-smart-img
:src="imageUrl('mediumBg')"
alt=""
style="width: 100%; display: block"
/>
<!-- 标题 -->
<div
style="
@ -606,7 +628,12 @@
/>
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
<div
style="height: 100%; display: flex; justify-content: center; align-items: center"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<img
v-smart-img
@ -664,7 +691,12 @@
<!-- 历史时间 -->
<div
style="width: 50%; display: flex; justify-content: space-between; align-items: center"
style="
width: 50%;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<img
v-smart-img
@ -741,7 +773,12 @@
<!-- 交易商品弹窗 -->
<div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
<!-- 背景图 -->
<img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
<img
v-smart-img
:src="imageUrl('mediumBg')"
alt=""
style="width: 100%; display: block"
/>
<!-- 标题 -->
<div
style="
@ -794,6 +831,7 @@
</maskLayer>
</div>
</div>
</div>
</template>
<script setup>
@ -818,6 +856,7 @@ import {
exchangeGood,
} from '@/api/weeklyStar.js'
import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'
import TopUser from './components/topUser.vue'
@ -1129,7 +1168,7 @@ const updatePageData = async () => {
// 预加载关键图片
const preloadCriticalImages = async () => {
const criticalImages = [
// imageUrl('bg'),
imageUrl('bg'),
imageUrl('history'),
imageUrl('gifts'),
imageUrl('dayBg'),
@ -1219,9 +1258,6 @@ onUnmounted(() => {
width: 100vw;
min-height: 100vh;
background-color: #311300;
background-image: var(--bg-url);
background-size: 100% auto;
background-repeat: no-repeat;
position: relative;
}