diff --git a/web/.env.development b/web/.env.development
index 8bae5dc..2523fdf 100644
--- a/web/.env.development
+++ b/web/.env.development
@@ -5,5 +5,5 @@ VITE_PUBLIC_PATH = '/'
 VITE_USE_PROXY = true
 
 # base api
-VITE_BASE_API = 'http://139.224.70.152:9990/api/v1'
-# VITE_BASE_API = 'http://127.0.0.1:9999/api/v1'
+# VITE_BASE_API = 'http://139.224.70.152:9990/api/v1'
+VITE_BASE_API = 'http://127.0.0.1:9999/api/v1'
diff --git a/web1/src/assets/img/icon_checkbox.png b/web1/src/assets/img/icon_checkbox.png
new file mode 100644
index 0000000..94b0d3d
Binary files /dev/null and b/web1/src/assets/img/icon_checkbox.png differ
diff --git a/web1/src/assets/img/icon_code.png b/web1/src/assets/img/icon_code.png
new file mode 100644
index 0000000..33840e6
Binary files /dev/null and b/web1/src/assets/img/icon_code.png differ
diff --git a/web1/src/assets/img/icon_user.png b/web1/src/assets/img/icon_user.png
new file mode 100644
index 0000000..386c489
Binary files /dev/null and b/web1/src/assets/img/icon_user.png differ
diff --git a/web1/src/assets/img/login_bg_full.png b/web1/src/assets/img/login_bg_full.png
new file mode 100644
index 0000000..20621a2
Binary files /dev/null and b/web1/src/assets/img/login_bg_full.png differ
diff --git a/web1/src/assets/img/login_box_left.png b/web1/src/assets/img/login_box_left.png
new file mode 100644
index 0000000..3899c25
Binary files /dev/null and b/web1/src/assets/img/login_box_left.png differ
diff --git a/web1/src/assets/img/login_btn_bg.png b/web1/src/assets/img/login_btn_bg.png
new file mode 100644
index 0000000..bdaecfc
Binary files /dev/null and b/web1/src/assets/img/login_btn_bg.png differ
diff --git a/web1/src/assets/img/login_title.png b/web1/src/assets/img/login_title.png
new file mode 100644
index 0000000..89e0ab7
Binary files /dev/null and b/web1/src/assets/img/login_title.png differ
diff --git a/web1/src/views/login/index.vue b/web1/src/views/login/index.vue
index f97b9de..b29be5e 100644
--- a/web1/src/views/login/index.vue
+++ b/web1/src/views/login/index.vue
@@ -1,107 +1,125 @@
 <template>
-  <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: 480px; 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 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 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="11"
-            @keypress.enter="handleLogin"
-          >
-           <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="handleLogin"
-          >
-            立即登录
-            <img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
-          </n-button>
-        </div>
-        
-        <div mt-20 style="display: flex; justify-content: center; align-items: center;">
-          <n-input
-            v-model:value="loginInfo.verifyCode"
-            style="width: 260px; height: 42px;"
-            placeholder="验证码"
-            :maxlength="6"
-            @keypress.enter="handleLogin"
+        <div class="section_3 flex-col">
+          <img
+            class="image_1"
+            referrerpolicy="no-referrer"
+            :src="loginTitleImg"
           />
-          <n-button
-            style="width: 126px; height: 42px; margin-left: 12px; font-size: 14px;"
-            :disabled="countdown > 0"
-            @click="handleSendCode"
+          <div class="block_1 flex-row">
+            <div class="image-text_1 flex-row">
+              <img
+                class="thumbnail_1"
+                referrerpolicy="no-referrer"
+                :src="iconUserImg"
+              />
+              <input
+                v-model="loginInfo.phone"
+                class="input-reset text-group_1"
+                placeholder="请输入账号"
+                type="text"
+                @keypress.enter="handleLogin"
+              />
+            </div>
+          </div>
+          <div class="block_2 flex-row justify-between">
+            <div class="section_4 flex-row">
+              <div class="image-text_2 flex-row">
+                <img
+                  class="thumbnail_2"
+                  referrerpolicy="no-referrer"
+                  :src="iconCodeImg"
+                />
+                <input
+                  v-model="loginInfo.verifyCode"
+                  class="input-reset text-group_2"
+                  placeholder="请输入验证码"
+                  type="text"
+                  @keypress.enter="handleLogin"
+                />
+              </div>
+            </div>
+            <div 
+              class="text-wrapper_1 flex-col cursor-pointer" 
+              @click="handleSendCode"
+              :class="{ 'disabled': countdown > 0 }"
+            >
+              <span class="text_1">{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}</span>
+            </div>
+          </div>
+          <div class="block_3 flex-row justify-between">
+            <div class="image-text_3 flex-row cursor-pointer" @click="isAgreed = !isAgreed">
+              <img
+                class="thumbnail_3"
+                referrerpolicy="no-referrer"
+                :src="iconCheckboxImg"
+                :style="{ opacity: isAgreed ? 1 : 0.5, filter: isAgreed ? 'none' : 'grayscale(100%)' }"
+              />
+              <span class="text-group_3" style="margin-left: 5px;">阅读并同意</span>
+            </div>
+            <span class="text_2 cursor-pointer">《用户协议》</span>
+          </div>
+          <div 
+            class="text-wrapper_2 flex-col cursor-pointer" 
+            @click="handleLogin"
+            :style="{ backgroundImage: `url(${loginBtnBg})` }"
           >
-            {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
-          </n-button>
+            <span class="text_3">立即登录</span>
+          </div>
         </div>
       </div>
     </div>
-  </AppPage>
+  </div>
 </template>
 
 <script setup>
-import { lStorage, setToken } from '@/utils'
-import bgImg from '@/assets/images/login_bg.png'
+import { ref, onBeforeUnmount } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { setToken } from '@/utils'
 import api from '@/api'
-import { addDynamicRoutes } from '@/router'
-import { useI18n } from 'vue-i18n'
+
+// 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 { 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')
+}
+
+// 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) {
@@ -118,7 +136,7 @@ async function handleSendCode() {
     await api.sendVerifyCode({ phone })
     $message.success('验证码已发送')
     
-    // 开始倒计时
+    // Start countdown
     countdown.value = 60
     countdownTimer = setInterval(() => {
       countdown.value--
@@ -128,11 +146,11 @@ async function handleSendCode() {
       }
     }, 1000)
   } catch (error) {
-    // error is handled by interceptor usually, but we can catch specific ones if needed
+    console.error(error)
   }
 }
 
-// 登录
+// Login
 async function handleLogin() {
   const { phone, verifyCode } = loginInfo.value
   
@@ -150,9 +168,9 @@ async function handleLogin() {
     $message.warning('请输入验证码')
     return
   }
-  
-  if (verifyCode.length < 4) {
-    $message.warning('请输入完整的验证码')
+
+  if (!isAgreed.value) {
+    $message.warning('请阅读并同意用户协议')
     return
   }
   
@@ -181,7 +199,6 @@ async function handleLogin() {
   }
 }
 
-// 组件卸载时清除定时器
 onBeforeUnmount(() => {
   if (countdownTimer) {
     clearInterval(countdownTimer)
@@ -189,3 +206,293 @@ onBeforeUnmount(() => {
   }
 })
 </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%;
+  height: 14px;
+  margin-top: 36px;
+  align-items: center;
+}
+
+.image-text_3 {
+  display: flex;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.image-text_3:hover {
+  opacity: 0.8;
+}
+
+.thumbnail_3 {
+  width: 14px;
+  height: 14px;
+}
+
+.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;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 12px;
+}
+
+.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;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.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;
+}
+</style>