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