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

style(阿曼国庆日): 增加一个背景花纹，并使用itemCenter组件

Browse Source
This commit is contained in:
hzj 2025-11-17 16:00:03 +08:00
parent 8e5a043980
commit 495333e7f5
2 changed files with 142 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/Activities/Oman/NationalDay/bgRepeat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 MiB

320
src/views/Activities/Oman/NationalDay/index.vue
View File

@ -1,6 +1,9 @@
<!-- src/views/Activities/heroesDay/index.vue -->
<template>
<div class="fullPage">
<!-- 新增的背景图层 -->
<div class="background-overlay"></div>
<div class="bg">
<!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div>
@ -94,6 +97,7 @@
<div>
<!-- Ranking -->
<div v-show="rankingShow" style="position: relative; width: 100%">
<!-- 背景色 -->
<div
style="
position: absolute;
@ -145,78 +149,68 @@
<!-- 第四名开始 -->
<div v-if="showRanking.length > 0" style="margin-bottom: 6vw; margin-top: -10vw">
<div
<itemCenter
v-for="listItem in showRanking"
style="position: relative"
:imgUrl="images.RankingItem"
:contentStyle="`padding: 0 10%`"
@click="viewUserInfo(listItem.userId)"
>
<img :src="images.RankingItem" alt="" width="100%" style="display: block" />
<div
style="
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 0 10%;
"
>
<div style="width: 75%; min-width: 0; display: flex; align-items: center">
<div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
{{ listItem?.rank }}
</div>
<img
:src="listItem?.avatar || ''"
alt=""
style="
display: block;
width: 20%;
margin: 0 2%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
<div style="width: 75%; min-width: 0; display: flex; align-items: center">
<div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
{{ listItem?.rank }}
</div>
<img
:src="listItem?.avatar || ''"
alt=""
style="
display: block;
width: 20%;
margin: 0 2%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
<div
style="
min-width: 0;
width: calc(100% - 10% - 24%);
display: flex;
flex-direction: column;
"
>
<div
style="
min-width: 0;
width: calc(100% - 10% - 24%);
display: flex;
flex-direction: column;
color: #fff;
font-weight: 860;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
"
class="UserNickname"
>
<div
style="
color: #fff;
font-weight: 860;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
"
class="UserNickname"
>
{{ listItem?.nickname }}
</div>
<div style="color: #fff; font-weight: 590" class="UserNickname">
ID:{{ listItem?.account }}
</div>
{{ listItem?.nickname }}
</div>
</div>
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
<img
src="/src/assets/icon/coin.png"
alt=""
style="display: block; width: 30%; aspect-ratio: 1/1; object-fit: cover"
/>
<div style="color: #edb247; font-weight: 700" class="UserNickname">
{{ listItem?.quantity }}
<div style="color: #fff; font-weight: 590" class="UserNickname">
ID:{{ listItem?.account }}
</div>
</div>
</div>
</div>
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
<img
src="/src/assets/icon/coin.png"
alt=""
style="display: block; width: 30%; aspect-ratio: 1/1; object-fit: cover"
/>
<div style="color: #edb247; font-weight: 700" class="UserNickname">
{{ listItem?.quantity }}
</div>
</div>
</itemCenter>
</div>
<!-- 底框 -->
@ -237,159 +231,119 @@
<div
v-for="(rewardsTop, top) in rewardsList"
:key="top"
style="position: relative; width: 90%; margin: 10px 0"
style="position: relative; width: 100%; margin: 10px 0"
>
<div style="position: relative">
<img
:src="topImg[Number(rewardsTop.rankRange) - 1]"
alt=""
style="display: block; width: 100%"
/>
<itemCenter
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 30vw 8vw 10vw;`"
>
<div
style="
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 30vw 8vw 15vw;
"
v-for="(reward, rewardIndex) in rewardsTop.rewards"
:key="rewardIndex"
style="width: 100%"
>
<itemCenter :imgUrl="images.giftItemBg">
<img
:src="reward.cover || ''"
alt=""
width="70%"
style="display: block; aspect-ratio: 1/1"
@error="(e) => handleImageError(e, reward.type)"
/>
</itemCenter>
<div
v-for="(reward, rewardIndex) in rewardsTop.rewards"
:key="rewardIndex"
style="width: 100%"
style="
font-size: 1.1em;
color: rgba(255, 255, 255, 1);
font-weight: 590;
text-align: center;
"
>
<div style="position: relative">
<img :src="images.giftItemBg" style="display: block" alt="" width="100%" />
<div
style="
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
"
>
<img
:src="reward.cover || ''"
alt=""
width="70%"
style="display: block; aspect-ratio: 1/1"
@error="(e) => handleImageError(e, reward.type)"
/>
</div>
</div>
<div style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center">
{{ showDetail(reward.type, reward) }}
</div>
{{ showDetail(reward.type, reward) }}
</div>
</div>
</div>
</itemCenter>
</div>
</div>
</div>
<!-- 我的排名 -->
<div
<itemCenter
style="
position: sticky;
bottom: 0;
left: 0;
width: 100vw;
inset: 0;
background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
display: flex;
justify-content: center;
margin-top: 10px;
z-index: 999;
z-index: 2;
"
:imgUrl="images.myRankingBg"
:contentStyle="`padding: 2% 5% 0`"
>
<img :src="images.myRankingBg" alt="" style="width: 100%; display: block" />
<div
style="
position: absolute;
inset: 0;
width: 75%;
min-width: 0;
display: flex;
justify-content: space-around;
align-items: center;
justify-content: center;
padding: 2% 5% 0;
"
>
<!-- 排名 -->
<div style="color: #edb247; font-weight: 700; width: 10%">
{{ myRanking.rank || 999 }}
</div>
<!-- 头像 -->
<img
:src="myRanking.avatar || ''"
alt=""
style="
display: block;
width: 25%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
margin: 0 12px;
"
@error="defaultAvatarUrl"
/>
<!-- 名称 -->
<div
style="
width: 75%;
min-width: 0;
width: calc(100% - 10% - 25%);
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
"
>
<!-- 排名 -->
<div style="color: #edb247; font-weight: 700; width: 10%">
{{ myRanking.rank || 999 }}
</div>
<!-- 头像 -->
<img
:src="myRanking.avatar || ''"
alt=""
style="
display: block;
width: 25%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
margin: 0 12px;
"
@error="defaultAvatarUrl"
/>
<!-- 名称 -->
<div
style="
min-width: 0;
width: calc(100% - 10% - 25%);
display: flex;
flex-direction: column;
width: 100%;
color: #fff;
font-weight: 860;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
class="UserNickname"
>
<div
style="
width: 100%;
color: #fff;
font-weight: 860;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
class="UserNickname"
>
{{ myRanking.nickname }}
</div>
</div>
</div>
<!-- 贡献值 -->
<div
style="
flex: 1;
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
"
>
<img
src="/src/assets/icon/coin.png"
alt=""
style="display: block; width: 30%; aspect-ratio: 1/1; object-fit: cover"
/>
<div style="color: #edb247; font-weight: 700">
{{ myRanking.quantity || 0 }}
{{ myRanking.nickname }}
</div>
</div>
</div>
</div>
<!-- 贡献值 -->
<div
style="flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center"
>
<img
src="/src/assets/icon/coin.png"
alt=""
style="display: block; width: 30%; aspect-ratio: 1/1; object-fit: cover"
/>
<div style="color: #edb247; font-weight: 700">
{{ myRanking.quantity || 0 }}
</div>
</div>
</itemCenter>
<!-- 弹窗遮罩层 -->
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
@ -586,8 +540,18 @@ onUnmounted(() => {
}
.fullPage {
background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
position: relative;
background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
}
.background-overlay {
position: absolute;
inset: 0;
background-image: url(../../../../assets/images/Activities/Oman/NationalDay/bgRepeat.png);
background-repeat: repeat-y;
background-position: top center;
background-size: 100% auto;
z-index: 0; /* 确保在.bg之下 */
}
.bg {