diff --git a/src/assets/nav.png b/src/assets/nav.png
new file mode 100644
index 0000000..5288113
Binary files /dev/null and b/src/assets/nav.png differ
diff --git a/src/assets/rognqishili.png b/src/assets/rognqishili.png
new file mode 100644
index 0000000..5a71841
Binary files /dev/null and b/src/assets/rognqishili.png differ
diff --git a/src/views/admin/home/index.vue b/src/views/admin/home/index.vue
index d878dff..4cbf359 100644
--- a/src/views/admin/home/index.vue
+++ b/src/views/admin/home/index.vue
@@ -2,21 +2,26 @@
     <div class="home-page">
         <!-- 主布局：左右两栏 -->
         <a-row :gutter="24">
-            <!-- 左侧栏：实例、数据、常见问题 -->
+            <!-- 左侧栏：实例、数据、邀请好友 -->
             <a-col :span="16">
                 <!-- 实例卡片 -->
-                <a-card title="实例" :bordered="false" class="card">
+                <a-card title="GPU容器实例" :bordered="false" class="card">
                     <a-row :gutter="32" align="middle">
                         <!-- 第一栏：容器实例和运行中 -->
-                        <a-col :span="12">
+                        <a-col :span="18">
                             <div class="stats-column">
                                 <div class="stats-row">
                                     <div class="stat-item">
-                                        <div class="stat-label">容器实例</div>
-                                        <div class="stat-value">{{ userInfo.caseNum }}</div>
+                                        <div class="stat-label">进行中</div>
+                                        <div class="stat-value">0</div>
                                     </div>
                                     <div class="stat-item">
-                                        <div class="stat-label">运行中</div>
+                                        <div class="stat-label">即将到期</div>
+                                        <div class="stat-value">0</div>
+                                    </div>
+
+                                    <div class="stat-item">
+                                        <div class="stat-label">自动续费</div>
                                         <div class="stat-value">0</div>
                                     </div>
                                 </div>
@@ -24,179 +29,150 @@
                         </a-col>
 
                         <!-- 第二栏：即将到期和即将释放 -->
-                        <a-col :span="12">
+                        <a-col :span="6">
                             <div class="stats-column">
-                                <div class="vertical-divider"></div>
+
                                 <div class="stats-row">
-                                    <div class="stat-item">
-                                        <div class="stat-label">
-                                            <span>即将到期</span>
-                                            <a-tooltip title="7天内到期的实例数量">
-                                                <QuestionCircleOutlined class="tooltip-icon" />
-                                            </a-tooltip>
-                                        </div>
-                                        <div class="stat-value orange">0</div>
-                                    </div>
-                                    <div class="stat-item">
-                                        <div class="stat-label">
-                                            <span>即将释放</span>
-                                            <a-tooltip title="3天内即将释放的实例数量">
-                                                <QuestionCircleOutlined class="tooltip-icon" />
-                                            </a-tooltip>
-                                        </div>
-                                        <div class="stat-value orange">0</div>
-                                    </div>
+                                    <img src="../../../assets/rognqishili.png" alt="warning" class="warning-icon">
                                 </div>
                             </div>
                         </a-col>
 
-                        <!-- 第三栏：预警设置 -->
-                        <!-- <a-col :span="8">
-                            <div class="stats-column">
-                                <div class="vertical-divider"></div>
-                                <div class="warning-row">
-                                    <div class="warning-module">
-                                        <div class="warning-label">
-                                            <span>到期释放</span>
-                                            <a-tooltip title="开启后，实例到期前会发送短信提醒">
-                                                <QuestionCircleOutlined class="tooltip-icon" />
-                                            </a-tooltip>
-                                        </div>
-                                        <div class="warning-controls">
-                                            <a-switch v-model:checked="switch1" size="small" />
-                                            <div class="warning-status">{{ switch1 ? '已开启' : '未开启' }}</div>
-                                        </div>
-                                        <div class="warning-actions">
-                                            <a-button type="link" size="small">发送记录</a-button>
-                                            <a-button type="link" size="small" danger>去绑定邮箱</a-button>
-                                        </div>
-                                    </div>
-                                    <div class="warning-module">
-                                        <div class="warning-label">
-                                            <span>余额不足</span>
-                                            <a-tooltip title="开启后，余额不足时会发送短信提醒">
-                                                <QuestionCircleOutlined class="tooltip-icon" />
-                                            </a-tooltip>
-                                        </div>
-                                        <div class="warning-controls">
-                                            <a-switch v-model:checked="switch2" size="small" />
-                                            <div class="warning-status">{{ switch2 ? '已开启' : '未开启' }}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </a-col> -->
                     </a-row>
                 </a-card>
 
-                <!-- 数据卡片 -->
-                <!-- <a-card title="数据" :bordered="false" class="card margin-top">
-                    <a-row type="flex" align="middle" style="height: 100%;">
-                        <a-col :span="8">
-                            <div class="data-column">
-                                <div class="data-label">容器实例数据盘</div>
-                                <div class="data-value">付费扩容容量</div>
-                                <div class="data-unit">0 <span class="data-gb">GB</span></div>
-                            </div>
-                        </a-col>
-                        <a-col :span="8">
-                            <div class="data-column">
-                                <div class="vertical-divider"></div>
-                                <div class="data-label">镜像</div>
-                                <div class="data-value">付费容量</div>
-                                <div class="data-unit">0 <span class="data-gb">GB</span></div>
-                            </div>
-                        </a-col>
-                        <a-col :span="8">
-                            <div class="data-column">
-                                <div class="vertical-divider"></div>
-                                <div class="data-label">文件存储</div>
-                                <div class="data-value">付费容量</div>
-                                <div class="data-unit">0 <span class="data-gb">GB</span></div>
-                            </div>
-                        </a-col>
-                    </a-row>
-                </a-card> -->
 
-                <!-- 常见问题卡片 -->
-                <a-card title="常见问题" :bordered="false" class="card margin-top">
-                    <a-list item-layout="horizontal" :data-source="faqList">
-                        <template #renderItem="{ item }">
-                            <a-list-item class="faq-item">
-                                <a-list-item-meta>
-                                    <template #title>
-                                        <a :href="item.path" target="_blank" class="faq-title" style="color: #999;">{{ item.question }}</a>
+                <!-- 邀请好友卡片 -->
+                <a-card title="邀请好友得算力券" :bordered="false" class="card margin-top">
+                    <a-row :gutter="24" class="invite-container">
+                        <!-- 左侧：邀请信息和链接 -->
+                        <a-col :span="24">
+                            <div class="invite-content">
+                                <div class="invite-status">
+                                    <div class="status-icon">
+                                        <LinkOutlined />
+                                    </div>
+                                    <div class="status-text">
+                                        <div class="status-title">暂无邀请链接</div>
+                                        <div class="status-desc">
+                                            通过参加邀请好友，生成邀请码使用后可得等额优惠券
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <a-button 
+                                    type="primary" 
+                                    class="generate-btn"
+                                    @click="generateInviteLink"
+                                >
+                                    <template #icon>
+                                        <PlusOutlined />
                                     </template>
-                                </a-list-item-meta>
-                            </a-list-item>
-                        </template>
-                    </a-list>
-                    <div class="more-container">
-                        <a-button type="link" class="more-btn" @click="goToDocument()">查看更多问题</a-button>
-                    </div>
+                                    生成邀请链接
+                                </a-button>
+                            </div>
+                        </a-col>
+                        
+                        <!-- 右侧：活动规则 -->
+                        
+                    </a-row>
                 </a-card>
             </a-col>
 
             <!-- 右侧栏：用户信息 + 费用信息 -->
             <a-col :span="8">
-                <!-- 用户信息卡片 -->
-                <a-card :bordered="false" class="card">
-                    <div class="user-info">
-                        <div class="user-name">{{ userInfo.userName }}</div>
-                        <a-tag color="orange">{{ userInfo.accountType === 'USER' ? '个人认证' : '企业认证' }}</a-tag>
-                    </div>
-                    <div class="user-member">
-                        <UserOutlined class="member-icon" />
-                        <span>炼丹会员<span style="color: #999;">（23天后到期）</span></span>
-                    </div>
-                    <div class="member-actions">
-                        <a-button type="link" class="member-btn">认证学生升级炼丹会员</a-button>
-                        <a-button type="link" class="member-btn">等级与会员福利</a-button>
-                    </div>
-                    <div class="growth">
-                        <div class="growth-title">成长值</div>
-                        <a-progress :percent="10" status="active" strokeColor="#d46b08" />
-                        <div class="growth-text">距离升级还需90成长值 <a href="#">升级攻略</a></div>
-                        <a-button type="link" class="growth-btn" @click="() => router.push('/layout/admin/growthValue')">进入成长值主页></a-button>
-                    </div>
-                </a-card>
-
                 <!-- 费用信息卡片 -->
-                <a-card :bordered="false" class="card margin-top">
+                <a-card :bordered="false" class="card ">
                     <div class="fee-header">
-                        <div class="fee-title">我的余额</div>
-                        <!-- <a-button type="primary" size="small" danger>去充值</a-button> -->
+                        <div class="fee-title">我的账号</div>
                     </div>
                     <div class="fee-info">
                         <div class="fee-item">
-                            <span>可用：</span>
-                            <span class="fee-value">¥{{ userInfo.balace }}</span>
-                            <span class="fee-divider">|</span>
-                            <span>冻结：</span>
-                            <span class="fee-value">¥{{ userInfo.freezeBalace }}</span>
+                            <span class="nav-item">
+                                <img src="../../../assets/nav.png" />
+                            </span>
+                            <div class="nav-account">
+                                <p>
+                                    15100000000
+                                    <i class="fee-value">
+                                        <CopyOutlined />
+                                    </i>
+                                </p>
+                                <p>立即认证</p>
+                            </div>
+                            <span class="btn-item">
+                                账户设置
+                                <ArrowRightOutlined />
+                            </span>
                         </div>
-                        <div class="fee-item">
-                            <GiftOutlined class="fee-icon" />
-                            <span>代金券</span>
-                            <span class="fee-value">暂无</span>
+                        <a-divider />
+                        <div class="fee-title" style="padding-bottom: 15px;">资产账户</div>
+                        
+                        <!-- 我的余额 -->
+                        <div class="asset-item">
+                            <div class="asset-icon-box balance-icon">
+                                <WalletOutlined class="asset-icon" />
+                            </div>
+                            <div class="asset-content">
+                                <div class="asset-name">我的余额</div>
+                                <div class="asset-value" v-if="balance >= 0">
+                                    <span class="amount">{{ formatAmount(balance) }}</span>
+                                    <a-button type="link" class="recharge-btn" @click="goToRecharge">去充值</a-button>
+                                </div>
+                                <div class="asset-value" v-else>
+                                    <span class="amount">--</span>
+                                    <a-button type="link" class="recharge-btn" @click="goToRecharge">去充值</a-button>
+                                </div>
+                            </div>
                         </div>
-                        <div class="fee-item">
-                            <TagOutlined class="fee-icon" />
-                            <span>优惠券</span>
-                            <span class="fee-value">暂无</span>
-                        </div>
-                        <div class="fee-item">
-                            <CreditCardOutlined class="fee-icon" />
-                            <span>授信</span>
-                            <span class="fee-value">暂无</span>
+                        
+                        <!-- 我的权益 -->
+                        <div class="asset-item">
+                            <div class="asset-icon-box coupon-icon">
+                                <TagOutlined class="asset-icon" />
+                            </div>
+                            <div class="asset-content">
+                                <div class="asset-name">我的权益</div>
+                                <div class="rights-info">
+                                    <!-- 算力点 -->
+                                    <div class="rights-item">
+                                        <div class="rights-label">
+                                            <span class="rights-text">算力点</span>
+                                        </div>
+                                        <div class="rights-value">
+                                            <span class="rights-amount">{{ computingPoints }}</span>
+                                            <span class="rights-unit">点</span>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- 分割线 -->
+                                    <div class="rights-divider"></div>
+                                    
+                                    <!-- 可用算力券 -->
+                                    <div class="rights-item">
+                                        <div class="rights-label">
+                                            <span class="rights-text">可用算力券</span>
+                                        </div>
+                                        <div class="rights-value">
+                                            <span class="rights-amount">{{ availableCoupons }}</span>
+                                            <span class="rights-unit">张</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <a-button type="link" class="view-coupons-btn" @click="goToCoupons">
+                                    查看全部权益
+                                    <RightOutlined style="font-size: 10px; margin-left: 2px;" />
+                                </a-button>
+                            </div>
                         </div>
+                        
                     </div>
                     <a-divider />
                     <div class="fee-links">
-                        <a-button type="link" class="fee-link">我的订单></a-button>
-                        <a-button type="link" class="fee-link">我的账单></a-button>
-                        <a-button type="link" class="fee-link">我的代金券></a-button>
-                        <a-button type="link" class="fee-link">开发票></a-button>
+                        <a-button type="link" class="fee-link" @click="goToOrders">我的订单></a-button>
+                        <a-button type="link" class="fee-link" @click="goToBills">我的账单></a-button>
+                        <a-button type="link" class="fee-link" @click="goToCoupons">我的代金券></a-button>
+                        <a-button type="link" class="fee-link" @click="goToInvoice">开发票></a-button>
                     </div>
                 </a-card>
             </a-col>
@@ -205,43 +181,94 @@
 </template>
 
 <script setup lang="ts">
-import { ref,onBeforeMount } from 'vue'
+import { ref, onBeforeMount } from 'vue'
 import {
     UserOutlined,
     GiftOutlined,
     TagOutlined,
     CreditCardOutlined,
-    QuestionCircleOutlined
+    ArrowRightOutlined,
+    CopyOutlined,
+    WalletOutlined,
+    RightOutlined,
+    LinkOutlined,
+    PlusOutlined
 } from '@ant-design/icons-vue'
-import { on } from 'events'
 import router from '@/router'
-
+import { message } from 'ant-design-vue'
 
 // 实例卡片的开关状态
 const switch1 = ref(true)
 const switch2 = ref(false)
-const userInfo=ref<any>({})
+const userInfo = ref<any>({})
+
+// 资产数据
+const balance = ref<number>(128.50) // 余额
+const computingPoints = ref<number>(5000) // 算力点
+const availableCoupons = ref<number>(3) // 可用算力券数量
+
 onBeforeMount(() => {
     userInfo.value = JSON.parse(localStorage.getItem('userInfo') || '{}');
-    console.log(userInfo.value) 
+    // 模拟从API获取数据
+    fetchUserAssets()
 })
-// 常见问题列表
-const faqList = ref([
-    { id: 1, question: '如何选择GPU?',path:'/document/select' },
-    { id: 2, question: '如何快速开始?',path:'/document/start' },
-    { id: 3, question: '学术资源加速?',path:'/document/study' },
-    { id: 4, question: '容器示例?',path:'/document/summary' },
-])
-const goToDocument = () => {
-    window.open('/document', '_blank');
-};
+
+// 格式化金额显示
+const formatAmount = (amount: number): string => {
+    return amount.toFixed(2)
+}
+
+// 格式化算力点显示（添加千分位）
+const formatComputingPoints = (points: number): string => {
+    return points.toLocaleString()
+}
+
+// 获取用户资产信息
+const fetchUserAssets = () => {
+    // 这里应该调用API获取真实数据
+    // 模拟数据
+    computingPoints.value = 5000 // 5,000算力点
+    availableCoupons.value = 3 // 3张算力券
+}
+
+// 生成邀请链接
+const generateInviteLink = () => {
+    // 这里应该是调用API生成邀请链接的逻辑
+    message.success('邀请链接生成成功！')
+    // 实际开发中应该调用API，然后显示生成的链接
+    // const link = await api.generateInviteLink()
+}
+
+// 跳转到充值页面
+const goToRecharge = () => {
+    router.push('/recharge')
+}
+
+// 跳转到权益页面
+const goToCoupons = () => {
+    router.push('/rights')
+}
+
+// 跳转到订单页面
+const goToOrders = () => {
+    router.push('/orders')
+}
+
+// 跳转到账单页面
+const goToBills = () => {
+    router.push('/bills')
+}
+
+// 跳转到发票页面
+const goToInvoice = () => {
+    router.push('/invoice')
+}
 </script>
 
 <style lang="scss" scoped>
 .home-page {
     padding: 15px;
     background: #fff;
-    // min-height: 100vh;
 }
 
 .card {
@@ -264,19 +291,16 @@ const goToDocument = () => {
     margin-top: -10px;
 }
 
-.vertical-divider {
-    width: 1px;
-    height: 80px;
-    background: #e8e8e8;
-    margin: 0 16px;
-}
-
 .stats-row {
     display: flex;
     gap: 10px;
-    /* 从 32px 减小 */
     align-items: flex-start;
     width: 100%;
+
+    img {
+        width: 150px;
+        height: 150px;
+    }
 }
 
 .stat-item {
@@ -303,220 +327,154 @@ const goToDocument = () => {
     color: #1890ff;
 }
 
-.orange {
-    color: #fa8c16;
+/* 邀请好友卡片样式 */
+.invite-container {
+    min-height: 200px;
 }
 
-.tooltip-icon {
-    color: #bfbfbf;
-    cursor: pointer;
-    font-size: 12px;
-}
-
-.tooltip-icon:hover {
-    color: #1890ff;
-}
-
-/* 预警设置样式 */
-.warning-row {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    /* 模块间距 */
-    width: 100%;
-    /* align-items: flex-start;  */
-    margin-top: 30px;
-}
-
-.warning-module {
+.invite-content {
     display: flex;
     flex-direction: column;
-    gap: 4px;
-    font-size: 12px;
-    min-width: 0;
+    height: 100%;
+    justify-content: center;
+    padding-right: 24px;
+    // border-right: 1px solid #f0f0f0;
+}
+
+.invite-status {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 24px;
+}
+
+.status-icon {
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    flex-shrink: 0;
+    
+    .anticon {
+        font-size: 24px;
+        color: #1890ff;
+    }
+}
+
+.status-text {
     flex: 1;
 }
 
-.warning-item {
-    flex: 1;
-    min-width: 0;
-    /* 防止内容撑开 */
-}
-
-.warning-content {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    /* 更紧凑 */
-    font-size: 12px;
-}
-
-.warning-label {
-    font-size: 14px;
-    color: #666;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    white-space: nowrap;
-}
-
-.warning-controls {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex-wrap: nowrap;
-}
-
-.warning-status {
-    font-size: 11px;
-    color: #999;
-    min-width: 36px;
-}
-
-.warning-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    margin-top: 2px;
-}
-
-.warning-actions .ant-btn {
-    padding: 0;
-    height: auto;
-    font-size: 12px;
-    text-align: left;
-    font-weight: bold;
-}
-
-/* 数据卡片样式 */
-.data-column {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 12px 0;
-  position: relative;
-}
-
-.data-column .vertical-divider {
-  position: absolute;
-  left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.data-label {
-    font-size: 14px;
-    color: #333;
-    margin-bottom: 4px;
-}
-
-.data-value {
-    font-size: 14px;
-    color: #999;
-    margin-bottom: 4px;
-}
-
-.data-unit {
+.status-title {
     font-size: 18px;
     font-weight: 600;
-    color: #1890ff;
-    font-weight: 600;
-    .data-gb {
-        font-size: 12px;
+    color: #333;
+    margin-bottom: 8px;
+    line-height: 1.4;
+}
+
+.status-desc {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.6;
+}
+
+.generate-btn {
+    height: 40px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 6px;
+    background: linear-gradient(90deg, #1890ff, #36cfc9);
+    border: none;
+    box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
+    transition: all 0.3s ease;
+    
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+        background: linear-gradient(90deg, #40a9ff, #5cdbd3);
+    }
+    
+    &:active {
+        transform: translateY(0);
+        box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
+    }
+    
+    .anticon {
+        margin-right: 6px;
+    }
+}
+
+/* 活动规则样式 */
+.rules-section {
+    padding-left: 24px;
+    height: 100%;
+}
+
+.rules-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+    
+    .anticon {
+        color: #ff4d4f;
+        margin-right: 8px;
+        font-size: 16px;
+    }
+    
+    span {
+        font-size: 16px;
+        font-weight: 600;
         color: #333;
     }
 }
 
-.faq-item {
-    padding: 5px 0;
-    border-bottom: 0px solid #fff;
+.rules-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
-.faq-item:last-child {
-    border-bottom: none;
-}
-
-.faq-title {
-    color: #1890ff;
-    text-decoration: none;
-}
-
-.faq-title:hover {
-    color: #40a9ff;
-}
-
-.more-container {
+.rule-item {
     display: flex;
-    justify-content: center;
-    margin-top: 16px;
-}
-
-.more-btn {
-    color: #1890ff;
-}
-
-.user-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-}
-
-.user-name {
-    font-size: 18px;
-    font-weight: 600;
-    margin-right: 8px;
-}
-
-.user-member {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-    color: #333;
-}
-
-.member-icon {
-    color: #faad14;
-    margin-right: 8px;
-}
-
-.member-actions {
+    align-items: flex-start;
     margin-bottom: 16px;
+    line-height: 1.5;
+    
+    &:last-child {
+        margin-bottom: 0;
+    }
 }
 
-.member-btn {
-    display: block;
-    margin-top: 4px;
-    color: #1890ff;
-    padding: 0;
-    height: auto;
-}
-
-.growth {
-    margin-top: 20px;
-    padding-top: 16px;
-    border-top: 1px solid #f0f0f0;
-}
-
-.growth-title {
-    font-size: 14px;
-    font-weight: 600;
-    margin-bottom: 12px;
-}
-
-.growth-text {
+.rule-number {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: linear-gradient(135deg, #1890ff, #36cfc9);
+    border-radius: 50%;
+    color: white;
     font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+    line-height: 20px;
+    margin-right: 12px;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+
+.rule-item span:last-child {
+    flex: 1;
+    font-size: 13px;
     color: #666;
-    margin: 8px 0;
-}
-
-.growth-btn {
-    padding: 0;
-    height: auto;
-    color: #1890ff;
+    line-height: 1.6;
 }
 
+/* 资产账户样式 */
 .fee-header {
     display: flex;
     justify-content: space-between;
@@ -533,29 +491,236 @@ const goToDocument = () => {
     margin-bottom: 16px;
 }
 
+/* 资产项样式 */
+.asset-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 12px 0;
+    
+    &:not(:last-child) {
+        border-bottom: 1px solid #f5f5f5;
+    }
+}
+
+.asset-icon-box {
+    width: 24px;
+    height: 24px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    margin-top: 2px;
+    flex-shrink: 0;
+    
+    &.balance-icon {
+        background: #1890ff;
+    }
+    
+    &.coupon-icon {
+        background: #fa8c16;
+    }
+}
+
+.asset-icon {
+    font-size: 14px;
+    color: white;
+}
+
+.asset-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.asset-name {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 8px;
+    line-height: 1;
+    font-weight: 500;
+}
+
+.asset-value {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.amount {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1890ff;
+    line-height: 1;
+    
+    &:before {
+        content: '¥';
+        font-size: 14px;
+        margin-right: 2px;
+    }
+}
+
+.recharge-btn {
+    padding: 0;
+    height: auto;
+    font-size: 12px;
+    color: #1890ff;
+    line-height: 1;
+    
+    &:hover {
+        color: #40a9ff;
+    }
+}
+
+/* 权益信息样式 */
+.rights-info {
+    margin-top: 10px;
+    background: #fafafa;
+    border-radius: 6px;
+    padding: 10px;
+    margin-bottom: 8px;
+    border: 1px solid #f0f0f0;
+}
+
+.rights-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+  
+}
+
+.rights-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.rights-icon {
+    font-size: 14px;
+    line-height: 1;
+}
+
+.rights-text {
+    font-size: 12px;
+    color: #666;
+    line-height: 1;
+}
+
+.rights-value {
+    display: flex;
+    align-items: baseline;
+    gap: 2px;
+}
+
+.rights-amount {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1890ff;
+    line-height: 1;
+}
+
+.rights-unit {
+    font-size: 12px;
+    color: #999;
+    line-height: 1;
+}
+
+.rights-divider {
+    height: 1px;
+    background: #f0f0f0;
+    margin: 6px 0;
+}
+
+/* 算力点特殊样式 */
+.rights-item:first-child {
+    .rights-amount {
+        color: #fa8c16; /* 算力点用橙色 */
+    }
+}
+
+/* 算力券特殊样式 */
+.rights-item:last-child {
+    .rights-amount {
+        color: #1890ff; /* 算力券用蓝色 */
+    }
+}
+
+.view-coupons-btn {
+    padding: 0;
+    height: auto;
+    font-size: 12px;
+    color: #999;
+    line-height: 1;
+    margin-top: 4px;
+    
+    &:hover {
+        color: #1890ff;
+    }
+}
+
+/* 用户信息样式 */
 .fee-item {
     display: flex;
     align-items: center;
     margin-bottom: 12px;
     font-size: 14px;
+
+    .nav-item {
+        width: 35px;
+        height: 35px;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    .nav-account {
+        padding-left: 10px;
+
+        :first-child {
+            font-weight: 500;
+            margin-top: 10px;
+            margin-bottom: 0;
+            line-height: 1.4;
+
+            .fee-value {
+                color: rgba(166, 166, 166, 1);
+                margin-left: 4px;
+                font-weight: 900;
+                padding-left: 10px;
+                font-size: 10px;
+            }
+        }
+
+        :nth-child(2) {
+            width: 60px;
+            height: 20px;
+            line-height: 20px;
+            text-align: center;
+            opacity: 1;
+            color: #fff;
+            font-weight: 600;
+            border-radius: 5px;
+            font-size: 10px;
+            background: rgba(28, 89, 255, 0.85);
+            margin-top: 5px;
+        }
+    }
 }
 
-.fee-icon {
-    color: #faad14;
-    margin-right: 8px;
-}
-
-.fee-value {
-    color: #1890ff;
-    margin-left: 4px;
-    font-weight: 500;
-}
-
-.fee-divider {
-    margin: 0 8px;
-    color: #d9d9d9;
+.btn-item {
+    height: 20px;
+    font-size: 10px;
+    padding: 2px 5px;
+    margin-top: 42px;
+    margin-left: 10px;
+    border-radius: 5px;
+    border: 1px solid rgba(166, 166, 166, 1);
+    color: rgba(56, 56, 56, 1);
 }
 
+/* 链接样式 */
 .fee-links {
     display: flex;
     flex-wrap: wrap;
@@ -566,5 +731,34 @@ const goToDocument = () => {
     padding: 0;
     height: auto;
     color: #1890ff;
+    font-size: 12px;
+    
+    &:hover {
+        color: #40a9ff;
+    }
+}
+
+/* 分割线样式 */
+:deep(.ant-divider) {
+    margin: 16px 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .invite-container {
+        flex-direction: column;
+    }
+    
+    .invite-content {
+        padding-right: 0;
+        border-right: none;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 24px;
+        margin-bottom: 24px;
+    }
+    
+    .rules-section {
+        padding-left: 0;
+    }
 }
 </style>
\ No newline at end of file