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

refactor header-mobile

Browse Source
This commit is contained in:
Kostya
2023-12-15 20:56:59 +03:00
parent e856182e63
commit c5363e5a81
3 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css
View File

@@ -22,6 +22,11 @@
width: 85%; width: 85%;
} }
.header-mobile__end {
display: flex;
align-items: center;
}
.header-mobile__balance--content { .header-mobile__balance--content {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -36,7 +41,7 @@
.card-display h2 { .card-display h2 {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
padding: 8% 15px 8% 7%; padding: 13% 15px 13% 6%;
} }
.card-img img { .card-img img {
@@ -52,13 +57,32 @@
font-size: 13px; font-size: 13px;
} }
.btn-card {
border-radius: 13px;
background: #EF4444;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
text-align: center;
padding: 4px;
}
.btn-card img { .btn-card img {
width: 90%; width: 90%;
height: 40px; height: 40px;
} }
.btn-card__margin { .btn-card__margin {
margin-left: -8%; margin-left: -1%;
}
.header-mobile__user-icon {
display: flex;
align-items: center;
}
.user-icon img {
width: 70%;
margin-left: 15px;
} }
/* /Header */ /* /Header */

3
luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M36.0312 8.57143H6.25C5.5625 8.57143 5 7.92857 5 7.14286C5 6.35714 5.5625 5.71429 6.25 5.71429H36.25C36.9375 5.71429 37.5 5.07143 37.5 4.28571C37.5 1.91964 35.8203 0 33.75 0H5C2.24219 0 0 2.5625 0 5.71429V34.2857C0 37.4464 2.24219 40 5 40H36.0312C38.2188 40 40 38.0804 40 35.7143V12.8571C40 10.4911 38.2188 8.57143 36.0312 8.57143ZM32.5 27.1429C31.1172 27.1429 30 25.8661 30 24.2857C30 22.7054 31.1172 21.4286 32.5 21.4286C33.8828 21.4286 35 22.7054 35 24.2857C35 25.8661 33.8828 27.1429 32.5 27.1429Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 642 B

7
luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
View File

@@ -4,16 +4,21 @@
<div class="header-mobile__logo"> <div class="header-mobile__logo">
<img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now"> <img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
</div> </div>
<div class="header-mobile__end">
<div class="header-mobile__balance"> <div class="header-mobile__balance">
<div class="header-mobile__balance--content"> <div class="header-mobile__balance--content">
<div class="header-mobile__card card-display card-text card-img"> <div class="header-mobile__card card-display card-text card-img">
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2> <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
</div> </div>
<div class="header-mobile__btn--balance btn-card btn-card__margin"> <div class="header-mobile__btn--balance btn-card btn-card__margin">
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a> <img src="@/assets/icons-adaptive/home-adaptive/icon-wallet.svg">
</div> </div>
</div> </div>
</div> </div>
<div class="header-mobile__user-icon user-icon">
<img src="@/assets/icons-test/person-icon-profile-userinfo.png">
</div>
</div>
</div> </div>
</header> </header>
</template> </template>