<!doctype html> <html> <head> <meta charset="utf-8"> <title>XXX有限公司公司</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <link rel="stylesheet" href="css/comon0.css"> <style> .grid { margin-top:5%; width:80%; height: 10px; display: grid; grid-template-columns: repeat(20, 1fr); grid-column-gap: 14px; } .line { position: relative; width: 90%; height: 7px; } .line::before, .line::after { content: ''; position: absolute; width: 4.5rem; height: 100%; border-radius: 7px; background-color: #FF0000; } .line::before { animation: first-line ease-in-out 4s var(--delay) infinite alternate; } .line::after { bottom: 0; background-color: #B22222; width: calc(80% - 10px); animation: second-line ease-in-out 4s var(--delay) infinite alternate; } .line:nth-child(1) { --delay: calc(-0.1s); } @keyframes first-line { 70% { width: calc(80% - 10px); } 100% { background-color: #FF0000; } } } </style> </head> <script type="text/javascript"> $(document).ready(function() { var html = $(".wrap ul").html() $(".wrap ul").append(html) var ls = $(".wrap li").length / 2 + 1 i = 0 ref = setInterval(function() { i++ if (i == ls) { i = 1 $(".wrap ul").css({ marginTop: 0 }) $(".wrap ul").animate({ marginTop: -'.52' * i + 'rem' }, 1000) } $(".wrap ul").animate({ marginTop: -'.52' * i + 'rem' }, 1000) }, 2400); var html2 = $(".adduser ul").html() $(".adduser ul").append(html2) var ls2 = $(".adduser li").length / 2 + 1 a = 0 ref = setInterval(function() { a++ if (a == ls2) { a = 1 $(".adduser ul").css({ marginTop: 0 }) $(".adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800) } $(".adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800) }, 4300); }) </script> <body style=''> <div class="loading"> <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div> </div> <div class="head"> <h1>XXX有限公司公司</h1> <div class="weather"><span id="showTime"></span></div> <script> var t = null; t = setTimeout(time, 1000); function time() { clearTimeout(t); dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours(); var m = dt.getMinutes(); var s = dt.getSeconds(); document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); } </script> </div> <div class="mainbox"> <ul class="clearfix"> <li> <div class="boxall" style="height: 5.2rem"> <div class="alltitle">消防主机报警</div> <div class="sycm"> <ul class="clearfix"> <li> <h2>1824</h2><span>本月报警数量</span> </li> <li> <h2>1920</h2><span>上月报警数量</span> </li> <li> <h2>5%</h2><span>环比增长</span> </li> </ul> <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div> <ul class="clearfix"> <li> <h2>824</h2><span>主机(20001)</span> </li> <li> <h2>710</h2><span>主机(20003)</span> </li> <li> <h2>200</h2><span>主机(20002)</span> </li> </ul> </div> <div class="addnew"> <div class="tit02"><span>误报种类</span></div> <div class="allnav" style="height: 2.2rem" id="wbzl"></div> </div> <div class="boxfoot"></div> </div> <div class="boxall" style="height: 4.9rem"> <div class="alltitle">无线烟感报警</div> <div class="allnav" style="height: 1.5rem" id="wxyg"></div> <div class="addnew"> <div class="tit02"><span>误报种类</span></div> <div class="allnav" style="height: 2.0rem" id="wwbzl"></div> </div> <div class="boxfoot"></div> </div> </li> <li> <div class="bar"> <div class="barbox "> <ul class="clearfix"> <li class="pulll_left counter"> 6069 </li> <li class="pulll_left counter">410</li> </ul> </div> <div class="barbox2"> <ul class="clearfix"> <li class="pulll_left">联网单位数量</li> <li class="pulll_left">联网消防主机数量</li> </ul> </div> </div> <div class="bar"> <div class="barbox"> <ul class="clearfix"> <li class="pulll_left counter">81189</li> <li class="pulll_left counter">39410</li> </ul> </div> <div class="barbox2"> <ul class="clearfix"> <li class="pulll_left">总点位数量</li> <li class="pulll_left">总报警数量</li> </ul> </div> </div> <div class="map"> <div class="map1"><img src="images/lbx.png"></div> <div class="map2"><img src="images/jt.png"></div> <div class="map3"><img src="images/map.png"></div> <div class="map4" id="map_1"></div> </div> <div class="boxall" style="height: 3.4rem"> <div class="alltitle">电报警</div> <div class="allnav" id="dbj" style="width:7.2rem;height:3rem;margin-top: 0.3rem"></div> <div class="boxfoot"></div> </div> </li> <li> <div class="boxall" style="height:5.2rem"> <div class="alltitle">燃气报警</div> <div class="clearfix"> <div class="sy" style="width:300px;" id="yqbj"></div> </div> <div class="addnew"> <div class="tit02"><span>最新报警</span></div> <div class="adduser" style="height: 2.0rem"> <ul> <li class="clearfix"> <span class="pulll_left">大连市XX医院</span> <span class="pulll_right">一楼 - 吸烟 - 2019-10-11 09:58:58 </span> </li> <li class="clearfix"> <span class="pulll_left">大连市XX集团</span> <span class="pulll_right">二楼 - 误报 - 2019-10-11 09:58:58 </span> </li> <li class="clearfix"> <span class="pulll_left">开发区医院</span> <span class="pulll_right">三楼 - 粉尘 - 2019-10-11 09:58:58 </span> </li> <li class="clearfix"> <span class="pulll_left">时代广场</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11 09:58:58 </span> </li> <li class="clearfix"> <span class="pulll_left">海昌物业</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11 09:58:58 </span> </li> <li class="clearfix"> <span class="pulll_left">海昌物业</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11 09:58:58 </span> </li> </ul> </div> </div> <div class="boxfoot"></div> </div> <div class="boxall" style="height: 1.4rem"> <div class="alltitle">红外报警</div> <div class="grid"> <span class="line"></span> </div> <div> <span style="color: #fff;opacity:.5">本月报警数量 :</span><span style="color: #DC143C;font-size:.1rem; font-weight: bold;">809</span> <span style="margin-left:15%;color: #fff;opacity:.5">上月报警数量 :</span><span style="color: #ffeb7b;font-size:.1rem; font-weight: old;">109</span> </div> <div class="boxfoot"></div> </div> <div class="boxall" style="height: 3.4rem"> <div class="alltitle">水报警</div> <div class="allnav" style="height: 3.0rem" id="sbj"></div> <div class="boxfoot"></div> </div> </li> </ul> </div> <div class="back"></div> <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script> <script type="text/javascript" src="js/echarts-gl.min.js"></script> <script language="JavaScript" src="js/echarts-tool.js"></script> <script type="text/javascript" src="js/timelineOption.js"></script> <script type="text/javascript"> </script> <script type="text/javascript" src="js/jquery.waypoints.min.js"></script> <script type="text/javascript" src="js/jquery.countup.min.js"></script> <script type="text/javascript"> $('.counter').countUp(); </script> </body> </html>