/* 重置和基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #000000; color: white; min-height: 100vh; overflow-x: hidden; } /* 头部样式 */ .header { text-align: center; padding: 20px; margin-bottom: 20px; } .site-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(45deg, #fff, #f0f0f0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tagline { font-size: 14px; font-weight: 400; } /* 主要内容区域 */ .main-content { padding: 0 20px; display: flex; flex-direction: column; gap: 16px; max-width: 400px; margin: 0 auto; } /* 卡片基础样式 */ .card { border-radius: 16px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; margin-bottom: 16px; position: relative; } .status-dot { margin: 58px 0 0 10px; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 50%; z-index: 10; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .status-dot.red { background: #ff4757; box-shadow: 0 0 10px rgba(255, 71, 87, 0.6); } .status-dot.green { background: #2ed573; box-shadow: 0 0 10px rgba(46, 213, 115, 0.6); } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } .card-link { text-decoration: none; color: inherit; display: block; } .card-img { width: 100%; height: auto; display: block; object-fit: contain; object-position: center; max-width: 100%; max-height: none; } /* 响应式设计 */ @media (max-width: 480px) { .main-content { padding: 0 16px; } .site-title { font-size: 24px; } } /* 滚动条样式 */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }