<template>
|
<div class="splash-container">
|
<div class="title-container">
|
<span class="title-large">科技</span>
|
<span class="title-small">便捷生活</span>
|
</div>
|
<span class="bottom-text">芯导云（管理信息系统）</span>
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted } from 'vue'
|
// #ifdef H5
|
import { useRouter } from 'vue-router'
|
const router = useRouter()
|
// #endif
|
onMounted(() => {
|
setTimeout(() => {
|
// #ifdef H5
|
router.replace({ path: '/pages/login' })
|
// #endif
|
// #ifndef H5
|
uni.reLaunch({ url: '/pages/login' })
|
// #endif
|
}, 3500)
|
})
|
</script>
|
|
<style scoped>
|
.splash-container {
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
background: linear-gradient(135deg, rgba(0,117,255,0.3) 0%, #FFFFFF 60%);
|
overflow: hidden;
|
position: relative;
|
}
|
|
.title-container {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
animation: fadeIn 1.5s ease-in-out;
|
}
|
|
.title-large {
|
font-weight: 500;
|
font-size: 60px;
|
color: #000000;
|
display: block;
|
animation: slideUp 1s ease-out 0.2s both;
|
}
|
|
.title-small {
|
font-weight: 400;
|
font-size: 40px;
|
color: #333333;
|
display: block;
|
margin-left: 15px;
|
animation: slideUp 1s ease-out 0.5s both;
|
}
|
|
/* 动画效果 */
|
@keyframes fadeIn {
|
from {
|
opacity: 0;
|
}
|
to {
|
opacity: 1;
|
}
|
}
|
|
@keyframes slideUp {
|
from {
|
opacity: 0;
|
transform: translateY(30px);
|
}
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
/* 背景装饰效果 */
|
.splash-container::before {
|
content: '';
|
position: absolute;
|
top: -50%;
|
right: -50%;
|
width: 200%;
|
height: 200%;
|
background: radial-gradient(circle, rgba(0,117,255,0.1) 0%, transparent 70%);
|
animation: float 8s ease-in-out infinite;
|
}
|
|
@keyframes float {
|
0%, 100% {
|
transform: translate(0, 0) rotate(0deg);
|
}
|
50% {
|
transform: translate(-10%, -10%) rotate(5deg);
|
}
|
}
|
|
/* 底部文字样式 */
|
.bottom-text {
|
position: absolute;
|
bottom: 80px;
|
font-size: 24px;
|
color: #666666;
|
opacity: 0;
|
animation: fadeInUp 1s ease-out 1s both;
|
}
|
|
@keyframes fadeInUp {
|
from {
|
opacity: 0;
|
transform: translateY(20px);
|
}
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
</style>
|
