优化临时方案时间表单布局，适配多屏模式下的窄容器显示

src/components/ui/CrossingDetailPanel.vue

@@ -47,38 +47,41 @@
 
                                 <el-date-picker v-model="startDate" type="date" placeholder="选择日期"
                                     value-format="yyyy-MM-dd" size="small" :append-to-body="true"
-                                    :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
-                                    class="form-item">
+                                    :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }">
                                 </el-date-picker>
 
-                                <el-time-picker v-model="startTime" placeholder="选择时间" value-format="HH:mm:ss"
-                                    size="small" :append-to-body="true"
-                                    :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
-                                    class="form-item">
+                                <el-time-picker v-model="startTime" placeholder="选择时间"
+                                    value-format="HH:mm:ss" size="small" :append-to-body="true"
+                                    :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }">
                                 </el-time-picker>
 
                                 <el-date-picker v-model="endDate" type="date" placeholder="选择日期"
                                     value-format="yyyy-MM-dd" size="small" :append-to-body="true"
-                                    :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
-                                    class="form-item">
+                                    :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }">
                                 </el-date-picker>
 
-                                <el-time-picker v-model="endTime" placeholder="选择时间" value-format="HH:mm:ss"
-                                    size="small" :append-to-body="true"
-                                    :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
-                                    class="form-item">
+                                <el-time-picker v-model="endTime" placeholder="选择时间"
+                                    value-format="HH:mm:ss" size="small" :append-to-body="true"
+                                    :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }">
                                 </el-time-picker>
 
-                                <el-select v-model="duration" placeholder="请选择时长" size="small"
-                                    :popper-append-to-body="true" class="form-item">
-                                    <el-option v-for="d in durationOptions" :key="d" :label="d"
-                                        :value="d"></el-option>
-                                </el-select>
+                                <div class="form-item-labeled">
+                                    <span class="form-label">时长</span>
+                                    <el-select v-model="duration" placeholder="请选择时长" size="small"
+                                        :popper-append-to-body="true">
+                                        <el-option v-for="d in durationOptions" :key="d" :label="d"
+                                            :value="d"></el-option>
+                                    </el-select>
+                                </div>
 
-                                <el-select v-model="period" placeholder="请选择周期" size="small"
-                                    :popper-append-to-body="true" class="form-item">
-                                    <el-option v-for="p in 8" :key="p" :label="'周期' + p" :value="p"></el-option>
-                                </el-select>
+                                <div class="form-item-labeled">
+                                    <span class="form-label">周期</span>
+                                    <el-select v-model="period" placeholder="请选择周期" size="small"
+                                        :popper-append-to-body="true">
+                                        <el-option v-for="p in 8" :key="p" :label="'周期' + p"
+                                            :value="p"></el-option>
+                                    </el-select>
+                                </div>
 
                             </div>
 
@@ -1020,20 +1023,35 @@ export default {
 
 /* ===== 时间表单栏布局 ===== */
 .time-form-bar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: clamp(4px, calc(var(--s) * 8px), 10px);
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: clamp(3px, calc(var(--s) * 5px), 6px);
     margin-bottom: clamp(4px, calc(var(--s) * 10px), 20px);
 }
 
-.time-form-bar .form-item {
-    flex: 1 1 calc(30% - 8px);
-    min-width: clamp(80px, calc(var(--s) * 140px), 140px);
+/* 第二行：带标签的项各占 2 列（共 4 列，两项铺满一行） */
+.time-form-bar .form-item-labeled {
+    grid-column: span 2;
+    display: flex;
+    align-items: center;
+    gap: clamp(3px, calc(var(--s) * 6px), 8px);
+}
+
+.time-form-bar .form-label {
+    white-space: nowrap;
+    flex-shrink: 0;
+    color: rgba(200, 220, 255, 0.65);
+    font-size: clamp(9px, calc(var(--s) * 12px), 13px);
+}
+
+.time-form-bar .form-item-labeled .el-select {
+    flex: 1;
+    min-width: 0;
 }
 
 /* ===== ElementUI 深色主题适配 ===== */
 
-/* 覆盖 el-date-editor 固定宽度，让其跟随 flex 布局 */
+/* 覆盖 el-date-editor 固定宽度，让其跟随 grid 布局 */
 .time-form-bar>>>.el-date-editor.el-input,
 .time-form-bar>>>.el-date-editor.el-input__inner,
 .time-form-bar>>>.el-select {
@@ -1045,9 +1063,11 @@ export default {
     background-color: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(161, 190, 255, 0.35);
     color: #e0e6f1;
-    font-size: clamp(9px, calc(var(--s) * 13px), 13px);
-    height: clamp(22px, calc(var(--s) * 32px), 32px);
-    line-height: clamp(22px, calc(var(--s) * 32px), 32px);
+    font-size: clamp(9px, calc(var(--s) * 11px), 11px);
+    height: clamp(22px, calc(var(--s) * 28px), 28px);
+    line-height: clamp(22px, calc(var(--s) * 28px), 28px);
+    padding-left: clamp(22px, calc(var(--s) * 26px), 26px);
+    padding-right: clamp(4px, calc(var(--s) * 6px), 6px);
 }
 
 .time-form-bar>>>.el-input__inner::placeholder {
@@ -1062,15 +1082,15 @@ export default {
     border-color: #3b74ff;
 }
 
-/* 图标颜色与大小 */
+/* 图标颜色、尺寸跟随缩放 */
 .time-form-bar>>>.el-input__prefix,
 .time-form-bar>>>.el-input__suffix {
     color: rgba(255, 255, 255, 0.4);
-    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
 }
 
 .time-form-bar>>>.el-input__icon {
-    line-height: clamp(22px, calc(var(--s) * 32px), 32px);
-    width: clamp(16px, calc(var(--s) * 25px), 25px);
+    font-size: clamp(9px, calc(var(--s) * 12px), 12px);
+    line-height: clamp(22px, calc(var(--s) * 28px), 28px);
+    width: clamp(18px, calc(var(--s) * 22px), 22px);
 }
 </style>