From ea167d9abd97694e2c007cd6af5323545b59999d Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期三, 11 十一月 2020 19:18:51 +0800 Subject: [PATCH] # --- src/main/webapp/views/monitor/monitor.html | 149 ++++++++++++++++++++++++++++++++----------------- 1 files changed, 96 insertions(+), 53 deletions(-) diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html index d69e0db..a0f53d5 100644 --- a/src/main/webapp/views/monitor/monitor.html +++ b/src/main/webapp/views/monitor/monitor.html @@ -4,43 +4,66 @@ <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> @@ -146,41 +169,61 @@ <!--涓�--> <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> -- Gitblit v1.9.1