body { background-color: #f8f9fa; } .container { max-width: 1000px; } .card { height: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .card-body { display: flex; flex-direction: column; } .form-label { font-weight: bold; color: #495057; } .form-select, .form-control { border-radius: 5px; } .light-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 20px; flex-grow: 1; } .light-item { text-align: center; margin: 10px; } .light { width: 80px; height: 80px; border-radius: 50%; display: inline-block; transition: all 0.3s ease; border: 2px solid #ccc; /* 统一边框颜色 */ } .light.off { background-color: #e0e0e0; /* 淡灰色 */ box-shadow: none; } .light.common.on { background-color: #007bff; /* 蓝色 */ box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.5); } .light.alarm.on { background-color: #007bff; /* 蓝色 */ box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.5); } .light.emergency_stop.on { background-color: #007bff; /* 蓝色 */ box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.5); } .light.up.on { background-color: #007bff; /* 蓝色 */ box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.5); } .light.down.on { background-color: #007bff; /* 蓝色 */ box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.5); } /* Flatpickr 样式覆盖 */ .flatpickr-input { background-color: #fff !important; } .flatpickr-day.selected { background: #007bff; border-color: #007bff; } .flatpickr-day.selected:hover { background: #0056b3; border-color: #0056b3; } /* 测试结果表格样式 */ #resultTable { border-collapse: separate; border-spacing: 0 12px; } #resultTable thead th { border: none; background-color: #f8f9fa; color: #495057; font-weight: bold; padding: 12px 15px; } #resultTable tbody tr { box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease; } #resultTable tbody tr:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } #resultTable td { vertical-align: middle; border: none; background-color: #ffffff; padding: 15px; } #resultTable .form-control, #resultTable .form-select { border: 1px solid #ced4da; } /* 开关样式 */ .form-check-input { width: 3em !important; height: 1.5em !important; margin-top: 0.25em; vertical-align: top; background-color: rgba(0, 0, 0, 0.25); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.85%29'/%3e%3c/svg%3e"); background-position: left center; border-radius: 2em; transition: background-position .15s ease-in-out; } .form-check-input:checked { background-color: #198754; background-position: right center; } .form-check-label { padding-left: 10px; font-weight: bold; } .form-check-label .pass, .form-check-label .fail { transition: all 0.3s ease; } .form-check-label .pass { color: #198754; } .form-check-label .fail { color: #dc3545; display: none; } .pass-row { background-color: rgba(25, 135, 84, 0.1) !important; } .fail-row { background-color: rgba(220, 53, 69, 0.1) !important; } /* 按钮样式 */ #resultTable .btn-primary { transition: all 0.3s ease; } #resultTable .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,123,255,0.3); } .btn-success { background-color: #28a745; border-color: #28a745; transition: all 0.3s ease; } .btn-success:hover { background-color: #218838; border-color: #1e7e34; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3); } .serial-number:disabled { background-color: #e9ecef; opacity: 1; cursor: not-allowed; } .add-row-btn { transition: all 0.3s ease; } .add-row-btn:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* 将 #lightCheckList 替换为 #statusCheckList */ #statusCheckList { padding: 0; margin-bottom: 0; } #statusCheckList .list-group-item { padding: 0.75rem 1rem; border: none; background-color: transparent; font-size: 0.9rem; } #statusCheckList .badge { transition: all 0.3s ease; } #statusCheckList .badge.bg-success { background-color: #28a745 !important; } .card-title { color: #495057; font-weight: bold; } .col-md-8 { width: 80%; } .col-md-4 { width: 20%; } /* 响应式调整 */ @media (max-width: 768px) { .col-md-8, .col-md-4 { margin-bottom: 1rem; } } /* 添加或修改以下样式 */ .form-check-input:disabled { opacity: 1; } .form-check-label .pending { color: #6c757d; } .form-check-label .pass { color: #28a745; } .form-check-label .fail { color: #dc3545; } .pending-row { background-color: rgba(108, 117, 125, 0.1) !important; } .pass-row { background-color: rgba(40, 167, 69, 0.1) !important; } .fail-row { background-color: rgba(220, 53, 69, 0.1) !important; }