Merge branch 'master' of http://git.fmode.cn:3000/nkkj/yss-project

src/modules/project/pages/project-detail/stages/stage-order.component.scss

@@ -1959,47 +1959,99 @@
   }
 
   // 操作按钮 - 横排布局
-  // 操作按钮
-  .action-buttons {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
-    padding: 16px 0;
-    margin-top: 20px;
+  .action-buttons-horizontal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    padding: 24px 16px;
+    margin-top: 24px;
+    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+    border-radius: 12px;
+    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
 
     .btn {
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 8px;
-      padding: 12px 24px;
-      border-radius: 8px;
-      font-size: 14px;
+      gap: 10px;
+      padding: 14px 28px;
+      border-radius: 10px;
+      font-size: 15px;
       font-weight: 600;
       cursor: pointer;
-      transition: all 0.3s;
+      transition: all 0.3s ease;
       border: none;
       outline: none;
-      height: 48px;
+      min-height: 50px;
+      flex: 1;
+      max-width: 200px;
+      position: relative;
+      overflow: hidden;
 
       .icon {
         width: 20px;
         height: 20px;
         flex-shrink: 0;
+        transition: transform 0.3s ease;
+      }
+
+      // 按钮涟漪效果
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.3);
+        transform: translate(-50%, -50%);
+        transition: width 0.6s, height 0.6s;
+      }
+
+      &:active::before {
+        width: 300px;
+        height: 300px;
       }
 
       &.btn-primary {
-        background: var(--primary-color);
+        background: linear-gradient(135deg, var(--primary-color) 0%, #2f6ce5 100%);
         color: white;
+        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
 
-        &:hover {
-          background: #2f6ce5;
-          transform: translateY(-2px);
-          box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+        &:hover:not(:disabled) {
+          background: linear-gradient(135deg, #2f6ce5 0%, #1e5fd9 100%);
+          transform: translateY(-3px);
+          box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
+
+          .icon {
+            transform: scale(1.1);
+          }
         }
 
-        &:active {
-          transform: translateY(0);
+        &:active:not(:disabled) {
+          transform: translateY(-1px);
+        }
+      }
+
+      &.btn-secondary {
+        background: linear-gradient(135deg, var(--secondary-color) 0%, #0ab3c9 100%);
+        color: white;
+        box-shadow: 0 4px 16px rgba(12, 209, 232, 0.25);
+
+        &:hover:not(:disabled) {
+          background: linear-gradient(135deg, #0ab3c9 0%, #0899ae 100%);
+          transform: translateY(-3px);
+          box-shadow: 0 6px 20px rgba(12, 209, 232, 0.4);
+
+          .icon {
+            transform: scale(1.1);
+          }
+        }
+
+        &:active:not(:disabled) {
+          transform: translateY(-1px);
         }
       }
 
@@ -2007,14 +2059,21 @@
         background: white;
         color: var(--primary-color);
         border: 2px solid var(--primary-color);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
-        &:hover {
+        &:hover:not(:disabled) {
           background: var(--primary-color);
           color: white;
+          transform: translateY(-3px);
+          box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3);
+
+          .icon {
+            transform: scale(1.1);
+          }
         }
 
-        &:active {
-          transform: scale(0.98);
+        &:active:not(:disabled) {
+          transform: translateY(-1px);
         }
       }
 
@@ -2022,6 +2081,7 @@
         opacity: 0.5;
         cursor: not-allowed;
         pointer-events: none;
+        box-shadow: none;
       }
     }
   }
@@ -2360,14 +2420,14 @@
 // 平板和大屏手机优化 (481px - 768px)
 @media (max-width: 768px) and (min-width: 481px) {
   .stage-order-container {
-    .action-buttons {
-      gap: 10px;
-      padding: 12px 0;
+    .action-buttons-horizontal {
+      gap: 12px;
+      padding: 20px 14px;
 
       .btn {
-        padding: 10px 16px;
-        font-size: 13px;
-        height: 44px;
+        padding: 13px 20px;
+        font-size: 14px;
+        min-height: 50px;
 
         .icon {
           width: 18px;
@@ -2499,14 +2559,22 @@
       }
     }
 
-    .action-buttons {
+    .action-buttons-horizontal {
+      // 移动端也保持横排显示
+      flex-direction: row;
       gap: 8px;
-      padding: 12px 0;
+      padding: 16px 12px;
+      margin-top: 16px;
+      overflow-x: auto; // 如果屏幕太小，允许横向滚动
 
       .btn {
-        padding: 10px 14px;
+        max-width: none;
+        flex: 1;
+        min-width: 90px; // 设置最小宽度，保证按钮不会太窄
+        padding: 12px 16px;
         font-size: 13px;
-        height: 44px;
+        min-height: 48px;
+        white-space: nowrap; // 防止文字换行
 
         .icon {
           width: 16px;