视频监控ui完成

videoSurveillance/src/assets/css/main.scss

@@ -11,9 +11,9 @@ body,
 #app {
     width: 100%;
     height: 100%;
-    font-size: 14px;
+    font-size: rem(14);
     background: #f4f7f9;
-    min-width: 1360px;
+    min-width: rem(1360);
 }
 
 ul li {

videoSurveillance/src/assets/css/public-style.scss

@@ -5,6 +5,7 @@ $white: white;
 $greenColor: #44d7b6;
 $redColor: #ff7171;
 $ashColor: #dcdcdc;
+$violetColor:#A28EFF;
 
 @function vw($size) {
   @return ($size/19.2) * 1vw;
@@ -28,6 +29,9 @@ $base_fontSize: 100;
 .mainText{
   color: $mainTextColor !important;
 }
+.violetText{
+  color: $violetColor !important;
+}
 .height100 {
   min-height: inherit;
   height: 100%;

videoSurveillance/src/components/common/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="header" :class="[collapse ? 'collapse' : 'expand']">
+    <div class="header" :class="[collapse ? 'collapse' : 'expand', routePath ? 'newWorkBench' : '']">
         <div class="el-fl-left"><v-tags></v-tags></div>
         <div class="header-right">
             <div class="header-user-con">
@@ -75,7 +75,10 @@ export default {
             return this.$store.getters['getCollapse'];
         },
         ...mapState(['messageNumber']),
-        ...mapState(['messageList'])
+        ...mapState(['messageList']),
+        routePath() {
+            return this.$route.path == '/passengerFlow/index' || this.$route.path == '/videoSurveillance/index';
+        }
     },
     methods: {
         toUrl(type) {
@@ -410,4 +413,8 @@ export default {
         }
     }
 }
+.newWorkBench{
+    border-bottom: rem(1) solid rgba(224, 225, 227, 0.2);
+    box-sizing: border-box;
+}
 </style>

videoSurveillance/src/components/common/Home.vue

@@ -7,11 +7,11 @@
  * @FilePath: \vue-manage-system-master\src\components\others\Home.vue
 -->
 <template>
-    <div class="dmp-app">
+    <div class="dmp-app" :class="routePath ? 'newWorkBench' : ''">
         <v-sidebar></v-sidebar>
         <div class="dmp-content" :style="{ width: collapse ? 'calc(100% - 85px)' : 'calc(100% - 220px)' }">
             <v-head></v-head>
-            <div class="main-wrap">
+            <div class="main-wrap" :class="routePath ? 'newWorkBench' : ''">
                 <transition name="move" mode="out-in">
                     <!-- <keep-alive :include="tagsList">
                             <router-view></router-view>
@@ -51,6 +51,9 @@ export default {
         },
         popupsList() {
             return this.$store.getters.getPopups;
+        },
+        routePath() {
+            return this.$route.path == '/passengerFlow/index' || this.$route.path == '/videoSurveillance/index';
         }
     },
     methods: {
@@ -120,4 +123,8 @@ export default {
     padding: 20px 20px 10px 20px;
     height: 100%;
 }
+.newWorkBench {
+    background-color: #2c354a;
+    overflow: hidden;
+}
 </style>

videoSurveillance/src/views/passengerFlow/index.scss

@@ -1,20 +1,20 @@
-
+@import "@assets/css/public-style.scss";
 .view-content {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: space-between;
-  height: calc(100% - 10px);
+  height: calc(100% - #{rem(10)});
 }
 .block-item {
   background: #171f32;
-  border-radius: 4px;
+  border-radius: rem(4);
   overflow: hidden;
-  padding: 0 20px 20px 20px;
+  padding: 0 rem(20) rem(20) rem(20);
   box-sizing: border-box;
 }
 .topsBlock {
-  height: 60px;
+  height:  rem(60);
   box-sizing: border-box;
   border-bottom: 1px solid rgba(224, 225, 227, 0.2);
   display: flex;
@@ -22,71 +22,73 @@
   align-items: center;
   color: white;
   /deep/ .el-input__inner {
-      background: transparent;
-      color: white;
-      padding-right: 20px;
-      border-color: rgba(255, 255, 255, 0.2);
+    background: transparent;
+    color: white;
+    padding-right: rem(20);
+    border-color: rgba(255, 255, 255, 0.2);
   }
   .right {
-      max-width: 120px;
-      img {
-          cursor: pointer;
-          vertical-align: middle;
-      }
+    max-width: rem(120);
+    img {
+      cursor: pointer;
+      vertical-align: middle;
+    }
   }
   .titleNumber {
-      color: #0eaeff;
-      font-size: 30px;
+    color: #0eaeff;
+    font-size: rem(30);
   }
   .left {
-      display: flex;
-      align-items: center;
-      img {
-          margin: 0 5px 0 20px;
-          vertical-align: middle;
-      }
+    display: flex;
+    align-items: center;
+    img {
+      margin: 0 rem(5) 0 rem(20);
+      vertical-align: middle;
+    }
   }
   /deep/ .el-date-editor .el-range-separator {
-      padding-left: 0;
-      color: white;
+    padding-left: 0;
+    color: white;
   }
   /deep/ .el-date-editor--daterange.el-input__inner {
-      width: 240px;
+    width: rem(240);
   }
   .search-btn {
-      margin-left: 20px;
+    margin-left: rem(20);
   }
 }
 .item-content {
-  padding-top: 20px;
+  padding-top: rem(20);
   box-sizing: border-box;
-  height: calc(100% - 60px);
+  height: calc(100% -  #{rem(60)});
 
   .flexPer {
-      display: flex;
-      height: 100%;
-      justify-content: space-between;
+    display: flex;
+    height: 100%;
+    justify-content: space-between;
   }
   .itme-inlineBlock {
-      display: flex;
-      width: calc((100% - 20px) / 3);
-      color: white;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-content: space-between;
-      height: 100%;
+    display: flex;
+    width: calc((100% - #{rem(20)}) / 3);
+    color: white;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-between;
+    height: 100%;
   }
 }
 .ft20 {
-  font-size: 20px;
+  font-size: rem(20);
 }
 .numberColor {
   // margin-bottom: 5px;
 }
 .greText {
-  opacity: 0.5;
   font-size: 12px;
 }
+.grdText {
+  opacity: 0.5;
+}
 .flex {
   display: flex;
   justify-content: space-between;
@@ -95,18 +97,18 @@
   width: 50%;
 }
 .grid-1 {
-  width: calc((100% - 20px) / 3);
-  height: calc((100% - 20px) / 7 * 2);
+  width: calc((100% - #{rem(20)}) / 3);
+  height: calc((100% - #{rem(20)}) / 7 * 2);
 }
 .grid-2 {
-  width: calc((100% - 20px) / 3 * 2);
-  height: calc((100% - 20px) / 7 * 2);
+  width: calc((100% - #{rem(20)}) / 3 * 2);
+  height: calc((100% - #{rem(20)}) / 7 * 2);
 }
 .grid-3 {
-  width: calc((100% - 20px) / 3);
-  height: calc((100% - 20px) / 7 * 5);
+  width: calc((100% - #{rem(20)}) / 3);
+  height: calc((100% - #{rem(20)}) / 7 * 5);
 }
 .grid-4 {
-  width: calc((100% - 20px) / 3 * 2);
-  height: calc((100% - 20px) / 7 * 5);
-}
+  width: calc((100% - #{rem(20)}) / 3 * 2);
+  height: calc((100% - #{rem(20)}) / 7 * 5);
+}

videoSurveillance/src/views/passengerFlow/index.vue

@@ -10,54 +10,54 @@
                         <div class="width100">今日</div>
                         <div class="flex width100">
                             <div class="greText width50">
-                                <div class="numberColor ft20">3000</div>
-                                <div>进入人数</div>
+                                <div class="numberColor ft20 greenText">3000</div>
+                                <div class="grdText">进入人数</div>
                             </div>
 
                             <div class="greText width50">
-                                <div class="numberColor ft20">1000</div>
-                                <div>出去人数</div>
+                                <div class="numberColor ft20 redText">1000</div>
+                                <div class="grdText">出去人数</div>
                             </div>
                         </div>
                         <div class="greText width100">
-                            <div class="numberColor ft20">4000</div>
-                            <div>总客流</div>
+                            <div class="numberColor ft20 violetText">4000</div>
+                            <div class="grdText">总客流</div>
                         </div>
                     </div>
                     <div class="itme-inlineBlock">
                         <div class="width100">昨日</div>
                         <div class="flex width100">
                             <div class="greText width50">
-                                <div class="numberColor ft20">2000</div>
-                                <div>进入人数</div>
+                                <div class="numberColor ft20 greenText">2000</div>
+                                <div class="grdText">进入人数</div>
                             </div>
 
                             <div class="greText width50">
-                                <div class="numberColor ft20">2000</div>
-                                <div>出去人数</div>
+                                <div class="numberColor ft20 redText">2000</div>
+                                <div class="grdText">出去人数</div>
                             </div>
                         </div>
                         <div class="greText width100">
-                            <div class="numberColor ft20">4000</div>
-                            <div>总客流</div>
+                            <div class="numberColor ft20 violetText">4000</div>
+                            <div class="grdText">总客流</div>
                         </div>
                     </div>
                     <div class="itme-inlineBlock">
                         <div class="width100">同比</div>
                         <div class="flex width100">
                             <div class="greText width50">
-                                <div class="numberColor ft20">50%</div>
-                                <div>总进入人数</div>
+                                <div class="numberColor ft20 greenText">50%</div>
+                                <div class="grdText">总进入人数</div>
                             </div>
 
                             <div class="greText width50">
-                                <div class="numberColor ft20">50%</div>
-                                <div>总出去人口</div>
+                                <div class="numberColor ft20 redText">50%</div>
+                                <div class="grdText">总出去人口</div>
                             </div>
                         </div>
                         <div class="greText width100">
-                            <div class="numberColor ft20">0%</div>
-                            <div>总客流</div>
+                            <div class="numberColor ft20 violetText">0%</div>
+                            <div class="grdText">总客流</div>
                         </div>
                     </div>
                 </div>
@@ -262,7 +262,7 @@ export default {
 .column {
     flex-direction: column;
     & > div {
-        height: calc((100% - 60px) / 3);
+        height: calc((100% - #{rem(60)}) / 3);
     }
 }
 .view-content {

videoSurveillance/src/views/videoSurveillance/index.vue

@@ -7,8 +7,41 @@
             </div>
         </div>
         <div class="contentShow">
-            <div></div>
-            <div></div>
+            <div class="topBlock">
+                <div class="separateBlock">
+                    <div class="listBlock bg1">
+                        <div class="font30">298</div>
+                        <div class="titleText">设备总数</div>
+                    </div>
+                    <div class="listBlock bg2">
+                        <div class="font30">298</div>
+                        <div class="titleText">设备在线数</div>
+                    </div>
+                    <div class="listBlock bg3">
+                        <div class="font30">298</div>
+                        <div class="titleText">设备离线数</div>
+                    </div>
+                </div>
+                <div class="hopBlock">
+                    <div class="itemBlock">
+                        <div class="font30 mainText">298</div>
+                        <div class="titleText">今日客流</div>
+                    </div>
+                    <div class="itemBlock">
+                        <div class="font30 greenText">298</div>
+                        <div class="titleText">本周客流</div>
+                    </div>
+                    <div class="itemBlock">
+                        <div class="font30 redText">298</div>
+                        <div class="titleText">本月客流</div>
+                    </div>
+                    <div class="itemBlock">
+                        <div class="font30 violetText">298</div>
+                        <div class="titleText">本年客流</div>
+                    </div>
+                </div>
+            </div>
+            <div class="videoView"></div>
         </div>
         <!-- <video-list :videoUrlList="videoUrlList"></video-list> -->
     </div>
@@ -47,46 +80,116 @@ export default {
 </script>
 
 <style scoped lang='scss'>
+@import '@assets/css/public-style.scss';
 .realVideoBox {
     height: 100%;
     display: flex;
     justify-content: space-between;
 }
 .leftAssembly {
-    width: 300px;
+    width: rem(300);
     background: #171f32;
-    border-radius: 4px;
+    border-radius: rem(4);
     box-sizing: border-box;
-    padding: 20px;
+    padding: rem(20);
     color: white;
     .titles {
         border-bottom: 1px solid rgba(224, 225, 227, 0.2);
-        padding-bottom: 20px;
-        margin-bottom: 20px;
+        padding-bottom: rem(20);
+        margin-bottom: rem(20);
     }
     .componentsBlock {
-        height: calc(100% - 60px);
+        height: calc(100% - #{rem(60)});
         overflow-y: auto;
         overflow-x: hidden;
+        &::-webkit-scrollbar {
+            z-index: 11;
+            width: rem(4);
+        }
+        &::-webkit-scrollbar-track,
+        &::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: rem(5);
+            width: rem(4);
+            background: rgba(250, 250, 250, 0.09);
+        }
+        &::-webkit-scrollbar-track-piece {
+            background: transparent;
+            width: rem(4);
+        }
     }
     .devList {
-        height: 30px;
-        line-height: 30px;
-        padding: 0 10px;
+        height: rem(30);
+        line-height: rem(30);
+        padding: 0 rem(10);
         &.active {
             background: #0eaeff36;
-            border-radius: 4px;
+            border-radius: rem(4);
         }
     }
 }
 .contentShow {
-    border: 1px solid #171f32;
-    width: calc(100% - 320px);
-    border-radius: 4px;
-    padding: 0.1rem;
+    width: calc(100% - #{rem(320)});
+    border-radius: rem(4);
     height: 100%;
-    display: grid;
-    grid-template-columns: 2fr 2fr 2fr 2fr;
-    grid-template-rows: 1fr 1fr 1fr;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .topBlock {
+        height: rem(100);
+        display: flex;
+        justify-content: space-between;
+        color: white;
+        .separateBlock {
+            width: rem(580);
+            display: flex;
+            justify-content: space-between;
+
+            .listBlock {
+                width: rem(180);
+                border-radius: rem(10);
+                padding: rem(20);
+            }
+        }
+        .hopBlock {
+            width: calc(100% - #{rem(600)});
+            display: flex;
+            background: #171f32;
+            border-radius: rem(10);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: rem(20) 0;
+            .itemBlock {
+                width: calc(100% / 4);
+                padding-left: rem(20);
+                box-sizing: border-box;
+                &:not(:last-child) {
+                    border-right: 1px solid rgba(255, 255, 255, 0.2);
+                }
+            }
+        }
+    }
+    .videoView {
+        height: calc(100% - #{rem(120)});
+        background: #171f32;
+        border-radius: rem(4);
+    }
+}
+.bg1 {
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+}
+.bg2 {
+    background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+}
+.bg3 {
+    background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%);
+}
+.titleText {
+    font-size: rem(12);
+    margin-top: rem(5);
+}
+.font30 {
+    font-size: rem(30);
 }
 </style>