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

added last style for header, balance card and wallet card

Browse Source
This commit is contained in:
Kostya
2023-11-13 23:20:57 +03:00
parent dc3fa5717e
commit 506883be87
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
luckydiamond/src/pages/HeaderElement.vue
View File

@@ -13,8 +13,15 @@
</div> </div>
<div class="header__balance"> <div class="header__balance">
<div class="header__balance--content"> <div class="header__balance--content">
<div class="balance__count"> <div class="count__card">
<h2><img src="../assets/icons/icon-deepslate_diamond_ore.png">{{ balance }}</h2> <div class="balance__count">
<h2><img src="../assets/icons/icon-deepslate_diamond_ore.png">{{ balance }}</h2>
</div>
</div>
<div class="wallet__card">
<div class="balance__wallet">
<h2>кошелёк</h2>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -102,11 +109,16 @@ export default {
bottom: -7px; bottom: -7px;
left: 0; left: 0;
} }
.header__balance--content {
display: flex;
align-items: center;
}
.balance__count { .balance__count {
border-radius: 9px; border-radius: 9px;
padding: 10px 10px; padding: 10px 16px;
background: #22252F; background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
flex-shrink: 0;
} }
.balance__count h2 { .balance__count h2 {
display: flex; display: flex;
@@ -118,5 +130,20 @@ export default {
} }
.balance__count h2 img { .balance__count h2 img {
margin-right: 6px; margin-right: 6px;
user-select: none;
}
.balance__wallet {
border-radius: 13px;
padding: 18px 23px 21px 23px;
background: #ffb400;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
flex-shrink: 0;
margin-left: -15px;
}
.balance__wallet h2 {
text-transform: uppercase;
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 16px;
} }
</style> </style>