feat: 完成客户端个人中心和抬头管理功能

- 新增首页，登录后跳转到首页
- 新增个人中心页面，包含估值记录、对公转账、抬头管理三个模块
- 新增抬头管理添加页面，支持添加发票抬头信息
- 优化登录流程，添加短信验证码输入框
- 统一使用系统配色方案和设计风格
- 对公转账定价设置为6000元/次

web1/src/router/routes/index.js

@@ -18,6 +18,24 @@ export const basicRoutes = [
       title: '首页',
     },
   },
+  {
+    name: 'UserCenter',
+    path: '/user-center',
+    component: () => import('@/views/user-center/index.vue'),
+    isHidden: true,
+    meta: {
+      title: '个人中心',
+    },
+  },
+  {
+    name: 'InvoiceHeaderAdd',
+    path: '/invoice-header/add',
+    component: () => import('@/views/invoice-header/add.vue'),
+    isHidden: true,
+    meta: {
+      title: '添加抬头',
+    },
+  },
   {
     name: t('views.workbench.label_workbench'),
     path: '/workbench',

web1/src/views/home/index.vue

@@ -41,8 +41,7 @@ function handleStartEvaluation() {
 }
 
 function handleUserCenter() {
-  // TODO: 跳转到个人中心页面
+  router.push('/user-center')
-  $message.info('个人中心功能开发中')
 }
 </script>
 

web1/src/views/invoice-header/add.vue

@@ -0,0 +1,454 @@
+<template>
+  <div class="invoice-header-add">
+    <!-- 左侧边栏 -->
+    <div class="sidebar">
+      <!-- 用户信息 -->
+      <div class="user-info">
+        <div class="avatar">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
+            <path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="white" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="user-phone">{{ userPhone }}</div>
+        <div class="user-count">累计估值次数: {{ valuationCount }}</div>
+      </div>
+
+      <!-- 菜单列表 -->
+      <div class="menu-list">
+        <div 
+          v-for="menu in menuList" 
+          :key="menu.id" 
+          class="menu-item"
+          :class="{ active: menu.id === 'invoice' }"
+          @click="handleMenuClick(menu)"
+        >
+          <component :is="menu.icon" class="menu-icon" />
+          <span class="menu-text">{{ menu.label }}</span>
+          <svg v-if="menu.id !== 'invoice'" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧表单区 -->
+    <div class="content-area">
+      <div class="content-section">
+        <n-form
+          ref="formRef"
+          :model="formData"
+          :rules="formRules"
+          label-placement="left"
+          label-width="auto"
+          require-mark-placement="left"
+          class="invoice-form"
+        >
+          <n-form-item label="公司名称" path="company_name">
+            <n-input 
+              v-model:value="formData.company_name" 
+              placeholder="请输入公司名称"
+              :maxlength="100"
+            />
+          </n-form-item>
+
+          <n-form-item label="公司税号" path="tax_number">
+            <n-input 
+              v-model:value="formData.tax_number" 
+              placeholder="请输入公司税号"
+              :maxlength="50"
+            />
+          </n-form-item>
+
+          <n-form-item label="注册地址" path="address">
+            <n-input 
+              v-model:value="formData.address" 
+              placeholder="请输入注册地址"
+              :maxlength="200"
+            />
+          </n-form-item>
+
+          <n-form-item label="注册电话" path="phone">
+            <n-input 
+              v-model:value="formData.phone" 
+              placeholder="请输入注册电话"
+              :maxlength="20"
+            />
+          </n-form-item>
+
+          <n-form-item label="开户银行" path="bank_name">
+            <n-input 
+              v-model:value="formData.bank_name" 
+              placeholder="请输入开户银行"
+              :maxlength="100"
+            />
+          </n-form-item>
+
+          <n-form-item label="银行账号" path="bank_account">
+            <n-input 
+              v-model:value="formData.bank_account" 
+              placeholder="请输入银行账号"
+              :maxlength="50"
+            />
+          </n-form-item>
+
+          <n-form-item label="邮箱" path="email">
+            <n-input 
+              v-model:value="formData.email" 
+              placeholder="请输入邮箱"
+              :maxlength="100"
+            />
+          </n-form-item>
+
+          <div class="form-actions">
+            <n-button 
+              type="primary" 
+              :loading="loading"
+              @click="handleSubmit"
+            >
+              保存
+            </n-button>
+          </div>
+        </n-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, h } from 'vue'
+import { useRouter } from 'vue-router'
+import api from '@/api'
+
+const router = useRouter()
+
+// 用户信息
+const userPhone = ref('')
+const valuationCount = ref(0)
+
+// 表单数据
+const formRef = ref(null)
+const loading = ref(false)
+const formData = ref({
+  company_name: '',
+  tax_number: '',
+  address: '',
+  phone: '',
+  bank_name: '',
+  bank_account: '',
+  email: ''
+})
+
+// 表单验证规则
+const formRules = {
+  company_name: [
+    { required: true, message: '请输入公司名称', trigger: 'blur' }
+  ],
+  tax_number: [
+    { required: true, message: '请输入公司税号', trigger: 'blur' }
+  ],
+  address: [
+    { required: false, message: '请输入注册地址', trigger: 'blur' }
+  ],
+  phone: [
+    { required: false, message: '请输入注册电话', trigger: 'blur' }
+  ],
+  bank_name: [
+    { required: false, message: '请输入开户银行', trigger: 'blur' }
+  ],
+  bank_account: [
+    { required: false, message: '请输入银行账号', trigger: 'blur' }
+  ],
+  email: [
+    { required: false, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ]
+}
+
+// 菜单列表
+const menuList = ref([
+  {
+    id: 'history',
+    label: '估值记录',
+    icon: () => h('svg', {
+      width: 20,
+      height: 20,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, [
+      h('path', {
+        d: 'M12 8V12L15 15',
+        stroke: 'currentColor',
+        'stroke-width': 2,
+        'stroke-linecap': 'round'
+      }),
+      h('circle', {
+        cx: 12,
+        cy: 12,
+        r: 9,
+        stroke: 'currentColor',
+        'stroke-width': 2
+      })
+    ])
+  },
+  {
+    id: 'transfer',
+    label: '对公转账',
+    icon: () => h('svg', {
+      width: 20,
+      height: 20,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, [
+      h('path', {
+        d: 'M12 2V6M12 18V22M6 12H2M22 12H18',
+        stroke: 'currentColor',
+        'stroke-width': 2,
+        'stroke-linecap': 'round'
+      }),
+      h('circle', {
+        cx: 12,
+        cy: 12,
+        r: 4,
+        stroke: 'currentColor',
+        'stroke-width': 2
+      })
+    ])
+  },
+  {
+    id: 'invoice',
+    label: '抬头管理',
+    icon: () => h('svg', {
+      width: 20,
+      height: 20,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, [
+      h('rect', {
+        x: 3,
+        y: 3,
+        width: 18,
+        height: 18,
+        rx: 2,
+        stroke: 'currentColor',
+        'stroke-width': 2
+      }),
+      h('path', {
+        d: 'M8 12H16M8 16H13',
+        stroke: 'currentColor',
+        'stroke-width': 2,
+        'stroke-linecap': 'round'
+      })
+    ])
+  }
+])
+
+// 菜单点击
+function handleMenuClick(menu) {
+  if (menu.id === 'invoice') return
+  router.push('/user-center')
+}
+
+// 提交表单
+async function handleSubmit() {
+  formRef.value?.validate(async (errors) => {
+    if (errors) return
+
+    loading.value = true
+    try {
+      // TODO: 调用添加抬头接口
+      // await api.addInvoiceHeader(formData.value)
+      
+      $message.success('保存成功')
+      // 返回上一页
+      setTimeout(() => {
+        router.back()
+      }, 500)
+    } catch (error) {
+      $message.error('保存失败，请重试')
+    } finally {
+      loading.value = false
+    }
+  })
+}
+
+// 加载用户信息
+async function loadUserInfo() {
+  try {
+    const phone = localStorage.getItem('phone')
+    if (phone) {
+      userPhone.value = phone
+    }
+
+    const res = await api.getHistoryList()
+    if (res && res.results) {
+      valuationCount.value = res.results.length
+    }
+  } catch (error) {
+    console.error('加载用户信息失败:', error)
+  }
+}
+
+onMounted(() => {
+  loadUserInfo()
+})
+</script>
+
+<style scoped>
+.invoice-header-add {
+  display: flex;
+  min-height: 100vh;
+  background: #F5F7FA;
+}
+
+/* 左侧边栏 */
+.sidebar {
+  width: 240px;
+  background: white;
+  padding: 20px;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.user-info {
+  text-align: center;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #EEEEEE;
+  margin-bottom: 20px;
+}
+
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
+  margin: 0 auto 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.user-phone {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.user-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #606266;
+}
+
+.menu-item:hover {
+  background: #F5F7FA;
+}
+
+.menu-item.active {
+  background: rgba(163, 1, 19, 0.08);
+  color: #A30113;
+}
+
+.menu-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 12px;
+}
+
+.menu-text {
+  flex: 1;
+  font-size: 14px;
+}
+
+/* 右侧内容区 */
+.content-area {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.content-section {
+  background: white;
+  border-radius: 8px;
+  padding: 60px;
+  min-height: calc(100vh - 40px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.invoice-form {
+  width: 100%;
+  max-width: 500px;
+}
+
+.invoice-form :deep(.n-form-item) {
+  margin-bottom: 24px;
+}
+
+.invoice-form :deep(.n-form-item-label) {
+  font-size: 14px;
+  color: #303133;
+  padding-right: 16px;
+  min-width: 100px;
+  text-align: right;
+}
+
+.invoice-form :deep(.n-input) {
+  height: 36px;
+}
+
+.form-actions {
+  margin-top: 48px;
+  text-align: center;
+}
+
+.form-actions .n-button {
+  width: 120px;
+  height: 40px;
+  background: #A30113;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+}
+
+.form-actions .n-button:hover {
+  background: #880C22;
+}
+
+@media (max-width: 768px) {
+  .invoice-header-add {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    width: 100%;
+  }
+  
+  .content-area {
+    padding: 20px;
+  }
+  
+  .form-container {
+    padding: 24px;
+  }
+}
+</style>

web1/src/views/user-center/index.vue

@@ -0,0 +1,762 @@
+<template>
+  <div class="user-center-container">
+    <!-- 左侧边栏 -->
+    <div class="sidebar">
+      <!-- 用户信息 -->
+      <div class="user-info">
+        <div class="avatar">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
+            <path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="white" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="user-phone">{{ userPhone }}</div>
+        <div class="user-count">累计估值次数: {{ valuationCount }}</div>
+      </div>
+
+      <!-- 菜单列表 -->
+      <div class="menu-list">
+        <div 
+          v-for="menu in menuList" 
+          :key="menu.id" 
+          class="menu-item"
+          :class="{ active: currentMenu === menu.id }"
+          @click="handleMenuClick(menu)"
+        >
+          <component :is="menu.icon" class="menu-icon" />
+          <span class="menu-text">{{ menu.label }}</span>
+          <svg v-if="menu.id !== currentMenu" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧内容区 -->
+    <div class="content-area">
+      <!-- 估值记录 -->
+      <div v-if="currentMenu === 'history'" class="content-section">
+        <div class="asset-grid">
+          <div 
+            v-for="item in assetList" 
+            :key="item.id" 
+            class="asset-card"
+          >
+            <div class="asset-header">
+              <div class="asset-title">资产名称</div>
+              <div class="asset-status" :class="getStatusClass(item.status)">
+                {{ getStatusText(item.status) }}
+              </div>
+            </div>
+            <div class="asset-date">{{ formatDate(item.created_at) }}</div>
+            <div class="asset-actions">
+              <div class="action-item" @click="handleDownloadReport(item)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                <span>报告</span>
+              </div>
+              <div class="action-item" @click="handleDownloadCertificate(item)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                <span>证书</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 对公转账 -->
+      <div v-if="currentMenu === 'transfer'" class="content-section">
+        <div class="transfer-container">
+          <!-- 步骤条 -->
+          <div class="steps">
+            <div class="step" :class="{ active: currentStep >= 1 }">
+              <div class="step-number">1</div>
+              <div class="step-label">对公汇款</div>
+            </div>
+            <div class="step-line" :class="{ active: currentStep >= 2 }"></div>
+            <div class="step" :class="{ active: currentStep >= 2 }">
+              <div class="step-number">2</div>
+              <div class="step-label">上传凭证</div>
+            </div>
+            <div class="step-line" :class="{ active: currentStep >= 3 }"></div>
+            <div class="step" :class="{ active: currentStep >= 3 }">
+              <div class="step-number">3</div>
+              <div class="step-label">等待到账</div>
+            </div>
+          </div>
+
+          <!-- 转账信息 -->
+          <div class="transfer-info">
+            <div class="info-title">第一步</div>
+            <div class="info-content">
+              <div class="info-row">
+                <span class="label">评估收费标准：</span>
+                <span class="value highlight">6000元/次</span>
+              </div>
+              <div class="info-row">
+                <span class="label">请汇款以下账户：</span>
+              </div>
+              <div class="info-row">
+                <span class="label">公司名称：</span>
+                <span class="value">成都文化产权交易所有限公司</span>
+              </div>
+              <div class="info-row">
+                <span class="label">税号：</span>
+                <span class="value">91510104586429590T</span>
+              </div>
+              <div class="info-row">
+                <span class="label">注册地址：</span>
+                <span class="value">成都市锦江区工业园区三色路38号</span>
+              </div>
+              <div class="info-row">
+                <span class="label">开户行：</span>
+                <span class="value">中国民生银行股份有限公司成都科华支行</span>
+              </div>
+              <div class="info-row">
+                <span class="label">开户账号：</span>
+                <span class="value">6343 8264 7</span>
+              </div>
+              <div class="info-row">
+                <span class="label">电话：</span>
+                <span class="value">(028) 85915289</span>
+              </div>
+            </div>
+            <n-button type="info" class="next-btn" @click="handleNextStep">
+              下一步
+            </n-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 开票管理 -->
+      <div v-if="currentMenu === 'invoice'" class="content-section">
+        <div class="invoice-container">
+          <div class="add-card" @click="handleAddInvoice">
+            <div class="add-text">添加</div>
+          </div>
+          <div class="invoice-list">
+            <div 
+              v-for="invoice in invoiceList" 
+              :key="invoice.id" 
+              class="invoice-card"
+            >
+              <div class="invoice-icon">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <rect x="3" y="3" width="18" height="18" rx="2" stroke="#909399" stroke-width="2"/>
+                  <path d="M8 12H16M8 16H13" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </div>
+              <div class="invoice-info">
+                <div class="invoice-name">{{ invoice.name }}</div>
+                <div class="invoice-status">{{ invoice.status }}</div>
+              </div>
+              <div class="invoice-action" @click="handleDeleteInvoice(invoice)">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M3 6H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, h } from 'vue'
+import api from '@/api'
+
+const router = useRouter()
+
+// 当前菜单
+const currentMenu = ref('history')
+
+// 当前步骤
+const currentStep = ref(1)
+
+// 用户信息
+const userPhone = ref('')
+const valuationCount = ref(0)
+
+// 资产列表
+const assetList = ref([])
+
+// 开票列表
+const invoiceList = ref([
+  { id: 1, name: '某某公司', status: '待审' },
+  { id: 2, name: '某某公司', status: '待审' }
+])
+
+// 菜单列表
+const menuList = ref([
+  {
+    id: 'history',
+    label: '估值记录',
+    icon: () => h('svg', {
+      width: 20,
+      height: 20,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, [
+      h('path', {
+        d: 'M12 8V12L15 15',
+        stroke: 'currentColor',
+        'stroke-width': 2,
+        'stroke-linecap': 'round'
+      }),
+      h('circle', {
+        cx: 12,
+        cy: 12,
+        r: 9,
+        stroke: 'currentColor',
+        'stroke-width': 2
+      })
+    ])
+  },
+  {
+    id: 'transfer',
+    label: '对公转账',
+    icon: () => h('svg', {
+      width: 20,
+      height: 20,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, [
+      h('path', {
+        d: 'M12 2V6M12 18V22M6 12H2M22 12H18',
+        stroke: 'currentColor',
+        'stroke-width': 2,
+        'stroke-linecap': 'round'
+      }),
+      h('circle', {
+        cx: 12,
+        cy: 12,
+        r: 4,
+        stroke: 'currentColor',
+        'stroke-width': 2
+      })
+    ])
+  },
+  {
+    id: 'invoice',
+    label: '开票管理',
+    icon: () => h('svg', {
+      width: 20,
+      height: 20,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, [
+      h('rect', {
+        x: 3,
+        y: 3,
+        width: 18,
+        height: 18,
+        rx: 2,
+        stroke: 'currentColor',
+        'stroke-width': 2
+      }),
+      h('path', {
+        d: 'M8 12H16M8 16H13',
+        stroke: 'currentColor',
+        'stroke-width': 2,
+        'stroke-linecap': 'round'
+      })
+    ])
+  }
+])
+
+// 格式化日期
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
+}
+
+// 获取状态文本
+function getStatusText(status) {
+  const statusMap = {
+    'pending': '审核中',
+    'approved': '已通过',
+    'rejected': '已拒绝',
+    'processing': '评估中'
+  }
+  return statusMap[status] || status
+}
+
+// 获取状态样式类
+function getStatusClass(status) {
+  return `status-${status}`
+}
+
+// 下载报告
+function handleDownloadReport(item) {
+  $message.info('下载报告功能开发中')
+}
+
+// 下载证书
+function handleDownloadCertificate(item) {
+  $message.info('下载证书功能开发中')
+}
+
+// 菜单点击
+function handleMenuClick(menu) {
+  currentMenu.value = menu.id
+}
+
+// 下一步
+function handleNextStep() {
+  if (currentStep.value < 3) {
+    currentStep.value++
+  }
+}
+
+// 添加开票
+function handleAddInvoice() {
+  router.push('/invoice-header/add')
+}
+
+// 删除开票
+function handleDeleteInvoice(invoice) {
+  $message.info('删除开票功能开发中')
+}
+
+// 加载数据
+async function loadData() {
+  try {
+    const phone = localStorage.getItem('phone')
+    if (phone) {
+      userPhone.value = phone
+    }
+
+    const res = await api.getHistoryList()
+    if (res && res.results) {
+      assetList.value = res.results
+      valuationCount.value = res.results.length
+    }
+  } catch (error) {
+    console.error('加载数据失败:', error)
+  }
+}
+
+onMounted(() => {
+  loadData()
+})
+</script>
+
+<style scoped>
+.user-center-container {
+  display: flex;
+  min-height: 100vh;
+  background: #F5F7FA;
+}
+
+/* 左侧边栏 */
+.sidebar {
+  width: 240px;
+  background: white;
+  padding: 20px;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.user-info {
+  text-align: center;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #EEEEEE;
+  margin-bottom: 20px;
+}
+
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
+  margin: 0 auto 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.user-phone {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.user-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #606266;
+}
+
+.menu-item:hover {
+  background: #F5F7FA;
+}
+
+.menu-item.active {
+  background: rgba(163, 1, 19, 0.08);
+  color: #A30113;
+}
+
+.menu-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 12px;
+}
+
+.menu-text {
+  flex: 1;
+  font-size: 14px;
+}
+
+/* 右侧内容区 */
+.content-area {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.content-section {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  min-height: calc(100vh - 40px);
+  position: relative;
+}
+
+/* 估值记录 */
+.asset-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.asset-card {
+  background: #F5F7FA;
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.3s ease;
+  border: 1px solid #EEEEEE;
+}
+
+.asset-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
+  border-color: #A30113;
+}
+
+.asset-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.asset-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.asset-date {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 12px;
+}
+
+.asset-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: white;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #A30113;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid #EEEEEE;
+}
+
+.action-item:hover {
+  background: #A30113;
+  color: white;
+  border-color: #A30113;
+}
+
+.action-item:hover svg path {
+  stroke: white;
+}
+
+.asset-status {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.status-pending {
+  background: #FFF3E0;
+  color: #F57C00;
+}
+
+.status-approved {
+  background: #E8F5E9;
+  color: #2E7D32;
+}
+
+.status-rejected {
+  background: #FFEBEE;
+  color: #C62828;
+}
+
+.status-processing {
+  background: #E3F2FD;
+  color: #1565C0;
+}
+
+/* 对公转账 */
+.transfer-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.step-number {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #EEEEEE;
+  color: #909399;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.step.active .step-number {
+  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
+  color: white;
+}
+
+.step-label {
+  font-size: 14px;
+  color: #909399;
+}
+
+.step.active .step-label {
+  color: #303133;
+  font-weight: 500;
+}
+
+.step-line {
+  width: 100px;
+  height: 2px;
+  background: #EEEEEE;
+  margin: 0 16px;
+  transition: all 0.3s ease;
+}
+
+.step-line.active {
+  background: #A30113;
+}
+
+.transfer-info {
+  background: #F5F7FA;
+  border-radius: 8px;
+  padding: 24px;
+  border: 1px solid #EEEEEE;
+}
+
+.info-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+  padding-left: 12px;
+  border-left: 4px solid #A30113;
+}
+
+.info-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.info-row {
+  display: flex;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.info-row .label {
+  color: #606266;
+  min-width: 120px;
+}
+
+.info-row .value {
+  color: #303133;
+  flex: 1;
+}
+
+.info-row .value.highlight {
+  color: #A30113;
+  font-weight: 600;
+}
+
+.next-btn {
+  width: 180px;
+  height: 40px;
+  margin: 0 auto;
+  display: block;
+  background: #A30113;
+  border-radius: 4px;
+  border: none;
+}
+
+.next-btn:hover {
+  background: #880C22;
+}
+
+/* 开票管理 */
+.invoice-container {
+  max-width: 1000px;
+}
+
+.add-card {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 80px;
+  height: 32px;
+  background: #A30113;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.add-card:hover {
+  background: #880C22;
+}
+
+.add-text {
+  color: white;
+  font-size: 14px;
+}
+
+.invoice-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+  margin-top: 60px;
+}
+
+.invoice-card {
+  background: #F5F7FA;
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: all 0.3s ease;
+  border: 1px solid #EEEEEE;
+}
+
+.invoice-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
+  border-color: #A30113;
+}
+
+.invoice-icon {
+  flex-shrink: 0;
+}
+
+.invoice-info {
+  flex: 1;
+}
+
+.invoice-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.invoice-status {
+  font-size: 12px;
+  color: #909399;
+}
+
+.invoice-action {
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.invoice-action:hover {
+  background: rgba(163, 1, 19, 0.1);
+}
+
+@media (max-width: 768px) {
+  .user-center-container {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    width: 100%;
+  }
+  
+  .asset-grid,
+  .invoice-list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>