132 lines
2.6 KiB
Vue
132 lines
2.6 KiB
Vue
<template>
|
|
<view class="analysis-screen">
|
|
<!-- Starry Background -->
|
|
<view class="analysis-bg">
|
|
<view class="analysis-bg-gradient"></view>
|
|
<view
|
|
v-for="s in stars"
|
|
:key="s.id"
|
|
class="analysis-star"
|
|
:style="{top: s.top + '%', left: s.left + '%', width: s.size + 'px', height: s.size + 'px'}">
|
|
</view>
|
|
<view class="analysis-bg-blur-1"></view>
|
|
<view class="analysis-bg-blur-2"></view>
|
|
</view>
|
|
|
|
<!-- Loading / Analyzing Stage -->
|
|
<view v-if="stage !== 'result'" class="analysis-loading">
|
|
<MysticCompass />
|
|
</view>
|
|
|
|
<!-- Result Stage -->
|
|
<AnalysisResult v-else @back="$emit('back')" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import MysticCompass from '../MysticCompass.vue';
|
|
import AnalysisResult from '../AnalysisResult.vue';
|
|
|
|
const emit = defineEmits<{
|
|
back: [];
|
|
}>();
|
|
|
|
const stage = ref<'loading' | 'analyzing' | 'result'>('loading');
|
|
|
|
// Starry background
|
|
const stars = ref(Array.from({ length: 50 }).map((_, i) => ({
|
|
id: i,
|
|
top: Math.random() * 100,
|
|
left: Math.random() * 100,
|
|
size: Math.random() * 2 + 1
|
|
})));
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
stage.value = 'analyzing';
|
|
}, 100);
|
|
|
|
setTimeout(() => {
|
|
stage.value = 'result';
|
|
}, 3500);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.analysis-screen {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family: SimSun, "Songti SC", "Songti TC", "Noto Serif SC", STSong, serif;
|
|
color: #e2e2e2;
|
|
}
|
|
|
|
/* Background */
|
|
.analysis-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.analysis-bg-gradient {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, #050508, #10101a, #1a1a2e);
|
|
}
|
|
|
|
.analysis-star {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: white;
|
|
opacity: 0.2;
|
|
animation: twinkle 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes twinkle {
|
|
0%, 100% { opacity: 0.1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.2); }
|
|
}
|
|
|
|
.analysis-bg-blur-1 {
|
|
position: absolute;
|
|
top: -10%;
|
|
left: -10%;
|
|
width: 50%;
|
|
height: 50%;
|
|
background: #2a3d5d;
|
|
opacity: 0.2;
|
|
filter: blur(100px);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.analysis-bg-blur-2 {
|
|
position: absolute;
|
|
bottom: -10%;
|
|
right: -10%;
|
|
width: 50%;
|
|
height: 50%;
|
|
background: #9c2a2a;
|
|
opacity: 0.1;
|
|
filter: blur(100px);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Loading Stage */
|
|
.analysis-loading {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|