style(recall): 调整页面间距和按钮样式

优化多个页面的间距布局，统一提交按钮的样式

@@ -4,7 +4,7 @@
     <StarryBackground :bg-image="bgImg" />
     <StarryBackground :bg-image="bgImg" />
 
 
     <!-- Main Content Card -->
     <!-- Main Content Card -->
-    <div class="w-full px-6 mt-20 z-10">
+    <div class="w-full px-6 mt-10 z-10">
       <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
       <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
         <!-- Illustration -->
         <!-- Illustration -->
         <div class="flex justify-center mb-2">
         <div class="flex justify-center mb-2">
@@ -112,6 +112,16 @@ const handleConfirm = () => {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
+.submit-btn {
+  background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+
+  &:active {
+    transform: scale(0.99);
+  }
+}
+
 .custom-input {
 .custom-input {
   ::v-deep(.van-field__control) {
   ::v-deep(.van-field__control) {
     color: #fff;
     color: #fff;

@@ -6,9 +6,9 @@
 
 
     <!-- Title Section -->
     <!-- Title Section -->
     <div class="mt-10 flex flex-col items-center z-10 w-full px-8">
     <div class="mt-10 flex flex-col items-center z-10 w-full px-8">
-      <img :src="titleImg" class="w-full max-w-[300px] mb-8 object-contain" alt="title" />
+      <img :src="titleImg" class="w-full max-w-[300px] mb-4 object-contain" alt="title" />
 
 
-      <div class="text-white text-center space-y-3 tracking-wider text-shadow-md">
+      <div class="text-white text-center space-y-1 tracking-wider text-shadow-md">
         <p class="text-sm">请验证身份</p>
         <p class="text-sm">请验证身份</p>
         <p class="text-sm">开启专属您的「时光机」</p>
         <p class="text-sm">开启专属您的「时光机」</p>
         <p class="text-sm">见证每一段成长故事</p>
         <p class="text-sm">见证每一段成长故事</p>
@@ -16,7 +16,7 @@
     </div>
     </div>
 
 
     <!-- Login Form Module -->
     <!-- Login Form Module -->
-    <div class="w-full px-6 mt-12 z-10">
+    <div class="w-full px-6 mt-6 z-10">
       <!-- Using existing FrostedGlass component for semi-transparent effect -->
       <!-- Using existing FrostedGlass component for semi-transparent effect -->
       <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
       <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
         <h2 class="text-white text-center text-xl font-bold mb-8 tracking-widest drop-shadow-md">手机号验证</h2>
         <h2 class="text-white text-center text-xl font-bold mb-8 tracking-widest drop-shadow-md">手机号验证</h2>

@@ -73,7 +73,7 @@
               都是这片星球上不灭的星光。
               都是这片星球上不灭的星光。
             </p>
             </p>
             <van-button block
             <van-button block
-              class="!rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px] !max-w-xs"
+              class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px] !max-w-xs"
               @click="handleViewHistory">
               @click="handleViewHistory">
               我的星光
               我的星光
             </van-button>
             </van-button>
@@ -166,6 +166,16 @@ const handleViewHistory = () => {
   // Custom animations if needed, or use Tailwind utility classes
   // Custom animations if needed, or use Tailwind utility classes
 }
 }
 
 
+.submit-btn {
+  background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+
+  &:active {
+    transform: scale(0.99);
+  }
+}
+
 // Simple fade/zoom animations
 // Simple fade/zoom animations
 @keyframes fadeInDown {
 @keyframes fadeInDown {
   from {
   from {