diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/13e4881d89c84f948592364753559f8b.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/13e4881d89c84f948592364753559f8b.webp
new file mode 100644
index 00000000..3c01a9ed
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/13e4881d89c84f948592364753559f8b.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/1e673b259a444d07b10897a652119911.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/1e673b259a444d07b10897a652119911.webp
new file mode 100644
index 00000000..cac718fc
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/1e673b259a444d07b10897a652119911.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/39189a7a8b1f4647b18dd0ff14d278e6.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/39189a7a8b1f4647b18dd0ff14d278e6.webp
new file mode 100644
index 00000000..03bce5bf
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/39189a7a8b1f4647b18dd0ff14d278e6.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/39999cd25b3d45958ef4f5461781c23f.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/39999cd25b3d45958ef4f5461781c23f.webp
new file mode 100644
index 00000000..8e3c3498
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/39999cd25b3d45958ef4f5461781c23f.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/49df5fa2d26446fea3a4ecb74da92b6c.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/49df5fa2d26446fea3a4ecb74da92b6c.webp
new file mode 100644
index 00000000..3c01a9ed
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/49df5fa2d26446fea3a4ecb74da92b6c.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/66f22d79a8f1407ab4e6828e2765107e.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/66f22d79a8f1407ab4e6828e2765107e.webp
new file mode 100644
index 00000000..69e7029a
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/66f22d79a8f1407ab4e6828e2765107e.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/8db4beb8fdd648e4a15f4465eed2907f.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/8db4beb8fdd648e4a15f4465eed2907f.webp
new file mode 100644
index 00000000..ffcef308
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/8db4beb8fdd648e4a15f4465eed2907f.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/c874ff71ba6c4bc697350e79fab2c596.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/c874ff71ba6c4bc697350e79fab2c596.webp
new file mode 100644
index 00000000..1cb0453e
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/c874ff71ba6c4bc697350e79fab2c596.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/eb421f94c1744372855fa09d7d344f09.webp b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/eb421f94c1744372855fa09d7d344f09.webp
new file mode 100644
index 00000000..5eaeb56d
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/eb421f94c1744372855fa09d7d344f09.webp differ
diff --git a/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/f5632583104f4e638845cb46020771ee.jpg b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/f5632583104f4e638845cb46020771ee.jpg
new file mode 100644
index 00000000..f7a5b186
Binary files /dev/null and b/backend/src/VendingMachine.Api/wwwroot/uploads/2026/04/f5632583104f4e638845cb46020771ee.jpg differ
diff --git a/mobile/components/CouponGuidePopup.vue b/mobile/components/CouponGuidePopup.vue
index 7ce93376..78a7db10 100644
--- a/mobile/components/CouponGuidePopup.vue
+++ b/mobile/components/CouponGuidePopup.vue
@@ -1,13 +1,17 @@
 <template>
   <view class="popup-mask" v-if="visible" @click="handleClose">
     <view class="popup-content" @click.stop>
-      <text class="popup-title">{{ t('home.guide') }}</text>
+      <!-- 标题栏 -->
+      <view class="popup-header">
+        <text class="popup-title">{{ t('home.guide') }}</text>
+        <view class="close-btn" @click="handleClose">
+          <image class="close-icon" src="/static/ic_close.png" mode="aspectFit" />
+        </view>
+      </view>
+      <!-- 内容区域 -->
       <scroll-view class="popup-body" scroll-y>
         <rich-text :nodes="content" />
       </scroll-view>
-      <view class="close-btn" @click="handleClose">
-        <text class="close-btn-text">{{ t('common.confirm') }}</text>
-      </view>
     </view>
   </view>
 </template>
@@ -42,7 +46,7 @@ function handleClose() {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -59,32 +63,38 @@ function handleClose() {
   flex-direction: column;
 }
 
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 36rpx;
+}
+
 .popup-title {
   font-size: 34rpx;
   font-weight: 600;
   color: #333;
-  text-align: center;
-  display: block;
-  margin-bottom: 30rpx;
+}
+
+.close-btn {
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+}
+
+.close-icon {
+  width: 36rpx;
+  height: 36rpx;
 }
 
 .popup-body {
   flex: 1;
-  max-height: 50vh;
-  margin-bottom: 30rpx;
-}
-
-.close-btn {
-  height: 80rpx;
-  background-color: #007aff;
-  border-radius: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.close-btn-text {
-  font-size: 28rpx;
-  color: #ffffff;
+  max-height: 55vh;
+  padding-bottom: 40rpx;
 }
 </style>
diff --git a/mobile/components/RedeemPopup.vue b/mobile/components/RedeemPopup.vue
index e71736ab..4acef498 100644
--- a/mobile/components/RedeemPopup.vue
+++ b/mobile/components/RedeemPopup.vue
@@ -4,7 +4,7 @@
       <text class="popup-title">{{ t('redeem.title') }}</text>
       <view class="popup-body" v-if="coupon">
         <text class="coupon-name">{{ coupon.name }}</text>
-        <text class="points-needed">{{ t('redeem.pointsNeeded', { points: coupon.requiredPoints }) }}</text>
+        <text class="points-needed">{{ t('redeem.pointsLabel') }}{{ coupon.pointsCost ?? coupon.requiredPoints ?? 0 }}</text>
       </view>
       <view class="popup-actions">
         <view class="btn cancel-btn" @click="handleCancel">
@@ -112,7 +112,7 @@ function handleCancel() {
 }
 
 .confirm-btn {
-  background-color: #007aff;
+  background: linear-gradient(135deg, #d4a855, #c9a96e);
 }
 
 .btn-text {
diff --git a/mobile/i18n/en.js b/mobile/i18n/en.js
index 56b9330d..e6675429 100644
--- a/mobile/i18n/en.js
+++ b/mobile/i18n/en.js
@@ -28,7 +28,8 @@ export default {
     agreementPrefix: 'I have read and agree to the',
     userAgreement: 'User Agreement',
     and: 'and',
-    privacyPolicy: 'Privacy Policy'
+    privacyPolicy: 'Privacy Policy',
+    autoRegisterTip: 'Unregistered phone numbers will be automatically registered upon login'
   },
   // Home page
   home: {
@@ -109,6 +110,7 @@ export default {
   redeem: {
     title: 'Confirm Redeem',
     pointsNeeded: 'Points needed: {points}',
+    pointsLabel: 'Points needed: ',
     confirmBtn: 'Confirm'
   },
   // Content pages
diff --git a/mobile/i18n/zh-CN.js b/mobile/i18n/zh-CN.js
index 15d04495..372fa2b1 100644
--- a/mobile/i18n/zh-CN.js
+++ b/mobile/i18n/zh-CN.js
@@ -28,7 +28,8 @@ export default {
     agreementPrefix: '我已阅读并同意',
     userAgreement: '用户协议',
     and: '和',
-    privacyPolicy: '隐私政策'
+    privacyPolicy: '隐私政策',
+    autoRegisterTip: '未注册的手机登录后将自动创建账号'
   },
   // 首页
   home: {
@@ -109,6 +110,7 @@ export default {
   redeem: {
     title: '确认兑换',
     pointsNeeded: '所需积分：{points}',
+    pointsLabel: '所需积分：',
     confirmBtn: '确定兑换'
   },
   // 内容页
diff --git a/mobile/i18n/zh-TW.js b/mobile/i18n/zh-TW.js
index 76fa2573..6447e5fc 100644
--- a/mobile/i18n/zh-TW.js
+++ b/mobile/i18n/zh-TW.js
@@ -28,7 +28,8 @@ export default {
     agreementPrefix: '我已閱讀並同意',
     userAgreement: '用戶協議',
     and: '和',
-    privacyPolicy: '隱私政策'
+    privacyPolicy: '隱私政策',
+    autoRegisterTip: '未註冊的手機登入後將自動創建帳號'
   },
   // 首頁
   home: {
@@ -109,6 +110,7 @@ export default {
   redeem: {
     title: '確認兌換',
     pointsNeeded: '所需積分：{points}',
+    pointsLabel: '所需積分：',
     confirmBtn: '確定兌換'
   },
   // 內容頁
diff --git a/mobile/pages.json b/mobile/pages.json
index 63936a87..f7a3799f 100644
--- a/mobile/pages.json
+++ b/mobile/pages.json
@@ -9,7 +9,8 @@
 		{
 			"path": "pages/login/login",
 			"style": {
-				"navigationBarTitleText": "登录"
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "登录注册"
 			}
 		},
 		{
diff --git a/mobile/pages/index/index.vue b/mobile/pages/index/index.vue
index c353788d..abd901ae 100644
--- a/mobile/pages/index/index.vue
+++ b/mobile/pages/index/index.vue
@@ -39,7 +39,7 @@
     <view class="coupon-header">
       <text class="coupon-title">{{ t('home.redeemableCoupons') || '可兑换优惠券' }}</text>
       <view class="coupon-guide-link" @click="handleGuideEntry">
-        <text class="guide-icon">ⓘ</text>
+        <image class="guide-icon-img" src="/static/ic_explain.png" mode="aspectFit" />
         <text class="guide-text">{{ t('home.guide') }}</text>
       </view>
     </view>
@@ -56,7 +56,7 @@
           <view class="coupon-detail-row">
             <text class="coupon-dot">●</text>
             <text class="coupon-detail-label">兑换条件：</text>
-            <text class="coupon-detail-value highlight">{{ coupon.requiredPoints }}积分</text>
+            <text class="coupon-detail-value highlight">{{ coupon.pointsCost ?? 0 }}积分</text>
           </view>
         </view>
         <view class="coupon-action">
@@ -122,6 +122,10 @@ async function onEntryClick(entry) {
       uni.navigateTo({ url: '/pages/membership/membership' })
       break
     case 'stamps':
+      if (!userStore.isLoggedIn) {
+        uni.navigateTo({ url: '/pages/login/login' })
+        return
+      }
       uni.navigateTo({ url: '/pages/stamps/stamps' })
       break
     case 'qrcode':
@@ -325,9 +329,9 @@ onMounted(() => {
   display: flex;
   align-items: center;
 }
-.guide-icon {
-  font-size: 28rpx;
-  color: #999;
+.guide-icon-img {
+  width: 28rpx;
+  height: 28rpx;
   margin-right: 6rpx;
 }
 .guide-text {
diff --git a/mobile/pages/login/login.vue b/mobile/pages/login/login.vue
index f82be2e4..902e6e02 100644
--- a/mobile/pages/login/login.vue
+++ b/mobile/pages/login/login.vue
@@ -1,301 +1,385 @@
 <template>
 	<view class="login-page">
-		<!-- Logo区域 -->
-		<view class="logo-section">
-			<image class="logo" src="/static/logo.png" mode="aspectFit" />
+		<!-- 全屏背景图 -->
+		<image class="bg-image" src="/static/login_bg.png" mode="aspectFill" />
+
+		<!-- 自定义导航栏 -->
+		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
+			<view class="nav-back" @click="goBack">
+				<image class="back-icon" src="/static/ic_back.png" mode="aspectFit" />
+			</view>
+			<text class="nav-title">登录注册</text>
+			<view class="nav-placeholder"></view>
 		</view>
 
-		<!-- 表单区域 -->
+		<!-- 底部表单区域 -->
 		<view class="form-section">
 			<!-- 手机区号 + 手机号 -->
 			<view class="input-row">
-				<picker
-					:range="areaCodeList"
-					:range-key="'label'"
-					:value="areaCodeIndex"
-					@change="onAreaCodeChange"
-				>
+				<picker :range="areaCodeList" :range-key="'label'" :value="areaCodeIndex" @change="onAreaCodeChange">
 					<view class="area-code-picker">
 						<text class="area-code-text">{{ areaCodeList[areaCodeIndex].value }}</text>
-						<text class="arrow-down">▼</text>
+						<text class="arrow-down">˅</text>
 					</view>
 				</picker>
-				<input
-					class="input phone-input"
-					type="number"
-					v-model="phone"
-					:placeholder="t('login.phonePlaceholder')"
-					maxlength="15"
-				/>
+				<view class="input-divider"></view>
+				<input class="input phone-input" type="number" v-model="phone"
+					:placeholder="t('login.phonePlaceholder')" maxlength="15" />
 			</view>
 
 			<!-- 验证码 -->
 			<view class="input-row">
-				<input
-					class="input code-input"
-					type="number"
-					v-model="code"
-					:placeholder="t('login.codePlaceholder')"
-					maxlength="6"
-				/>
-				<view
-					class="send-code-btn"
-					:class="{ disabled: countdown > 0 }"
-					@click="handleSendCode"
-				>
+				<input class="input code-input" type="number" v-model="code" :placeholder="t('login.codePlaceholder')"
+					maxlength="6" />
+				<view class="send-code-btn" :class="{ disabled: countdown > 0 }" @click="handleSendCode">
 					<text class="send-code-text">
 						{{ countdown > 0 ? t('login.resendCode', { seconds: countdown }) : t('login.sendCode') }}
 					</text>
 				</view>
 			</view>
 
-			<!-- 协议勾选 -->
-			<view class="agreement-row" @click="agreed = !agreed">
-				<view class="checkbox" :class="{ checked: agreed }">
-					<text v-if="agreed" class="check-icon">✓</text>
-				</view>
-				<text class="agreement-text">{{ t('login.agreementPrefix') }}</text>
-				<text class="agreement-link" @click.stop="goAgreement">{{ t('login.userAgreement') }}</text>
-				<text class="agreement-text">{{ t('login.and') }}</text>
-				<text class="agreement-link" @click.stop="goPrivacy">{{ t('login.privacyPolicy') }}</text>
-			</view>
-
 			<!-- 登录按钮 -->
 			<view class="login-btn" @click="handleLogin">
 				<text class="login-btn-text">{{ t('login.loginBtn') }}</text>
 			</view>
+
+			<!-- 协议勾选 -->
+			<view class="agreement-row">
+				<view class="check-wrap" @click="agreed = !agreed">
+					<image class="check-icon" :src="agreed ? '/static/ic_checked.png' : '/static/ic_check.png'"
+						mode="aspectFit" />
+				</view>
+				<text class="agreement-text">{{ t('login.agreementPrefix') }}<text class="agreement-link"
+						@click.stop="goAgreement">《{{ t('login.userAgreement') }}》</text>{{ t('login.and') }}<text
+						class="agreement-link"
+						@click.stop="goPrivacy">《{{ t('login.privacyPolicy') }}》</text>，{{ t('login.autoRegisterTip') }}</text>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useUserStore } from '../../stores/user.js'
-import { sendCode } from '../../api/user.js'
+	import {
+		ref
+	} from 'vue'
+	import {
+		useI18n
+	} from 'vue-i18n'
+	import {
+		useUserStore
+	} from '../../stores/user.js'
+	import {
+		sendCode
+	} from '../../api/user.js'
 
-const { t } = useI18n()
-const userStore = useUserStore()
+	const {
+		t
+	} = useI18n()
+	const userStore = useUserStore()
 
-// 常用国际区号列表
-const areaCodeList = [
-	{ label: '中国大陆 +86', value: '+86' },
-	{ label: '中国香港 +852', value: '+852' },
-	{ label: '中国台湾 +886', value: '+886' },
-	{ label: '日本 +81', value: '+81' },
-	{ label: '韩国 +82', value: '+82' },
-	{ label: '美国 +1', value: '+1' },
-	{ label: '英国 +44', value: '+44' },
-	{ label: '新加坡 +65', value: '+65' },
-	{ label: '马来西亚 +60', value: '+60' },
-	{ label: '澳大利亚 +61', value: '+61' }
-]
+	// 常用国际区号列表
+	const areaCodeList = [{
+			label: '中国大陆 +86',
+			value: '+86'
+		},
+		{
+			label: '中国香港 +852',
+			value: '+852'
+		},
+		{
+			label: '中国台湾 +886',
+			value: '+886'
+		},
+		{
+			label: '日本 +81',
+			value: '+81'
+		},
+		{
+			label: '韩国 +82',
+			value: '+82'
+		},
+		{
+			label: '美国 +1',
+			value: '+1'
+		},
+		{
+			label: '英国 +44',
+			value: '+44'
+		},
+		{
+			label: '新加坡 +65',
+			value: '+65'
+		},
+		{
+			label: '马来西亚 +60',
+			value: '+60'
+		},
+		{
+			label: '澳大利亚 +61',
+			value: '+61'
+		}
+	]
 
-const areaCodeIndex = ref(0)
-const phone = ref('')
-const code = ref('')
-const agreed = ref(false)
-const countdown = ref(0)
-let timer = null
+	const areaCodeIndex = ref(0)
+	const phone = ref('')
+	const code = ref('')
+	const agreed = ref(false)
+	const countdown = ref(0)
+	let timer = null
 
-// 切换区号
-function onAreaCodeChange(e) {
-	areaCodeIndex.value = e.detail.value
-}
+	// 获取状态栏高度
+	const statusBarHeight = ref(0)
+	const sysInfo = uni.getSystemInfoSync()
+	statusBarHeight.value = sysInfo.statusBarHeight || 0
 
-// 发送验证码
-async function handleSendCode() {
-	if (countdown.value > 0) return
-	if (!phone.value) {
-		uni.showToast({ title: t('login.phonePlaceholder'), icon: 'none' })
-		return
+	// 返回上一页，如果没有上一页则跳回首页
+	function goBack() {
+		const pages = getCurrentPages()
+		if (pages.length > 1) {
+			uni.navigateBack()
+		} else {
+			uni.switchTab({ url: '/pages/index/index' })
+		}
 	}
 
-	try {
-		await sendCode(phone.value, areaCodeList[areaCodeIndex.value].value)
-		// 开始60秒倒计时
-		countdown.value = 60
-		timer = setInterval(() => {
-			countdown.value--
-			if (countdown.value <= 0) {
-				clearInterval(timer)
-				timer = null
-			}
-		}, 1000)
-	} catch (e) {
-		// 错误已由请求模块统一处理
-	}
-}
-
-// 登录
-async function handleLogin() {
-	if (!phone.value) {
-		uni.showToast({ title: t('login.phonePlaceholder'), icon: 'none' })
-		return
-	}
-	if (!code.value) {
-		uni.showToast({ title: t('login.codePlaceholder'), icon: 'none' })
-		return
+	// 切换区号
+	function onAreaCodeChange(e) {
+		areaCodeIndex.value = e.detail.value
 	}
 
-	try {
-		await userStore.login(
-			phone.value,
-			code.value,
-			areaCodeList[areaCodeIndex.value].value,
-			agreed.value
-		)
-		// 登录成功，返回上一页
-		uni.navigateBack()
-	} catch (e) {
-		// 未勾选协议的提示已在store中处理，其他错误由请求模块统一处理
+	// 发送验证码
+	async function handleSendCode() {
+		if (countdown.value > 0) return
+		if (!phone.value) {
+			uni.showToast({
+				title: t('login.phonePlaceholder'),
+				icon: 'none'
+			})
+			return
+		}
+		try {
+			await sendCode(phone.value, areaCodeList[areaCodeIndex.value].value)
+			countdown.value = 60
+			timer = setInterval(() => {
+				countdown.value--
+				if (countdown.value <= 0) {
+					clearInterval(timer)
+					timer = null
+				}
+			}, 1000)
+		} catch (e) {}
 	}
-}
 
-// 跳转用户协议
-function goAgreement() {
-	uni.navigateTo({ url: '/pages/agreement/agreement' })
-}
+	// 登录
+	async function handleLogin() {
+		if (!phone.value) {
+			uni.showToast({
+				title: t('login.phonePlaceholder'),
+				icon: 'none'
+			})
+			return
+		}
+		if (!code.value) {
+			uni.showToast({
+				title: t('login.codePlaceholder'),
+				icon: 'none'
+			})
+			return
+		}
+		try {
+			await userStore.login(
+				phone.value,
+				code.value,
+				areaCodeList[areaCodeIndex.value].value,
+				agreed.value
+			)
+			uni.navigateBack()
+		} catch (e) {}
+	}
 
-// 跳转隐私政策
-function goPrivacy() {
-	uni.navigateTo({ url: '/pages/privacy/privacy' })
-}
+	// 跳转用户协议
+	function goAgreement() {
+		uni.navigateTo({
+			url: '/pages/agreement/agreement'
+		})
+	}
+
+	// 跳转隐私政策
+	function goPrivacy() {
+		uni.navigateTo({
+			url: '/pages/privacy/privacy'
+		})
+	}
 </script>
 
 <style scoped>
-.login-page {
-	min-height: 100vh;
-	background-color: #ffffff;
-	padding: 0 60rpx;
-}
+	.login-page {
+		height: 100vh;
+		background-color: #f5f0e8;
+		position: relative;
+	}
 
-.logo-section {
-	display: flex;
-	justify-content: center;
-	padding-top: 120rpx;
-	padding-bottom: 80rpx;
-}
+	/* 全屏背景图 */
+	.bg-image {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #3B3F4A;
+	}
 
-.logo {
-	width: 160rpx;
-	height: 160rpx;
-}
+	/* 自定义导航栏 */
+	.custom-nav {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 24rpx;
+		height: 88rpx;
+		position: relative;
+		z-index: 10;
+	}
 
-.form-section {
-	width: 100%;
-}
+	.nav-back {
+		width: 48rpx;
+		height: 48rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.input-row {
-	display: flex;
-	align-items: center;
-	border-bottom: 1rpx solid #e5e5e5;
-	height: 100rpx;
-	margin-bottom: 20rpx;
-}
+	.back-icon {
+		width: 40rpx;
+		height: 40rpx;
+	}
 
-.area-code-picker {
-	display: flex;
-	align-items: center;
-	padding-right: 20rpx;
-	border-right: 1rpx solid #e5e5e5;
-	margin-right: 20rpx;
-}
+	.nav-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 32rpx;
+		color: #333;
+		font-weight: 500;
+	}
 
-.area-code-text {
-	font-size: 30rpx;
-	color: #333;
-}
+	.nav-placeholder {
+		width: 48rpx;
+	}
 
-.arrow-down {
-	font-size: 20rpx;
-	color: #999;
-	margin-left: 8rpx;
-}
+	/* 底部表单区域 */
+	.form-section {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 40rpx 30rpx;
+		padding-bottom: 60rpx;
+		z-index: 10;
+	}
 
-.input {
-	flex: 1;
-	height: 100%;
-	font-size: 30rpx;
-	color: #333;
-}
+	/* 输入行 */
+	.input-row {
+		display: flex;
+		align-items: center;
+		background-color: #ffffff;
+		border-radius: 16rpx;
+		height: 96rpx;
+		padding: 0 28rpx;
+		margin-bottom: 24rpx;
+	}
 
-.phone-input {
-	flex: 1;
-}
+	.area-code-picker {
+		display: flex;
+		align-items: center;
+	}
 
-.code-input {
-	flex: 1;
-}
+	.area-code-text {
+		font-size: 30rpx;
+		color: #333;
+	}
 
-.send-code-btn {
-	padding: 12rpx 24rpx;
-	border-radius: 8rpx;
-	background-color: #007aff;
-}
+	.arrow-down {
+		font-size: 24rpx;
+		color: #999;
+		margin-left: 8rpx;
+	}
 
-.send-code-btn.disabled {
-	background-color: #cccccc;
-}
+	.input-divider {
+		width: 1rpx;
+		height: 40rpx;
+		background-color: #e0e0e0;
+		margin: 0 24rpx;
+	}
 
-.send-code-text {
-	font-size: 26rpx;
-	color: #ffffff;
-	white-space: nowrap;
-}
+	.input {
+		flex: 1;
+		height: 100%;
+		font-size: 30rpx;
+		color: #333;
+	}
 
-.agreement-row {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	margin-top: 30rpx;
-	margin-bottom: 50rpx;
-}
+	/* 发送验证码按钮 */
+	.send-code-btn {
+		flex-shrink: 0;
+		padding-left: 20rpx;
+	}
 
-.checkbox {
-	width: 36rpx;
-	height: 36rpx;
-	border: 2rpx solid #cccccc;
-	border-radius: 6rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-right: 12rpx;
-}
+	.send-code-btn.disabled .send-code-text {
+		color: #ccc;
+	}
 
-.checkbox.checked {
-	background-color: #007aff;
-	border-color: #007aff;
-}
+	.send-code-text {
+		font-size: 28rpx;
+		color: #838D7E;
+		white-space: nowrap;
+	}
 
-.check-icon {
-	font-size: 24rpx;
-	color: #ffffff;
-}
+	/* 登录按钮 */
+	.login-btn {
+		width: 100%;
+		height: 96rpx;
+		background: #D0B582;
+		border-radius: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 16rpx;
+	}
 
-.agreement-text {
-	font-size: 24rpx;
-	color: #999;
-}
+	.login-btn-text {
+		font-size: 32rpx;
+		color: #ffffff;
+		font-weight: 500;
+	}
 
-.agreement-link {
-	font-size: 24rpx;
-	color: #007aff;
-}
+	/* 协议区域 */
+	.agreement-row {
+		display: flex;
+		align-items: flex-start;
+		margin-top: 32rpx;
+		padding: 0 8rpx;
+	}
 
-.login-btn {
-	width: 100%;
-	height: 90rpx;
-	background-color: #007aff;
-	border-radius: 45rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	.check-wrap {
+		flex-shrink: 0;
+		margin-right: 12rpx;
+		margin-top: 4rpx;
+	}
 
-.login-btn-text {
-	font-size: 32rpx;
-	color: #ffffff;
-	font-weight: 500;
-}
-</style>
+	.check-icon {
+		width: 32rpx;
+		height: 32rpx;
+	}
+
+	.agreement-text {
+		flex: 1;
+		font-size: 24rpx;
+		color: #999;
+		line-height: 1.6;
+	}
+
+	.agreement-link {
+		font-size: 24rpx;
+		color: #c9a96e;
+	}
+</style>
\ No newline at end of file
diff --git a/mobile/static/ic_back.png b/mobile/static/ic_back.png
new file mode 100644
index 00000000..afd31285
Binary files /dev/null and b/mobile/static/ic_back.png differ
diff --git a/mobile/static/ic_check.png b/mobile/static/ic_check.png
new file mode 100644
index 00000000..ea65f39a
Binary files /dev/null and b/mobile/static/ic_check.png differ
diff --git a/mobile/static/ic_checked.png b/mobile/static/ic_checked.png
new file mode 100644
index 00000000..7189cd57
Binary files /dev/null and b/mobile/static/ic_checked.png differ
diff --git a/mobile/static/ic_close.png b/mobile/static/ic_close.png
new file mode 100644
index 00000000..34dada16
Binary files /dev/null and b/mobile/static/ic_close.png differ
diff --git a/mobile/static/ic_explain.png b/mobile/static/ic_explain.png
new file mode 100644
index 00000000..9529f3f9
Binary files /dev/null and b/mobile/static/ic_explain.png differ