Bläddra i källkod

调整路口CrossingDetailPanel、CrossingPanel、SignalTimimgChart的缩放自适应;

画安 1 månad sedan
förälder
incheckning
c5e9b2b496

+ 6 - 4
src/components/ui/CrossingDetailPanel.vue

@@ -319,7 +319,7 @@ export default {
 .detail-panel-left {
     display: flex;
     flex-direction: column;
-    width: 685px;
+    flex: 0 0 55%;
     min-height: 0;
 }
 
@@ -332,15 +332,17 @@ export default {
 
 .intersection-video-wrap {
     width: 100%;
-    height: 300px;
-    flex: auto;
+    min-height: 0;
+    flex: 2;
 }
 
 .signal-timing-wrap {
     flex: 1;
+    min-height: 0;
+    height: 120px;
+    flex-shrink: 0;
     --s: 1;
     width: 100%;
-    height: 80px;
     min-width: 0;
     background-color: transparent;
     box-sizing: border-box;

+ 8 - 4
src/components/ui/CrossingPanel.vue

@@ -98,16 +98,20 @@ export default {
 .crossing-panel {
     display: flex;
     flex-direction: column;
+    width: 100%;
+    height: 100%; 
+    min-height: 0;
 }
 
 .intersection-video-wrap {
     width: 100%;
-    height: 100px;
-    flex: auto;
+    flex: 2; /* 地图比较重要,分给它 2 份的高度 */
+    min-height: 0;
 }
 
 .signal-timing-wrap {
-    flex: 1;
+    flex: 1; 
+    min-height: 0;
     --s: 1;
     width: 100%;
     height: 80px;
@@ -118,7 +122,7 @@ export default {
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    padding: calc(var(--s) * 10px);
+    padding: calc(var(--s) * 10px) 0 0 0;
 }
 
 .header {

+ 2 - 2
src/components/ui/SignalTimingChart.vue

@@ -100,8 +100,8 @@ export default {
         backgroundColor: 'transparent',
         // 因为去掉了头部,稍微减小了 top 的留白,让图表更紧凑
         grid: { 
-          left: this.isMiniMode ? 0 : Math.round(10 * s), 
-          right: this.isMiniMode ? 0 : Math.round(10 * s), 
+          left: 0, 
+          right: 0, 
           top: this.isMiniMode ? 0 : Math.round(30 * s), 
           bottom: this.isMiniMode ? 0 : Math.round(10 * s),
           containLabel: false