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>
@@ -98,8 +98,8 @@
       </el-col>
       <el-col :span="12">
         <!-- 第四个卡片 -->
-        <div class="card-item">
-          <div class="card-title">全年累计充值人头数{{ yearlyRechargeNum }}</div>
+        <div class="card-item" >
+          <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

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
@@ -7,15 +7,17 @@ import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import './assets/css/common.css' // 引入公共CSS文件
 import JsonExcel from 'vue-json-excel'
-import { createPinia } from 'pinia'
+import {createPinia} from 'pinia'
 import VxeUI from 'vxe-pc-ui'
 import 'vxe-pc-ui/lib/style.css'
 import VxeUITable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 // 修正导入路径
-import { useAdminStore } from './store'
+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,35 +1,47 @@
 <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>
   </div>
-    <router-view></router-view>
+  <router-view></router-view>
 
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useAdminStore } from '@/store/index.js';
-import { hasMenuPermission, permissionMapping } from "@/utils/menuTreePermission.js";
+import {ref, watch, onMounted} from 'vue';
+import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
+import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
 
 const router = useRouter();
 const route = useRoute();
 const adminStore = useAdminStore();
-const { menuTree } = storeToRefs(adminStore);
+const {menuTree} = storeToRefs(adminStore);
 
 const activeTab = ref('');
 const hasAdd = ref(false);
@@ -38,7 +50,7 @@ const hasOnline = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  router.push({ name });
+  router.push({name});
 };
 
 

src/views/recharge/gold/coinRecharge.vue

@@ -1,30 +1,35 @@
 <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')"
-        v-if="hasAdd">
+      <el-button class="no-active-btn"
+                 :class="{ 'active-btn': activeTab === 'addCoinRecharge' }"
+                 @click="navigateTo('addCoinRecharge')"
+                 v-if="hasAdd">
         新增充值
       </el-button>
     </el-button-group>
   </div>
-    <router-view></router-view>
+  <router-view></router-view>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { storeToRefs } from "pinia";
-import { useAdminStore } from "@/store/index.js";
-import { hasMenuPermission, permissionMapping } from "@/utils/menuTreePermission.js";
+import {onMounted, ref, watch} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
+import {storeToRefs} from "pinia";
+import {useAdminStore} from "@/store/index.js";
+import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
 
 const router = useRouter();
 const route = useRoute();
 const adminStore = useAdminStore();
-const { menuTree } = storeToRefs(adminStore);
+const {menuTree} = storeToRefs(adminStore);
 
 const activeTab = ref('');
 const hasAdd = ref(false);
@@ -32,7 +37,7 @@ const hasDetail = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  router.push({ name });
+  router.push({name});
 };
 
 

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"
       >
@@ -19,8 +22,8 @@
       </el-button>
     </el-button-group>
     <!-- 渲染子路由组件 -->
-     </div>
-     <div>
+  </div>
+  <div>
     <router-view></router-view>
   </div>
 </template>
@@ -90,8 +93,8 @@ onMounted(() => {
 });
 </script>
 <style>
-.father{
-  width:82vw;
-  height:4vh;
+.father {
+  width: 82vw;
+  height: 4vh;
 }
 </style>

src/views/workspace/index.vue

@@ -1,16 +1,16 @@
 <template>
   <!-- 头部 -->
-        <el-header class="header">
-            <div class="title">数据总览</div>
-        </el-header>
+  <el-header class="header">
+    <div class="title">数据总览</div>
+  </el-header>
   <div style="height: 100vh;">
-    <el-row class="cards" >
+    <el-row class="cards">
       <el-col :span="14">
         <GoldManagement/>
       </el-col>
       <!-- 右上格子：占12列 -->
       <el-col :span="10">
-        <CashManagement />
+        <CashManagement/>
       </el-col>
     </el-row>
     <el-row class="graphs">
@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import {ref, onMounted} from 'vue'
 import API from '@/util/http'
 
 import GoldManagement from "@/components/workspace/GoldManagement.vue"
@@ -37,10 +37,10 @@ import GoldGraph from "@/components/workspace/GoldGraph.vue"
 .header {
   /* 将纯色背景替换为线性渐变 */
   background: linear-gradient(
-    90deg, 
-    rgba(228, 240, 252, 1) 20%, 
-    rgba(190, 218, 247, 1) 50%, 
-    rgba(228, 240, 252, 1) 100%
+      90deg,
+      rgba(228, 240, 252, 1) 20%,
+      rgba(190, 218, 247, 1) 50%,
+      rgba(228, 240, 252, 1) 100%
   );
   height: 6vh;
   border-radius: 12px;
@@ -64,5 +64,7 @@ import GoldGraph from "@/components/workspace/GoldGraph.vue"
   text-align: center;
 }
 
-
+.graphs {
+  padding-bottom: 10px;
+}
 </style>