style: 金币管理部分的切换按钮的样式

src/components/workspace/GoldGraph.vue

@@ -810,10 +810,11 @@ onUnmounted(() => {
 .el-select-dropdown__item {
   background: #ffffff;
 }
-
 /* select hover状态*/
 .el-select-dropdown__item:hover {
   border-radius: 8px;
+  margin-left: 2px;
+  margin-right: 2px;
   background: #E5EBFE;
   height: 32px;
 }
@@ -823,6 +824,7 @@ onUnmounted(() => {
   color: #2549E0;
   border-radius: 8px;
 }
+
 /* tabs的样式 */
 /* 选中 tab 的文字颜色 */
 :deep(.el-tabs__item.is-active) {

src/components/workspace/GoldManagement.vue

@@ -63,7 +63,7 @@
       <el-col :span="12">
         <!-- 第二个卡片 -->
         <div class="card-item-row1">
-          <div class="card-title">全年累计充值金币数{{ yearlyRecharge / 100 }}</div>
+          <div class="card-title">全年累计充值金币数：{{ yearlyRecharge / 100 }}</div>
           <el-row>
             <el-col :span="12">
               <div class="center-card">折合新币累计金额</div>
@@ -85,7 +85,7 @@
       <el-col :span="12">
         <!-- 第三个卡片 -->
         <div class="card-item">
-          <div class="card-title">全年累计消费金币数{{ yearlyReduce / 100 }}</div>
+          <div class="card-title">全年累计消费金币数：{{ yearlyReduce / 100 }}</div>
           <el-row style="height: 200px;">
             <el-col :span="12">
               <div ref="consumeChart" style="width:100%; height: 68%;"></div>
@@ -99,7 +99,7 @@
       <el-col :span="12">
         <!-- 第四个卡片 -->
         <div class="card-item" >
-          <div class="card-title">全年累计充值人头数{{ yearlyRechargeNum }}</div>
+          <div class="card-title">全年累计充值人头数：{{ yearlyRechargeNum }}</div>
           <el-row style="height: 200px;">
             <el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 150px">
               <div class="chart5">

src/css/btn.css

@@ -0,0 +1,39 @@
+/*各个页面的按钮激活*/
+
+/*使用示例
+import '@/css/btn.css';
+
+<el-button
+class="no-active-btn"
+:class="{ 'active-btn': activeTab === 'rechargeAudit' }"
+@click="navigateTo('rechargeAudit')"
+v-if="hasRecharge"
+>
+充值审核
+</el-button>
+*/
+
+
+/* 默认按钮样式 */
+.no-active-btn {
+    background-color: #E5EBFE; /* 未激活背景色 */
+    color: #666; /* 未激活文字色 */
+    /* 确保激活状态下 hover 也不变化 */
+    &:hover {
+        background-color: #E5EBFE !important; /* 保持默认背景色 */
+        color: #666 !important; /* 保持默认文字色 */
+        border-color: transparent; /* 若有边框，保持默认 */
+    }
+}
+
+/* 激活状态样式 */
+.active-btn {
+    background-color: #2741DE; /* 激活背景色 */
+    color: white; /* 激活文字色 */
+    /* 确保激活状态下 hover 也不变化 */
+    &:hover {
+        background-color: #2741DE !important;
+        color: white !important;
+        border-color: transparent;
+    }
+}

src/main.ts

@@ -16,6 +16,8 @@ import 'vxe-table/lib/style.css'
 import {useAdminStore} from './store'
 import request from "@/util/request";
 import "./global.css";
+import '@/css/btn.css';
+
 
 const app = createApp(App)
 const pinia = createPinia()

src/views/audit/bean/beanAudit.vue

@@ -17,8 +17,7 @@
       <div class="select">
         <div class="selectRow" style="width: 36vw;">
           <el-text class="text" size="large"  v-show="checkTab === 'pending'">提交时间：</el-text>
-          <el-text size="large" style="width: 25vw;margin-right:1vw"
-            v-show="checkTab === 'reject' || checkTab === 'pass'">审核时间：</el-text>
+          <el-text class="text" size="large" v-show="checkTab === 'reject' || checkTab === 'pass'">审核时间：</el-text>
           <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
             end-placeholder="结束时间" style="width: 25vw;margin-right:1vw" @change="handleDatePickerChange"
             :default-time="defaultTime" />

src/views/audit/gold/audit.vue

@@ -2,12 +2,20 @@
   <div>
     <div style="height:4vh;width:82vw;">
     <el-button-group>
-      <el-button :type="activeTab === 'rechargeAudit' ? 'primary' : 'default'" @click="navigateTo('rechargeAudit')"
-        v-if="hasRecharge">
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'rechargeAudit' }"
+          @click="navigateTo('rechargeAudit')"
+          v-if="hasRecharge"
+      >
         充值审核
       </el-button>
-      <el-button :type="activeTab === 'refundAudit' ? 'primary' : 'default'" @click="navigateTo('refundAudit')"
-        v-if="hasRefund">
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'refundAudit' }"
+          @click="navigateTo('refundAudit')"
+          v-if="hasRefund"
+      >
         退款审核
       </el-button>
     </el-button-group>

src/views/consume/bean/beanConsume.vue

@@ -2,7 +2,8 @@
   <div class="father">
     <el-button-group>
       <el-button
-          :type="activeTab === 'addBeanConsume' ? 'primary' : 'default'"
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'addBeanConsume' }"
           @click="navigateTo('addBeanConsume')"
           v-if="hasAdd"
           style="width: 120px;"
@@ -10,7 +11,8 @@
         新增消耗
       </el-button>
       <el-button
-          :type="activeTab === 'liveStream' ? 'primary' : 'default'"
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'liveStream' }"
           @click="navigateTo('liveStream')"
           v-if="hasLive"
           style="width: 120px;"
@@ -18,7 +20,8 @@
         直播
       </el-button>
       <el-button
-          :type="activeTab === 'dieHardFan' ? 'primary' : 'default'"
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'dieHardFan' }"
           @click="navigateTo('dieHardFan')"
           v-if="hasFan"
           style="width: 120px;"
@@ -26,7 +29,8 @@
         铁粉
       </el-button>
       <el-button
-          :type="activeTab === 'articleVideo' ? 'primary' : 'default'"
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'articleVideo' }"
           @click="navigateTo('articleVideo')"
          v-if="hasArticleVideo"
           style="width: 120px;"

src/views/consume/gold/coinConsume.vue

@@ -2,12 +2,22 @@
 
   <div class="fatherTop">
     <el-button-group>
-      <el-button :type="activeTab === 'coinConsumeDetail' ? 'primary' : 'default'"
-        @click="navigateTo('coinConsumeDetail')" v-if="hasDetail">
-        金币消耗明细
+
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'coinConsumeDetail' }"
+          @click="navigateTo('coinConsumeDetail')"
+          v-if="hasDetail"
+      >
+        充值审核
       </el-button>
-      <el-button :type="activeTab === 'addCoinConsume' ? 'primary' : 'default'" @click="navigateTo('addCoinConsume')"
-        v-if="hasAdd">
+
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'addCoinConsume' }"
+          @click="navigateTo('addCoinConsume')"
+          v-if="hasAdd"
+      >
         新增消耗
       </el-button>
     </el-button-group>

src/views/recharge/bean/beanRecharge.vue

@@ -1,16 +1,28 @@
 <template>
   <div class="father">
     <el-button-group>
-      <el-button :type="activeTab === 'addBeanRecharge' ? 'primary' : 'default'" @click="navigateTo('addBeanRecharge')"
-        v-if="hasAdd" style="width: 6.5vw">
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'addBeanRecharge' }"
+          @click="navigateTo('addBeanRecharge')"
+          v-if="hasAdd"
+          style="width: 6.5vw">
         新增充值
       </el-button>
-      <el-button :type="activeTab === 'beanSystemRecharge' ? 'primary' : 'default'"
-        @click="navigateTo('beanSystemRecharge')" v-if="hasSystem" style="width: 6.5vw;">
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'beanSystemRecharge' }"
+          @click="navigateTo('beanSystemRecharge')"
+          v-if="hasSystem"
+          style="width: 6.5vw;">
         系统充值
       </el-button>
-      <el-button :type="activeTab === 'beanOnlineRecharge' ? 'primary' : 'default'"
-        @click="navigateTo('beanOnlineRecharge')" v-if="hasOnline" style="width: 6.5vw;">
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'beanOnlineRecharge' }"
+          @click="navigateTo('beanOnlineRecharge')"
+          v-if="hasOnline"
+          style="width: 6.5vw;">
         线上充值
       </el-button>
     </el-button-group>

src/views/recharge/gold/coinRecharge.vue

@@ -1,11 +1,16 @@
 <template>
   <div style="height:4vh;">
     <el-button-group>
-      <el-button :type="activeTab === 'coinRechargeDetail' ? 'primary' : 'default'"
-        @click="navigateTo('coinRechargeDetail')" v-if="hasDetail">
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'coinRechargeDetail' }"
+          @click="navigateTo('coinRechargeDetail')"
+          v-if="hasDetail">
         金币充值明细
       </el-button>
-      <el-button :type="activeTab === 'addCoinRecharge' ? 'primary' : 'default'" @click="navigateTo('addCoinRecharge')"
+      <el-button class="no-active-btn"
+                 :class="{ 'active-btn': activeTab === 'addCoinRecharge' }"
+                 @click="navigateTo('addCoinRecharge')"
                  v-if="hasAdd">
         新增充值
       </el-button>

src/views/refund/gold/coinRefund.vue

@@ -2,13 +2,21 @@
   <div class="father">
     <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-            <el-button :type="activeTab === 'coinRefundDetail' ? 'primary' : 'default'"
-                 @click="navigateTo('coinRefundDetail')" :disabled="!hasDetail" v-if="hasDetail">
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'coinRefundDetail' }"
+          @click="navigateTo('coinRefundDetail')"
+          :disabled="!hasDetail"
+          v-if="hasDetail">
         金币退款明细
       </el-button>
       <!-- 切换后状态显示 primary 样式否则是默认样式 -->
-      <el-button :type="activeTab === 'addCoinRefund' ? 'primary' : 'default'" @click="navigateTo('addCoinRefund')"
-                 :disabled="!hasAdd" v-if="hasAdd">
+      <el-button
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'addCoinRefund' }"
+          @click="navigateTo('addCoinRefund')"
+          :disabled="!hasAdd"
+          v-if="hasAdd">
         新增退款
       </el-button>
     </el-button-group>

src/views/usergold/gold/clientCount.vue

@@ -4,14 +4,17 @@
     <el-button-group>
       <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-          :type="activeTab === 'clientCountDetail' ? 'primary' : 'default'"
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'clientCountDetail' }"
           @click="navigateTo('clientCountDetail')"
-          :disabled="!hasDetail" v-if="hasDetail"
+          :disabled="!hasDetail"
+          v-if="hasDetail"
       >
         金币明细
       </el-button>
       <el-button
-          :type="activeTab === 'clientCountBalance' ? 'primary' : 'default'"
+          class="no-active-btn"
+          :class="{ 'active-btn': activeTab === 'clientCountBalance' }"
           @click="navigateTo('clientCountBalance')"
           :disabled="!hasBalance" v-if="hasBalance"
       >

src/views/workspace/index.vue

@@ -64,5 +64,7 @@ import GoldGraph from "@/components/workspace/GoldGraph.vue"
   text-align: center;
 }
 
-
+.graphs {
+  padding-bottom: 10px;
+}
 </style>