diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index c3fd7ae9..2323b7a4 100755
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -151,11 +151,7 @@
     }
 </script>
 
-<style>
-    body { overflow-x: hidden; }
-</style>
-<!--suppress CssUnusedSymbol -->
-<style scoped>
+<style lang="scss" scoped>
     .child-view {
         position: absolute;
         width: 100%;
diff --git a/resources/assets/js/pages/manage/components/ProjectDialog.vue b/resources/assets/js/pages/manage/components/ProjectDialog.vue
index 3b2e83e8..c126c749 100644
--- a/resources/assets/js/pages/manage/components/ProjectDialog.vue
+++ b/resources/assets/js/pages/manage/components/ProjectDialog.vue
@@ -21,62 +21,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.project-dialog {
-    display: flex;
-    flex-direction: column;
-    background-color: #ffffff;
-    border-left: 1px solid #f4f5f5;
-    z-index: 1;
-    position: relative;
-    .project-dialog-wrapper {
-        .dialog-user {
-            margin-top: 36px;
-            padding: 0 32px;
-            .member-head {
-                display: flex;
-                align-items: center;
-                .member-title {
-                    flex: 1;
-                    font-size: 18px;
-                    font-weight: 600;
-                    > span {
-                        padding-left: 6px;
-                        color: #2d8cf0;
-                    }
-                }
-                .member-view-all {
-                    color: #999;
-                    font-size: 13px;
-                    cursor: pointer;
-                    &:hover {
-                        color: #777;
-                    }
-                }
-            }
-            .member-list {
-                display: flex;
-                align-items: center;
-                margin-top: 14px;
-                overflow: auto;
-                > li {
-                    position: relative;
-                    list-style: none;
-                    margin-right: 14px;
-                    margin-bottom: 8px;
-                }
-                &.member-all {
-                    display: block;
-                    > li {
-                        display: inline-block;
-                    }
-                }
-            }
-        }
-    }
-}
-</style>
-
 <script>
 import {mapState} from "vuex";
 import DialogWrapper from "./DialogWrapper";
diff --git a/resources/assets/sass/pages/_.scss b/resources/assets/sass/pages/_.scss
index 7ad619d3..dc145d5d 100755
--- a/resources/assets/sass/pages/_.scss
+++ b/resources/assets/sass/pages/_.scss
@@ -1,10 +1,10 @@
-@import "common.scss";
-@import "page-calendar.scss";
-@import "page-dashboard.scss";
-@import "page-login.scss";
-@import "page-manage.scss";
-@import "page-messenger.scss";
-@import "page-project.scss";
-@import "page-setting.scss";
+@import "common";
+@import "page-calendar";
+@import "page-dashboard";
+@import "page-login";
+@import "page-manage";
+@import "page-messenger";
+@import "page-project";
+@import "page-setting";
 
 @import "components/_";
diff --git a/resources/assets/sass/pages/common.scss b/resources/assets/sass/pages/common.scss
index 7072888c..6a26bd7d 100755
--- a/resources/assets/sass/pages/common.scss
+++ b/resources/assets/sass/pages/common.scss
@@ -6,6 +6,37 @@ body {
     }
 }
 
+.child-view {
+    position: absolute;
+    width: 100%;
+    min-height: 100%;
+    transition: all .3s cubic-bezier(.55, 0, .1, 1);
+}
+.app-slide-no-leave-to {display: none;}
+/**
+ * 左右模式
+ */
+.app-slide-left-leave-active{z-index:1;transform:translate(0,0)}
+.app-slide-left-leave-to{z-index:1;transform:translate(0,0)}
+.app-slide-left-enter-active{opacity:0;z-index:2;transform:translate(30%,0)}
+.app-slide-left-enter-to{opacity:1;z-index:2;transform:translate(0,0)}
+.app-slide-right-leave-active{opacity:1;z-index:2;transform:translate(0,0)}
+.app-slide-right-leave-to{opacity:0;z-index:2;transform:translate(30%,0)}
+.app-slide-right-enter-active{z-index:1;transform:translate(0,0)}
+.app-slide-right-enter{z-index:1;transform:translate(0,0)}
+
+/**
+ * 上下模式
+ */
+.app-slide-up-leave-active{z-index:1;transform:translate(0,0)}
+.app-slide-up-leave-to{z-index:1;transform:translate(0,0)}
+.app-slide-up-enter-active{opacity:0;z-index:2;transform:translate(0,20%)}
+.app-slide-up-enter-to{opacity:1;z-index:2;transform:translate(0,0)}
+.app-slide-down-leave-active{opacity:1;z-index:2;transform:translate(0,0)}
+.app-slide-down-leave-to{opacity:0;z-index:2;transform:translate(0,20%)}
+.app-slide-down-enter-active{z-index:1;transform:translate(0,0)}
+.app-slide-down-enter{z-index:1;transform:translate(0,0)}
+
 *[hidden="hidden"] {
     display: none !important;
 }
diff --git a/resources/assets/sass/pages/components/_.scss b/resources/assets/sass/pages/components/_.scss
index 81a05159..378b067e 100755
--- a/resources/assets/sass/pages/components/_.scss
+++ b/resources/assets/sass/pages/components/_.scss
@@ -1,5 +1,6 @@
-@import "dialog-wrapper.scss";
-@import "project-list.scss";
-@import "task-add.scss";
-@import "task-add-simple.scss";
-@import "task-priority.scss";
+@import "dialog-wrapper";
+@import "project-dialog";
+@import "project-list";
+@import "task-add";
+@import "task-add-simple";
+@import "task-priority";
diff --git a/resources/assets/sass/pages/components/project-dialog.scss b/resources/assets/sass/pages/components/project-dialog.scss
new file mode 100644
index 00000000..f7c92d60
--- /dev/null
+++ b/resources/assets/sass/pages/components/project-dialog.scss
@@ -0,0 +1,53 @@
+.project-dialog {
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    border-left: 1px solid #f4f5f5;
+    z-index: 1;
+    position: relative;
+    .project-dialog-wrapper {
+        .dialog-user {
+            margin-top: 36px;
+            padding: 0 32px;
+            .member-head {
+                display: flex;
+                align-items: center;
+                .member-title {
+                    flex: 1;
+                    font-size: 18px;
+                    font-weight: 600;
+                    > span {
+                        padding-left: 6px;
+                        color: #2d8cf0;
+                    }
+                }
+                .member-view-all {
+                    color: #999;
+                    font-size: 13px;
+                    cursor: pointer;
+                    &:hover {
+                        color: #777;
+                    }
+                }
+            }
+            .member-list {
+                display: flex;
+                align-items: center;
+                margin-top: 14px;
+                overflow: auto;
+                > li {
+                    position: relative;
+                    list-style: none;
+                    margin-right: 14px;
+                    margin-bottom: 8px;
+                }
+                &.member-all {
+                    display: block;
+                    > li {
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+    }
+}