Files
happy-life-star/UniApp/src/pages/splash/index.vue
T
2026-02-27 11:32:50 +08:00

132 lines
2.8 KiB
Vue

<template>
<view class="container">
<view class="bg-decoration">
<view class="aurora-top"></view>
<view class="aurora-bottom"></view>
</view>
<view class="overlay">
<view class="status-bar-space" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="content-area" :style="{ paddingBottom: safeAreaBottom + 'px' }">
<image class="logo" src="/static/logo.svg" mode="widthFix"></image>
<text class="app-name font-serif">人生OS</text>
<text class="app-version">LIFE HARMONY v3.1</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useAppStore } from '../../stores/app.js'
const statusBarHeight = ref(20)
const safeAreaBottom = ref(0)
onLoad(() => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 20
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
setTimeout(async () => {
const store = useAppStore()
const token = uni.getStorageSync('access_token')
if (token) {
await store.fetchUserProfile()
if (store.hasProfile) {
uni.reLaunch({ url: '/pages/main/index' })
} else {
uni.reLaunch({ url: '/pages/onboarding/index' })
}
} else {
uni.reLaunch({ url: '/pages/login/index' })
}
}, 2000)
})
</script>
<style>
.container {
position: relative;
width: 750rpx;
min-height: 100vh;
height: 100vh;
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
}
.status-bar-space {
height: constant(safe-area-inset-top);
height: env(safe-area-inset-top);
width: 100%;
background: transparent;
flex-shrink: 0;
}
.bg-decoration {
position: absolute;
inset: 0;
pointer-events: none;
}
.aurora-top {
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 60%;
background: rgba(168, 85, 247, 0.08);
filter: blur(120rpx);
border-radius: 50%;
}
.aurora-bottom {
position: absolute;
bottom: -10%;
right: -10%;
width: 100%;
height: 50%;
background: rgba(139, 92, 246, 0.05);
filter: blur(100rpx);
border-radius: 50%;
}
.overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
z-index: 1;
}
.content-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.logo {
width: 180rpx;
margin-bottom: 32rpx;
}
.app-name {
font-size: 52rpx;
font-weight: 300;
color: rgba(255, 255, 255, 0.95);
letter-spacing: 8rpx;
margin-bottom: 20rpx;
}
.app-version {
font-size: 24rpx;
color: rgba(168, 85, 247, 0.7);
letter-spacing: 4rpx;
}
</style>