144 lines
3.6 KiB
CSS
Executable File
144 lines
3.6 KiB
CSS
Executable File
/* 背景样式文件 - 独立管理所有背景相关样式 */
|
|
|
|
/* 页面主背景 */
|
|
body {
|
|
background: linear-gradient(135deg, #f8fffe 0%, #f0f9f4 50%, #e8f5e8 100%);
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
|
|
/* 背景装饰元素 */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
radial-gradient(circle at 20% 80%, rgba(168, 230, 207, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(39, 174, 96, 0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 40%, rgba(46, 204, 113, 0.05) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 容器背景 */
|
|
.container {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 20px;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 8px 32px rgba(39, 174, 96, 0.1);
|
|
}
|
|
|
|
/* 头部背景 */
|
|
.header {
|
|
background: linear-gradient(135deg, rgba(168, 230, 207, 0.2) 0%, rgba(39, 174, 96, 0.1) 100%);
|
|
border-radius: 20px 20px 0 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(39, 174, 96, 0.05) 0%, transparent 70%);
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translate(-10px, -10px) rotate(180deg);
|
|
}
|
|
}
|
|
|
|
/* 热点项目背景 */
|
|
.hot-item {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(5px);
|
|
position: relative;
|
|
}
|
|
|
|
.hot-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: radial-gradient(circle, rgba(168, 230, 207, 0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
transform: translate(30px, -30px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 前三名特殊背景效果 */
|
|
.hot-item:nth-child(1) {
|
|
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
|
}
|
|
|
|
.hot-item:nth-child(2) {
|
|
background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
|
}
|
|
|
|
.hot-item:nth-child(3) {
|
|
background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
|
}
|
|
|
|
/* 底部背景 */
|
|
.footer {
|
|
background: linear-gradient(135deg, rgba(168, 230, 207, 0.1) 0%, rgba(39, 174, 96, 0.05) 100%);
|
|
border-radius: 0 0 20px 20px;
|
|
}
|
|
|
|
/* 加载状态背景 */
|
|
.loading {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
/* 错误信息背景 */
|
|
.error-message {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid rgba(231, 76, 60, 0.2);
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
/* 响应式背景调整 */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.header {
|
|
border-radius: 16px 16px 0 0;
|
|
}
|
|
|
|
.footer {
|
|
border-radius: 0 0 16px 16px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1025px) {
|
|
body::before {
|
|
background-image:
|
|
radial-gradient(circle at 15% 85%, rgba(168, 230, 207, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 85% 15%, rgba(39, 174, 96, 0.12) 0%, transparent 50%),
|
|
radial-gradient(circle at 50% 50%, rgba(46, 204, 113, 0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 25% 25%, rgba(168, 230, 207, 0.06) 0%, transparent 50%);
|
|
}
|
|
} |