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

delete template and style in header, asidebar(menu)

Browse Source
This commit is contained in:
Kostya
2023-11-18 18:40:59 +03:00
parent 87fc617039
commit 437ab12a2d
2 changed files with 5 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
luckydiamond/src/pages/AsidebarElement.vue
View File

@@ -1,14 +1,6 @@
<template> <template>
<aside class="bar"> <aside class="menu">
<div class="bar__content">
<div class="bar__blurry-bg"></div>
<div class="bar__buttons">
<a href="#" class="bar__button--home"> <img src="../assets/icons/icon-home-button.png"> </a>
<div class="bar__settings">
<a href="#" class="bar__button--settings"> <img src="../assets/icons/icon-settings-button.png"> </a>
</div>
</div>
</div>
</aside> </aside>
</template> </template>
@@ -19,45 +11,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
.bar {
width: 88px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
user-select: none;
overflow: hidden;
z-index: 1000;
}
.bar__content {
padding-top: 26px;
justify-content: center;
background: #1D202B;
display: flex;
align-items: flex-start;
text-align: center;
position: relative;
z-index: 1;
height: 100%;
}
.bar__blurry-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #051B53;
filter: blur(39px);
z-index: -1;
}
.bar__buttons {
z-index: 2;
}
.bar__settings {
position: absolute;
bottom: 0;
}
.bar__settings .bar__button--settings img {
margin-bottom: 15px;
}
</style> </style>

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

@@ -1,31 +1,6 @@
<template> <template>
<header class="header"> <header class="header">
<div class="header__content">
<div class="header__logo">
<img src="../assets/logo.svg" alt="LuckyDiamond">
</div>
<div class="header__nav">
<nav>
<a href="#" id="btn--now">Главная</a>
<a href="#">Профиль</a>
<a href="#">Помощь</a>
</nav>
</div>
<div class="header__balance">
<div class="header__balance--content">
<div class="count__card">
<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>
</header> </header>
</template> </template>
@@ -41,109 +16,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
.header {
margin-left: 88px;
position: fixed;
top: 0;
width: 100%;
z-index: 2;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #DF85FF99;
filter: blur(125px);
z-index: -1;
}
.header::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
background: #7000FF;
filter: blur(125px);
z-index: -1;
}
.header__content {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.header__logo {
padding: 2% 1.5%;
user-select: none;
}
.header__nav {
flex-grow: 0.69;
display: flex;
justify-content: center;
}
.header__nav nav a {
text-decoration: none;
font-size: 19px;
margin-right: 75px;
color: #fff;
font-family: Montserrat;
font-weight: 700;
}
#btn--now {
color: #ffb400;
font-family: Montserrat;
font-weight: 700;
position: relative;
}
#btn--now::before {
position: absolute;
content: '';
width: 100%;
height: 2px;
background: #ffb400;
bottom: -7px;
left: 0;
}
.header__balance--content {
display: flex;
align-items: center;
}
.balance__count {
border-radius: 9px;
padding: 10px 16px;
background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
flex-shrink: 0;
}
.balance__count h2 {
display: flex;
align-items: center;
color: #fff;
font-family: Montserrat;
font-weight: 700;
font-size: 18px;
}
.balance__count h2 img {
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;
font-weight: 600;
font-size: 16px;
}
</style> </style>