feat: 更新登录和注册页面，添加表单验证和样式

components.d.ts

@@ -15,9 +15,12 @@ declare module 'vue' {
     BackButton: typeof import('./src/components/back-button.vue')['default']
     IonApp: typeof import('@ionic/vue')['IonApp']
     IonButton: typeof import('@ionic/vue')['IonButton']
+    IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
     IonContent: typeof import('@ionic/vue')['IonContent']
     IonHeader: typeof import('@ionic/vue')['IonHeader']
     IonIcon: typeof import('@ionic/vue')['IonIcon']
+    IonInput: typeof import('@ionic/vue')['IonInput']
+    IonItem: typeof import('@ionic/vue')['IonItem']
     IonLabel: typeof import('@ionic/vue')['IonLabel']
     IonPage: typeof import('@ionic/vue')['IonPage']
     IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
@@ -37,9 +40,12 @@ declare global {
   const BackButton: typeof import('./src/components/back-button.vue')['default']
   const IonApp: typeof import('@ionic/vue')['IonApp']
   const IonButton: typeof import('@ionic/vue')['IonButton']
+  const IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
   const IonContent: typeof import('@ionic/vue')['IonContent']
   const IonHeader: typeof import('@ionic/vue')['IonHeader']
   const IonIcon: typeof import('@ionic/vue')['IonIcon']
+  const IonInput: typeof import('@ionic/vue')['IonInput']
+  const IonItem: typeof import('@ionic/vue')['IonItem']
   const IonLabel: typeof import('@ionic/vue')['IonLabel']
   const IonPage: typeof import('@ionic/vue')['IonPage']
   const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']

src/components/layout/default.vue

@@ -38,7 +38,7 @@ const { t } = useI18n();
 ion-tab-bar {
   height: 60px;
   --background: var(--ion-background-color);
-  box-shadow: 0px 0px 12px rgba(45, 213, 90, 0.21);
+  box-shadow: 0px 0px 12px var(--ion-color-tertiary);
   padding-bottom: var(--ion-safe-area-bottom);
 }
 .icon {

src/theme/ionic.css

@@ -1,3 +1,69 @@
+:root {
+	--ion-color-primary: #c31d39;
+	--ion-color-primary-rgb: 195,29,57;
+	--ion-color-primary-contrast: #ffffff;
+	--ion-color-primary-contrast-rgb: 255,255,255;
+	--ion-color-primary-shade: #ac1a32;
+	--ion-color-primary-tint: #c9344d;
+
+	--ion-color-secondary: #e8756d;
+	--ion-color-secondary-rgb: 232,117,109;
+	--ion-color-secondary-contrast: #000000;
+	--ion-color-secondary-contrast-rgb: 0,0,0;
+	--ion-color-secondary-shade: #cc6760;
+	--ion-color-secondary-tint: #ea837c;
+
+	--ion-color-tertiary: #f5d5c8;
+	--ion-color-tertiary-rgb: 245,213,200;
+	--ion-color-tertiary-contrast: #000000;
+	--ion-color-tertiary-contrast-rgb: 0,0,0;
+	--ion-color-tertiary-shade: #d8bbb0;
+	--ion-color-tertiary-tint: #f6d9ce;
+
+	--ion-color-success: #2dd55b;
+	--ion-color-success-rgb: 45,213,91;
+	--ion-color-success-contrast: #000000;
+	--ion-color-success-contrast-rgb: 0,0,0;
+	--ion-color-success-shade: #28bb50;
+	--ion-color-success-tint: #42d96b;
+
+	--ion-color-warning: #ffc409;
+	--ion-color-warning-rgb: 255,196,9;
+	--ion-color-warning-contrast: #000000;
+	--ion-color-warning-contrast-rgb: 0,0,0;
+	--ion-color-warning-shade: #e0ac08;
+	--ion-color-warning-tint: #ffca22;
+
+	--ion-color-danger: #c5000f;
+	--ion-color-danger-rgb: 197,0,15;
+	--ion-color-danger-contrast: #ffffff;
+	--ion-color-danger-contrast-rgb: 255,255,255;
+	--ion-color-danger-shade: #ad000d;
+	--ion-color-danger-tint: #cb1a27;
+
+	--ion-color-light: #f6f8fc;
+	--ion-color-light-rgb: 246,248,252;
+	--ion-color-light-contrast: #000000;
+	--ion-color-light-contrast-rgb: 0,0,0;
+	--ion-color-light-shade: #d8dade;
+	--ion-color-light-tint: #f7f9fc;
+
+	--ion-color-medium: #5f5f5f;
+	--ion-color-medium-rgb: 95,95,95;
+	--ion-color-medium-contrast: #ffffff;
+	--ion-color-medium-contrast-rgb: 255,255,255;
+	--ion-color-medium-shade: #545454;
+	--ion-color-medium-tint: #6f6f6f;
+
+	--ion-color-dark: #2f2f2f;
+	--ion-color-dark-rgb: 47,47,47;
+	--ion-color-dark-contrast: #ffffff;
+	--ion-color-dark-contrast-rgb: 255,255,255;
+	--ion-color-dark-shade: #292929;
+	--ion-color-dark-tint: #444444;
+
+}
+
 .ion-toolbar {
   --background: var(--ion-color-primary-contrast);
   --min-height: 50px;

src/views/auth/login.vue

@@ -1,22 +1,537 @@
 <script lang='ts' setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
+
+const phoneNumber = ref("");
+const password = ref("");
+const agreed = ref(false);
+const showPassword = ref(false);
+
+function handleLogin() {
+  if (!phoneNumber.value || !password.value) {
+    // TODO: 显示提示信息
+    return;
+  }
+  if (!agreed.value) {
+    // TODO: 提示需要同意条款
+    return;
+  }
+  // TODO: 实现登录逻辑
+  console.log("登录", { phoneNumber: phoneNumber.value, password: password.value });
+}
+
+function handleSignup() {
+  router.push("/auth/signup");
+}
+
+function goToTerms(type: "service" | "privacy") {
+  router.push(`/auth/term?type=${type}`);
+}
 </script>
 
 <template>
   <ion-page>
-    <ion-header class="ion-no-border">
+    <ion-content :fullscreen="true" class="login-page">
-      <ion-toolbar class="ion-toolbar">
+      <!-- 渐变背景 -->
-        <back-button slot="start" />
+      <div class="gradient-bg" />
-        <ion-title>登录</ion-title>
-      </ion-toolbar>
-    </ion-header>
 
-    <ion-content :fullscreen="true" class="ion-padding">
+      <!-- 装饰元素 - 顶部飞鸟 -->
-      <div class="max-w-md mx-auto flex flex-col gap-6">
+      <div class="decoration-top">
-        <!-- 登录表单内容省略 -->
+        <div class="bird bird-1" />
+        <div class="bird bird-2" />
+        <div class="bird bird-3" />
+      </div>
+
+      <!-- 主要内容区域 -->
+      <div class="content-wrapper">
+        <!-- 顶部Logo和欢迎语 -->
+        <div class="header-section">
+          <div class="emblem">
+            <div class="emblem-circle">
+              <div class="emblem-inner">
+                <div class="star">
+                  ★
+                </div>
+                <div class="emblem-text">
+                  中华人民共和国
+                </div>
+              </div>
+            </div>
+          </div>
+          <h1 class="welcome-title">
+            你好
+          </h1>
+          <h2 class="welcome-subtitle">
+            欢迎登录深化改革
+          </h2>
+        </div>
+
+        <!-- 登录表单 -->
+        <div class="form-section">
+          <!-- 手机号输入 -->
+          <ion-item lines="none" class="input-item">
+            <ion-input
+              v-model="phoneNumber"
+              type="tel"
+              placeholder="请输入手机号"
+              class="custom-input"
+              :maxlength="11"
+            />
+          </ion-item>
+
+          <!-- 密码输入 -->
+          <ion-item lines="none" class="input-item">
+            <ion-input
+              v-model="password"
+              :type="showPassword ? 'text' : 'password'"
+              placeholder="请输入密码"
+              class="custom-input"
+            />
+            <ion-icon
+              slot="end"
+              :icon="showPassword ? 'eye-outline' : 'eye-off-outline'"
+              class="password-toggle"
+              @click="showPassword = !showPassword"
+            />
+          </ion-item>
+
+          <!-- 协议同意 -->
+          <div class="agreement-section">
+            <ion-checkbox v-model="agreed" class="agreement-checkbox" />
+            <span class="agreement-text">
+              我已阅读并同意
+              <a class="link-service" @click="goToTerms('service')">《服务条款》</a>
+              和
+              <a class="link-privacy" @click="goToTerms('privacy')">《隐私政策》</a>
+            </span>
+          </div>
+
+          <!-- 登录按钮 -->
+          <ion-button
+            expand="block"
+            class="login-button"
+            @click="handleLogin"
+          >
+            登录
+          </ion-button>
+
+          <!-- 注册按钮 -->
+          <ion-button
+            expand="block"
+            fill="outline"
+            class="signup-button"
+            @click="handleSignup"
+          >
+            注册
+          </ion-button>
+        </div>
+      </div>
+
+      <!-- 底部装饰 - 天安门和飞鸟 -->
+      <div class="decoration-bottom">
+        <div class="building-wrapper">
+          <div class="building" />
+          <div class="birds-bottom">
+            <div class="bird-small bird-b-1" />
+            <div class="bird-small bird-b-2" />
+            <div class="bird-small bird-b-3" />
+            <div class="bird-small bird-b-4" />
+          </div>
+        </div>
+        <div class="wave-red" />
       </div>
     </ion-content>
   </ion-page>
 </template>
 
-<style lang='css' scoped></style>
+<style lang='css' scoped>
+.login-page {
+  --background: transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 渐变背景 */
+.gradient-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    180deg,
+    #c41e3a 0%,
+    #e8756d 15%,
+    #f5d5c8 35%,
+    #fef5f1 50%,
+    #fef5f1 65%,
+    #f5d5c8 85%,
+    #e8756d 100%
+  );
+  z-index: 0;
+}
+
+/* 顶部装饰飞鸟 */
+.decoration-top {
+  position: absolute;
+  top: 80px;
+  left: 20px;
+  z-index: 1;
+}
+
+.bird {
+  width: 16px;
+  height: 16px;
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  position: absolute;
+  clip-path: polygon(50% 0%, 0% 40%, 20% 50%, 0% 60%, 50% 100%, 100% 60%, 80% 50%, 100% 40%);
+  opacity: 0.8;
+  animation: float 3s ease-in-out infinite;
+}
+
+.bird-1 {
+  left: 0;
+  top: 0;
+  animation-delay: 0s;
+}
+
+.bird-2 {
+  left: 25px;
+  top: 10px;
+  width: 14px;
+  height: 14px;
+  animation-delay: 0.5s;
+}
+
+.bird-3 {
+  left: 15px;
+  top: 30px;
+  width: 12px;
+  height: 12px;
+  animation-delay: 1s;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-10px) rotate(5deg);
+  }
+}
+
+/* 内容包装器 */
+.content-wrapper {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 40px 24px 20px;
+}
+
+/* 头部区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+/* 国徽 */
+.emblem {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.emblem-circle {
+  width: 70px;
+  height: 70px;
+  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
+  border: 3px solid #c41e3a;
+}
+
+.emblem-inner {
+  width: 56px;
+  height: 56px;
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.star {
+  font-size: 24px;
+  color: #ffd700;
+  font-weight: bold;
+  margin-bottom: -4px;
+}
+
+.emblem-text {
+  font-size: 6px;
+  color: #ffd700;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  text-align: center;
+  line-height: 1.2;
+  width: 40px;
+}
+
+/* 欢迎文字 */
+.welcome-title {
+  font-size: 32px;
+  font-weight: bold;
+  color: #2c3e50;
+  margin: 0 0 8px 0;
+  letter-spacing: 2px;
+}
+
+.welcome-subtitle {
+  font-size: 24px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+/* 表单区域 */
+.form-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 400px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* 输入框 */
+.input-item {
+  --background: rgba(255, 255, 255, 0.9);
+  --border-radius: 12px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  --inner-padding-end: 0;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  margin: 0;
+}
+
+.custom-input {
+  --padding-start: 0;
+  --padding-end: 0;
+  font-size: 16px;
+  color: #2c3e50;
+}
+
+.password-toggle {
+  color: #8b949e;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+/* 协议同意 */
+.agreement-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px;
+}
+
+.agreement-checkbox {
+  --size: 20px;
+  --border-radius: 4px;
+  --background-checked: #0052d9;
+  --border-color-checked: #0052d9;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.agreement-text {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.link-service,
+.link-privacy {
+  color: #c41e3a;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.link-service:hover,
+.link-privacy:hover {
+  text-decoration: underline;
+}
+
+/* 登录按钮 */
+.login-button {
+  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  --background-hover: linear-gradient(135deg, #a01830 0%, #6b1424 100%);
+  --border-radius: 25px;
+  --box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
+  height: 50px;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  margin-top: 8px;
+  text-transform: none;
+}
+
+/* 注册按钮 */
+.signup-button {
+  --border-color: #8b1a2e;
+  --border-width: 2px;
+  --border-radius: 25px;
+  --color: #8b1a2e;
+  --background: transparent;
+  --background-hover: rgba(196, 30, 58, 0.05);
+  height: 50px;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  text-transform: none;
+}
+
+/* 底部装饰 */
+.decoration-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.building-wrapper {
+  position: relative;
+  height: 180px;
+  overflow: hidden;
+}
+
+.building {
+  position: absolute;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+  height: 140px;
+  background: linear-gradient(
+    to top,
+    rgba(196, 30, 58, 0.9) 0%,
+    rgba(196, 30, 58, 0.8) 20%,
+    rgba(232, 117, 109, 0.7) 40%,
+    rgba(232, 117, 109, 0.5) 60%,
+    rgba(232, 117, 109, 0.3) 80%,
+    transparent 100%
+  );
+  clip-path: polygon(
+    0% 100%,
+    0% 60%,
+    10% 55%,
+    15% 50%,
+    15% 45%,
+    18% 45%,
+    18% 40%,
+    22% 40%,
+    22% 35%,
+    28% 35%,
+    28% 30%,
+    35% 30%,
+    35% 25%,
+    42% 25%,
+    45% 22%,
+    50% 20%,
+    55% 22%,
+    58% 25%,
+    65% 25%,
+    65% 30%,
+    72% 30%,
+    72% 35%,
+    78% 35%,
+    78% 40%,
+    82% 40%,
+    82% 45%,
+    85% 45%,
+    85% 50%,
+    90% 55%,
+    100% 60%,
+    100% 100%
+  );
+}
+
+.birds-bottom {
+  position: absolute;
+  bottom: 80px;
+  right: 20px;
+}
+
+.bird-small {
+  width: 12px;
+  height: 12px;
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  position: absolute;
+  clip-path: polygon(50% 0%, 0% 40%, 20% 50%, 0% 60%, 50% 100%, 100% 60%, 80% 50%, 100% 40%);
+  opacity: 0.9;
+  animation: float-bottom 2.5s ease-in-out infinite;
+}
+
+.bird-b-1 {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0s;
+}
+
+.bird-b-2 {
+  right: 20px;
+  bottom: 15px;
+  width: 14px;
+  height: 14px;
+  animation-delay: 0.3s;
+}
+
+.bird-b-3 {
+  right: 45px;
+  bottom: 8px;
+  animation-delay: 0.6s;
+}
+
+.bird-b-4 {
+  right: 70px;
+  bottom: 20px;
+  width: 10px;
+  height: 10px;
+  animation-delay: 0.9s;
+}
+
+@keyframes float-bottom {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(-5px, -8px) rotate(-5deg);
+  }
+}
+
+/* 红色波浪 */
+.wave-red {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: linear-gradient(180deg, transparent 0%, #c41e3a 100%);
+}
+</style>

src/views/auth/signup.vue

@@ -1,22 +1,621 @@
 <script lang='ts' setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
+
+const formData = ref({
+  phoneNumber: "",
+  password: "",
+  confirmPassword: "",
+  realName: "",
+  idCard: "",
+  inviteCode: "",
+});
+const agreed = ref(false);
+const showPassword = ref(false);
+const showConfirmPassword = ref(false);
+
+function handleSignup() {
+  // 验证手机号
+  if (!formData.value.phoneNumber) {
+    // TODO: 显示提示信息
+    return;
+  }
+
+  // 验证密码
+  if (!formData.value.password) {
+    // TODO: 提示输入密码
+    return;
+  }
+
+  // 验证确认密码
+  if (formData.value.password !== formData.value.confirmPassword) {
+    // TODO: 提示密码不一致
+    return;
+  }
+
+  // 验证姓名
+  if (!formData.value.realName) {
+    // TODO: 提示输入姓名
+    return;
+  }
+
+  // 验证身份证
+  if (!formData.value.idCard) {
+    // TODO: 提示输入身份证
+    return;
+  }
+
+  if (!agreed.value) {
+    // TODO: 提示需要同意条款
+    return;
+  }
+
+  // TODO: 实现注册逻辑
+  console.log("注册", formData.value);
+}
+
+function handleLogin() {
+  router.push("/auth/login");
+}
+
+function goToTerms(type: "service" | "privacy") {
+  router.push(`/auth/term?type=${type}`);
+}
 </script>
 
 <template>
   <ion-page>
-    <ion-header>
+    <ion-content :fullscreen="true" class="signup-page">
-      <ion-toolbar class="ion-toolbar">
+      <!-- 渐变背景 -->
-        <back-button slot="start" />
+      <div class="gradient-bg" />
-        <ion-title>登录</ion-title>
-      </ion-toolbar>
-    </ion-header>
 
-    <ion-content :fullscreen="true" class="ion-padding">
+      <!-- 装饰元素 - 顶部飞鸟 -->
-      <div class="max-w-md mx-auto flex flex-col gap-6">
+      <div class="decoration-top">
-        <!-- 登录表单内容省略 -->
+        <div class="bird bird-1" />
+        <div class="bird bird-2" />
+        <div class="bird bird-3" />
+      </div>
+
+      <!-- 主要内容区域 -->
+      <div class="content-wrapper">
+        <!-- 顶部Logo和标题 -->
+        <div class="header-section">
+          <div class="emblem">
+            <div class="emblem-circle">
+              <div class="emblem-inner">
+                <div class="star">
+                  ★
+                </div>
+                <div class="emblem-text">
+                  中华人民共和国
+                </div>
+              </div>
+            </div>
+          </div>
+          <h1 class="welcome-title">
+            创建账号
+          </h1>
+          <h2 class="welcome-subtitle">
+            加入深化改革平台
+          </h2>
+        </div>
+
+        <!-- 注册表单 -->
+        <div class="form-section">
+          <!-- 手机号输入 -->
+          <ion-item lines="none" class="input-item">
+            <ion-input
+              v-model="formData.phoneNumber"
+              type="tel"
+              placeholder="请输入手机号"
+              class="custom-input"
+              :maxlength="11"
+            />
+          </ion-item>
+
+          <!-- 密码输入 -->
+          <ion-item lines="none" class="input-item">
+            <ion-input
+              v-model="formData.password"
+              :type="showPassword ? 'text' : 'password'"
+              placeholder="请输入密码"
+              class="custom-input"
+            />
+            <ion-icon
+              slot="end"
+              :icon="showPassword ? 'eye-outline' : 'eye-off-outline'"
+              class="password-toggle"
+              @click="showPassword = !showPassword"
+            />
+          </ion-item>
+
+          <!-- 确认密码输入 -->
+          <ion-item lines="none" class="input-item">
+            <ion-input
+              v-model="formData.confirmPassword"
+              :type="showConfirmPassword ? 'text' : 'password'"
+              placeholder="请确认密码"
+              class="custom-input"
+            />
+            <ion-icon
+              slot="end"
+              :icon="showConfirmPassword ? 'eye-outline' : 'eye-off-outline'"
+              class="password-toggle"
+              @click="showConfirmPassword = !showConfirmPassword"
+            />
+          </ion-item>
+
+          <!-- 姓名输入 -->
+          <ion-item lines="none" class="input-item">
+            <ion-input
+              v-model="formData.realName"
+              type="text"
+              placeholder="请输入真实姓名"
+              class="custom-input"
+            />
+          </ion-item>
+
+          <!-- 身份证输入 -->
+          <ion-item lines="none" class="input-item">
+            <ion-input
+              v-model="formData.idCard"
+              type="text"
+              placeholder="请输入身份证号码"
+              class="custom-input"
+              :maxlength="18"
+            />
+          </ion-item>
+
+          <!-- 邀请码输入 -->
+          <ion-item lines="none" class="input-item">
+            <ion-input
+              v-model="formData.inviteCode"
+              type="text"
+              placeholder="请输入邀请码（选填）"
+              class="custom-input"
+            />
+          </ion-item>
+
+          <!-- 协议同意 -->
+          <div class="agreement-section">
+            <ion-checkbox v-model="agreed" class="agreement-checkbox" />
+            <span class="agreement-text">
+              我已阅读并同意
+              <a class="link-service" @click="goToTerms('service')">《服务条款》</a>
+              和
+              <a class="link-privacy" @click="goToTerms('privacy')">《隐私政策》</a>
+            </span>
+          </div>
+
+          <!-- 注册按钮 -->
+          <ion-button
+            expand="block"
+            class="signup-button"
+            @click="handleSignup"
+          >
+            注册
+          </ion-button>
+
+          <!-- 登录按钮 -->
+          <ion-button
+            expand="block"
+            fill="outline"
+            class="login-button"
+            @click="handleLogin"
+          >
+            已有账号？立即登录
+          </ion-button>
+        </div>
+      </div>
+
+      <!-- 底部装饰 - 天安门和飞鸟 -->
+      <div class="decoration-bottom">
+        <div class="building-wrapper">
+          <div class="building" />
+          <div class="birds-bottom">
+            <div class="bird-small bird-b-1" />
+            <div class="bird-small bird-b-2" />
+            <div class="bird-small bird-b-3" />
+            <div class="bird-small bird-b-4" />
+          </div>
+        </div>
+        <div class="wave-red" />
       </div>
     </ion-content>
   </ion-page>
 </template>
 
-<style lang='css' scoped></style>
+<style lang='css' scoped>
+.signup-page {
+  --background: transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 渐变背景 */
+.gradient-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    180deg,
+    #c41e3a 0%,
+    #e8756d 15%,
+    #f5d5c8 35%,
+    #fef5f1 50%,
+    #fef5f1 65%,
+    #f5d5c8 85%,
+    #e8756d 100%
+  );
+  z-index: 0;
+}
+
+/* 顶部装饰飞鸟 */
+.decoration-top {
+  position: absolute;
+  top: 60px;
+  left: 20px;
+  z-index: 1;
+}
+
+.bird {
+  width: 16px;
+  height: 16px;
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  position: absolute;
+  clip-path: polygon(50% 0%, 0% 40%, 20% 50%, 0% 60%, 50% 100%, 100% 60%, 80% 50%, 100% 40%);
+  opacity: 0.8;
+  animation: float 3s ease-in-out infinite;
+}
+
+.bird-1 {
+  left: 0;
+  top: 0;
+  animation-delay: 0s;
+}
+
+.bird-2 {
+  left: 25px;
+  top: 10px;
+  width: 14px;
+  height: 14px;
+  animation-delay: 0.5s;
+}
+
+.bird-3 {
+  left: 15px;
+  top: 30px;
+  width: 12px;
+  height: 12px;
+  animation-delay: 1s;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-10px) rotate(5deg);
+  }
+}
+
+/* 内容包装器 */
+.content-wrapper {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 30px 24px 20px;
+  overflow-y: auto;
+}
+
+/* 头部区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  flex-shrink: 0;
+}
+
+/* 国徽 */
+.emblem {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.emblem-circle {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
+  border: 3px solid #c41e3a;
+}
+
+.emblem-inner {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.star {
+  font-size: 20px;
+  color: #ffd700;
+  font-weight: bold;
+  margin-bottom: -3px;
+}
+
+.emblem-text {
+  font-size: 5px;
+  color: #ffd700;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  text-align: center;
+  line-height: 1.2;
+  width: 36px;
+}
+
+/* 欢迎文字 */
+.welcome-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #1a1a1a;
+  margin: 0 0 6px 0;
+  letter-spacing: 2px;
+}
+
+.welcome-subtitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+/* 表单区域 */
+.form-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 400px;
+  width: 100%;
+  margin: 0 auto;
+  padding-bottom: 200px;
+}
+
+/* 输入框 */
+.input-item {
+  --background: rgba(255, 255, 255, 0.95);
+  --border-radius: 12px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  --inner-padding-end: 0;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  margin: 0;
+}
+
+.custom-input {
+  --padding-start: 0;
+  --padding-end: 0;
+  font-size: 16px;
+  color: #2c3e50;
+}
+
+.password-toggle {
+  color: #8b949e;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+/* 协议同意 */
+.agreement-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 4px 4px;
+}
+
+.agreement-checkbox {
+  --size: 20px;
+  --border-radius: 4px;
+  --background-checked: #c41e3a;
+  --border-color-checked: #c41e3a;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.agreement-text {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.link-service,
+.link-privacy {
+  color: #c41e3a;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.link-service:hover,
+.link-privacy:hover {
+  text-decoration: underline;
+}
+
+/* 注册按钮 */
+.signup-button {
+  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  --background-hover: linear-gradient(135deg, #a01830 0%, #6b1424 100%);
+  --border-radius: 25px;
+  --box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
+  height: 50px;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  margin-top: 8px;
+  text-transform: none;
+}
+
+/* 登录按钮 */
+.login-button {
+  --border-color: #8b1a2e;
+  --border-width: 2px;
+  --border-radius: 25px;
+  --color: #8b1a2e;
+  --background: transparent;
+  --background-hover: rgba(196, 30, 58, 0.05);
+  height: 50px;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: none;
+}
+
+/* 底部装饰 */
+.decoration-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.building-wrapper {
+  position: relative;
+  height: 180px;
+  overflow: hidden;
+}
+
+.building {
+  position: absolute;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+  height: 140px;
+  background: linear-gradient(
+    to top,
+    rgba(196, 30, 58, 0.9) 0%,
+    rgba(196, 30, 58, 0.8) 20%,
+    rgba(232, 117, 109, 0.7) 40%,
+    rgba(232, 117, 109, 0.5) 60%,
+    rgba(232, 117, 109, 0.3) 80%,
+    transparent 100%
+  );
+  clip-path: polygon(
+    0% 100%,
+    0% 60%,
+    10% 55%,
+    15% 50%,
+    15% 45%,
+    18% 45%,
+    18% 40%,
+    22% 40%,
+    22% 35%,
+    28% 35%,
+    28% 30%,
+    35% 30%,
+    35% 25%,
+    42% 25%,
+    45% 22%,
+    50% 20%,
+    55% 22%,
+    58% 25%,
+    65% 25%,
+    65% 30%,
+    72% 30%,
+    72% 35%,
+    78% 35%,
+    78% 40%,
+    82% 40%,
+    82% 45%,
+    85% 45%,
+    85% 50%,
+    90% 55%,
+    100% 60%,
+    100% 100%
+  );
+}
+
+.birds-bottom {
+  position: absolute;
+  bottom: 80px;
+  right: 20px;
+}
+
+.bird-small {
+  width: 12px;
+  height: 12px;
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  position: absolute;
+  clip-path: polygon(50% 0%, 0% 40%, 20% 50%, 0% 60%, 50% 100%, 100% 60%, 80% 50%, 100% 40%);
+  opacity: 0.9;
+  animation: float-bottom 2.5s ease-in-out infinite;
+}
+
+.bird-b-1 {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0s;
+}
+
+.bird-b-2 {
+  right: 20px;
+  bottom: 15px;
+  width: 14px;
+  height: 14px;
+  animation-delay: 0.3s;
+}
+
+.bird-b-3 {
+  right: 45px;
+  bottom: 8px;
+  animation-delay: 0.6s;
+}
+
+.bird-b-4 {
+  right: 70px;
+  bottom: 20px;
+  width: 10px;
+  height: 10px;
+  animation-delay: 0.9s;
+}
+
+@keyframes float-bottom {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(-5px, -8px) rotate(-5deg);
+  }
+}
+
+/* 红色波浪 */
+.wave-red {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: linear-gradient(180deg, transparent 0%, #c41e3a 100%);
+}
+</style>