style:金币管理的样式基本完成

src/views/history/newHistory.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card>
+    <el-card class="card1">
         <el-text size="large">姓名：</el-text>
         <el-input v-model="searchObj.name" placeholder="请输入姓名" style="width: 12vw;margin-right:1vw"
             clearable></el-input>
@@ -16,7 +16,7 @@
         <el-button type="success" @click="resetSearch">重置</el-button>
     </el-card>
 
-    <el-card style="margin-top:10px" v-show="tableData.length > 0">
+    <el-card class="card2" style="margin-top:10px" v-show="tableData.length > 0">
         <el-table :data="tableData" style="width: 82vw;height:60vh">
             <el-table-column type="index" label="序号" width="100" header-align="center" align="center">
                 <template #default="scope">
@@ -116,4 +116,43 @@ const handleCurrentChange = function (val) {
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+
+.pagination {
+  display: flex;
+  margin-top: 1vh;
+}
+
+
+// 搜索的卡片样式
+.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/history/oldHistory.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card>
+    <el-card class="card1">
         <el-text size="large">姓名：</el-text>
         <el-input v-model="searchObj.name" placeholder="请输入姓名" style="width: 12vw;margin-right:1vw"
             clearable></el-input>
@@ -16,7 +16,7 @@
         <el-button type="success" @click="resetSearch">重置</el-button>
     </el-card>
 
-    <el-card style="margin-top:10px" v-show="tableData.length > 0">
+    <el-card class="card2" style="margin-top:10px" v-show="tableData.length > 0">
         <el-table :data="tableData" style="width: 82vw;height:60vh">
             <el-table-column type="index" label="序号" width="100" header-align="center" align="center">
                 <template #default="scope">
@@ -114,4 +114,43 @@ const handleCurrentChange = function (val) {
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+
+.pagination {
+  display: flex;
+  margin-top: 1vh;
+}
+
+
+// 搜索的卡片样式
+.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/home.vue

@@ -180,6 +180,7 @@ function logout() {
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
+                  <el-dropdown-item @click="refreshData()">数据刷新</el-dropdown-item>
                   <el-dropdown-item @click="message()">查看个人信息</el-dropdown-item>
                   <el-dropdown-item @click="openChangePassword">修改密码</el-dropdown-item>
                   <el-dropdown-item @click="logout">退出登录</el-dropdown-item>

src/views/refund/gold/coinRefundDetail.vue

@@ -566,8 +566,8 @@ const getMarket = async function () {
       任务金币：{{ format3(Math.abs(taskGolds).toFixed(2)) }}
     </div>
     <!-- 设置表格容器的高度和滚动样式 -->
-    <div style="height: 58vh; overflow-y: auto;">
-      <el-table :data="tableData" style="width: 82vw;" @sort-change="handleSortChange">
+    <div style="height: 58vh; ">
+      <el-table :data="tableData" style="height: 57vh" @sort-change="handleSortChange">
         <el-table-column type="index" label="序号" width="80px" fixed="left">
           <template #default="scope">
             <span>{{
@@ -580,7 +580,6 @@ const getMarket = async function () {
         <el-table-column prop="jwcode" label="精网号" fixed="left" width="110px" />
         <el-table-column prop="market" label="所属地区" width="110px" />
         <el-table-column prop="orderCode" label="订单号" width="260px" show-overflow-tooltip />
-
         <el-table-column prop="goodsName" label="商品名称" width="110px" show-overflow-tooltip />
         <el-table-column prop="refundType" label="退款类型" width="100px" />
         <el-table-column prop="refundModel" label="退款方式" width="110px">

src/views/usergold/bean/userbean.vue

@@ -21,7 +21,7 @@
             消费金豆总数：{{ format3(stats.consumeSum) }}金豆    
         </div>
         <el-table :data="tableData" height="65vh" @sort-change="handleSortChange" :row-style="{ height: '60px' }">
-            <el-table-column type="index" label="序号" width="100px" fixed="left">
+            <el-table-column type="index" label="序号" width="80px" fixed="left">
                 <template #default="scope">
                     <span>{{
                         scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize
@@ -29,7 +29,7 @@
                 </template>
             </el-table-column>
             <el-table-column label="姓名" style="width: 120px;" prop="name" show-overflow-tooltip />
-            <el-table-column label="精网号" style="width: 120px;" prop="jwcode" />
+            <el-table-column label="精网号" style="width: 110px;" prop="jwcode" />
             <el-table-column label="所属地区" style="width: 120px;" prop="dept" />
             <el-table-column label="现有金豆" style="width: 120px;" prop="beanNum" sortable="custom" />
             <el-table-column label="免费金豆" style="width: 120px;" prop="freeBean" sortable="custom" />
@@ -37,10 +37,13 @@
             <el-table-column label="历史消费" style="width: 120px;" prop="totalCostBean" sortable="custom" />
 
         </el-table>
-        <el-pagination class="pagination" v-model:current-page="pagination.pageNum"
-            v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
-            :total="pagination.total" @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"></el-pagination>
+
+        <div class="pagination">
+            <el-pagination background v-model:current-page="pagination.pageNum"
+                v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
+                :total="pagination.total" @size-change="handlePageSizeChange"
+                @current-change="handleCurrentChange"></el-pagination>
+        </div>
     </el-card>
 
 </template>

src/views/usergold/gold/clientCountDetail.vue

@@ -527,9 +527,9 @@ const format3 = (num) => {
         任务金币：{{ format3(totalTaskGold || 0) }}  
         <a style="color:#b1b1b1; font-size: small;">当前合计仅显示筛选范围内的金币净变化（充值总额 - 消费总额 + 退款总额)</a>
       </div>
-      <div style="height: 55vh; overflow-y: auto">
-        <el-table :data="tableData" style="width: 82vw" @sort-change="handleSortChange" height="55vh">
-          <el-table-column type="index" label="序号" width="100px" fixed="left">
+      <div style="height: 58vh; ">
+        <el-table :data="tableData" style="height: 57vh" @sort-change="handleSortChange" >
+          <el-table-column type="index" label="序号" width="80px" fixed="left">
             <template #default="scope">
               <span>{{
                 scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
@@ -582,7 +582,7 @@ const format3 = (num) => {
       </div>
 
       <!-- 此处分页 -->
-      <div class="pagination" style="margin-top: 20px;display: flex;">
+      <div class="pagination" >
         <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"
           @current-change="handleCurrentChange"></el-pagination>
@@ -624,6 +624,12 @@ const format3 = (num) => {
 </template>
 
 <style scoped lang="scss">
+
+.pagination {
+  display: flex;
+  margin-top: 1vh;
+}
+
 // 搜索的卡片样式
 .card1 {
   background: #F3FAFE;