style(固定排行榜): 样式调整
This commit is contained in:
hzj
parent
38cf9cbb37
commit
c2215ffa67
@ -86,12 +86,12 @@
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="topName"
|
||||
>
|
||||
{{ topUser.userInfo.userNickname }}
|
||||
</div>
|
||||
@ -137,12 +137,12 @@
|
||||
<itemCenter :imgUrl="imageUrl('gift')">
|
||||
<img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
|
||||
</itemCenter>
|
||||
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
|
||||
<div style="display: flex; justify-content: center; align-items: center; gap: 2px">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="width: 18%; aspect-ratio: 1/1"
|
||||
style="display: block; width: 1.3em; aspect-ratio: 1/1"
|
||||
/>
|
||||
<div style="color: rgba(255, 255, 255, 1); font-weight: 590">
|
||||
{{ gift.giftCandy }}
|
||||
@ -192,7 +192,7 @@
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl('border-item-user')"
|
||||
style="margin: -2px 0"
|
||||
:contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 4px;`"
|
||||
:contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 8px;`"
|
||||
v-for="(listItem, index) in topList"
|
||||
:key="index"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
@ -200,17 +200,27 @@
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
width: 75%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div
|
||||
style="width: 15%; display: flex; justify-content: center; align-items: center"
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
|
||||
</div>
|
||||
@ -218,7 +228,7 @@
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
width: 24%;
|
||||
width: 4em;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
@ -250,8 +260,10 @@
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: calc(100% - 15% - 24% - 8px);
|
||||
padding: 0 2px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
"
|
||||
@ -259,31 +271,41 @@
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="topUserNickname"
|
||||
>
|
||||
{{ listItem.userNickname }}
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590" class="topUserNickname">
|
||||
<div style="color: #fff; font-weight: 590">
|
||||
{{ $t('user_id_prefix') }} {{ listItem.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
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"
|
||||
style="display: block; width: 1.3em; aspect-ratio: 1/1"
|
||||
/>
|
||||
<div style="color: #edb247; font-weight: 700" class="topUserNickname">
|
||||
<div style="color: #edb247; font-weight: 700">
|
||||
{{ listItem.quantity }}
|
||||
</div>
|
||||
</div>
|
||||
@ -380,12 +402,12 @@
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-size: 0.7em;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="topName"
|
||||
>
|
||||
{{ topOne.userInfo.userNickname }}
|
||||
</div>
|
||||
@ -579,34 +601,48 @@
|
||||
style="
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
padding: 2vw 4vw 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 2% 2% 0;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
width: 75%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="width: 15%; display: flex; justify-content: center; align-items: center">
|
||||
<div style="color: #edb247; font-weight: 700">
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div style="color: #edb247; font-size: 1.1em; font-weight: 700">
|
||||
{{ (myRanking.userSex == 1 ? myRanking.wealthRank : myRanking.charmRank) || 999 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
width: 25%;
|
||||
width: 5em;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom, rgba(255, 224, 60, 1), rgba(255, 189, 19, 1));
|
||||
@ -634,8 +670,11 @@
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: calc(100% - 15% - 25% - 8px);
|
||||
font-weight: 700;
|
||||
padding: 0 4px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
"
|
||||
@ -643,7 +682,9 @@
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
font-weight: 860;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -654,18 +695,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px">
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 35%; aspect-ratio: 1/1"
|
||||
style="display: block; width: 1.5em; aspect-ratio: 1/1"
|
||||
/>
|
||||
<!-- 1:男,0:女 -->
|
||||
<div v-if="myRanking.userSex == 1" style="color: #edb247; font-weight: 700">
|
||||
<div
|
||||
v-if="myRanking.userSex == 1"
|
||||
style="color: #edb247; font-size: 1.1em; font-weight: 700"
|
||||
>
|
||||
{{ myRanking.wealthQuantity }}
|
||||
</div>
|
||||
<div v-else style="color: #edb247; font-weight: 700">
|
||||
<div v-else style="color: #edb247; font-size: 1.1em; font-weight: 700">
|
||||
{{ myRanking.charmQuantity }}
|
||||
</div>
|
||||
</div>
|
||||
@ -1055,31 +1109,15 @@ onUnmounted(() => {
|
||||
font-weight: 860;
|
||||
}
|
||||
|
||||
.topUserNickname {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.topUserNickname::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.topName {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.topName {
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1087,19 +1125,11 @@ onUnmounted(() => {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.topName {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.topName {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -231,6 +231,7 @@
|
||||
style="
|
||||
display: block;
|
||||
width: 3em;
|
||||
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
@ -244,6 +245,7 @@
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 4px;
|
||||
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
@ -356,6 +358,7 @@
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-weight: 700;
|
||||
padding: 0 4px;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -164,13 +164,15 @@
|
||||
style="margin-top: 3%; position: relative"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
:imgUrl="imageUrl('itemUser')"
|
||||
:contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 4px;`"
|
||||
:contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
width: 75%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
@ -178,7 +180,17 @@
|
||||
"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="width: 15%; display: flex; justify-content: center; align-items: center">
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
|
||||
</div>
|
||||
|
||||
@ -188,8 +200,9 @@
|
||||
:src="listItem.userAvatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
width: 25%;
|
||||
margin: 0 2%;
|
||||
display: block;
|
||||
width: 3em;
|
||||
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
@ -200,8 +213,10 @@
|
||||
<!-- 名称、id -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: calc(100% - 15% - 25% - 8px);
|
||||
padding: 0 2px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
"
|
||||
@ -210,24 +225,38 @@
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ listItem.userNickname }}
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||
<div style="color: #fff; font-weight: 590">
|
||||
{{ $t('user_id_prefix') }} {{ listItem.account }}
|
||||
</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="width: 30%" />
|
||||
<div style="color: #edb247; font-weight: 700" class="UserNickname">
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 1.3em; aspect-ratio: 1/1"
|
||||
/>
|
||||
<div style="color: #edb247; font-weight: 700">
|
||||
{{ listItem.quantity }}
|
||||
</div>
|
||||
</div>
|
||||
@ -384,103 +413,106 @@
|
||||
<div style="height: 25vw"></div>
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<div
|
||||
<itemCenter
|
||||
style="
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background-color: #311300;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
"
|
||||
:imgUrl="imageUrl('myRankingBg')"
|
||||
:contentStyle="`padding: 4vw;gap: 8px;`"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('myRankingBg')"
|
||||
alt=""
|
||||
style="width: calc(100% - 1px); display: block"
|
||||
/>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4% 2%;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<!-- 排名 -->
|
||||
<div
|
||||
style="
|
||||
width: 79%;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="width: 15%; display: flex; justify-content: center; align-items: center">
|
||||
<div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="myRanking.userAvatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 20%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
width: calc(100% - 15% - 20% - 8px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ myRanking.userNickname }}
|
||||
</div>
|
||||
<div style="color: #edb247; font-size: 1.1em; font-weight: 700">
|
||||
{{ myRanking.rank || 999 }}
|
||||
</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="color: #edb247; font-weight: 700">
|
||||
{{ myRanking.quantity || 0 }}
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="myRanking.userAvatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 3.5em;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
font-weight: 860;
|
||||
padding: 0 4px;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{ myRanking.userNickname || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 1.4em; aspect-ratio: 1/1"
|
||||
/>
|
||||
<div style="color: #edb247; font-size: 1.1em; font-weight: 700">
|
||||
{{ myRanking.quantity || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
|
||||
@ -650,14 +682,14 @@
|
||||
</itemCenter>
|
||||
|
||||
<!-- 礼物价值 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<div style="display: flex; justify-content: center; align-items: center; gap: 2px">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||||
style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
|
||||
/>
|
||||
<div style="color: #fff; font-weight: 590; margin-left: 2px">
|
||||
<div style="color: #fff; font-weight: 590">
|
||||
{{ gift.giftCandy }}
|
||||
</div>
|
||||
</div>
|
||||
@ -1167,10 +1199,6 @@ onUnmounted(() => {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.UserNickname {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
@ -1179,7 +1207,7 @@ onUnmounted(() => {
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height: 36%; display: flex; justify-content: center; align-items: center"
|
||||
style="height: 40%; display: flex; justify-content: center; align-items: center"
|
||||
:style="{ width: isTopOne ? '30%' : '40%' }"
|
||||
>
|
||||
<div
|
||||
@ -120,30 +120,34 @@ const props = defineProps({
|
||||
}
|
||||
|
||||
.top1Text {
|
||||
font-size: 12px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 10px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.top1Text {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.top1Text {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user