From 63e3f352b27bc0f19b0e9ddf58463d8af58b250f Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 12 Dec 2023 12:14:20 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=A1=A8=E6=A0=BC=E5=A4=B4=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 70 ++++++++++++++--------------------
 src/views/neUser/sub/index.vue | 18 ++++-----
 2 files changed, 35 insertions(+), 53 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c41f50d9..17a8eed9 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/views/neUser/sub/index.vue b/src/views/neUser/sub/index.vue
index 2327e684..048818be 100644
--- a/src/views/neUser/sub/index.vue
+++ b/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">
-          <a-button type="primary"  class="primary-button" @click.prevent="fnModalVisibleByEdit()">
+        <div class="button-container">
+          <a-button type="primary" @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>
-        </a-space>
+        </div>
       </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>
 
       <!-- 表格列表 -->