boot.vue
2.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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>