CN-1594 feat: 统一按钮

src/assets/css/common/button.scss

@@ -0,0 +1,36 @@
+// 通用的 business 色的 button 和白色 button 样式的颜色，包括 top-tool、right-box 的 footer、各页面保存按钮 等.
+// business 色的 class 为 'business-button'，白色的 class 为 'business-button business-button--light'
+.business-button {
+  color: var(--el-color-white);
+  background-color: var(--el-color-business);
+  border: 1px solid var(--el-color-business-dark-2);
+  border-radius: var(--el-border-radius-small);
+  transition: all linear .1s;
+  cursor: pointer;
+  outline: none;
+
+  &:hover:not(:disabled) {
+    background-color: var(--el-color-business-light-2);
+  }
+  &:focus:not(:disabled) {
+    background-color: var(--el-color-business-dark-1);
+  }
+
+  &.business-button--light {
+    color: var(--el-text-color-primary);
+    background-color: var(--el-fill-color-blank);
+    border: 1px solid var(--el-color-info-light-7);
+
+    &:hover:not(:disabled) {
+      background-color: var(--el-fill-color);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--el-fill-color-darker);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.66;
+  }
+}

src/assets/css/common/index.scss

@@ -1,5 +1,6 @@
-@import 'right-box-common';
+@use 'right-box-common';
-@import 'table-common';
+@use 'table-common';
+@use 'button';
 
 /* 通用css */
 .panel-chart__no-data {

src/assets/css/common/right-box-common.scss

@@ -154,44 +154,12 @@ $border-radius-small: 2px;
     height: 70px;
     box-shadow: -3px 0 8px -3px rgba(205, 205, 205, 0.77);
 
-    .footer__btn {
+    .business-button {
       margin: 0 15px;
       height: 30px;
       min-width: 74px;
       padding: 0 15px;
-      color: var(--el-color-white);
-      background-color: var(--el-color-business);
-      border: 1px solid var(--el-color-business-dark-2);
-      border-radius: var(--el-border-radius-base);
-      outline: none;
       font-size: 14px;
-      cursor: pointer;
-      transition: all linear .1s;
-    }
-
-    .footer__btn:hover:not(.footer__btn--disabled) {
-      background-color: var(--el-color-business-light-2);
-    }
-    .footer__btn:focus:not(.footer__btn--disabled) {
-      background-color: var(--el-color-business-dark-1);
-    }
-
-    .footer__btn.footer__btn--light {
-      background-color: var(--el-fill-color-blank);
-      border: 1px solid var(--el-color-info-light-7);
-      color: var(--el-text-color-primary);
-    }
-
-    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-      background-color: var(--el-fill-color);
-    }
-    .footer__btn.footer__btn--light:focus:not(.footer__btn--disabled) {
-      background-color: var(--el-fill-color-darker);
-    }
-
-    .footer__btn.footer__btn--disabled {
-      opacity: .6;
-      cursor: default;
     }
   }
 

src/assets/css/common/table-common.scss

@@ -58,10 +58,6 @@
         display: flex;
       }
 
-      .top-tool-btn {
-        border-left: none;
-      }
-
       .top-tool-btn--search {
         width: 28px !important;
         height: 28px !important;
@@ -69,39 +65,21 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        border-radius: 0 var(--el-border-radius-small) var(--el-border-radius-small) 0 !important;
+        border-left: none;
 
         i {
           font-size: 14px;
-          color: var(--el-text-color-regular);
           margin-right: unset !important;
         }
       }
 
-      .top-tool-btn__border {
+      .el-input__wrapper, .el-input__inner {
-        border-radius: 0 2px 2px 0 !important;
+        border-radius: var(--el-border-radius-small) 0 0 var(--el-border-radius-small) !important;
       }
 
-      .top-tool-btn--search:hover {
+      .el-input {
-        border-left: none !important;
-      }
-
-      .top-tool-btn--search:focus {
-        border-left: none !important;
-      }
-
-      .el-input--small .el-input__wrapper {
-        height: 28px !important;
-        border-radius: 2px 0 0 2px !important;
-      }
-
-      .el-input--small {
         width: 214px !important;
-        line-height: 27px;
-      }
-
-      .el-input--small .el-input__inner {
-        height: 28px;
-        border-radius: 2px 0 0 2px;
       }
     }
 
@@ -132,81 +110,15 @@
       }
     }
 
-    .top-tool-btn {
+    .business-button {
-      cursor: pointer;
       height: 28px;
       width: 72px;
-      border: 1px solid $border-color;
-      outline: none;
-      border-radius: 2px;
-      background-color: var(--el-fill-color-lighter);
-      transition: background-color linear .1s;
       font-size: 12px;
-      font-weight: 500;
 
       i {
         font-size: 14px;
-        color: var(--el-text-color-regular);
         margin-right: 4px;
       }
-      &:disabled {
-        cursor: not-allowed;
-        opacity: 0.66;
-      }
-      &.top-tool-btn--text {
-        padding: 0 8px;
-        width: unset;
-        color: var(--el-text-color-regular);
-      }
-      &:hover:not(.cn-btn-disabled) {
-        border: 1px solid $border-color;
-        background-color: var(--el-fill-color);
-      }
-      &:focus:not(.cn-btn-disabled), &.is-focus {
-        background-color: var(--el-fill-color-darker);
-        border: 1px solid $border-color;
-
-        i {
-          color: var(--el-text-color-regular);
-        }
-      }
-      &.top-tool-btn--create {
-        background-color: var(--el-color-business);
-        border-color: var(--el-color-business-dark-2); // 涉及到表格样式，后续修改
-        color: $color-white;
-
-        i {
-          color: $color-white;
-        }
-        &:hover {
-          background-color: var(--el-color-business-light-2);
-          border-color: var(--el-color-business-dark-2);
-          color: $color-white;
-
-          i {
-            color: $color-white;
-          }
-        }
-        &:focus {
-          background-color: var(--el-color-business-dark-1);
-          border-color: var(--el-color-business-dark-2);
-          color: $color-white;
-
-          i {
-            color: $color-white;
-          }
-        }
-        &:disabled {
-          opacity: 0.66;
-          background-color: var(--el-color-business);
-          border-color: var(--el-color-business-dark-2);
-          color: $color-white;
-
-          i {
-            color: $color-white;
-          }
-        }
-      }
     }
 
     .btn-customize {

src/assets/css/components/components/advancedSearch/advanced-search2.scss

@@ -94,9 +94,7 @@ $color-primary: var(--el-color-primary);
       line-height: 24px !important;
 
       &:hover {
-        //background-color: #f0f5fa;
+        background-color: var(--el-fill-color-light);
-        background-color: var(--el-color-primary-light-9);
-        color: var(--el-color-primary);
       }
     }
     .hint-clear {

src/assets/css/components/views/administration/Appearance.scss

@@ -53,26 +53,12 @@
     margin-top: 3px;
     padding-left: 200px;
 
-    .footer__btn {
+    .business-button {
       margin: 0 15px;
       height: 30px;
       min-width: 74px;
       padding: 0 15px;
-      color: var(--el-color-white);
-      background-color: var(--el-color-business);
-      border: 1px solid var(--el-color-business-dark-2);
-      border-radius: var(--el-border-radius-base);
-      outline: none;
       font-size: 14px;
-      cursor: pointer;
-      transition: all linear .1s;
-    }
-
-    .footer__btn:hover:not(.footer__btn--disabled) {
-      background-color: var(--el-color-business-light-2);
-    }
-    .footer__btn:focus:not(.footer__btn--disabled) {
-      background-color: var(--el-color-business-dark-1);
     }
   }
 }

src/assets/css/components/views/administration/License.scss

@@ -16,29 +16,10 @@
       height: 100%;
       margin-top: 3px;
 
-      .license__btn {
+      .business-button {
         height: 30px;
         min-width: 74px;
-        color: var(--el-color-white);
-        background-color: var(--el-color-business);
-        border: 1px solid var(--el-color-business-dark-2);
-        border-radius: var(--el-border-radius-base);
-        outline: none;
         font-size: 14px;
-        cursor: pointer;
-        transition: all linear .1s;
-      }
-
-      .license__btn:hover:not(.license__btn--disabled) {
-        background-color: var(--el-color-business-light-2);
-      }
-      .license__btn:focus:not(.license__btn--disabled) {
-        background-color: var(--el-color-business-dark-1);
-      }
-
-      .license__btn--disabled {
-        opacity: .6;
-        cursor: default;
       }
     }
 

src/assets/css/components/views/detections/detection-create/detection-form-setting.scss

@@ -171,27 +171,12 @@ $color-info-light: var(--el-color-info-light-7);
   display: flex;
   justify-content: flex-end;
 
-  .el-button {
+  .business-button {
-    width: 80px !important;
+    min-width: 74px;
-    height: 30px !important;
+    height: 30px;
-    min-height: 30px !important;
+    font-size: 14px;
-    line-height: 30px !important;
+    padding: 0 15px;
-    background: var(--el-color-business);
+    margin: 0 15px;
-    border: 1px solid var(--el-color-business-dark-1);
-    border-radius: 2px;
-    font-size: 12px;
-    color: $fill-color-blank;
-    padding: 0 14px;
-  }
-
-  .btn1 {
-    margin-right: 10px;
-
-    .el-button {
-      background: $fill-color-light;
-      border: 1px solid var(--el-border-color-dark);
-      color: $color-primary;
-    }
   }
 }
 

src/assets/css/components/views/detections/detection-tools.scss

@@ -6,101 +6,21 @@ $color-create: var(el-color-business-dark-2);
   align-items: center;
   flex-direction: row;
 
-  .btn__width {
+  .business-button {
-    width: 72px !important;
-  }
-
-  .top-tool-btn {
-    cursor: pointer;
     height: 28px;
-    width: 28px;
+    width: 72px;
-    border: 1px solid var(--el-color-info-light-7);
-    outline: none;
-    border-radius: 2px;
-    background-color: var(--el-fill-color-lighter);
-    transition: background-color linear .1s;
     font-size: 12px;
-    font-weight: 500;
+
-    //font-family: $fontFamily !important;
     i {
       font-size: 14px;
-      color: var(--el-text-color-regular);
       margin-right: 4px;
     }
   }
 
-  .top-tool-btn:disabled {
-    cursor: not-allowed;
-    opacity: 0.66;
-  }
-
-  .top-tool-btn:hover:not(.cn-btn-disabled) {
-    border: 1px solid var(--el-color-info-light-7);
-    background-color: var(--cn-bg-color-light);
-  }
-
-  .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
-    background-color: var(--el-color-primary-light-9);
-    border: 1px solid var(--el-color-info-light-7);
-
-    i {
-      color: var(--el-text-color-regular);
-    }
-  }
-
-  .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
-    background-color: var(--cn-bg-color-light);
-    border-color: var(--el-color-danger-light-5);
-
-    i {
-      color: var(--el-color-danger);
-    }
-  }
-
-  .top-tool-btn--create {
-    background-color: var(--el-color-business) !important;
-    border-color: $color-create !important;
-    color: $color-white;
-
-    i {
-      color: $color-white;
-    }
-  }
-
-  .top-tool-btn--create:hover {
-    background-color: var(--el-color-business-light-2) !important;
-    border-color: $color-create !important;
-    color: $color-white;
-
-    i {
-      color: $color-white;
-    }
-  }
-
-  .top-tool-btn--create:focus {
-    background-color: var(--el-color-business) !important;
-    border-color: $color-create !important;
-    color: $color-white !important;
-
-    i {
-      color: $color-white !important;
-    }
-  }
-
-  .top-tool-btn--create:disabled {
-    opacity: 0.66;
-    background-color: var(--el-color-business) !important;
-    border-color: $color-create !important;
-    color: $color-white;
-
-    i {
-      color: $color-white;
-    }
-  }
-
   .top-tool-search {
     display: flex;
     width: 242px; //calc(100% - 256px);
+
     .el-input--small {
       line-height: 27px;
 
@@ -109,20 +29,20 @@ $color-create: var(el-color-business-dark-2);
         border-radius: 2px 0 0 2px;
       }
     }
-
+    .top-tool-btn--search {
-    .top-tool-btn {
+      width: 28px !important;
+      height: 28px !important;
+      padding: unset !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0 var(--el-border-radius-small) var(--el-border-radius-small) 0 !important;
       border-left: none;
-      border-radius: 0 2px 2px 0 !important;
-    }
 
-    .top-tool-btn--search:hover {
+      i {
-      border-left: none !important;
+        font-size: 14px;
-      border-radius: 0 2px 2px 0 !important;
+        margin-right: unset !important;
       }
-
-    .top-tool-btn--search:focus {
-      border-left: none !important;
-      border-radius: 0 2px 2px 0 !important;
     }
   }
 
@@ -134,10 +54,6 @@ $color-create: var(el-color-business-dark-2);
       height: 28px !important;
     }
 
-    .search__btn {
-      border-radius: 0 2px 2px 0 !important;
-    }
-
     .el-input--small {
       line-height: 27px;
 

src/components/rightBox/report/ReportBox.vue

@@ -243,10 +243,10 @@
       </div>
     </div>
     <div class="right-box__footer">
-      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
+      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="business-button business-button--light">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+      <button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>

src/components/rightBox/settings/RoleBox.vue

@@ -38,10 +38,10 @@
       </div>
     </div>
     <div class="right-box__footer">
-      <button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="footer__btn footer__btn--light">
+      <button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="business-button business-button--light">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+      <button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>

src/components/rightBox/settings/UserBox.vue

@@ -88,10 +88,10 @@
       </div>
     </div>
     <div class="right-box__footer">
-      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
+      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="business-button business-button--light">
         <span>{{ $t('overall.cancel') }}</span>
       </button>
-      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+      <button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
         <span>{{ $t('overall.save') }}</span>
       </button>
     </div>

src/components/table/CnDataList.vue

@@ -9,8 +9,8 @@
             <slot name="top-tool-left"></slot>
             <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
               <div class="top-tool-search__display">
-                <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
+                <el-input v-model="keyWord" @keyup.enter="onSearch"></el-input>
-                <button class="top-tool-btn top-tool-btn--search top-tool-btn__border" @click="onSearch">
+                <button class="business-button business-button--light top-tool-btn--search" @click="onSearch">
                   <el-icon><Search /></el-icon>
                 </button>
               </div>

src/components/table/detection/GeneralSettings.vue

@@ -101,7 +101,7 @@
     </div>
 
     <div class="form-setting__btn">
-      <el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
+      <button @click="onContinue" class="business-button">{{ $t('detection.create.continue') }}</button>
     </div>
   </div>
 </template>

src/components/table/detection/RuleDefinition.vue

@@ -208,7 +208,7 @@
     </div>
 
     <div class="form-setting__btn">
-      <el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
+      <button @click="onContinue" class="business-button">{{ $t('detection.create.continue') }}</button>
     </div>
   </div>
 </template>

src/views/administration/Appearance.vue

@@ -46,9 +46,8 @@
       </el-form>
       <div class="edit-appearance-base__footer">
         <button
-            :class="{'footer__btn--disabled': blockOperation.save}"
             :disabled="blockOperation.save"
-            class="footer__btn footer__btn-position"
+            class="business-button"
             @click="save"
             v-if="hasPermission('editAppearence')"
         >

src/views/administration/License.vue

@@ -19,7 +19,7 @@
         </el-form-item>
         <el-form-item :label="`${$t('license.licenseFile')}：`">
           <div class="license-file">
-            <button class="license__btn margin-r-20" @click.prevent="downloadFile">
+            <button class="business-button margin-r-20" @click.prevent="downloadFile">
               <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{ $t('license.download') }}</span>
             </button>
             <el-upload :action="`${baseUrl}sys/license/upload`"
@@ -34,7 +34,7 @@
                        :on-change="fileChange"
                        :on-success="uploadSuccess"
                        :on-error="uploadError">
-              <button class="license__btn" @click.prevent="">
+              <button class="business-button" @click.prevent="">
                 <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{ $t('license.upload') }}</span>
               </button>
             </el-upload>

src/views/administration/Roles.vue

@@ -10,24 +10,22 @@
         @search="search"
     >
       <template v-slot:top-tool-left>
-        <button id="roles-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
+        <button id="roles-add" class="business-button margin-r-10"
                 v-if="hasPermission('createRole')"
                 @click="add">
           <i class="cn-icon-xinjian cn-icon"></i>
           <span>{{ $t('overall.create') }}</span>
         </button>
-        <button id="roles-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
+        <button id="roles-edit" class="business-button business-button--light margin-r-10" :disabled="disableEdit"
                 v-if="hasPermission('editRole')"
                 @click="edit">
           <i class="cn-icon-edit cn-icon"></i>
           <span>{{ $t('overall.edit') }}</span>
         </button>
-        <button id="roles-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" v-if="hasPermission('deleteRole')" @click="delBatch">
+        <button id="roles-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete" v-if="hasPermission('deleteRole')" @click="delBatch">
           <i class="cn-icon-delete cn-icon"></i>
           <span>{{ $t('overall.delete') }}</span>
         </button>
-
-        <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot:default>
         <loading :loading="loading"></loading>

src/views/administration/User.vue

@@ -10,19 +10,19 @@
         @search="search"
     >
       <template #top-tool-left>
-        <button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
+        <button id="account-add" class="business-button margin-r-10"
                 v-if="hasPermission('createUser')"
                 @click="add">
           <i class="cn-icon-xinjian cn-icon"></i>
           <span>{{ $t('overall.create') }}</span>
         </button>
-        <button id="account-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
+        <button id="account-edit" class="business-button business-button--light margin-r-10" :disabled="disableEdit"
                 v-if="hasPermission('editUser')"
                 @click="editSelectRecord">
           <i class="cn-icon-edit cn-icon"></i>
           <span>{{ $t('overall.edit') }}</span>
         </button>
-        <button id="account-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
+        <button id="account-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete"
                 v-if="hasPermission('deleteUser')"
                 @click="delBatch">
           <i class="cn-icon-delete cn-icon"></i>

src/views/detections/detectionPolicies/PolicyForm.vue

@@ -144,10 +144,8 @@
 
     <div class="policy-form__footer">
       <div class="policy-form__footer__btn">
-        <div class="btn1">
+        <button class="business-button business-button--light" @click="cancel">{{ $t('overall.cancel') }}</button>
-          <el-button @click="cancel">{{ $t('overall.cancel') }}</el-button>
+        <button class="business-button" @click="createPolicy">{{ $t('overall.save') }}</button>
-        </div>
-        <el-button @click="createPolicy">{{ $t('overall.save') }}</el-button>
       </div>
     </div>
   </div>

src/views/detections/detectionPolicies/PolicyTools.vue

@@ -2,10 +2,10 @@
   <div>
     <div class="top-tools__left">
       <button
-          id="knowledge-base-add"
+          id="policy-base-add"
           v-if="hasPermission('createDetectionPolicy')"
           :title="$t('knowledgeBase.createKnowledgeBase')"
-          class="top-tool-btn margin-r-10 top-tool-btn--create btn__width"
+          class="business-button margin-r-10"
           @click="onCreate">
         <i class="cn-icon-xinjian cn-icon"></i>
         <span>{{ $t('overall.create') }}</span>
@@ -16,7 +16,7 @@
           v-if="hasPermission('editDetectionPolicy')"
           id="knowledge-base-edit"
           :title="$t('knowledgeBase.editKnowledgeBase')"
-          class="top-tool-btn margin-r-10 btn__width"
+          class="business-button business-button--light margin-r-10"
           @click="onEdit">
         <i class="cn-icon-edit cn-icon" ></i>
         <span>{{$t('overall.edit')}}</span>
@@ -27,7 +27,7 @@
           v-if="hasPermission('deleteDetectionPolicy')"
           id="knowledge-base-delete"
           :title="$t('knowledgeBase.deleteKnowledgeBase')"
-          class="top-tool-btn margin-r-10 btn__width"
+          class="business-button business-button--light margin-r-10"
           @click="onDelete">
         <i class="cn-icon-delete cn-icon"></i>
         <span>{{ $t('overall.delete') }}</span>
@@ -36,7 +36,7 @@
       <div class="top-tool-search margin-l-10">
         <el-input v-model="keyWord" size="small" class="search__input" @keyup.enter="onSearch"></el-input>
         <button
-            class="top-tool-btn top-tool-btn--search search__btn"
+            class="business-button business-button--light top-tool-btn--search"
             @click="onSearch">
           <el-icon><Search /></el-icon>
         </button>

src/views/report/Report.vue

@@ -23,19 +23,19 @@
           @search="search"
       >
         <template #top-tool-left>
-          <button id="account-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
+          <button id="account-add"  class="business-button margin-r-10"
                   v-if="hasPermission('createReport')"
                   @click="add">
             <i class="cn-icon-xinjian cn-icon"></i>
             <span>{{$t('overall.create')}}</span>
           </button>
-          <button id="report-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+          <button id="report-edit"  class="business-button business-button--light margin-r-10" :disabled="disableEdit"
                   v-if="hasPermission('editReport')"
                   @click="editReport">
             <i class="cn-icon-edit cn-icon"></i>
             <span>{{$t('overall.edit')}}</span>
           </button>
-          <button id="report-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
+          <button id="report-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete"
                   v-if="hasPermission('deleteReport')"
                   @click="delBatch">
             <i class="cn-icon-delete cn-icon"></i>

src/views/setting/KnowledgeBaseUserDefinedList.vue

@@ -33,7 +33,7 @@
             </button>
             <div class="top-tool-search margin-l-10" >
               <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
-              <button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
+              <button class="top-tool-btn top-tool-btn--search" @click="onSearch">
                 <el-icon><Search /></el-icon>
                 <!--<i class="el-icon-search"></i>-->
               </button>