From fa8190906586d14476f6ba0d6011daaeaf255086 Mon Sep 17 00:00:00 2001
From: XingQue <kongxing634@gmail.com>
Date: Sun, 5 Jul 2026 18:33:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=9A=E5=91=98=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=E9=A1=B5=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E4=B8=8E=E9=BB=98=E8=AE=A4=E6=AF=8F=E9=A1=B510=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

统一输入框/下拉/日期/分页为深色样式，去掉表格白条纹；默认分页改为10条。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/views/member/Data.vue | 141 ++++++++++++++++++++++++++++++++------
 1 file changed, 121 insertions(+), 20 deletions(-)

diff --git a/src/views/member/Data.vue b/src/views/member/Data.vue
index c15a194..6b1a825 100644
--- a/src/views/member/Data.vue
+++ b/src/views/member/Data.vue
@@ -5,16 +5,16 @@
     <div class="filter-card">
       <el-form :inline="true" :model="filters" class="filter-form" @submit.prevent="search">
         <el-form-item label="订单ID">
-          <el-input v-model="filters.dingdan_id" clearable placeholder="订单ID" style="width: 160px" />
+          <el-input v-model="filters.dingdan_id" clearable placeholder="订单ID" class="dark-input" style="width: 160px" />
         </el-form-item>
         <el-form-item label="购买人ID">
-          <el-input v-model="filters.yonghuid" clearable placeholder="打手ID" style="width: 120px" />
+          <el-input v-model="filters.yonghuid" clearable placeholder="打手ID" class="dark-input" style="width: 120px" />
         </el-form-item>
         <el-form-item label="购买人昵称">
-          <el-input v-model="filters.buyer_keyword" clearable placeholder="昵称关键词" style="width: 140px" />
+          <el-input v-model="filters.buyer_keyword" clearable placeholder="昵称关键词" class="dark-input" style="width: 140px" />
         </el-form-item>
         <el-form-item label="会员类型">
-          <el-select v-model="filters.huiyuan_id" clearable filterable placeholder="全部" style="width: 180px">
+          <el-select v-model="filters.huiyuan_id" clearable filterable placeholder="全部" class="dark-select" style="width: 180px">
             <el-option
               v-for="item in huiyuanOptions"
               :key="item.huiyuan_id"
@@ -24,39 +24,39 @@
           </el-select>
         </el-form-item>
         <el-form-item label="支付状态">
-          <el-select v-model="filters.zhuangtai" clearable placeholder="全部" style="width: 120px">
+          <el-select v-model="filters.zhuangtai" clearable placeholder="全部" class="dark-select" style="width: 120px">
             <el-option label="已支付" :value="3" />
             <el-option label="待支付" :value="9" />
           </el-select>
         </el-form-item>
         <el-form-item label="订单类型">
-          <el-select v-model="filters.is_trial" clearable placeholder="全部" style="width: 120px">
+          <el-select v-model="filters.is_trial" clearable placeholder="全部" class="dark-select" style="width: 120px">
             <el-option label="正式会员" :value="false" />
             <el-option label="体验会员" :value="true" />
           </el-select>
         </el-form-item>
         <el-form-item label="总会员单">
-          <el-select v-model="filters.is_bundle" clearable placeholder="全部" style="width: 120px">
+          <el-select v-model="filters.is_bundle" clearable placeholder="全部" class="dark-select" style="width: 120px">
             <el-option label="是" :value="true" />
             <el-option label="否" :value="false" />
           </el-select>
         </el-form-item>
         <el-form-item label="已分红">
-          <el-select v-model="filters.has_fenhong" clearable placeholder="全部" style="width: 120px">
+          <el-select v-model="filters.has_fenhong" clearable placeholder="全部" class="dark-select" style="width: 120px">
             <el-option label="已分红" :value="true" />
             <el-option label="未分红" :value="false" />
           </el-select>
         </el-form-item>
         <el-form-item label="管事ID">
-          <el-input v-model="filters.guanshi_id" clearable placeholder="管事ID" style="width: 120px" />
+          <el-input v-model="filters.guanshi_id" clearable placeholder="管事ID" class="dark-input" style="width: 120px" />
         </el-form-item>
         <el-form-item label="组长ID">
-          <el-input v-model="filters.zuzhang_id" clearable placeholder="组长ID" style="width: 120px" />
+          <el-input v-model="filters.zuzhang_id" clearable placeholder="组长ID" class="dark-input" style="width: 120px" />
         </el-form-item>
         <el-form-item label="金额区间">
-          <el-input-number v-model="filters.jine_min" :min="0" :precision="2" controls-position="right" placeholder="最低" style="width: 120px" />
+          <el-input-number v-model="filters.jine_min" :min="0" :precision="2" controls-position="right" placeholder="最低" class="dark-input-number" style="width: 120px" />
           <span class="range-sep">-</span>
-          <el-input-number v-model="filters.jine_max" :min="0" :precision="2" controls-position="right" placeholder="最高" style="width: 120px" />
+          <el-input-number v-model="filters.jine_max" :min="0" :precision="2" controls-position="right" placeholder="最高" class="dark-input-number" style="width: 120px" />
         </el-form-item>
         <el-form-item label="购买时间">
           <el-date-picker
@@ -66,11 +66,12 @@
             start-placeholder="开始"
             end-placeholder="结束"
             value-format="YYYY-MM-DD HH:mm:ss"
+            class="dark-date-picker"
             style="width: 360px"
           />
         </el-form-item>
         <el-form-item label="关键词">
-          <el-input v-model="filters.keyword" clearable placeholder="订单/用户/说明" style="width: 160px" />
+          <el-input v-model="filters.keyword" clearable placeholder="订单/用户/说明" class="dark-input" style="width: 160px" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="search" :loading="loading">查询</el-button>
@@ -111,7 +112,7 @@
     </div>
 
     <div class="table-card" v-loading="loading">
-      <el-table :data="list" stripe border style="width: 100%" row-key="dingdan_id">
+      <el-table :data="list" border class="member-data-table" style="width: 100%" row-key="dingdan_id">
         <el-table-column type="expand">
           <template #default="{ row }">
             <div class="expand-panel" v-if="row.fenhong">
@@ -183,7 +184,7 @@
           v-model:current-page="page"
           v-model:page-size="pageSize"
           :total="total"
-          :page-sizes="[20, 50, 100]"
+          :page-sizes="[10, 20, 50, 100]"
           layout="total, sizes, prev, pager, next, jumper"
           @current-change="fetchData"
           @size-change="onSizeChange"
@@ -205,7 +206,7 @@ const loading = ref(false)
 const list = ref([])
 const total = ref(0)
 const page = ref(1)
-const pageSize = ref(20)
+const pageSize = ref(10)
 const huiyuanOptions = ref([])
 const dateRange = ref([])
 
@@ -398,13 +399,113 @@ onMounted(fetchData)
 .empty-fenhong {
   color: #8fb8e8;
 }
-.table-card :deep(.el-table) {
+
+/* 表单控件深色 */
+.filter-form :deep(.el-input__wrapper),
+.filter-form :deep(.el-select .el-input__wrapper),
+.filter-form :deep(.el-input-number .el-input__wrapper),
+.filter-form :deep(.el-date-editor .el-input__wrapper) {
+  background: #0a121c !important;
+  border: 1px solid #2a6f8f !important;
+  border-radius: 8px !important;
+  box-shadow: none !important;
+}
+.filter-form :deep(.el-input__inner),
+.filter-form :deep(.el-input-number__input),
+.filter-form :deep(.el-range-input) {
+  color: #e6f3ff !important;
+  background: transparent !important;
+}
+.filter-form :deep(.el-input__inner::placeholder),
+.filter-form :deep(.el-range-input::placeholder) {
+  color: rgba(159, 197, 255, 0.45) !important;
+}
+.filter-form :deep(.el-range-separator) {
+  color: #8fb8e8 !important;
+}
+.filter-form :deep(.el-input-number__decrease),
+.filter-form :deep(.el-input-number__increase) {
+  background: #0d1824 !important;
+  border-color: #2a6f8f !important;
+  color: #9ec5ff !important;
+}
+.filter-form :deep(.el-select .el-select__caret),
+.filter-form :deep(.el-input__suffix),
+.filter-form :deep(.el-input__prefix) {
+  color: #8fb8e8 !important;
+}
+
+/* 表格统一深色，去掉白条纹 */
+.member-data-table :deep(.el-table) {
   --el-table-bg-color: transparent;
-  --el-table-tr-bg-color: rgba(12, 18, 28, 0.5);
-  --el-table-header-bg-color: rgba(20, 30, 45, 0.9);
-  --el-table-row-hover-bg-color: rgba(64, 158, 255, 0.08);
+  --el-table-tr-bg-color: rgba(12, 18, 28, 0.55);
+  --el-table-header-bg-color: rgba(20, 30, 45, 0.95);
+  --el-table-row-hover-bg-color: rgba(64, 158, 255, 0.1);
   --el-table-text-color: #d8ebff;
   --el-table-header-text-color: #9ec5ff;
   --el-table-border-color: rgba(64, 158, 255, 0.12);
+  background: transparent;
+}
+.member-data-table :deep(.el-table th.el-table__cell) {
+  background: rgba(20, 30, 45, 0.95) !important;
+  color: #9ec5ff !important;
+}
+.member-data-table :deep(.el-table td.el-table__cell) {
+  background: rgba(12, 18, 28, 0.55) !important;
+  color: #d8ebff !important;
+  border-bottom: 1px solid rgba(64, 158, 255, 0.1) !important;
+}
+.member-data-table :deep(.el-table__body tr:hover > td.el-table__cell) {
+  background: rgba(64, 158, 255, 0.1) !important;
+}
+.member-data-table :deep(.el-table__empty-text) {
+  color: rgba(159, 197, 255, 0.55);
+}
+.member-data-table :deep(.el-table__expand-icon) {
+  color: #9ec5ff;
+}
+
+/* 分页深色 */
+.pager :deep(.el-pagination) {
+  --el-pagination-bg-color: transparent;
+  --el-pagination-text-color: #9ec5ff;
+  --el-pagination-button-color: #9ec5ff;
+  --el-pagination-hover-color: #6cc3e8;
+}
+.pager :deep(.el-pagination .el-select .el-input__wrapper),
+.pager :deep(.el-pagination .btn-prev),
+.pager :deep(.el-pagination .btn-next),
+.pager :deep(.el-pagination .el-pager li) {
+  background: #0a121c !important;
+  border: 1px solid #2a6f8f !important;
+  color: #9ec5ff !important;
+}
+.pager :deep(.el-pagination .el-pager li.is-active) {
+  background: rgba(64, 158, 255, 0.25) !important;
+  color: #e6f3ff !important;
+  border-color: #409eff !important;
+}
+.pager :deep(.el-pagination__total),
+.pager :deep(.el-pagination__jump) {
+  color: #9ec5ff !important;
+}
+.pager :deep(.el-pagination__editor.el-input .el-input__wrapper) {
+  background: #0a121c !important;
+  border: 1px solid #2a6f8f !important;
+}
+.pager :deep(.el-pagination__editor.el-input .el-input__inner) {
+  color: #e6f3ff !important;
+}
+
+/* 按钮 */
+.filter-form :deep(.el-button:not(.el-button--primary)) {
+  background: #0a121c;
+  border-color: #2a6f8f;
+  color: #9ec5ff;
+}
+.filter-form :deep(.el-button:not(.el-button--primary):hover) {
+  background: rgba(64, 158, 255, 0.12);
+  border-color: #409eff;
+  color: #e6f3ff;
 }
 </style>