| | |
| | | <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'); |