changed template and added styles for modal payments in paymentsmodal component

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

@@ -63,7 +63,8 @@ input:focus {
     left: 10%;
 }
 
-.deposit-icon__input input {
+.deposit-icon__input input,
+.withdraw-input input{
     width: 350px;
     height: 44px;
     border-radius: 15px;
@@ -74,4 +75,68 @@ input:focus {
     font-family: Montserrat Alternates;
     font-size: 12px;
     padding-left: 40px;
-}
+}
+
+.display-btns {
+    display: flex;
+    margin-top: 10px;
+}
+
+.btns-style-diamonds button {
+    border-radius: 10px;
+    background: #252C47;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #FFF;
+    font-weight: 700;
+    line-height: 31px;
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    border: none;
+    padding: 4px 22px;
+}
+
+.deposit-promocode {
+    margin-top: 15px;
+}
+
+.deposit-promocode__padding--input input {
+    padding-left: 15px;
+}
+
+
+.btn-deposit,
+.btn-withdraw {
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    margin: 35% 6% 0 0;
+}
+
+.btn-style-payments button {
+    border-radius: 10px;
+    background: #EF4444;
+    ont-family: Montserrat Alternates;
+    font-size: 16px;
+    color: #fff;
+    font-weight: 700;
+    line-height: 19px;
+    padding: 22px 120px;
+    border: none;
+}
+
+/* Withdraw */
+
+.payments-modal__withdraw {
+    margin-left: 26px;
+}
+
+.number-card {
+    margin-top: 15px;
+}
+
+.btn-withdraw {
+    margin-top: 30%;
+}
+
+/* /Withdraw */

luckydiamond/src/components/PaymentsModal.vue

@@ -8,23 +8,35 @@
       <div class="deposit-input deposit-text deposit-icon-diamond deposit-icon__input">
         <h3>Сумма пополнения</h3>
         <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
-        <input type="number">
+        <input v-model="amount" type="number">
         <div class="deposit-btns">
-
+          <ul class="display-btns btns-style-diamonds">
+            <li v-for="number in PaymentsModalNumbers" :key="number">
+              <button>{{ number.diamonds }}</button>
+            </li>
+          </ul>
+        </div>
+        <div class="deposit-promocode deposit-promocode__padding--input">
+          <h3>Промокод</h3>
+          <input type="text">
+        </div>
+        <div class="btn-deposit btn-style-payments">
+          <button type="submit" @click="detectorMethod('dep')">Пополнить</button>
         </div>
       </div>
     </div>
-    <div v-else class="payments-modal__withdraw payments__input--color payments__margin payments__button">
-      <div class="count-withdraw">
-        <label>Введите сумму для снятия</label>
+    <div v-else class="payments-modal__withdraw deposit-text withdraw-input">
+      <div class="count-withdraw deposit-icon-diamond">
+        <h3>Сумма вывода</h3>
+        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
         <input v-model="amount" type="number">
       </div>
-      <div class="number-card">
-        <label>Введите номер карты</label>
+      <div class="number-card deposit-promocode__padding--input">
+        <h3>Введите номер карты</h3>
         <input v-model="card" type="number">
       </div>
-      <div class="payments-modal__content--btn">
-        <button type="submit" @click="detectorMethod('with')">Подтвердить</button>
+      <div class="btn-withdraw btn-style-payments">
+        <button type="submit" @click="detectorMethod('with')">Вывод</button>
       </div>
     </div>
   </div>
@@ -32,6 +44,7 @@
 
 <script>
 import '@/assets/css/ComponentsStyles/payments-modal.css'
+import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
 
 export default {
   props: [
@@ -41,6 +54,7 @@ export default {
     return {
       amount: 1,
       card: 0,
+      PaymentsModalNumbers
     }
   },
   methods: {