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:49:52 +08:00
parent e13e679b1e
commit 1a9b8bfc1e
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,8 +8,11 @@
</div> </div>
<!-- 主要内容 --> <!-- 主要内容 -->
<div v-else style="width: 100vw; overflow: hidden"> <div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }"> <!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
<div class="bg">
<!-- 状态栏占位区域（仅在APP中显示） --> <!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div> <div v-if="isInAppEnvironment" style="height: 30px"></div>
@ -364,7 +367,7 @@
" "
:style="{ backgroundImage: `url(${imageUrl('border-item')})` }" :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
> >
<!-- 内容 --> <!-- 国王皇后榜首 -->
<div <div
style=" style="
width: 100%; width: 100%;
@ -448,6 +451,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 时间 -->
<div <div
style=" style="
display: flex; display: flex;
@ -784,6 +789,7 @@ import {
} from '@/api/topList.js' } from '@/api/topList.js'
import { getMemberProfile } from '@/api/wallet' import { getMemberProfile } from '@/api/wallet'
import BackgroundLayer from '@/components/BackgroundLayer.vue'
import borderImg from './components/borderImg.vue' import borderImg from './components/borderImg.vue'
import itemCenter from '@/components/itemCenter.vue' import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue' import maskLayer from '@/components/MaskLayer.vue'
@ -1077,8 +1083,8 @@ const updatePageData = async () => {
const preloadCriticalImages = async () => { const preloadCriticalImages = async () => {
const criticalImages = [ const criticalImages = [
imageUrl('bg'), imageUrl('bg'),
// imageUrl('border-item'), // 这个是用在background-image的，无法使用v-smart-img指令 imageUrl('border-item'),
// imageUrl('border-item-user'), // 这个是用在background-image的，无法使用v-smart-img指令 imageUrl('border-item-user'),
imageUrl('help'), imageUrl('help'),
imageUrl('history'), imageUrl('history'),
imageUrl('listTitle'), imageUrl('listTitle'),
@ -1154,9 +1160,6 @@ onUnmounted(() => {
.bg { .bg {
width: 100vw; width: 100vw;
background-image: var(--bg-url);
background-size: 100% auto;
background-repeat: no-repeat;
position: relative; position: relative;
} }