added template for profile-mobile with styles

This commit is contained in:
Kostya
2023-12-21 17:04:47 +03:00
parent d01eda328d
commit e710bf3571
2 changed files with 93 additions and 1 deletions

View File

@@ -107,12 +107,74 @@ body {
font-size: 28px; 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) { @media screen and (max-device-width: 415px) {
.header-mobile { .header-mobile {
height: 45%; height: 45%;
} }
.profile-mobile__content { .profile-mobile__content {
margin-top: -10%; margin-top: -25%;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
align-items: center; align-items: center;

View File

@@ -19,6 +19,36 @@
</div> </div>
</main> </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> <menu-mobile-component></menu-mobile-component>
</div> </div>