style(阿曼国庆日): 增加一个背景花纹，并使用itemCenter组件
This commit is contained in:
hzj
parent
8e5a043980
commit
495333e7f5
BIN
src/assets/images/Activities/Oman/NationalDay/bgRepeat.png
Normal file
BIN
src/assets/images/Activities/Oman/NationalDay/bgRepeat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 MiB |
@ -1,6 +1,9 @@
|
|||||||
<!-- src/views/Activities/heroesDay/index.vue -->
|
<!-- src/views/Activities/heroesDay/index.vue -->
|
||||||
<template>
|
<template>
|
||||||
<div class="fullPage">
|
<div class="fullPage">
|
||||||
|
<!-- 新增的背景图层 -->
|
||||||
|
<div class="background-overlay"></div>
|
||||||
|
|
||||||
<div class="bg">
|
<div class="bg">
|
||||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||||||
@ -94,6 +97,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<!-- Ranking -->
|
<!-- Ranking -->
|
||||||
<div v-show="rankingShow" style="position: relative; width: 100%">
|
<div v-show="rankingShow" style="position: relative; width: 100%">
|
||||||
|
<!-- 背景色 -->
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -145,78 +149,68 @@
|
|||||||
|
|
||||||
<!-- 第四名开始 -->
|
<!-- 第四名开始 -->
|
||||||
<div v-if="showRanking.length > 0" style="margin-bottom: 6vw; margin-top: -10vw">
|
<div v-if="showRanking.length > 0" style="margin-bottom: 6vw; margin-top: -10vw">
|
||||||
<div
|
<itemCenter
|
||||||
v-for="listItem in showRanking"
|
v-for="listItem in showRanking"
|
||||||
style="position: relative"
|
:imgUrl="images.RankingItem"
|
||||||
|
:contentStyle="`padding: 0 10%`"
|
||||||
@click="viewUserInfo(listItem.userId)"
|
@click="viewUserInfo(listItem.userId)"
|
||||||
>
|
>
|
||||||
<img :src="images.RankingItem" alt="" width="100%" style="display: block" />
|
<div style="width: 75%; min-width: 0; display: flex; align-items: center">
|
||||||
<div
|
<div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
|
||||||
style="
|
{{ listItem?.rank }}
|
||||||
position: absolute;
|
</div>
|
||||||
inset: 0;
|
<img
|
||||||
display: flex;
|
:src="listItem?.avatar || ''"
|
||||||
align-items: center;
|
alt=""
|
||||||
padding: 0 10%;
|
style="
|
||||||
"
|
display: block;
|
||||||
>
|
width: 20%;
|
||||||
<div style="width: 75%; min-width: 0; display: flex; align-items: center">
|
margin: 0 2%;
|
||||||
<div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
|
aspect-ratio: 1/1;
|
||||||
{{ listItem?.rank }}
|
border-radius: 50%;
|
||||||
</div>
|
object-fit: cover;
|
||||||
<img
|
"
|
||||||
:src="listItem?.avatar || ''"
|
@error="defaultAvatarUrl"
|
||||||
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
|
<div
|
||||||
style="
|
style="
|
||||||
min-width: 0;
|
color: #fff;
|
||||||
width: calc(100% - 10% - 24%);
|
font-weight: 860;
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
flex-direction: column;
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
"
|
"
|
||||||
|
class="UserNickname"
|
||||||
>
|
>
|
||||||
<div
|
{{ listItem?.nickname }}
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||||
|
ID:{{ listItem?.account }}
|
||||||
<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>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- 底框 -->
|
<!-- 底框 -->
|
||||||
@ -237,159 +231,119 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(rewardsTop, top) in rewardsList"
|
v-for="(rewardsTop, top) in rewardsList"
|
||||||
:key="top"
|
:key="top"
|
||||||
style="position: relative; width: 90%; margin: 10px 0"
|
style="position: relative; width: 100%; margin: 10px 0"
|
||||||
>
|
>
|
||||||
<div style="position: relative">
|
<itemCenter
|
||||||
<img
|
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||||
:src="topImg[Number(rewardsTop.rankRange) - 1]"
|
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 30vw 8vw 10vw;`"
|
||||||
alt=""
|
>
|
||||||
style="display: block; width: 100%"
|
|
||||||
/>
|
|
||||||
<div
|
<div
|
||||||
style="
|
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||||
position: absolute;
|
:key="rewardIndex"
|
||||||
inset: 0;
|
style="width: 100%"
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 12px;
|
|
||||||
padding: 30vw 8vw 15vw;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
|
<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
|
<div
|
||||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
style="
|
||||||
:key="rewardIndex"
|
font-size: 1.1em;
|
||||||
style="width: 100%"
|
color: rgba(255, 255, 255, 1);
|
||||||
|
font-weight: 590;
|
||||||
|
text-align: center;
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<div style="position: relative">
|
{{ showDetail(reward.type, reward) }}
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</itemCenter>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 我的排名 -->
|
<!-- 我的排名 -->
|
||||||
<div
|
<itemCenter
|
||||||
style="
|
style="
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
inset: 0;
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
|
background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
|
||||||
display: flex;
|
z-index: 2;
|
||||||
justify-content: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
z-index: 999;
|
|
||||||
"
|
"
|
||||||
|
:imgUrl="images.myRankingBg"
|
||||||
|
:contentStyle="`padding: 2% 5% 0`"
|
||||||
>
|
>
|
||||||
<img :src="images.myRankingBg" alt="" style="width: 100%; display: block" />
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
position: absolute;
|
width: 75%;
|
||||||
inset: 0;
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
align-items: center;
|
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
|
<div
|
||||||
style="
|
style="
|
||||||
width: 75%;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
width: calc(100% - 10% - 25%);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<!-- 排名 -->
|
|
||||||
<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
|
<div
|
||||||
style="
|
style="
|
||||||
min-width: 0;
|
width: 100%;
|
||||||
width: calc(100% - 10% - 25%);
|
color: #fff;
|
||||||
display: flex;
|
font-weight: 860;
|
||||||
flex-direction: column;
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
"
|
"
|
||||||
|
class="UserNickname"
|
||||||
>
|
>
|
||||||
<div
|
{{ myRanking.nickname }}
|
||||||
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 }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||||
@ -586,8 +540,18 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fullPage {
|
.fullPage {
|
||||||
background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
|
|
||||||
position: relative;
|
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 {
|
.bg {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user