diff --git a/web1/src/assets/img/home_bg.png b/web1/src/assets/img/home_bg.png
new file mode 100644
index 0000000..935de32
Binary files /dev/null and b/web1/src/assets/img/home_bg.png differ
diff --git a/web1/src/views/home/index.vue b/web1/src/views/home/index.vue
index 978373d..893b46e 100644
--- a/web1/src/views/home/index.vue
+++ b/web1/src/views/home/index.vue
@@ -3,41 +3,40 @@
     <div class="header">
       <div class="logo-section">
         <img src="@/assets/images/logo.png" alt="logo" class="logo" />
-        <div class="user-center" @click="handleUserCenter">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
-            <path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-          <span>个人中心</span>
+      </div>
+      <div class="user-section">
+        <div class="user-avatar" @click="handleUserCenter">
+          <img src="@/assets/img/icon_user.png" alt="User" />
         </div>
       </div>
     </div>
     
-    <div class="content">
-      <div class="title-section">
+    <div class="content-wrapper">
+      <div class="glass-card">
+        <div class="card-logo">
+          <img src="@/assets/images/logo.png" alt="logo" />
+        </div>
         <h1 class="main-title">非遗IP价值评估系统</h1>
         <p class="subtitle">基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务</p>
-      </div>
-      
-      <div class="action-section">
-        <n-button
-          type="primary"
-          size="large"
-          class="start-btn"
-          @click="handleStartEvaluation"
-        >
-          开始评估
-        </n-button>
+        
+        <div class="action-section">
+          <button class="start-btn" @click="handleStartEvaluation">
+            开始评估
+            <img src="@/assets/images/go.png" alt="arrow" class="arrow-icon" />
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
+
 const router = useRouter()
 
 function handleStartEvaluation() {
-  router.push('/pages')
+  router.push('/valuation/list')
 }
 
 function handleUserCenter() {
@@ -48,115 +47,145 @@ function handleUserCenter() {
 <style scoped>
 .home-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
+  width: 100%;
+  background-image: url('@/assets/img/home_bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
+  position: relative;
+  overflow: hidden;
 }
 
 .header {
   padding: 20px 40px;
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.logo-section {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  max-width: 1200px;
-  margin: 0 auto;
+  align-items: center;
+  z-index: 10;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
 }
 
 .logo {
-  height: 32px;
+  height: 40px;
   width: auto;
 }
 
-.user-center {
-  font-size: 16px;
-  color: #303133;
-  cursor: pointer;
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.8);
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: 8px;
-  transition: all 0.3s ease;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  overflow: hidden;
 }
 
-.user-center:hover {
-  background: rgba(136, 12, 34, 0.05);
-  color: #880C22;
+.user-avatar img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
 }
 
-.user-center svg {
-  color: currentColor;
+.user-avatar:hover {
+  transform: scale(1.05);
 }
 
-.content {
+.content-wrapper {
   flex: 1;
   display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.glass-card {
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 24px;
+  padding: 60px 80px;
+  text-align: center;
+  max-width: 900px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 40px 20px;
 }
 
-.title-section {
-  text-align: center;
-  margin-bottom: 60px;
+.card-logo {
+  margin-bottom: 30px;
+}
+
+.card-logo img {
+  height: 48px;
+  width: auto;
 }
 
 .main-title {
   font-size: 48px;
-  font-weight: 600;
-  color: #303133;
-  line-height: 1.2;
-  margin: 0 0 20px 0;
+  font-weight: 800;
+  color: #333;
+  margin-bottom: 24px;
+  letter-spacing: 2px;
 }
 
 .subtitle {
   font-size: 16px;
-  color: #606266;
-  line-height: 1.6;
-  max-width: 700px;
-  margin: 0 auto;
-}
-
-.action-section {
-  display: flex;
-  justify-content: center;
+  color: #555;
+  line-height: 1.8;
+  max-width: 600px;
+  margin: 0 auto 50px;
 }
 
 .start-btn {
-  height: 50px;
-  padding: 0 60px;
-  font-size: 18px;
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
+  background: linear-gradient(90deg, #880C22 0%, #B81C36 100%);
+  color: white;
   border: none;
+  padding: 12px 40px;
+  font-size: 18px;
   border-radius: 8px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(136, 12, 34, 0.3);
 }
 
 .start-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(136, 12, 34, 0.3);
+  box-shadow: 0 6px 16px rgba(136, 12, 34, 0.4);
+}
+
+.arrow-icon {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
 }
 
 @media (max-width: 768px) {
+  .glass-card {
+    padding: 40px 20px;
+  }
+
   .main-title {
     font-size: 32px;
   }
-  
+
   .subtitle {
     font-size: 14px;
   }
   
-  .start-btn {
-    height: 44px;
-    padding: 0 40px;
-    font-size: 16px;
+  .header {
+    padding: 15px 20px;
   }
 }
 </style>
diff --git a/web1/src/views/login/index.vue b/web1/src/views/login/index.vue
index db856c8..7d9cbdf 100644
--- a/web1/src/views/login/index.vue
+++ b/web1/src/views/login/index.vue
@@ -1,595 +1,109 @@
 <template>
-  <div class="page flex-col">
-    <div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
-      <div class="box_1 flex-row">
-        <div class="section_2 flex-col">
-          <div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
+  <AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
+    <div
+      style="transform: translateY(25px)"
+      class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
+      dark:bg-dark
+    >
+      <div w-750 px-20 style="height: 400px; padding-top: 50px; text-align: center;">
+        <img style="width: 371px; height: 60px; margin: auto;" src="@/assets/images/logo.png" alt="">
+        <div mt-50 style="text-align: center; font-size: 48px; color: #303133; line-height: 48px; font-weight: 600; ">
+          非遗IP价值评估系统
         </div>
-        <div class="section_3 flex-col">
-          <img
-            class="image_1"
-            referrerpolicy="no-referrer"
-            :src="loginTitleImg"
-          />
-          <n-form ref="formRef" :model="loginInfo" :rules="rules" :show-label="false">
-            <n-form-item path="phone">
-              <div class="block_1 flex-row">
-                <div class="image-text_1 flex-row">
-                  <img
-                    class="thumbnail_1"
-                    referrerpolicy="no-referrer"
-                    :src="iconUserImg"
-                  />
-                  <n-input
-                    v-model:value="loginInfo.phone"
-                    class="input-reset text-group_1 custom-n-input"
-                    placeholder="请输入账号"
-                    type="text"
-                    :bordered="false"
-                    @keypress.enter="handleLogin"
-                  />
-                </div>
-              </div>
-            </n-form-item>
-            <div class="block_2 flex-row justify-between">
-              <n-form-item path="verifyCode" class="verify-code-item">
-                <div class="section_4 flex-row">
-                  <div class="image-text_2 flex-row">
-                    <img
-                      class="thumbnail_2"
-                      referrerpolicy="no-referrer"
-                      :src="iconCodeImg"
-                    />
-                    <n-input
-                      v-model:value="loginInfo.verifyCode"
-                      class="input-reset text-group_2 custom-n-input"
-                      placeholder="请输入验证码"
-                      type="text"
-                      :bordered="false"
-                      @keypress.enter="handleLogin"
-                    />
-                  </div>
-                </div>
-              </n-form-item>
-              <div 
-                class="text-wrapper_1 flex-col cursor-pointer" 
-                @click="handleSendCode"
-                :class="{ 'disabled': countdown > 0 }"
-              >
-                <span class="text_1">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</span>
-              </div>
-            </div>
-          </n-form>
-          <div class="block_3 flex-row">
-            <n-checkbox v-model:checked="isAgreed" class="agreement-checkbox">
-              <span class="text-group_3">阅读并同意</span>
-              <span class="text_2">《用户协议》</span>
-            </n-checkbox>
-          </div>
-          <div 
-            class="text-wrapper_2 flex-col cursor-pointer" 
-            @click="handleLogin"
-            :style="{ backgroundImage: `url(${loginBtnBg})` }"
+        <div style="text-align: center; margin-top: 16px; color: #606266;">
+          基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务
+        </div>
+        <div mt-30>
+          <n-input
+            v-model:value="loginInfo.phone"
+            style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
+            placeholder="请输入手机号"
+            :maxlength="20"
+            @keypress.enter="handleRegister"
           >
-            <span class="text_3">立即登录</span>
-          </div>
+           <template #prefix>
+            <img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
+          </template>
+          </n-input>
+
+          <n-button
+            w-126
+            h-42
+            rounded-5
+            type="primary"
+            style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
+            @click="handleRegister"
+          >
+            立即登录
+            <img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
+          </n-button>
         </div>
       </div>
     </div>
-  </div>
+  </AppPage>
 </template>
 
 <script setup>
-import { ref, onBeforeUnmount } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { setToken } from '@/utils'
+import { lStorage, setToken } from '@/utils'
+import bgImg from '@/assets/images/login_bg.png'
 import api from '@/api'
-
-// Images
-import loginTitleImg from '@/assets/img/login_title.png'
-import iconUserImg from '@/assets/img/icon_user.png'
-import iconCodeImg from '@/assets/img/icon_code.png'
-import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
-import loginBgFull from '@/assets/img/login_bg_full.png'
-import loginBoxLeft from '@/assets/img/login_box_left.png'
-import loginBtnBg from '@/assets/img/login_btn_bg.png'
+import { addDynamicRoutes } from '@/router'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
 const { query } = useRoute()
+const { t } = useI18n({ useScope: 'global' })
 
 const loginInfo = ref({
   phone: '',
-  verifyCode: '',
 })
 
-const isAgreed = ref(false)
-const countdown = ref(0)
-let countdownTimer = null
+initLoginInfo()
+
+function initLoginInfo() {
+  if(localStorage.getItem('phone')){
+    loginInfo.value.phone = localStorage.getItem('phone')
+  }
+  // const localLoginInfo = lStorage.get('loginInfo')
+  // if (localLoginInfo) {
+  //   loginInfo.value.phone = localLoginInfo.phone || ''
+  //   loginInfo.value.password = localLoginInfo.password || ''
+  // }
+}
+
 const loading = ref(false)
 
-// Initialize login info
-if(localStorage.getItem('phone')){
-  loginInfo.value.phone = localStorage.getItem('phone')
-}
-
-const formRef = ref(null)
-const rules = {
-  phone: [
-    { required: true, message: '请输入手机号', trigger: ['input', 'blur'] },
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['input', 'blur'] }
-  ],
-  verifyCode: [
-    { required: true, message: '请输入验证码', trigger: ['input', 'blur'] }
-  ]
-}
-
-// Validate phone
-function validatePhone(phone) {
-  const phoneReg = /^1[3-9]\d{9}$/
-  return phoneReg.test(phone)
-}
-
-// Send verification code
-async function handleSendCode() {
-  if (countdown.value > 0) return
-  
+async function handleRegister() {
   const { phone } = loginInfo.value
-  
   if (!phone) {
     $message.warning('请输入手机号')
     return
   }
-  
-  if (!validatePhone(phone)) {
-    $message.warning('请输入正确的手机号')
-    return
-  }
-  
-  try {
-    await api.sendVerifyCode({ phone })
-    $message.success('验证码已发送')
-    
-    // Start countdown
-    countdown.value = 60
-    countdownTimer = setInterval(() => {
-      countdown.value--
-      if (countdown.value <= 0) {
-        clearInterval(countdownTimer)
-        countdownTimer = null
-      }
-    }, 1000)
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// Login
-async function handleLogin() {
-  const { phone, verifyCode } = loginInfo.value
-
-  if (!isAgreed.value) {
-    $message.warning('请阅读并同意用户协议')
-    return
-  }
-
-  formRef.value?.validate(async (errors) => {
-    if (!errors) {
-      loading.value = true
-      try {
-        const res = await api.loginWithVerifyCode({ phone, code: verifyCode })
-        if (res.data?.access_token) {
-          setToken(res.data.access_token)
-          localStorage.setItem('phone', phone)
-          
-          if (query.redirect) {
-            const path = query.redirect
-            Reflect.deleteProperty(query, 'redirect')
-            router.push({ path, query })
-          } else {
-            router.push('/home')
-          }
-        } else {
-           $message.error('登录失败：未获取到token')
-        }
-      } catch (error) {
-        console.error(error)
-      } finally {
-        loading.value = false
-      }
-    }
+  loading.value = true
+  await api.registerPhone({ phone })
+  .then(res=>{
+    handleLogin()
+  })
+  .catch(res=>{
+    handleLogin()
   })
 }
 
-onBeforeUnmount(() => {
-  if (countdownTimer) {
-    clearInterval(countdownTimer)
-    countdownTimer = null
-  }
-})
+async function handleLogin() {
+  const { phone } = loginInfo.value
+  loading.value = true
+  await api.loginPhone({ phone, password: phone.slice(5,11) }).catch(res=>{
+    setToken(res.error.access_token)
+    if (query.redirect) {
+      const path = query.redirect
+      localStorage.setItem('phone', phone)
+      Reflect.deleteProperty(query, 'redirect')
+      router.push({ path, query })
+    } else {
+      router.push('/')
+    }
+    loading.value = false
+  })
+  
+}
 </script>
-
-<style scoped>
-/* Utility Classes */
-.flex-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.input-reset {
-  border: none;
-  outline: none;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-
-.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Page Styles */
-.page {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  background-color: #f0f2f5; /* Fallback */
-}
-
-.section_1 {
-  background-size: cover;
-  background-position: center;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-}
-
-.box_1 {
-  box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
-  background-color: rgba(255, 255, 255, 1);
-  width: 900px;
-  height: 500px;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.section_2 {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 0px 100px 0px 0px;
-  height: 500px;
-  width: 400px;
-  position: relative;
-  overflow: hidden;
-}
-
-.group_1 {
-  /* Matches reference: width 841px, margin-left -270px inside a 400px container */
-  width: 841px;
-  height: 500px;
-  margin-left: -270px;
-  background-repeat: no-repeat;
-  /* Ensure the image covers this specific area if needed, or default */
-}
-
-.section_3 {
-  width: 331px;
-  height: 298px;
-  margin: 101px 85px 0 84px;
-}
-
-.image_1 {
-  width: 260px;
-  height: 42px;
-  margin-left: 1px;
-  /* Removed object-fit: contain to match reference behavior */
-}
-
-.block_1 {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 4px;
-  width: 330px;
-  height: 42px;
-  border: 1px solid rgba(229, 229, 229, 1);
-  margin: 50px 0 0 1px;
-  align-items: center;
-}
-
-.image-text_1 {
-  width: 100%;
-  height: 16px;
-  margin: 0 15px;
-  align-items: center;
-}
-
-.thumbnail_1 {
-  width: 16px;
-  height: 16px;
-  margin-right: 10px;
-}
-
-.text-group_1 {
-  color: rgba(48, 49, 51, 1);
-  font-size: 14px;
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-  font-weight: normal;
-  line-height: 14px;
-}
-
-.text-group_1::placeholder {
-  color: rgba(189, 189, 189, 1);
-}
-
-.block_2 {
-  width: 330px;
-  height: 42px;
-  margin: 20px 0 0 1px;
-  align-items: center;
-}
-
-.section_4 {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 4px;
-  width: 191px;
-  height: 42px;
-  border: 1px solid rgba(229, 229, 229, 1);
-  align-items: center;
-}
-
-.image-text_2 {
-  width: 100%;
-  height: 16px;
-  margin: 0 15px;
-  align-items: center;
-}
-
-.thumbnail_2 {
-  width: 16px;
-  height: 16px;
-  margin-right: 10px;
-}
-
-.text-group_2 {
-  color: rgba(48, 49, 51, 1);
-  font-size: 14px;
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-  font-weight: normal;
-  line-height: 14px;
-}
-
-.text-group_2::placeholder {
-  color: rgba(189, 189, 189, 1);
-}
-
-.text-wrapper_1 {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 4px;
-  height: 42px;
-  border: 1px solid rgba(229, 229, 229, 1);
-  width: 131px;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.3s ease;
-}
-
-.text-wrapper_1:hover:not(.disabled) {
-  border-color: rgba(163, 1, 19, 1);
-  background-color: rgba(163, 1, 19, 0.05);
-}
-
-.text-wrapper_1:active:not(.disabled) {
-  transform: scale(0.98);
-}
-
-.text_1 {
-  color: rgba(48, 49, 51, 1);
-  font-size: 14px;
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  transition: color 0.3s ease;
-}
-
-.text-wrapper_1:hover:not(.disabled) .text_1 {
-  color: rgba(163, 1, 19, 1);
-}
-
-.block_3 {
-  width: 100%;
-  margin-top: 36px;
-  align-items: center;
-}
-
-.text-group_3 {
-  color: rgba(136, 136, 136, 1);
-  font-size: 12px;
-  letter-spacing: 0.32px;
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-  font-weight: normal;
-  white-space: nowrap;
-  line-height: 12px;
-  margin-right: 4px;
-}
-
-.text_2 {
-  color: rgba(163, 1, 19, 1);
-  font-size: 12px;
-  letter-spacing: 0.32px;
-  font-family: Alibaba-PuHuiTi-M, sans-serif;
-  font-weight: normal;
-  white-space: nowrap;
-  line-height: 12px;
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.text_2:hover {
-  text-decoration: underline;
-  color: rgba(180, 1, 21, 1);
-}
-
-.text-wrapper_2 {
-  height: 42px;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  width: 330px;
-  margin: 10px 0 0 1px;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.3s ease;
-  position: relative;
-}
-
-.text-wrapper_2:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
-}
-
-.text-wrapper_2:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
-}
-
-.text_3 {
-  color: rgba(255, 255, 255, 1);
-  font-size: 18px;
-  font-family: Alibaba-PuHuiTi-M, sans-serif;
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  transition: all 0.3s ease;
-}
-
-.text-wrapper_2:hover .text_3 {
-  letter-spacing: 1px;
-}
-
-/* Custom Naive UI Overrides */
-.custom-n-input {
-  background-color: transparent !important;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.custom-n-input :deep(.n-input-wrapper) {
-  padding: 0 !important;
-}
-
-.custom-n-input :deep(.n-input__input-el) {
-  height: 16px !important;
-  line-height: 16px !important;
-  color: rgba(48, 49, 51, 1);
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-}
-
-.custom-n-input :deep(.n-input__placeholder) {
-  color: rgba(189, 189, 189, 1) !important;
-}
-
-.custom-n-input :deep(.n-input__state-border),
-.custom-n-input :deep(.n-input__border) {
-  display: none !important;
-}
-
-/* Fix Form Item Layout to prevent shifts */
-:deep(.n-form-item-feedback-wrapper) {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  padding-top: 2px;
-  line-height: 1;
-}
-
-:deep(.n-form-item) {
-  display: block;
-  margin-bottom: 0 !important;
-}
-
-/* Ensure the code input item doesn't break flex layout */
-.verify-code-item {
-  flex: 1;
-  /* The section_4 inside has fixed width, so we just let it be */
-  max-width: 191px; 
-}
-
-/* Input Container Interactions */
-.block_1,
-.section_4 {
-  transition: all 0.3s ease;
-}
-
-.block_1:hover,
-.section_4:hover {
-  border-color: rgba(163, 1, 19, 0.5);
-}
-
-.block_1:focus-within,
-.section_4:focus-within {
-  border-color: rgba(163, 1, 19, 1);
-  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
-}
-
-/* Error State Styling */
-:deep(.n-form-item.n-form-item--error) .block_1,
-:deep(.n-form-item.n-form-item--error) .section_4 {
-  border-color: #d03050;
-}
-
-:deep(.n-form-item.n-form-item--error) .block_1:focus-within,
-:deep(.n-form-item.n-form-item--error) .section_4:focus-within {
-  border-color: #d03050;
-  box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
-}
-
-/* Checkbox Customization */
-:deep(.agreement-checkbox .n-checkbox-box) {
-  border-radius: 2px;
-  transition: all 0.3s ease;
-}
-
-/* Checked State - Solid Red */
-:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box) {
-  background-color: rgba(163, 1, 19, 1) !important;
-  border: 1px solid rgba(163, 1, 19, 1) !important;
-}
-
-/* Hide the separate border element when checked to prevent color overlap/double borders */
-:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border) {
-  display: none !important;
-}
-
-/* Hover State - Red Border */
-:deep(.agreement-checkbox:hover .n-checkbox-box .n-checkbox-box__border) {
-  border-color: rgba(163, 1, 19, 1) !important;
-}
-
-/* Focus State - Red Border & Shadow */
-:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box .n-checkbox-box__border) {
-  border-color: rgba(163, 1, 19, 1) !important;
-}
-
-:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box) {
-  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.2) !important;
-}
-
-/* Ensure checkmark is white */
-:deep(.agreement-checkbox .n-checkbox-icon) {
-  color: #fff !important;
-}
-</style>
diff --git a/web1/src/views/login/index.vue.backup b/web1/src/views/login/index.vue.backup
new file mode 100644
index 0000000..65d50f9
--- /dev/null
+++ b/web1/src/views/login/index.vue.backup
@@ -0,0 +1,601 @@
+<template>
+  <div class="page flex-col">
+    <div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
+      <div class="box_1 flex-row">
+        <div class="section_2 flex-col">
+          <div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
+        </div>
+        <div class="section_3 flex-col">
+          <img
+            class="image_1"
+            referrerpolicy="no-referrer"
+            :src="loginTitleImg"
+          />
+          <n-form ref="formRef" :model="loginInfo" :rules="rules" :show-label="false">
+            <n-form-item path="phone">
+              <div class="block_1 flex-row" @click="phoneInputRef?.focus()">
+                <div class="image-text_1 flex-row">
+                  <img
+                    class="thumbnail_1"
+                    referrerpolicy="no-referrer"
+                    :src="iconUserImg"
+                  />
+                  <n-input
+                    ref="phoneInputRef"
+                    v-model:value="loginInfo.phone"
+                    class="input-reset text-group_1 custom-n-input"
+                    placeholder="请输入账号"
+                    type="text"
+                    :bordered="false"
+                    @keypress.enter="handleLogin"
+                  />
+                </div>
+              </div>
+            </n-form-item>
+            <div class="block_2 flex-row justify-between">
+              <n-form-item path="verifyCode" class="verify-code-item">
+                <div class="section_4 flex-row" @click="codeInputRef?.focus()">
+                  <div class="image-text_2 flex-row">
+                    <img
+                      class="thumbnail_2"
+                      referrerpolicy="no-referrer"
+                      :src="iconCodeImg"
+                    />
+                    <n-input
+                      ref="codeInputRef"
+                      v-model:value="loginInfo.verifyCode"
+                      class="input-reset text-group_2 custom-n-input"
+                      placeholder="请输入验证码"
+                      type="text"
+                      :bordered="false"
+                      @keypress.enter="handleLogin"
+                    />
+                  </div>
+                </div>
+              </n-form-item>
+              <div 
+                class="text-wrapper_1 flex-col cursor-pointer" 
+                @click="handleSendCode"
+                :class="{ 'disabled': countdown > 0 }"
+              >
+                <span class="text_1">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</span>
+              </div>
+            </div>
+          </n-form>
+          <div class="block_3 flex-row">
+            <n-checkbox v-model:checked="isAgreed" class="agreement-checkbox">
+              <span class="text-group_3">阅读并同意</span>
+              <span class="text_2">《用户协议》</span>
+            </n-checkbox>
+          </div>
+          <div 
+            class="text-wrapper_2 flex-col cursor-pointer" 
+            @click="handleLogin"
+            :style="{ backgroundImage: `url(${loginBtnBg})` }"
+          >
+            <span class="text_3">立即登录</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { setToken } from '@/utils'
+import api from '@/api'
+
+// Images
+import loginTitleImg from '@/assets/img/login_title.png'
+import iconUserImg from '@/assets/img/icon_user.png'
+import iconCodeImg from '@/assets/img/icon_code.png'
+import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
+import loginBgFull from '@/assets/img/login_bg_full.png'
+import loginBoxLeft from '@/assets/img/login_box_left.png'
+import loginBtnBg from '@/assets/img/login_btn_bg.png'
+
+const router = useRouter()
+const { query } = useRoute()
+
+const loginInfo = ref({
+  phone: '',
+  verifyCode: '',
+})
+
+const isAgreed = ref(false)
+const countdown = ref(0)
+let countdownTimer = null
+const loading = ref(false)
+
+// Initialize login info
+if(localStorage.getItem('phone')){
+  loginInfo.value.phone = localStorage.getItem('phone')
+}
+
+const formRef = ref(null)
+const phoneInputRef = ref(null)
+const codeInputRef = ref(null)
+
+const rules = {
+  phone: [
+    { required: true, message: '请输入手机号', trigger: ['input', 'blur'] },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['input', 'blur'] }
+  ],
+  verifyCode: [
+    { required: true, message: '请输入验证码', trigger: ['input', 'blur'] }
+  ]
+}
+
+// Validate phone
+function validatePhone(phone) {
+  const phoneReg = /^1[3-9]\d{9}$/
+  return phoneReg.test(phone)
+}
+
+// Send verification code
+async function handleSendCode() {
+  if (countdown.value > 0) return
+  
+  const { phone } = loginInfo.value
+  
+  if (!phone) {
+    $message.warning('请输入手机号')
+    return
+  }
+  
+  if (!validatePhone(phone)) {
+    $message.warning('请输入正确的手机号')
+    return
+  }
+  
+  try {
+    await api.sendVerifyCode({ phone })
+    $message.success('验证码已发送')
+    
+    // Start countdown
+    countdown.value = 60
+    countdownTimer = setInterval(() => {
+      countdown.value--
+      if (countdown.value <= 0) {
+        clearInterval(countdownTimer)
+        countdownTimer = null
+      }
+    }, 1000)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// Login
+async function handleLogin() {
+  const { phone, verifyCode } = loginInfo.value
+
+  if (!isAgreed.value) {
+    $message.warning('请阅读并同意用户协议')
+    return
+  }
+
+  formRef.value?.validate(async (errors) => {
+    if (!errors) {
+      loading.value = true
+      try {
+        const res = await api.loginWithVerifyCode({ phone, code: verifyCode })
+        if (res.data?.access_token) {
+          setToken(res.data.access_token)
+          localStorage.setItem('phone', phone)
+          
+          if (query.redirect) {
+            const path = query.redirect
+            Reflect.deleteProperty(query, 'redirect')
+            router.push({ path, query })
+          } else {
+            router.push('/home')
+          }
+        } else {
+           $message.error('登录失败：未获取到token')
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+
+onBeforeUnmount(() => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+})
+</script>
+
+<style scoped>
+/* Utility Classes */
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.input-reset {
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Page Styles */
+.page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #f0f2f5; /* Fallback */
+}
+
+.section_1 {
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.box_1 {
+  box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
+  background-color: rgba(255, 255, 255, 1);
+  width: 900px;
+  height: 500px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section_2 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 0px 100px 0px 0px;
+  height: 500px;
+  width: 400px;
+  position: relative;
+  overflow: hidden;
+}
+
+.group_1 {
+  /* Matches reference: width 841px, margin-left -270px inside a 400px container */
+  width: 841px;
+  height: 500px;
+  margin-left: -270px;
+  background-repeat: no-repeat;
+  /* Ensure the image covers this specific area if needed, or default */
+}
+
+.section_3 {
+  width: 331px;
+  height: 298px;
+  margin: 101px 85px 0 84px;
+}
+
+.image_1 {
+  width: 260px;
+  height: 42px;
+  margin-left: 1px;
+  /* Removed object-fit: contain to match reference behavior */
+}
+
+.block_1 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  width: 330px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  margin: 50px 0 0 1px;
+  align-items: center;
+}
+
+.image-text_1 {
+  width: 100%;
+  height: 16px;
+  margin: 0 15px;
+  align-items: center;
+}
+
+.thumbnail_1 {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+}
+
+.text-group_1 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  line-height: 14px;
+}
+
+.text-group_1::placeholder {
+  color: rgba(189, 189, 189, 1);
+}
+
+.block_2 {
+  width: 330px;
+  height: 42px;
+  margin: 20px 0 0 1px;
+  align-items: center;
+}
+
+.section_4 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  width: 191px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  align-items: center;
+}
+
+.image-text_2 {
+  width: 100%;
+  height: 16px;
+  margin: 0 15px;
+  align-items: center;
+}
+
+.thumbnail_2 {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+}
+
+.text-group_2 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  line-height: 14px;
+}
+
+.text-group_2::placeholder {
+  color: rgba(189, 189, 189, 1);
+}
+
+.text-wrapper_1 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  width: 131px;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.text-wrapper_1:hover:not(.disabled) {
+  border-color: rgba(163, 1, 19, 1);
+  background-color: rgba(163, 1, 19, 0.05);
+}
+
+.text-wrapper_1:active:not(.disabled) {
+  transform: scale(0.98);
+}
+
+.text_1 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.text-wrapper_1:hover:not(.disabled) .text_1 {
+  color: rgba(163, 1, 19, 1);
+}
+
+.block_3 {
+  width: 100%;
+  margin-top: 36px;
+  align-items: center;
+}
+
+.text-group_3 {
+  color: rgba(136, 136, 136, 1);
+  font-size: 12px;
+  letter-spacing: 0.32px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  white-space: nowrap;
+  line-height: 12px;
+  margin-right: 4px;
+}
+
+.text_2 {
+  color: rgba(163, 1, 19, 1);
+  font-size: 12px;
+  letter-spacing: 0.32px;
+  font-family: Alibaba-PuHuiTi-M, sans-serif;
+  font-weight: normal;
+  white-space: nowrap;
+  line-height: 12px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.text_2:hover {
+  text-decoration: underline;
+  color: rgba(180, 1, 21, 1);
+}
+
+.text-wrapper_2 {
+  height: 42px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 330px;
+  margin: 10px 0 0 1px;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.text-wrapper_2:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
+}
+
+.text-wrapper_2:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
+}
+
+.text_3 {
+  color: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  font-family: Alibaba-PuHuiTi-M, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+}
+
+.text-wrapper_2:hover .text_3 {
+  letter-spacing: 1px;
+}
+
+/* Custom Naive UI Overrides */
+.custom-n-input {
+  background-color: transparent !important;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.custom-n-input :deep(.n-input-wrapper) {
+  padding: 0 !important;
+}
+
+.custom-n-input :deep(.n-input__input-el) {
+  height: 16px !important;
+  line-height: 16px !important;
+  color: rgba(48, 49, 51, 1);
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+}
+
+.custom-n-input :deep(.n-input__placeholder) {
+  color: rgba(189, 189, 189, 1) !important;
+}
+
+.custom-n-input :deep(.n-input__state-border),
+.custom-n-input :deep(.n-input__border) {
+  display: none !important;
+}
+
+/* Fix Form Item Layout to prevent shifts */
+:deep(.n-form-item-feedback-wrapper) {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  padding-top: 2px;
+  line-height: 1;
+}
+
+:deep(.n-form-item) {
+  display: block;
+  margin-bottom: 0 !important;
+}
+
+/* Ensure the code input item doesn't break flex layout */
+.verify-code-item {
+  flex: 1;
+  /* The section_4 inside has fixed width, so we just let it be */
+  max-width: 191px; 
+}
+
+/* Input Container Interactions */
+.block_1,
+.section_4 {
+  transition: all 0.3s ease;
+  cursor: text;
+}
+
+.block_1:hover,
+.section_4:hover {
+  border-color: rgba(163, 1, 19, 0.5);
+}
+
+.block_1:focus-within,
+.section_4:focus-within {
+  border-color: rgba(163, 1, 19, 1);
+  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
+}
+
+/* Error State Styling */
+:deep(.n-form-item.n-form-item--error) .block_1,
+:deep(.n-form-item.n-form-item--error) .section_4 {
+  border-color: #d03050;
+}
+
+:deep(.n-form-item.n-form-item--error) .block_1:focus-within,
+:deep(.n-form-item.n-form-item--error) .section_4:focus-within {
+  border-color: #d03050;
+  box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
+}
+
+/* Checkbox Customization */
+:deep(.agreement-checkbox .n-checkbox-box) {
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+/* Checked State - Solid Red */
+:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box) {
+  background-color: rgba(163, 1, 19, 1) !important;
+  border: 1px solid rgba(163, 1, 19, 1) !important;
+}
+
+/* Hide the separate border element when checked to prevent color overlap/double borders */
+:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border) {
+  display: none !important;
+}
+
+/* Hover State - Red Border */
+:deep(.agreement-checkbox:hover .n-checkbox-box .n-checkbox-box__border) {
+  border-color: rgba(163, 1, 19, 1) !important;
+}
+
+/* Focus State - Red Border & Shadow */
+:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box .n-checkbox-box__border) {
+  border-color: rgba(163, 1, 19, 1) !important;
+}
+
+:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box) {
+  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.2) !important;
+}
+
+/* Ensure checkmark is white */
+:deep(.agreement-checkbox .n-checkbox-icon) {
+  color: #fff !important;
+}
+</style>
diff --git a/web1/src/views/user-center/components/CorporateTransfer.vue b/web1/src/views/user-center/components/CorporateTransfer.vue
index 26124ba..b6d0def 100644
--- a/web1/src/views/user-center/components/CorporateTransfer.vue
+++ b/web1/src/views/user-center/components/CorporateTransfer.vue
@@ -1,74 +1,92 @@
 <template>
   <div class="content-section">
+    <div class="section-header">
+      <div class="title-bar"></div>
+      <div class="title-text">对公转账</div>
+    </div>
+
     <div class="transfer-container">
       <!-- 步骤条 -->
       <div class="steps">
         <div class="step" :class="{ active: currentStep >= 1 }">
-          <div class="step-number">1</div>
+          <div class="step-icon">
+            <span v-if="currentStep === 1">1</span>
+            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M20 6L9 17L4 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
           <div class="step-label">对公汇款</div>
         </div>
-        <div class="step-line" :class="{ active: currentStep >= 2 }"></div>
+        <div class="step-line">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
         <div class="step" :class="{ active: currentStep >= 2 }">
-          <div class="step-number">2</div>
+          <div class="step-icon">
+            <span v-if="currentStep <= 2">2</span>
+            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M20 6L9 17L4 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
           <div class="step-label">上传凭证</div>
         </div>
-        <div class="step-line" :class="{ active: currentStep >= 3 }"></div>
+        <div class="step-line">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
         <div class="step" :class="{ active: currentStep >= 3 }">
-          <div class="step-number">3</div>
+          <div class="step-icon">3</div>
           <div class="step-label">等待到账</div>
         </div>
       </div>
 
       <!-- 第一步：转账信息 -->
-      <div v-if="currentStep === 1" 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 v-if="currentStep === 1" class="step-content">
+        <div class="info-card">
+          <div class="info-title">评估收费标准：<span class="highlight">6000元/次</span></div>
+          <div class="info-subtitle">请汇款至以下账户：</div>
+          
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="label">公司名称：</span>
+              <span class="value">成都文化产权交易所有限公司</span>
+            </div>
+            <div class="info-item">
+              <span class="label">税号：</span>
+              <span class="value">91510104586429590T</span>
+            </div>
+            <div class="info-item">
+              <span class="label">注册地址：</span>
+              <span class="value">成都市锦江区工业园区三色路38号</span>
+            </div>
+            <div class="info-item">
+              <span class="label">开户行：</span>
+              <span class="value">中国民生银行股份有限公司成都科华支行</span>
+            </div>
+            <div class="info-item">
+              <span class="label">开户账号：</span>
+              <span class="value">6343 8264 7</span>
+            </div>
+            <div class="info-item">
+              <span class="label">电话：</span>
+              <span class="value">(028) 85915289</span>
+            </div>
           </div>
         </div>
-        <n-button class="next-btn" @click="handleNextStep">
-          下一步
-        </n-button>
+        
+        <div class="btn-container">
+          <button class="primary-btn" @click="handleNextStep">下一步</button>
+        </div>
       </div>
 
       <!-- 第二步：上传凭证 -->
-      <div v-if="currentStep === 2" class="upload-section">
-        <div class="info-title">第二步：</div>
-        
-        <div class="upload-form">
-          <!-- 上传支付凭证 -->
-          <div class="form-item">
-            <div class="form-label">上传支付凭证：</div>
-            <div class="upload-area" @click="triggerFileInput">
+      <div v-if="currentStep === 2" class="step-content">
+        <div class="form-container">
+          <div class="form-group">
+            <div class="form-label required">上传支付凭证</div>
+            <div class="upload-box" @click="triggerFileInput">
               <input 
                 ref="fileInput" 
                 type="file" 
@@ -77,69 +95,80 @@
                 @change="handleFileChange"
               />
               <div v-if="!uploadedFile" class="upload-placeholder">
-                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12 5V19M5 12H19" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-                <div class="upload-hint">仅支持图片格式</div>
+                <div class="upload-icon">+</div>
+                <div class="upload-text">点击上传</div>
               </div>
               <div v-else class="upload-preview">
                 <img :src="uploadedFileUrl" alt="支付凭证" />
-                <div class="upload-remove" @click.stop="removeFile">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round"/>
-                  </svg>
-                </div>
+                <div class="upload-remove" @click.stop="removeFile">×</div>
               </div>
             </div>
+            <div class="form-tip">支持jpg、png、jpeg格式，大小不超过5M</div>
+          </div>
+
+          <div class="form-group">
+            <div class="form-label required">开票抬头</div>
+            <div class="select-wrapper">
+              <select v-model="selectedInvoiceHeader" class="custom-select">
+                <option value="" disabled selected>请选择开票抬头</option>
+                <option v-for="opt in invoiceHeaderOptions" :key="opt.value" :value="opt.value">
+                  {{ opt.label }}
+                </option>
+              </select>
+              <div class="add-header-link" @click="handleAddHeader">+ 添加抬头</div>
+            </div>
           </div>
 
-          <!-- 开票抬头 -->
-          <div class="form-item">
-            <div class="form-label">开票抬头：</div>
-            <n-select 
-              v-model:value="selectedInvoiceHeader" 
-              :options="invoiceHeaderOptions"
-              placeholder="请选择开票抬头"
-            />
+          <div class="form-group">
+            <div class="form-label required">开票类型</div>
+            <select v-model="selectedInvoiceType" class="custom-select">
+              <option value="" disabled selected>请选择开票类型</option>
+              <option v-for="opt in invoiceTypeOptions" :key="opt.value" :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </select>
           </div>
 
-          <!-- 开票类型 -->
-          <div class="form-item">
-            <div class="form-label">开票类型：</div>
-            <n-select 
-              v-model:value="selectedInvoiceType" 
-              :options="invoiceTypeOptions"
-              placeholder="请选择开票类型"
-            />
+          <div class="btn-container">
+            <button 
+              class="primary-btn" 
+              :disabled="!uploadedFile || !selectedInvoiceHeader || !selectedInvoiceType"
+              @click="handleUploadSubmit"
+            >
+              确认上传
+            </button>
           </div>
-
-          <!-- 上传按钮 -->
-          <n-button 
-            class="upload-btn" 
-            :disabled="!uploadedFile || !selectedInvoiceHeader || !selectedInvoiceType"
-            @click="handleUploadSubmit"
-          >
-            上传
-          </n-button>
         </div>
       </div>
 
       <!-- 第三步：等待到账 -->
-      <div v-if="currentStep === 3" class="success-section">
-        <div class="success-message">
-          <div class="success-title">上传成功！预计N个小时内到账</div>
-          <div class="success-subtitle">请耐心等待</div>
+      <div v-if="currentStep === 3" class="step-content success-content">
+        <div class="success-icon">
+          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="12" fill="#67C23A"/>
+            <path d="M17 8L10 15L7 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="success-title">上传成功</div>
+        <div class="success-desc">预计1-3个工作日内到账，请耐心等待</div>
+        
+        <div class="btn-container">
+          <button class="primary-btn" @click="handleReturnHome">返回首页</button>
         </div>
-        <n-button class="return-btn" @click="handleReturnHome">
-          返回首页
-        </n-button>
       </div>
     </div>
+    
+    <!-- 引入抬头管理弹窗 -->
+    <InvoiceModal
+      v-model:show="showInvoiceModal"
+      @submit="handleInvoiceModalSubmit"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import InvoiceModal from './InvoiceModal.vue'
 
 const emit = defineEmits(['return-home'])
 
@@ -152,14 +181,14 @@ const uploadedFile = ref(null)
 const uploadedFileUrl = ref('')
 
 // 表单选择相关
-const selectedInvoiceHeader = ref(null)
-const selectedInvoiceType = ref(null)
+const selectedInvoiceHeader = ref('')
+const selectedInvoiceType = ref('')
+const showInvoiceModal = ref(false)
 
 // 开票抬头选项
 const invoiceHeaderOptions = ref([
-  { label: '抬头1', value: 'header1' },
-  { label: '抬头2', value: 'header2' },
-  { label: '抬头3', value: 'header3' }
+  { label: '上海某某科技有限公司', value: 'header1' },
+  { label: '北京某某文化有限公司', value: 'header2' }
 ])
 
 // 开票类型选项
@@ -204,6 +233,21 @@ function removeFile() {
   }
 }
 
+// 添加抬头
+function handleAddHeader() {
+  showInvoiceModal.value = true
+}
+
+// 处理抬头弹窗提交
+function handleInvoiceModalSubmit(data) {
+  // 模拟添加抬头
+  const newOption = { label: data.name, value: 'header_' + Date.now() }
+  invoiceHeaderOptions.value.push(newOption)
+  selectedInvoiceHeader.value = newOption.value
+  showInvoiceModal.value = false
+  $message.success('添加抬头成功')
+}
+
 // 提交上传
 function handleUploadSubmit() {
   if (!uploadedFile.value || !selectedInvoiceHeader.value || !selectedInvoiceType.value) {
@@ -238,8 +282,26 @@ defineExpose({
   border-radius: 8px;
   padding: 24px;
   min-height: calc(100vh - 40px);
-  position: relative;
+}
 
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 40px;
+}
+
+.title-bar {
+  width: 4px;
+  height: 16px;
+  background: #A30113;
+  border-radius: 2px;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
 }
 
 .transfer-container {
@@ -247,286 +309,267 @@ defineExpose({
   margin: 0 auto;
 }
 
+/* 步骤条样式 */
 .steps {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 40px;
+  margin-bottom: 60px;
+  gap: 16px;
 }
 
 .step {
   display: flex;
-  flex-direction: column;
   align-items: center;
   gap: 8px;
 }
 
-.step-number {
-  width: 40px;
-  height: 40px;
+.step-icon {
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: #EEEEEE;
-  color: #909399;
+  background: #C0C4CC;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
-  transition: all 0.3s ease;
 }
 
-.step.active .step-number {
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
-  color: white;
+.step.active .step-icon {
+  background: #A30113;
 }
 
 .step-label {
   font-size: 14px;
   color: #909399;
+  font-weight: 500;
 }
 
 .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;
+  display: flex;
+  align-items: center;
+  color: #C0C4CC;
 }
 
-.step-line.active {
-  background: #A30113;
-}
-
-.transfer-info {
-  background: #F5F7FA;
+/* 第一步内容 */
+.info-card {
+  background: #F9FAFC;
   border-radius: 8px;
-  padding: 24px;
-  border: 1px solid #EEEEEE;
+  padding: 40px;
+  margin-bottom: 40px;
 }
 
 .info-title {
-  font-size: 18px;
-  font-weight: 600;
+  font-size: 16px;
   color: #303133;
-  margin-bottom: 20px;
-  padding-left: 12px;
-  border-left: 4px solid #A30113;
+  margin-bottom: 12px;
 }
 
-.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 {
+.info-title .highlight {
   color: #A30113;
   font-weight: 600;
 }
 
-.next-btn {
-  width: 180px;
-  height: 40px;
+.info-subtitle {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 24px;
+}
+
+.info-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.info-item {
+  display: flex;
+  font-size: 14px;
+}
+
+.info-item .label {
+  color: #909399;
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.info-item .value {
+  color: #303133;
+}
+
+/* 第二步内容 */
+.form-container {
+  max-width: 500px;
   margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #A30113;
-  color: white;
-  border-radius: 4px;
-  border: none;
 }
 
-.next-btn:hover,
-.next-btn:focus,
-.next-btn:active {
-  background: #A30113;
-  opacity: 1;
-}
-
-/* 第二步：上传凭证 */
-.upload-section {
-  background: #F5F7FA;
-  border-radius: 8px;
-  padding: 24px;
-  border: 1px solid #EEEEEE;
-}
-
-.upload-form {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.form-item {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+.form-group {
+  margin-bottom: 24px;
 }
 
 .form-label {
   font-size: 14px;
   color: #606266;
-  font-weight: 500;
+  margin-bottom: 8px;
 }
 
-.upload-area {
-  width: 100%;
-  max-width: 400px;
-  height: 200px;
-  border: 2px dashed #DCDFE6;
-  border-radius: 8px;
+.form-label.required::before {
+  content: '*';
+  color: #F56C6C;
+  margin-right: 4px;
+}
+
+.upload-box {
+  width: 120px;
+  height: 120px;
+  border: 1px dashed #DCDFE6;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.3s ease;
-  background: white;
+  transition: border-color 0.3s;
+  background: #F5F7FA;
   position: relative;
   overflow: hidden;
 }
 
-.upload-area:hover {
-  border-color: #4A90E2;
-  background: #F5F9FF;
+.upload-box:hover {
+  border-color: #A30113;
 }
 
 .upload-placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
+  color: #909399;
 }
 
-.upload-hint {
+.upload-icon {
+  font-size: 24px;
+  font-weight: 300;
+}
+
+.upload-text {
   font-size: 12px;
-  color: #909399;
 }
 
 .upload-preview {
   width: 100%;
   height: 100%;
-  position: relative;
 }
 
 .upload-preview img {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
 }
 
 .upload-remove {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 32px;
-  height: 32px;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 20px;
   background: rgba(0, 0, 0, 0.5);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.upload-remove:hover {
-  background: rgba(0, 0, 0, 0.7);
-  transform: scale(1.1);
-}
-
-.upload-btn {
-  width: 180px;
-  height: 40px;
-  margin: 20px auto 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  background: #A30113;
   color: white;
-  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  cursor: pointer;
 }
 
-.upload-btn:disabled {
-  background: #fab6b6;
-  cursor: not-allowed;
-  opacity: 0.7;
+.form-tip {
+  font-size: 12px;
+  color: #C0C4CC;
+  margin-top: 8px;
 }
 
-.upload-btn:not(:disabled):hover,
-.upload-btn:not(:disabled):focus,
-.upload-btn:not(:disabled):active {
-  background: #A30113;
-  opacity: 1;
+.select-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-/* 第三步：等待到账 */
-.success-section {
-  background: #F5F7FA;
-  border-radius: 8px;
-  padding: 60px 24px;
-  border: 1px solid #EEEEEE;
+.custom-select {
+  flex: 1;
+  height: 40px;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  padding: 0 12px;
+  font-size: 14px;
+  color: #606266;
+  outline: none;
+  background: white;
+}
+
+.custom-select:focus {
+  border-color: #A30113;
+}
+
+.add-header-link {
+  font-size: 14px;
+  color: #A30113;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+/* 第三步内容 */
+.success-content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 40px;
+  padding-top: 40px;
 }
 
-.success-message {
-  text-align: center;
+.success-icon {
+  margin-bottom: 24px;
 }
 
 .success-title {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 600;
   color: #303133;
   margin-bottom: 12px;
 }
 
-.success-subtitle {
+.success-desc {
   font-size: 14px;
-  color: #606266;
+  color: #909399;
+  margin-bottom: 40px;
 }
 
-.return-btn {
-  width: 180px;
-  height: 40px;
+/* 通用按钮 */
+.btn-container {
   display: flex;
-  align-items: center;
   justify-content: center;
-  border-radius: 4px;
+}
+
+.primary-btn {
+  width: 200px;
+  height: 40px;
   background: #A30113;
   color: white;
   border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.3s;
 }
 
-.return-btn:hover,
-.return-btn:focus,
-.return-btn:active {
-  background: #A30113;
-  opacity: 1;
+.primary-btn:hover {
+  background: #880C22;
+}
+
+.primary-btn:disabled {
+  background: #fab6b6;
+  cursor: not-allowed;
 }
 </style>
diff --git a/web1/src/views/user-center/components/InvoiceManagement.vue b/web1/src/views/user-center/components/InvoiceManagement.vue
index 64ea186..3eb86c5 100644
--- a/web1/src/views/user-center/components/InvoiceManagement.vue
+++ b/web1/src/views/user-center/components/InvoiceManagement.vue
@@ -1,58 +1,105 @@
 <template>
   <div class="content-section">
-    <div class="invoice-container">
-      <div class="add-card" @click="handleAddInvoice">
-        <div class="add-text">添加</div>
+    <div class="section-header">
+      <div class="header-left">
+        <div class="title-bar"></div>
+        <div class="title-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 class="add-btn" @click="handleAddInvoice">
+        <span class="plus-icon">+</span>
+        <span>添加抬头</span>
       </div>
     </div>
+
+    <div class="table-container">
+      <table class="custom-table">
+        <thead>
+          <tr>
+            <th style="width: 40%">公司名称</th>
+            <th style="width: 35%">税号</th>
+            <th style="width: 25%">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="invoice in invoiceList" :key="invoice.id">
+            <td>{{ invoice.name }}</td>
+            <td>{{ invoice.taxId || '123456789012345678' }}</td>
+            <td>
+              <div class="action-group">
+                <div class="action-btn edit" @click="handleEditInvoice(invoice)">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M11 4H4C3.44772 4 3 4.44772 3 5V20C3 20.5523 3.44772 21 4 21H19C19.5523 21 20 20.5523 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  <span>编辑</span>
+                </div>
+                <div class="action-btn delete" @click="handleDeleteInvoice(invoice)">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M8 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  <span>删除</span>
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="invoiceList.length === 0">
+            <td colspan="3" class="empty-text">暂无抬头信息...</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <InvoiceModal
+      v-model:show="showModal"
+      :edit-data="currentInvoice"
+      @submit="handleModalSubmit"
+    />
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+import InvoiceModal from './InvoiceModal.vue'
 
-const router = useRouter()
-
-defineProps({
+const props = defineProps({
   invoiceList: {
     type: Array,
     default: () => []
   }
 })
 
-const emit = defineEmits(['add-invoice', 'delete-invoice'])
+const emit = defineEmits(['add-invoice', 'delete-invoice', 'update-invoice'])
+
+const showModal = ref(false)
+const currentInvoice = ref(null)
 
 // 添加开票
 function handleAddInvoice() {
-  router.push('/invoice-header/add')
+  currentInvoice.value = null
+  showModal.value = true
+}
+
+// 编辑开票
+function handleEditInvoice(invoice) {
+  currentInvoice.value = { ...invoice }
+  showModal.value = true
 }
 
 // 删除开票
 function handleDeleteInvoice(invoice) {
-  $message.info('删除开票功能开发中')
+  // TODO: Add confirmation dialog
+  emit('delete-invoice', invoice)
+}
+
+// 处理弹窗提交
+function handleModalSubmit(data) {
+  if (currentInvoice.value) {
+    emit('update-invoice', { ...currentInvoice.value, ...data })
+  } else {
+    emit('add-invoice', data)
+  }
+  showModal.value = false
 }
 </script>
 
@@ -62,96 +109,114 @@ function handleDeleteInvoice(invoice) {
   border-radius: 8px;
   padding: 24px;
   min-height: calc(100vh - 40px);
-  position: relative;
-
 }
 
-.invoice-container {
-  max-width: 1000px;
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
 }
 
-.add-card {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  width: 80px;
-  height: 32px;
-  background: #A30113;
-  border-radius: 4px;
+.header-left {
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
+  gap: 8px;
 }
 
-.add-card:hover {
+.title-bar {
+  width: 4px;
+  height: 16px;
+  background: #A30113;
+  border-radius: 2px;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.add-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  background: #A30113;
+  color: white;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.add-btn:hover {
   background: #880C22;
 }
 
-.add-text {
-  color: white;
+.plus-icon {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.table-container {
+  width: 100%;
+}
+
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
   font-size: 14px;
 }
 
-.invoice-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
-  margin-top: 60px;
+.custom-table th {
+  text-align: left;
+  padding: 12px 24px;
+  background: #F5F7FA;
+  color: #909399;
+  font-weight: 500;
+  border-bottom: 1px solid #EBEEF5;
 }
 
-.invoice-card {
-  background: #F5F7FA;
-  border-radius: 8px;
-  padding: 20px;
+.custom-table td {
+  padding: 16px 24px;
+  color: #606266;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.custom-table tr:hover td {
+  background-color: #F5F7FA;
+}
+
+.action-group {
+  display: flex;
+  gap: 24px;
+}
+
+.action-btn {
   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 {
+  gap: 4px;
   cursor: pointer;
-  padding: 8px;
-  border-radius: 4px;
-  transition: all 0.3s ease;
+  transition: opacity 0.3s;
 }
 
-.invoice-action:hover {
-  background: rgba(163, 1, 19, 0.1);
+.action-btn:hover {
+  opacity: 0.8;
 }
 
-@media (max-width: 768px) {
-  .invoice-list {
-    grid-template-columns: 1fr;
-  }
+.action-btn.edit {
+  color: #409EFF;
+}
+
+.action-btn.delete {
+  color: #F56C6C;
+}
+
+.empty-text {
+  text-align: center;
+  color: #909399;
+  padding: 40px 0;
 }
 </style>
diff --git a/web1/src/views/user-center/components/InvoiceModal.vue b/web1/src/views/user-center/components/InvoiceModal.vue
new file mode 100644
index 0000000..92f9a28
--- /dev/null
+++ b/web1/src/views/user-center/components/InvoiceModal.vue
@@ -0,0 +1,275 @@
+<template>
+  <div v-if="show" class="modal-overlay" @click="handleClose">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <div class="header-title">{{ editData ? '编辑抬头' : '添加抬头' }}</div>
+        <div class="close-btn" @click="handleClose">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 6L6 18M6 6L18 18" stroke="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+      
+      <div class="modal-body">
+        <div class="form-item">
+          <div class="label required">公司名称</div>
+          <input 
+            v-model="formData.name" 
+            type="text" 
+            placeholder="请输入公司名称"
+            class="custom-input"
+          />
+        </div>
+        
+        <div class="form-item">
+          <div class="label required">税号</div>
+          <input 
+            v-model="formData.taxId" 
+            type="text" 
+            placeholder="请输入纳税人识别号"
+            class="custom-input"
+          />
+        </div>
+        
+        <div class="form-item">
+          <div class="label">注册地址</div>
+          <input 
+            v-model="formData.address" 
+            type="text" 
+            placeholder="请输入注册地址"
+            class="custom-input"
+          />
+        </div>
+        
+        <div class="form-item">
+          <div class="label">注册电话</div>
+          <input 
+            v-model="formData.phone" 
+            type="text" 
+            placeholder="请输入注册电话"
+            class="custom-input"
+          />
+        </div>
+        
+        <div class="form-item">
+          <div class="label">开户银行</div>
+          <input 
+            v-model="formData.bank" 
+            type="text" 
+            placeholder="请输入开户银行"
+            class="custom-input"
+          />
+        </div>
+        
+        <div class="form-item">
+          <div class="label">银行账号</div>
+          <input 
+            v-model="formData.account" 
+            type="text" 
+            placeholder="请输入银行账号"
+            class="custom-input"
+          />
+        </div>
+
+        <div class="form-note">
+          * 电子发票（PDF）和纸质发票具有同等法律效力，可支持报销入账
+        </div>
+      </div>
+      
+      <div class="modal-footer">
+        <button class="btn cancel" @click="handleClose">取消</button>
+        <button class="btn submit" @click="handleSubmit">保存</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  show: Boolean,
+  editData: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:show', 'submit'])
+
+const formData = ref({
+  name: '',
+  taxId: '',
+  address: '',
+  phone: '',
+  bank: '',
+  account: ''
+})
+
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    if (props.editData) {
+      formData.value = { ...props.editData }
+    } else {
+      formData.value = {
+        name: '',
+        taxId: '',
+        address: '',
+        phone: '',
+        bank: '',
+        account: ''
+      }
+    }
+  }
+})
+
+function handleClose() {
+  emit('update:show', false)
+}
+
+function handleSubmit() {
+  if (!formData.value.name || !formData.value.taxId) {
+    $message.warning('请填写必填项')
+    return
+  }
+  emit('submit', formData.value)
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  width: 600px;
+  max-width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.close-btn {
+  cursor: pointer;
+  color: #909399;
+  transition: color 0.3s;
+}
+
+.close-btn:hover {
+  color: #606266;
+}
+
+.modal-body {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label {
+  font-size: 14px;
+  color: #606266;
+}
+
+.label.required::before {
+  content: '*';
+  color: #F56C6C;
+  margin-right: 4px;
+}
+
+.custom-input {
+  height: 40px;
+  padding: 0 12px;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #606266;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.custom-input:focus {
+  border-color: #A30113;
+}
+
+.custom-input::placeholder {
+  color: #C0C4CC;
+}
+
+.form-note {
+  font-size: 12px;
+  color: #A30113;
+  margin-top: 4px;
+}
+
+.modal-footer {
+  padding: 20px 24px;
+  border-top: 1px solid #EBEEF5;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.btn {
+  padding: 8px 24px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid;
+}
+
+.btn.cancel {
+  background: white;
+  border-color: #DCDFE6;
+  color: #606266;
+}
+
+.btn.cancel:hover {
+  color: #A30113;
+  border-color: #fde2e2;
+  background-color: #fef0f0;
+}
+
+.btn.submit {
+  background: #A30113;
+  border-color: #A30113;
+  color: white;
+}
+
+.btn.submit:hover {
+  background: #880C22;
+  border-color: #880C22;
+}
+</style>
diff --git a/web1/src/views/user-center/components/ValuationHistory.vue b/web1/src/views/user-center/components/ValuationHistory.vue
index 938fd13..81dc3d6 100644
--- a/web1/src/views/user-center/components/ValuationHistory.vue
+++ b/web1/src/views/user-center/components/ValuationHistory.vue
@@ -1,35 +1,47 @@
 <template>
   <div 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 class="section-header">
+      <div class="title-bar"></div>
+      <div class="title-text">估值记录</div>
+    </div>
+    
+    <div class="table-container">
+      <table class="custom-table">
+        <thead>
+          <tr>
+            <th style="width: 40%">资产名称</th>
+            <th style="width: 25%">时间</th>
+            <th style="width: 35%">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in assetList" :key="item.id">
+            <td>{{ item.name || '未知资产' }}</td>
+            <td>{{ formatDate(item.created_at) }}</td>
+            <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>
+                  <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>
+                  <span>下载证书</span>
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="assetList.length === 0">
+            <td colspan="3" class="empty-text">暂无估值记录...</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </template>
@@ -48,22 +60,6 @@ function formatDate(dateStr) {
   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('下载报告功能开发中')
@@ -81,107 +77,78 @@ function handleDownloadCertificate(item) {
   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 {
+.section-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
+  gap: 8px;
+  margin-bottom: 24px;
 }
 
-.asset-title {
-  font-size: 14px;
-  font-weight: 500;
+.title-bar {
+  width: 4px;
+  height: 16px;
+  background: #A30113;
+  border-radius: 2px;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
   color: #303133;
 }
 
-.asset-date {
-  font-size: 12px;
+.table-container {
+  width: 100%;
+}
+
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.custom-table th {
+  text-align: left;
+  padding: 12px 24px;
+  background: #F5F7FA;
   color: #909399;
-  margin-bottom: 12px;
+  font-weight: 500;
+  border-bottom: 1px solid #EBEEF5;
 }
 
-.asset-actions {
+.custom-table td {
+  padding: 16px 24px;
+  color: #606266;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.custom-table tr:hover td {
+  background-color: #F5F7FA;
+}
+
+.action-group {
   display: flex;
-  gap: 8px;
+  gap: 24px;
 }
 
-.action-item {
+.action-btn {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 6px 12px;
-  background: white;
-  border-radius: 4px;
-  font-size: 12px;
-  color: #A30113;
+  color: #409EFF;
   cursor: pointer;
-  transition: all 0.3s ease;
-  border: 1px solid #EEEEEE;
+  transition: opacity 0.3s;
 }
 
-.action-item:hover {
-  background: #A30113;
-  color: white;
-  border-color: #A30113;
+.action-btn:hover {
+  opacity: 0.8;
 }
 
-.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;
-}
-
-@media (max-width: 768px) {
-  .asset-grid {
-    grid-template-columns: 1fr;
-  }
+.empty-text {
+  text-align: center;
+  color: #909399;
+  padding: 40px 0;
 }
 </style>