added logic payments modal

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

@@ -0,0 +1,24 @@
+.payment-modal {
+    position: absolute;
+    top: 20%;
+    left: 35%;
+}
+
+.payments-modal__content {
+    background: #000;
+    width: 400px;
+    height: 200px;
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+.payments-modal__content button {
+    background: #fff;
+    border: none;
+    color: #ff0000;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    cursor: pointer;
+}

luckydiamond/src/components/archive/PaymentsModal.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="payment-modal" :class="{ 'deposit-modal': payments, 'withdraw-modal': !payments }">
+    <div class="payments-modal__content">
+      <h1>{{ payments ? 'Вывод' : 'Пополнить' }}</h1>
+      <button @click="closeModal">X</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/payments-modal.css'
+
+export default {
+  props: [
+      'payments'
+  ],
+  data() {
+    return {
+    }
+  },
+  methods: {
+    closeModal() {
+      return this.$emit('closemodal')
+    }
+  }
+}
+</script>

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">Пополнить <img class="deposit-icon" src="@/assets/icons-profile/icon-deposit.svg"></a>
+        <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">Вывести <img class="withdraw-icon" src="@/assets/icons-profile/icon-withdraw.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>
       </div>
     </div>
     <div class="payments">
@@ -48,6 +48,7 @@
       </div>
     </div>
   </section>
+    <payments-modal v-if="openModal" @closemodal="openModal = false" :payments="payments"></payments-modal>
   </div>
 </template>
 
@@ -55,16 +56,28 @@
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
+import PaymentsModal from "@/components/archive/PaymentsModal.vue";
 import '@/assets/css/PagesStyles/profile.css'
 
 export default {
-  components: { HeaderComponent, AsideBarComponent, ChatComponent },
+  components: { HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal },
   data() {
     return {
       username: 'Artemka',
-      balance: 25000
+      balance: 25000,
+      openModal: false,
+      payments: true
+    }
+  },
+  methods: {
+    withdrawClick() {
+      this.openModal = true
+      this.payments = false
+    },
+    depositClick() {
+      this.openModal = true
+      this.payments = true
     }
   }
-
 }
 </script>