<template>
|
<!-- 医疗风全屏加载 -->
|
<div v-if="isLoading" class="loading-screen">
|
<div class="loading-content">
|
<!-- 自定义Logo容器 -->
|
<div class="logo-container">
|
<img :src="logo" alt="Logo" class="custom-logo">
|
<!-- 可选：添加脉冲光环 -->
|
<div class="pulse-ring primary"></div>
|
<div class="pulse-ring secondary"></div>
|
</div>
|
|
<!-- 标题文字 -->
|
<p class="loading-text">守护健康 · 加载中</p>
|
</div>
|
</div>
|
|
<!-- 主内容 -->
|
<div v-else class="main-content">
|
<h1>欢迎使用智慧医疗系统</h1>
|
<p>为您提供安全、精准、高效的健康服务</p>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import logo from 'assets/logo.png'
|
|
const isLoading = ref(true)
|
|
// 模拟加载过程
|
const simulateLoading = () => {
|
setTimeout(() => {
|
isLoading.value = false
|
}, 2800) // 稍长一点，体现“专业系统启动”感
|
}
|
|
onMounted(() => {
|
simulateLoading()
|
})
|
</script>
|
|
<style scoped>
|
/* 医疗风背景 */
|
.loading-screen {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
background: linear-gradient(140deg, #e6f7ff, #f0fcff, #e0f9f1);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
font-family: "Helvetica Neue", Arial, sans-serif;
|
}
|
|
.loading-content {
|
text-align: center;
|
}
|
|
/* Logo容器 */
|
.logo-container {
|
position: relative;
|
display: inline-block;
|
}
|
|
/* 自定义Logo样式 */
|
.custom-logo {
|
width: 50px; /* 根据实际Logo大小调整 */
|
animation: fadeIn 1s ease-in-out;
|
}
|
|
/* 脉冲光环（衬托科技感） */
|
.pulse-ring {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
width: 80px;
|
height: 80px;
|
margin-left: -40px;
|
margin-top: -40px;
|
border-radius: 50%;
|
border: 1px solid #00a0e9;
|
opacity: 0;
|
animation: pulse 2s ease-out infinite;
|
}
|
|
.pulse-ring.primary {
|
animation-delay: 0s;
|
}
|
|
.pulse-ring.secondary {
|
animation-delay: 0.6s;
|
border-color: #06c;
|
}
|
|
@keyframes pulse {
|
0% {
|
transform: scale(0.8);
|
opacity: 0.6;
|
}
|
|
50% {
|
opacity: 0.2;
|
}
|
|
100% {
|
transform: scale(1.4);
|
opacity: 0;
|
}
|
}
|
|
/* 加载文字 */
|
.loading-text {
|
color: #06c;
|
font-size: 15px;
|
font-weight: 500;
|
letter-spacing: 1px;
|
line-height: 1.5;
|
opacity: 0.9;
|
animation: fadeInUp 0.8s ease-out;
|
text-shadow: 0 1px 3px rgba(0, 102, 204, 0.1);
|
margin-top: 40px;
|
}
|
|
@keyframes fadeInUp {
|
from {
|
opacity: 0;
|
transform: translateY(30px);
|
}
|
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
/* 主内容区 */
|
.main-content {
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding: 20px;
|
text-align: center;
|
background-color: #f8f9fa;
|
color: #333;
|
font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
}
|
|
.main-content h1 {
|
font-size: 22px;
|
color: #06c;
|
margin-bottom: 12px;
|
font-weight: 600;
|
}
|
|
.main-content p {
|
color: #666;
|
font-size: 15px;
|
line-height: 1.6;
|
max-width: 300px;
|
}
|
</style>
|
