feat(新页面): 国王女王榜
This commit is contained in:
hzj
parent
eeafaa255a
commit
cce596bc0e
BIN
src/assets/images/TopList/border-bottom.png
Normal file
BIN
src/assets/images/TopList/border-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
src/assets/images/TopList/border-item-user.png
Normal file
BIN
src/assets/images/TopList/border-item-user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
BIN
src/assets/images/TopList/border-item.png
Normal file
BIN
src/assets/images/TopList/border-item.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/images/TopList/border-top.png
Normal file
BIN
src/assets/images/TopList/border-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
BIN
src/assets/images/TopList/cancel.png
Normal file
BIN
src/assets/images/TopList/cancel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
src/assets/images/TopList/helpInfo.png
Normal file
BIN
src/assets/images/TopList/helpInfo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 593 KiB |
BIN
src/assets/images/TopList/myRankingBg.png
Normal file
BIN
src/assets/images/TopList/myRankingBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
src/assets/images/TopList/timeBack.png
Normal file
BIN
src/assets/images/TopList/timeBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/images/TopList/timeNext.png
Normal file
BIN
src/assets/images/TopList/timeNext.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/images/TopList/top1.png
Normal file
BIN
src/assets/images/TopList/top1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
src/assets/images/TopList/top2.png
Normal file
BIN
src/assets/images/TopList/top2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
src/assets/images/TopList/top3.png
Normal file
BIN
src/assets/images/TopList/top3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
src/assets/images/avatarTest.png
Normal file
BIN
src/assets/images/avatarTest.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
@ -9,6 +9,7 @@
|
||||
src="/src/assets/images/TopList/help.png"
|
||||
alt=""
|
||||
style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
|
||||
@click="helpInfoShow = true"
|
||||
/>
|
||||
|
||||
<!-- history按钮 -->
|
||||
@ -16,6 +17,7 @@
|
||||
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">
|
||||
@ -57,7 +59,14 @@
|
||||
<img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
|
||||
</div>
|
||||
<div
|
||||
style="color: #fff; font-weight: 860; position: absolute; bottom: 8%; z-index: 2"
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
z-index: 2;
|
||||
"
|
||||
>
|
||||
Sukabuliete
|
||||
</div>
|
||||
@ -98,7 +107,14 @@
|
||||
<img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
|
||||
</div>
|
||||
<div
|
||||
style="color: #fff; font-weight: 860; position: absolute; bottom: 5%; z-index: 2"
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
z-index: 2;
|
||||
"
|
||||
>
|
||||
Sukabuliete
|
||||
</div>
|
||||
@ -110,7 +126,12 @@
|
||||
|
||||
<!-- rewards -->
|
||||
<div style="display: flex; justify-content: flex-end">
|
||||
<img src="/src/assets/images/TopList/rewards.png" alt="" style="width: 20%" />
|
||||
<img
|
||||
src="/src/assets/images/TopList/rewards.png"
|
||||
alt=""
|
||||
style="width: 20%"
|
||||
@click="rewardsShow = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 每周礼物 -->
|
||||
@ -177,23 +198,513 @@
|
||||
</div>
|
||||
|
||||
<!-- 排行榜 -->
|
||||
<div style="position: relative">
|
||||
<img src="/src/assets/images/TopList/eventGifts.png" width="100%" alt="" style="" />
|
||||
<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 { onMounted, ref } from 'vue'
|
||||
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()
|
||||
@ -201,9 +712,14 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: rgba(77, 30, 22, 1);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
@ -211,5 +727,6 @@ onMounted(() => {
|
||||
background-image: url(../../assets/images/TopList/bg.png);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user