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

fix(图片展示): 调整图片的引入方式

Browse Source
This commit is contained in:
hzj 2025-09-22 12:28:29 +08:00
parent 368f8401d8
commit 9b8339852b
1 changed files with 40 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/views/TopList/TopList.vue
View File

@ -6,7 +6,7 @@
<!-- 帮助按钮 --> <!-- 帮助按钮 -->
<img <img
src="/src/assets/images/TopList/help.png" :src="images.help"
alt="" alt=""
style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4" style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
@click="helpInfoShow = true" @click="helpInfoShow = true"
@ -14,7 +14,7 @@
<!-- history按钮 --> <!-- history按钮 -->
<img <img
src="/src/assets/images/TopList/history.png" :src="images.history"
alt="" alt=""
style="width: 20%; margin-top: 20px" style="width: 20%; margin-top: 20px"
@click="historyShow = true" @click="historyShow = true"
@ -23,7 +23,7 @@
<!-- 每周榜首 --> <!-- 每周榜首 -->
<div style="display: flex; flex-direction: column; align-items: center"> <div style="display: flex; flex-direction: column; align-items: center">
<!-- 主标题 --> <!-- 主标题 -->
<img src="/src/assets/images/TopList/listTitle.png" alt="" style="width: 90%" /> <img :src="images.listTitle" alt="" style="width: 90%" />
<!-- 榜首 --> <!-- 榜首 -->
<div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"> <div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
<div style="width: 40%" v-for="(topUser, index) in listTop" :key="index"> <div style="width: 40%" v-for="(topUser, index) in listTop" :key="index">
@ -94,12 +94,7 @@
<div style="display: flex; justify-content: center; margin-top: 20px"> <div style="display: flex; justify-content: center; margin-top: 20px">
<!-- 天数 --> <!-- 天数 -->
<div style="width: 10%; position: relative; margin-right: 10px"> <div style="width: 10%; position: relative; margin-right: 10px">
<img <img :src="images.dayBg" alt="" width="100%" style="display: block" />
src="/src/assets/images/TopList/dayBg.png"
alt=""
width="100%"
style="display: block"
/>
<div <div
style=" style="
position: absolute; position: absolute;
@ -117,12 +112,7 @@
<!-- 当天时间倒计时 --> <!-- 当天时间倒计时 -->
<div style="width: 23.75%; position: relative"> <div style="width: 23.75%; position: relative">
<img <img :src="images.timeBg" alt="" width="100%" style="display: block" />
src="/src/assets/images/TopList/timeBg.png"
alt=""
width="100%"
style="display: block"
/>
<div <div
style=" style="
position: absolute; position: absolute;
@ -144,18 +134,13 @@
<!-- rewards --> <!-- rewards -->
<div style="display: flex; justify-content: flex-end; margin-top: -8%"> <div style="display: flex; justify-content: flex-end; margin-top: -8%">
<img <img :src="images.rewards" alt="" style="width: 20%" @click="rewardsShow = true" />
src="/src/assets/images/TopList/rewards.png"
alt=""
style="width: 20%"
@click="rewardsShow = true"
/>
</div> </div>
<!-- 每周礼物 --> <!-- 每周礼物 -->
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<div style="width: 100%; position: relative"> <div style="width: 100%; position: relative">
<img src="/src/assets/images/TopList/eventGifts.png" alt="" style="width: 100%" /> <img :src="images.eventGifts" alt="" style="width: 100%" />
<div <div
style=" style="
position: absolute; position: absolute;
@ -175,7 +160,7 @@
style="width: 30%; display: flex; flex-direction: column" style="width: 30%; display: flex; flex-direction: column"
> >
<div style="position: relative"> <div style="position: relative">
<img style="" src="/src/assets/images/TopList/gift.png" alt="" width="100%" /> <img style="" :src="images.gift" alt="" width="100%" />
<div <div
style=" style="
position: absolute; position: absolute;
@ -215,26 +200,16 @@
v-if="visibleKingList" v-if="visibleKingList"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img src="/src/assets/images/TopList/kingBtActive.png" alt="" style="width: 40%" /> <img :src="images.kingBtActive" alt="" style="width: 40%" />
<img <img :src="images.queenBt" alt="" style="width: 40%" @click="visibleKingList = false" />
src="/src/assets/images/TopList/queenBt.png"
alt=""
style="width: 40%"
@click="visibleKingList = false"
/>
</div> </div>
<div <div
v-if="!visibleKingList" v-if="!visibleKingList"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img <img :src="images.kingBt" alt="" style="width: 40%" @click="visibleKingList = true" />
src="/src/assets/images/TopList/kingBt.png" <img :src="images.queenBtActive" alt="" style="width: 40%" />
alt=""
style="width: 40%"
@click="visibleKingList = true"
/>
<img src="/src/assets/images/TopList/queenBtActive.png" alt="" style="width: 40%" />
</div> </div>
</div> </div>
@ -246,11 +221,7 @@
v-for="(listItem, index) in topList" v-for="(listItem, index) in topList"
:key="index" :key="index"
> >
<img <img :src="images['border-item-user']" alt="" style="width: 100%; display: block" />
src="/src/assets/images/TopList/border-item-user.png"
alt=""
style="width: 100%; display: block"
/>
<div <div
style=" style="
position: absolute; position: absolute;
@ -332,7 +303,7 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup"> <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 --> <!-- help弹窗 -->
<div v-if="helpInfoShow" style="margin: 20% 0" @click.stop> <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
<img src="/src/assets/images/TopList/helpInfo.png" alt="" style="width: 100%" /> <img :src="images.helpInfo" alt="" style="width: 100%" />
</div> </div>
<!-- history弹窗 --> <!-- history弹窗 -->
@ -341,12 +312,12 @@
<borderImg title="History"> <borderImg title="History">
<div <div
style=" style="
background-image: url(/src/assets/images/TopList/border-item.png);
background-size: 100% 100%; background-size: 100% 100%;
min-height: 20px; min-height: 20px;
margin: -10px 0; margin: -10px 0;
padding: 10px 10%; padding: 10px 10%;
" "
:style="{ backgroundImage: `url(${images['border-item']})` }"
> >
<!-- 内容 --> <!-- 内容 -->
<div <div
@ -435,7 +406,7 @@
" "
> >
<img <img
src="/src/assets/images/TopList/timeBack.png" :src="images.timeBack"
alt="" alt=""
width="18px" width="18px"
height="18px" height="18px"
@ -459,7 +430,7 @@
{{ showTopOne.group }} {{ showTopOne.group }}
</div> </div>
<img <img
src="/src/assets/images/TopList/timeNext.png" :src="images.timeNext"
alt="" alt=""
width="18px" width="18px"
height="18px" height="18px"
@ -476,7 +447,7 @@
<div style="position: relative"> <div style="position: relative">
<!-- 取消按钮 --> <!-- 取消按钮 -->
<img <img
src="/src/assets/images/TopList/cancel.png" :src="images.cancel"
alt="" alt=""
style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99" style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
@click="closedPopup" @click="closedPopup"
@ -485,12 +456,12 @@
<borderImg title="Rewards"> <borderImg title="Rewards">
<div <div
style=" style="
background-image: url(/src/assets/images/TopList/border-item.png);
background-size: 100% 100%; background-size: 100% 100%;
min-height: 20px; min-height: 20px;
margin: -10px 0; margin: -10px 0;
padding: 10px 10%; padding: 10px 10%;
" "
:style="{ backgroundImage: `url(${images['border-item']})` }"
> >
<!-- 奖励榜切换按钮 --> <!-- 奖励榜切换按钮 -->
<div style="width: 100%"> <div style="width: 100%">
@ -498,13 +469,9 @@
v-if="visibleKingRewards" v-if="visibleKingRewards"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img :src="images.kingBtActive" alt="" style="width: 40%" />
<img <img
src="/src/assets/images/TopList/kingBtActive.png" :src="images.queenBt"
alt=""
style="width: 40%"
/>
<img
src="/src/assets/images/TopList/queenBt.png"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingRewards = false" @click="visibleKingRewards = false"
@ -515,16 +482,12 @@
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img <img
src="/src/assets/images/TopList/kingBt.png" :src="images.kingBt"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingRewards = true" @click="visibleKingRewards = true"
/> />
<img <img :src="images.queenBtActive" alt="" style="width: 40%" />
src="/src/assets/images/TopList/queenBtActive.png"
alt=""
style="width: 40%"
/>
</div> </div>
</div> </div>
@ -553,12 +516,7 @@
style="width: 100%" style="width: 100%"
> >
<div style="position: relative"> <div style="position: relative">
<img <img :src="images.gift" style="" alt="" width="100%" />
style=""
src="/src/assets/images/TopList/gift.png"
alt=""
width="100%"
/>
<div <div
style=" style="
position: absolute; position: absolute;
@ -608,11 +566,7 @@
margin-top: 10px; margin-top: 10px;
" "
> >
<img <img :src="images.myRankingBg" alt="" style="width: calc(100% - 1px); display: block" />
src="/src/assets/images/TopList/myRankingBg.png"
alt=""
style="width: calc(100% - 1px); display: block"
/>
<div <div
style=" style="
@ -686,6 +640,15 @@ import {
getHistoryTopOne, getHistoryTopOne,
} from '@/api/topList.js' } from '@/api/topList.js'
import { useDebounce, useThrottle } from '@/utils/useDebounce' import { useDebounce, useThrottle } from '@/utils/useDebounce'
//vite动态批量导入图片
const imageModules = import.meta.glob('@/assets/images/TopList/*.{png,jpg,svg}', { eager: true })
// 生成文件名映射对象（自动移除路径和扩展名）
const images = Object.fromEntries(
Object.entries(imageModules).map(([path, module]) => {
const fileName = path.split('/').pop().split('.')[0]
return [fileName, module.default]
})
)
const visibleKingList = ref(true) const visibleKingList = ref(true)
@ -698,12 +661,12 @@ const showTopOne = computed(() => {
top: [ top: [
{ {
type: 'topKing', type: 'topKing',
Frame: '/src/assets/images/TopList/kingFrame.png', Frame: images.kingFrame,
userInfo: historyList.value[historyIndex.value].wealth, userInfo: historyList.value[historyIndex.value].wealth,
}, },
{ {
type: 'topQueen', type: 'topQueen',
Frame: '/src/assets/images/TopList/queenFrame.png', Frame: images.queenFrame,
userInfo: historyList.value[historyIndex.value].charm, userInfo: historyList.value[historyIndex.value].charm,
}, },
], ],
@ -739,12 +702,12 @@ const queenList = ref([]) // 女王榜
const listTop = ref([ const listTop = ref([
{ {
type: 'topKing', type: 'topKing',
Frame: '/src/assets/images/TopList/kingFrame.png', Frame: images.kingFrame,
userInfo: {}, userInfo: {},
}, },
{ {
type: 'topQueen', type: 'topQueen',
Frame: '/src/assets/images/TopList/queenFrame.png', Frame: images.queenFrame,
userInfo: {}, userInfo: {},
}, },
]) //本周的top1国王和女王 ]) //本周的top1国王和女王
@ -757,11 +720,7 @@ const topList = computed(() => {
const showKingLoading = ref(true) //触底加载功能 const showKingLoading = ref(true) //触底加载功能
const showQueenLoading = ref(true) //触底加载功能 const showQueenLoading = ref(true) //触底加载功能
const topImg = ref([ const topImg = ref([images.top1, images.top2, images.top3]) // top图片
'/src/assets/images/TopList/top1.png',
'/src/assets/images/TopList/top2.png',
'/src/assets/images/TopList/top3.png',
]) // top图片
const visibleKingRewards = ref(true) // 展示奖励榜标签 const visibleKingRewards = ref(true) // 展示奖励榜标签
const kingRewards = ref([]) //国王奖励列表 const kingRewards = ref([]) //国王奖励列表
@ -955,7 +914,7 @@ onUnmounted(() => {
.bg { .bg {
width: 100vw; width: 100vw;
background-image: url(../../assets/images/TopList/bg.png); background-image: url('@/assets/images/TopList/bg.png');
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;