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/static/layui/lay/modules/carousel.js | 2
src/main/webapp/views/monitor/monitor.html | 115 +++++++++++++++++++++++--------------
src/main/webapp/views/monitor/css/lunbo.css | 9 +++
3 files changed, 81 insertions(+), 45 deletions(-)
diff --git a/src/main/webapp/static/layui/lay/modules/carousel.js b/src/main/webapp/static/layui/lay/modules/carousel.js
index 8eedd42..78bfb11 100755
--- a/src/main/webapp/static/layui/lay/modules/carousel.js
+++ b/src/main/webapp/static/layui/lay/modules/carousel.js
@@ -1,2 +1,2 @@
/** layui-v2.5.4 MIT License By https://www.layui.com */
- ;layui.define("jquery",function(e){"use strict";var i=layui.$,n=(layui.hint(),layui.device(),{config:{},set:function(e){var n=this;return n.config=i.extend({},n.config,e),n},on:function(e,i){return layui.onevent.call(this,t,e,i)}}),t="carousel",a="layui-this",l=">*[carousel-item]>*",o="layui-carousel-left",r="layui-carousel-right",d="layui-carousel-prev",s="layui-carousel-next",u="layui-carousel-arrow",c="layui-carousel-ind",m=function(e){var t=this;t.config=i.extend({},t.config,n.config,e),t.render()};m.prototype.config={width:"600px",height:"280px",full:!1,arrow:"hover",indicator:"inside",autoplay:!0,interval:3e3,anim:"",trigger:"click",index:0},m.prototype.render=function(){var e=this,n=e.config;n.elem=i(n.elem),n.elem[0]&&(e.elemItem=n.elem.find(l),n.index<0&&(n.index=0),n.index>=e.elemItem.length&&(n.index=e.elemItem.length-1),n.interval<800&&(n.interval=800),n.full?n.elem.css({position:"fixed",width:"100%",height:"100%",zIndex:9999}):n.elem.css({width:n.width,height:n.height}),n.elem.attr("lay-anim",n.anim),e.elemItem.eq(n.index).addClass(a),e.elemItem.length<=1||(e.indicator(),e.arrow(),e.autoplay(),e.events()))},m.prototype.reload=function(e){var n=this;clearInterval(n.timer),n.config=i.extend({},n.config,e),n.render()},m.prototype.prevIndex=function(){var e=this,i=e.config,n=i.index-1;return n<0&&(n=e.elemItem.length-1),n},m.prototype.nextIndex=function(){var e=this,i=e.config,n=i.index+1;return n>=e.elemItem.length&&(n=0),n},m.prototype.addIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index+e,n.index>=i.elemItem.length&&(n.index=0)},m.prototype.subIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index-e,n.index<0&&(n.index=i.elemItem.length-1)},m.prototype.autoplay=function(){var e=this,i=e.config;i.autoplay&&(clearInterval(e.timer),e.timer=setInterval(function(){e.slide()},i.interval))},m.prototype.arrow=function(){var e=this,n=e.config,t=i(['<button class="layui-icon '+u+'" lay-type="sub">'+("updown"===n.anim?"":"")+"</button>",'<button class="layui-icon '+u+'" lay-type="add">'+("updown"===n.anim?"":"")+"</button>"].join(""));n.elem.attr("lay-arrow",n.arrow),n.elem.find("."+u)[0]&&n.elem.find("."+u).remove(),n.elem.append(t),t.on("click",function(){var n=i(this),t=n.attr("lay-type");e.slide(t)})},m.prototype.indicator=function(){var e=this,n=e.config,t=e.elemInd=i(['<div class="'+c+'"><ul>',function(){var i=[];return layui.each(e.elemItem,function(e){i.push("<li"+(n.index===e?' class="layui-this"':"")+"></li>")}),i.join("")}(),"</ul></div>"].join(""));n.elem.attr("lay-indicator",n.indicator),n.elem.find("."+c)[0]&&n.elem.find("."+c).remove(),n.elem.append(t),"updown"===n.anim&&t.css("margin-top",-(t.height()/2)),t.find("li").on("hover"===n.trigger?"mouseover":n.trigger,function(){var t=i(this),a=t.index();a>n.index?e.slide("add",a-n.index):a<n.index&&e.slide("sub",n.index-a)})},m.prototype.slide=function(e,i){var n=this,l=n.elemItem,u=n.config,c=u.index,m=u.elem.attr("lay-filter");n.haveSlide||("sub"===e?(n.subIndex(i),l.eq(u.index).addClass(d),setTimeout(function(){l.eq(c).addClass(r),l.eq(u.index).addClass(r)},50)):(n.addIndex(i),l.eq(u.index).addClass(s),setTimeout(function(){l.eq(c).addClass(o),l.eq(u.index).addClass(o)},50)),setTimeout(function(){l.removeClass(a+" "+d+" "+s+" "+o+" "+r),l.eq(u.index).addClass(a),n.haveSlide=!1},300),n.elemInd.find("li").eq(u.index).addClass(a).siblings().removeClass(a),n.haveSlide=!0,layui.event.call(this,t,"change("+m+")",{index:u.index,prevIndex:c,item:l.eq(u.index)}))},m.prototype.events=function(){var e=this,i=e.config;i.elem.data("haveEvents")||(i.elem.on("mouseenter",function(){clearInterval(e.timer)}).on("mouseleave",function(){e.autoplay()}),i.elem.data("haveEvents",!0))},n.render=function(e){var i=new m(e);return i},e(t,n)});
\ No newline at end of file
+ ;layui.define("jquery",function(e){"use strict";var i=layui.$,n=(layui.hint(),layui.device(),{config:{},set:function(e){var n=this;return n.config=i.extend({},n.config,e),n},on:function(e,i){return layui.onevent.call(this,t,e,i)}}),t="carousel",a="layui-this",l=">*[carousel-item]>*",o="layui-carousel-left",r="layui-carousel-right",d="layui-carousel-prev",s="layui-carousel-next",u="layui-carousel-arrow",c="layui-carousel-ind",m=function(e){var t=this;t.config=i.extend({},t.config,n.config,e),t.render()};m.prototype.config={width:"600px",height:"100%",full:!1,arrow:"hover",indicator:"inside",autoplay:!0,interval:3e3,anim:"",trigger:"click",index:0},m.prototype.render=function(){var e=this,n=e.config;n.elem=i(n.elem),n.elem[0]&&(e.elemItem=n.elem.find(l),n.index<0&&(n.index=0),n.index>=e.elemItem.length&&(n.index=e.elemItem.length-1),n.interval<800&&(n.interval=800),n.full?n.elem.css({position:"fixed",width:"100%",height:"100%",zIndex:9999}):n.elem.css({width:n.width,height:n.height}),n.elem.attr("lay-anim",n.anim),e.elemItem.eq(n.index).addClass(a),e.elemItem.length<=1||(e.indicator(),e.arrow(),e.autoplay(),e.events()))},m.prototype.reload=function(e){var n=this;clearInterval(n.timer),n.config=i.extend({},n.config,e),n.render()},m.prototype.prevIndex=function(){var e=this,i=e.config,n=i.index-1;return n<0&&(n=e.elemItem.length-1),n},m.prototype.nextIndex=function(){var e=this,i=e.config,n=i.index+1;return n>=e.elemItem.length&&(n=0),n},m.prototype.addIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index+e,n.index>=i.elemItem.length&&(n.index=0)},m.prototype.subIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index-e,n.index<0&&(n.index=i.elemItem.length-1)},m.prototype.autoplay=function(){var e=this,i=e.config;i.autoplay&&(clearInterval(e.timer),e.timer=setInterval(function(){e.slide()},i.interval))},m.prototype.arrow=function(){var e=this,n=e.config,t=i(['<button class="layui-icon '+u+'" lay-type="sub">'+("updown"===n.anim?"":"")+"</button>",'<button class="layui-icon '+u+'" lay-type="add">'+("updown"===n.anim?"":"")+"</button>"].join(""));n.elem.attr("lay-arrow",n.arrow),n.elem.find("."+u)[0]&&n.elem.find("."+u).remove(),n.elem.append(t),t.on("click",function(){var n=i(this),t=n.attr("lay-type");e.slide(t)})},m.prototype.indicator=function(){var e=this,n=e.config,t=e.elemInd=i(['<div class="'+c+'"><ul>',function(){var i=[];return layui.each(e.elemItem,function(e){i.push("<li"+(n.index===e?' class="layui-this"':"")+"></li>")}),i.join("")}(),"</ul></div>"].join(""));n.elem.attr("lay-indicator",n.indicator),n.elem.find("."+c)[0]&&n.elem.find("."+c).remove(),n.elem.append(t),"updown"===n.anim&&t.css("margin-top",-(t.height()/2)),t.find("li").on("hover"===n.trigger?"mouseover":n.trigger,function(){var t=i(this),a=t.index();a>n.index?e.slide("add",a-n.index):a<n.index&&e.slide("sub",n.index-a)})},m.prototype.slide=function(e,i){var n=this,l=n.elemItem,u=n.config,c=u.index,m=u.elem.attr("lay-filter");n.haveSlide||("sub"===e?(n.subIndex(i),l.eq(u.index).addClass(d),setTimeout(function(){l.eq(c).addClass(r),l.eq(u.index).addClass(r)},50)):(n.addIndex(i),l.eq(u.index).addClass(s),setTimeout(function(){l.eq(c).addClass(o),l.eq(u.index).addClass(o)},50)),setTimeout(function(){l.removeClass(a+" "+d+" "+s+" "+o+" "+r),l.eq(u.index).addClass(a),n.haveSlide=!1},300),n.elemInd.find("li").eq(u.index).addClass(a).siblings().removeClass(a),n.haveSlide=!0,layui.event.call(this,t,"change("+m+")",{index:u.index,prevIndex:c,item:l.eq(u.index)}))},m.prototype.events=function(){var e=this,i=e.config;i.elem.data("haveEvents")||(i.elem.on("mouseenter",function(){clearInterval(e.timer)}).on("mouseleave",function(){e.autoplay()}),i.elem.data("haveEvents",!0))},n.render=function(e){var i=new m(e);return i},e(t,n)});
\ No newline at end of file
diff --git a/src/main/webapp/views/monitor/css/lunbo.css b/src/main/webapp/views/monitor/css/lunbo.css
new file mode 100644
index 0000000..5c70cf0
--- /dev/null
+++ b/src/main/webapp/views/monitor/css/lunbo.css
@@ -0,0 +1,9 @@
+.layui-carousel {
+ /*top: -45px;*/
+}
+.layui-icon layui-carousel-arrow {
+ display: none;
+}
+.layui-carousel-ind ul {
+ padding: 0 5px;
+}
\ No newline at end of file
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index 0eba122..e11fd52 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -5,15 +5,18 @@
<title>ASRS鐩戞帶</title>
<link href="css/monitor.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="js/jquery.countup.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
+ <script src="../../static/layui/layui.js"></script>
<style>
.crn-speed {
width: 100%;
- height: 20%;
+ height: 35%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
@@ -24,18 +27,18 @@
.crn-speed span {
display:inline-block;
margin:20px auto;
- font-size:64px;
+ font-size:56px;
font-family:'Pacifico',serif
}
.speed-content {
display: inline-block;
}
+
.scroll-pane {
width: 100%;
- height: 80%;
+ height: 65%;
}
-
.scroll-bar {
float: left;
width: 50%;
@@ -178,57 +181,71 @@
<!-- 涓笂 -->
<div class="crn-speed">
<div class="speed-content">
- <span>鍫嗗灈鏈洪�熷害锛�</span><span class="counter">5.00</span><span>绫�/绉�</span>
+ <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 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 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 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 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>
<!--鍙�-->
@@ -329,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