hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(周星活动页): 样式调整

Browse Source
This commit is contained in:
hzj 2025-12-23 10:44:39 +08:00
parent 7b5fb1998f
commit 1c6a228a79
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/Ranking/WeeklyStar/WeeklyStar.vue
View File

@ -41,26 +41,26 @@
</div>
<!-- 倒计时 -->
<div style="display: flex; justify-content: center; margin-top: -10%">
<div style="width: 15%">
<div style="display: flex; justify-content: center; margin-top: 0%">
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('dayBg')">
<div class="timeText">{{ Days }}D</div>
</itemCenter>
</div>
<div class="timeText timeGap" style="width: 6px"></div>
<div style="width: 15%">
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('hourAndMinBg')">
<div class="timeText">{{ Hours }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 15%">
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('hourAndMinBg')">
<div class="timeText">{{ Minutes }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 15%">
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('secBg')">
<div class="timeText">{{ Second }}</div>
</itemCenter>
@ -68,7 +68,7 @@
</div>
<!-- 切换按钮 -->
<div style="margin: 22% 0 8% 0; display: flex; justify-content: space-around">
<div style="margin: 10% 0 8% 0; display: flex; justify-content: space-around">
<div style="width: 30%" @click="handleBt('Ranking')">
<itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
<div class="btTitle">Ranking</div>
@ -91,10 +91,11 @@
<!-- Ranking -->
<div
v-show="rankingShow"
style="position: relative; width: 90%; left: 50%; transform: translateX(-50%)"
style="position: relative; width: 100%; left: 50%; transform: translateX(-50%)"
>
<!-- 背景板 -->
<div>
<!-- 头部背景 -->
<img
v-smart-img
:src="imageUrl('RankingMain')"
@ -102,6 +103,7 @@
width="100%"
style="display: block"
/>
<!-- 用户项 -->
<img
v-smart-img
:src="imageUrl('RankingItem')"
@ -111,12 +113,13 @@
v-for="value in showRanking.length - 1"
v-if="showRanking.length > 1"
/>
<!-- 底框 -->
<img
v-smart-img
:src="imageUrl('RankingBottomBorder')"
alt=""
width="100%"
style="display: block; margin-top: -12%"
style="display: block; margin-top: -9%"
/>
</div>
@ -180,7 +183,7 @@
<!-- 第四名开始 -->
<itemCenter
v-for="listItem in showRanking"
style="margin-top: 3%; position: relative"
style="margin-top: 3.3vw; position: relative"
@click="viewUserInfo(listItem.userId)"
:imgUrl="imageUrl('itemUser')"
:contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
@ -291,17 +294,17 @@
style="display: flex; flex-direction: column; align-items: center; gap: 20px"
>
<!-- top模块 -->
<div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 90%">
<div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
<!-- top背景图 -->
<img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
<!-- 标题 -->
<div
style="
position: absolute;
top: 6%;
top: 7%;
left: 25%;
right: 25%;
height: 11%;
height: 8.5%;
display: flex;
justify-content: center;
align-items: center;
@ -349,9 +352,10 @@
<!-- Exchange -->
<div v-show="exchargeShow" style="display: flex; justify-content: center">
<div style="position: relative; width: 90%">
<div style="position: relative; width: 100%">
<!-- 背景图 -->
<img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
<!-- 标题 -->
<div
style="
@ -370,6 +374,8 @@
>
Props
</div>
<!-- 内容 -->
<div
style="
position: absolute;
@ -888,6 +894,7 @@ const RankingHasTop3 = computed(() => {
// 展示用的榜单
const showRanking = computed(() => {
return Ranking.value.filter((_, index) => index >= 3)
// return []
})
// 选中要兑换的商品
@ -1188,6 +1195,7 @@ onUnmounted(() => {
.timeText {
color: #fff;
font-size: 1.3em;
font-weight: 860;
}