Prechádzať zdrojové kódy

style: 修改指挥中心样式布局

bxy 8 mesiacov pred
rodič
commit
afd40ab2e0

+ 2 - 2
src/views/emergency/command-center/PageCommandCenter.vue

@@ -112,7 +112,7 @@
     justify-content: space-between;
 
     .emergency-info {
-      width: 400px;
+      width: 380px;
       height: 100%;
       display: flex;
       flex-direction: column;
@@ -134,7 +134,7 @@
     }
 
     .monitor-cameras {
-      width: calc(100% - 410px);
+      width: calc(100% - 390px);
       height: 100%;
       background: #ffffff;
       border-radius: 8px;

+ 1 - 1
src/views/emergency/command-center/components/EmergencySupply.vue

@@ -129,7 +129,7 @@
     }
 
     .supply-list {
-      height: calc(100% - 45px);
+      height: calc(100% - 65px);
       overflow: auto;
     }
   }

+ 20 - 16
src/views/emergency/command-center/components/MonitorCameras.vue

@@ -170,11 +170,12 @@
 
 <style scoped lang="scss">
   .monitor-cameras-container {
-    padding: 10px;
+    padding: 10px 0 10px 10px;
+    display: flex;
 
     .main-camera {
-      width: 100%;
-      height: calc(100% - 220px);
+      width: calc(100% - 278px);
+      height: 100%;
     }
 
     .has-main-camera {
@@ -209,9 +210,11 @@
     }
 
     .all-cameras {
-      width: 100%;
-      height: 200px;
-      margin-top: 20px;
+      width: 268px;
+      height: 100%;
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
     }
   }
 
@@ -219,6 +222,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-right: 10px;
 
     .title {
       font-weight: 500;
@@ -228,7 +232,6 @@
     }
 
     .add-area {
-      padding: 0 16px;
       display: flex;
       align-items: center;
       font-size: 14px;
@@ -256,16 +259,17 @@
 
   .camera-list {
     width: 100%;
-    height: calc(100% - 40px);
-    margin-top: 10px;
+    height: calc(100% - 42px);
+    margin-top: 18px;
+    padding-right: 10px;
     overflow: auto;
     display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
 
     .monitor-item {
-      width: 235px;
-      height: 100%;
+      width: 100%;
       cursor: pointer;
     }
 
@@ -281,8 +285,8 @@
 
     .live-video {
       width: 100%;
-      height: calc(100% - 26px);
-      border: 1px solid #ddd;
+      height: calc(100% - 28px);
+      border: 2px solid #ddd;
     }
   }
 
@@ -296,7 +300,7 @@
     color: #999;
 
     .empty-img {
-      height: 80%;
+      width: 80%;
       object-fit: contain;
     }
   }