perf: 优化移动端任务窗口布局

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -56,7 +56,8 @@
     <!--主任务-->
     <div
         v-else-if="ready"
-        :class="{'task-detail':true, 'open-dialog': hasOpenDialog, 'completed': taskDetail.complete_at}"
+        class="task-detail"
+        :class="taskDetailClass"
         :style="taskDetailStyle">
         <div v-show="taskDetail.id > 0" class="task-info">
             <div class="head">
@@ -832,6 +833,14 @@ export default {
             }
         },
 
+        taskDetailClass() {
+            const {taskDetail, hasOpenDialog} = this;
+            return {
+                'open-dialog': hasOpenDialog,
+                'completed': taskDetail.complete_at
+            }
+        },
+
         taskDetailStyle() {
             const {modalMode, windowHeight, hasOpenDialog} = this;
             const height = Math.min(1100, windowHeight)

resources/assets/js/pages/manage/components/TaskModal.vue

@@ -5,25 +5,13 @@
         :styles="styles"
         :mask-closable="false"
         :footer-hide="true"
+        :fullscreen="windowPortrait"
         :beforeClose="onBeforeClose"
-        class-name="task-modal">
+        class-name="common-task-modal">
         <TaskDetail ref="taskDetail" :task-id="taskId" :open-task="taskData" modalMode/>
     </Modal>
 </template>
 
-<style lang="scss">
-body {
-    .ivu-modal-wrap {
-        &.task-modal {
-            display: flex;
-            flex-direction: column;
-            .ivu-modal-close {
-                z-index: 2;
-            }
-        }
-    }
-}
-</style>
 <script>
 import {mapGetters, mapState} from "vuex";
 import TaskDetail from "./TaskDetail";

resources/assets/sass/pages/components/task-detail.scss

@@ -1,3 +1,55 @@
+.common-task-modal {
+    display: flex;
+    flex-direction: column;
+
+    .ivu-modal {
+        .ivu-modal-content {
+            .ivu-modal-close {
+                z-index: 2;
+            }
+        }
+
+        &.ivu-modal-fullscreen {
+            .ivu-modal-content {
+                margin-top: calc(var(--status-bar-height) + 46px);
+                margin-bottom: 0;
+                border-top-left-radius: 18px !important;
+                border-top-right-radius: 18px !important;
+                overflow: hidden;
+
+                .ivu-modal-body {
+                    padding: 0;
+
+                    .task-detail {
+                        position: absolute;
+                        inset: 0;
+                        margin: 0;
+                        padding: 0 20px 0 15px;
+                        overflow: auto;
+                        -webkit-overflow-scrolling: touch;
+
+                        .task-info {
+                            .head {
+                                position: sticky;
+                                top: 0;
+                                z-index: 1;
+                                background-color: #fff;
+                                padding-top: 14px;
+                                padding-right: 4px;
+                                height: 58px;
+                            }
+                        }
+
+                        .task-dialog {
+                            padding-bottom: calc(var(--navigation-bar-height) + 20px);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .task-detail {
     display: flex;
     flex-direction: column;
@@ -594,7 +646,7 @@
             display: flex;
             align-items: center;
             height: 42px;
-            margin-left: 5px;
+            margin: 0 5px;
             padding-bottom: 10px;
             color: #888888;
             position: relative;