733 lines
23 KiB
Vue
733 lines
23 KiB
Vue
<template>
|
||
<div class="fullPage">
|
||
<div class="bg">
|
||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||
|
||
<!-- 帮助按钮 -->
|
||
<img
|
||
src="/src/assets/images/TopList/help.png"
|
||
alt=""
|
||
style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
|
||
@click="helpInfoShow = true"
|
||
/>
|
||
|
||
<!-- history按钮 -->
|
||
<img
|
||
src="/src/assets/images/TopList/history.png"
|
||
alt=""
|
||
style="width: 20%; margin-top: 20px"
|
||
@click="historyShow = true"
|
||
/>
|
||
|
||
<div style="display: flex; flex-direction: column; align-items: center">
|
||
<!-- 主标题 -->
|
||
<img src="/src/assets/images/TopList/listTitle.png" alt="" style="width: 90%" />
|
||
<!-- 榜首 -->
|
||
<div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
|
||
<div style="width: 40%">
|
||
<div
|
||
style="
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: max-content;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 头像框 -->
|
||
<img
|
||
src="/src/assets/images/TopList/kingFrame.png"
|
||
alt=""
|
||
style="width: 100%; z-index: 1"
|
||
/>
|
||
<!-- 头像 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 0;
|
||
"
|
||
>
|
||
<img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
|
||
</div>
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-weight: 860;
|
||
font-size: 13px;
|
||
position: absolute;
|
||
bottom: 8%;
|
||
z-index: 2;
|
||
"
|
||
>
|
||
Sukabuliete
|
||
</div>
|
||
</div>
|
||
<div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
|
||
</div>
|
||
<div style="width: 40%">
|
||
<div
|
||
style="
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: max-content;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 头像框 -->
|
||
<img
|
||
src="/src/assets/images/TopList/queenFrame.png"
|
||
alt=""
|
||
style="width: 100%; z-index: 1"
|
||
/>
|
||
<!-- 头像 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 0;
|
||
"
|
||
>
|
||
<img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
|
||
</div>
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-weight: 860;
|
||
font-size: 13px;
|
||
position: absolute;
|
||
bottom: 5%;
|
||
z-index: 2;
|
||
"
|
||
>
|
||
Sukabuliete
|
||
</div>
|
||
</div>
|
||
<div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- rewards -->
|
||
<div style="display: flex; justify-content: flex-end">
|
||
<img
|
||
src="/src/assets/images/TopList/rewards.png"
|
||
alt=""
|
||
style="width: 20%"
|
||
@click="rewardsShow = true"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 每周礼物 -->
|
||
<div style="display: flex; justify-content: center">
|
||
<div style="width: 100%; position: relative">
|
||
<img src="/src/assets/images/TopList/eventGifts.png" alt="" style="width: 100%" />
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
|
||
<div
|
||
v-for="(item, index) in 3"
|
||
:key="index"
|
||
style="width: 30%; display: flex; flex-direction: column"
|
||
>
|
||
<img style="" src="/src/assets/images/TopList/gift.png" alt="" />
|
||
<div style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center">
|
||
ddd
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 排行榜 -->
|
||
<div style="width: 100vw">
|
||
<!-- 排行榜切换按钮 -->
|
||
<div style="width: 100%">
|
||
<div
|
||
v-if="visibleKingList"
|
||
style="width: 100%; display: flex; justify-content: space-around"
|
||
>
|
||
<img src="/src/assets/images/TopList/kingBtActive.png" alt="" style="width: 40%" />
|
||
<img
|
||
src="/src/assets/images/TopList/queenBt.png"
|
||
alt=""
|
||
style="width: 40%"
|
||
@click="visibleKingList = false"
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
v-if="!visibleKingList"
|
||
style="width: 100%; display: flex; justify-content: space-around"
|
||
>
|
||
<img
|
||
src="/src/assets/images/TopList/kingBt.png"
|
||
alt=""
|
||
style="width: 40%"
|
||
@click="visibleKingList = true"
|
||
/>
|
||
<img src="/src/assets/images/TopList/queenBtActive.png" alt="" style="width: 40%" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 排行榜 -->
|
||
<div style="width: 100%">
|
||
<borderImg title="Ranking">
|
||
<div
|
||
style="margin: -2px 0; position: relative"
|
||
v-for="(listItem, index) in topList"
|
||
:key="index"
|
||
>
|
||
<img
|
||
src="/src/assets/images/TopList/border-item-user.png"
|
||
alt=""
|
||
style="width: 100%; display: block"
|
||
/>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 15%;
|
||
"
|
||
>
|
||
<div style="flex: 1; display: flex; align-items: center">
|
||
<div style="color: #edb247; font-weight: 700; width: 28px">
|
||
{{ index + 100 }}
|
||
</div>
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
aspect-ratio: 1/1;
|
||
border-radius: 50%;
|
||
margin: 0 8px;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(255, 224, 60, 1),
|
||
rgba(255, 189, 19, 1)
|
||
);
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<img
|
||
src="/src/assets/images/avatarTest.png"
|
||
alt=""
|
||
style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||
/>
|
||
</div>
|
||
|
||
<div style="display: flex; flex-direction: column">
|
||
<div style="color: #fff; font-weight: 860">
|
||
{{ listItem.name }}
|
||
</div>
|
||
<div style="color: #fff; font-weight: 590">ID:{{ listItem.id }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; width: 30%; display: flex; align-items: center">
|
||
<img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
|
||
<div style="color: #edb247; font-weight: 700">
|
||
{{ listItem.recharge }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</borderImg>
|
||
</div>
|
||
|
||
<!-- 我的排名 -->
|
||
<div
|
||
style="
|
||
position: sticky;
|
||
bottom: 0;
|
||
left: 0;
|
||
widows: 100vw;
|
||
background-color: rgba(77, 30, 22, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
"
|
||
>
|
||
<img
|
||
src="/src/assets/images/TopList/myRankingBg.png"
|
||
alt=""
|
||
style="width: calc(100% - 1px); display: block"
|
||
/>
|
||
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 8%;
|
||
"
|
||
>
|
||
<div style="flex: 1; display: flex; align-items: center">
|
||
<div style="color: #edb247; font-weight: 700">
|
||
{{ myRanking.ranking }}
|
||
</div>
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
aspect-ratio: 1/1;
|
||
border-radius: 50%;
|
||
margin: 0 12px;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(255, 224, 60, 1),
|
||
rgba(255, 189, 19, 1)
|
||
);
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<img
|
||
src="/src/assets/images/avatarTest.png"
|
||
alt=""
|
||
style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||
/>
|
||
</div>
|
||
|
||
<div style="display: flex; flex-direction: column">
|
||
<div style="color: #fff; font-weight: 860">
|
||
{{ myRanking.name }}
|
||
</div>
|
||
<div style="color: #fff; font-weight: 590">ID:{{ myRanking.id }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; width: 30%; display: flex; align-items: center">
|
||
<img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
|
||
<div style="color: #edb247; font-weight: 700">
|
||
{{ myRanking.recharge }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗遮罩层 -->
|
||
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
|
||
<!-- help弹窗 -->
|
||
<div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
|
||
<img src="/src/assets/images/TopList/helpInfo.png" alt="" style="width: 100%" />
|
||
</div>
|
||
|
||
<!-- history弹窗 -->
|
||
<div v-if="historyShow" style="margin: 20% 0" @click.stop>
|
||
<div style="width: 100%">
|
||
<borderImg title="History">
|
||
<div
|
||
style="
|
||
background-image: url(/src/assets/images/TopList/border-item.png);
|
||
background-size: 100% 100%;
|
||
min-height: 20px;
|
||
margin: -10px 0;
|
||
padding: 10px 10%;
|
||
"
|
||
>
|
||
<!-- 内容 -->
|
||
<div
|
||
style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"
|
||
>
|
||
<div style="width: 40%">
|
||
<div
|
||
style="
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: max-content;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 头像框 -->
|
||
<img
|
||
src="/src/assets/images/TopList/kingFrame.png"
|
||
alt=""
|
||
style="width: 100%; z-index: 1"
|
||
/>
|
||
<!-- 头像 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 0;
|
||
"
|
||
>
|
||
<img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
|
||
</div>
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-weight: 860;
|
||
font-size: 13px;
|
||
position: absolute;
|
||
bottom: 8%;
|
||
z-index: 2;
|
||
"
|
||
>
|
||
Sukabuliete
|
||
</div>
|
||
</div>
|
||
<div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
|
||
</div>
|
||
<div style="width: 40%">
|
||
<div
|
||
style="
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: max-content;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 头像框 -->
|
||
<img
|
||
src="/src/assets/images/TopList/queenFrame.png"
|
||
alt=""
|
||
style="width: 100%; z-index: 1"
|
||
/>
|
||
<!-- 头像 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 0;
|
||
"
|
||
>
|
||
<img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
|
||
</div>
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-weight: 860;
|
||
font-size: 13px;
|
||
position: absolute;
|
||
bottom: 5%;
|
||
z-index: 2;
|
||
"
|
||
>
|
||
Sukabuliete
|
||
</div>
|
||
</div>
|
||
<div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
"
|
||
>
|
||
<img
|
||
src="/src/assets/images/TopList/timeBack.png"
|
||
alt=""
|
||
width="18px"
|
||
height="18px"
|
||
/>
|
||
<div
|
||
style="
|
||
width: 40%;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: 590;
|
||
background-image: -webkit-linear-gradient(
|
||
top,
|
||
rgba(243, 183, 0, 1),
|
||
rgba(255, 238, 198, 1)
|
||
);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
"
|
||
>
|
||
2025-09-05
|
||
</div>
|
||
<img
|
||
src="/src/assets/images/TopList/timeNext.png"
|
||
alt=""
|
||
width="18px"
|
||
height="18px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</borderImg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- rewards弹窗 -->
|
||
<div v-if="rewardsShow" style="padding: 20% 0" @click.stop>
|
||
<div style="position: relative">
|
||
<!-- 取消按钮 -->
|
||
<img
|
||
src="/src/assets/images/TopList/cancel.png"
|
||
alt=""
|
||
style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
|
||
@click="closedPopup"
|
||
/>
|
||
<div style="width: 100%">
|
||
<borderImg title="Rewards">
|
||
<div
|
||
style="
|
||
background-image: url(/src/assets/images/TopList/border-item.png);
|
||
background-size: 100% 100%;
|
||
min-height: 20px;
|
||
margin: -10px 0;
|
||
padding: 10px 10%;
|
||
"
|
||
>
|
||
<!-- 奖励榜切换按钮 -->
|
||
<div style="width: 100%">
|
||
<div
|
||
v-if="visibleKingRewards"
|
||
style="width: 100%; display: flex; justify-content: space-around"
|
||
>
|
||
<img
|
||
src="/src/assets/images/TopList/kingBtActive.png"
|
||
alt=""
|
||
style="width: 40%"
|
||
/>
|
||
<img
|
||
src="/src/assets/images/TopList/queenBt.png"
|
||
alt=""
|
||
style="width: 40%"
|
||
@click="visibleKingRewards = false"
|
||
/>
|
||
</div>
|
||
<div
|
||
v-if="!visibleKingRewards"
|
||
style="width: 100%; display: flex; justify-content: space-around"
|
||
>
|
||
<img
|
||
src="/src/assets/images/TopList/kingBt.png"
|
||
alt=""
|
||
style="width: 40%"
|
||
@click="visibleKingRewards = true"
|
||
/>
|
||
<img
|
||
src="/src/assets/images/TopList/queenBtActive.png"
|
||
alt=""
|
||
style="width: 40%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 奖励榜 -->
|
||
<div
|
||
v-for="(rewardsTop, top) in rewardsList"
|
||
:key="top"
|
||
style="display: flex; flex-direction: column; align-items: center"
|
||
>
|
||
<img :src="topImg[top]" alt="" style="width: 40%; margin: 24px 0" />
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 3%;
|
||
"
|
||
>
|
||
<div
|
||
v-for="(reward, rewardIndex) in rewardsTop"
|
||
:key="rewardIndex"
|
||
style="width: 100%"
|
||
>
|
||
<img style="" src="/src/assets/images/TopList/gift.png" alt="" width="100%" />
|
||
<div
|
||
style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center"
|
||
>
|
||
{{ reward.goodsId }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</borderImg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</maskLayer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { isInApp } from '../../utils/appBridge.js'
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import borderImg from '../../components/TopList/borderImg.vue'
|
||
import maskLayer from '../../components/MaskLayer.vue'
|
||
|
||
const visibleKingList = ref(true)
|
||
|
||
// 检测是否在APP环境中
|
||
const isInAppEnvironment = ref(false)
|
||
|
||
// 榜首历史记录
|
||
const historyList = ref([
|
||
{
|
||
time: '2025-9-5',
|
||
topUser: [{}],
|
||
},
|
||
])
|
||
|
||
// 我的排名
|
||
const myRanking = ref({
|
||
id: '666',
|
||
name: 'aaa',
|
||
recharge: '12345',
|
||
ranking: '999',
|
||
})
|
||
|
||
// 国王榜
|
||
const kingList = ref(
|
||
Array.from({ length: 12 }, () => {
|
||
return { id: '666', name: 'aaa', recharge: '12345' }
|
||
})
|
||
)
|
||
|
||
// 女王榜
|
||
const queenList = ref(
|
||
Array.from({ length: 12 }, () => {
|
||
return { id: '888', name: 'bbb', recharge: '45678' }
|
||
})
|
||
)
|
||
|
||
// 展示用排行榜
|
||
const topList = computed(() => {
|
||
return visibleKingList.value ? kingList.value : queenList.value
|
||
})
|
||
|
||
// 展示奖励榜标签
|
||
const visibleKingRewards = ref(true)
|
||
|
||
// top图片
|
||
const topImg = ref([
|
||
'/src/assets/images/TopList/top1.png',
|
||
'/src/assets/images/TopList/top2.png',
|
||
'/src/assets/images/TopList/top3.png',
|
||
])
|
||
|
||
const kingRewards = ref([
|
||
Array.from({ length: 6 }, () => {
|
||
return { goodsId: '111', name: 'aaa' }
|
||
}),
|
||
Array.from({ length: 6 }, () => {
|
||
return { goodsId: '222', name: 'aaa' }
|
||
}),
|
||
Array.from({ length: 3 }, () => {
|
||
return { goodsId: '333', name: 'aaa' }
|
||
}),
|
||
])
|
||
|
||
const queenRewards = ref([
|
||
Array.from({ length: 3 }, () => {
|
||
return { goodsId: '444', name: 'aaa' }
|
||
}),
|
||
Array.from({ length: 3 }, () => {
|
||
return { goodsId: '555', name: 'aaa' }
|
||
}),
|
||
Array.from({ length: 3 }, () => {
|
||
return { goodsId: '666', name: 'aaa' }
|
||
}),
|
||
])
|
||
|
||
const rewardsList = computed(() => {
|
||
return visibleKingRewards.value ? kingRewards.value : queenRewards.value
|
||
})
|
||
|
||
const maskLayerShow = computed(() => {
|
||
return helpInfoShow.value || historyShow.value || rewardsShow.value
|
||
})
|
||
const helpInfoShow = ref(false)
|
||
const historyShow = ref(false)
|
||
const rewardsShow = ref(false)
|
||
|
||
// 关闭弹窗
|
||
const closedPopup = () => {
|
||
helpInfoShow.value = false
|
||
historyShow.value = false
|
||
rewardsShow.value = false
|
||
}
|
||
|
||
// 组件挂载时检测环境
|
||
onMounted(() => {
|
||
isInAppEnvironment.value = isInApp()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
* {
|
||
font-family: 'SF Pro';
|
||
}
|
||
|
||
.fullPage {
|
||
background-color: rgba(77, 30, 22, 1);
|
||
min-height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
.bg {
|
||
width: 100vw;
|
||
background-image: url(../../assets/images/TopList/bg.png);
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
}
|
||
</style>
|