/* 页面基础布局 */ .pay-container { max-width: 1200px; margin: 0 auto; padding: 80px 20px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; } /* 左侧赛事列表 */ .event-list { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(22,93,255,0.08); padding: 24px; height: fit-content; } .event-list h2 { font-size: 20px; color: #000; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #165DFF; } .event-item { padding: 12px 16px; border-radius: 6px; cursor: pointer; margin-bottom: 8px; transition: all 0.3s ease; color: #4E5969; font-size: 16px; } .event-item:hover { background-color: #F5F7FA; color: #165DFF; } .event-item.active { background-color: #165DFF; color: #fff; } /* 右侧表单区域 */ .form-area { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(22,93,255,0.08); padding: 30px; } .form-title { font-size: 22px; color: #000; margin-bottom: 24px; text-align: center; } /* .form-content { */ /*display: none; 默认隐藏所有表单 */ /* } */ /* .form-content.active { */ /*display: block; 激活的表单显示 */ /* } */ /* 表单通用样式 */ .form-item { margin-bottom: 20px; } .form-item label { display: block; margin-bottom: 8px; font-size: 14px; color: #333; font-weight: 500; } .form-item input, .form-item select, .form-item textarea { width: 100%; padding: 12px 16px; border: 1px solid #E5E6EB; border-radius: 6px; font-size: 14px; color: #4E5969; box-sizing: border-box; } .form-item textarea { min-height: 100px; resize: vertical; } .submit-btn { width: 100%; padding: 12px; background-color: #165DFF; color: #fff; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .submit-btn:hover { background-color: #0E48D9; } /* 夜间模式适配(和你现有网站一致) */ body.night-mode .event-list, body.night-mode .form-area { background-color: #2C3036; box-shadow: 0 2px 12px rgba(0,0,0,0.3); } body.night-mode .event-list h2, body.night-mode .form-title { color: #fff; } body.night-mode .event-item { color: #E5E6EB; } body.night-mode .event-item:hover { background-color: #373B41; color: #fff; } body.night-mode .form-item label { color: #C0C4CC; } body.night-mode .form-item input, body.night-mode .form-item select, body.night-mode .form-item textarea { background-color: #373B41; border-color: #4E5969; color: #E5E6EB; } /* 移动端适配 */ @media (max-width: 768px) { .pay-container { grid-template-columns: 1fr; gap: 20px; padding: 40px 20px; } .event-list { margin-bottom: 20px; } }