video monitor init

src/router/routers.js

@@ -51,6 +51,19 @@ export const constantRouterMap = [
 		]
 
     },
+    {
+        path: '/video',
+        component: HomeLayout,
+        redirect: "noredirect",
+		children: [
+			{
+				path: "index",
+                component: (resolve) => require(['@/views/video/index'], resolve),
+				name: "视频监控",
+                meta: { title: '视频监控', icon: 'index', affix: true, noCache: true }
+			}
+		]
+    },
     {
 		path: "/user",
 		//component: Layout,

src/views/video/index.vue

+<template>
+	<div class="home_manage cm-layout">
+		<div class="m-view">
+			<!-- 视频监控 -->
+            <div class="page-wrapper">
+                <div class="video-wrapper">
+                    <div class="item" @click="openDialog">
+                        
+                    </div>
+                    <div class="item"></div>
+                    <div class="item"></div>
+                    <div class="item"></div>
+                    <div class="item"></div>
+                    <div class="item"></div>
+                </div>
+            </div>
+		</div>
+        <el-dialog :visible.sync="dialogVisible" title="监控视频">
+            <iframe :src="currentVideoUrl" frameborder="0" width="100%" height="600px" allowfullscreen></iframe>
+        </el-dialog>
+	</div>
+</template>
+
+<script>
+import { Tools} from '@/assets/js/common.js';
+import { reqApi, Config} from '@/assets/js/httpApi.js';
+export default {
+	name: 'videoMonitor',
+	data() {
+		return {
+            dialogVisible: false,
+		}
+	},
+	mounted() {
+		var that = this;
+		this.$nextTick(() => {
+			this.pageApi = Config.getModuleInfo(this);
+		})
+	},
+	methods: {
+        openDialog(url) {
+            this.currentVideoUrl = url;
+            this.dialogVisible = true;
+        },
+		loadData() {
+		},
+	}
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scope>
+    .page-wrapper{
+        width: 100%;
+        height: 100%;
+        background:no-repeat center center url('~@/assets/images/layout/main_bg.png');
+        background-size:100% 100%;
+        .video-wrapper{
+           
+            // background-color: #fff;
+            width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            padding-bottom: 0.1rem;
+            margin-top: 0.5rem;
+            
+        }
+        .item{
+            width: 32.3333%;
+            height: 300px;
+            margin-right: 0.1rem;
+            margin-top: 0.1rem;
+            // margin-left: 0.1rem;
+            background-color: pink;
+            &:nth-child(3n){
+                margin-right: 0.01rem;
+            }
+            cursor: pointer;
+        }
+    }
+
+
+	.home_manage{
+		position:relative;height:100%;width:100%;flex:1;display:flex;justify-content:center;
+		//background:no-repeat bottom center url('~@/assets/images/layout/main_bg.png');background-size:100% 100%;
+		
+		.m-view{
+			position:relative;width:100%;
+		}
+
+		.b_0{
+			border:1px solid #143D96;
+			position:absolute;top:.20rem;left:.10rem;width:max-content;padding:.10rem;user-select:none;
+			// background-color:rgba(0,16,52, .7);border-radius:.12rem;line-height:26px;
+			li{
+				span:first-child{color:#ccc;}
+				span{color:#fff;}
+			}
+		}
+	}
+	
+</style>