主题:智慧门店可视化大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<!--地域渠道条件选择--> <div id="select-group-channel-tablebar" class="select-group-channel-tablebar"> <divclass="row"> <div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">地域选择：</div> <div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;"> <input type="text" id="selectCity" name="cityCode" class="form-control" style="width:150px;"/> </div> <div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">区域选择：</div> <div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;"> <input type="text" id="selectCounty" name="countyCode" class="form-control" style="width:150px;"/> </div> </div> <divclass="row"> <div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">渠道名称：</div> <div class="col-sm-6 col-md-6 pd" style="height:40px;margin-top:15px;"> <input type="text" id="channel_name" name="channelName" class="form-control" style="width:330px;" placeHolder=""/> </div> <div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;text-align:center;"> <button type="button" class="btn btn-info btn-sm" style="height:35px;width:70px;margin-left:10px;background:#181C41;" onclick="doQueryChannelName();">查询</button> <button type="button" class="btn btn-info btn-sm" style="height:35px;width:70px;background:#282C55;" onclick="doRestChannelName();">重置</button> </div>
部分CSS代码
/* scrolltext */ .scrolltext{padding-top: 35px;width:90%;height:100%;overflow:hidden;margin:20px auto 0 auto;} .scrolltext ol li{cursor:pointer;padding-left:7px;width:570px;height:25px;font-size:13px;line-height:25px;border-bottom:2px solid #fff;} .scrolltext ol li a{color:#6f746e;display:inline;width:570px;white-space:nowrap;text-overflow:ellipsis;text-overflow:ellipsis;overflow: hidden;} .scrolltext ol li a:hover{color:#1990FF;text-decoration:none;} .scrolltext .part{width:100%;padding-top:20px;} .scrolltext .part span{margin-left:26px;cursor:pointer;} /*自定义横向tab切效果*/ .Shortcut{height:2.8em;} .custom-nav-tabs{height:40px;line-height: 40px;vertical-align: top;text-align:left;padding-left: 2em;font-family: MicrosoftYaHei;background: #FFFFFF;border: 1px solid #E8E8E8;box-shadow: 1px 1px 10px 0 rgba(235,235,235,0.50);border-top-left-radius: 5px;border-top-right-radius: 5px;} .custom-nav-tabs li{float:left;margin-right:10px;height:38px;line-height:38px;vertical-align: middle;padding:0px 5px 0px 5px;} .custom-nav-tabs li.active{border-bottom: 3px solid #1990FF;} .custom-nav-tabs li:hover{border-bottom: 3px solid #1990FF;} .custom-nav-tabs li a{height:30px;float:left;color:#666666;font-size:13px;font-weight:bold;text-decoration:none;} .shortcutEntry{width:50px;height: 50px;background: #29CB97;border-radius: 5px;margin: 0 auto;margin-bottom:6px;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
