<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>
