yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 04:09:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

created user list in game element

Browse Source
This commit is contained in:
Hepatica
2024-02-25 03:02:31 +01:00
parent dd1a1bd498
commit 2f76ae3f3d
2 changed files with 113 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
View File

@@ -58,6 +58,25 @@
/* Размер стрелки */
/* Добавьте любые дополнительные стили, такие как цвет фона, границы и т.д. */
}
.jackpot-useringame-list{
margin-top: 3.5%;
}
.jackpot-carousel-user {
z-index: 1;
position: relative;
/* margin-left: 5%; */
border-radius: 10px;
background: #1F2543;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
width: 100%;
margin-top: 1%;
/* height: 480px; */
/* height: 100%; */
border: 1px solid #262C55;
height: 95%;
}
.jackpot-game {
z-index: 1;
@@ -267,10 +286,15 @@
.jackpot-gems-icon {
margin-left: 5px;
height: 1vh;
}
.jackpot-gems-icon-extension{
margin-bottom: -10px !important;
}
.jackpot-player-chance {
background-color: #27345C;
/* Adjust background color as needed */
@@ -291,6 +315,58 @@
color: #EF4444; /* Или любой другой оттенок красного, который вам нужен */
}
.jackpot-banner {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1e2749; /* Dark blue background */
padding: 5px;
border-radius: 5px;
color: white;
font-family: Montserrat;
font-weight: bold;
}
.jackpot-content {
display: flex;
align-items: center;
}
.jackpot-avatar {
width: 48px; /* Adjust based on your preference */
height: 48px;
margin-right: 10px;
}
.jackpot-info {
display: flex;
flex-direction: column;
}
.jackpot-name {
font-size: 16px;
font-weight: bold;
color: #515D83;
}
.jackpot-gems {
font-size: 14px;
color: #FFFFFF84;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates;
font-weight: bold;
}
.jackpot-chance {
font-size: 16px;
background-color: transparent; /* Adjust if you want a different background */
}
.jackpot-percentage {
color: #EF4444; /* Adjust if you want a different color */
}
@media (max-width: 1415px) {
.padding-elements-jackpot {

42
luckydiamond/src/pages/games-pages/JackpotPage.vue
View File

@@ -155,21 +155,23 @@
</div>
<div class="jackpot-player-data">
<div class="jackpot-player-gems">
500 <span class="jackpot-gems-icon"><img
src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
500
<span class="jackpot-gems-icon"
><img
src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
/></span>
</div>
<div class="jackpot-player-name">FUpir</div>
</div>
</div>
<div class="jackpot-player-chance">ШАНС <span class="jackpot-chance-value">15.55%</span></div>
<div class="jackpot-player-chance">
ШАНС <span class="jackpot-chance-value">15.55%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="jackpot-carousel">
<div class="carousel-arrow">▲</div>
@@ -190,6 +192,36 @@
</Carousel>
</div>
</div>
<div class="col-md-12">
<div class="jackpot-useringame-list">
<div class="jackpot-carousel-user">
<div class="jackpot-banner">
<div class="jackpot-content">
<img
src="https://avatar.spworlds.ru/face/55/Hepatir.png"
alt="Player Avatar"
class="jackpot-avatar"
/>
<div class="jackpot-info">
<span class="jackpot-name">FUpir</span>
<span class="jackpot-gems">500<span class="jackpot-gems-icon"
><img class="jackpot-gems-icon-extension"
src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
/></span></span>
</div>
</div>
<div class="jackpot-chance">
ШАНС <span class="jackpot-percentage">15.55%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>