主题:智慧商场
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
整体效果
部分js代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>index</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/js.js"></script> <script src="js/swiper.min.js"></script> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="head clearfix"> <div class="home"><a href="#"><img src="images/Home.png" width="28"> <i> 首页</i></a></div> <div class="menu menu1 pulll_left"> <ul> <li><a href="#">功能菜单一 </a></li> <li><a href="#">功能菜单二</a></li> </ul> </div> <h1 class="pulll_left">某某科技有限公司-生产数据中心</h1> <div class="menu menu2 pulll_left"> <ul> <li><a href="#">功能菜单一 </a></li> <li><a href="#">功能菜单二</a></li> </ul> </div> <div class="time" id="showTime">2018/6/12 17:00:12</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();//获取秒 document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+""; t = setTimeout(time,1000); //设定定时器，循环运行
部分css代码
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)} .table1 th{ border-bottom: 1px solid #407abd; font-size: 14px; text-align: center; padding: 6px 0; color: rgba(255,255,255,.8)} .table1 td{ border-bottom: 1px dotted#407abd;font-size: 12px; padding:6px 0;text-align: center; color: rgba(255,255,255,.6)} .table1 tr:last-child td{border: none;} .mapc{background: url(../images/bg3.png) no-repeat center center; background-size: 100% 100%} .map{position: relative; height: 100%; padding-top:100px;} .map img{} .mapnav{position: absolute; z-index: 100; left: 15px; top: 10px;} .mapnav div{ background: url(../images/bg1.png) no-repeat; background-size:100% auto; width: 150px;text-align: center; padding: 15px 0; line-height: 120%;} .mapnav div span{font-size: 14px; opacity: .6} .mapnav div p{font-size: 30px; color: #5ee6ff; text-shadow: 0 0 5px #5ee6ff; font-weight: bold; padding-top: 5px;;font-family: electronicFont;} .mapnav li{float: left; margin-right: 6px;} .swiper-container{width:100%;height:300px;margin-left:auto;margin-right:auto} .swiper-slide{background-size:cover;background-position:center} .gallery-top{height:80%;width:100%} .gallery-thumbs{height:20%;box-sizing:border-box;padding: 1px 0;} .gallery-thumbs .swiper-slide{height:100%;border: 2px solid #02366c} .gallery-thumbs .swiper-slide-thumb-active{ border: 2px solid #fff}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
