From 3a089cee0cbb077c02c69600e41b1ca3b16d1b5a Mon Sep 17 00:00:00 2001
From: zhangrenyuan <18990852002@163.com>
Date: Thu, 2 Oct 2025 17:45:12 +0800
Subject: [PATCH] =?UTF-8?q?fix=E9=87=91=E5=B8=81=E5=AE=A1=E6=A0=B8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E9=87=91=E5=B8=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=90=84=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=A0=87=E7=AD=BE=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/audit/bean/beanAudit.vue        | 59 +++++++++++++++++--
 src/views/audit/gold/audit.vue            | 32 +++++++++--
 src/views/audit/gold/rechargeAudit.vue    | 90 +++++++++++++++++++++++++----
 src/views/audit/gold/refundAudit.vue      | 95 ++++++++++++++++++++++++++-----
 src/views/consume/bean/addBeanConsume.vue | 83 +++++++++++++--------------
 src/views/consume/bean/beanConsume.vue    | 48 ++++++++++------
 src/views/consume/gold/coinConsume.vue    | 40 ++++++++-----
 src/views/managerecharge/rate.vue         | 25 +++++++-
 src/views/recharge/bean/beanRecharge.vue  | 40 +++++++++----
 src/views/recharge/gold/coinRecharge.vue  | 33 +++++++++--
 src/views/refund/gold/coinRefund.vue      | 35 +++++++++---
 src/views/usergold/gold/clientCount.vue   | 33 +++++++++--
 12 files changed, 475 insertions(+), 138 deletions(-)

diff --git a/src/views/audit/bean/beanAudit.vue b/src/views/audit/bean/beanAudit.vue
index 38a55da..dfadf4e 100644
--- a/src/views/audit/bean/beanAudit.vue
+++ b/src/views/audit/bean/beanAudit.vue
@@ -35,12 +35,34 @@
   </el-card>
 
   <el-card class="card2">
-    <el-tabs v-model="checkTab" type="card" @tab-click="handleClick">
-      <el-tab-pane label="待审核" name="pending" v-if="hasbeanWait && hasbeanWaitShow"></el-tab-pane>
-      <el-tab-pane label="已通过" name="pass" v-if="hasbeanThrough"></el-tab-pane>
-      <el-tab-pane label="已驳回" name="reject" v-if="hasbeanReject"></el-tab-pane>
-    </el-tabs>
-
+    <!-- 将el-tabs替换为按钮组 -->
+    <div class="custom-button-group">
+      <el-button 
+        v-if="hasbeanWait && hasbeanWaitShow" 
+        :type="checkTab === 'pending' ? 'primary' : 'default'"
+        class="custom-tab-button"
+        @click="adminWait"
+      >
+        待审核
+      </el-button>
+      <el-button 
+        v-if="hasbeanThrough"
+        :type="checkTab === 'pass' ? 'primary' : 'default'"
+        class="custom-tab-button"
+        @click="adminPass"
+      >
+        已通过
+      </el-button>
+      <el-button 
+        v-if="hasbeanReject"
+        :type="checkTab === 'reject' ? 'primary' : 'default'"
+        class="custom-tab-button"
+        @click="adminReject"
+      >
+        已驳回
+      </el-button>
+    </div>
+  
     <div class="goldStatistics">
       总条数：{{ format3(stats.num) }}条&nbsp;&nbsp;&nbsp;&nbsp;
       总金豆数：{{ format3(stats.beanNum) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
@@ -540,6 +562,31 @@ onMounted(async () => {
   background: #E7F4FD;
 }
 
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+/* 自定义按钮样式 */
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+/* 激活状态的按钮样式 */
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
+
+}
+
+/* 悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
+
 /* 充值新币总数等等 */
 .goldStatistics {
   margin-left: 1vw;
diff --git a/src/views/audit/gold/audit.vue b/src/views/audit/gold/audit.vue
index ed6caac..dc3c36d 100644
--- a/src/views/audit/gold/audit.vue
+++ b/src/views/audit/gold/audit.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <div style="height:4vh;width:82vw;">
-    <el-button-group>
-      <el-button :type="activeTab === 'rechargeAudit' ? 'primary' : 'default'" @click="navigateTo('rechargeAudit')"
+    <el-button-group class="custom-button-group">
+      <el-button :type="activeTab === 'rechargeAudit' ? 'primary' : 'default'" @click="navigateTo('rechargeAudit')" class="custom-tab-button"
         v-if="hasRecharge">
         充值审核
       </el-button>
-      <el-button :type="activeTab === 'refundAudit' ? 'primary' : 'default'" @click="navigateTo('refundAudit')"
+      <el-button :type="activeTab === 'refundAudit' ? 'primary' : 'default'" @click="navigateTo('refundAudit')" class="custom-tab-button"
         v-if="hasRefund">
         退款审核
       </el-button>
@@ -91,4 +91,28 @@ onMounted(() => {
     }
   }
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 8px;
+}
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+// 自定义tab按钮激活样式
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
+}
+
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/audit/gold/rechargeAudit.vue b/src/views/audit/gold/rechargeAudit.vue
index a9d7f8f..9370611 100644
--- a/src/views/audit/gold/rechargeAudit.vue
+++ b/src/views/audit/gold/rechargeAudit.vue
@@ -48,10 +48,32 @@
     </el-col>
   </el-card>
   <el-card class="card2">
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> 
-      <el-tab-pane label="待审核" name="wait" v-if="hasrechargeWait&&hasrechargeWaitShow"></el-tab-pane>
-      <el-tab-pane label="已通过" name="pass" v-if="hasrechargeThrough"></el-tab-pane>
-      <el-tab-pane label="已驳回" name="reject" v-if="hasrechargeReject"></el-tab-pane>
+    <div class="custom-button-group">
+    <el-button 
+      v-if="hasrechargeWait&&hasrechargeWaitShow"
+      :type="activeName === 'wait' ? 'primary' : 'default'"
+      @click="handleButtonClick('wait')"
+      class="custom-tab-button"
+    >
+      待审核
+    </el-button>
+    <el-button 
+      v-if="hasrechargeThrough"
+      :type="activeName === 'pass' ? 'primary' : 'default'"
+      @click="handleButtonClick('pass')"
+      class="custom-tab-button"
+    >
+      已通过
+    </el-button>
+    <el-button 
+      v-if="hasrechargeReject"
+      :type="activeName === 'reject' ? 'primary' : 'default'"
+      @click="handleButtonClick('reject')"
+      class="custom-tab-button"
+    >
+      已驳回
+    </el-button>
+  </div>
       <div class="goldStatistics">
 
         <!--        总条数：{{ format3(stats.totalNum) }}条&nbsp;&nbsp;&nbsp;&nbsp;-->
@@ -61,7 +83,7 @@
         永久金币：{{ format3(stats.permanentGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
         免费金币：{{ format3(stats.freeGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
       </div>
-    </el-tabs>
+
     <el-table :data="tableData" style="width: 82vw;height:54vh" @sort-change="handleSortChange"
       :row-style="{ height: '50px' }">
       <el-table-column type="index" label="序号" width="100px" fixed="left">
@@ -477,9 +499,9 @@ const adminReject = async function () {
   console.log('adminWait，这是点击已驳回调用')
 }
 
-const handleClick = function (tab, event) {
-  activeName.value = tab.props.name
-  if (tab.props.name === 'wait') {
+const handleButtonClick = function (name) {
+  activeName.value = name
+  if (name === 'wait') {
     if(!hasrechargeWait){
       ElMessage.error('暂无权限')
       return
@@ -487,13 +509,13 @@ const handleClick = function (tab, event) {
     if(hasrechargeWaitShow){
       adminWait()
     }
-  } else if (tab.props.name === 'pass') {
+  } else if (name === 'pass') {
     if(!hasrechargeThrough){
       ElMessage.error('暂无权限')
       return
     }
     adminPass()
-  } else if (tab.props.name === 'reject') {
+  } else if (name === 'reject') {
     if(!hasrechargeReject){
       ElMessage.error('暂无权限')
       return
@@ -501,6 +523,32 @@ const handleClick = function (tab, event) {
     adminReject()
   }
 }
+
+
+// const handleClick = function (tab, event) {
+//   activeName.value = tab.props.name
+//   if (tab.props.name === 'wait') {
+//     if(!hasrechargeWait){
+//       ElMessage.error('暂无权限')
+//       return
+//     }
+//     if(hasrechargeWaitShow){
+//       adminWait()
+//     }
+//   } else if (tab.props.name === 'pass') {
+//     if(!hasrechargeThrough){
+//       ElMessage.error('暂无权限')
+//       return
+//     }
+//     adminPass()
+//   } else if (tab.props.name === 'reject') {
+//     if(!hasrechargeReject){
+//       ElMessage.error('暂无权限')
+//       return
+//     }
+//     adminReject()
+//   }
+// }
 const getActivity = async function () {
   try {
     const result = await request({
@@ -765,6 +813,28 @@ onMounted(async function () {
 :deep(.el-table__row:hover > .el-table__cell) {
   background-color: #E5EBFE !important;
 }
+/* 按钮组 */
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+}
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+/* 自定义激活状态样式 - 使用正确的Element Plus类选择器 */
+// 使用了 .el-button--primary 类选择器，这是 Element Plus 按钮组件在设置 type="primary" 时实际添加的类名
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
+}
+
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
 
 .select {
   display: flex;
diff --git a/src/views/audit/gold/refundAudit.vue b/src/views/audit/gold/refundAudit.vue
index 56452ee..2ef3144 100644
--- a/src/views/audit/gold/refundAudit.vue
+++ b/src/views/audit/gold/refundAudit.vue
@@ -50,11 +50,32 @@
   </el-card>
 
   <el-card class="card2">
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-      <el-tab-pane label="待审核" name="wait" v-if="hasrefundWait&&hasrefundWaitShow"></el-tab-pane>
-      <el-tab-pane label="已通过" name="pass" v-if="hasrefundThrough"></el-tab-pane>
-      <el-tab-pane label="已驳回" name="reject" v-if="hasrefundReject"></el-tab-pane>
-    </el-tabs>
+    <div class="custom-button-group">
+    <el-button 
+      v-if="hasrefundWait&&hasrefundWaitShow"
+      :type="activeName === 'wait' ? 'primary' : 'default'"
+      @click="handleButtonClick('wait')"
+      class="custom-tab-button"
+    >
+      待审核
+    </el-button>
+    <el-button 
+      v-if="hasrefundThrough"
+      :type="activeName === 'pass' ? 'primary' : 'default'"
+      @click="handleButtonClick('pass')"
+      class="custom-tab-button"
+    >
+      已通过
+    </el-button>
+    <el-button 
+      v-if="hasrefundReject"
+      :type="activeName === 'reject' ? 'primary' : 'default'"
+      @click="handleButtonClick('reject')"
+      class="custom-tab-button"
+    >
+      已驳回
+    </el-button>
+  </div>
 
     <div class="goldStatistics">
       退款总金币数：{{ format3((stats.permanentGolds + stats.freeGolds + stats.taskGolds).toFixed(2))
@@ -503,29 +524,54 @@ const get7Days = function () {
   get()
   getStats()
 }
-const handleClick = function (tab, event) {
-  activeName.value = tab.props.name
-  if (tab.props.name === 'wait') {
-    console.log(hasrefundWait.value);
-    if (!hasrefundWait) {
+
+const handleButtonClick = function (name) {
+  activeName.value = name
+  if (name === 'wait') {
+    if(!hasrefundWait){
       ElMessage.error('暂无权限')
       return
     }
-    adminWait()
-  } else if (tab.props.name === 'pass') {
-    if (!hasrefundThrough.value) {
+    if(hasrefundWaitShow){
+      adminWait()
+    }
+  } else if (name === 'pass') {
+    if(!hasrefundThrough){
       ElMessage.error('暂无权限')
       return
     }
     adminPass()
-  } else if (tab.props.name === 'reject') {
-    if (!hasrefundReject) {
+  } else if (name === 'reject') {
+    if(!hasrefundReject){
       ElMessage.error('暂无权限')
       return
     }
     adminReject()
   }
 }
+// const handleClick = function (tab, event) {
+//   activeName.value = tab.props.name
+//   if (tab.props.name === 'wait') {
+//     console.log(hasrefundWait.value);
+//     if (!hasrefundWait) {
+//       ElMessage.error('暂无权限')
+//       return
+//     }
+//     adminWait()
+//   } else if (tab.props.name === 'pass') {
+//     if (!hasrefundThrough.value) {
+//       ElMessage.error('暂无权限')
+//       return
+//     }
+//     adminPass()
+//   } else if (tab.props.name === 'reject') {
+//     if (!hasrefundReject) {
+//       ElMessage.error('暂无权限')
+//       return
+//     }
+//     adminReject()
+//   }
+// }
 
 // 待审核
 const adminWait = async function () {
@@ -680,6 +726,25 @@ onMounted(async () => {
   background-color: #E5EBFE !important;
 }
 
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+/* 自定义激活状态样式 - 使用正确的Element Plus类选择器 */
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
+}
+
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
+
+
 .select {
   display: flex;
 
diff --git a/src/views/consume/bean/addBeanConsume.vue b/src/views/consume/bean/addBeanConsume.vue
index a235cd4..1eaaebf 100644
--- a/src/views/consume/bean/addBeanConsume.vue
+++ b/src/views/consume/bean/addBeanConsume.vue
@@ -207,10 +207,10 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
 <template>
   <div class="userAndform">
     <div class="left">
-      <el-form :model="consumeForm" :rules="rules" ref="formRef" label-width="auto" style="min-width: 420px"
+      <el-form :model="consumeForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 600px"
         class="add-form">
         <el-form-item prop="jwcode" label="精网号" label-position="left">
-          <el-input v-model="consumeForm.jwcode" style="width: 200px" />
+          <el-input v-model="consumeForm.jwcode" style="width: 220px" />
           <el-button type="primary" @click="getUser(consumeForm.jwcode)" style="margin-left: 20px">查询</el-button>
         </el-form-item>
         <el-form-item prop="permanentBean" label="付费金豆" label-position="left">
@@ -223,43 +223,45 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
           <el-input v-model="consumeForm.remark" style="width: 300px" :rows="5" maxlength="100" show-word-limit
             type="textarea" />
         </el-form-item>
-        <el-button @click="deleteConsumeForm" style="margin-left: 280px" type="success">重置</el-button>
-        <el-button type="primary" :disabled="addDisabled" @click="handleConsumeForm"> 提交 </el-button>
+        <el-button @click="deleteConsumeForm" style="margin-left: 8.5vw;margin-top:1vw" type="success">重置</el-button>
+        <el-button type="primary" :disabled="addDisabled" @click="handleConsumeForm" style="margin-top:1vw"> 提交
+        </el-button>
       </el-form>
     </div>
+
+    <!-- 客户信息栏 -->
     <div class="right">
-      <!-- 客户信息栏 -->
       <el-card v-if="user.jwcode" class="customer-info">
-          <el-form :model="user" label-width="auto" label-position="left">
-            <el-text size="large" style="margin-left: 7vw">客户信息</el-text>
-            <!-- 第一行：姓名 + 当前付费金豆 -->
-            <div style="margin-top: 0.5vw;display:flex;">
-              <p style="width:6vw;">姓名:</p>
-              <p style="color: #2fa1ff;width:6vw;">{{ user.name }}</p>
-              <p style="width:7vw;">当前付费金豆:</p>
-              <p v-if="!isNaN(Number(user.permanentBean))" style="color: #2fa1ff;">{{ Number(user.permanentBean) }}</p>
-              <!-- 如果不是有效的数字，显示默认值 -->
-              <p v-else></p>
-            </div>
+        <el-form :model="user" label-width="auto" label-position="left">
+          <el-text size="large" style="margin-left: 7vw">客户信息</el-text>
+          <!-- 第一行：姓名 + 当前付费金豆 -->
+          <div style="margin-top: 0.5vw;display:flex;">
+            <p style="width:6vw;">姓名:</p>
+            <p style="color: #2fa1ff;width:6vw;">{{ user.name }}</p>
+            <p style="width:7vw;">当前付费金豆:</p>
+            <p v-if="!isNaN(Number(user.permanentBean))" style="color: #2fa1ff;">{{ Number(user.permanentBean) }}</p>
+            <!-- 如果不是有效的数字，显示默认值 -->
+            <p v-else></p>
+          </div>
 
-            <!-- 第二行：精网号 + 免费金豆 -->
-            <div style="display:flex;margin-top: 2vw;">
-              <p style="width:6vw;">精网号:</p>
-              <p style="color: #2fa1ff;width:6vw;">{{ user.jwcode }}</p>
-              <p style="width:7vw;">当前免费金豆:</p>
-              <p v-if="user.freeBean !== undefined" style="color: #2fa1ff;">{{ user.freeBean }}</p>
-            </div>
+          <!-- 第二行：精网号 + 免费金豆 -->
+          <div style="display:flex">
+            <p style="width:6vw;">精网号:</p>
+            <p style="color: #2fa1ff;width:6vw;">{{ user.jwcode }}</p>
+            <p style="width:7vw;">当前免费金豆:</p>
+            <p v-if="user.freeBean !== undefined" style="color: #2fa1ff;">{{ user.freeBean }}</p>
+          </div>
 
-            <!-- 第三行：消费次数 + 所属门店 -->
-            <div style="display:flex;margin-top: 2vw;">
-              <p style="width:6vw;">所属门店:</p>
-              <p style="color: #2fa1ff;width:6vw;">{{ user.market }}</p>
-              <p style="width:7vw;">消耗金豆总数:</p>
-              <p style="color: #2fa1ff;" v-if="user.consumeSum != null">{{ user.consumeSum }}</p>
-              <p style="color: #2fa1ff;" v-else>{{ 0 }}</p>
-            </div>
-          </el-form>
-        </el-card>
+          <!-- 第三行：消费次数 + 所属门店 -->
+          <div style="display:flex">
+            <p style="width:6vw;">所属门店:</p>
+            <p style="color: #2fa1ff;width:6vw;">{{ user.market }}</p>
+            <p style="width:7vw;">消耗金豆总数:</p>
+            <p style="color: #2fa1ff;" v-if="user.consumeSum != null">{{ user.consumeSum }}</p>
+            <p style="color: #2fa1ff;" v-else>{{ 0 }}</p>
+          </div>
+        </el-form>
+      </el-card>
     </div>
   </div>
 </template>
@@ -268,13 +270,14 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
   width: 80vw;
   height: 80vh;
   display: flex;
-  justify-content: center;
 
   .left {
-    width: 35%;
+    width: 35vw;
+    height: 80vh;
     display: flex;
 
     .add-form {
+      width: 40vw;
       margin-top: 5vh;
     }
   }
@@ -282,7 +285,7 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
   .right {
     flex: 1;
     display: flex;
-    margin-left: 10%;
+    float: left;
 
     .customer-info {
       width: 35vw;
@@ -293,12 +296,4 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
     }
   }
 }
-
-p {
-  margin: 0px;
-}
-
-.el-form-item {
-  margin-left: 5vw;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/consume/bean/beanConsume.vue b/src/views/consume/bean/beanConsume.vue
index 8788c41..d27fc69 100644
--- a/src/views/consume/bean/beanConsume.vue
+++ b/src/views/consume/bean/beanConsume.vue
@@ -1,35 +1,35 @@
 <template>
-  <div class="father">
-    <el-button-group>
+  <div style="height: 4vh;">
+    <el-button-group class="custom-button-group">
       <el-button
-          :type="activeTab === 'addBeanConsume' ? 'primary' : 'default'"
+          :type="activeTab === 'addBeanConsume' ? 'primary' : 'default'" class="custom-tab-button"
           @click="navigateTo('addBeanConsume')"
           v-if="hasAdd"
-          style="width: 120px;"
+          style="width: 6.5vw;"
       >
         新增消耗
       </el-button>
       <el-button
-          :type="activeTab === 'liveStream' ? 'primary' : 'default'"
+          :type="activeTab === 'liveStream' ? 'primary' : 'default'" class="custom-tab-button"
           @click="navigateTo('liveStream')"
           v-if="hasLive"
-          style="width: 120px;"
+          style="width: 6.5vw;"
       >
         直播
       </el-button>
       <el-button
-          :type="activeTab === 'dieHardFan' ? 'primary' : 'default'"
+          :type="activeTab === 'dieHardFan' ? 'primary' : 'default'" class="custom-tab-button"
           @click="navigateTo('dieHardFan')"
           v-if="hasFan"
-          style="width: 120px;"
+          style="width: 6.5vw;"
       >
         铁粉
       </el-button>
       <el-button
-          :type="activeTab === 'articleVideo' ? 'primary' : 'default'"
+          :type="activeTab === 'articleVideo' ? 'primary' : 'default'" class="custom-tab-button"
           @click="navigateTo('articleVideo')"
          v-if="hasArticleVideo"
-          style="width: 120px;"
+          style="width: 6.5vw;"
       >
         文章/视频
       </el-button>
@@ -110,12 +110,28 @@ onMounted(() => {
   }
 });
 </script>
-<style scoped>
-.father{
-  width:82vw;
-  height:4vh;
+<style scoped lang="scss">
+
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 8px;
+}
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
 }
-.content{
-  flex:1;
+// 自定义tab按钮激活样式
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
 }
+
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/views/consume/gold/coinConsume.vue b/src/views/consume/gold/coinConsume.vue
index 0439276..8962030 100644
--- a/src/views/consume/gold/coinConsume.vue
+++ b/src/views/consume/gold/coinConsume.vue
@@ -1,18 +1,18 @@
 <template>
 
-  <div class="fatherTop">
-    <el-button-group>
-      <el-button :type="activeTab === 'coinConsumeDetail' ? 'primary' : 'default'"
+  <div style="height:4vh;width:82vw;">
+    <el-button-group class="custom-button-group">
+      <el-button :type="activeTab === 'coinConsumeDetail' ? 'primary' : 'default'" class="custom-tab-button"
         @click="navigateTo('coinConsumeDetail')" v-if="hasDetail">
         金币消耗明细
       </el-button>
-      <el-button :type="activeTab === 'addCoinConsume' ? 'primary' : 'default'" @click="navigateTo('addCoinConsume')"
-        v-if="hasAdd">
+      <el-button :type="activeTab === 'addCoinConsume' ? 'primary' : 'default'" class="custom-tab-button"
+        @click="navigateTo('addCoinConsume')" v-if="hasAdd">
         新增消耗
       </el-button>
     </el-button-group>
   </div>
-  <div class="fatherBottom">
+  <div>
     <router-view></router-view>
   </div>
 </template>
@@ -80,15 +80,27 @@ onMounted(() => {
   }
 });
 </script>
-<style lang="scss">
-.fatherTop {
-  width: 80vw;
-  height: 4vh;
-  float: left;
+<style scoped lang="scss">
+
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 8px;
+}
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+// 自定义tab按钮激活样式
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
 }
 
-.fatherBottom {
-  width: 80vw;
-  height: 85vh;
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/managerecharge/rate.vue b/src/views/managerecharge/rate.vue
index ac1b3d8..37760b5 100644
--- a/src/views/managerecharge/rate.vue
+++ b/src/views/managerecharge/rate.vue
@@ -252,7 +252,7 @@ onMounted(async function () {
 </script>
 
 <template>
-  <el-card style="width:82vw;height:85vh" v-if="hasrateShow">
+  <el-card class="card1" style="width:82vw;height:85vh" v-if="hasrateShow">
     <el-table :data="tableData" v-if="(tableData.flag = 1)">
       <el-table-column type="index" label="序号" width="100px" fixed="left">
         <template #default="scope">
@@ -322,6 +322,29 @@ onMounted(async function () {
 
 
 <style scoped>
+
+.card1 {
+  background: #F3FAFE;
+}
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
+
 .pagination {
   margin-top: 20px;
   display: flex;
diff --git a/src/views/recharge/bean/beanRecharge.vue b/src/views/recharge/bean/beanRecharge.vue
index 0f3d677..668dcf8 100644
--- a/src/views/recharge/bean/beanRecharge.vue
+++ b/src/views/recharge/bean/beanRecharge.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="father">
-    <el-button-group>
-      <el-button :type="activeTab === 'addBeanRecharge' ? 'primary' : 'default'" @click="navigateTo('addBeanRecharge')"
-        v-if="hasAdd" style="width: 6.5vw">
+  <div style="height: 4vh;">
+    <el-button-group class="custom-button-group">
+      <el-button :type="activeTab === 'addBeanRecharge' ? 'primary' : 'default'" class="custom-tab-button"
+        @click="navigateTo('addBeanRecharge')" v-if="hasAdd" style="width: 6.5vw">
         新增充值
       </el-button>
-      <el-button :type="activeTab === 'beanSystemRecharge' ? 'primary' : 'default'"
+      <el-button :type="activeTab === 'beanSystemRecharge' ? 'primary' : 'default'" class="custom-tab-button"
         @click="navigateTo('beanSystemRecharge')" v-if="hasSystem" style="width: 6.5vw;">
         系统充值
       </el-button>
-      <el-button :type="activeTab === 'beanOnlineRecharge' ? 'primary' : 'default'"
+      <el-button :type="activeTab === 'beanOnlineRecharge' ? 'primary' : 'default'" class="custom-tab-button"
         @click="navigateTo('beanOnlineRecharge')" v-if="hasOnline" style="width: 6.5vw;">
         线上充值
       </el-button>
     </el-button-group>
   </div>
-    <router-view></router-view>
+  <router-view></router-view>
 
 </template>
 
@@ -86,8 +86,28 @@ onMounted(() => {
   }
 });
 </script>
-<style>
-.father {
-  height: 2vw;
+<style scoped lang="scss">
+
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 8px;
+}
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+// 自定义tab按钮激活样式
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
 }
+
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
+
 </style>
diff --git a/src/views/recharge/gold/coinRecharge.vue b/src/views/recharge/gold/coinRecharge.vue
index 77b19c0..f6c9bb8 100644
--- a/src/views/recharge/gold/coinRecharge.vue
+++ b/src/views/recharge/gold/coinRecharge.vue
@@ -1,11 +1,11 @@
 <template>
   <div style="height:4vh;">
-    <el-button-group>
-      <el-button :type="activeTab === 'coinRechargeDetail' ? 'primary' : 'default'"
+    <el-button-group class="custom-button-group">
+      <el-button :type="activeTab === 'coinRechargeDetail' ? 'primary' : 'default'" class="custom-tab-button"
         @click="navigateTo('coinRechargeDetail')" v-if="hasDetail">
         金币充值明细
       </el-button>
-      <el-button :type="activeTab === 'addCoinRecharge' ? 'primary' : 'default'" @click="navigateTo('addCoinRecharge')"
+      <el-button :type="activeTab === 'addCoinRecharge' ? 'primary' : 'default'" class="custom-tab-button" @click="navigateTo('addCoinRecharge')"
         v-if="hasAdd">
         新增充值
       </el-button>
@@ -77,4 +77,29 @@ onMounted(() => {
     }
   }
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 8px;
+}
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+// 自定义tab按钮激活样式
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
+}
+
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/refund/gold/coinRefund.vue b/src/views/refund/gold/coinRefund.vue
index a596f85..d030143 100644
--- a/src/views/refund/gold/coinRefund.vue
+++ b/src/views/refund/gold/coinRefund.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="father">
+  <div style="height: 4vh;">
     <!-- 这里放置标签切换的按钮 -->
-    <el-button-group>
-            <el-button :type="activeTab === 'coinRefundDetail' ? 'primary' : 'default'"
+    <el-button-group class="custom-button-group">
+            <el-button :type="activeTab === 'coinRefundDetail' ? 'primary' : 'default'" class="custom-tab-button"
                  @click="navigateTo('coinRefundDetail')" :disabled="!hasDetail" v-if="hasDetail">
         金币退款明细
       </el-button>
       <!-- 切换后状态显示 primary 样式否则是默认样式 -->
-      <el-button :type="activeTab === 'addCoinRefund' ? 'primary' : 'default'" @click="navigateTo('addCoinRefund')"
+      <el-button :type="activeTab === 'addCoinRefund' ? 'primary' : 'default'" class="custom-tab-button" @click="navigateTo('addCoinRefund')"
                  :disabled="!hasAdd" v-if="hasAdd">
         新增退款
       </el-button>
@@ -83,9 +83,28 @@ onMounted(() => {
   }
 });
 </script>
-<style lang="css">
-.father {
-  width: 82vw;
-  height: 4vh;
+<style scoped lang="scss">
+
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 8px;
+}
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+// 自定义tab按钮激活样式
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
 }
+
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/views/usergold/gold/clientCount.vue b/src/views/usergold/gold/clientCount.vue
index 31588f2..299516e 100644
--- a/src/views/usergold/gold/clientCount.vue
+++ b/src/views/usergold/gold/clientCount.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="father">
+  <div style="height: 4vh;">
     <!-- 这里放置标签切换的按钮 -->
-    <el-button-group>
+    <el-button-group class="custom-button-group">
       <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
           :type="activeTab === 'clientCountDetail' ? 'primary' : 'default'"
+          class="custom-tab-button"
           @click="navigateTo('clientCountDetail')"
           :disabled="!hasDetail" v-if="hasDetail"
       >
@@ -12,6 +13,7 @@
       </el-button>
       <el-button
           :type="activeTab === 'clientCountBalance' ? 'primary' : 'default'"
+          class="custom-tab-button"
           @click="navigateTo('clientCountBalance')"
           :disabled="!hasBalance" v-if="hasBalance"
       >
@@ -89,9 +91,28 @@ onMounted(() => {
   }
 });
 </script>
-<style>
-.father{
-  width:82vw;
-  height:4vh;
+<style scoped lang="scss">
+/* 自定义按钮组布局 */
+.custom-button-group {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 8px;
 }
+:deep(.el-button.custom-tab-button) {
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+// 自定义tab按钮激活样式
+:deep(.el-button.custom-tab-button.el-button--primary) {
+  background-color: #2741DE !important;
+  border-color: #2741DE !important;
+  color: #F3FAFE !important;
+}
+
+/* 鼠标悬停效果 */
+:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
+  opacity: 0.8;
+}
+
+
 </style>
\ No newline at end of file