weixinxiaochengxu/pages/index/index.wxss

102 lines
1.6 KiB
Plaintext

/* ===== 启动动画页 ===== */
.splash {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #2c7a7b 0%, #1a5c5d 40%, #0f4a4b 100%);
}
.splash-content {
display: flex;
flex-direction: column;
align-items: center;
animation: fadeInUp 0.8s ease-out;
}
.splash-icon {
margin-bottom: 40rpx;
animation: pulse 1.2s ease-in-out infinite;
}
.splash-heart {
width: 120rpx;
height: 120rpx;
background: #fff;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.splash-heart::before {
content: "";
font-size: 60rpx;
color: #2c7a7b;
}
/* 心跳图标 - 十字医疗符号 */
.splash-heart {
background: rgba(255,255,255,0.95);
}
.splash-heart::after {
content: "+";
font-size: 72rpx;
font-weight: 300;
color: #2c7a7b;
line-height: 1;
}
.splash-title {
font-size: 44rpx;
font-weight: 700;
color: #fff;
margin-bottom: 16rpx;
letter-spacing: 4rpx;
}
.splash-subtitle {
font-size: 26rpx;
color: rgba(255,255,255,0.75);
letter-spacing: 2rpx;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* 底部医院名称 */
.splash-footer {
position: absolute;
bottom: 80rpx;
left: 0;
right: 0;
text-align: center;
animation: fadeInUp 0.8s ease-out 0.4s both;
}
.splash-hospital {
font-size: 30rpx;
color: rgba(255,255,255,0.7);
letter-spacing: 6rpx;
}