.container { display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #f8f8f8; } .section1 { width: 90%; max-width: 600px; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px; display: flex; justify-content: space-around; } .item { text-align: center; } .title { font-size: 14px; color: #333; margin-bottom: 5px; } .count { font-size: 18px; font-weight: bold; color: #007bff; } .section2 { width: 90%; max-width: 600px; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .subtitle { font-size: 16px; font-weight: bold; color: #333; text-align: center; } .description { margin-top: 15px; font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 8px; } .warning { color: #d9534f; margin-top: 5px; } .countdown { font-size: 14px; color: #999; text-align: center; margin-top: 15px; } .button-container { width: 90%; max-width: 600px; display: flex; justify-content: space-around; } .invite-path { margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 5px; display: flex; align-items: center; } .path-title { font-size: 14px; color: #333; margin-right: 10px; } .path-text { font-size: 14px; color: #007bff; word-break: break-all; /* 长路径自动换行 */ } .reward-button { width: 48%; margin: 10px; border-radius: 25px; font-size: 16px; font-weight: 500; color: white; /* 字体颜色改为白色 */ border: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影更明显 */ transition: transform 0.2s ease, box-shadow 0.2s ease; text-align: center; } .reward-button:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .reward-button1 { background: linear-gradient(135deg, #4CAF50, #2E7D32); /* 深绿色渐变 */ } .reward-button2 { background: linear-gradient(135deg, #2196F3, #1976D2); /* 深蓝色渐变 */ }