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;
+  justify-content: flex-start;
-  margin-bottom: 20px;
+  align-items: center;
 }
 
-.primary-button,
+.button-container > button {
-.danger-button,
+  margin-right: 12px;
-.dashed-button {
+  margin-bottom: 12px;
-  margin-bottom: 10px;
-  margin-right: 10px;
 }
 
-.primary-button:last-child,
+.button-container > button:last-child {
-.danger-button:last-child,
-.dashed-button:last-child {
   margin-right: 0;
 }
-
+/* 平板端  */
-.primary-button,
+@media (max-width: 992px) {
-.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) {
   .button-container {
-    flex-direction: column;
+    flex-direction: row;
+    align-items: flex-start;
     align-items: center;
   }
-
+  .button-container > button {
-  .primary-button,
+    margin-right: 12px;
-  .danger-button,
+    margin-bottom: 12px;
-  .dashed-button {
-    margin-right: 0;
   }
 }
+/* 手机端  */
+@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>

src/views/neUser/sub/index.vue

@@ -962,16 +962,15 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
+        <div class="button-container">
-          <div class="button-container">
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-          <a-button type="primary"  class="primary-button" @click.prevent="fnModalVisibleByEdit()">
             <template #icon>
               <PlusOutlined />
             </template>
             {{ t('common.addText') }}
           </a-button>
 
-          <a-button type="primary" class="primary-button"  @click.prevent="fnModalVisibleByBatch(1)">
+          <a-button type="primary" @click.prevent="fnModalVisibleByBatch(1)">
             <template #icon>
               <PlusOutlined />
             </template>
@@ -981,7 +980,6 @@ onMounted(() => {
             type="primary"
             danger
             ghost
-            class="danger-button"
             @click.prevent="fnModalVisibleByBatch(0)"
           >
             <template #icon>
@@ -999,7 +997,6 @@ onMounted(() => {
             <a-button
               type="dashed"
               danger
-              class="dashed-button"
               :disabled="modalState.loadDataLoading"
               :loading="modalState.loadDataLoading"
             >
@@ -1010,7 +1007,7 @@ onMounted(() => {
             </a-button>
           </a-popconfirm>
 
-          <a-button type="dashed" class="dashed-button" @click.prevent="fnModalUploadImportOpen">
+          <a-button type="dashed" @click.prevent="fnModalUploadImportOpen">
             <template #icon>
               <ImportOutlined />
             </template>
@@ -1033,13 +1030,12 @@ onMounted(() => {
               {{ t('views.neUser.sub.export') }}
             </a-button>
           </a-popconfirm>
-          </div>
+        </div>
-        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -1092,7 +1088,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->