diff --git a/resources/assets/js/functions/web.js b/resources/assets/js/functions/web.js
index 46140abcc..aa37a4cbc 100755
--- a/resources/assets/js/functions/web.js
+++ b/resources/assets/js/functions/web.js
@@ -66,6 +66,8 @@
             return {
                 project_id,
                 card: true,
+                menu: false,
+                gantt: false,
                 cardInit: false,
                 chat: false,
                 showMy: true,
diff --git a/resources/assets/js/pages/manage/components/GanttView.vue b/resources/assets/js/pages/manage/components/GanttView.vue
index eafac13af..15aa01917 100644
--- a/resources/assets/js/pages/manage/components/GanttView.vue
+++ b/resources/assets/js/pages/manage/components/GanttView.vue
@@ -291,6 +291,7 @@ export default {
                 type: type,
                 clientX: e.clientX,
                 value: item[type],
+                time: item.time,
             };
             this.mouseItem = item;
             this.dateMove = null;
@@ -299,7 +300,14 @@ export default {
             if (this.mouseItem != null) {
                 e.preventDefault();
                 var diff = e.clientX - this.mouseBak.clientX;
-                if (diff < 0 && this.mouseItem.time.start > this.mouseItem.time.end) {
+                const {start, end} = this.mouseBak.time;
+                let date = new Date();
+                let nowTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTime();
+                let diffStartDay = (start - nowTime) / 1000 / 60 / 60 / 24;
+                let diffEndDay = (end - nowTime) / 1000 / 60 / 60 / 24;
+                let width = this.dateWidth * (diffEndDay - diffStartDay);
+                width += this.mouseBak.value + diff;
+                if (width <= 0) {
                     return false;
                 }
                 this.$set(this.mouseItem, this.mouseBak.type, this.mouseBak.value + diff);
diff --git a/resources/assets/js/pages/manage/components/ProjectGantt.vue b/resources/assets/js/pages/manage/components/ProjectGantt.vue
index 6d96d5406..2c8e6b977 100644
--- a/resources/assets/js/pages/manage/components/ProjectGantt.vue
+++ b/resources/assets/js/pages/manage/components/ProjectGantt.vue
@@ -14,7 +14,6 @@
                 </DropdownItem>
             </DropdownMenu>
         </Dropdown>
-        <div class="project-gstc-close" @click="$emit('on-close')"><Icon type="md-close" /></div>
         <div class="project-gstc-edit" :class="{info:editShowInfo, visible:editData&&editData.length > 0}">
             <div class="project-gstc-edit-info">
                 <Table size="small" max-height="600" :columns="editColumns" :data="editData"></Table>
diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index 3cbd6f020..c9a4fcfd1 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -81,10 +81,10 @@
                             <span :class="`project-flow ${flowInfo.status}`">{{ flowTitle }}</span>
                         </Cascader>
                     </div>
-                    <div :class="['project-switch-button', !projectParameter('card') ? 'menu' : '']" @click="$store.dispatch('toggleProjectParameter', 'card')">
-                        <div><i class="taskfont">&#xe60c;</i></div>
-                        <div><i class="taskfont">&#xe66a;</i></div>
-                        <div  @click="projectGanttShow=!projectGanttShow"><i class="taskfont">&#xe797;</i></div>
+                    <div class="project-switch-button">
+                        <div @click="tabTypeChange('card')" :class="{ 'active': projectParameter('card')}"><i class="taskfont">&#xe60c;</i></div>
+                        <div @click="tabTypeChange('menu')" :class="{ 'active': projectParameter('menu')}"><i class="taskfont">&#xe66a;</i></div>
+                        <div @click="tabTypeChange('gantt')" :class="{ 'active': projectParameter('gantt')}"><i class="taskfont">&#xe797;</i></div>
                     </div>
                 </div>
             </div>
@@ -225,7 +225,7 @@
                 </li>
             </Draggable>
         </div>
-        <div v-else class="project-table overlay-y">
+        <div v-if="projectParameter('menu')" class="project-table overlay-y">
             <div class="project-table-head">
                 <Row class="task-row">
                     <Col span="12"># {{$L('任务名称')}}</Col>
@@ -312,15 +312,13 @@
                 <TaskRow v-if="projectParameter('showCompleted')" :list="completedList" open-key="completed" @on-priority="addTaskOpen" showCompleteAt/>
             </div>
         </div>
-      <div class="project-table overlay-y" v-if="projectGanttShow">
-        <!-- 甘特图 -->
-        <ProjectGantt v-if="projectGanttShow"
-                       @on-close="projectGanttShow=false"
-                       :lineData="columnList[0].tasks"
-                       :projectLabel="columnList"
-                       :lineTaskData="columnList[0].tasks"
-                       :levelList="taskPriority"></ProjectGantt>
-      </div>
+        <div v-if="projectParameter('gantt')" class="project-table overlay-y" style="position: relative">
+            <!-- 甘特图 -->
+            <ProjectGantt :lineData="ganttColumnList[0].tasks"
+                          :projectLabel="ganttColumnList"
+                          :lineTaskData="ganttColumnList[0].tasks"
+                          :levelList="taskPriority"></ProjectGantt>
+        </div>
         <!--项目设置-->
         <Modal
             v-model="settingShow"
@@ -527,7 +525,6 @@ export default {
 
             flowInfo: {},
             flowList: [],
-            projectGanttShow: false,
         }
     },
 
@@ -665,6 +662,26 @@ export default {
             return list;
         },
 
+        ganttColumnList() {
+            const {projectId, cacheColumns} = this;
+            return cacheColumns.filter((row) => {
+                row.tasks = row.tasks.filter(task => {
+                    return task.column_id == row.id && !task.complete_at;
+                }).sort((a, b) => {
+                    if (a.sort != b.sort) {
+                        return a.sort - b.sort;
+                    }
+                    return a.id - b.id;
+                });
+                return row.project_id == projectId && row.tasks.length > 0;
+            }).sort((a, b) => {
+                if (a.sort != b.sort) {
+                    return a.sort - b.sort;
+                }
+                return a.id - b.id;
+            });
+        },
+
         myList() {
             const {allTask, taskCompleteTemps, sortField, sortType} = this;
             let array = allTask.filter(task => this.myFilter(task));
@@ -1380,6 +1397,38 @@ export default {
         expiresFormat(date) {
             return $A.countDownFormat(date, this.nowTime)
         },
+
+        tabTypeChange(type) {
+            switch (type) {
+                case "card":
+                    this.$store.dispatch('toggleProjectParameter', 'card');
+                    if (this.projectParameter('card')) {
+                        this.projectParameter('menu') ? this.$store.dispatch('toggleProjectParameter', 'menu') : '';
+                        this.projectParameter('gantt') ? this.$store.dispatch('toggleProjectParameter', 'gantt') : '';
+                    } else {
+                        this.$store.dispatch('toggleProjectParameter', 'card');
+                    }
+                    break;
+                case "menu":
+                    this.$store.dispatch('toggleProjectParameter', 'menu');
+                    if (this.projectParameter('menu')) {
+                        this.projectParameter('card') ? this.$store.dispatch('toggleProjectParameter', 'card') : '';
+                        this.projectParameter('gantt') ? this.$store.dispatch('toggleProjectParameter', 'gantt') : '';
+                    } else {
+                        this.$store.dispatch('toggleProjectParameter', 'menu');
+                    }
+                    break;
+                case "gantt":
+                    this.$store.dispatch('toggleProjectParameter', 'gantt');
+                    if (this.projectParameter('gantt')) {
+                        this.projectParameter('menu') ? this.$store.dispatch('toggleProjectParameter', 'menu') : '';
+                        this.projectParameter('card') ? this.$store.dispatch('toggleProjectParameter', 'card') : '';
+                    } else {
+                        this.$store.dispatch('toggleProjectParameter', 'gantt');
+                    }
+                    break;
+            }
+        },
     }
 }
 </script>
diff --git a/resources/assets/sass/pages/components/project-list.scss b/resources/assets/sass/pages/components/project-list.scss
index 6b793565d..e0fc2cec6 100644
--- a/resources/assets/sass/pages/components/project-list.scss
+++ b/resources/assets/sass/pages/components/project-list.scss
@@ -194,6 +194,13 @@
                     height: 30px;
                     position: relative;
                     transition: box-shadow 0.2s;
+                    .active {
+                        color: $primary-color;
+                        border-radius: 6px;
+                        border: 1px solid $primary-color;
+                        background-color: rgba($primary-color, 0.1);
+                        transition: left 0.2s;
+                    }
                     &:hover {
                         box-shadow: 0 0 10px #e6ecfa;
                     }
@@ -205,11 +212,6 @@
                         width: 33.3%;
                         height: 100%;
                         z-index: 0;
-                        color: $primary-color;
-                        border-radius: 6px;
-                        border: 1px solid $primary-color;
-                        background-color: rgba($primary-color, 0.1);
-                        transition: left 0.2s;
                     }
                     > div {
                         z-index: 1;
@@ -224,20 +226,6 @@
                         > i {
                             font-size: 17px;
                         }
-                        &:first-child {
-                            color: $primary-color;
-                        }
-                    }
-                    &.menu {
-                        &:before {
-                            left: 33.3%;
-                        }
-                        > div:first-child {
-                            color: $primary-text-color;
-                        }
-                        > div:last-child {
-                            color: $primary-color;
-                        }
                     }
                 }