Explorar o código

路口详情-当前阶段: 阶段时长 input 改纯文本 + 清 canEditStage / stage-input 死代码; 修改路口详情的相位图的高度

画安 hai 1 mes
pai
achega
a0b80d609a
Modificáronse 1 ficheiros con 8 adicións e 76 borrados
  1. 8 76
      src/components/ui/CrossingDetailPanel.vue

+ 8 - 76
src/components/ui/CrossingDetailPanel.vue

@@ -98,12 +98,7 @@
                                         </div>
 
                                         <div class="bottom-controls">
-                                            <div class="input-unit-wrapper">
-                                                <input type="number" v-model.number="item.time" class="stage-input"
-                                                    :disabled="!canEditStage"
-                                                    :title="canEditStage ? '修改阶段时间' : '当前控制方式不可修改'" />
-                                                <span class="unit">s</span>
-                                            </div>
+                                            <span class="time-text">{{ item.time }}s</span>
                                             <span class="percent">{{ stagePercent(item.time) }}</span>
                                         </div>
                                     </div>
@@ -260,10 +255,6 @@ export default {
         isSchemeDisabled() {
             return ['yellow_flash', 'lights_off', 'all_red'].includes(this.currentMethod);
         },
-        // 定周期、中心计划、感应控制、临时方案可编辑当前阶段
-        canEditStage() {
-            return ['fixed', 'system', 'sensor', 'temp'].includes(this.currentMethod);
-        },
         // 时长选项:30, 60, 90 ... 300
         durationOptions() {
             const list = [];
@@ -803,7 +794,7 @@ export default {
 .signal-timing-wrap {
     flex: 0 0 auto;
     min-height: 0;
-    height: clamp(95px, calc(var(--s) * 166px), 166px);
+    height: clamp(71px, calc(var(--s) * 125px), 125px);
     width: 100%;
     min-width: 0;
     background-color: transparent;
@@ -817,7 +808,7 @@ export default {
 
 /* 双相位图模式: 留在左栏内, 与十字路图等宽; 高度约 2× 单图以容下两行 chart + 行标签 */
 .signal-timing-wrap.is-dual {
-    height: clamp(180px, calc(var(--s) * 300px), 300px);
+    height: clamp(135px, calc(var(--s) * 225px), 225px);
 }
 /* 双图模式下 header 紧贴下方相位图,避免无意义空白 */
 .signal-timing-wrap.is-dual .header {
@@ -1192,16 +1183,6 @@ export default {
     background: rgba(161, 190, 255, 0.75);
 }
 
-.stage-input {
-    width: 100%;
-    min-width: 0;
-    border: 1px solid rgba(161, 190, 255, 0.7);
-    background-color: transparent;
-    padding: clamp(2px, calc(var(--s) * 5px), 5px);
-    color: #ffffff;
-    text-align: center;
-}
-
 .phase-box {
     position: relative;
     width: 100%;
@@ -1357,69 +1338,20 @@ export default {
     box-sizing: border-box;
 }
 
-/* 新增包裹层的相对定位 */
-.input-unit-wrapper {
-    position: relative;
-    display: inline-block;
-}
-
-.stage-input {
-    width: 100%;
-    min-width: 0;
-    border: 1px solid rgba(161, 190, 255, 0.7);
-    background-color: transparent;
-    padding: clamp(2px, calc(var(--s) * 5px), 5px);
-    /* 给右侧留出空间,防止数字过长被 s 挡住 */
-    padding-right: clamp(10px, calc(var(--s) * 16px), 16px);
+/* 阶段时长纯文本: 替代原 input, 颜色/字号沿用 percent 但白色更亮以突出时长 */
+.stage-item-wrapper .time-text {
     color: #ffffff;
-    text-align: center;
-    border-radius: 4px;
-	font-size: clamp(9px, calc(var(--s) * 13px), 13px);
-}
-
-/* 修改 s 单位的定位方式为垂直居中 */
-.input-unit-wrapper .unit {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: clamp(3px, calc(var(--s) * 6px), 8px);
-    color: #77A1FF;
-    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
-    pointer-events: none;
+    font-size: clamp(9px, calc(var(--s) * 13px), 13px);
+    white-space: nowrap;
 }
 
-/* 微调百分比的间距,让排版更紧凑 */
+/* 百分比 */
 .stage-item-wrapper .percent {
     color: rgba(255, 255, 255, 0.5);
     font-size: clamp(9px, calc(var(--s) * 13px), 13px);
     white-space: nowrap;
 }
 
-.stage-input {
-    width: 100%;
-    min-width: 0;
-    border: 1px solid rgba(161, 190, 255, 0.7);
-    background-color: transparent;
-    padding: clamp(2px, calc(var(--s) * 5px), 5px);
-    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
-    color: #ffffff;
-    text-align: center;
-    border-radius: 4px;
-    -moz-appearance: textfield;
-}
-
-.stage-input::-webkit-outer-spin-button,
-.stage-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-.stage-input:disabled {
-    border-color: rgba(255, 255, 255, 0.2);
-    color: rgba(255, 255, 255, 0.5);
-    background-color: rgba(0, 0, 0, 0.2);
-}
-
 /* 弹窗过渡动画 */
 
 /* lock-time 弹窗补充样式 */