样式

src/views/common/home.vue

@@ -3,8 +3,8 @@
     <div class="page-header">
       <div class="title">高级搜索方案</div>
       <div class="actions">
-        <el-button :loading="schemeLoading" @click="loadSavedSchemeList">刷新</el-button>
-        <el-button type="primary" @click="openCreateDialog()">设置方案</el-button>
+        <el-button :loading="schemeLoading" class="search-btn" @click="loadSavedSchemeList">刷新</el-button>
+        <el-button type="primary" class="add-btn" @click="openCreateDialog()">设置方案</el-button>
       </div>
     </div>
 
@@ -69,8 +69,8 @@
                   <el-checkbox v-model="editForm.caseInsensitive">不区分大小写</el-checkbox>
                 </el-form-item>-->
         <el-form-item label=" ">
-          <el-button :loading="editLoading" @click="loadEditFields">读取菜单搜索字段</el-button>
-          <el-button type="primary" :loading="editSaving" @click="saveScheme">保存</el-button>
+          <el-button :loading="editLoading" class="search-btn" @click="loadEditFields">读取菜单搜索字段</el-button>
+          <el-button type="primary" class="add-btn" :loading="editSaving" @click="saveScheme">保存</el-button>
         </el-form-item>
       </el-form>
 
@@ -78,7 +78,7 @@
         ref="editFieldTable"
         :data="editFieldList"
         border
-        stripe class="board-table"
+        stripe class="data-table"
         height="50vh"
         v-loading="editLoading"
         @selection-change="handleEditSelectionChange">
@@ -734,15 +734,50 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .mod-advanced-search-center {
   padding: 12px;
 }
-.board-table .cell {
+.data-table {
+  background-color: #fff;
+  border-radius: 4px;
+}
+.board-table >>> .cell {
+  line-height: 20px;
+  height: 20px;
+}
+.data-table >>> .el-table__header-wrapper th,
+.data-table >>> .el-table__fixed-header-wrapper th {
+  background-color: #f5f7fa !important;
+  color: #333;
+  font-weight: 600;
+  border-color: #ebeef5;
+  padding: 8px 0;
+}
+
+.data-table >>> .el-table__header-wrapper .cell,
+.data-table >>> .el-table__fixed-header-wrapper .cell,
+.data-table >>> .el-table__body-wrapper .cell,
+.data-table >>> .el-table__fixed-body-wrapper .cell {
+  padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+}
+
+.data-table >>> .el-table__body tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+.data-table >>> .el-table__body tr.current-row > td {
+  background-color: #ecf5ff !important;
+}
+/deep/ .data-table .cell {
   line-height: 20px;
   height: 20px;
 }
-.board-table {
+.data-table {
   margin-top: 12px;
 }
 .page-header {
@@ -837,4 +872,45 @@ export default {
   gap: 4px;
   margin-top: 8px;
 }
+.el-button {
+  height: 32px;
+  padding: 0 15px;
+  font-size: 13px;
+  border-radius: 4px;
+}
+.search-btn {
+  background-color: #ecf5ff;
+  border-color: #b3d8ff;
+  color: #409eff;
+}
+
+.search-btn:hover {
+  background-color: #409eff;
+  border-color: #409eff;
+  color: #fff;
+}
+
+.reset-btn {
+  background-color: #f5f7fa;
+  border-color: #d3d4d6;
+  color: #606266;
+}
+
+.reset-btn:hover {
+  background-color: #909399;
+  border-color: #909399;
+  color: #fff;
+}
+
+.add-btn {
+  background-color: #f0f9eb;
+  border-color: #c2e7b0;
+  color: #67c23a;
+}
+
+.add-btn:hover {
+  background-color: #67c23a;
+  border-color: #67c23a;
+  color: #fff;
+}
 </style>