fix(app): 修复日报及任务页面打包后间距丢失问题

- 使用 margin 替代 App 端兼容性不佳的 gap
- 修复列表、卡片、搜索栏及操作按钮间距
- 修复搜索框与新增任务按钮间距被覆盖的问题

pages/ruiDuReport/daily-detail.vue

@@ -858,8 +858,8 @@ onUnmounted(() => timers.forEach((timer) => clearTimeout(timer)));
   font-size: 24rpx;
   color: #8a96a8;
 }
-.search-row {
-  gap: 16rpx;
+.search-row > * + * {
+  margin-left: 16rpx;
 }
 .search-btn {
   flex: 0 0 auto;
@@ -1044,7 +1044,9 @@ onUnmounted(() => timers.forEach((timer) => clearTimeout(timer)));
 .report-list {
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+}
+.report-list > .report-card + .report-card {
+  margin-top: 20rpx;
 }
 .report-card {
   padding: 24rpx;
@@ -1056,10 +1058,12 @@ onUnmounted(() => timers.forEach((timer) => clearTimeout(timer)));
 .card-head {
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16rpx;
   padding-bottom: 20rpx;
   border-bottom: 1rpx solid #edf0f4;
 }
+.card-head > * + * {
+  margin-left: 16rpx;
+}
 .card-heading {
   min-width: 0;
   flex: 1;
@@ -1128,9 +1132,11 @@ onUnmounted(() => timers.forEach((timer) => clearTimeout(timer)));
 }
 .card-actions {
   justify-content: flex-end;
-  gap: 16rpx;
   margin-top: 12rpx;
 }
+.card-actions > .action-btn + .action-btn {
+  margin-left: 16rpx;
+}
 .action-btn {
   min-width: 150rpx;
   margin: 0;
@@ -1162,7 +1168,9 @@ onUnmounted(() => timers.forEach((timer) => clearTimeout(timer)));
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16rpx;
+}
+.empty-page > * + * {
+  margin-top: 16rpx;
 }
 .filter-popup {
   height: 86vh;
@@ -1228,11 +1236,13 @@ onUnmounted(() => timers.forEach((timer) => clearTimeout(timer)));
 }
 .filter-footer {
   display: flex;
-  gap: 10px;
   padding: 10px 16px 14px;
   border-top: 1px solid #f0f0f0;
   box-sizing: border-box;
 }
+.filter-footer > .filter-button + .filter-button {
+  margin-left: 10px;
+}
 .filter-button {
   flex: 1;
   height: 38px;

pages/ruiHengReport/index.vue

@@ -351,13 +351,15 @@ onMounted(() => {
 .filter-bar {
   display: flex;
   align-items: center;
-  gap: 10px;
   padding: 14px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.94);
   box-shadow: 0 14px 32px rgba(25, 56, 104, 0.08);
   backdrop-filter: blur(10px);
 }
+.filter-bar > * + * {
+  margin-left: 10px;
+}
 
 .filter-main {
   flex: 1;
@@ -365,7 +367,9 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10rpx;
+}
+.filter-main > * + * {
+  margin-left: 10rpx;
 }
 
 .filter-label {
@@ -407,9 +411,11 @@ onMounted(() => {
 .report-list {
   display: flex;
   flex-direction: column;
-  gap: 14px;
   padding-bottom: 18px;
 }
+.report-list > .report-card + .report-card {
+  margin-top: 14px;
+}
 
 .report-card {
   padding: 16px;
@@ -423,9 +429,11 @@ onMounted(() => {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
   margin-bottom: 14px;
 }
+.card-header > * + * {
+  margin-left: 12px;
+}
 
 .dept-name {
   color: #122033;
@@ -454,11 +462,16 @@ onMounted(() => {
 
 .metrics-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
   margin-bottom: 14px;
   margin-top: 14px;
 }
+.metrics-grid > *:nth-child(even) {
+  margin-left: 10px;
+}
+.metrics-grid > *:nth-child(n + 3) {
+  margin-top: 10px;
+}
 
 .metric-item {
   padding: 12px;
@@ -482,18 +495,25 @@ onMounted(() => {
 
 .summary-panel {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px 14px;
+  grid-template-columns: calc(50% - 7px) calc(50% - 7px);
   padding: 14px 0;
   // border-top: 1px solid #edf2f7;
   border-bottom: 1px solid #edf2f7;
 }
+.summary-panel > *:nth-child(even) {
+  margin-left: 14px;
+}
+.summary-panel > *:nth-child(n + 3) {
+  margin-top: 8px;
+}
 
 .summary-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+}
+.summary-row > * + * {
+  margin-left: 10px;
 }
 
 .summary-label {
@@ -558,7 +578,9 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+}
+.team-drawer__header > * + * {
+  margin-left: 12px;
 }
 
 .team-drawer__title {
@@ -591,9 +613,11 @@ onMounted(() => {
 .team-detail-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
   padding-bottom: 10px;
 }
+.team-detail-list > .team-detail-card + .team-detail-card {
+  margin-top: 12px;
+}
 
 .team-detail-card {
   padding: 14px;
@@ -611,8 +635,13 @@ onMounted(() => {
 
 .team-detail-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
+}
+.team-detail-grid > *:nth-child(even) {
+  margin-left: 10px;
+}
+.team-detail-grid > *:nth-child(n + 3) {
+  margin-top: 10px;
 }
 
 .team-detail-item {

pages/ruihen-task/index.vue

@@ -186,10 +186,6 @@ onShow(() => {
   padding: 10px 0;
 }
 
-.top > * + * {
-  margin-top: 12px;
-}
-
 .search-row {
   display: flex;
   align-items: center;
@@ -206,7 +202,7 @@ onShow(() => {
 }
 
 .create-btn {
-  margin: 0;
+  margin: 12px 0 0;
   align-self: flex-start;
 }
 

pages/ruihen/index.vue

@@ -176,7 +176,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 20px;
+  }
+
+  .top > * + * {
+    margin-left: 20px;
   }
 
   :deep(.mini-btn) {
@@ -188,7 +191,10 @@
     margin-top: 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+
+    > .item + .item {
+      margin-top: 12px;
+    }
 
     .item {
       background-color: #fff;
@@ -196,7 +202,11 @@
       border-radius: 8px;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+
+      > * + * {
+        margin-top: 10px;
+      }
+
       .header {
         display: flex;
         align-items: center;
@@ -230,7 +240,10 @@
       .content {
         display: flex;
         flex-direction: column;
-        gap: 6px;
+
+        > .content-item + .content-item {
+          margin-top: 6px;
+        }
 
         .content-item {
           font-size: 14px;
@@ -285,12 +298,15 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        gap: 0 12px;
         height: 32px;
 
         .button {
           margin: 0;
         }
+
+        > .button + .button {
+          margin-left: 12px;
+        }
       }
     }
   }

pages/ruiying/index.vue

@@ -176,7 +176,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 20px;
+  }
+
+  .top > * + * {
+    margin-left: 20px;
   }
 
   :deep(.mini-btn) {
@@ -188,7 +191,10 @@
     margin-top: 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+
+    > .item + .item {
+      margin-top: 12px;
+    }
 
     .item {
       background-color: #fff;
@@ -196,7 +202,11 @@
       border-radius: 8px;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+
+      > * + * {
+        margin-top: 10px;
+      }
+
       .header {
         display: flex;
         align-items: center;
@@ -230,7 +240,10 @@
       .content {
         display: flex;
         flex-direction: column;
-        gap: 6px;
+
+        > .content-item + .content-item {
+          margin-top: 6px;
+        }
 
         .content-item {
           display: flex;
@@ -292,12 +305,15 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        gap: 0 12px;
         height: 32px;
 
         .button {
           margin: 0;
         }
+
+        > .button + .button {
+          margin-left: 12px;
+        }
       }
     }
   }

pages/ruiyingx/index.vue

@@ -177,7 +177,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 20px;
+  }
+
+  .top > * + * {
+    margin-left: 20px;
   }
 
   :deep(.mini-btn) {
@@ -189,7 +192,10 @@
     margin-top: 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+
+    > .item + .item {
+      margin-top: 12px;
+    }
 
     .item {
       background-color: #fff;
@@ -197,7 +203,11 @@
       border-radius: 8px;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+
+      > * + * {
+        margin-top: 10px;
+      }
+
       .header {
         display: flex;
         align-items: center;
@@ -231,7 +241,10 @@
       .content {
         display: flex;
         flex-direction: column;
-        gap: 6px;
+
+        > .content-item + .content-item {
+          margin-top: 6px;
+        }
 
         .content-item {
           display: flex;
@@ -293,12 +306,15 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        gap: 0 12px;
         height: 32px;
 
         .button {
           margin: 0;
         }
+
+        > .button + .button {
+          margin-left: 12px;
+        }
       }
     }
   }