SolarNetwork/FloatingIsland
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Decorated rewind

Browse Source
This commit is contained in:
LittleSheep
2025-12-27 14:45:45 +08:00
parent b733b62e6d
commit ac3e647aba
2 changed files with 19 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/pages/rewind/me.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="px-5">
<div class="px-5 rewind-bg">
<!-- Loading State -->
<div
v-if="pending"
@@ -280,9 +280,6 @@
<div class="floating-emoji absolute bottom-1/3 -right-4 text-5xl z-10"
style="animation: drift 8s ease-in-out infinite;">💡
</div>
<div class="floating-emoji absolute top-2/3 right-1/4 text-4xl z-10"
style="animation: float 9s ease-in-out infinite 1s;">📝
</div>
<n-card
class="w-full max-w-4xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-green-600"
>
@@ -390,7 +387,7 @@
</div>
<div class="transition-words text-center text-lg opacity-70 py-16">
<div class="text-3xl mb-3">🎨</div>
<div class="text-3xl mb-3">🤔</div>
<p>每一个创作都是你心灵的印记，而这些印记汇聚成了什么？</p>
</div>
@@ -401,7 +398,7 @@
>
<div class="relative">
<div class="floating-emoji absolute -top-8 left-1/3 text-5xl z-10"
style="animation: float 5s ease-in-out infinite;">☁️
style="animation: float 5s ease-in-out infinite;">✍️
</div>
<div class="floating-emoji absolute top-1/4 -right-6 text-4xl z-10"
style="animation: float-delayed 7s ease-in-out infinite 0.5s;">💬
@@ -409,9 +406,6 @@
<div class="floating-emoji absolute bottom-1/4 -left-4 text-5xl z-10"
style="animation: drift 9s ease-in-out infinite;">💭
</div>
<div class="floating-emoji absolute top-2/3 right-1/3 text-4xl z-10"
style="animation: float 8s ease-in-out infinite 1.2s;">✨
</div>
<n-card
class="w-full max-w-4xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-blue-600"
>
@@ -474,15 +468,12 @@
<div class="floating-emoji absolute -top-6 -right-4 text-5xl z-10"
style="animation: float 6s ease-in-out infinite;">🌍
</div>
<div class="floating-emoji absolute top-1/3 -left-6 text-4xl z-10"
<div class="floating-emoji absolute -top-4 -left-6 text-4xl z-10"
style="animation: float-delayed 8s ease-in-out infinite 0.4s;">🔍
</div>
<div class="floating-emoji absolute bottom-1/4 right-1/4 text-5xl z-10"
<div class="floating-emoji absolute -bottom-4 right-4 text-5xl z-10"
style="animation: drift 10s ease-in-out infinite;">🎯
</div>
<div class="floating-emoji absolute top-2/3 -right-8 text-4xl z-10"
style="animation: float 7s ease-in-out infinite 1.5s;">📊
</div>
<n-card
class="w-full max-w-4xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-indigo-600"
>
@@ -568,9 +559,6 @@
<div class="floating-emoji absolute bottom-1/3 -left-6 text-5xl z-10"
style="animation: drift 8s ease-in-out infinite;">📞
</div>
<div class="floating-emoji absolute top-2/3 right-1/3 text-4xl z-10"
style="animation: float 7s ease-in-out infinite 1.8s;">🎭
</div>
<n-card
class="w-full max-w-4xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-teal-600"
>
@@ -1084,9 +1072,12 @@ onMounted(async () => {
// Animate transition words
const transitionWords = gsap.utils.toArray<HTMLElement>(".transition-words")
transitionWords.forEach((transition) => {
gsap.from(transition, {
gsap.fromTo(transition, {
opacity: 0,
y: 30,
y: 30
}, {
opacity: 0.7,
y: 0,
duration: 0.6,
ease: "power2.out",
scrollTrigger: {
@@ -1537,6 +1528,13 @@ definePageMeta({
</script>
<style scoped>
.rewind-bg {
background-image: radial-gradient(circle at top left, rgba(147, 197, 253, 0.1), transparent 30%),
radial-gradient(circle at bottom right, rgba(244, 114, 182, 0.1), transparent 30%);
background-attachment: fixed;
min-height: 100vh;
}
.floating-emoji {
position: absolute;
pointer-events: none;
@@ -1580,18 +1578,7 @@ definePageMeta({
}
.transition-words {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 0.7;
transform: translateY(0);
}
transform: translateY(20px);
}
@keyframes pulse-slow {
@@ -1607,11 +1594,3 @@ definePageMeta({
animation: pulse-slow 3s ease-in-out infinite;
}
</style>
<style>
body {
background-image: radial-gradient(circle at top left, rgba(147, 197, 253, 0.1), transparent 30%),
radial-gradient(circle at bottom right, rgba(244, 114, 182, 0.1), transparent 30%);
background-attachment: fixed;
}
</style>

1
app/types/api/rewind.ts
View File

@@ -123,6 +123,7 @@ export interface SnRewind {
id: string
year: number
schemaVersion: number
sharableCode: string | null
data: {
pass: SnRewindActiveData
sphere: SnRewindSocialData