no message

resources/assets/js/components/DrawerOverlay/index.vue

@@ -5,7 +5,7 @@
         :closable="escClosable"
         :mask-closable="maskClosable"
         :footer-hide="true"
-        :transition-names="[`drawer-fade-${placement}`, '']"
+        :transition-names="[`drawer-slide-${placement}`, '']"
         :beforeClose="beforeClose"
         fullscreen
         :class-name="`common-drawer-overlay ${placement}`">

resources/assets/js/components/Mobile/Tabbar.vue

@@ -1,17 +1,22 @@
 <template>
-    <div class="mobile-tabbar" :class="{'more-show': isMore}" @click="toggleRoute('more')">
-        <div @click.stop="" class="more-box">
-            <div class="tabbar-more-title">{{$L('更多')}}</div>
-            <ul>
-                <li v-for="item in navMore" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
-                    <div class="more-item">
-                        <i class="taskfont" v-html="item.icon"></i>
-                        <div class="tabbar-title">{{$L(item.label)}}</div>
-                    </div>
-                </li>
-            </ul>
-        </div>
-        <ul @click.stop="">
+    <div class="mobile-tabbar">
+        <transition name="mobile-fade">
+            <div v-if="isMore" class="more-mask" @click="toggleRoute('more')"></div>
+        </transition>
+        <transition name="mobile-slide">
+            <div v-if="isMore" class="more-box">
+                <div class="tabbar-more-title">{{$L('更多')}}</div>
+                <ul v-for="list in navMore">
+                    <li v-for="item in list" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
+                        <div class="more-item">
+                            <i class="taskfont" v-html="item.icon"></i>
+                            <div class="tabbar-title">{{$L(item.label)}}</div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </transition>
+        <ul class="tabbar-box">
             <li v-for="item in navList" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
                 <i class="taskfont" v-html="item.icon"></i>
                 <div class="tabbar-title">{{$L(item.label)}}</div>
@@ -40,17 +45,23 @@ export default {
             isMore: false,
 
             navList: [
-                {icon: '&#xe736;', name: 'dashboard', label: '仪表盘'},
-                {icon: '&#xe732;', name: 'project', label: '项目'},
-                {icon: '&#xe71e;', name: 'dialog', label: '消息'},
+                {icon: '&#xe6fb;', name: 'dashboard', label: '仪表盘'},
+                {icon: '&#xe6fa;', name: 'project', label: '项目'},
+                {icon: '&#xe6eb;', name: 'dialog', label: '消息'},
                 {icon: '&#xe6b2;', name: 'contacts', label: '通讯录'},
                 {icon: '&#xe6e9;', name: 'more', label: '更多'},
             ],
             navMore: [
-                {icon: '&#xe6f5;', name: 'calendar', label: '日历'},
-                {icon: '&#xe6f3;', name: 'file', label: '文件'},
-                {icon: '&#xe67b;', name: 'setting', label: '设置'},
-            ]
+                [
+                    {icon: '&#xe6f5;', name: 'calendar', label: '日历'},
+                    {icon: '&#xe6f3;', name: 'file', label: '文件'},
+                    {icon: '&#xe67b;', name: 'setting', label: '设置'},
+                ],
+                [
+                    {icon: '&#xe7b8;', name: 'addTask', label: '添加任务'},
+                    {icon: '&#xe7b9;', name: 'addProject', label: '添加项目'},
+                ]
+            ],
         };
     },
 
@@ -123,12 +134,21 @@ export default {
 
     methods: {
         toggleRoute(path) {
+            this.$emit("on-click", path)
+            if (path != 'more') {
+                this.isMore = false
+            }
+            //
             let location;
             switch (path) {
                 case 'more':
                     this.isMore = !this.isMore;
                     return;
 
+                case 'addTask':
+                case 'addProject':
+                    return;
+
                 case 'project':
                     location = {name: 'manage-project', params: {projectId: 'all'}};
                     break;
@@ -145,7 +165,6 @@ export default {
                     location = {name: 'manage-' + path};
                     break;
             }
-            this.isMore = false;
             this.goForward(location);
         },
     },

resources/assets/js/pages/manage.vue

@@ -354,7 +354,7 @@
         </DragBallComponent>
 
         <!--移动端选项卡-->
-        <MobileTabbar v-if="showMobileTabbar"/>
+        <MobileTabbar v-if="showMobileTabbar" @on-click="onTabbarClick"/>
         <MobileBack :showTabbar="showMobileTabbar"/>
     </div>
 </template>
@@ -1017,6 +1017,17 @@ export default {
             });
         },
 
+        onTabbarClick(act) {
+            switch (act) {
+                case 'addTask':
+                    this.onAddTask(0)
+                    break;
+                case 'addProject':
+                    this.onAddShow()
+                    break;
+            }
+        },
+
         notificationInit() {
             this.notificationManage = new notificationKoro(this.$L("打开通知成功"));
             if (this.notificationManage.support) {

resources/assets/sass/components/drawer-overlay.scss

@@ -109,30 +109,30 @@
     }
 }
 
-.drawer-fade-bottom-enter-active {
+.drawer-slide-bottom-enter-active {
     transition: all .2s ease;
 }
 
-.drawer-fade-bottom-leave-active {
+.drawer-slide-bottom-leave-active {
     transition: all .2s ease;
 }
 
-.drawer-fade-bottom-enter,
-.drawer-fade-bottom-leave-to {
+.drawer-slide-bottom-enter,
+.drawer-slide-bottom-leave-to {
     transform: translate(0, 15%) scale(0.98);
     opacity: 0;
 }
 
-.drawer-fade-right-enter-active {
+.drawer-slide-right-enter-active {
     transition: all .2s ease;
 }
 
-.drawer-fade-right-leave-active {
+.drawer-slide-right-leave-active {
     transition: all .2s ease;
 }
 
-.drawer-fade-right-enter,
-.drawer-fade-right-leave-to {
+.drawer-slide-right-enter,
+.drawer-slide-right-leave-to {
     transform: translate(15%, 0) scale(0.98);
     opacity: 0;
 }

resources/assets/sass/components/mobile.scss

@@ -8,7 +8,9 @@
     right: 0;
     z-index: 99;
 
-    > ul {
+    .tabbar-box {
+        position: relative;
+        z-index: 3;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -16,7 +18,7 @@
         margin: 0;
         height: 60px;
         background-color: #f8f8f8;
-        box-shadow: 0 0 2px rgba(28, 34, 43, 0.15);
+        box-shadow: 0 0 1px rgba(28, 34, 43, 0.15);
 
         > li {
             flex: 1;
@@ -58,27 +60,40 @@
         }
     }
 
+    .more-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        background-color: rgba(0, 0, 0, 0.15);
+    }
+
     .more-box {
-        display: none;
+        position: relative;
+        z-index: 2;
+        display: block;
         margin-bottom: -2px;
         border-radius: 16px 16px 0 0;
-        background-color: rgba(250, 250, 250, 0.98);
+        padding-bottom: 16px;
+        background-color: #ffffff;
         border-top: 1px solid #f1f1f1;
 
         .tabbar-more-title {
             font-size: 18px;
             font-weight: 500;
-            padding: 14px 14px 0;
+            padding: 16px 16px 36px;
         }
 
         > ul {
-            padding: 36px 12px 16px;
+            padding: 0 12px;
 
             > li {
                 list-style: none;
                 display: inline-block;
                 width: 25%;
-                margin-bottom: 20px;
+                margin-bottom: 28px;
 
                 .more-item {
                     display: flex;
@@ -92,9 +107,9 @@
                         justify-content: center;
                         width: 56px;
                         height: 56px;
-                        font-size: 26px;
-                        color: #0bc037;
-                        background-color: #f1f1f1;
+                        font-size: 25px;
+                        color: $primary-color;
+                        background-color: rgba($primary-color, 0.08);
                         border-radius: 12px;
                     }
 
@@ -109,19 +124,6 @@
             }
         }
     }
-
-    &.more-show {
-        top: 0;
-        background-color: rgba(0, 0, 0, 0.15);
-
-        > ul {
-            box-shadow: 0 0 1px rgba(28, 34, 43, 0.15);
-        }
-
-        .more-box {
-            display: block;
-        }
-    }
 }
 
 .mobile-back {
@@ -142,6 +144,33 @@
     }
 }
 
+.mobile-fade-enter-active {
+    transition: all 0.2s ease;
+}
+
+.mobile-fade-leave-active {
+    transition: all 0.2s ease;
+}
+
+.mobile-fade-enter,
+.mobile-fade-leave-to {
+    opacity: 0;
+}
+
+.mobile-slide-enter-active {
+    transition: all 0.2s ease;
+}
+
+.mobile-slide-leave-active {
+    transition: all 0.2s ease;
+}
+
+.mobile-slide-enter,
+.mobile-slide-leave-to {
+    transform: translate(0, 15%) scale(0.98);
+    opacity: 0;
+}
+
 @media (max-width: 640px) {
     .mobile-tabbar {
         display: flex;

resources/assets/sass/taskfont.scss

@@ -10,6 +10,5 @@
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke-width: 0.2px;
     -moz-osx-font-smoothing: grayscale;
 }