Modal for refferals

Модал для реффералов бахнул, спать надо, поэтому не сделал вёрстку сорян

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

@@ -88,6 +88,17 @@
     background: #EF4444;
 }
 
+.referal {
+    padding: 3.8% 46% 3% 14%;
+    margin-top: 12px;
+    background: #2D6AE0;
+}
+
+.referal img {
+    height: 20px;
+    width: 22px;
+}
+
 .playerandvid {
     margin-right: 10vh;
 }

luckydiamond/src/components/ReferalModal.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="payment-modal withdraw-modal">
+      <div class="payments-modal__content close-modal__icon text-styles__margin">
+        <h1>Рефералы</h1>
+        <img @click="closeModal" src="@/assets/icons-other/icon-payments-modal-close.svg" />
+      </div>
+      <div v-if="payments" class="payments-modal__deposit">
+      </div>
+      <div v-else class="payments-modal__withdraw deposit-text withdraw-input">
+        <div class="btn-withdraw btn-text-style btn-display-deposit btn-style-payments">
+          <h1>В РАЗРАБОТКЕ</h1>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import "@/assets/css/ComponentsStyles/payments-modal.css";
+  export default {
+    props: ["payments"],
+    methods: {
+      closeModal() {
+        return this.$emit("closemodal");
+      },
+    },
+  };
+  </script>
+  

luckydiamond/src/pages/ProfilePage.vue

@@ -14,6 +14,7 @@
       <div class="profile__btns--payments">
         <a href="#" class="text-btn btn-bg btn-margin btn-display" @click="depositClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
         <a href="#" class="withdraw text-btn btn-bg btn-display" @click="withdrawClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
+        <a href="#" class="referal text-btn btn-bg btn-display" @click="referalClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-referal.png"> Рефералы</a>
       </div>
     </div>
     <div class="payments">
@@ -57,6 +58,7 @@
       </div>
     </div>
   </section>
+    <referal-modal v-if="openRef" @notifacetionmoney="NotificationEventListener" @closemodal="openRef = false"></referal-modal>
     <payments-modal v-if="openModal" @notifacetionmoney="NotificationEventListener" @closemodal="openModal = false" :payments="payments"></payments-modal>
     <notiicationwindow-component @notificationremove="NotificationMethod" :notification="notification"></notiicationwindow-component>
   </div>
@@ -67,13 +69,14 @@ import axios from 'axios';
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import PaymentsModal from "@/components/PaymentsModal.vue";
+import ReferalModal from "@/components/ReferalModal.vue";
 import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
 import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import '@/assets/css/PagesStyles/profile.css'
 import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
 export default {
-  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, NotiicationwindowComponent },
+  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, ReferalModal, NotiicationwindowComponent },
   data() {
     return {
       username: 'Artemka',
@@ -82,6 +85,7 @@ export default {
       balance: 0,
       mobile: false,
       openModal: false,
+      openRef: false,
       payments: true,
       arrayHistory: [],
     }
@@ -134,6 +138,9 @@ export default {
       this.openModal = true
       this.payments = false
     },
+    referalClick() {
+      this.openRef = true
+    },
     NotificationEventListener() {
       this.notification = true
       this.openModal = false