added payments template and styles

luckydiamond/src/assets/css/PagesStyles/profile.css

@@ -77,4 +77,83 @@
 
 .withdraw {
     padding: 9px 0 13px 13px;
+}
+
+
+.payments {
+    margin: 29px 0 0 -60px;
+}
+
+.types {
+    display: flex;
+}
+
+.types-margin h3 {
+    margin-right: 125px;
+}
+
+.types-text h3 {
+    color: #ABABB4;
+    font-weight: 600;
+    font-family: Montserrat;
+    font-size: 14px;
+}
+
+.types-line {
+    margin-top: 12px;
+    background: #38383E;
+    width: 86%;
+    height: 3px;
+}
+
+.payments__card {
+    margin-top: 29px;
+    display: flex;
+    align-items: start;
+}
+
+.user-info {
+    display: flex;
+}
+
+.user-name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+}
+
+.user-name__text h3 {
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat;
+    font-size: 20px;
+}
+
+.user-name__text p {
+    color: #A9A9A9;
+    font-weight: 400;
+    font-family: Montserrat;
+    font-size: 20px;
+}
+
+.data-info {
+    margin-left: 115px;
+}
+
+.data-info__text h3 {
+    color: #A9A9A9;
+    font-weight: 400;
+    font-family: Montserrat;
+    font-size: 17px;
+}
+
+.transaction-info {
+    margin-left: 90px;
+}
+
+.transaction-info__text h3 {
+    color: #EA3D38;
+    font-weight: 500;
+    font-family: Montserrat;
+    font-size: 22px;
 }

luckydiamond/src/assets/css/global.css

@@ -122,6 +122,7 @@ body, html {
 /* Profile */
 
 .profile {
+    display: flex;
     grid-area: profile;
     height: 95%;
     border-radius: 50px;

luckydiamond/src/pages/ProfilePage.vue

@@ -20,7 +20,31 @@
     </div>
     <div class="payments">
       <div class="payments__content">
-
+        <div class="payments__types">
+          <div class="types types-margin types-text">
+            <h3>Игрок и вид транзакции</h3>
+            <h3>Дата</h3>
+            <h3>Сумма</h3>
+          </div>
+          <div class="types-line"></div>
+        </div>
+        <div class="payments__history">
+          <div class="payments__card">
+            <div class="user-info">
+              <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
+              <div class="user-name user-name__text">
+                <h3>{{ username }}</h3>
+                <p>test</p>
+              </div>
+            </div>
+            <div class="data-info data-info__text">
+              <h3>5ч назад</h3>
+            </div>
+            <div class="transaction-info transaction-info__text">
+              <h3>-1 АР</h3>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>