style金币管理的1.0修改（背景颜色字体穿透）

src/views/audit/gold/rechargeAudit.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card style="margin-bottom: 0.5vh;">
+  <el-card class="card1" style="margin-bottom: 0.5vh;">
     <el-col style="margin-bottom: 1vh">
       <div class="select">
         <div class="selectRow">
@@ -47,12 +47,12 @@
       </div>
     </el-col>
   </el-card>
-  <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>
+      <div class="goldStatistics">
 
         <!--        总条数：{{ format3(stats.totalNum) }}条&nbsp;&nbsp;&nbsp;&nbsp;-->
         充值新币：{{ format3(stats.permanentGolds) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
@@ -725,6 +725,47 @@ onMounted(async function () {
   display: flex;
 }
 
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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;
+}
+
 .select {
   display: flex;
 

src/views/consume/bean/articleVideo.vue

@@ -463,7 +463,7 @@ const getTagText = (state) => {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 1vh">
+  <el-card class="card1" style="margin-bottom: 1vh">
     <el-col style="margin-bottom: 1vh; ">
       <div style="display:flex">
         <div style="width: 13vw; display:flex; align-items:center; justify-content: center;">
@@ -516,8 +516,8 @@ const getTagText = (state) => {
       </div>
     </el-col>
   </el-card>
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       金豆总数：{{ format3(Math.abs(permanentBean + freeBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       付费金豆数：{{ format3(Math.abs(permanentBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       免费金豆数：{{ format3(Math.abs(freeBean)) }}
@@ -600,7 +600,50 @@ const getTagText = (state) => {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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 {
   display: flex;
   margin-top: 20px;

src/views/consume/bean/dieHardFan.vue

@@ -468,7 +468,7 @@ const getTagText = (state) => {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 1vh;">
+  <el-card class="card1" style="margin-bottom: 1vh;">
     <el-col style="margin-bottom: 10px">
       <el-text>精网号：</el-text>
       <el-input v-model="beanConsumeFan.jwcode" placeholder="请输入精网号" style="width: 200px;margin-right: 20px"
@@ -499,8 +499,8 @@ const getTagText = (state) => {
       <el-button type="primary" @click="openExportList">查看导出列表</el-button>
     </el-col>
   </el-card>
-      <el-card>
-        <div>
+      <el-card class="card2">
+        <div class="goldStatistics">
           金豆总数：{{ format3(Math.abs(permanentBean + freeBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
           付费金豆数：{{ format3(Math.abs(permanentBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
           免费金豆数：{{ format3(Math.abs(freeBean)) }}
@@ -573,7 +573,50 @@ const getTagText = (state) => {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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 {
   display: flex;
   margin-top: 20px;

src/views/consume/bean/liveStream.vue

@@ -502,7 +502,7 @@ const getTagText = (state) => {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 1vh;">
+  <el-card class="card1" style="margin-bottom: 1vh;">
     <div style="margin-bottom: 1vh;display: flex;">
       <div style="width: 18vw;margin-right: 1vw;display: flex;align-items: center;">
         <el-text>精网号：</el-text>
@@ -550,8 +550,8 @@ const getTagText = (state) => {
       <el-button type="primary" @click="openExportList">查看导出列表</el-button>
     </div>
   </el-card>
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       金豆总数：{{ format3(Math.abs(permanentBean + freeBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       付费金豆数：{{ format3(Math.abs(permanentBean)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       免费金豆数：{{ format3(Math.abs(freeBean)) }}
@@ -623,7 +623,50 @@ const getTagText = (state) => {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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 {
   display: flex;
   margin-top: 20px;

src/views/consume/gold/coinConsumeDetail.vue

@@ -562,7 +562,7 @@ const getMarket = async function () {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 0.5vh;">
+  <el-card class="card1" style="margin-bottom: 0.5vh;">
     <div style="width:82vw;margin-bottom: 1vh;">
       <el-text>精网号：</el-text>
       <el-input v-model="consumeUser.jwcode" placeholder="请输入精网号" style="width: 10vw;margin-right: 1vw;" clearable />
@@ -605,8 +605,8 @@ const getMarket = async function () {
       <el-button type="primary" @click="openExportList">查看导出列表</el-button>
     </div>
   </el-card>
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       消耗新币：{{ format3(Math.abs(permanentGolds)) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
       总金币数：{{ format3(Math.abs(permanentGolds + freeGolds + taskGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(Math.abs(permanentGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -713,7 +713,7 @@ const getMarket = async function () {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .status {
   display: flex;
 }
@@ -734,4 +734,48 @@ const getMarket = async function () {
   display: flex;
   margin-top: 1vh;
 }
+
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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;
+}
+
 </style>

src/views/moneyManage/receiveDetail/receiveDetail.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="content">
-        <div class="card1">
-            <el-card style="margin-bottom: 0.5vh; min-height: 110px;">
+        <div class="div-card1">
+            <el-card class="card1" style="margin-bottom: 0.5vh; min-height: 110px;">
                 <div class="row">
                     <div class="rowItem">
                         <el-text style="width: 4vw;">精网号</el-text>
@@ -55,8 +55,8 @@
         </div>
 
 
-        <div class="card2">
-            <el-card>
+        <div class="div-card2">
+            <el-card class="card2">
                 <div class="btns">
                     <div class="tabs" v-if="caiwu">
                         <el-button-group>
@@ -653,11 +653,13 @@ const tableData = [
 ]
 </script>
 <style scoped lang="scss">
+
+
 .content {  //整体内容
     height: 100%;
     width: 83vw;
 
-    .card1 {   // 筛选框
+    .div-card1 {   // 筛选框
         width: 100%;
 
         .row {
@@ -684,7 +686,7 @@ const tableData = [
     }
 
 
-    .card2 {  // 下方数据展示card
+    .div-card2 {  // 下方数据展示card
         width: 100%;
 
         margin-top: 2vh;
@@ -917,4 +919,34 @@ const tableData = [
         padding-bottom: 15px;
     }
 }
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+
+// 表头背景等
+: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;
+}
 </style>

src/views/permissions/rolePermission.vue

@@ -586,7 +586,7 @@ onMounted(async function () {
 </script>
 <template>
   <div>
-    <el-card style="margin-bottom: 1vh;">
+    <el-card class="card1" style="margin-bottom: 1vh;">
       <div style="display: flex;">
         <el-text size="large">角色名称：</el-text>
         <el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable />
@@ -597,7 +597,7 @@ onMounted(async function () {
       </div>
     </el-card>
 
-    <el-card>
+    <el-card class="card2">
       <div class="add-item">
         <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()" :disabled="!canAdd" v-if="canAdd">新增角色</el-button>
       </div>
@@ -739,7 +739,40 @@ onMounted(async function () {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+
+// 表头背景等
+: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;
+}
+
+
 .head-card {
   display: flex;
 }

src/views/permissions/userPermission.vue

@@ -910,7 +910,7 @@ onMounted(async function () {
 
 <template>
   <div>
-    <el-card style="margin-bottom: 1vh;">
+    <el-card class="card1" style="margin-bottom: 1vh;">
       <div class="head-card">
         <div class="head-card-element">
           <el-text class="mx-1" size="large">OA号：</el-text>
@@ -935,7 +935,7 @@ onMounted(async function () {
         </div>
       </div>
     </el-card>
-    <el-card>
+    <el-card class="card2">
       <!-- 展示表单 -->
       <div class="add-item">
         <el-button style="color: #048efb; border: 1px solid #048efb" :disabled="!canAdd" v-if="canAdd" @click="userAddInit()">新增用户</el-button>
@@ -1168,7 +1168,38 @@ onMounted(async function () {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+
+// 表头背景等
+: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 {
   display: flex;
 }

src/views/recharge/bean/beanOnlineRecharge.vue

@@ -349,7 +349,7 @@ onMounted(async function () {
 })
 </script>
 <template>
-  <el-card style="margin-bottom: 0.5vh;">
+  <el-card class="card1" style="margin-bottom: 0.5vh;">
     <div>
       <el-text size="large">精网号：</el-text>
       <el-input v-model="selectData.jwcode" placeholder="请输入精网号" style="width: 10vw;margin-right: 1vw;" clearable />
@@ -385,8 +385,8 @@ onMounted(async function () {
       <el-button type="primary" @click="openExportList">查看导出列表</el-button>
     </div>
   </el-card>
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       充值金豆数：{{ format3(num) }}&nbsp;&nbsp;&nbsp;&nbsp;合计新币数：{{ format3(money) }}
     </div>
     <!-- 设置表格容器的高度和滚动样式 -->
@@ -459,4 +459,48 @@ onMounted(async function () {
     </template>
   </el-dialog>
 </template>
-<style scoped></style>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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;
+}
+
+</style>

src/views/recharge/bean/beanSystemRecharge.vue

@@ -335,7 +335,7 @@ onMounted(async function () {
 })
 </script>
 <template>
-    <el-card class="condition">
+    <el-card class="card1" style="margin-bottom: 0.5vh">
         <div>
             <el-text size="large">精网号：</el-text>
             <el-input v-model="selectData.jwcode" placeholder="请输入精网号" style="width: 9vw;margin-right:1vw" clearable />
@@ -366,8 +366,8 @@ onMounted(async function () {
             <el-button type="primary" style="width: 95px;" @click="openExportList">查看导出列表</el-button>
         </div>
     </el-card>
-    <el-card>
-        <div>
+    <el-card class="card2">
+        <div class="goldStatistics">
             金豆总数：{{ format3(beanNum) }}&nbsp;&nbsp;&nbsp;&nbsp;
             付费金豆数：{{ format3(permanentBeans) }}&nbsp;&nbsp;&nbsp;&nbsp;
             免费金豆数：{{ format3(freeBean) }}
@@ -434,12 +434,56 @@ onMounted(async function () {
         </template>
     </el-dialog>
 </template>
-<style scoped>
-.condition {
+<style scoped lang="scss">
+/* .condition {
     height: 6vw;
     margin-bottom: 0.5vh;
     display: flex;
     justify-content: space-between;
     align-items: center;
+} */
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
 }
+
+// 表头背景等
+: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;
+}
+
+
 </style>

src/views/recharge/gold/coinRechargeDetail.vue

@@ -586,7 +586,7 @@ const getTagText = (state) => {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 0.5vh">
+  <el-card class="card1" style="margin-bottom: 0.5vh">
     <div style="margin-bottom: 0.5vh;">
       <el-text size="large">精网号：</el-text>
       <el-input v-model="rechargeUser.jwcode" placeholder="请输入精网号" style="width: 10vw;margin-right: 1vw;" clearable />
@@ -628,8 +628,8 @@ const getTagText = (state) => {
     </div>
   </el-card>
 
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       充值新币：{{ format3(permanentGolds) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
       总金币数：{{ format3(permanentGolds + freeGolds) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(permanentGolds) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
@@ -712,5 +712,47 @@ const getTagText = (state) => {
     </template>
   </el-dialog>
 </template>
-<style scoped>
+<style scoped lang="scss">
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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;
+}
+
 </style>

src/views/refund/gold/coinRefundDetail.vue

@@ -499,7 +499,7 @@ const getMarket = async function () {
 </script>
 
 <template>
-  <el-card style="margin-bottom: 1vh;">
+  <el-card class="card1" style="margin-bottom: 1vh;">
     <div class="condition">
       <div style="display: flex;align-items: center;width:18vw">
         <el-text>精网号：</el-text>
@@ -552,8 +552,8 @@ const getMarket = async function () {
     </div>
   </el-card>
 
-  <el-card>
-    <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       退款金币总数：{{ format3(Math.abs(sumGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(Math.abs(permanentGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
       免费金币：{{ format3(Math.abs(freeGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -637,7 +637,50 @@ const getMarket = async function () {
   </el-dialog>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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;
+}
+
 .condition{
   display: flex;
   width:82vw;

src/views/usergold/bean/userbean.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card style="margin-bottom: 1vh;">
+    <el-card class="card1" style="margin-bottom: 1vh;">
         <el-text size="large">精网号：</el-text>
         <el-input v-model="searchObj.jwcode" placeholder="请输入精网号" style="width: 240px" clearable />
         <el-text size="large" style="margin-left:20px">地区：</el-text>
@@ -13,8 +13,8 @@
         </div>
     </el-card>
 
-    <el-card>
-        <div class="stats-card">
+    <el-card class="card2">
+        <div class="goldStatistics">
             现有金豆数：{{ format3(stats.sumBean) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
             付费金豆数：{{ format3(stats.permanentBean) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
             免费金豆数：{{ format3(stats.freeBean) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
@@ -188,5 +188,48 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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;
+}
+
 </style>

src/views/usergold/gold/clientCountBalance.vue

@@ -382,7 +382,7 @@ const format3 = (num) => {
 </script>
 
 <template>
-      <el-card style="margin-bottom: 1vh;">
+  <el-card class="card1" style="margin-bottom: 1vh;">
     <div class="head-card">
       <div class="head-card-element">
         <el-text class="mx-1" size="large">精网号：</el-text>
@@ -390,14 +390,8 @@ const format3 = (num) => {
       </div>
       <div class="head-card-element">
         <el-text class="mx-1" size="large">所属地区：</el-text>
-            <el-cascader
-                v-model="selectedMarketPath"
-                :options="markets"
-                placeholder="请选择所属地区"
-                clearable
-                style="width:180px"
-                @change="handleMarketChange"
-            />
+        <el-cascader v-model="selectedMarketPath" :options="markets" placeholder="请选择所属地区" clearable style="width:180px"
+          @change="handleMarketChange" />
       </div>
       <div class="head-card-element">
         <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
@@ -409,8 +403,8 @@ const format3 = (num) => {
     </div>
     <!-- </div> -->
   </el-card>
-      <el-card>
-        <div>
+  <el-card class="card2">
+    <div class="goldStatistics">
       金币总数：{{ format3(goldtotal || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(permanentGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
       免费金币：{{ format3(freeGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -512,8 +506,7 @@ const format3 = (num) => {
     <!-- 分页 -->
     <div class="pagination" style="margin-top: 20px">
       <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-                         layout="total, sizes, prev, pager, next, jumper" :total="total"
-                         @size-change="handlePageSizeChange"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
         @current-change="handleCurrentChange"></el-pagination>
     </div>
   </el-card>
@@ -551,6 +544,49 @@ const format3 = (num) => {
 </template>
 
 <style scoped lang="scss">
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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 {
   display: flex;
 }

src/views/usergold/gold/clientCountDetail.vue

@@ -460,7 +460,7 @@ const format3 = (num) => {
 </script>
 <template>
   <div>
-    <el-card style="margin-bottom: 1vh;">
+    <el-card class="card1" style="margin-bottom: 1vh;">
       <el-row style="margin-bottom: 10px">
         <el-col :span="5">
           <div class="head-card-element">
@@ -526,8 +526,8 @@ const format3 = (num) => {
         <el-button type="primary" @click="openExportList">查看导出列表</el-button>
       </div>
     </el-card>
-    <el-card>
-      <div>
+    <el-card class="card2">
+      <div class="goldStatistics">
         金币净变化：{{ format3(totalGoldTotal || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
         永久金币：{{ format3(totalPermanentGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
         免费金币：{{ format3(totalFreeGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -631,7 +631,50 @@ const format3 = (num) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+
+
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+: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;
+}
+
 .dialog-footer {
   display: flex;
   justify-content: flex-end;