diff --git a/luckydiamond/src/assets/css/PagesStyles/profile.css b/luckydiamond/src/assets/css/PagesStyles/profile.css index e69de29..86323b3 100644 --- a/luckydiamond/src/assets/css/PagesStyles/profile.css +++ b/luckydiamond/src/assets/css/PagesStyles/profile.css @@ -0,0 +1,80 @@ +.profile__content { + width: 35%; + margin-left: 36px; +} + +.profile__content .profile__user--img { + margin: 88px 42px 5px 0; +} + +.profile__card { + display: flex; + flex-direction: column; +} + +.profile__card h1 { + color: #FFF; + font-weight: 700; + font-family: Montserrat; + font-size: 40px; +} + +.profile__card h2 { + border-radius: 20px; + background: #22252F; + width: 32%; + display: flex; + align-items: center; + color: #FFF; + font-weight: 700; + font-family: Montserrat Alternates; + font-size: 28px; +} + +.profile__card h2 img { + margin-right: 7px; +} + +.profile__btns--payments { + margin-top: 39px; + display: flex; + flex-direction: column; +} + +.deposit-icon { + margin: 3px 0 0 10px; +} + +.withdraw-icon { + margin-left: 33px; +} + +.btn-bg { + border-radius: 10px; + background: rgba(255, 255, 255, 0.12); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + width: 36%; +} + +.btn-margin { + padding: 9px 0 13px 13px; + margin-bottom: 11px; +} + +.btn-display { + display: flex; + align-items: center; +} + +.text-btn { + text-decoration: none; + color: #FFF; + font-weight: 700; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat Alternates; + font-size: 18px; +} + +.withdraw { + padding: 9px 0 13px 13px; +} \ No newline at end of file diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css index 806eb53..bf5c2b4 100644 --- a/luckydiamond/src/assets/css/global.css +++ b/luckydiamond/src/assets/css/global.css @@ -123,19 +123,11 @@ body, html { .profile { grid-area: profile; - height: 100%; - width: 100%; - background: #fff; + height: 95%; + border-radius: 50px; + background: #17181C; + box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); + margin: 10px 39px 18px 13px; } /* /Profile */ - -/* Payments */ - -.payments { - grid-area: payments; - background: #d5d5d5; - height: 100%; -} - -/* /Payments */ \ No newline at end of file diff --git a/luckydiamond/src/assets/icons-profile/icon-deposit.svg b/luckydiamond/src/assets/icons-profile/icon-deposit.svg new file mode 100644 index 0000000..0dffd08 --- /dev/null +++ b/luckydiamond/src/assets/icons-profile/icon-deposit.svg @@ -0,0 +1,3 @@ + + + diff --git a/luckydiamond/src/assets/icons-profile/icon-diamond-ore.png b/luckydiamond/src/assets/icons-profile/icon-diamond-ore.png new file mode 100644 index 0000000..3503a32 Binary files /dev/null and b/luckydiamond/src/assets/icons-profile/icon-diamond-ore.png differ diff --git a/luckydiamond/src/assets/icons-profile/icon-withdraw.svg b/luckydiamond/src/assets/icons-profile/icon-withdraw.svg new file mode 100644 index 0000000..51ac645 --- /dev/null +++ b/luckydiamond/src/assets/icons-profile/icon-withdraw.svg @@ -0,0 +1,3 @@ + + + diff --git a/luckydiamond/src/assets/icons-test/person-icon-profile.png b/luckydiamond/src/assets/icons-test/person-icon-profile.png new file mode 100644 index 0000000..c978963 Binary files /dev/null and b/luckydiamond/src/assets/icons-test/person-icon-profile.png differ diff --git a/luckydiamond/src/pages/ProfilePage.vue b/luckydiamond/src/pages/ProfilePage.vue index 8a6dc73..5f64d63 100644 --- a/luckydiamond/src/pages/ProfilePage.vue +++ b/luckydiamond/src/pages/ProfilePage.vue @@ -8,7 +8,15 @@
- + +
+

{{ username }}

+

{{ balance }}

+
+
@@ -26,7 +34,13 @@ import HeaderComponent from "@/components/HeaderComponent.vue"; import '@/assets/css/PagesStyles/profile.css' export default { - components: { HeaderComponent, AsideBarComponent, ChatComponent } + components: { HeaderComponent, AsideBarComponent, ChatComponent }, + data() { + return { + username: 'Artemka', + balance: 25000 + } + } } \ No newline at end of file