/* 管理员个人资料页面样式 */ .profile-container { padding: 20px 0; } .profile-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); margin-bottom: 20px; } .profile-card .card-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px 12px 0 0 !important; padding: 15px 20px; } .profile-card .card-header h5 { margin: 0; font-weight: 600; } .profile-card .card-header i { margin-right: 8px; } .profile-card .card-body { padding: 25px; } .form-label { font-weight: 600; color: #495057; margin-bottom: 8px; } .form-control { border-radius: 8px; border: 1px solid #e0e6ed; padding: 12px 15px; transition: all 0.3s ease; } .form-control:focus { border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); } .form-control[readonly] { background-color: #f8f9fa; color: #6c757d; } .form-text { font-size: 12px; color: #6c757d; margin-top: 5px; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px; padding: 12px 24px; font-weight: 600; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .btn-warning { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); border: none; border-radius: 8px; padding: 12px 24px; font-weight: 600; color: #8b4513; transition: all 0.3s ease; } .btn-warning:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(252, 182, 159, 0.4); color: #8b4513; } .btn i { margin-right: 6px; } /* 账号信息卡片 */ .info-card { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border: none; border-radius: 12px; margin-bottom: 20px; } .info-card .card-header { background: rgba(255, 255, 255, 0.2); border: none; border-radius: 12px 12px 0 0 !important; } .info-card .card-body { background: rgba(255, 255, 255, 0.1); border-radius: 0 0 12px 12px; } .info-item { margin-bottom: 15px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .info-item:last-child { border-bottom: none; margin-bottom: 0; } .info-item strong { color: #2c3e50; font-weight: 600; } .badge { font-size: 12px; padding: 6px 12px; border-radius: 20px; font-weight: 500; } .badge.bg-success { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important; color: #2c3e50; } .badge.bg-danger { background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%) !important; color: white; } /* 密码修改卡片 */ .password-card { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); border: none; border-radius: 12px; } .password-card .card-header { background: rgba(255, 255, 255, 0.2); border: none; border-radius: 12px 12px 0 0 !important; } .password-card .card-body { background: rgba(255, 255, 255, 0.1); border-radius: 0 0 12px 12px; } .password-card .form-control { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.3); } .password-card .form-control:focus { background: white; border-color: #fcb69f; box-shadow: 0 0 0 0.2rem rgba(252, 182, 159, 0.25); } /* 响应式设计 */ @media (max-width: 768px) { .profile-container { padding: 10px 0; } .profile-card .card-body { padding: 20px 15px; } .row .col-md-6 { margin-bottom: 15px; } } /* 动画效果 */ .profile-card { animation: fadeInUp 0.6s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* 表单验证样式 */ .form-control.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .form-control.is-valid { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } .invalid-feedback { display: block; color: #dc3545; font-size: 12px; margin-top: 5px; } .valid-feedback { display: block; color: #28a745; font-size: 12px; margin-top: 5px; }