added template and styles for profilemobile

luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css

@@ -2,6 +2,10 @@ body {
     overflow-y: scroll;
 }
 
+.header-mobile {
+    height: 70%;
+}
+
 .content-grid__mobile-profile {
     display: grid;
     grid-auto-columns: 1fr;
@@ -18,4 +22,66 @@ body {
 
 .profile-mobile {
     grid-area: profile-mobile;
+    width: 100%;
+    height: 100%;
+}
+
+.profile-mobile__content {
+    display: flex;
+}
+
+.profile-mobile__btns-payments {
+    display: flex;
+    flex-direction: column;
+}
+
+.text-default-mobile h2, h3 {
+    font-weight: 700;
+    color: #fff;
+}
+
+.macroinfo-profile {
+    margin: 15px 0 0 20px;
+}
+
+.macroinfo-profile img {
+    width: 197px;
+    height: 197px;
+}
+
+.img-margin img {
+    margin-top: 15px;
+}
+
+.macroinfo-profile h2 {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 33px;
+    line-height: 31px;
+}
+
+.info-profile {
+    /*margin-left: 10%;*/
+    margin: 12% 0 0 10%;
+}
+
+.info-profile .text-nickname-user {
+    font-family: Montserrat;
+    font-size: 2em;
+}
+
+.info-profile .balance-border {
+    border-radius: 20px;
+    width: 100%;
+    background: #22252F;
+}
+
+.info-profile .balance-display {
+    display: flex;
+    align-items: center;
+}
+
+.info-profile .balance-text {
+    font-family: Montserrat Alternates;
+    font-size: 28px;
 }

luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue

@@ -3,7 +3,20 @@
     <header-mobile-component></header-mobile-component>
 
     <main class="profile-mobile">
-
+      <div class="profile-mobile__content">
+        <div class="macroinfo-profile text-default-mobile img-margin">
+          <h2>Профиль</h2>
+          <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
+        </div>
+        <div class="info-profile">
+          <h3 class="text-nickname-user">Artmeka</h3>
+          <h3 class="balance-border balance-display balance-text"><img src="@/assets/icons-profile/icon-diamond-ore.png">999</h3>
+          <div class="profile-mobile__btns-payments">
+            <a href="#"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
+            <a href="#"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
+          </div>
+        </div>
+      </div>
     </main>
 
     <menu-mobile-component></menu-mobile-component>
@@ -14,6 +27,9 @@
 <script>
 import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
 import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
+
+import '@/assets/css/PagesStyles/adaptive-pages/profilemobile.css'
+
 export default {
   components: { HeaderMobileComponent, MenuMobileComponent }
 }