chore(国王皇后榜): 样式调整

This commit is contained in:
hzj 2025-12-23 11:02:46 +08:00
parent 1c6a228a79
commit 65735b76fb
2 changed files with 19 additions and 12 deletions

View File

@ -104,17 +104,17 @@
<!-- 刷新倒计时 --> <!-- 刷新倒计时 -->
<div style="display: flex; justify-content: center; margin-top: 20px"> <div style="display: flex; justify-content: center; margin-top: 20px">
<!-- 天数 --> <!-- 天数 -->
<itemCenter :imgUrl="imageUrl('dayBg')" style="width: 10%; margin-right: 10px"> <itemCenter :imgUrl="imageUrl('dayBg')" style="width: 12vw; margin-right: 10px">
<div class="time">{{ Days }}D</div> <div class="time">{{ Days }}D</div>
</itemCenter> </itemCenter>
<!-- 当天时间倒计时 --> <!-- 当天时间倒计时 -->
<itemCenter :imgUrl="imageUrl('timeBg')" style="width: 23.75%"> <itemCenter :imgUrl="imageUrl('timeBg')" style="width: 28.5%">
<div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div> <div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
</itemCenter> </itemCenter>
</div> </div>
<!-- rewards --> <!-- rewards按钮 -->
<div style="display: flex; justify-content: flex-end; margin-top: -8%"> <div style="display: flex; justify-content: flex-end; margin-top: -8%">
<img <img
v-smart-img v-smart-img
@ -126,7 +126,9 @@
</div> </div>
<!-- 每周礼物 --> <!-- 每周礼物 -->
<div style="display: flex; justify-content: center"> <div
style="display: flex; justify-content: center; width: 108vw; position: relative; left: -4vw"
>
<itemCenter :imgUrl="imageUrl('eventGifts')"> <itemCenter :imgUrl="imageUrl('eventGifts')">
<div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%"> <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
<div <div
@ -187,7 +189,7 @@
</div> </div>
<!-- 排行榜 --> <!-- 排行榜 -->
<div style="width: 100%"> <div style="width: 100%; width: 108vw; position: relative; left: -4vw">
<borderImg title="Ranking"> <borderImg title="Ranking">
<itemCenter <itemCenter
:imgUrl="imageUrl('border-item-user')" :imgUrl="imageUrl('border-item-user')"
@ -228,7 +230,7 @@
<!-- 头像 --> <!-- 头像 -->
<div <div
style=" style="
width: 4em; width: 25%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
border-radius: 50%; border-radius: 50%;
background: linear-gradient( background: linear-gradient(
@ -323,12 +325,17 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup"> <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 --> <!-- help弹窗 -->
<div v-show="helpInfoShow" style="margin: 20% 0" @click.stop> <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
<img v-smart-img :src="imageUrl('helpInfo')" alt="" style="width: 100%" /> <img
v-smart-img
:src="imageUrl('helpInfo')"
alt=""
style="width: 108vw; position: relative; left: -4vw"
/>
</div> </div>
<!-- history弹窗 --> <!-- history弹窗 -->
<div v-show="historyShow" style="margin: 20% 0" @click.stop> <div v-show="historyShow" style="margin: 20% 0" @click.stop>
<div style="width: 100%"> <div style="width: 108vw; position: relative; left: -4vw">
<borderImg title="History"> <borderImg title="History">
<div <div
style=" style="
@ -468,7 +475,7 @@
<!-- rewards弹窗 --> <!-- rewards弹窗 -->
<div v-show="rewardsShow" style="padding: 20% 0" @click.stop> <div v-show="rewardsShow" style="padding: 20% 0" @click.stop>
<div style="position: relative"> <div style="width: 108vw; position: relative; left: -4vw">
<!-- 取消按钮 --> <!-- 取消按钮 -->
<img <img
v-smart-img v-smart-img
@ -642,7 +649,7 @@
<!-- 头像 --> <!-- 头像 -->
<div <div
style=" style="
width: 5em; width: 22%;
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));
@ -1099,7 +1106,7 @@ onUnmounted(() => {
} }
.time { .time {
font-size: 0.9em; font-size: 1.3em;
position: absolute; position: absolute;
inset: 0; inset: 0;
display: flex; display: flex;

View File

@ -20,7 +20,7 @@
<div <div
style=" style="
color: #fff; color: #fff;
font-size: 1.3em;
font-weight: 860; font-weight: 860;
font-family: 'SF Pro'; font-family: 'SF Pro';
margin-bottom: 1%; margin-bottom: 1%;