315 lines
6.8 KiB
Vue
315 lines
6.8 KiB
Vue
<template>
|
|
<!-- #ifndef APP-PLUS -->
|
|
<view v-if="visible" class="splash-screen" :class="{ 'splash-screen--leaving': leaving }">
|
|
<view class="splash-screen__field">
|
|
<!-- 中心大光晕: 整片柔光铺底 -->
|
|
<view class="splash-screen__aura"></view>
|
|
|
|
<!-- 三圈轨道: 由内到外, 描边极淡 -->
|
|
<view class="splash-screen__orbit splash-screen__orbit--1">
|
|
<view class="splash-screen__particle splash-screen__particle--1"></view>
|
|
</view>
|
|
<view class="splash-screen__orbit splash-screen__orbit--2">
|
|
<view class="splash-screen__particle splash-screen__particle--2"></view>
|
|
</view>
|
|
<view class="splash-screen__orbit splash-screen__orbit--3">
|
|
<view class="splash-screen__particle splash-screen__particle--3"></view>
|
|
</view>
|
|
|
|
<!-- 中心星核: 渐变球体 + 内反光 + 外发光 -->
|
|
<view class="splash-screen__core">
|
|
<view class="splash-screen__core-halo"></view>
|
|
<view class="splash-screen__core-body"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script>
|
|
import splashState from '@/common/js/splash-state.js';
|
|
|
|
export default {
|
|
name: 'splash-screen',
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
leaving: false
|
|
};
|
|
},
|
|
mounted() {
|
|
if (splashState.isShow()) {
|
|
this.visible = true;
|
|
}
|
|
splashState.notifyMounted();
|
|
splashState.on('splash:show', () => {
|
|
this.visible = true;
|
|
this.leaving = false;
|
|
});
|
|
splashState.on('splash:hide', () => {
|
|
this._leave();
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
splashState.off('splash:show');
|
|
splashState.off('splash:hide');
|
|
splashState.notifyUnmounted();
|
|
if (this._leaveTimer) {
|
|
clearTimeout(this._leaveTimer);
|
|
this._leaveTimer = null;
|
|
}
|
|
},
|
|
methods: {
|
|
_leave() {
|
|
this.leaving = true;
|
|
if (this._leaveTimer) clearTimeout(this._leaveTimer);
|
|
this._leaveTimer = setTimeout(() => {
|
|
this.visible = false;
|
|
this.leaving = false;
|
|
}, 480);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// ============================================================
|
|
// 启动屏 — 极光脉冲
|
|
// 中心柔光球呼吸, 三圈粒子轨道旋转, 整体白底 + 蓝紫辉光
|
|
// 单一焦点 / 对称结构 / 黄金比例节奏, 跨平台一致
|
|
// ============================================================
|
|
|
|
$accent: #6366F1; // 主色: 靛蓝
|
|
$accent-light: #A5B4FC; // 亮部
|
|
$accent-deep: #4338CA; // 暗部
|
|
|
|
.splash-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 99999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #ffffff;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&--leaving {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
// 容器: 480rpx 见方, 居中
|
|
.splash-screen__field {
|
|
position: relative;
|
|
width: 480rpx;
|
|
height: 480rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// 入场: 缩放 + 透明度, 弹性曲线
|
|
animation: field-enter 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) both;
|
|
}
|
|
|
|
// 中心大光晕: 覆盖整个 field, 营造氛围
|
|
.splash-screen__aura {
|
|
position: absolute;
|
|
width: 480rpx;
|
|
height: 480rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle,
|
|
rgba($accent-light, 0.35) 0%,
|
|
rgba($accent, 0.18) 25%,
|
|
rgba($accent, 0.05) 50%,
|
|
rgba($accent, 0) 75%);
|
|
box-shadow: 0 0 200rpx rgba($accent, 0.15);
|
|
animation: aura-breathe 3.6s ease-in-out infinite;
|
|
}
|
|
|
|
// 中心星核
|
|
.splash-screen__core {
|
|
position: relative;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
animation: core-pulse 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
// 星核外层光晕: 跟随呼吸
|
|
.splash-screen__core-halo {
|
|
position: absolute;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle,
|
|
rgba($accent, 0.5) 0%,
|
|
rgba($accent, 0) 60%);
|
|
animation: halo-expand 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
// 星核本体: 渐变球体
|
|
.splash-screen__core-body {
|
|
position: relative;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 30%,
|
|
#EEF2FF 0%,
|
|
$accent-light 35%,
|
|
$accent 70%,
|
|
$accent-deep 100%);
|
|
box-shadow:
|
|
0 0 24rpx rgba($accent, 0.6),
|
|
0 0 48rpx rgba($accent, 0.3),
|
|
inset -2rpx -3rpx 6rpx rgba($accent-deep, 0.5),
|
|
inset 2rpx 2rpx 4rpx rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
// 轨道
|
|
.splash-screen__orbit {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
transform-origin: center;
|
|
|
|
&--1 {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-top: -80rpx;
|
|
margin-left: -80rpx;
|
|
border: 1rpx solid rgba($accent, 0.18);
|
|
animation: orbit-rotate 6s linear infinite;
|
|
}
|
|
|
|
&--2 {
|
|
width: 260rpx;
|
|
height: 260rpx;
|
|
margin-top: -130rpx;
|
|
margin-left: -130rpx;
|
|
border: 1rpx solid rgba($accent, 0.1);
|
|
animation: orbit-rotate 10s linear infinite reverse;
|
|
}
|
|
|
|
&--3 {
|
|
width: 360rpx;
|
|
height: 360rpx;
|
|
margin-top: -180rpx;
|
|
margin-left: -180rpx;
|
|
border: 1rpx solid rgba($accent, 0.06);
|
|
animation: orbit-rotate 16s linear infinite;
|
|
}
|
|
}
|
|
|
|
// 粒子: 沿轨道运动, 起始位置在轨道顶部
|
|
.splash-screen__particle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 30%,
|
|
#EEF2FF 0%,
|
|
$accent-light 40%,
|
|
$accent 100%);
|
|
|
|
&--1 {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
margin-top: -9rpx;
|
|
margin-left: -9rpx;
|
|
transform: translateY(-80rpx);
|
|
box-shadow:
|
|
0 0 24rpx rgba($accent, 0.7),
|
|
0 0 8rpx rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
&--2 {
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
margin-top: -7rpx;
|
|
margin-left: -7rpx;
|
|
transform: translateY(-130rpx);
|
|
box-shadow:
|
|
0 0 18rpx rgba($accent, 0.5),
|
|
0 0 4rpx rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
&--3 {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
margin-top: -5rpx;
|
|
margin-left: -5rpx;
|
|
transform: translateY(-180rpx);
|
|
box-shadow: 0 0 14rpx rgba($accent, 0.4);
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// 动画
|
|
// ============================================================
|
|
|
|
// 容器入场
|
|
@keyframes field-enter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.85);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
// 中心光晕呼吸
|
|
@keyframes aura-breathe {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 0.85;
|
|
}
|
|
50% {
|
|
transform: scale(1.08);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// 中心星核呼吸
|
|
@keyframes core-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
// 星核光晕扩散
|
|
@keyframes halo-expand {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: scale(1.5);
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
// 轨道旋转
|
|
@keyframes orbit-rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|