diff --git a/src/views/admin/account/cost/exchange/index.vue b/src/views/admin/account/cost/exchange/index.vue
index 934887d..ee8b172 100644
--- a/src/views/admin/account/cost/exchange/index.vue
+++ b/src/views/admin/account/cost/exchange/index.vue
@@ -8,224 +8,201 @@
       <a-breadcrumb-item>算力点兑换</a-breadcrumb-item>
     </a-breadcrumb>
 
-    <!-- 页面标题 -->
-    <div class="page-header">
-      <h1 class="page-title">算力点兑换</h1>
-      <p class="page-description">使用余额兑换算力点，提升计算能力</p>
-    </div>
+
+    <!-- 余额卡片 -->
+    <a-card class="balance-card" :bordered="false">
+      <div class="balance-info">
+        <div class="balance-item">
+          <div class="balance-label">
+
+            <span class="label-text">我的余额</span>
+          </div>
+          <div class="balance-value">
+            <span class="currency">¥</span>
+            <span class="amount">{{ formatCurrency(balance) }}</span>
+          </div>
+        </div>
+        <div class="balance-item">
+          <div class="balance-label">
+
+            <span class="label-text">算力点</span>
+          </div>
+          <div class="balance-value">
+            <span class="points">{{ formatPoints(points) }}</span>
+
+          </div>
+        </div>
+      </div>
+
+    </a-card>
+
+
+    <!-- 兑换卡片 -->
+    <a-card class="exchange-card" title="兑换算力点">
+      <div class="exchange-content">
+        <!-- 兑换金额选择 -->
+        <div class="exchange-section">
+          <div class="amount-options">
+            <div class="section-title">选择兑换金额</div>
+            <a-button v-for="option in amountOptions" :key="option.value"
+              :class="['amount-option', { 'selected': selectedAmount === option.value }]"
+              @click="selectAmount(option.value)" size="large">
+              <div class="amount-option-content">
+                <div class="amount-number">{{ option.value }}</div>
+              </div>
+            </a-button>
+          </div>
+
+          <!-- 自定义输入 -->
+          <div class="custom-amount">
+            <a-input-group compact>
+              <a-input v-model:value="customAmount" placeholder="输入其他金额" size="large" style="width: calc(100% - 120px)"
+                @change="handleCustomAmountChange" :disabled="loading" />
+              <!-- <a-button type="primary" size="large" style="width: 120px" :disabled="!isCustomAmountValid || loading"
+                @click="handleCustomAmountConfirm">
+                确认
+              </a-button> -->
+            </a-input-group>
+            <p class="input-name">用户自定义输入算力点数量</p>
+            <div v-if="customAmountError" class="error-text">
+              <ExclamationCircleOutlined />
+              {{ customAmountError }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 兑换规则说明 -->
+        <div class="exchange-section">
+          <h3 class="section-title">兑换规则</h3>
+          <div class="exchange-rules">
+            <div class="rule-item">
+              <CheckCircleOutlined class="rule-icon" />
+              <span>算力点兑换比例为人民币 <strong>1元 = 1算力点</strong></span>
+            </div>
+            <div class="rule-item">
+              <ExclamationCircleOutlined class="rule-icon" />
+              <span><strong>算力点不可退</strong>，兑换前请确认需求</span>
+            </div>
+            <div class="rule-item">
+              <InfoCircleOutlined class="rule-icon" />
+              <span>兑换后算力点立即生效，可用于平台所有计算服务</span>
+            </div>
+            <div class="rule-item">
+              <SafetyOutlined class="rule-icon" />
+              <span>兑换过程安全加密，保障您的资金安全</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 兑换信息展示 -->
+        <div v-if="selectedExchangeAmount > 0" class="exchange-preview">
+          <div class="preview-card">
+            <div class="preview-header">
+              <div class="preview-title">兑换明细</div>
+              <a-button type="text" @click="clearSelection">
+                <CloseOutlined />
+              </a-button>
+            </div>
+            <div class="preview-content">
+              <div class="preview-item">
+                <span class="preview-label">兑换金额：</span>
+                <span class="preview-value">¥{{ selectedExchangeAmount }}</span>
+              </div>
+              <div class="preview-item">
+                <span class="preview-label">获得算力点：</span>
+                <span class="preview-value points-value">{{ selectedExchangeAmount }} 算力点</span>
+              </div>
+              <div class="preview-item">
+                <span class="preview-label">兑换后余额：</span>
+                <span class="preview-value">¥{{ formatCurrency(balance - selectedExchangeAmount) }}</span>
+              </div>
+              <div class="preview-item">
+                <span class="preview-label">兑换后算力点：</span>
+                <span class="preview-value points-value">{{ formatPoints(points + selectedExchangeAmount) }}
+                  算力点</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 用户协议确认 -->
+        <div class="agreement-section">
+          <a-checkbox v-model:checked="agreementChecked" :disabled="loading">
+            在确认兑换算力点前，我已阅读并确认
+            <a @click="showAgreementModal" class="agreement-link">《用户协议》</a>
+          </a-checkbox>
+          <div v-if="!agreementChecked && showAgreementError" class="error-text">
+            请阅读并确认用户协议
+          </div>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="action-buttons">
+          <a-button type="primary" size="large" :loading="loading" :disabled="!canExchange" @click="handleExchange"
+            class="exchange-button">
+            <template #icon>
+              <ThunderboltOutlined />
+            </template>
+            确认兑换
+          </a-button>
+          <a-button size="large" @click="handleCancel" :disabled="loading" class="cancel-button">
+            取消
+          </a-button>
+        </div>
+      </div>
+    </a-card>
 
     <!-- 主要内容区域 -->
     <div class="main-content">
-      <!-- 余额卡片 -->
-      <a-card class="balance-card" :bordered="false">
-        <div class="balance-info">
-          <div class="balance-item">
-            <div class="balance-label">
-              <span class="icon-wrapper">
-                <DollarCircleOutlined />
-              </span>
-              <span class="label-text">我的余额</span>
-            </div>
-            <div class="balance-value">
-              <span class="currency">¥</span>
-              <span class="amount">{{ formatCurrency(balance) }}</span>
-            </div>
-          </div>
-          <div class="balance-item">
-            <div class="balance-label">
-              <span class="icon-wrapper">
-                <ThunderboltOutlined />
-              </span>
-              <span class="label-text">当前算力点</span>
-            </div>
-            <div class="balance-value">
-              <span class="points">{{ formatPoints(points) }}</span>
-              <span class="points-unit">算力点</span>
-            </div>
-          </div>
-        </div>
-        <div class="balance-tips">
-          <InfoCircleOutlined />
-          <span>余额可用于兑换算力点，算力点可用于平台计算服务</span>
-        </div>
+      <a-card class="history-card" title="算力点兑换历史">
+        <a-table :columns="historyColumns" :data-source="exchangeHistory" row-key="key" :pagination="false">
+          <!-- 自定义状态列的渲染 -->
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'status'">
+              <span :style="{ color: getStatusColor(record.status) }">{{ getStatusText(record.status) }}</span>
+            </template>
+            <template v-else-if="column.key === 'amount' || column.key === 'points'">
+              <span>{{ formatCurrency(record.amount) }}</span>
+            </template>
+            <template v-else>
+              {{ record[column.dataIndex] }}
+            </template>
+          </template>
+        </a-table>
       </a-card>
 
-      <!-- 兑换卡片 -->
-      <a-card class="exchange-card" title="兑换算力点">
-        <div class="exchange-content">
-          <!-- 兑换金额选择 -->
-          <div class="exchange-section">
-            <h3 class="section-title">选择兑换金额</h3>
-            <p class="section-subtitle">请选择或输入要兑换的金额</p>
-            
-            <div class="amount-options">
-              <a-button
-                v-for="option in amountOptions"
-                :key="option.value"
-                :class="['amount-option', { 'selected': selectedAmount === option.value }]"
-                @click="selectAmount(option.value)"
-                size="large"
-              >
-                <div class="amount-option-content">
-                  <div class="amount-number">¥{{ option.value }}</div>
-                  <div class="amount-points">= {{ option.value }} 算力点</div>
-                </div>
-              </a-button>
-            </div>
 
-            <!-- 自定义输入 -->
-            <div class="custom-amount">
-              <a-input-group compact>
-                <a-input
-                  v-model:value="customAmount"
-                  placeholder="输入其他金额"
-                  size="large"
-                  style="width: calc(100% - 120px)"
-                  @change="handleCustomAmountChange"
-                  :disabled="loading"
-                />
-                <a-button
-                  type="primary"
-                  size="large"
-                  style="width: 120px"
-                  :disabled="!isCustomAmountValid || loading"
-                  @click="handleCustomAmountConfirm"
-                >
-                  确认
-                </a-button>
-              </a-input-group>
-              <div v-if="customAmountError" class="error-text">
-                <ExclamationCircleOutlined />
-                {{ customAmountError }}
-              </div>
-            </div>
-          </div>
 
-          <!-- 兑换规则说明 -->
-          <div class="exchange-section">
-            <h3 class="section-title">兑换规则</h3>
-            <div class="exchange-rules">
-              <div class="rule-item">
-                <CheckCircleOutlined class="rule-icon" />
-                <span>算力点兑换比例为人民币 <strong>1元 = 1算力点</strong></span>
-              </div>
-              <div class="rule-item">
-                <ExclamationCircleOutlined class="rule-icon" />
-                <span><strong>算力点不可退</strong>，兑换前请确认需求</span>
-              </div>
-              <div class="rule-item">
-                <InfoCircleOutlined class="rule-icon" />
-                <span>兑换后算力点立即生效，可用于平台所有计算服务</span>
-              </div>
-              <div class="rule-item">
-                <SafetyOutlined class="rule-icon" />
-                <span>兑换过程安全加密，保障您的资金安全</span>
-              </div>
-            </div>
-          </div>
 
-          <!-- 兑换信息展示 -->
-          <div v-if="selectedExchangeAmount > 0" class="exchange-preview">
-            <div class="preview-card">
-              <div class="preview-header">
-                <div class="preview-title">兑换明细</div>
-                <a-button type="text" @click="clearSelection">
-                  <CloseOutlined />
-                </a-button>
-              </div>
-              <div class="preview-content">
-                <div class="preview-item">
-                  <span class="preview-label">兑换金额：</span>
-                  <span class="preview-value">¥{{ selectedExchangeAmount }}</span>
-                </div>
-                <div class="preview-item">
-                  <span class="preview-label">获得算力点：</span>
-                  <span class="preview-value points-value">{{ selectedExchangeAmount }} 算力点</span>
-                </div>
-                <div class="preview-item">
-                  <span class="preview-label">兑换后余额：</span>
-                  <span class="preview-value">¥{{ formatCurrency(balance - selectedExchangeAmount) }}</span>
-                </div>
-                <div class="preview-item">
-                  <span class="preview-label">兑换后算力点：</span>
-                  <span class="preview-value points-value">{{ formatPoints(points + selectedExchangeAmount) }} 算力点</span>
-                </div>
-              </div>
-            </div>
-          </div>
 
-          <!-- 用户协议确认 -->
-          <div class="agreement-section">
-            <a-checkbox v-model:checked="agreementChecked" :disabled="loading">
-              在确认兑换算力点前，我已阅读并确认
-              <a @click="showAgreementModal" class="agreement-link">《用户协议》</a>
-            </a-checkbox>
-            <div v-if="!agreementChecked && showAgreementError" class="error-text">
-              请阅读并确认用户协议
-            </div>
-          </div>
-
-          <!-- 操作按钮 -->
-          <div class="action-buttons">
-            <a-button
-              type="primary"
-              size="large"
-              :loading="loading"
-              :disabled="!canExchange"
-              @click="handleExchange"
-              class="exchange-button"
-            >
-              <template #icon><ThunderboltOutlined /></template>
-              确认兑换
-            </a-button>
-            <a-button
-              size="large"
-              @click="handleCancel"
-              :disabled="loading"
-              class="cancel-button"
-            >
-              取消
-            </a-button>
-          </div>
-        </div>
-      </a-card>
 
     </div>
 
     <!-- 用户协议模态框 -->
-    <a-modal
-      v-model:visible="agreementModalVisible"
-      title="用户协议"
-      width="800px"
-      :footer="null"
-    >
+    <a-modal v-model:visible="agreementModalVisible" title="用户协议" width="800px" :footer="null">
       <div class="agreement-content">
         <h3>算力点兑换服务协议</h3>
         <p>欢迎使用算力点兑换服务。在兑换算力点前，请您仔细阅读以下协议内容：</p>
-        
+
         <h4>一、兑换规则</h4>
         <p>1. 算力点兑换比例为1元人民币兑换1算力点。</p>
         <p>2. 最小兑换金额为100元，最大单次兑换金额为10000元。</p>
         <p>3. 兑换操作一经确认，不可撤销或退款。</p>
-        
+
         <h4>二、使用规则</h4>
         <p>1. 算力点可用于平台提供的各项计算服务。</p>
         <p>2. 算力点不设有效期，但平台保留根据业务调整的权利。</p>
         <p>3. 算力点不可转让、不可提现、不可兑换为现金。</p>
-        
+
         <h4>三、免责声明</h4>
         <p>1. 如因系统维护、升级等需要暂停服务，平台将提前公告。</p>
         <p>2. 用户应妥善保管账户信息，因用户原因造成的损失平台不承担责任。</p>
-        
+
         <div class="agreement-footer">
           <a-checkbox v-model:checked="modalAgreementChecked">
             我已阅读并同意以上协议
           </a-checkbox>
-          <a-button
-            type="primary"
-            @click="handleAgreementConfirm"
-            :disabled="!modalAgreementChecked"
-          >
+          <a-button type="primary" @click="handleAgreementConfirm" :disabled="!modalAgreementChecked">
             确认并关闭
           </a-button>
         </div>
@@ -235,57 +212,31 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { 
-  DollarCircleOutlined, 
-  ThunderboltOutlined, 
+import { ref, computed, onMounted } from 'vue'
+import {
+  DollarCircleOutlined,
+  ThunderboltOutlined,
   InfoCircleOutlined,
   CheckCircleOutlined,
   ExclamationCircleOutlined,
   SafetyOutlined,
   CloseOutlined
 } from '@ant-design/icons-vue'
-import { message, Modal } from 'ant-design-vue'
+import { message, Modal, Divider } from 'ant-design-vue'
 
 // 用户余额和算力点
-const balance = ref(3568.50)
+const balance = ref(3568.5)
 const points = ref(1250)
 
 // 金额选项
 const amountOptions = ref([
-  { value: 100, label: '100元' },
-  { value: 200, label: '200元' },
-  { value: 500, label: '500元' },
-  { value: 1000, label: '1000元' },
-  { value: 2000, label: '2000元' },
-  { value: 5000, label: '5000元' }
-])
-
-// 选择的金额
-const selectedAmount = ref(0)
-const customAmount = ref('')
-const customAmountError = ref('')
-
-// 用户协议确认
-const agreementChecked = ref(false)
-const showAgreementError = ref(false)
-
-// 加载状态
-const loading = ref(false)
-
-// 模态框
-const agreementModalVisible = ref(false)
-const modalAgreementChecked = ref(false)
-
-// 兑换记录
-const exchangeHistory = ref([
-  { key: 1, amount: 1000, points: 1000, time: '2024-03-15 14:30:22', status: 'success' },
-  { key: 2, amount: 500, points: 500, time: '2024-03-10 09:15:45', status: 'success' },
-  { key: 3, amount: 2000, points: 2000, time: '2024-03-05 16:20:33', status: 'success' },
-  { key: 4, amount: 100, points: 100, time: '2024-02-28 11:45:12', status: 'success' },
-  { key: 5, amount: 5000, points: 5000, time: '2024-02-20 13:05:27', status: 'success' }
+  { value: 100, label: '100' },
+  { value: 200, label: '200' },
+  { value: 1000, label: '1000' },
+  { value: 5000, label: '5000' }
 ])
 
+// 注意：这里只定义 columns 结构，不包含 customRender
 const historyColumns = [
   {
     title: '兑换金额',
@@ -312,6 +263,31 @@ const historyColumns = [
   }
 ]
 
+// 选择的金额
+const selectedAmount = ref(0)
+const customAmount = ref('')
+const customAmountError = ref('')
+
+// 用户协议确认
+const agreementChecked = ref(false)
+const showAgreementError = ref(false)
+
+// 加载状态
+const loading = ref(false)
+
+// 模态框
+const agreementModalVisible = ref(false)
+const modalAgreementChecked = ref(false)
+
+// 兑换记录
+const exchangeHistory = ref([
+  { key: 1, amount: 1000, points: 1000, time: '2024-03-15 14:30:22', status: 'success' },
+  { key: 2, amount: 500, points: 500, time: '2024-03-10 09:15:45', status: 'success' },
+  { key: 3, amount: 2000, points: 2000, time: '2024-03-05 16:20:33', status: 'success' },
+  { key: 4, amount: 100, points: 100, time: '2024-02-28 11:45:12', status: 'success' },
+  { key: 5, amount: 5000, points: 5000, time: '2024-02-20 13:05:27', status: 'success' }
+])
+
 // 计算选中的兑换金额
 const selectedExchangeAmount = computed(() => {
   if (selectedAmount.value > 0) {
@@ -323,10 +299,10 @@ const selectedExchangeAmount = computed(() => {
 
 // 检查是否可以兑换
 const canExchange = computed(() => {
-  return selectedExchangeAmount.value > 0 && 
-         agreementChecked.value && 
-         selectedExchangeAmount.value <= balance.value &&
-         !loading.value
+  return selectedExchangeAmount.value > 0 &&
+    agreementChecked.value &&
+    selectedExchangeAmount.value <= balance.value &&
+    !loading.value
 })
 
 // 检查自定义金额是否有效
@@ -420,18 +396,18 @@ const handleAgreementConfirm = () => {
 // 处理兑换
 const handleExchange = () => {
   showAgreementError.value = false
-  
+
   if (!agreementChecked.value) {
     showAgreementError.value = true
     message.error('请先阅读并确认用户协议')
     return
   }
-  
+
   if (selectedExchangeAmount.value > balance.value) {
     message.error('兑换金额不能超过余额')
     return
   }
-  
+
   Modal.confirm({
     title: '确认兑换',
     content: `您确定要兑换 ¥${selectedExchangeAmount.value} 获得 ${selectedExchangeAmount.value} 算力点吗？此操作不可撤销。`,
@@ -444,17 +420,15 @@ const handleExchange = () => {
 // 执行兑换
 const performExchange = () => {
   loading.value = true
-  
+
   // 模拟API请求
   setTimeout(() => {
-    // 更新余额和算力点
     balance.value -= selectedExchangeAmount.value
     points.value += selectedExchangeAmount.value
-    
-    // 添加兑换记录
+
     const now = new Date()
     const timeStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
-    
+
     exchangeHistory.value.unshift({
       key: exchangeHistory.value.length + 1,
       amount: selectedExchangeAmount.value,
@@ -462,13 +436,11 @@ const performExchange = () => {
       time: timeStr,
       status: 'success'
     })
-    
-    // 重置选择
+
     clearSelection()
     agreementChecked.value = false
-    
     loading.value = false
-    
+
     message.success(`兑换成功！获得 ${selectedExchangeAmount.value} 算力点`)
   }, 1500)
 }
@@ -480,11 +452,6 @@ const handleCancel = () => {
   showAgreementError.value = false
 }
 
-// 格式化时间
-const formatTime = (timeStr) => {
-  return timeStr
-}
-
 // 获取状态颜色
 const getStatusColor = (status) => {
   const colors = {
@@ -505,14 +472,13 @@ const getStatusText = (status) => {
   return texts[status] || status
 }
 
-// 初始化加载
 onMounted(() => {
-  // 可以在这里加载用户余额和算力点数据
   console.log('页面加载完成')
 })
 </script>
 
 <style scoped>
+/* 你的样式保持不变 */
 .points-exchange-page {
   padding: 20px;
   background-color: #f0f2f5;
@@ -540,10 +506,7 @@ onMounted(() => {
   margin: 0;
 }
 
-.main-content {
-  max-width: 1200px;
-  margin: 0 auto;
-}
+.main-content {}
 
 .balance-card {
   margin-bottom: 20px;
@@ -581,24 +544,25 @@ onMounted(() => {
 }
 
 .label-text {
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.45);
+  font-size: 20px;
+  font-weight: 500;
+  color: rgba(56, 56, 56, 1);
 }
 
 .balance-value {
-  font-size: 28px;
+  font-size: 18px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.85);
 }
 
 .balance-value .currency {
   font-size: 20px;
-  color: #52c41a;
+  color: rgba(56, 56, 56, 1);
   margin-right: 4px;
 }
 
 .balance-value .points {
-  color: #722ed1;
+  color: rgba(56, 56, 56, 1);
 }
 
 .balance-value .points-unit {
@@ -648,8 +612,8 @@ onMounted(() => {
 
 .amount-options {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 6px;
   margin-bottom: 24px;
 }
 
@@ -661,7 +625,7 @@ onMounted(() => {
 
 .amount-option {
   height: auto !important;
-  padding: 16px !important;
+  /* padding: 6px !important; */
   border-radius: 8px !important;
   border: 2px solid #f0f0f0 !important;
   background: #fff !important;
@@ -696,7 +660,24 @@ onMounted(() => {
 }
 
 .custom-amount {
+  width: 460px;
   margin-bottom: 24px;
+  margin-left: 170px;
+
+  input {
+    height: 45px;
+  }
+
+  .input-name {
+    width: 350px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(166, 166, 166, 1);
+    height: 35px;
+    line-height: 35px;
+  }
+
 }
 
 .error-text {
@@ -888,7 +869,6 @@ onMounted(() => {
   border-top: 1px solid #f0f0f0;
 }
 
-/* 加载状态 */
 :deep(.ant-btn-loading) {
   opacity: 0.8;
 }