style: 表格头按钮响应式

src/App.vue

@@ -93,60 +93,46 @@ body .ant-pro-basicLayout {
   padding: 6px !important;
 }
 
+/** ==== 表格头按钮区域 S === **/
+/* 默认 */
 .button-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
-  margin-bottom: 20px;
+  justify-content: flex-start;
+  align-items: center;
 }
 
-.primary-button,
-.danger-button,
-.dashed-button {
-  margin-bottom: 10px;
-  margin-right: 10px;
+.button-container > button {
+  margin-right: 12px;
+  margin-bottom: 12px;
 }
 
-.primary-button:last-child,
-.danger-button:last-child,
-.dashed-button:last-child {
+.button-container > button:last-child {
   margin-right: 0;
 }
-
-.primary-button,
-.danger-button,
-.dashed-button {
-  padding: 8px 16px;
-}
-
-.primary-button {
-  background-color: #1890ff;
-  color: #fff;
-  border: none;
-}
-
-.danger-button {
-  background-color: #ff4d4f;
-  color: #fff;
-  border: none;
-}
-
-.dashed-button {
-  background-color: #f0f2f5;
-  color: #333;
-  border: 1px dashed #ccc;
-}
-
-@media (max-width: 768px) {
+/* 平板端  */
+@media (max-width: 992px) {
   .button-container {
-    flex-direction: column;
+    flex-direction: row;
+    align-items: flex-start;
     align-items: center;
   }
-
-  .primary-button,
-  .danger-button,
-  .dashed-button {
-    margin-right: 0;
+  .button-container > button {
+    margin-right: 12px;
+    margin-bottom: 12px;
   }
 }
+/* 手机端  */
+@media (max-width: 576px) {
+  .button-container {
+    flex-direction: column;
+    align-items: flex-start;
+    align-items: center;
+  }
+  .button-container > button {
+    margin-right: 0px;
+    margin-bottom: 12px;
+  }
+}
+/** ==== 表格头按钮区域 E === **/
 </style>