速度调节

agv_app/style.css

@@ -385,6 +385,61 @@ a:hover { text-decoration: underline; }
   color: #4fc3f7;
 }
 
+/* 运行页速度控制面板 */
+.speed-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.speed-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.speed-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  color: #b0c4de;
+}
+.speed-val {
+  font-weight: bold;
+  font-size: 15px;
+  color: #4fc3f7;
+  min-width: 80px;
+  text-align: right;
+}
+.speed-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  background: #1a2d3d;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+}
+.speed-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #4fc3f7;
+  cursor: pointer;
+  border: 2px solid #0f1923;
+  box-shadow: 0 0 6px rgba(79, 195, 247, 0.4);
+}
+.speed-slider::-moz-range-thumb {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #4fc3f7;
+  cursor: pointer;
+  border: 2px solid #0f1923;
+}
+
 /* 双摄像头预览布局 */
 .camera-row {
   display: grid;
@@ -912,3 +967,79 @@ a:hover { text-decoration: underline; }
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
 }
+
+/* ========== 运行页双摄像头 ========== */
+.camera-dual {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-top: 12px;
+}
+
+/* ========== 任务步骤控制开关 ========== */
+.toggle-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.toggle-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  background: #0a0a0a;
+  border: 1px solid #1a1a1a;
+  border-radius: 8px;
+  transition: border-color 0.2s;
+}
+.toggle-item:hover {
+  border-color: #333;
+}
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: #333;
+  border-radius: 24px;
+  transition: 0.3s;
+}
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: #888;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+.toggle-switch input:checked + .toggle-slider {
+  background-color: #2e7d32;
+}
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+  background-color: #4caf50;
+}
+.toggle-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #e0e0e0;
+  min-width: 140px;
+}
+.toggle-hint {
+  font-size: 12px;
+  color: #666;
+}