added template for deposit modal

luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css

@@ -2,12 +2,12 @@
     position: absolute;
     top: 20%;
     left: 35%;
-}
-
-.payments-modal__content {
     background: #000;
     width: 400px;
     height: 200px;
+}
+
+.payments-modal__content {
     text-align: center;
     display: flex;
     justify-content: space-between;
@@ -21,4 +21,31 @@
     height: 40px;
     font-size: 40px;
     cursor: pointer;
+}
+
+.payments__input--color input {
+    color: #000;
+}
+
+.payments__margin {
+    margin: 40px 0 0 20px;
+}
+
+.payments__margin input {
+    margin-left: 10px;
+}
+
+.payments__button .payments-modal__content--btn {
+    display: flex;
+    justify-content: center;
+    margin-top: 5%;
+}
+
+.payments__button .payments-modal__content--btn button {
+    background: #fff;
+    color: #000;
+    font-weight: 700;
+    padding: 10px 10px;
+    border: none;
+    cursor: pointer;
 }

luckydiamond/src/components/archive/PaymentsModal.vue

@@ -1,9 +1,18 @@
 <template>
-  <div class="payment-modal" :class="{ 'deposit-modal': payments, 'withdraw-modal': !payments }">
+  <div class="payment-modal">
     <div class="payments-modal__content">
-      <h1>{{ payments ? 'Вывод' : 'Пополнить' }}</h1>
+      <h1>{{ payments ? 'Пополнить' : 'Вывод' }}</h1>
       <button @click="closeModal">X</button>
     </div>
+    <div v-if="payments" class="payments-modal__deposit payments__input--color payments__margin payments__button">
+      <label>Введите сумму пополнения</label>
+      <input type="number">
+      <div class="payments-modal__content--btn">
+        <button type="submit">Подтвердить</button>
+      </div>
+    </div>
+    <div v-else class="payments-modal__withdraw payments-input__color payments__margin payments__button">
+    </div>
   </div>
 </template>
 

luckydiamond/src/pages/ProfilePage.vue

@@ -14,8 +14,8 @@
         <h2><img src="@/assets/icons-profile/icon-diamond-ore.png">{{ balance }}</h2>
       </div>
       <div class="profile__btns--payments">
-        <a href="#" class="text-btn btn-bg btn-margin btn-display" @click="withdrawClick">Пополнить <img class="deposit-icon" src="@/assets/icons-profile/icon-deposit.svg"></a>
-        <a href="#" class="withdraw text-btn btn-bg btn-display" @click="depositClick">Вывести <img class="withdraw-icon" src="@/assets/icons-profile/icon-withdraw.svg"></a>
+        <a href="#" class="text-btn btn-bg btn-margin btn-display" @click="depositClick">Пополнить <img class="deposit-icon" src="@/assets/icons-profile/icon-deposit.svg"></a>
+        <a href="#" class="withdraw text-btn btn-bg btn-display" @click="withdrawClick">Вывести <img class="withdraw-icon" src="@/assets/icons-profile/icon-withdraw.svg"></a>
       </div>
     </div>
     <div class="payments">
@@ -70,13 +70,13 @@ export default {
     }
   },
   methods: {
-    withdrawClick() {
-      this.openModal = true
-      this.payments = false
-    },
     depositClick() {
       this.openModal = true
       this.payments = true
+    },
+    withdrawClick() {
+      this.openModal = true
+      this.payments = false
     }
   }
 }