<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频监控</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<main class="main">
<header class="heared">
<span class="head-logo">前后台通用模板</span>
<ul class="head-ul"><li><a href="home.html" class="active-a">首页</a> </li>
<li><a href="videlctr.html">视频监控</a> </li>
<li><a href="map.html">地图管理</a> </li>
<li><a href="static.html">统计分析</a> </li>
<li><a href="form.html">表单信息</a> </li>
<li><a href="user.html">用户管理</a></li>
<li><a href="part.html">部门管理</a></li>
<li><a href="date.html">日程管理</a></li>
</ul>
<div class="head-right"><span id="time"></span><span>Admin</span></div>
</header>
<section class="section commanBox">
<div class="boxLeft">
<div class="boxLeftVideoTop"></div>
<div class="clear"></div>
<div class="boxLeftVideoBox">
<div class="BoxConTop"><span class="BoxconTopLeft">南山路口（20170601）</span><span class="BoxconTopRight"><img src="img/ico.png"/> </span></div>
<div class="boxLeftVideoBoxCon">
<video autoplay="autoplay" width="100%" height="100%">
<source src="webm/CAMERAV.webm" type="video/mp4">
</video>
</div>
<div class="clear"></div>
<div class="BoxConTop"><span class="BoxconTopLeft">大河路口（20170601）</span><span class="BoxconTopRight"><img src="img/ico.png"/> </span></div>
<div class="boxLeftVideoBoxCon">
<video autoplay="autoplay" width="100%" height="100%">
<source src="webm/CAMERAV.webm" type="video/mp4">
</video>
</div>
</div>
<div class="clear"></div>
<div class="boxLeftAram">
<div class="boxLeftAlamTop"></div>
<div class="boxLeftAlamCon">
<ul class="alamUl">
<li>
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
</li>
<li>
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
</li>
<li>
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
</li>
<li>
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
</li>
<li>
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
</li>
<li>
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
</li>
<li>
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
</li>
</ul>
</div>
</div>
</div>
<div class="boxCenter">
<div class="boxCenterUp">
<div class="boxCentterUpLeft">
<div class="ananBg"><img src="img/ana01.png" class="ana01IMg"/> <div class="anaImgText">652</div></div>
<div class="anaText">案件总量</div>
</div>
<div class="boxCentterUpLeft">
<div class="ananBg"><img src="img/ana02.png" class="ana01IMg"/> <div class="anaImgText01">652</div></div>
<div class="anaText">案件处理量</div>
</div>
<div class="boxCentterUpLeft">
<div class="ananBg"><img src="img/ana01.png" class="ana01IMg"/> <div class="anaImgText02">652</div></div>
<div class="anaText">案件投诉量</div>
</div>
<div class="boxCentterRight"></div>
</div>
<div class="clear"></div>
<div class="boxCenterdown">
<div class="boxCenterMap">
<div class="mapTool01">
<a href="#" class="mapToolA01 mapToolA01Active"></a>
<a href="#" class="mapToolA02"></a>
<a href="#" class="mapToolA03"></a>
<a href="#" class="mapToolA04"></a>
</div>
<div class="mapTool02">
<ul>
<li class="mapToolA05"> </li>
<li class="mapToolA06"> </li>
<li class="mapToolA07"> </li>
<li class="mapToolA08"> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="boxRight">
<div class="boxRightTop"></div>
<div class="clear"></div>
<div class="boxRightCon01">
<ul class="boxRightCon_ul">
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li02.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li02.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li03.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li03.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
</ul>
</div>
<div class="clear"></div>
<div class="boxRightCon02">
<div class="boxRightcon02Top"><ul class="con02TopUL"><li class="con02liAcitve">车辆信息</li><li>人员信息</li><li>地名地址</li></ul></div>
<div class="boxRithtChangeBox">
<div class="boxChangeCon" style="display: block">
<div class="boxChangeConFind">
<p><label class="boxFindLabel">车辆颜色：</label><select class="boxFindInput">
<option>白色</option>
</select><label class="boxFindLabel">车辆品牌：</label><input type="text" class="boxFindInput"/></p>
<p><label class="boxFindLabel">车牌号码：</label><input type="text" class="boxFindInput"/> </p>
<p><button class="boxFindButton">开始搜索</button></p>
</div>
<div class="clear"></div>
<ul id="pageAll">
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>车牌号：<span>1川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>车辆颜色：<span>1红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>车辆品牌：<span>1大众</span></p>
</div>
</li>
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>车牌号：<span>1川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>车辆颜色：<span>1红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>车辆品牌：<span>1大众</span></p>
</div>
</li>
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>车牌号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>车辆颜色：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>车辆品牌：<span>大众</span></p>
</div>
</li>
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>车牌号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>车辆颜色：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>车辆品牌：<span>大众</span></p>
</div>
</li>
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>车牌号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>车辆颜色：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>车辆品牌：<span>大众</span></p>
</div>
</li>
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>车牌号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>车辆颜色：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>车辆品牌：<span>大众</span></p>
</div>
</li>
</ul>
<div class="boxChangeFoot" >
<span class="page_box">
<a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:3px;">/</span><span class="total"></span>
</span><a class="next">下一页</a>
</span>
</div>
</div>
<div class="boxChangeCon">
<div class="boxChangeConFind">
<p><label class="boxFindLabel">人员名称：</label><input type="text" class="boxFindInput"/><label class="boxFindLabel">性别：</label><select class="boxFindInput">
<option>男</option>
</select></p>
<p><label class="boxFindLabel">年龄：</label><input type="text" class="boxFindInput"/> </p>
<p><button class="boxFindButton">开始搜索</button></p>
</div>
<div class="clear"></div>
<ul id="pageAll01">
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>工号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>职务：<span>大众</span></p>
</div>
</li>
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>工号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>职务：<span>大众</span></p>
</div>
</li>
<li>
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
<div class="liConRight">
<p>工号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
<p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
<p>职务：<span>大众</span></p>
</div>
</li>
</ul>
<div class="boxChangeFoot" >
<span class="page_box">
<a id="prev02">上一页</a><span class="num"><span id="current_page02">1</span><span style="padding:3px;">/</span><span id="total02"></span>
</span><a id="next02">下一页</a>
</span>
</div>
</div>
<div class="boxChangeCon">
<div class="boxChangeConFind">
<p><label class="boxFindLabel">地名地址：</label><input type="text" class="boxFindInput"/></p>
<p><button class="boxFindButton">开始搜索</button></p>
</div>
<div class="clear"></div>
<ul id="pageAll02">
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
<li class="addLi">
<div class="liConRight01">
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
</div>
</li>
</ul>
<div class="boxChangeFoot" >
<span class="page_box">
<a id="prev03">上一页</a><span class="num"><span id="current_page03">1</span><span style="padding:3px;">/</span><span id="total03"></span></span><a id="next03">下一页</a>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<script>
$(function(){
$(".head-ul li a").click(function(){
$(this).addClass("active-a").parents("li").siblings().find("a").removeClass("active-a");
$(this).parents('li').find("ul").show();
$(this).parents("li").sibling().find("ul").hide();
})
getTime();
})
function getTime(){
var day=new Date();
var year=day.getFullYear();
var moutth=day.getMonth()+1;
var date=day.getDate();
var hour=day.getHours();
var min=day.getMinutes();
var sec=day.getSeconds();
var str=year+'-'+moutth+'-'+date+' '+hour+":"+min+':'+sec;
$("#time").text(str);
}
</script>
</body>
</html>