feat: refactor action button styles for improved layout and responsiveness

- Replaced horizontal layout with a grid-based design for action buttons, enhancing visual structure.
- Adjusted button padding, margins, and sizes for better alignment and user experience.
- Simplified hover and active states for buttons, ensuring consistent interaction feedback.
- Updated media queries to maintain responsive design across different screen sizes.

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

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