From c7dceb29aa597bca7370b97bfc8580358b307776 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Mon, 12 Jul 2021 18:00:50 +0800
Subject: [PATCH] no message

---
 .../assets/js/components/DrawerOverlay.vue    |  77 ++++++++++++
 resources/assets/js/components/OnlyOffice.vue |   1 +
 resources/assets/js/pages/manage.vue          |  27 +++--
 .../manage/components/ProjectArchived.vue     |   5 +-
 .../pages/manage/components/ProjectList.vue   |  21 ++--
 .../js/pages/manage/components/ProjectLog.vue |   1 +
 .../manage/components/ProjectManagement.vue   |   5 +-
 .../pages/manage/components/TaskArchived.vue  |   3 +-
 .../manage/components/TeamManagement.vue      |   5 +-
 resources/assets/js/pages/manage/file.vue     |  35 ++----
 resources/assets/sass/components/_.scss       |   1 +
 .../sass/components/drawer-overlay.scss       | 111 ++++++++++++++++++
 resources/assets/sass/pages/common.scss       |   4 +-
 resources/assets/sass/pages/components/_.scss |   2 +
 .../pages/components/project-archived.scss    |  16 +++
 .../sass/pages/components/project-log.scss    |  14 +++
 .../pages/components/project-management.scss  |  14 +++
 .../sass/pages/components/task-archived.scss  |  16 +++
 .../pages/components/team-management.scss     |  14 +++
 resources/assets/sass/pages/page-file.scss    |  72 +-----------
 20 files changed, 314 insertions(+), 130 deletions(-)
 create mode 100644 resources/assets/js/components/DrawerOverlay.vue
 create mode 100644 resources/assets/sass/components/drawer-overlay.scss
 create mode 100644 resources/assets/sass/pages/components/project-archived.scss
 create mode 100644 resources/assets/sass/pages/components/task-archived.scss

diff --git a/resources/assets/js/components/DrawerOverlay.vue b/resources/assets/js/components/DrawerOverlay.vue
new file mode 100644
index 00000000..0dcce1ad
--- /dev/null
+++ b/resources/assets/js/components/DrawerOverlay.vue
@@ -0,0 +1,77 @@
+<template>
+    <div :class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']" @click="mask">
+        <div class="overlay-body" :style="bodyStyle">
+            <div class="overlay-close">
+                <a href="javascript:void(0)" @click.stop="close">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
+                        <path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
+                    </svg>
+                </a>
+            </div>
+            <div class="overlay-content" @click.stop="">
+                <slot/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'DrawerOverlay',
+        props: {
+            value: {
+                type: Boolean,
+                default: false
+            },
+            maskClosable: {
+                type: Boolean,
+                default: true
+            },
+            placement: {
+                validator (value) {
+                    return ['right', 'bottom'].includes(value)
+                },
+                default: 'bottom'
+            },
+            size: {
+                type: [Number, String],
+                default: "100%"
+            },
+        },
+
+        data() {
+            return {
+
+            }
+        },
+
+        computed: {
+            bodyStyle() {
+                let size = parseInt(this.size);
+                size = size <= 100 ? `${size}%` : `${size}px`
+                if (this.placement == 'right') {
+                    return {
+                        width: size,
+                        height: "100%"
+                    }
+                } else {
+                    return {
+                        width: "100%",
+                        height: size,
+                    }
+                }
+            }
+        },
+
+        methods: {
+            mask () {
+                if (this.maskClosable) {
+                    this.close()
+                }
+            },
+            close() {
+                this.$emit("input", !this.value)
+            },
+        }
+    }
+</script>
diff --git a/resources/assets/js/components/OnlyOffice.vue b/resources/assets/js/components/OnlyOffice.vue
index a26ae75d..8a5d8861 100644
--- a/resources/assets/js/components/OnlyOffice.vue
+++ b/resources/assets/js/components/OnlyOffice.vue
@@ -26,6 +26,7 @@
 import {mapState} from "vuex";
 
 export default {
+    name: "OnlyOffice",
     props: {
         id: {
             type: String,
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index 77af10e7..6a930437 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -130,28 +130,28 @@
         </Modal>
 
         <!--查看所有团队-->
-        <Drawer
+        <DrawerOverlay
             v-model="allUserShow"
-            :width="900"
-            :title="$L('团队管理')">
+            placement="right"
+            :size="900">
             <TeamManagement v-if="allUserShow"/>
-        </Drawer>
+        </DrawerOverlay>
 
         <!--查看所有项目-->
-        <Drawer
+        <DrawerOverlay
             v-model="allProjectShow"
-            :width="900"
-            :title="$L('所有项目')">
+            placement="right"
+            :size="900">
             <ProjectManagement v-if="allProjectShow"/>
-        </Drawer>
+        </DrawerOverlay>
 
         <!--查看归档项目-->
-        <Drawer
+        <DrawerOverlay
             v-model="archivedProjectShow"
-            :width="900"
-            :title="$L('归档的项目')">
+            placement="right"
+            :size="900">
             <ProjectArchived v-if="archivedProjectShow"/>
-        </Drawer>
+        </DrawerOverlay>
     </div>
 </template>
 
@@ -162,9 +162,10 @@ import ProjectArchived from "./manage/components/ProjectArchived";
 import notificationKoro from "notification-koro1";
 import TeamManagement from "./manage/components/TeamManagement";
 import ProjectManagement from "./manage/components/ProjectManagement";
+import DrawerOverlay from "../components/DrawerOverlay";
 
 export default {
-    components: {ProjectManagement, TeamManagement, ProjectArchived, TaskDetail},
+    components: {DrawerOverlay, ProjectManagement, TeamManagement, ProjectArchived, TaskDetail},
     data() {
         return {
             loadIng: 0,
diff --git a/resources/assets/js/pages/manage/components/ProjectArchived.vue b/resources/assets/js/pages/manage/components/ProjectArchived.vue
index 1726f9bd..f2b0bffb 100644
--- a/resources/assets/js/pages/manage/components/ProjectArchived.vue
+++ b/resources/assets/js/pages/manage/components/ProjectArchived.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="project-archived">
-        <div class="search-box auto">
+        <div class="archived-title">{{$L('归档的项目')}}</div>
+        <div class="search-container auto">
             <ul>
                 <li>
                     <div class="search-label">
@@ -17,7 +18,7 @@
         </div>
         <Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
         <Page
-            class="page-box"
+            class="page-container"
             :total="total"
             :current="page"
             :disabled="loadIng > 0"
diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index e6179016..b6316df4 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -363,20 +363,20 @@
         </Modal>
 
         <!--查看项目动态-->
-        <Drawer
+        <DrawerOverlay
             v-model="logShow"
-            :width="680"
-            :title="$L('项目动态')">
+            placement="right"
+            :size="768">
             <ProjectLog v-if="logShow" :project-id="projectId"/>
-        </Drawer>
+        </DrawerOverlay>
 
         <!--查看归档任务-->
-        <Drawer
+        <DrawerOverlay
             v-model="archivedTaskShow"
-            :width="680"
-            :title="$L('归档的任务')">
+            placement="right"
+            :size="768">
             <TaskArchived v-if="archivedTaskShow" :project-id="projectId"/>
-        </Drawer>
+        </DrawerOverlay>
     </div>
 </template>
 
@@ -390,9 +390,12 @@ import TaskAddSimple from "./TaskAddSimple";
 import TaskRow from "./TaskRow";
 import TaskArchived from "./TaskArchived";
 import ProjectLog from "./ProjectLog";
+import DrawerOverlay from "../../../components/DrawerOverlay";
 export default {
     name: "ProjectList",
-    components: {ProjectLog, TaskArchived, TaskRow, Draggable, TaskAddSimple, UserInput, TaskAdd, TaskPriority},
+    components: {
+        DrawerOverlay,
+        ProjectLog, TaskArchived, TaskRow, Draggable, TaskAddSimple, UserInput, TaskAdd, TaskPriority},
     data() {
         return {
             nowTime: Math.round(new Date().getTime() / 1000),
diff --git a/resources/assets/js/pages/manage/components/ProjectLog.vue b/resources/assets/js/pages/manage/components/ProjectLog.vue
index 080b0ac1..8e5add3f 100644
--- a/resources/assets/js/pages/manage/components/ProjectLog.vue
+++ b/resources/assets/js/pages/manage/components/ProjectLog.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="project-log">
+        <div class="log-title">{{$L('项目动态')}}</div>
         <ul class="logs-activity">
             <li v-for="items in lists">
                 <div class="logs-date">{{logDate(items)}}</div>
diff --git a/resources/assets/js/pages/manage/components/ProjectManagement.vue b/resources/assets/js/pages/manage/components/ProjectManagement.vue
index 1db023a8..5fef38b6 100644
--- a/resources/assets/js/pages/manage/components/ProjectManagement.vue
+++ b/resources/assets/js/pages/manage/components/ProjectManagement.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="project-management">
-        <div class="search-box auto">
+        <div class="management-title">{{$L('所有项目')}}</div>
+        <div class="search-container auto">
             <ul>
                 <li>
                     <div class="search-label">
@@ -29,7 +30,7 @@
         </div>
         <Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
         <Page
-            class="page-box"
+            class="page-container"
             :total="total"
             :current="page"
             :disabled="loadIng > 0"
diff --git a/resources/assets/js/pages/manage/components/TaskArchived.vue b/resources/assets/js/pages/manage/components/TaskArchived.vue
index f975577e..dc87d826 100644
--- a/resources/assets/js/pages/manage/components/TaskArchived.vue
+++ b/resources/assets/js/pages/manage/components/TaskArchived.vue
@@ -1,8 +1,9 @@
 <template>
     <div class="task-archived">
+        <div class="archived-title">{{$L('归档的任务')}}</div>
         <Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
         <Page
-            class="page-box"
+            class="page-container"
             :total="total"
             :current="page"
             :disabled="loadIng > 0"
diff --git a/resources/assets/js/pages/manage/components/TeamManagement.vue b/resources/assets/js/pages/manage/components/TeamManagement.vue
index 96fdc855..7ffe7a25 100644
--- a/resources/assets/js/pages/manage/components/TeamManagement.vue
+++ b/resources/assets/js/pages/manage/components/TeamManagement.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="team-management">
-        <div class="search-box">
+        <div class="management-title">{{$L('团队管理')}}</div>
+        <div class="search-container">
             <ul>
                 <li>
                     <div class="search-label">
@@ -45,7 +46,7 @@
         </div>
         <Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
         <Page
-            class="page-box"
+            class="page-container"
             :total="total"
             :current="page"
             :disabled="loadIng > 0"
diff --git a/resources/assets/js/pages/manage/file.vue b/resources/assets/js/pages/manage/file.vue
index 03e0a1f5..a2c1fa57 100644
--- a/resources/assets/js/pages/manage/file.vue
+++ b/resources/assets/js/pages/manage/file.vue
@@ -40,7 +40,7 @@
                 </div>
             </div>
 
-            <div v-if="tableMode" class="file-table">
+            <div v-if="tableMode" class="file-table" @contextmenu.prevent="handleRightClick">
                 <Table
                     :columns="columns"
                     :data="fileList"
@@ -194,30 +194,11 @@
             </div>
         </Modal>
 
-        <!--查看修改文件-->
-        <div :class="['shot-overlay', editShow ? 'overlay-visible' : 'overlay-hide']">
-            <div class="overlay-content">
-                <div class="shot-container">
-                    <FileContent v-if="editShowNum > 0" :parent-show="editShow" :file="editInfo"/>
-                </div>
-            </div>
-            <a href="javascript:void(0)" class="close-overlay" @click="editShow=false">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
-                    <path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
-                </svg>
-            </a>
-        </div>
-
-
-<!--        <Drawer
-            v-model="editShow"
-            placement="bottom"
-            :height="editHeight"
-            :mask-closable="false"
-            :mask-style="{backgroundColor:'rgba(0,0,0,0.7)'}"
-            class-name="page-file-drawer">
+        <!--查看/修改文件-->
+        <DrawerOverlay v-model="editShow" class="page-file-drawer">
             <FileContent v-if="editShowNum > 0" :parent-show="editShow" :file="editInfo"/>
-        </Drawer>-->
+        </DrawerOverlay>
+
     </div>
 </template>
 
@@ -225,12 +206,13 @@
 import {mapState} from "vuex";
 import {sortBy} from "lodash";
 import UserInput from "../../components/UserInput";
+import DrawerOverlay from "../../components/DrawerOverlay";
 
 const FileContent = () => import('./components/FileContent');
 
 
 export default {
-    components: {UserInput, FileContent},
+    components: {DrawerOverlay, UserInput, FileContent},
     data() {
         return {
             loadIng: 0,
@@ -306,7 +288,6 @@ export default {
 
             editShow: false,
             editShowNum: 0,
-            editHeight: 0,
             editInfo: {},
 
             uploadDir: false,
@@ -326,7 +307,6 @@ export default {
 
     mounted() {
         this.tableHeight = window.innerHeight - 160;
-        this.editHeight = window.innerHeight - 40;
     },
 
     activated() {
@@ -650,7 +630,6 @@ export default {
                 this.searchKey = '';
                 this.pid = item.id;
             } else {
-                this.editHeight = window.innerHeight - 40;
                 this.editInfo = item;
                 this.editShow = true;
             }
diff --git a/resources/assets/sass/components/_.scss b/resources/assets/sass/components/_.scss
index b455fbd7..f80d19ad 100644
--- a/resources/assets/sass/components/_.scss
+++ b/resources/assets/sass/components/_.scss
@@ -1,5 +1,6 @@
 @import "auto-tip";
 @import "circle";
+@import "drawer-overlay";
 @import "img-update";
 @import "loading";
 @import "scroller-y";
diff --git a/resources/assets/sass/components/drawer-overlay.scss b/resources/assets/sass/components/drawer-overlay.scss
new file mode 100644
index 00000000..5c24c60d
--- /dev/null
+++ b/resources/assets/sass/components/drawer-overlay.scss
@@ -0,0 +1,111 @@
+.drawer-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    z-index: 1000;
+    box-sizing: border-box;
+    pointer-events: none;
+    background: rgba(0, 0, 0, 0.76);
+    outline: none;
+    opacity: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    .overlay-body {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+
+        .overlay-close {
+            flex-shrink: 0;
+            display: flex;
+            align-items: flex-end;
+            justify-content: flex-end;
+            > a {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 40px;
+                height: 40px;
+                color: #dbdbde;
+                &:hover {
+                    color: #fff
+                }
+                .icon {
+                    width: 24px;
+                    height: 24px
+                }
+            }
+        }
+
+        .overlay-content {
+            flex: 1;
+            position: relative;
+            background: #fff;
+            border-radius: 18px 18px 0 0;
+            transform: translate(0, 15%) scale(0.98);
+            cursor: default;
+            opacity: 0;
+        }
+    }
+
+    &.overlay-visible {
+        pointer-events: auto;
+        opacity: 1;
+        width: 100%;
+        height: 100%;
+        transition: opacity 0.2s ease;
+        .overlay-body {
+            .overlay-content {
+                opacity: 1;
+                transform: translate(0, 0) scale(1);
+                transition: opacity 0.2s ease, transform 0.3s ease;
+            }
+        }
+    }
+
+    &.overlay-hide {
+        transition: opacity 0.2s ease;
+        .overlay-body {
+            .overlay-content {
+                transform: translate(0, 15%) scale(0.98);
+                transition: opacity 0.2s ease, transform 0.2s ease
+            }
+        }
+    }
+
+    &.right {
+        flex-direction: row;
+        justify-content: flex-end;
+        .overlay-body {
+            flex-direction: row;
+            .overlay-close {
+                align-items: flex-start;
+            }
+            .overlay-content {
+                transform: translate(15%, 0) scale(0.98);
+                border-radius: 18px 0 0 18px;
+            }
+        }
+        &.overlay-visible {
+            .overlay-body {
+                .overlay-content {
+                    transform: translate(0, 0) scale(1);
+                }
+            }
+        }
+        &.overlay-hide {
+            .overlay-body {
+                .overlay-content {
+                    transform: translate(15%, 0) scale(0.98);
+                }
+            }
+        }
+    }
+}
diff --git a/resources/assets/sass/pages/common.scss b/resources/assets/sass/pages/common.scss
index ca69b3b3..cea945ba 100755
--- a/resources/assets/sass/pages/common.scss
+++ b/resources/assets/sass/pages/common.scss
@@ -297,12 +297,12 @@ body {
 }
 
 
-.page-box {
+.page-container {
     text-align: center;
     padding: 20px 0;
 }
 
-.search-box {
+.search-container {
     margin-bottom: 24px;
     > ul {
         display: flex;
diff --git a/resources/assets/sass/pages/components/_.scss b/resources/assets/sass/pages/components/_.scss
index a6cac89b..1950e62b 100755
--- a/resources/assets/sass/pages/components/_.scss
+++ b/resources/assets/sass/pages/components/_.scss
@@ -1,11 +1,13 @@
 @import "dialog-wrapper";
 @import "file-content";
+@import "project-archived";
 @import "project-dialog";
 @import "project-list";
 @import "project-log";
 @import "project-management";
 @import "task-add";
 @import "task-add-simple";
+@import "task-archived";
 @import "task-detail";
 @import "task-priority";
 @import "team-management";
diff --git a/resources/assets/sass/pages/components/project-archived.scss b/resources/assets/sass/pages/components/project-archived.scss
new file mode 100644
index 00000000..3c467f9c
--- /dev/null
+++ b/resources/assets/sass/pages/components/project-archived.scss
@@ -0,0 +1,16 @@
+.project-archived {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+    overflow: auto;
+    .archived-title {
+        color: #333333;
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 1;
+        margin-bottom: 24px;
+    }
+}
diff --git a/resources/assets/sass/pages/components/project-log.scss b/resources/assets/sass/pages/components/project-log.scss
index 14e127e6..38cc5c95 100644
--- a/resources/assets/sass/pages/components/project-log.scss
+++ b/resources/assets/sass/pages/components/project-log.scss
@@ -1,4 +1,18 @@
 .project-log {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+    overflow: auto;
+    .log-title {
+        color: #333333;
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 1;
+        margin-bottom: 24px;
+    }
     .logs-activity {
         position: relative;
         word-break: break-all;
diff --git a/resources/assets/sass/pages/components/project-management.scss b/resources/assets/sass/pages/components/project-management.scss
index 83592595..cc692d5c 100644
--- a/resources/assets/sass/pages/components/project-management.scss
+++ b/resources/assets/sass/pages/components/project-management.scss
@@ -1,4 +1,18 @@
 .project-management {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+    overflow: auto;
+    .management-title {
+        color: #333333;
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 1;
+        margin-bottom: 24px;
+    }
     .project-name {
         line-height: 1;
         .ivu-tag {
diff --git a/resources/assets/sass/pages/components/task-archived.scss b/resources/assets/sass/pages/components/task-archived.scss
new file mode 100644
index 00000000..658a1f52
--- /dev/null
+++ b/resources/assets/sass/pages/components/task-archived.scss
@@ -0,0 +1,16 @@
+.task-archived {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+    overflow: auto;
+    .archived-title {
+        color: #333333;
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 1;
+        margin-bottom: 24px;
+    }
+}
diff --git a/resources/assets/sass/pages/components/team-management.scss b/resources/assets/sass/pages/components/team-management.scss
index 532f9fc2..7b5d7429 100644
--- a/resources/assets/sass/pages/components/team-management.scss
+++ b/resources/assets/sass/pages/components/team-management.scss
@@ -1,4 +1,18 @@
 .team-management {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+    overflow: auto;
+    .management-title {
+        color: #333333;
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 1;
+        margin-bottom: 24px;
+    }
     .team-email {
         line-height: 1;
         .ivu-tag {
diff --git a/resources/assets/sass/pages/page-file.scss b/resources/assets/sass/pages/page-file.scss
index 476d3522..c7acb70c 100644
--- a/resources/assets/sass/pages/page-file.scss
+++ b/resources/assets/sass/pages/page-file.scss
@@ -526,77 +526,7 @@
 }
 
 .page-file-drawer {
-    .ivu-drawer-content {
+    .overlay-content {
         border-radius: 20px 20px 0 0 !important;
     }
 }
-
-.shot-overlay {
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    width: 0;
-    height: 0;
-    position: fixed;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    opacity: 0;
-    pointer-events: none;
-    background: rgba(0, 0, 0, 0.8);
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: auto;
-    cursor: pointer;
-    &.overlay-visible {
-        pointer-events: auto;
-        opacity: 1;
-        width: 100%;
-        height: 100%;
-        transition: opacity 0.2s ease;
-        .overlay-content {
-            opacity: 1;
-            transform: translateY(0) scale(1);
-            transition: opacity 0.2s ease, transform 0.3s ease;
-        }
-    }
-    &.overlay-hide {
-        transition: opacity 0.2s ease;
-        .overlay-content {
-            transform: translateY(15%) scale(0.98);
-            transition: opacity 0.2s ease, transform 0.2s ease
-        }
-    }
-    &:focus {
-        outline: none
-    }
-    .overlay-content {
-        position: relative;
-        background: #fff;
-        margin-top: 40px;
-        border-radius: 12px 12px 0 0;
-        height: calc(100vh - 40px);
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        opacity: 0;
-        transform: translateY(15%) scale(0.98);
-        cursor: default
-    }
-    .close-overlay {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 40px;
-        height: 40px;
-        color: #dbdbde;
-        z-index: 1;
-        &:hover {
-            color: #fff
-        }
-        .icon {
-            width: 24px;
-            height: 24px
-        }
-    }
-}