feat(recall): 添加老客户召回引导页及相关资源

- 新增引导页路由配置和页面组件
- 更新登录页背景图和标题图引用方式
- 添加引导页所需的图片资源

 /*
 /*
  * @Date: 2025-03-20 20:36:36
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-20 17:37:47
+ * @LastEditTime: 2025-12-23 11:40:33
  * @FilePath: /mlaj/src/router/routes.js
  * @FilePath: /mlaj/src/router/routes.js
  * @Description: 路由地址映射配置
  * @Description: 路由地址映射配置
  */
  */
@@ -109,6 +109,12 @@ export const routes = [
     meta: { title: '召回老客户-登录页' },
     meta: { title: '召回老客户-登录页' },
   },
   },
   {
   {
+    path: '/recall/boot',
+    name: 'RecallBoot',
+    component: () => import('../views/recall/boot.vue'),
+    meta: { title: '召回老客户-引导页' },
+  },
+  {
     path: '/checkout',
     path: '/checkout',
     name: 'CheckoutPage',
     name: 'CheckoutPage',
     component: () => import('../views/checkout/CheckoutPage.vue'),
     component: () => import('../views/checkout/CheckoutPage.vue'),

+<template>
+  <div class="recall-boot w-full min-h-screen relative overflow-hidden flex flex-col items-center">
+    <!-- Starry Background Effect -->
+    <StarryBackground :bg-image="bgImg" />
+
+    <!-- Title Section -->
+    <div class="mt-16 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" />
+    </div>
+
+    <!-- Content Card -->
+    <div class="w-full px-6 mt-4 z-10">
+      <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
+        <div class="space-y-4 py-2">
+          <!-- Item 1 -->
+          <div class="flex items-start">
+            <img :src="starImg" class="w-5 h-5 mt-1 mr-3 flex-shrink-0" alt="star" />
+            <div class="flex-1">
+              <h3 class="text-white text-xl font-bold mb-2 tracking-wide">星球新纪元已开启</h3>
+              <p class="text-white/90 text-sm font-medium">定制成长线 + 学习社区 + 星球币福利体系</p>
+            </div>
+          </div>
+
+          <!-- Item 2 -->
+          <div class="flex items-center !mt-10">
+            <img :src="starImg" class="w-5 h-5 mr-3 flex-shrink-0" alt="star" />
+            <p class="text-white font-bold text-base tracking-wide">老玩家一键迁档，荣耀延续；</p>
+          </div>
+
+          <!-- Item 3 -->
+          <div class="flex items-center">
+            <img :src="starImg" class="w-5 h-5 mr-3 flex-shrink-0" alt="star" />
+            <p class="text-white font-bold text-base tracking-wide">新玩家注册即领星光启航礼！</p>
+          </div>
+        </div>
+      </FrostedGlass>
+    </div>
+
+    <!-- Action Button -->
+    <div class="w-full px-6 mt-auto z-10 mb-8">
+      <van-button block
+        class="submit-btn !rounded-lg !bg-[#3B82F6] !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
+        @click="handleNext">
+        完善个人信息
+      </van-button>
+      <p class="text-white text-center text-xs mt-4 tracking-wide">您的历史数据将自动同步至新星球</p>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { useRouter, useRoute } from 'vue-router'
+import { useTitle } from '@vueuse/core'
+import titleImg from '@/assets/images/recall/title02@2x.png'
+import bgImg from '@/assets/images/recall/bg01@2x.png'
+import starImg from '@/assets/images/recall/xing@2x.png'
+
+const router = useRouter()
+const route = useRoute()
+useTitle(route.meta.title)
+
+const handleNext = () => {
+  router.push({ name: 'RecallLogin' })
+}
+</script>
+
+<style lang="less" scoped>
+.submit-btn {
+  // Add a subtle gradient for better visual
+  background: linear-gradient(180deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%) !important;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+
+  &:active {
+    transform: scale(0.99);
+  }
+}
+</style>

 <template>
 <template>
   <div class="recall-login w-full min-h-screen relative overflow-hidden flex flex-col items-center">
   <div class="recall-login w-full min-h-screen relative overflow-hidden flex flex-col items-center">
     <!-- Starry Background Effect -->
     <!-- Starry Background Effect -->
-    <StarryBackground bg-image="https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg" />
+    <!-- <StarryBackground bg-image="https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg" /> -->
+    <StarryBackground :bg-image="bgImg" />
 
 
     <!-- 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="@/assets/images/recall/title01@2x.png" class="w-full max-w-[300px] mb-8 object-contain" alt="title" />
+      <img :src="titleImg" class="w-full max-w-[300px] mb-8 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-3 tracking-wider text-shadow-md">
         <p class="text-sm">请验证身份</p>
         <p class="text-sm">请验证身份</p>
@@ -78,19 +79,18 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-/**
- * @description 召回老客户-登录页
- * @author hookehuyr
- * @date 2025-12-23
- */
 import { ref, computed } from 'vue'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import { showToast } from 'vant'
-// FrostedGlass is auto-imported by unplugin-vue-components?
-// If not, explicit import might be needed but based on components.d.ts it should be available.
-// Just in case, if it fails, I'll add import. For now, assuming auto-import works as per components.d.ts.
+import { useTitle } from '@vueuse/core'
+
+import titleImg from '@/assets/images/recall/title01@2x.png'
+import bgImg from '@/assets/images/recall/bg01@2x.png'
 
 
-const router = useRouter()
+// 路由相关
+const $route = useRoute()
+const $router = useRouter()
+useTitle($route.meta.title)
 
 
 // Form Data
 // Form Data
 const phone = ref('')
 const phone = ref('')
@@ -146,7 +146,7 @@ const handleLogin = () => {
 
 
   showToast('登录成功')
   showToast('登录成功')
   // Navigate to next page (Index or whatever is next flow)
   // Navigate to next page (Index or whatever is next flow)
-  router.push('/recall')
+  $router.push('/recall')
 }
 }
 
 
 // Agreement Content
 // Agreement Content