From e710bf357106262a08f0ecd857438d2bf3e64220 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Thu, 21 Dec 2023 17:04:47 +0300
Subject: [PATCH] added template for profile-mobile with styles

---
 .../adaptive-pages/profilemobile.css          | 64 ++++++++++++++++++-
 .../adaptive-pages/ProfilemobilePage.vue      | 30 +++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css
index 89455bf..2d1f468 100644
--- a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css
@@ -107,12 +107,74 @@ body {
     font-size: 28px;
 }
 
+.payments-types__mobile {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.types-text__mobile h3 {
+    color: #ABABB4;
+    font-weight: 600;
+    font-family: Montserrat;
+    font-size: 14px;
+}
+
+.types-start__margin-mobile {
+    margin-left: 42px;
+}
+
+.types-margin__mobile h3 {
+    margin-right: 80px;
+}
+
+.types-line__mobile {
+    margin: 20px 0 0 20px;
+    background: #38383E;
+    width: 93%;
+    height: 3px;
+}
+
+.user-info {
+    margin: 0 20px;
+}
+
+.user-name {
+    margin-right: 40px;
+}
+
+.user-name__text h3 {
+    font-size: 16px !important;
+}
+
+.data-info {
+    margin-right: 50px;
+}
+
+.data-info__text h3 {
+    font-size: 14px !important;
+}
+
+.transaction-info__text h3 {
+    font-size: 15px !important;
+}
+
+.payments-card__mobile {
+    display: flex;
+}
+
+.payments-card__mobile {
+    display: flex;
+}
+
+/* Media */
+
 @media screen and (max-device-width: 415px) {
     .header-mobile {
         height: 45%;
     }
     .profile-mobile__content {
-        margin-top: -10%;
+        margin-top: -25%;
         flex-direction: column;
         text-align: center;
         align-items: center;
diff --git a/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue b/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
index 6a6dde9..6084360 100644
--- a/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
@@ -19,6 +19,36 @@
       </div>
     </main>
 
+    <section class="payments-mobile">
+      <div class="payments-mobile__content_">
+        <div class="payments-types__mobile types-margin__mobile types-text__mobile">
+          <h3 class="types-start__margin-mobile">Вид транзакции</h3>
+          <h3>Дата</h3>
+          <h3>Сумма</h3>
+        </div>
+        <div class="types-line__mobile"></div>
+        <div class="payments-history__mobile">
+          <div class="payments-card__mobile">
+            <div class="user-info">
+              <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
+              <div class="user-name user-name__text">
+                <h3>Artemka</h3>
+                <h3>test</h3>
+              </div>
+            </div>
+            <div class="payments-data">
+              <div class="data-info data-info__text">
+                <h3>5ч назад</h3>
+              </div>
+              <div class="transaction-info transaction-info__text">
+                <h3>99 АР</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <menu-mobile-component></menu-mobile-component>
 
   </div>