2025-11-25

src/views/modules/yieldReport/com_produce_material.vue

@@ -59,8 +59,12 @@
       </div>
 
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="feedingMaterialRollFun" icon="el-icon-check">{{ buttons.confirmButton }}</el-button>
-        <el-button @click="closeDialog" icon="el-icon-close">{{ buttons.closeButton }}</el-button>
+        <button class="action-btn secondary" @click="feedingMaterialRollFun">
+          {{ buttons.confirmButton }}
+        </button>
+        <button class="action-btn secondary" @click="closeDialog">
+          {{ buttons.closeButton }}
+        </button>
       </span>
     </el-dialog>
   </div>
@@ -582,35 +586,58 @@ export default {
   }
 }
 
-// 底部按钮样式
+// 底部按钮样式 - 参考PDA样式
 .dialog-footer {
   display: flex;
   justify-content: center;
-  gap: 10px;
+  gap: 12px;
+  padding: 0;
 
-  .el-button {
-    border-radius: 6px;
+  .action-btn {
+    min-width: 100px;
     padding: 10px 24px;
+    border-radius: 20px;
     font-size: 14px;
-    transition: all 0.3s;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
 
-    &:not(.el-button--primary) {
-      border-color: #dee2e6;
+    i {
+      font-size: 14px;
+    }
+
+    &.primary {
+      background: #17B3A3;
+      border: none;
+      color: white;
 
       &:hover {
-        color: #667eea;
-        border-color: #667eea;
-        background-color: rgba(102, 126, 234, 0.05);
+        background: #13998b;
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.4);
+        transform: translateY(-1px);
+      }
+
+      &:active {
+        transform: translateY(0);
       }
     }
 
-    &.el-button--primary {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border: none;
+    &.secondary {
+      background: white;
+      border: 1px solid #17B3A3;
+      color: #17B3A3;
 
       &:hover {
-        background: linear-gradient(135deg, #5568d3 0%, #65408d 100%);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        background: #17B3A3;
+        color: white;
+      }
+
+      &:active {
+        transform: scale(0.98);
       }
     }
   }