| | |
| | | <meta charset="UTF-8"> |
| | | <title>ASRS监控</title> |
| | | <link href="css/monitor.css" rel="stylesheet"> |
| | | <!-- <link href="css/Pacifico.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; |
| | | .crn-speed { |
| | | width: 100%; |
| | | height: 20%; |
| | | text-align: center; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .crn-speed span { |
| | | display:inline-block; |
| | | margin:20px auto; |
| | | font-size:64px; |
| | | font-family:'Pacifico',serif |
| | | } |
| | | .speed-content { |
| | | display: inline-block; |
| | | } |
| | | |
| | | /*.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;*/ |
| | | /*}*/ |
| | | .scroll-pane { |
| | | width: 100%; |
| | | height: 80%; |
| | | } |
| | | |
| | | .scroll-bar { |
| | | float: left; |
| | | width: 50%; |
| | | height: 100%; |
| | | text-align: center; |
| | | } |
| | | |
| | | .scroll-header span { |
| | | font-size:64px; |
| | | font-family:'Pacifico',serif |
| | | } |
| | | |
| | | .scroll-content { |
| | | animation:anis 10s linear infinite; |
| | | padding: 200px 10px 20px 10px; |
| | | font-family:'Pacifico',serif; |
| | | overflow:hidden; |
| | | } |
| | | .scroll-content:last-child { |
| | | border-left: 1px solid rgba(0, 0, 0, 0.3); |
| | | } |
| | | .scroll-content:hover { |
| | | animation-play-state:paused; |
| | | } |
| | | @keyframes anis { |
| | | 100% { |
| | | transform:translateY(-200px) |
| | | } |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | |
| | | <!--中--> |
| | | <div class="container-element-middle"> |
| | | <div class="map-board"> |
| | | <div class="inside"> |
| | | <div class="image-border image-border1"></div> |
| | | <div class="image-border image-border2"></div> |
| | | <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 class="crn-speed"> |
| | | <div class="speed-content"> |
| | | <span>堆垛机速度:</span><span class="counter">5.00</span><span>米/秒</span> |
| | | </div> |
| | | </div> |
| | | <!-- 中右 --> |
| | | </div> |
| | | |
| | | <div class="scroll-pane"> |
| | | <!-- 中左 --> |
| | | <div class="scroll-bar left-bar"> |
| | | <div class="scroll-header"> |
| | | <span>入库</span> |
| | | <p class="english">Entering Warehouse</p> |
| | | </div> |
| | | <div class="scroll-content"> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 中右 --> |
| | | <div class="scroll-bar right-bar"> |
| | | <div class="scroll-header"> |
| | | <span>出库</span> |
| | | <p class="english">Delivery Of cargo From Storage</p> |
| | | </div> |
| | | <div class="scroll-content"> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | <p>111111111111111111111</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | |
| | | </div> |