页面美化（3000不报错3001报错500应该是环境问题）

src/views/AgentWithdrawals.vue

@@ -6,7 +6,7 @@
         <i class="icon-arrow-left"></i>
         返回仪表盘
       </button>
-      <h2>佣金提现</h2>
+      <h2 class="page-title">佣金提现</h2>
     </div>
     
     <!-- 顶部统计卡片 -->
@@ -49,122 +49,6 @@
       </div>
     </div>
 
-    <!-- 收款方式设置 -->
-    <div class="payment-info-section">
-      <div class="section-header">
-        <h3>收款方式</h3>
-        <button class="btn-edit" @click="showPaymentForm = !showPaymentForm">
-          {{ showPaymentForm ? '取消' : '编辑' }}
-        </button>
-      </div>
-      
-      <div v-if="!showPaymentForm" class="payment-info-display">
-        <div class="info-item">
-          <span class="label">收款方式：</span>
-          <span class="value">{{ getPaymentTypeText(paymentInfo.payment_type) || '未设置' }}</span>
-        </div>
-        <div class="info-item" v-if="paymentInfo.payment_type === 'bank'">
-          <span class="label">银行名称：</span>
-          <span class="value">{{ paymentInfo.bank_name || '未设置' }}</span>
-        </div>
-        <div class="info-item">
-          <span class="label">{{ getAccountLabel(paymentInfo.payment_type) }}：</span>
-          <span class="value">{{ maskAccount(paymentInfo.account_number) || '未设置' }}</span>
-        </div>
-        <div class="info-item">
-          <span class="label">{{ getHolderLabel(paymentInfo.payment_type) }}：</span>
-          <span class="value">{{ paymentInfo.account_holder || '未设置' }}</span>
-        </div>
-        <div v-if="paymentInfo.payment_type !== 'bank' && paymentInfo.qr_code_url" class="info-item qr-code-preview">
-          <span class="label">收款码：</span>
-          <div class="qr-code-image">
-            <img :src="paymentInfo.qr_code_url" alt="收款码" />
-          </div>
-        </div>
-      </div>
-
-      <form v-if="showPaymentForm" @submit.prevent="updatePaymentInfo" class="payment-form">
-        <div class="form-group">
-          <label>收款方式</label>
-          <select v-model="paymentForm.payment_type" @change="onPaymentTypeChange" required>
-            <option value="">请选择收款方式</option>
-            <option value="bank">银行卡</option>
-            <option value="wechat">微信收款码</option>
-            <option value="alipay">支付宝收款码</option>
-            <option value="unionpay">云闪付收款码</option>
-          </select>
-        </div>
-        
-        <div v-if="paymentForm.payment_type === 'bank'" class="form-group">
-          <label>银行名称</label>
-          <input 
-            v-model="paymentForm.bank_name" 
-            type="text" 
-            placeholder="请输入银行名称"
-            required
-          >
-        </div>
-        
-        <div class="form-group">
-          <label>{{ getAccountLabel(paymentForm.payment_type) }}</label>
-          <input 
-            v-model="paymentForm.account_number" 
-            type="text" 
-            :placeholder="getAccountPlaceholder(paymentForm.payment_type)"
-            required
-          >
-        </div>
-        
-        <div class="form-group">
-          <label>{{ getHolderLabel(paymentForm.payment_type) }}</label>
-          <input 
-            v-model="paymentForm.account_holder" 
-            type="text" 
-            :placeholder="getHolderPlaceholder(paymentForm.payment_type)"
-            required
-          >
-        </div>
-        
-        <div v-if="paymentForm.payment_type && paymentForm.payment_type !== 'bank'" class="form-group">
-          <label>收款码图片</label>
-          <div class="qr-code-upload">
-            <input 
-              type="file" 
-              ref="qrCodeInput"
-              accept="image/*"
-              @change="handleQrCodeUpload"
-              style="display: none;"
-            >
-            <div 
-              class="upload-area"
-              :class="{ 'has-image': paymentForm.qr_code_url }"
-              @click="$refs.qrCodeInput.click()"
-            >
-              <div v-if="!paymentForm.qr_code_url" class="upload-placeholder">
-                <div class="upload-icon">📷</div>
-                <div class="upload-text">点击上传收款码</div>
-                <div class="upload-hint">支持 JPG、PNG 格式</div>
-              </div>
-              <div v-else class="uploaded-image">
-                <img :src="paymentForm.qr_code_url" alt="收款码" />
-                <div class="image-overlay">
-                  <span>点击重新上传</span>
-                </div>
-              </div>
-            </div>
-            <div v-if="uploadingQrCode" class="upload-progress">
-              上传中...
-            </div>
-          </div>
-        </div>
-        
-        <div class="form-actions">
-          <button type="submit" class="btn-primary" :disabled="updating">保存</button>
-          <button type="button" class="btn-secondary" @click="showPaymentForm = false">取消</button>
-        </div>
-      </form>
-    </div>
-
     <!-- 提现申请 -->
     <div class="withdrawal-section">
       <div class="section-header">
@@ -186,8 +70,13 @@
             >
             <span class="currency">元</span>
           </div>
-          <div class="amount-tips">
+          <div class="amount-info">
+            <span class="amount-tips">
               可提现金额：¥{{ commissionStats.available_amount || '0.00' }}
+            </span>
+            <button class="btn-edit" @click="openPaymentDialog">
+              更改收款方式
+            </button>
           </div>
         </div>
         <div class="form-actions">
@@ -264,6 +153,111 @@
         </div>
       </div>
     </div>
+
+    <!-- 编辑收款方式的对话框 -->
+    <el-dialog
+      v-model="paymentDialogVisible"
+      title="编辑收款方式"
+      width="600px"
+      :before-close="handleDialogClose"
+    >
+      <el-form 
+        ref="paymentFormRef"
+        :model="paymentForm" 
+        label-width="120px"
+        label-position="top"
+        :rules="paymentFormRules"
+      >
+        <el-form-item label="收款方式" prop="payment_type">
+          <el-select 
+            v-model="paymentForm.payment_type" 
+            placeholder="请选择收款方式"
+            @change="onPaymentTypeChange"
+            style="width: 100%"
+          >
+            <el-option label="银行卡" value="bank"></el-option>
+            <el-option label="微信收款码" value="wechat"></el-option>
+            <el-option label="支付宝收款码" value="alipay"></el-option>
+            <el-option label="云闪付收款码" value="unionpay"></el-option>
+          </el-select>
+        </el-form-item>
+        
+        <el-form-item 
+          v-if="paymentForm.payment_type === 'bank'" 
+          label="银行名称" 
+          prop="bank_name"
+        >
+          <el-input 
+            v-model="paymentForm.bank_name" 
+            placeholder="请输入银行名称"
+          ></el-input>
+        </el-form-item>
+        
+        <el-form-item 
+          :label="getAccountLabel(paymentForm.payment_type)" 
+          prop="account_number"
+        >
+          <el-input 
+            v-model="paymentForm.account_number" 
+            :placeholder="getAccountPlaceholder(paymentForm.payment_type)"
+          ></el-input>
+        </el-form-item>
+        
+        <el-form-item 
+          :label="getHolderLabel(paymentForm.payment_type)" 
+          prop="account_holder"
+        >
+          <el-input 
+            v-model="paymentForm.account_holder" 
+            :placeholder="getHolderPlaceholder(paymentForm.payment_type)"
+          ></el-input>
+        </el-form-item>
+        
+        <el-form-item 
+          v-if="paymentForm.payment_type && paymentForm.payment_type !== 'bank'" 
+          label="收款码图片"
+          prop="qr_code_url"
+        >
+          <el-upload
+            class="qr-code-uploader"
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            :on-change="handleQrCodeUpload"
+            accept="image/*"
+          >
+            <div v-if="paymentForm.qr_code_url" class="qr-code-preview">
+              <img :src="paymentForm.qr_code_url" class="qr-code-image" />
+              <div class="qr-code-mask">
+                <span>点击更换图片</span>
+              </div>
+            </div>
+            <div v-else class="upload-placeholder">
+              <el-icon class="upload-icon"><Plus /></el-icon>
+              <div class="upload-text">点击上传收款码</div>
+              <div class="upload-hint">支持 JPG、PNG 格式，大小不超过5MB</div>
+            </div>
+          </el-upload>
+          <div v-if="uploadingQrCode" class="upload-progress">
+            <el-progress :percentage="uploadProgress" :show-text="false"></el-progress>
+            <span>上传中...</span>
+          </div>
+        </el-form-item>
+      </el-form>
+      
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="paymentDialogVisible = false">取消</el-button>
+          <el-button 
+            type="primary" 
+            @click="submitPaymentForm"
+            :loading="updating"
+          >
+            保存
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -271,20 +265,28 @@
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
 import api from '@/utils/api'
 
 export default {
   name: 'AgentWithdrawals',
+  components: {
+    Plus
+  },
   setup() {
     const router = useRouter()
     const userStore = useUserStore()
+    const paymentFormRef = ref(null)
     
     // 响应式数据
     const loading = ref(false)
     const updating = ref(false)
     const submitting = ref(false)
-    const showPaymentForm = ref(false)
+    const paymentDialogVisible = ref(false)
     const recordsFilter = ref('')
+    const uploadingQrCode = ref(false)
+    const uploadProgress = ref(0)
     
     const commissionStats = reactive({
       total_commission: '0.00',
@@ -314,7 +316,25 @@ export default {
     })
     
     const withdrawalRecords = ref([])
-    const uploadingQrCode = ref(false)
+    
+    // 表单验证规则
+    const paymentFormRules = reactive({
+      payment_type: [
+        { required: true, message: '请选择收款方式', trigger: 'change' }
+      ],
+      bank_name: [
+        { required: true, message: '请输入银行名称', trigger: 'blur' }
+      ],
+      account_number: [
+        { required: true, message: '请输入账号', trigger: 'blur' }
+      ],
+      account_holder: [
+        { required: true, message: '请输入持有人姓名', trigger: 'blur' }
+      ],
+      qr_code_url: [
+        { required: true, message: '请上传收款码图片', trigger: 'change' }
+      ]
+    })
     
     // 计算属性
     const canWithdraw = computed(() => {
@@ -366,31 +386,62 @@ export default {
         }
       } catch (error) {
         console.error('加载佣金统计失败:', error)
+        ElMessage.error('加载佣金统计失败')
       }
     }
     
     /**
-     * 更新收款方式信息
+     * 打开收款方式对话框
      */
-    const updatePaymentInfo = async () => {
+    const openPaymentDialog = () => {
-      if (updating.value) return
+      // 重置表单为当前信息
+      Object.assign(paymentForm, paymentInfo)
+      paymentDialogVisible.value = true
+    }
     
+    /**
+     * 提交收款方式表单
+     */
+    const submitPaymentForm = () => {
+      paymentFormRef.value.validate(async (valid) => {
+        if (!valid) return
+        
+        if (updating.value) return
         updating.value = true
+        
         try {
           const response = await api.put('/agent-withdrawals/payment-info', paymentForm)
           if (response.data.success) {
             Object.assign(paymentInfo, paymentForm)
-          showPaymentForm.value = false
+            paymentDialogVisible.value = false
-          alert('收款方式更新成功')
+            ElMessage.success('收款方式更新成功')
           } else {
-          alert(response.data.message || '更新失败')
+            ElMessage.error(response.data.message || '更新失败')
           }
         } catch (error) {
           console.error('更新收款方式失败:', error)
-        alert('更新失败，请重试')
+          ElMessage.error('更新失败，请重试')
         } finally {
           updating.value = false
         }
+      })
+    }
+    
+    /**
+     * 处理对话框关闭
+     */
+    const handleDialogClose = (done) => {
+      if (JSON.stringify(paymentForm) !== JSON.stringify(paymentInfo)) {
+        ElMessageBox.confirm('您有未保存的更改，确定要关闭吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          done()
+        }).catch(() => {})
+      } else {
+        done()
+      }
     }
     
     /**
@@ -400,13 +451,13 @@ export default {
       if (submitting.value || !canWithdraw.value) return
       
       if (!paymentInfo.account_number || !paymentInfo.payment_type) {
-         alert('请先设置收款方式')
+        ElMessage.warning('请先设置收款方式')
         return
       }
        
       // 收款码类型需要验证图片
       if (paymentInfo.payment_type !== 'bank' && !paymentInfo.qr_code_url) {
-         alert('请上传收款码图片')
+        ElMessage.warning('请上传收款码图片')
         return
       }
       
@@ -417,16 +468,16 @@ export default {
         })
         
         if (response.data.success) {
-          alert('提现申请提交成功，请等待审核')
+          ElMessage.success('提现申请提交成功，请等待审核')
           withdrawalForm.amount = ''
           await loadCommissionStats()
           await loadWithdrawalRecords()
         } else {
-          alert(response.data.message || '申请失败')
+          ElMessage.error(response.data.message || '申请失败')
         }
       } catch (error) {
         console.error('提现申请失败:', error)
-        alert('申请失败，请重试')
+        ElMessage.error('申请失败，请重试')
       } finally {
         submitting.value = false
       }
@@ -449,6 +500,7 @@ export default {
         }
       } catch (error) {
         console.error('加载提现记录失败:', error)
+        ElMessage.error('加载提现记录失败')
       } finally {
         loading.value = false
       }
@@ -488,49 +540,52 @@ export default {
     /**
      * 处理收款码图片上传
      */
-    const handleQrCodeUpload = async (event) => {
+    const handleQrCodeUpload = async (file) => {
-      const file = event.target.files[0]
-      if (!file) return
-      
       // 验证文件类型
-      if (!file.type.startsWith('image/')) {
+      if (!file.raw.type.startsWith('image/')) {
-        alert('请选择图片文件')
+        ElMessage.error('请选择图片文件')
-        return
+        return false
       }
       
       // 验证文件大小（限制为5MB）
-      if (file.size > 5 * 1024 * 1024) {
+      if (file.raw.size > 5 * 1024 * 1024) {
-        alert('图片大小不能超过5MB')
+        ElMessage.error('图片大小不能超过5MB')
-        return
+        return false
       }
       
       uploadingQrCode.value = true
+      uploadProgress.value = 0
       
       try {
         const formData = new FormData()
-        formData.append('qrCode', file)
+        formData.append('qrCode', file.raw)
         
         const response = await api.post('/agent-withdrawals/upload-qr-code', formData, {
           headers: {
             'Content-Type': 'multipart/form-data'
+          },
+          onUploadProgress: (progressEvent) => {
+            if (progressEvent.total) {
+              uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+            }
           }
         })
         
         if (response.data.success) {
           paymentForm.qr_code_url = response.data.data.url
+          ElMessage.success('上传成功')
         } else {
-          alert(response.data.message || '上传失败')
+          ElMessage.error(response.data.message || '上传失败')
         }
       } catch (error) {
         console.error('上传收款码失败:', error)
-        alert('上传失败，请重试')
+        ElMessage.error('上传失败，请重试')
       } finally {
         uploadingQrCode.value = false
+        uploadProgress.value = 0
       }
     }
     
-
-    
     /**
      * 获取收款方式显示文本
      */
@@ -606,11 +661,11 @@ export default {
       } else {
         paymentForm.qr_code_url = ''
       }
-    }
       
-    // 监听收款方式信息变化
+      // 重置验证状态
-    const initPaymentForm = () => {
+      nextTick(() => {
-      Object.assign(paymentForm, paymentInfo)
+        paymentFormRef.value.clearValidate(['bank_name', 'qr_code_url'])
+      })
     }
     
     /**
@@ -624,38 +679,52 @@ export default {
     onMounted(async () => {
       await loadCommissionStats()
       await loadWithdrawalRecords()
-      initPaymentForm()
     })
     
     return {
+      // 引用
+      paymentFormRef,
+      
+      // 状态
       loading,
       updating,
       submitting,
-      showPaymentForm,
+      paymentDialogVisible,
       recordsFilter,
+      uploadingQrCode,
+      uploadProgress,
+      
+      // 数据
       commissionStats,
       paymentInfo,
       paymentForm,
       withdrawalForm,
       withdrawalRecords,
+      
+      // 计算属性
       canWithdraw,
+      
+      // 方法
       loadCommissionStats,
-      updatePaymentInfo,
+      openPaymentDialog,
+      submitPaymentForm,
+      handleDialogClose,
       submitWithdrawal,
       loadWithdrawalRecords,
       formatDate,
       getStatusText,
       maskAccount,
       handleQrCodeUpload,
-      uploadingQrCode,
       getPaymentTypeText,
       getAccountLabel,
       getHolderLabel,
       getAccountPlaceholder,
       getHolderPlaceholder,
       onPaymentTypeChange,
-      initPaymentForm,
+      goBack,
-      goBack
+      
+      // 表单规则
+      paymentFormRules
     }
   }
 }
@@ -666,64 +735,62 @@ export default {
   padding: 20px;
   max-width: 1200px;
   margin: 0 auto;
+  background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
 }
 
 /* 页面头部 */
 .page-header {
   display: flex;
   align-items: center;
-  gap: 16px;
+  position: relative;
   margin-bottom: 24px;
   padding-bottom: 16px;
   border-bottom: 1px solid #eee;
 }
 
-.page-header h2 {
+.page-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   margin: 0;
   font-size: 24px;
-  color: #333;
+  color: white;
   font-weight: 600;
 }
 
 /* 返回按钮 */
 .btn-back {
-  display: flex;
-  align-items: center;
   gap: 8px;
   padding: 10px 16px;
-  background: #f8f9fa;
+  background: none;
-  border: 1px solid #dee2e6;
+  border: none;
   border-radius: 8px;
-  color: #495057;
   font-size: 14px;
+  color: white;
   cursor: pointer;
-  transition: all 0.3s ease;
 }
 
 .btn-back:hover {
-  background: #e9ecef;
   border-color: #adb5bd;
-  color: #212529;
 }
 
 .btn-back .icon-arrow-left::before {
-  content: '←';
+  content: '<';
   font-size: 16px;
 }
 
 /* 统计卡片 */
 .stats-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin-bottom: 30px;
+  width: 343px;
 }
 
 .stat-card {
-  background: white;
   border-radius: 12px;
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   gap: 16px;
@@ -773,14 +840,13 @@ export default {
 }
 
 /* 通用区块样式 */
-.payment-info-section,
 .withdrawal-section,
 .records-section {
-  background: white;
   border-radius: 12px;
   padding: 24px;
-  margin-bottom: 20px;
+  margin: 0 auto 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  width: 343px;
 }
 
 .section-header {
@@ -789,187 +855,21 @@ export default {
   align-items: center;
   margin-bottom: 20px;
   padding-bottom: 12px;
-  border-bottom: 1px solid #eee;
 }
 
 .section-header h3 {
   margin: 0;
   font-size: 18px;
   color: #333;
-}
+  line-height: 24px;
-
-/* 收款方式信息显示 */
-.payment-info-display {
-  display: grid;
-  gap: 12px;
-}
-
-.info-item {
-  display: flex;
-  align-items: center;
-}
-
-.info-item .label {
-  width: 100px;
-  color: #666;
-  font-size: 14px;
-}
-
-.info-item .value {
-  color: #333;
-  font-size: 14px;
-}
-
-/* 收款码预览 */
-.qr-code-preview {
-  grid-template-columns: auto 1fr;
-  align-items: flex-start;
-}
-
-.qr-code-image {
-  max-width: 150px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.qr-code-image img {
-  width: 100%;
-  height: auto;
-  display: block;
 }
 
 /* 表单样式 */
-.payment-form,
 .withdrawal-form {
   display: grid;
   gap: 20px;
 }
 
-/* 收款方式选择器 */
-.payment-type-selector {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.payment-type-option {
-  padding: 12px 16px;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  background: white;
-  cursor: pointer;
-  text-align: center;
-  transition: all 0.3s ease;
-  font-weight: 500;
-}
-
-.payment-type-option:hover {
-  border-color: #007bff;
-  background: #f8f9fa;
-}
-
-.payment-type-option.active {
-  border-color: #007bff;
-  background: #007bff;
-  color: white;
-}
-
-.payment-type-option.active:hover {
-  background: #0056b3;
-}
-
-/* 收款码上传 */
-.qr-code-upload {
-  display: grid;
-  gap: 12px;
-}
-
-.upload-area {
-  border: 2px dashed #ddd;
-  border-radius: 8px;
-  padding: 20px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  min-height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.upload-area:hover {
-  border-color: #007bff;
-  background: #f8f9fa;
-}
-
-.upload-area.has-image {
-  padding: 0;
-  border: 1px solid #ddd;
-  position: relative;
-  overflow: hidden;
-}
-
-.upload-placeholder {
-  display: grid;
-  gap: 8px;
-  color: #666;
-}
-
-.upload-icon {
-  font-size: 32px;
-}
-
-.upload-text {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.upload-hint {
-  font-size: 12px;
-  color: #999;
-}
-
-.uploaded-image {
-  position: relative;
-  width: 100%;
-  height: 200px;
-}
-
-.uploaded-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 8px;
-}
-
-.image-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  border-radius: 8px;
-}
-
-.uploaded-image:hover .image-overlay {
-  opacity: 1;
-}
-
-.upload-progress {
-  text-align: center;
-  color: #007bff;
-  font-size: 14px;
-}
-
 .form-group {
   display: grid;
   gap: 8px;
@@ -981,32 +881,34 @@ export default {
   font-weight: 500;
 }
 
-.form-group input,
+.amount-info {
-.form-group select {
+  display: flex;
-  padding: 12px;
+  justify-content: space-between;
-  border: 1px solid #ddd;
+  align-items: center;
-  border-radius: 8px;
-  font-size: 14px;
-  transition: border-color 0.3s;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #007bff;
 }
 
 .amount-input {
   position: relative;
   display: flex;
   align-items: center;
+  width: 100%;
 }
 
 .amount-input input {
-  flex: 1;
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border-color 0.3s;
   padding-right: 40px;
 }
 
+.amount-input input:focus {
+  outline: none;
+  border-color: #007bff;
+}
+
 .currency {
   position: absolute;
   right: 12px;
@@ -1017,20 +919,20 @@ export default {
 .amount-tips {
   font-size: 12px;
   color: #666;
+  margin-right: 10px;
 }
 
 .form-actions {
   display: flex;
-  gap: 12px;
+  justify-content: center; /* 将右对齐改为居中对齐 */
 }
 
 /* 按钮样式 */
 .btn-primary,
-.btn-secondary,
 .btn-edit {
   padding: 10px 20px;
   border: none;
-  border-radius: 8px;
+  border-radius: 1000px;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s;
@@ -1039,6 +941,8 @@ export default {
 .btn-primary {
   background: #007bff;
   color: white;
+  width: 300px;
+  /* 保持申请提现按钮原有样式不变 */
 }
 
 .btn-primary:hover:not(:disabled) {
@@ -1050,20 +954,12 @@ export default {
   cursor: not-allowed;
 }
 
-.btn-secondary {
-  background: #6c757d;
-  color: white;
-}
-
-.btn-secondary:hover {
-  background: #545b62;
-}
-
 .btn-edit {
   background: #28a745;
   color: white;
   padding: 8px 16px;
   font-size: 12px;
+  white-space: nowrap;
 }
 
 .btn-edit:hover {
@@ -1071,11 +967,18 @@ export default {
 }
 
 /* 筛选控件 */
+.filter-controls {
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+
 .filter-controls select {
-  padding: 8px 12px;
+  padding: 4px 8px;
   border: 1px solid #ddd;
   border-radius: 6px;
   font-size: 14px;
+  height: 24px;
 }
 
 /* 记录列表 */
@@ -1093,7 +996,7 @@ export default {
 }
 
 .record-item {
-  border: 1px solid #eee;
+  border: 1px solid black;
   border-radius: 8px;
   padding: 16px;
   transition: box-shadow 0.3s;
@@ -1176,11 +1079,6 @@ export default {
     padding: 16px;
   }
   
-  .stats-cards {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-  
   .stat-card {
     padding: 20px;
   }
@@ -1191,14 +1089,11 @@ export default {
     gap: 12px;
   }
   
-  .form-actions {
-    flex-direction: column;
-  }
-  
   .record-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
   }
 }
+
 </style>