chore(cp排行榜): 调整样式
This commit is contained in:
hzj
parent
306a23e50f
commit
704416cfa2
@ -49,7 +49,7 @@
|
||||
width="50%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div style="font-size: 0.8em; font-weight: 700; color: gray">
|
||||
<div style="font-size: 0.8em; font-weight: 700; color: #ff3b76">
|
||||
{{ prize.prizeName }}
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div style="width: 100%; position: relative">
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl('rewardBg')"
|
||||
flip="true"
|
||||
:contentStyle="`inset: 4vw 6vw 10vw;`"
|
||||
:class="{
|
||||
'grayscale-container':
|
||||
@ -15,6 +16,7 @@
|
||||
<itemCenter
|
||||
v-for="(goods, index) in dailyConfigs"
|
||||
:imgUrl="imageUrl('rewardGoodsBg')"
|
||||
flip="true"
|
||||
:contentStyle="`flex-direction: column;justify-content: space-between;align-items: center;`"
|
||||
:style="getGridPosition(index)"
|
||||
>
|
||||
|
||||
@ -77,21 +77,7 @@
|
||||
<!-- 排行榜 -->
|
||||
<div style="position: relative; display: flex; flex-direction: column; gap: 2vw">
|
||||
<!-- 取消按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('helpBt')"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 8vw;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 3vw;
|
||||
"
|
||||
@click="helpShow = true"
|
||||
/>
|
||||
<img v-smart-img :src="imageUrl('helpBt')" alt="" class="helpBt" @click="helpShow = true" />
|
||||
|
||||
<!-- 前三名 -->
|
||||
<TopUser
|
||||
@ -105,6 +91,7 @@
|
||||
<itemCenter
|
||||
v-for="item in showRanking"
|
||||
:imgUrl="imageUrl(`rankingItemBg`)"
|
||||
flip="true"
|
||||
:contentStyle="`padding: 0 5%;justify-content: flex-start;`"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
@ -127,8 +114,27 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<!-- 情侣标志 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="imageUrl(`rankingCoupleSign`)"
|
||||
alt=""
|
||||
style="width: 15vw; display: block; object-fit: cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 情侣1头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
@ -644,4 +650,19 @@ onUnmounted(() => {
|
||||
[dir='rtl'] .timeBox {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.helpBt {
|
||||
display: block;
|
||||
width: 8vw;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 3vw;
|
||||
}
|
||||
|
||||
[dir='rtl'] .helpBt {
|
||||
right: unset;
|
||||
left: 3vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<itemCenter :imgUrl="BorderImgUrl" :contentStyle="`display:block;`">
|
||||
<itemCenter :imgUrl="BorderImgUrl" flip="true" :contentStyle="`display:block;`">
|
||||
<!-- 第一名 -->
|
||||
<div v-if="isTopOne" style="width: 98vw; height: 80%; position: relative">
|
||||
<!-- 查看个人信息按钮 -->
|
||||
@ -239,7 +239,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 奖励 -->
|
||||
<div style="position: absolute; bottom: 0; left: 15vw; right: 4vw; height: 13.5vw">
|
||||
<div class="reward-wrapper">
|
||||
<div style="height: 100%; display: flex; align-items: center; overflow: hidden">
|
||||
<!-- 滚动容器 -->
|
||||
<div class="scroll-wrapper">
|
||||
@ -377,6 +377,19 @@ const clickReward = (item) => {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.reward-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 15vw;
|
||||
right: 4vw;
|
||||
height: 13.5vw;
|
||||
}
|
||||
|
||||
[dir='rtl'] .reward-wrapper {
|
||||
left: 4vw;
|
||||
right: 15vw;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
|
||||
@ -969,14 +969,11 @@
|
||||
alt=""
|
||||
style="width: 10vw; min-width: 0; object-fit: cover; display: block"
|
||||
/>
|
||||
<div style="font-weight: 590; font-size: 0.9em">
|
||||
<div style="font-weight: 590; font-size: 0.9em; direction: ltr; text-align: left">
|
||||
{{ record?.prize?.prizeName }}
|
||||
</div>
|
||||
<div v-if="record.prize?.days" style="font-weight: 590; font-size: 0.9em">
|
||||
*{{ record?.prize?.days }}Days
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-weight: 510; font-size: 0.8em">
|
||||
<div style="font-weight: 510; font-size: 0.8em; direction: ltr; text-align: left">
|
||||
{{ formatUTCCustom(record.drawTime) }}
|
||||
</div>
|
||||
</div>
|
||||
@ -1053,11 +1050,27 @@
|
||||
display: block;
|
||||
"
|
||||
/>
|
||||
<div style="min-width: 0; font-weight: 590; font-size: 0.9em">
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
font-weight: 590;
|
||||
font-size: 0.9em;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
{{ record.changeType == 2 ? '-' : '+' }}{{ record.changeAmount }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="min-width: 0; font-weight: 510; font-size: 0.8em">
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
font-weight: 510;
|
||||
font-size: 0.8em;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
{{ formatUTCCustom(record.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
@ -1673,9 +1686,13 @@ const preloadCriticalImages = async () => {
|
||||
// 排行榜
|
||||
imageUrl(`timeBg`),
|
||||
imageUrl('helpBt'),
|
||||
imageUrl(`top1Ranking`),
|
||||
imageUrl(`top1`),
|
||||
imageUrl(`top2-3`),
|
||||
imageUrl(`top2Ranking`),
|
||||
imageUrl(`top2Frame`),
|
||||
imageUrl(`top3Ranking`),
|
||||
imageUrl(`top3Frame`),
|
||||
imageUrl(`rankingCoupleSign`),
|
||||
imageUrl(`rankingItemBg`),
|
||||
imageUrl('distribution'),
|
||||
imageUrl(`num0`),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user