主题:智慧物流大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
部分js代码
<html> <head> <meta charset="utf-8"> <title>index</title> <script type="text/javascript" src="js/jquery.js"></script> <link rel="stylesheet" href="css/comon0.css"> </head> <body> <div class="loading"> <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div> </div> <div class="head"> <h1>智慧物流分析平台</h1> <div class="time" id="showTime">2019/11/29 0:12:42</div> <script> var t = null; t = setTimeout(time,1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y=dt.getFullYear(); var mt=dt.getMonth()+1; var day=dt.getDate(); var h=dt.getHours();//获取时 var m=dt.getMinutes();//获取分 var s=dt.getSeconds();//获取秒 var t = null; document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+""; function Appendzero(obj){ if(obj<10) return "0" +""+ obj; else return obj; } t = setTimeout(time,1000); //设定定时器，循环运行 } </script>
部分css代码
.loading{position:fixed; left:0; top:0; font-size:.3rem; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;} .loadbox{position:absolute; width:160px;height:150px; color: #324e93; left:50%; top:50%; margin-top:-100px; margin-left:-75px;} .loadbox img{ margin:10px auto; display:block; width:40px;} .copyright{ line-height:.5rem; text-align: center; padding-right: 15px; bottom: 0; color:rgba(255,255,255,.5); font-size: .12rem; position: absolute; left: 0; width: 100%;} .head{ height:1.05rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative} .head h1{ color:#fff; text-align: center; font-size: .42rem; line-height:.75rem;} .head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; } .time{ position:absolute; right:.15rem; top:0; line-height: .75rem;color:rgba(255,255,255,.7); font-size: .26rem; padding-right: .1rem;font-family:electronicFont;} .mainbox{ padding:0 .2rem 0rem .2rem; height:calc(70% - 1.05rem) } .mainbox>ul{ margin-left:-.1rem; margin-right:-.1rem; height:100%} .mainbox>ul>li{ float: left; padding: 0 .1rem;height:100%;width: 30%} .mainbox>ul>li:nth-child(2){ width: 40%} .mainbox2{ padding:0 .2rem 0rem .2rem; height:calc(30% - .5rem) } .mainbox2>ul{ margin-left:-.1rem; margin-right:-.1rem; height:100%} .mainbox2>ul>li{ float: left; padding: 0 .1rem;height:100%;width: 50%} .boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;} .alltitle{ font-size:.18rem; color:#fff; line-height: .4rem; border-bottom:1px dotted rgba(255,255,255,.2);} .boxnav{height: calc(100% - .4rem);}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
