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