From fa29b45fb2f25087b106bfa234a1ec6feebb3f8d Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 16 十一月 2020 10:33:02 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/monitor.html | 181 +++++++++++++++++++++++++++++++-------------
1 files changed, 127 insertions(+), 54 deletions(-)
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index d69e0db..e11fd52 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -4,43 +4,70 @@
<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">
+ <link href="../../static/layui/css/layui.css" rel="stylesheet">
+ <link href="css/lunbo.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>
+ <script src="../../static/layui/layui.js"></script>
<style>
- span.counter {
- display:block;
+ .crn-speed {
+ width: 100%;
+ height: 35%;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/
+ }
+
+ .crn-speed span {
+ display:inline-block;
margin:20px auto;
+ font-size:56px;
+ font-family:'Pacifico',serif
+ }
+ .speed-content {
+ display: inline-block;
+ }
+
+
+ .scroll-pane {
+ width: 100%;
+ height: 65%;
+ }
+ .scroll-bar {
+ float: left;
+ width: 50%;
+ height: 100%;
+ text-align: center;
+ }
+
+ .scroll-header span {
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;*/
- /*}*/
+ .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,43 +173,79 @@
<!--涓�-->
<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">
+ <div>
+ <span>鍫嗗灈鏈鸿蛋琛岄�熷害锛�</span><span class="counter">5.00</span><span>绫�/绉�</span>
+ </div>
+ <div>
+ <span>鍫嗗灈鏈哄崌闄嶉�熷害锛�</span><span class="counter">5.00</span><span>绫�/绉�</span>
+ </div>
</div>
</div>
- <!-- 涓彸 -->
- </div>
- </div>
+ <div class="scroll-pane">
+
+ <div class="layui-carousel" id="test1">
+ <div carousel-item>
+ <div style="background-color: red">鏉＄洰1</div>
+ <div style="background-color: gold">鏉＄洰2</div>
+ <div style="background-color: #333333">鏉＄洰3</div>
+ <div style="background-color: #00FF00">鏉＄洰4</div>
+ <div style="background-color: #5FB878">鏉＄洰5</div>
+ </div>
+ </div>
+
+<!-- <!– 涓乏 –>-->
+<!-- <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>
</div>
<!--鍙�-->
@@ -283,6 +346,16 @@
</div>
</body>
<script>
+ layui.use('carousel', function(){
+ var carousel = layui.carousel;
+ //寤洪�犲疄渚�
+ carousel.render({
+ elem: '#test1'
+ ,width: '100%' //璁剧疆瀹瑰櫒瀹藉害
+ ,arrow: 'always' //濮嬬粓鏄剧ず绠ご
+ //,anim: 'updown' //鍒囨崲鍔ㄧ敾鏂瑰紡
+ });
+ });
$('.counter').countUp();
// 閬僵
let closeBtn = document.getElementById('closeBtn');
--
Gitblit v1.9.1