From 3ccbaef17005a4fd62e4603b01ad870b8f0802d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wei=5F=E4=BD=B3?= <weijia.svip@gmail.com>
Date: Fri, 21 Nov 2025 15:24:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=B9=B6=E6=9B=B4=E6=96=B0=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E8=B5=84=E6=BA=90=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web1/src/assets/icon/估值记录.png             | Bin 0 -> 1078 bytes
 web1/src/assets/icon/对公转账.png             | Bin 0 -> 729 bytes
 web1/src/assets/icon/报告.png                 | Bin 0 -> 522 bytes
 web1/src/assets/icon/抬头管理.png             | Bin 0 -> 753 bytes
 web1/src/assets/icon/证书.png                 | Bin 0 -> 494 bytes
 .../user-center/components/UserSidebar.vue    | 147 ++++++++++--------
 .../components/ValuationHistory.vue           |  16 +-
 web1/src/views/user-center/index.vue          | 133 +++++++++++-----
 8 files changed, 190 insertions(+), 106 deletions(-)
 create mode 100644 web1/src/assets/icon/估值记录.png
 create mode 100644 web1/src/assets/icon/对公转账.png
 create mode 100644 web1/src/assets/icon/报告.png
 create mode 100644 web1/src/assets/icon/抬头管理.png
 create mode 100644 web1/src/assets/icon/证书.png

diff --git a/web1/src/assets/icon/估值记录.png b/web1/src/assets/icon/估值记录.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e25905dae16afd66545341285ebf155329a93b0
GIT binary patch
literal 1078
zcmV-61j+k}P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv000B)Nkl<ZcmcGP
zYiJx*6oAjUlkA$uCaX5I*jAxhe=JIkl~NG<qeh9@go+wiG@;c{({7rFPO_QJ5220S
znc3_%FA*1sS^`=UB7$$s9~Eocw4(SxG!djWDtQ<;WSi`E=6dcl8+M!R_94B@nRD-X
z-0wbT*wE0BbR&hq4K7&$eSJrZG_C7NRSk9rRPFu4s(vz{>LURy7|`|b!-Io^_A8Aq
zBS0i-TCizh;jf<z(>TU~?*qUG5nwatuoF0!4fDcBXaATyt?QvDAWK;V=<V%Yd-mMq
z2L?C8Cg)6I>=3i%>~I!4?%aIWrjnbTj=LF3Za{nufZuMI#@ni@y*WHQEM?-P0R{#J
ziWg$%-vbU0A>cbjj)Hp>#n-9G@|f4_{inLR+8{lpD6OL%imy3G%G=5TzUF{6zm87~
zkB*L}^(TO7hQFt#2WSbl(&%1!d{@=(#>U235tNig&whEyvp<|{`+UvgcWhkm<^U%F
z&^<PGrX4ORD*#RFdW1&qMus16d*FVb%jKfH^l0R?7aX2Vwbs<s#O%4wN{;Y5CA9VQ
z^lV7=uK-MLzDNOvJvXPLtgOsT4N9p~2w+Ovs<yV)&oL$)<eV4A7UR!b#^sj<AnL8O
zG}|fjge=QHF8i)Y6&L2ei-@ye@~2W0EkHaT-+~AZ0(_F{yp}p`{&_mipVR!-MIw<k
z$y^Iynz+1fIF)o<k49t@bad^}Xfz!_or$$2b@?aZX=ott1`7O>^r}bGLXXiQpu2z)
zBIYCmtQj!I&s{X|l8ZY19rrZsGr7?PfHP8_?P<tR$R8p2UXpksVLTTOhpkyy0GrMB
z9c}VFIm<82UG#YOa&8;}>YU}-s&e1z{T4D58uv?NE~0(Rrz7~NX}8;`4HlrKrDX;Y
zP7q+b-remI4k3wWn(w1&i_T}WbuMCeRaPDaz%P)o&eARSmbM)@FbPyF0BK;zju2fk
zmf~vi$}esz`h_D78U?v!mm9gr6(TNXhu^o;-`;kxqM{-pY(iE5iqiHOAbd!-x%|}W
zZ@Puk(b*Zh>Da5@{5Sf37VYbi6@W-yTe7B(^!M~Rt`7u)uZKbrC$<0AlLn}(tNYh(
zbC%OgzT{}`SxU_PpsKn*6bhBn<#CFo>+kQsMc2bSu9lhx5J|FJKfQ7NZIu!-SvXD3
z55*J4@tN7V-%gF4nU2oKCJgh!r)n^`N5o%AL?5eSYHMqk6vfw9P_WJ=G0B5q{an66
zfN_R!91sr|7Z#4JO3Yx$2uQ{?HSLbl=8yROz85<DN|oQ=zKz69Kbx27+cTex%cipe
wvL#-v?>_(l0RR8W9Z<;t000I_L_t&o09MSRSUE6LnE(I)07*qoM6N<$g1g@eY5)KL

literal 0
HcmV?d00001

diff --git a/web1/src/assets/icon/对公转账.png b/web1/src/assets/icon/对公转账.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0066ac900bf0332ac3b3faaf3f7a110b593a84d
GIT binary patch
literal 729
zcmV;~0w(>5P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0007xNkl<ZcmcFj
zJ!lhQ82-NR?$TUZB}yyp(4vBi)ReXfrNpJ6n^=d?p`a*n&_!@?aB<Ylf(R~#3NBWm
zR;V~w=oCsxn!k2+iByPI8*Q7*Pwzh8_dL%ey{|n>8{Q{*f1aNUfiTXwbeLe|kY76j
zqS2@?6dJld5DZNW4hEmO0di4;+UDnN2ndHq&ZW}Xm2F*r&JBLm;N+4UAQv^LMUVOr
zI{?#5+QvILGPy;$m`)|z0o^XqjvCaW2YNwomK~7Gt&G8@2Z%Qk3k&nm|5u>~wIJ%T
zyr3n-4$!&L2b&@i;d5VQX^WPZ>0t*@&b_eF01fq4?KuC6`9Hi51dcWw#DivenG8F?
zoSNRITRZwn6@6MKtW)Xgsy3ZnjlzH#f6qxx(`P8ycs%6(&v^Fqo3_rgPM8Y@+koa+
z!T{~p<^(6K+aUCKrAlWjrCLseZ|P4@9o=Cm3~2Fs9x5`urO0eoNN{iUDv!a-v4jB<
zBU_Xj>w7^$4wHnxk1#+hRi0F9WNLR%xYMbPt;!?E$A_gbKt1NW=Jm>95mZHwFk<|m
z0H05O0A7wI3>f{s`Xy2-EIQ%Tg`rHj#_n-KRmG!>U)lV+?C1_lVF28OwVKKJDd8tt
zWc|)qxiBXr!od#Ul$K#u0ejZve7-Plte=Tgi<1sy)$%e=c7Q}#7B>FS@bCzH?yD@V
zU;5)^de{MhK<{hV<hLueNs9=h`$7$BL6Nt-pe6tQO=GcG$)_F}g{=X^kNpF|HNa<=
zSVIkJ(F47pH_QG8IK|`h%LDy=y|N_Tq>R2~l+3yTa#4d?^gyq_Xb8Y1rY91MFH*_G
z-KC}EZ8tzJYEX+F_1F<me>{l(Hvj+t|NjN$%sv1B00v1!K~w_(uDSO>{CM^)00000
LNkvXXu0mjfL-ABB

literal 0
HcmV?d00001

diff --git a/web1/src/assets/icon/报告.png b/web1/src/assets/icon/报告.png
new file mode 100644
index 0000000000000000000000000000000000000000..d90fa45ac57f7aa416a666d54e8580b2de835bc3
GIT binary patch
literal 522
zcmV+l0`>igP)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H0005MNkl<ZcmaHp
zPfJu$6u{3pS9Gkf*#tolI&;;TXEB>8BB*^E7eSjoLXiZ~dt)mh2H&KHwCn?fMMQ1F
zRnVr|1@d&BI#0!ape~$^qvE`KJR>uMqxcT@cQ5ze^W&a-xzs(f97{TLKXtBnBybeT
zT(P2az6%mW`v;E^Faw4kgjLK$0mx4Q*hx6vO(LW?AS{&LS^t*DQ!`Nnqt<r@3|Y0s
zNlv}6Y1<prj=v@4Z)>Nx(_?#g8_AJk`z4r`#8<!&N>x`CskqEfT8nt?nRg{Q?7vOg
z{*ZpL*iku9_ZiK&0rN@Zb>I+BEa{qJ!uGRWUFxqq(j!C|g3Hz4ZNOgvaBQj5dd-BB
zd=#65dNf5sxFIh#wZFUfuzJ{$mHl4~@H}wS6EK1%7)^Z$-s?4}M^h{nQa=LM%5Q$m
zR#ql^$|X1bCUC9K^}KUKQ>^WDzx*H9wm+zc&me2?<cq51G-wf3to<I7nPBFz(*SY4
zuP<}GA=SnfF>nW_1J~-6d-b2D<fd;g<oh>jLIW~v$};Iq<mT^aXLcYG`49-KFszoz
zbjH3(Su+IY4<LC_FsUg3EG!jntsVma0RR7hcHDXZ000I_L_t&o0JyUJEF!PvHvj+t
M07*qoM6N<$g5fmhVgLXD

literal 0
HcmV?d00001

diff --git a/web1/src/assets/icon/抬头管理.png b/web1/src/assets/icon/抬头管理.png
new file mode 100644
index 0000000000000000000000000000000000000000..569096f2286a05b9ebc04ded24330f8a19e645d4
GIT binary patch
literal 753
zcmV<N0uKF&P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0007}Nkl<Zcmc#!
z?`u*~7=F*$54-M1jWsLSqD8^9Y%Voz6=W7h5KV#xIV$>8&_B?J{R8W3AA%bD&=$)<
zpK2QfMb;eCt4?dypnX{svaHzLbn9O4?Hrxrwd*CT)!{zpJ-*NTyw5paI2VheSh117
zu)*Ws8W^p|3|hS@(6-<BokYGItZM?aN8z6$IYDwI)lbO17^5+S;c+>j8me9IL6+G^
zVnAND9wB%hjj-pUVYaI*5DnGR9@*B}Sz>??*)sw$OZ~=7w3!|SQi(x9KEE8<yr=bH
z&CY{zpj^JN#6r<vxIx>pmiYFLOC^1Bpd76!(L0k?G}zu{jUiOgM~;109u<AGCex|J
zq-bz_V1RR_7kXXk&)4O#&`WDd^v<Le4KfvfI4K%DYSL*2abs){Z{_9D7#q>-Yf{>S
zqCtJVIthS+2p}K_$~Dw6DNq=S1}Ep(<sKn^#wElpa-bZoQRokf21>$T<^HdMvD4P7
zH&`z_ozA-A9b0X-9r||56^FyoSj-jvE_s3j9hUB7VkyL@`Tp7WAH1d`_FXw4y^<H>
z2_G+{@6CVuGOh2hp2%^<@h1aO0JBbS9^&})5CFmm&@j3E+E$hpy#~|K!v=%ZPOju<
z0MJCp2Q+dVH?C_p-xdTgK+%vGkVbQa-zI|CP2w!0W;&y<{XMu6Uj-1itgfbBtnu79
z;VP@Es?N_u*h>tfvI9aNMM1oV0GbImPmq5k2DK{n1%$v&_I;~ayW0|+dijP{&V+pT
zRVwB*MmPc(g*GwOr^3O>CzK2NCMGm38Y9u%K?sf2)T*5{pM%7JWj$f?vAGxx`)@vV
zyO(oCG)}XxJmfT{w-NSG$mgA+xg0#BqhE>UMl|9-%T9X2xjc;$1Dg2T_yGU_|NrN-
js#gF200v1!K~w_(abc)HJob9=00000NkvXXu0mjf5u{$a

literal 0
HcmV?d00001

diff --git a/web1/src/assets/icon/证书.png b/web1/src/assets/icon/证书.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc70e1c970eca8e15f574ed3f96332a4a4713666
GIT binary patch
literal 494
zcmV<K0TKR*P)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H0004_Nkl<ZcmaHo
z&r2IY6vw~s?Y1@P4{V_nN?KZXOY=kU(n1UExzK~q(q2mcgVLM0K@k=a+=!k$>0jVU
zJ^3ey2R$fp6J?_yD1w)usL^ESIXMI}3FI*!X6C*3;lT{Q@elhPFI;o;rMgCX;p9tK
zZoV8q2lI99CxM2b<ZIlZp<aOG4<O!vSA5M(+z-NjG?U#poK5evuxxo|k#*U+H}}eP
zc2z*JSav__sa?w%k6wXjMYyp9U+k_1oiN1be({mxh07G*hN3V>gj4sreC&8(LH8QV
z5YJ9(H+oV^6fIN=>8U744}(wvD1nYJL@a)&3*vuZ{BlRPQ_ff^2T=AwA|63Um}0Xi
zRt-Wa@cl9=+7wX|`h&O4QafEDU)lR0_4}gn^hKTJtpI=9h1S^+U;3L#N!EW5*nVtR
zzu!~*MSoY)9V>l9M;KzF_AsMgasnii28w<6|HhMc*AOc~W-AJ^xoA3*F$ms&j^;m|
z8=?|b)rofl`Mr;>x0~z9XmOYz7R8M!t3=<ji0m-bI*5zC5Vn>8DjXCBkL~~f0RR7F
kI>lQ6000I_L_t&o02}DtERe<RSpWb407*qoM6N<$g4ZD1<p2Nx

literal 0
HcmV?d00001

diff --git a/web1/src/views/user-center/components/UserSidebar.vue b/web1/src/views/user-center/components/UserSidebar.vue
index 95a28f3..d81d598 100644
--- a/web1/src/views/user-center/components/UserSidebar.vue
+++ b/web1/src/views/user-center/components/UserSidebar.vue
@@ -1,112 +1,116 @@
 <template>
-  <div class="sidebar">
-    <!-- 用户信息 -->
+  <div class="sidebar-card">
     <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 class="avatar-wrapper">
+        <img src="@/assets/img/icon_user.png" alt="User" />
       </div>
-      <div class="user-phone">{{ userPhone }}</div>
-      <div class="user-count">累计估值次数: {{ valuationCount }}</div>
+      <div class="user-phone">{{ userPhone || '18988880000' }}</div>
+      <div class="valuation-count">剩余评估次数：{{ valuationCount }}</div>
     </div>
 
-    <!-- 菜单列表 -->
     <div class="menu-list">
-      <div 
-        v-for="menu in menuList" 
-        :key="menu.id" 
+      <div
+        v-for="menu in menuList"
+        :key="menu.id"
         class="menu-item"
         :class="{ active: currentMenu === menu.id }"
-        @click="handleMenuClick(menu)"
+        @click="$emit('menu-click', 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 class="menu-icon">
+          <img :src="getMenuIcon(menu.id)" :alt="menu.label" />
+        </div>
+        <span class="menu-label">{{ menu.label }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import iconHistory from '@/assets/icon/估值记录.png'
+import iconTransfer from '@/assets/icon/对公转账.png'
+import iconInvoice from '@/assets/icon/抬头管理.png'
+
 defineProps({
-  userPhone: {
-    type: String,
-    default: ''
-  },
-  valuationCount: {
-    type: Number,
-    default: 0
-  },
-  currentMenu: {
-    type: String,
-    required: true
-  },
-  menuList: {
-    type: Array,
-    default: () => []
-  }
+  userPhone: String,
+  valuationCount: Number,
+  currentMenu: String,
+  menuList: Array
 })
 
-const emit = defineEmits(['menu-click'])
+defineEmits(['menu-click'])
 
-function handleMenuClick(menu) {
-  emit('menu-click', menu)
+function getMenuIcon(id) {
+  const iconMap = {
+    'history': iconHistory,
+    'transfer': iconTransfer,
+    'invoice': iconInvoice
+  }
+  return iconMap[id]
 }
 </script>
 
 <style scoped>
-.sidebar {
-  width: 240px;
+.sidebar-card {
+  width: 280px;
   background: white;
-  padding: 20px;
-  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
 }
 
 .user-info {
-  text-align: center;
-  padding-bottom: 20px;
-  border-bottom: 1px solid #EEEEEE;
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 40px;
 }
 
-.avatar {
-  width: 60px;
-  height: 60px;
+.avatar-wrapper {
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
-  margin: 0 auto 12px;
+  background: #f0f0f0;
+  margin-bottom: 16px;
+  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.avatar-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .user-phone {
-  font-size: 16px;
-  font-weight: 500;
+  font-size: 18px;
+  font-weight: 600;
   color: #303133;
   margin-bottom: 8px;
 }
 
-.user-count {
+.valuation-count {
   font-size: 12px;
   color: #909399;
 }
 
 .menu-list {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
 .menu-item {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
-  border-radius: 4px;
+  padding: 12px 20px;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
   color: #606266;
@@ -117,23 +121,40 @@ function handleMenuClick(menu) {
 }
 
 .menu-item.active {
-  background: rgba(163, 1, 19, 0.08);
+  background: #FFF0F0;
   color: #A30113;
+  font-weight: 500;
 }
 
 .menu-icon {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.menu-text {
-  flex: 1;
+.menu-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: grayscale(100%);
+  opacity: 0.6;
+  transition: all 0.3s;
+}
+
+.menu-item.active .menu-icon img {
+  filter: none;
+  opacity: 1;
+}
+
+.menu-label {
   font-size: 14px;
 }
 
 @media (max-width: 768px) {
-  .sidebar {
+  .sidebar-card {
     width: 100%;
   }
 }
diff --git a/web1/src/views/user-center/components/ValuationHistory.vue b/web1/src/views/user-center/components/ValuationHistory.vue
index 81dc3d6..0264141 100644
--- a/web1/src/views/user-center/components/ValuationHistory.vue
+++ b/web1/src/views/user-center/components/ValuationHistory.vue
@@ -21,17 +21,11 @@
             <td>
               <div class="action-group">
                 <div class="action-btn" @click="handleDownloadReport(item)">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M3 20H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                  </svg>
+                  <img src="@/assets/icon/报告.png" alt="报告" class="action-icon" />
                   <span>下载报告</span>
                 </div>
                 <div class="action-btn" @click="handleDownloadCertificate(item)">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M3 20H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                  </svg>
+                  <img src="@/assets/icon/证书.png" alt="证书" class="action-icon" />
                   <span>下载证书</span>
                 </div>
               </div>
@@ -146,6 +140,12 @@ function handleDownloadCertificate(item) {
   opacity: 0.8;
 }
 
+.action-icon {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+}
+
 .empty-text {
   text-align: center;
   color: #909399;
diff --git a/web1/src/views/user-center/index.vue b/web1/src/views/user-center/index.vue
index 956c322..54c7aa6 100644
--- a/web1/src/views/user-center/index.vue
+++ b/web1/src/views/user-center/index.vue
@@ -1,30 +1,45 @@
 <template>
   <div class="user-center-container">
-    <!-- 左侧边栏 -->
-    <UserSidebar
-      :user-phone="userPhone"
-      :valuation-count="valuationCount"
-      :current-menu="currentMenu"
-      :menu-list="menuList"
-      @menu-click="handleMenuClick"
-    />
-
-    <!-- 右侧内容区 -->
-    <div class="content-area">
-      <!-- 返回按钮 -->
-      <div class="back-button" @click="handleBackToHome">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        <span>返回首页</span>
+    <!-- 头部 -->
+    <div class="header">
+      <div class="logo-section">
+        <img src="@/assets/images/logo.png" alt="logo" class="logo" />
       </div>
+      <div class="user-section">
+        <div class="user-avatar">
+          <img src="@/assets/img/icon_user.png" alt="User" />
+        </div>
+      </div>
+    </div>
 
-      <!-- 子路由视图 -->
-      <router-view 
-        :asset-list="assetList"
-        :invoice-list="invoiceList"
-        @return-home="handleBackToHome"
+    <!-- 主体内容容器 -->
+    <div class="main-container">
+      <!-- 左侧边栏 -->
+      <UserSidebar
+        :user-phone="userPhone"
+        :valuation-count="valuationCount"
+        :current-menu="currentMenu"
+        :menu-list="menuList"
+        @menu-click="handleMenuClick"
       />
+
+      <!-- 右侧内容区 -->
+      <div class="content-area">
+        <!-- 返回按钮 (暂时注释) -->
+        <!-- <div class="back-button" @click="handleBackToHome">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span>返回首页</span>
+        </div> -->
+
+        <!-- 子路由视图 -->
+        <router-view 
+          :asset-list="assetList"
+          :invoice-list="invoiceList"
+          @return-home="handleBackToHome"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -177,23 +192,70 @@ onMounted(() => {
 
 <style scoped>
 .user-center-container {
-  display: flex;
   min-height: 100vh;
   background: #F5F7FA;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header Styles */
+.header {
+  padding: 10px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  height: 60px;
+}
+
+.logo {
+  height: 32px;
+  width: auto;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.user-avatar img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+/* Main Container Styles */
+.main-container {
+  width: 1200px;
+  max-width: 95%;
+  margin: 20px auto;
+  display: flex;
+  gap: 20px;
+  flex: 1;
+  align-items: flex-start; /* Prevent stretching */
 }
 
 /* 右侧内容区 */
 .content-area {
   flex: 1;
-  padding: 20px;
-  overflow-y: auto;
+  background: white;
+  border-radius: 8px;
+  min-height: calc(100vh - 100px); /* Adjust based on header + margin */
   position: relative;
+  overflow: hidden; /* Ensure rounded corners */
 }
 
 .back-button {
   position: absolute;
-  top: 44px; /* Align with the content card's top padding area */
-  left: 44px; /* Align with the content card's left padding area */
+  top: 20px;
+  left: 20px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -204,24 +266,25 @@ onMounted(() => {
   font-size: 14px;
   background: transparent;
   z-index: 10;
-  box-shadow: none;
 }
 
 .back-button:hover {
   color: #A30113;
 }
 
-.back-button svg {
-  transition: transform 0.3s ease;
-}
-
-.back-button:hover svg {
-  transform: translateX(-4px);
+@media (max-width: 1200px) {
+  .main-container {
+    width: 95%;
+  }
 }
 
 @media (max-width: 768px) {
-  .user-center-container {
+  .main-container {
     flex-direction: column;
   }
+  
+  .header {
+    padding: 10px 20px;
+  }
 }
 </style>