|  |  | 
 |  |  |     <meta charset="UTF-8"> | 
 |  |  |     <title>ASRS监控</title> | 
 |  |  |     <link href="css/monitor.css" rel="stylesheet"> | 
 |  |  | <!--    <link href="css/Pacifico.css" rel="stylesheet">--> | 
 |  |  |     <script src="js/jquery-3.3.1.min.js"></script> | 
 |  |  |     <script src="js/vincent.js"></script> | 
 |  |  |     <script src="js/echarts/echarts.min.js"></script> | 
 |  |  |     <script src="https://api.map.baidu.com/api?v=2.0&ak=pnkdgjAQGCS0nwjFnBjbprCtPrNNvDBe" type="text/javascript"></script> | 
 |  |  |     <script src="js/echarts/bmap.min.js"></script> | 
 |  |  |     <script src="js/jquery.countup.min.js"></script> | 
 |  |  |     <script src="js/jquery.waypoints.min.js"></script> | 
 |  |  |     <style> | 
 |  |  |         span.counter { | 
 |  |  |             display:block; | 
 |  |  |             margin:20px auto; | 
 |  |  |             font-size:64px; | 
 |  |  |             font-family:'Pacifico',serif | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         /*.div1 {*/ | 
 |  |  |         /*    width:200px;*/ | 
 |  |  |         /*    height:200px;*/ | 
 |  |  |         /*    overflow:hidden;*/ | 
 |  |  |         /*    margin:auto;*/ | 
 |  |  |         /*    position:relative;*/ | 
 |  |  |         /*    font-family:'Pacifico',serif*/ | 
 |  |  |         /*}*/ | 
 |  |  |         /*@keyframes anis {*/ | 
 |  |  |         /*    100% {*/ | 
 |  |  |         /*        transform:translateY(-200px)*/ | 
 |  |  |         /*    }*/ | 
 |  |  |         /*}img {*/ | 
 |  |  |         /*     position:absolute;*/ | 
 |  |  |         /* }*/ | 
 |  |  |         /*.div2 {*/ | 
 |  |  |         /*    animation:anis 10s linear infinite;*/ | 
 |  |  |         /*}*/ | 
 |  |  |         /*.div2:hover {*/ | 
 |  |  |         /*    animation-play-state:paused;*/ | 
 |  |  |         /*}*/ | 
 |  |  |  | 
 |  |  |     </style> | 
 |  |  | </head> | 
 |  |  | 
 |  |  |                     <div class="image-border image-border3"></div> | 
 |  |  |                     <div class="image-border image-border4"></div> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |                     <!-- 中上 --> | 
 |  |  |                     <div class="demo"> | 
 |  |  |                         <span class="counter">5.00</span> | 
 |  |  |                     </div> | 
 |  |  |  | 
 |  |  |                     <!-- 中左 --> | 
 |  |  |                     <div class="div1"> | 
 |  |  |                         <div class="div2"> | 
 |  |  |                             <p>111111111111111111111</p> | 
 |  |  |                             <p>211111111111111111111</p> | 
 |  |  |                             <p>311111111111111111111</p> | 
 |  |  |                             <p>411111111111111111111</p> | 
 |  |  |                             <p>511111111111111111111</p> | 
 |  |  |                             <p>611111111111111111111</p> | 
 |  |  |                             <p>711111111111111111111</p> | 
 |  |  |                             <p>2211111111111111111111</p> | 
 |  |  |                             <p>331111111111111111111</p> | 
 |  |  |                             <p>441111111111111111111</p> | 
 |  |  |                             <p>551111111111111111111</p> | 
 |  |  |                             <p>661111111111111111111</p> | 
 |  |  |                             <p>771111111111111111111</p> | 
 |  |  |                             <p>881111111111111111111</p> | 
 |  |  |                             <p>991111111111111111111</p> | 
 |  |  |                             <p>001111111111111111111</p> | 
 |  |  |                         </div> | 
 |  |  |                     </div> | 
 |  |  |                     <!-- 中右 --> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |  | 
 |  |  | 
 |  |  |     </div> | 
 |  |  | </body> | 
 |  |  | <script> | 
 |  |  |     $('.counter').countUp(); | 
 |  |  |     //  遮罩 | 
 |  |  |     let closeBtn = document.getElementById('closeBtn'); | 
 |  |  |     let detailModal = document.getElementById('detail-modal'); |