homepage
This commit is contained in:
superlishunqin
parent
89a98739b1
commit
833dc8bd42
@ -150,30 +150,136 @@ main {
|
||||
}
|
||||
.kid-auth-card a:hover { color: var(--kid-accent); }
|
||||
|
||||
/* === Dashboard容器 - 蓝绿活力版 === */
|
||||
/* === Dashboard容器 - 天空彩虹版 === */
|
||||
.dashboard-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
background: linear-gradient(180deg,
|
||||
#87CEEB 0%, /* 天蓝色 */
|
||||
#98D8F4 30%, /* 浅天蓝 */
|
||||
#B6E5F7 60%, /* 更浅的蓝 */
|
||||
#E0F6FF 100% /* 几乎白色的浅蓝 */
|
||||
);
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 彩虹背景装饰 - 增强版 */
|
||||
.rainbow-bg {
|
||||
/* 移除原有的before装饰 */
|
||||
.dashboard-container::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 紫蓝色 */
|
||||
#764ba2 25%, /* 深紫色 */
|
||||
#f093fb 50%, /* 粉紫色 */
|
||||
#f5576c 75%, /* 粉红色 */
|
||||
#4facfe 100% /* 天蓝色 */
|
||||
);
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 添加动态背景装饰层 */
|
||||
.dashboard-container::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 15% 25%, rgba(0, 188, 212, 0.15) 12%, transparent 25%),
|
||||
radial-gradient(circle at 85% 15%, rgba(76, 175, 80, 0.15) 18%, transparent 30%),
|
||||
radial-gradient(circle at 45% 75%, rgba(33, 150, 243, 0.12) 22%, transparent 35%),
|
||||
radial-gradient(circle at 90% 85%, rgba(0, 150, 136, 0.18) 28%, transparent 40%),
|
||||
radial-gradient(circle at 20% 80%, rgba(102, 187, 106, 0.15) 15%, transparent 28%);
|
||||
z-index: -1;
|
||||
animation: backgroundShift 25s ease-in-out infinite, backgroundPulse 8s ease-in-out infinite;
|
||||
radial-gradient(circle at 20% 20%, rgba(255, 182, 193, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(135, 206, 250, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 20% 80%, rgba(255, 218, 185, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(221, 160, 221, 0.3) 0%, transparent 50%);
|
||||
z-index: 0;
|
||||
animation: backgroundShift 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes backgroundShift {
|
||||
0%, 100% {
|
||||
transform: translateX(0px) translateY(0px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(20px) translateY(-20px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 天空彩虹装饰 - 大彩虹弧形 */
|
||||
.rainbow-bg {
|
||||
position: fixed;
|
||||
bottom: -200px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120vw;
|
||||
height: 400px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rainbow-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: conic-gradient(from 0deg at 50% 100%,
|
||||
transparent 0deg,
|
||||
transparent 30deg,
|
||||
#FF0000 45deg, /* 红色 */
|
||||
#FF7F00 60deg, /* 橙色 */
|
||||
#FFFF00 75deg, /* 黄色 */
|
||||
#00FF00 90deg, /* 绿色 */
|
||||
#0000FF 105deg, /* 蓝色 */
|
||||
#4B0082 120deg, /* 靛色 */
|
||||
#9400D3 135deg, /* 紫色 */
|
||||
transparent 150deg,
|
||||
transparent 360deg
|
||||
);
|
||||
border-radius: 50% 50% 0 0;
|
||||
opacity: 0.8;
|
||||
animation: rainbowShimmer 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 彩虹的内侧透明区域 */
|
||||
.rainbow-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 60px);
|
||||
height: calc(100% - 30px);
|
||||
background: linear-gradient(180deg,
|
||||
#87CEEB 0%,
|
||||
#98D8F4 30%,
|
||||
#B6E5F7 60%,
|
||||
#E0F6FF 100%
|
||||
);
|
||||
border-radius: 50% 50% 0 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 添加浮动装饰元素 */
|
||||
.dashboard-container::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 15%, transparent 20px, rgba(255,255,255,0.1) 21px, rgba(255,255,255,0.1) 25px, transparent 26px),
|
||||
radial-gradient(circle at 85% 25%, transparent 15px, rgba(255,255,255,0.08) 16px, rgba(255,255,255,0.08) 20px, transparent 21px),
|
||||
radial-gradient(circle at 25% 85%, transparent 18px, rgba(255,255,255,0.06) 19px, rgba(255,255,255,0.06) 23px, transparent 24px),
|
||||
radial-gradient(circle at 75% 75%, transparent 12px, rgba(255,255,255,0.05) 13px, rgba(255,255,255,0.05) 17px, transparent 18px);
|
||||
background-size: 200px 200px, 150px 150px, 180px 180px, 120px 120px;
|
||||
background-position: 0 0, 100px 50px, 50px 150px, 200px 100px;
|
||||
z-index: 2;
|
||||
opacity: 0.6;
|
||||
animation: decorationFloat 30s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes backgroundShift {
|
||||
@ -4126,3 +4232,514 @@ a.btn:hover {
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Dashboard专用浮动装饰元素 */
|
||||
.dashboard-floating-decorations {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.floating-emoji {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
animation: floatingEmoji 12s ease-in-out infinite;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.floating-emoji:nth-child(1) {
|
||||
top: 10%; left: 10%;
|
||||
animation-delay: 0s;
|
||||
content: '🌟';
|
||||
}
|
||||
.floating-emoji:nth-child(2) {
|
||||
top: 20%; right: 15%;
|
||||
animation-delay: 2s;
|
||||
content: '🎈';
|
||||
}
|
||||
.floating-emoji:nth-child(3) {
|
||||
bottom: 30%; left: 20%;
|
||||
animation-delay: 4s;
|
||||
content: '🎨';
|
||||
}
|
||||
.floating-emoji:nth-child(4) {
|
||||
bottom: 20%; right: 10%;
|
||||
animation-delay: 6s;
|
||||
content: '✨';
|
||||
}
|
||||
.floating-emoji:nth-child(5) {
|
||||
top: 60%; left: 5%;
|
||||
animation-delay: 8s;
|
||||
content: '🌈';
|
||||
}
|
||||
.floating-emoji:nth-child(6) {
|
||||
top: 40%; right: 25%;
|
||||
animation-delay: 10s;
|
||||
content: '🎭';
|
||||
}
|
||||
|
||||
.floating-emoji::before {
|
||||
content: attr(data-emoji);
|
||||
}
|
||||
|
||||
@keyframes floatingEmoji {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg) scale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-30px) rotate(10deg) scale(1.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) rotate(-5deg) scale(0.9);
|
||||
opacity: 0.6;
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-40px) rotate(15deg) scale(1.1);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbowFloat {
|
||||
0%, 100% {
|
||||
transform: translateX(0px) translateY(0px) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
33% {
|
||||
transform: translateX(20px) translateY(-10px) scale(1.02);
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
transform: translateX(-15px) translateY(15px) scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbowPulse {
|
||||
0%, 100% {
|
||||
filter: brightness(1) hue-rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.1) hue-rotate(30deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes decorationFloat {
|
||||
0% {
|
||||
transform: translateX(0px) translateY(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-200px) translateY(-200px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dashboard内容层级调整 */
|
||||
.dashboard-container .container {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 增强卡片的对比度和可读性 */
|
||||
.welcome-card-kid,
|
||||
.scenario-card-kid,
|
||||
.voice-clone-card,
|
||||
.quick-action-card-kid,
|
||||
.achievement-card,
|
||||
.voice-tips-card {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 特殊渐变卡片保持原有的渐变背景 */
|
||||
.welcome-card-kid {
|
||||
background: linear-gradient(135deg, var(--rainbow-pink), var(--rainbow-purple)) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.voice-clone-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 增强文字对比度 */
|
||||
.scenario-card-kid .scenario-title,
|
||||
.quick-action-card-kid .action-title,
|
||||
.achievement-card .achievement-number {
|
||||
color: #333 !important;
|
||||
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* 添加更多几何装饰 */
|
||||
.dashboard-container .geometric-shapes {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.geometric-shapes::before,
|
||||
.geometric-shapes::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.geometric-shapes::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
||||
top: -150px;
|
||||
right: -150px;
|
||||
animation: geometricRotate 20s linear infinite;
|
||||
}
|
||||
|
||||
.geometric-shapes::after {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(45deg, #ffd93d, #ff6b6b);
|
||||
bottom: -100px;
|
||||
left: -100px;
|
||||
animation: geometricRotate 15s linear infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes geometricRotate {
|
||||
0% { transform: rotate(0deg) scale(1); }
|
||||
50% { transform: rotate(180deg) scale(1.1); }
|
||||
100% { transform: rotate(360deg) scale(1); }
|
||||
}
|
||||
|
||||
/* 响应式优化 */
|
||||
@media (max-width: 768px) {
|
||||
.floating-emoji {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.geometric-shapes::before {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
.geometric-shapes::after {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
bottom: -75px;
|
||||
left: -75px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 天空装饰元素 */
|
||||
.sky-sun {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: radial-gradient(circle, #FFD700 30%, #FFA500 70%);
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
animation: sunRotate 20s linear infinite, sunGlow 4s ease-in-out infinite;
|
||||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
|
||||
}
|
||||
|
||||
.sky-sun::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
right: -15px;
|
||||
bottom: -15px;
|
||||
background:
|
||||
linear-gradient(0deg, transparent 45%, #FFD700 47%, #FFD700 53%, transparent 55%),
|
||||
linear-gradient(45deg, transparent 45%, #FFD700 47%, #FFD700 53%, transparent 55%),
|
||||
linear-gradient(90deg, transparent 45%, #FFD700 47%, #FFD700 53%, transparent 55%),
|
||||
linear-gradient(135deg, transparent 45%, #FFD700 47%, #FFD700 53%, transparent 55%);
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
animation: sunRaysRotate 15s linear infinite reverse;
|
||||
}
|
||||
|
||||
.sky-clouds {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cloud {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50px;
|
||||
opacity: 0.6;
|
||||
animation: cloudFloat 25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cloud::before,
|
||||
.cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.cloud1 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
top: 120px;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.cloud1::before {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.cloud1::after {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
top: -15px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.cloud2 {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
top: 200px;
|
||||
left: 60%;
|
||||
animation-delay: -8s;
|
||||
}
|
||||
|
||||
.cloud2::before {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: -20px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.cloud2::after {
|
||||
width: 50px;
|
||||
height: 35px;
|
||||
top: -12px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.cloud3 {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
top: 160px;
|
||||
left: 80%;
|
||||
animation-delay: -16s;
|
||||
}
|
||||
|
||||
.cloud3::before {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
top: -30px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.cloud3::after {
|
||||
width: 70px;
|
||||
height: 45px;
|
||||
top: -20px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
/* 小装饰星星 */
|
||||
.sky-stars {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #FFD700;
|
||||
border-radius: 50%;
|
||||
animation: starTwinkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.star1 { top: 100px; left: 20%; animation-delay: 0s; }
|
||||
.star2 { top: 140px; left: 45%; animation-delay: 1s; }
|
||||
.star3 { top: 180px; left: 75%; animation-delay: 2s; }
|
||||
.star4 { top: 120px; left: 85%; animation-delay: 0.5s; }
|
||||
.star5 { top: 160px; left: 15%; animation-delay: 1.5s; }
|
||||
|
||||
/* 动画定义 */
|
||||
@keyframes sunRotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes sunGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 50px rgba(255, 215, 0, 0.9);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sunRaysRotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes cloudFloat {
|
||||
0%, 100% {
|
||||
transform: translateX(0px) translateY(0px);
|
||||
opacity: 0.6;
|
||||
}
|
||||
25% {
|
||||
transform: translateX(30px) translateY(-10px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-20px) translateY(-5px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
75% {
|
||||
transform: translateX(40px) translateY(-15px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbowShimmer {
|
||||
0%, 100% {
|
||||
opacity: 0.8;
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.9;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes starTwinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dashboard内容调整 */
|
||||
.dashboard-container .container {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 卡片样式调整以适应新背景 */
|
||||
.welcome-card-kid,
|
||||
.scenario-card-kid,
|
||||
.voice-clone-card,
|
||||
.quick-action-card-kid,
|
||||
.achievement-card,
|
||||
.voice-tips-card {
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(255, 255, 255, 0.92) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* 保持特殊渐变卡片 */
|
||||
.welcome-card-kid {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 107, 107, 0.95),
|
||||
rgba(78, 205, 196, 0.95)
|
||||
) !important;
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.voice-clone-card {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(102, 126, 234, 0.95),
|
||||
rgba(118, 75, 162, 0.95)
|
||||
) !important;
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 增强场景卡片的童趣感 */
|
||||
.scenario-card-kid {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.scenario-card-kid:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.sky-sun {
|
||||
top: 60px;
|
||||
right: 20px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.sky-sun::before {
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
.cloud1, .cloud2, .cloud3 {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.rainbow-bg {
|
||||
width: 140vw;
|
||||
bottom: -150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.sky-sun {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 40px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.rainbow-bg {
|
||||
width: 160vw;
|
||||
bottom: -120px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,6 +7,25 @@
|
||||
<!-- 彩虹背景装饰 -->
|
||||
<div class="rainbow-bg"></div>
|
||||
|
||||
<!-- 天空太阳 -->
|
||||
<div class="sky-sun"></div>
|
||||
|
||||
<!-- 天空云朵 -->
|
||||
<div class="sky-clouds">
|
||||
<div class="cloud cloud1"></div>
|
||||
<div class="cloud cloud2"></div>
|
||||
<div class="cloud cloud3"></div>
|
||||
</div>
|
||||
|
||||
<!-- 天空星星 -->
|
||||
<div class="sky-stars">
|
||||
<div class="star star1"></div>
|
||||
<div class="star star2"></div>
|
||||
<div class="star star3"></div>
|
||||
<div class="star star4"></div>
|
||||
<div class="star star5"></div>
|
||||
</div>
|
||||
|
||||
<div class="container py-4">
|
||||
<!-- 欢迎区域 - 更活泼的设计 -->
|
||||
<div class="row mb-4">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user