修改整体框架样式

src/assets/styles/custom.scss

@@ -46,6 +46,10 @@
         width: 100px;
         text-align: right;
         padding-right: 8px;
+        .el-button-gry{
+          background-color: #25bf82;
+          border:none
+        }
       }
 
       .demo-form-inline {
@@ -70,6 +74,9 @@
       .el-form .el-form-item__label {
         font-weight: 400;
       }
+      .custom-form-inline .el-input {
+        width: 260px;
+      }
     }
     .table-cont {
       min-height: 300px;
@@ -80,6 +87,16 @@
       .el-table__empty-text {
         width: 200px;
       }
+      .el-button-custom{
+        font-size: 14px !important;
+        color: #25bf82;
+        padding: 0;
+      }
+      .el-button-delete{
+        font-size: 14px !important;
+        color: #ff4d4f;
+        padding: 0;
+      }
     }
 
     /* 自定义弹窗样式 */
@@ -212,12 +229,13 @@
   justify-content: space-between;
   gap: 10px;
   padding: 3px 0;
+  
 }
 .el-icon-custom {
   vertical-align: middle;
   cursor: pointer;
   font-size: 16px;
-  color: #fff;
+  // color: #fff;
 }
 .table-cell-img-box {
   width: 60px;

src/assets/styles/variables.module.scss

@@ -9,9 +9,9 @@ $yellow: #FEC171;
 $panGreen: #30B08F;
 
 // 默认主题变量
-$menuText: #bfcbd9;
+$menuText: #000;
 $menuActiveText: #409eff;
-$menuBg: #304156;
+$menuBg: #fff;
 $menuHover: #263445;
 
 // 浅色主题theme-light
@@ -25,11 +25,11 @@ $base-sidebar-width: 200px;
 $sideBarWidth: 200px;
 
 // 菜单暗色变量
-$base-menu-color: #bfcbd9;
+$base-menu-color: #000;
-$base-menu-color-active: #f4f4f5;
+$base-menu-color-active: #25bf82;
-$base-menu-background: #304156;
+$base-menu-background: #fff;
-$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-background: #fff;
-$base-sub-menu-hover: #001528;
+$base-sub-menu-hover: rgba(64, 158, 255, 0.1);
 
 // 组件变量
 $--color-primary: #409EFF;

src/components/tableComponent.vue

@@ -36,10 +36,11 @@
       <el-table-column
         v-if="showSelection"
         type="selection"
-        width="55"
+        width="30"
         align="center"
+        fixed
       />
-      <el-table-column label="排序" width="60" v-if="showSort">
+      <el-table-column label="排序" width="50" v-if="showSort" fixed>
         <template #default="{ $index }">
           {{ (currentPage - 1) * pageSize + $index + 1 }}
         </template>
@@ -50,7 +51,7 @@
           :prop="column.prop"
           :label="column.label"
           :width="column.width"
-          :align="column.align || 'left'"
+          :align="column.align || 'center'"
           :sortable="column.sortable"
           :header-class-name="column.headerClassName"
         >

src/layout/components/Sidebar/index.vue

@@ -8,7 +8,7 @@
         :background-color="getMenuBackground"
         :text-color="getMenuTextColor"
         :unique-opened="true"
-        :active-text-color="theme"
+        active-text-color="#25bf82"
         :collapse-transition="false"
         mode="vertical"
         :class="sideTheme"

src/layout/components/TagsView/index.vue

@@ -291,7 +291,7 @@ function handleScroll() {
       }
 
       &.active {
-        background-color: #42b983;
+        background-color: #42b983 !important;
         color: #fff;
         border-color: #42b983;
 

src/views/customer/customerManage.vue

@@ -66,7 +66,7 @@
             </el-form>
           </div>
           <div class="search-bar-right">
-            <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
+            <el-button type="primary" class="el-button-gry" icon="Search" @click="onSubmit">查询</el-button>
             <el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
           </div>
         </div>
@@ -85,27 +85,9 @@
 
           <!-- 自定义-操作 -->
           <template #action="slotProps">
-            <el-tooltip effect="dark" placement="bottom-end">
+            <el-button text class="el-button-custom" :dark="isDark" @click="seeDetails(slotProps.row)">查看</el-button>
-              <template #content>
+            <el-button text class="el-button-custom" :dark="isDark" @click="handleEdit(slotProps.row)">编辑</el-button>
-                <div class="custom-tooltip-content">
+            <el-button text class="el-button-delete" :dark="isDark" @click="handleDelete(slotProps.row)">删除</el-button>
-                  <el-icon class="el-icon-custom" @click="seeDetails(slotProps.row)">
-                    <View />
-                  </el-icon>
-                  <el-icon class="el-icon-custom" @click="handleEdit(slotProps.row)">
-                    <Edit />
-                  </el-icon>
-                  <el-icon class="el-icon-custom" @click="handleDelete(slotProps.row)">
-                    <Delete />
-                  </el-icon>
-                </div>
-              </template>
-
-              <span class="el-dropdown-link">
-                <el-icon>
-                  <More />
-                </el-icon>
-              </span>
-            </el-tooltip>
           </template>
         </tableComponent>
       </div>
@@ -179,7 +161,7 @@ const columns = ref([
   { prop: "userCategory", label: "用户分类" },
   { prop: "unitPrice", label: "客单价" },
   { prop: "ordersNums", label: "订单数目" },
-  { prop: "action", label: "操作", slotName: "action" },
+  { prop: "action", label: "操作", slotName: "action",width: "140",align: "center" },
 ]);
 
 // 生成食物主题昵称