<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-default navbar-fixed-top ix-header" role="navigation"> <div class="header-line clearfix"> <div class="container"> <div class="pull-left"> <img alt="哗啦啦商户中心" src="" style="margin-top:14px;"/> </div> <h4 class="ix-group-brand pull-left" style="margin-left:1rem;">{{groupName}}</h3> <div class="pull-right" style="margin-top:14px;"> <span class="hello">Hi</span><span class="user">{{name}},</span> <a class="">退出</a> </div> </div> </div> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav nav-justified nav-pills navbar-right"> <li><a href="#">店铺管理</a></li> <li><a href="#about">结算</a></li> <li><a href="#contact">订单</a></li> <li><a href="#contact">业务设置</a></li> <li class="active"><a href="#contact">会员管理</a></li> <li><a href="#contact">帐号管理</a></li> </ul> </div> </div> </div> <div class="ix-body"> <div class="container"> <div class="nav-list"> <div class="navbar-collapse collapse in" id="order_navbar"> <ul class="nav nav-justified nav-pills"> <li class=" "><a href="../proto/#order/query/b20141119/e20141119/c/n/s/m/o/i/a" data-page-type="orderQuery">会员查询</a></li> <li class="active "><a href="../proto/#order/query/day/b20141119/e20141119/c/n/s" data-page-type="orderQueryDay">会员概览</a></li> <li class=" "><a href="../proto/#order/query/during/b20141119/e20141119/c/n/s" data-page-type="orderQueryDuring">报表查询</a></li> <li class=" "><a href="../proto/#order/dishes/hot/b20141119/e20141119/c/n/s" data-page-type="orderDishesHot">会员系统参数</a></li> <li class=" "><a href="../proto/#order/customer/b20141119/e20141119/c/n/m/u" data-page-type="orderQueryCustomer">店铺参数</a></li> <li class=" "><a href="../proto/#order/customer/b20141119/e20141119/c/n/m/u" data-page-type="orderQueryCustomer">充值套餐</a></li> </ul> </div> </div> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 会员统计报表 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th rowspan="2">会员等级</th> <th rowspan="2">会员数</th> <th rowspan="2">所占比率</th> <th colspan="3">性别比率</th> <th colspan="2">来源比率</th> <th rowspan="2">储值余额</th> <th rowspan="2">积分余额</th> <th rowspan="2">客单价</th> </tr> <tr> <th>男</th> <th>女</th> <th>未知</th> <th>线上</th> <th>店内</th> </tr> </thead> <tbody> <tr> <td><p title="VIP1会员，全场打9折，享受会员价，每消费100元返积分10分，消费累计10000元升级为VIP1会员">VIP1</p></td> <td>25</td> <td>7%</td> <td>20%</td> <td>10%</td> <td>70%</td> <td>60%</td> <td>40%</td> <td>100</td> <td>100</td> <td>12</td> </tr> <tr> <td>VIP2</td> <td>25</td> <td>7%</td> <td>20%</td> <td>10%</td> <td>70%</td> <td>60%</td> <td>40%</td> <td>100</td> <td>100</td> <td>12</td> </tr> <tr> <td>VIP3</td> <td>25</td> <td>7%</td> <td>20%</td> <td>10%</td> <td>70%</td> <td>60%</td> <td>40%</td> <td>100</td> <td>100</td> <td>12</td> </tr> <tr> <td>VIP4</td> <td>25</td> <td>7%</td> <td>20%</td> <td>10%</td> <td>70%</td> <td>60%</td> <td>40%</td> <td>100</td> <td>100</td> <td>12</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="panel panel-default hidden"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> 会员等级报表 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>等级名称</th> <th>等级说明</th> <th>是否享受会员价</th> <th>折扣率</th> <th>折扣范围</th> <th>折扣描述</th> <th>积分系数</th> <th>等级所需累计消费金额</th> <th>是否启用</th> <th>最后修改时间</th> </tr> </thead> <tbody> <tr> <td>VIP1</td> <td></td> <td><span class="switcher glyphicon glyphicon-ok" ></span></td> <td>9折</td> <td>全部打折</td> <td></td> <td>0.1</td> <td>10</td> <td><span class="switcher glyphicon glyphicon-ok" ></td> <td>2014-01-01 12:38:50</td> </tr> <tr> <td>VIP2</td> <td></td> <td><span class="switcher glyphicon glyphicon-ok" ></span></td> <td>9折</td> <td>全部打折</td> <td></td> <td>0.1</td> <td>10</td> <td><span class="switcher glyphicon glyphicon-ok" ></td> <td>2014-01-01 12:38:50</td> </tr> <tr> <td>VIP3</td> <td></td> <td><span class="switcher glyphicon glyphicon-ok" ></span></td> <td>9折</td> <td>全部打折</td> <td></td> <td>0.1</td> <td>10</td> <td><span class="switcher glyphicon glyphicon-ok" ></td> <td>2014-01-01 12:38:50</td> </tr> <tr> <td>VIP4</td> <td></td> <td><span class="switcher glyphicon glyphicon-ok" ></span></td> <td>9折</td> <td>全部打折</td> <td></td> <td>0.1</td> <td>10</td> <td><span class="switcher glyphicon glyphicon-ok" ></td> <td>2014-01-01 12:38:50</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> 会员统计图 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <h6 class="text-center">会员等级占比图</h6> <div class="chart-canvas"></div> </div> <div class="col-md-6"> <h6 class="text-center">会员性别占比图</h6> <div class="chart-canvas"></div> </div> <div class="col-md-12"> <h6 class="text-center">会员来源占比图</h6> <div class="chart-canvas"></div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="ix-footer navbar-fixed-bottom"> <div class="container"> <!--<p class="links"> <a href="#">关于哗啦啦商户中心</a> <a href="#">联系我们</a> </p> <p class="copyright"> <img alt="Gozap" src=""/> <span class=""> 旗下网站 © 2014 hualala.com 京IPC备14019284号-3</span> </p>--> </div> </div>

.ix-body {margin-top:120px;} .chart-canvas {border : 1px solid #eee; width : 100%; height : 400px;} .switcher {color:green;}

$(document).ready(function () { $('table td').tooltip({ selector : '[title]' }); });