feat: 优化用户中心页面布局和样式，并更新图标资源。

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">
+      <div class="avatar-wrapper">
-        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <img src="@/assets/img/icon_user.png" alt="User" />
-          <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-phone">{{ userPhone || '18988880000' }}</div>
-      <div class="user-count">累计估值次数: {{ valuationCount }}</div>
+      <div class="valuation-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)"
+        @click="$emit('menu-click', menu)"
       >
-        <component :is="menu.icon" class="menu-icon" />
+        <div class="menu-icon">
-        <span class="menu-text">{{ menu.label }}</span>
+          <img :src="getMenuIcon(menu.id)" :alt="menu.label" />
-        <svg v-if="menu.id !== currentMenu" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        </div>
-          <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <span class="menu-label">{{ menu.label }}</span>
-        </svg>
       </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: {
+  userPhone: String,
-    type: String,
+  valuationCount: Number,
-    default: ''
+  currentMenu: String,
-  },
+  menuList: Array
-  valuationCount: {
-    type: Number,
-    default: 0
-  },
-  currentMenu: {
-    type: String,
-    required: true
-  },
-  menuList: {
-    type: Array,
-    default: () => []
-  }
 })
 
-const emit = defineEmits(['menu-click'])
+defineEmits(['menu-click'])
 
-function handleMenuClick(menu) {
+function getMenuIcon(id) {
-  emit('menu-click', menu)
+  const iconMap = {
+    'history': iconHistory,
+    'transfer': iconTransfer,
+    'invoice': iconInvoice
+  }
+  return iconMap[id]
 }
 </script>
 
 <style scoped>
-.sidebar {
+.sidebar-card {
-  width: 240px;
+  width: 280px;
   background: white;
-  padding: 20px;
+  border-radius: 16px;
-  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+  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;
+  display: flex;
-  padding-bottom: 20px;
+  flex-direction: column;
-  border-bottom: 1px solid #EEEEEE;
+  align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 40px;
 }
 
-.avatar {
+.avatar-wrapper {
-  width: 60px;
+  width: 80px;
-  height: 60px;
+  height: 80px;
   border-radius: 50%;
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
+  background: #f0f0f0;
-  margin: 0 auto 12px;
+  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-size: 18px;
-  font-weight: 500;
+  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;
+  padding: 12px 20px;
-  border-radius: 4px;
+  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;
+  width: 24px;
-  height: 20px;
+  height: 24px;
   margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.menu-text {
+.menu-icon img {
-  flex: 1;
+  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%;
   }
 }

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">
+                  <img src="@/assets/icon/报告.png" alt="报告" class="action-icon" />
-                    <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>
                   <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">
+                  <img src="@/assets/icon/证书.png" alt="证书" class="action-icon" />
-                    <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>
                   <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;

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

@@ -1,5 +1,19 @@
 <template>
   <div class="user-center-container">
+    <!-- 头部 -->
+    <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>
+
+    <!-- 主体内容容器 -->
+    <div class="main-container">
       <!-- 左侧边栏 -->
       <UserSidebar
         :user-phone="userPhone"
@@ -11,13 +25,13 @@
 
       <!-- 右侧内容区 -->
       <div class="content-area">
-      <!-- 返回按钮 -->
+        <!-- 返回按钮 (暂时注释) -->
-      <div class="back-button" @click="handleBackToHome">
+        <!-- <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>
+        </div> -->
 
         <!-- 子路由视图 -->
         <router-view 
@@ -27,6 +41,7 @@
         />
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -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;
+  background: white;
-  overflow-y: auto;
+  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 */
+  top: 20px;
-  left: 44px; /* Align with the content card's left padding area */
+  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 {
+@media (max-width: 1200px) {
-  transition: transform 0.3s ease;
+  .main-container {
-}
+    width: 95%;
-
+  }
-.back-button:hover svg {
-  transform: translateX(-4px);
 }
 
 @media (max-width: 768px) {
-  .user-center-container {
+  .main-container {
     flex-direction: column;
   }
+  
+  .header {
+    padding: 10px 20px;
+  }
 }
 </style>