124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
<template>
|
||
<div class="modalWindow" ref="modalWindowEl">
|
||
<div class="modalWindow__wrapper" :class="wrapperClass">
|
||
<div v-if="has_restricted_access" class="warning_msg">
|
||
Вы не сможете добавить комплекс, так как у вас не оплачен тариф
|
||
</div>
|
||
<div class="modalWindow__title">{{ props.title }}</div>
|
||
<button class="modalWindow__close" @click="$emit('closeModel')">
|
||
<svg
|
||
width="18"
|
||
height="18"
|
||
viewBox="0 0 18 18"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M0.93511 18C0.698006 18 0.460901 17.9099 0.280756 17.7284C-0.0808901 17.3667 -0.0808901 16.7804 0.280756 16.4187L16.4283 0.271235C16.7899 -0.0904116 17.3762 -0.0904116 17.7379 0.271235C18.0995 0.632881 18.0995 1.2192 17.7379 1.58107L1.59059 17.7284C1.40909 17.9087 1.17199 18 0.93511 18Z"
|
||
fill="#757579"
|
||
/>
|
||
<path
|
||
d="M17.0838 18C16.8466 18 16.6098 17.9099 16.4294 17.7284L0.280756 1.58107C-0.0808901 1.2192 -0.0808901 0.632881 0.280756 0.271235C0.642403 -0.0904116 1.22872 -0.0904116 1.59059 0.271235L17.7379 16.4187C18.0995 16.7804 18.0995 17.3667 17.7379 17.7284C17.5564 17.9087 17.3195 18 17.0838 18Z"
|
||
fill="#757579"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
<slot />
|
||
<slot name="formBtns" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
|
||
const emits = defineEmits(["closeModel"]);
|
||
const props = defineProps ({
|
||
title: String,
|
||
wrapperClass: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
})
|
||
|
||
const has_restricted_access = ref(!!Number(document.getElementById('has_restricted_access')?.value))
|
||
const hasDeveloper = ref(!!Number(document.getElementById('has_developer')?.value))
|
||
|
||
const modalWindowEl = ref(HTMLElement);
|
||
|
||
document.addEventListener("click", (e) => {
|
||
if (e.target === modalWindowEl.value) {
|
||
emits("closeModel");
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.modalWindow {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1000;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: 0.3s all ease-in-out;
|
||
|
||
&.open {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transition: 0.3s all ease-in-out;
|
||
}
|
||
|
||
&__wrapper {
|
||
position: relative;
|
||
width: 760px;
|
||
height: 80vh;
|
||
@apply bg-white;
|
||
padding: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
&__title {
|
||
font-size: 28px;
|
||
line-height: 100%;
|
||
}
|
||
|
||
&__close {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: 30px;
|
||
width: 20px;
|
||
height: 20px;
|
||
svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.warning_msg
|
||
{
|
||
background-color: #f2dede;
|
||
border: 1px solid #ebcccc;
|
||
border-radius: 4px;
|
||
color: #a94442;
|
||
padding: 10px 20px 12px;
|
||
margin-bottom: 30px;
|
||
font-size: 16px;
|
||
font-family: "Lato";
|
||
line-height: 1.5;
|
||
}
|
||
</style>
|