style(总排行榜页): 调整背景图的切换方式
This commit is contained in:
hzj
parent
a0da6d5046
commit
25d56a6214
@ -1,297 +1,322 @@
|
||||
<template>
|
||||
<div class="fullPage" :style="{ backgroundColor, backgroundImage }">
|
||||
<!-- 哨兵元素 -->
|
||||
<div ref="sentinel"></div>
|
||||
<div class="fullPage" :style="{ backgroundColor }">
|
||||
<!-- 背景图 -->
|
||||
<div style="position: absolute; top: 0; left: 0; width: 100vw; z-index: 3">
|
||||
<img
|
||||
v-show="rankingType == 'Wealth'"
|
||||
:src="images.bgWealth"
|
||||
alt=""
|
||||
style="display: block; width: 100%; object-fit: cover"
|
||||
/>
|
||||
<img
|
||||
v-show="rankingType == 'Charm'"
|
||||
:src="images.bgCharm"
|
||||
alt=""
|
||||
style="display: block; width: 100%; object-fit: cover"
|
||||
/>
|
||||
<img
|
||||
v-show="rankingType == 'Room'"
|
||||
:src="images.bgRoom"
|
||||
alt=""
|
||||
style="display: block; width: 100%; object-fit: cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 粘性布局贴顶部 -->
|
||||
<div
|
||||
ref="stickyHeader"
|
||||
style="
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
border-radius: 0 0 12px 12px;
|
||||
transition: all 0.3s;
|
||||
"
|
||||
>
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" style="height: 40px"></div>
|
||||
<!-- 主要内容 -->
|
||||
<div style="position: relative; z-index: 4">
|
||||
<!-- 哨兵元素 -->
|
||||
<div ref="sentinel"></div>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div style="padding: 4px 8%">
|
||||
<div style="display: flex; justify-content: space-around; position: relative">
|
||||
<div
|
||||
class="tab"
|
||||
@click="changeType('Wealth')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Wealth' ? '#FFB760' : '#fff' }"
|
||||
>
|
||||
Wealth
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
@click="changeType('Charm')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Charm' ? '#60FF83' : '#fff' }"
|
||||
>
|
||||
Charm
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
@click="changeType('Room')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Room' ? '#9B60FF' : '#fff' }"
|
||||
>
|
||||
Room
|
||||
</div>
|
||||
|
||||
<!-- 推出键 -->
|
||||
<img
|
||||
v-smart-img
|
||||
src="../../../assets/icon/arrowBack.png"
|
||||
alt=""
|
||||
style="position: absolute; left: 0; top: 50%; transform: translateY(-50%)"
|
||||
width="6%"
|
||||
@click="closePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 排行榜时间选择 -->
|
||||
<!-- 粘性布局贴顶部 -->
|
||||
<div
|
||||
ref="stickyHeader"
|
||||
style="
|
||||
margin: 10px 4% 0;
|
||||
padding: 4px 16px;
|
||||
border-radius: 32px;
|
||||
backdrop-filter: blur(32px);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
border-radius: 0 0 12px 12px;
|
||||
transition: all 0.3s;
|
||||
"
|
||||
:style="{ border, background }"
|
||||
>
|
||||
<!-- <div
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" style="height: 40px"></div>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div style="padding: 4px 8%">
|
||||
<div style="display: flex; justify-content: space-around; position: relative">
|
||||
<div
|
||||
class="tab"
|
||||
@click="changeType('Wealth')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Wealth' ? '#FFB760' : '#fff' }"
|
||||
>
|
||||
Wealth
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
@click="changeType('Charm')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Charm' ? '#60FF83' : '#fff' }"
|
||||
>
|
||||
Charm
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
@click="changeType('Room')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Room' ? '#9B60FF' : '#fff' }"
|
||||
>
|
||||
Room
|
||||
</div>
|
||||
|
||||
<!-- 推出键 -->
|
||||
<img
|
||||
v-smart-img
|
||||
src="../../../assets/icon/arrowBack.png"
|
||||
alt=""
|
||||
style="position: absolute; left: 0; top: 50%; transform: translateY(-50%)"
|
||||
width="6%"
|
||||
@click="closePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 排行榜时间选择 -->
|
||||
<div
|
||||
style="
|
||||
margin: 10px 4% 0;
|
||||
padding: 4px 16px;
|
||||
border-radius: 32px;
|
||||
backdrop-filter: blur(32px);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
"
|
||||
:style="{ border, background }"
|
||||
>
|
||||
<!-- <div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Hourly' }"
|
||||
@click="changeDateType('Hourly')"
|
||||
>
|
||||
Hourly
|
||||
</div> -->
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Daily' }"
|
||||
@click="changeDateType('Daily')"
|
||||
>
|
||||
Daily
|
||||
</div>
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Weekly' }"
|
||||
@click="changeDateType('Weekly')"
|
||||
>
|
||||
Weekly
|
||||
</div>
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Monthly' }"
|
||||
@click="changeDateType('Monthly')"
|
||||
>
|
||||
Monthly
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 排行榜模块 -->
|
||||
<div style="padding: 10px 0">
|
||||
<!-- 前3名 -->
|
||||
<div style="margin: 3% 10px 0">
|
||||
<!-- 第一 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
:Type="rankingType"
|
||||
:isTopOne="true"
|
||||
:BorderImgUrl="topBorderBg"
|
||||
:avatarUrl="RankingTop3[0].avatar || ''"
|
||||
:name="RankingTop3[0].nickname || ''"
|
||||
:distributionValue="RankingTop3[0].quantityFormat || ''"
|
||||
style="width: 40%"
|
||||
@click="gotoAppPage(RankingTop3[0].id)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 第二三 -->
|
||||
<div style="display: flex; justify-content: space-between; margin-top: -45%">
|
||||
<TopUser
|
||||
:Type="rankingType"
|
||||
:BorderImgUrl="top2BorderBg"
|
||||
:avatarUrl="RankingTop3[1].avatar || ''"
|
||||
:name="RankingTop3[1].nickname || ''"
|
||||
:distributionValue="RankingTop3[1].quantityFormat || ''"
|
||||
style="width: 32%"
|
||||
@click="gotoAppPage(RankingTop3[1].id)"
|
||||
/>
|
||||
<TopUser
|
||||
:Type="rankingType"
|
||||
:BorderImgUrl="top3BorderBg"
|
||||
:avatarUrl="RankingTop3[2].avatar || ''"
|
||||
:name="RankingTop3[2].nickname || ''"
|
||||
:distributionValue="RankingTop3[2].quantityFormat || ''"
|
||||
style="width: 32%"
|
||||
@click="gotoAppPage(RankingTop3[2].id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四名开始 -->
|
||||
<div style="margin: 3% 10px 0">
|
||||
<div
|
||||
v-for="(userInfo, index) in RankingFromTop4"
|
||||
:key="userInfo.id"
|
||||
style="
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(32px);
|
||||
margin: 5px 0;
|
||||
padding: 3%;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
:style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
|
||||
@click="gotoAppPage(userInfo.id)"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Daily' }"
|
||||
@click="changeDateType('Daily')"
|
||||
>
|
||||
Daily
|
||||
</div>
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Weekly' }"
|
||||
@click="changeDateType('Weekly')"
|
||||
>
|
||||
Weekly
|
||||
</div>
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Monthly' }"
|
||||
@click="changeDateType('Monthly')"
|
||||
>
|
||||
Monthly
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 排行榜模块 -->
|
||||
<div style="padding: 10px 0">
|
||||
<!-- 前3名 -->
|
||||
<div style="margin: 3% 10px 0">
|
||||
<!-- 第一 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
:Type="rankingType"
|
||||
:isTopOne="true"
|
||||
:BorderImgUrl="topBorderBg"
|
||||
:avatarUrl="RankingTop3[0].avatar || ''"
|
||||
:name="RankingTop3[0].nickname || ''"
|
||||
:distributionValue="RankingTop3[0].quantityFormat || ''"
|
||||
style="width: 40%"
|
||||
@click="gotoAppPage(RankingTop3[0].id)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 第二三 -->
|
||||
<div style="display: flex; justify-content: space-between; margin-top: -45%">
|
||||
<TopUser
|
||||
:Type="rankingType"
|
||||
:BorderImgUrl="top2BorderBg"
|
||||
:avatarUrl="RankingTop3[1].avatar || ''"
|
||||
:name="RankingTop3[1].nickname || ''"
|
||||
:distributionValue="RankingTop3[1].quantityFormat || ''"
|
||||
style="width: 32%"
|
||||
@click="gotoAppPage(RankingTop3[1].id)"
|
||||
/>
|
||||
<TopUser
|
||||
:Type="rankingType"
|
||||
:BorderImgUrl="top3BorderBg"
|
||||
:avatarUrl="RankingTop3[2].avatar || ''"
|
||||
:name="RankingTop3[2].nickname || ''"
|
||||
:distributionValue="RankingTop3[2].quantityFormat || ''"
|
||||
style="width: 32%"
|
||||
@click="gotoAppPage(RankingTop3[2].id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四名开始 -->
|
||||
<div style="margin: 3% 10px 0">
|
||||
<div
|
||||
v-for="(userInfo, index) in RankingFromTop4"
|
||||
:key="userInfo.id"
|
||||
style="
|
||||
width: 75%;
|
||||
min-width: 0;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(32px);
|
||||
margin: 5px 0;
|
||||
padding: 3%;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
:style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
|
||||
@click="gotoAppPage(userInfo.id)"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="width: 10%; display: flex; justify-content: center; align-items: center">
|
||||
<div style="font-weight: 700">{{ index + 4 }}</div>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="userInfo.avatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 15%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
:style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
width: 75%;
|
||||
min-width: 0;
|
||||
width: calc(100% - 10% - 15% - 8px);
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
{{ userInfo.nickname }}
|
||||
<!-- 排名 -->
|
||||
<div style="width: 10%; display: flex; justify-content: center; align-items: center">
|
||||
<div style="font-weight: 700">{{ index + 4 }}</div>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="userInfo.avatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 15%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
:style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
width: calc(100% - 10% - 15% - 8px);
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{ userInfo.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; align-items: center; width: 30%">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 25%; aspect-ratio: 1/1"
|
||||
/>
|
||||
<div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
|
||||
{{ userInfo.quantityFormat }}
|
||||
<!-- 贡献值 -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; align-items: center; width: 30%">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 25%; aspect-ratio: 1/1"
|
||||
/>
|
||||
<div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
|
||||
{{ userInfo.quantityFormat }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<div
|
||||
style="position: sticky; bottom: 0; z-index: 999; padding: 0 1px; width: 100%"
|
||||
:style="{ backgroundColor }"
|
||||
>
|
||||
<!-- 我的排名 -->
|
||||
<div
|
||||
style="
|
||||
border-radius: 12px 12px 0 0;
|
||||
backdrop-filter: blur(32px);
|
||||
padding: 2%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
:style="{
|
||||
background: rankItemBackground,
|
||||
borderTop: '2px ' + rankItemBorder,
|
||||
borderLeft: '1px ' + rankItemBorder,
|
||||
borderRight: '1px ' + rankItemBorder,
|
||||
}"
|
||||
style="position: sticky; bottom: 0; z-index: 999; padding: 0 1px; width: 100%"
|
||||
:style="{ backgroundColor }"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
width: 80%;
|
||||
min-width: 0;
|
||||
border-radius: 12px 12px 0 0;
|
||||
backdrop-filter: blur(32px);
|
||||
padding: 2%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
:style="{
|
||||
background: rankItemBackground,
|
||||
borderTop: '2px ' + rankItemBorder,
|
||||
borderLeft: '1px ' + rankItemBorder,
|
||||
borderRight: '1px ' + rankItemBorder,
|
||||
}"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="width: 10%; display: flex; justify-content: center; align-items: center">
|
||||
<div style="font-weight: 700">{{ myRanking.rank || 999 }}</div>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="myRanking.avatar || ''"
|
||||
alt=""
|
||||
style="display: block; width: 15%; aspect-ratio: 1/1"
|
||||
:style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<!-- 名称 -->
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
width: 80%;
|
||||
min-width: 0;
|
||||
width: calc(100% - 10% - 15% - 8px);
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
{{ myRanking.nickname || '' }}
|
||||
<!-- 排名 -->
|
||||
<div style="width: 10%; display: flex; justify-content: center; align-items: center">
|
||||
<div style="font-weight: 700">{{ myRanking.rank || 999 }}</div>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="myRanking.avatar || ''"
|
||||
alt=""
|
||||
style="display: block; width: 15%; aspect-ratio: 1/1"
|
||||
:style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
width: calc(100% - 10% - 15% - 8px);
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{ myRanking.nickname || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 30%; aspect-ratio: 1/1"
|
||||
/>
|
||||
<div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
|
||||
{{ myRanking.quantityFormat || 0 }}
|
||||
<!-- 贡献值 -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 30%; aspect-ratio: 1/1"
|
||||
/>
|
||||
<div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
|
||||
{{ myRanking.quantityFormat || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -422,7 +447,6 @@ const RankingFromTop4 = computed(() => {
|
||||
|
||||
// 动态样式
|
||||
const backgroundColor = ref('') //页面样式
|
||||
const backgroundImage = ref('') //页面样式
|
||||
const border = ref('') //时间标签样式
|
||||
const background = ref('') //时间标签样式
|
||||
const rankItemBackground = ref('') //排名项背景
|
||||
@ -438,7 +462,6 @@ const stickyHeader = ref(null)
|
||||
watchEffect(() => {
|
||||
if (rankingType.value == 'Wealth') {
|
||||
backgroundColor.value = '#230F0A'
|
||||
backgroundImage.value = `url(${images.bgWealth})`
|
||||
topBorderBg.value = images['top1-wealth']
|
||||
top2BorderBg.value = images['top2']
|
||||
top3BorderBg.value = images['top3']
|
||||
@ -452,7 +475,6 @@ watchEffect(() => {
|
||||
}
|
||||
if (rankingType.value == 'Charm') {
|
||||
backgroundColor.value = '#112C1E'
|
||||
backgroundImage.value = `url(${images.bgCharm})`
|
||||
topBorderBg.value = images['top1-charm']
|
||||
top2BorderBg.value = images['top2']
|
||||
top3BorderBg.value = images['top3']
|
||||
@ -466,7 +488,6 @@ watchEffect(() => {
|
||||
}
|
||||
if (rankingType.value == 'Room') {
|
||||
backgroundColor.value = '#211031'
|
||||
backgroundImage.value = `url(${images.bgRoom})`
|
||||
topBorderBg.value = images['top1-room']
|
||||
top2BorderBg.value = images['top2-room']
|
||||
top3BorderBg.value = images['top3-room']
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<img
|
||||
v-smart-img
|
||||
:src="BorderImgUrl"
|
||||
:key="BorderImgUrl"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; position: relative; z-index: 2"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user