306 lines
11 KiB
HTML
306 lines
11 KiB
HTML
{extend name="public/base"/}
|
|
{block name="style"}
|
|
<style>
|
|
.tabli {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tabli-li {
|
|
width: 49.5%;
|
|
height: 149px;
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tabli-li-tit {
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.tabli-li-tit p {
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.tabli-li-z {
|
|
width: 100%;
|
|
height: 100px;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.tabli-li-z .first {
|
|
width: 100%;
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
flex-wrap: wrap;
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
.tabli-li-x {
|
|
width: 100%;
|
|
height: 150px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.tabli-li-x-left {
|
|
margin-top: 20px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.tabli-li-x-rt {
|
|
margin-top: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.from-so {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.from-so .form-control {
|
|
width: 200px;
|
|
float: left;
|
|
margin-right:20px;
|
|
}
|
|
|
|
.sobin {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.tables-s th {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tables-xs td {
|
|
text-align: center;
|
|
}
|
|
|
|
.table tbody>tr>td {
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
border-top: 1px solid #e7ebee;
|
|
padding: 12px 8px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.table tbody>tr>td:first-child {
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
border-top: 1px solid #e7ebee;
|
|
padding: 12px 8px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.demo {
|
|
width:100%;
|
|
}
|
|
|
|
.nav-tabs {
|
|
font-size: 18px;
|
|
color: #000;
|
|
}
|
|
|
|
.nav-tabs .active {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-tabs>li>a {
|
|
font-size: 13.5px;
|
|
color: #000;
|
|
}
|
|
|
|
.nav-tabs>li.active>a {
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
.colo{
|
|
color:#C90D0D;
|
|
}
|
|
</style>
|
|
{/block}
|
|
{block name="body"}
|
|
<div class="main-box no-header clearfix">
|
|
<div class="main-box-body clearfix">
|
|
<div class="tabli">
|
|
<div class="tabli-li">
|
|
<div class="tabli-li-tit">
|
|
<p>今天</p>
|
|
</div>
|
|
<div class="tabli-li-z">
|
|
<div class="first">充值<br>￥{if $day==''}0{else}{$day}{/if}</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabli-li">
|
|
<div class="tabli-li-tit">
|
|
<p>昨日</p>
|
|
</div>
|
|
<div class="tabli-li-z">
|
|
<div class="first">充值<br>￥{if $yesterday==''}0{else}{$yesterday}{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabli-li">
|
|
<div class="tabli-li-tit">
|
|
<p>本月</p>
|
|
</div>
|
|
<div class="tabli-li-z">
|
|
<div class="first">充值<br>￥{if $month==''}0{else}{$month}{/if}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabli-li">
|
|
<div class="tabli-li-tit">
|
|
<p>上月</p>
|
|
</div>
|
|
<div class="tabli-li-z">
|
|
<div class="first">充值<br>￥{if $lastmonth==''}0{else}{$lastmonth}{/if}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabli-li">
|
|
<div class="tabli-li-tit">
|
|
<p>累计</p>
|
|
</div>
|
|
<div class="tabli-li-z">
|
|
<div class="first">充值<br>￥{if $money==''}0{else}{$money}{/if}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-offset">
|
|
<div class="tab" role="tabpanel">
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="active"><a href="#Section1" aria-controls="home"
|
|
role="tab" data-toggle="tab">近6个月</a></li>
|
|
<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab"
|
|
data-toggle="tab">渠道汇总</a></li>
|
|
<!--<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab"-->
|
|
<!-- data-toggle="tab">111</a></li>-->
|
|
</ul>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content tabs">
|
|
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
|
|
<div class="panel panel-default col-sm-12" id="order-daily-stats-panel">
|
|
<table class="table table-bordered table-striped"
|
|
data-bind="visible: !loading()">
|
|
<thead>
|
|
<tr>
|
|
<th>日期</th>
|
|
<th class="text-right">充值金额</th>
|
|
<th class="text-right">充值人数</th>
|
|
<th class="text-right">充值笔数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: stats">
|
|
{volist name="info" id="vo" key="k"}
|
|
<tr>
|
|
<td><span data-bind="date: date">{$key}</span></td>
|
|
<td class="text-right">
|
|
<b>¥ <span>{$vo.money}</span></b>
|
|
</td>
|
|
<td class="text-right">
|
|
<span>{$vo.userpaynum}</span></b>
|
|
</td>
|
|
<td class="text-right">
|
|
<span>{$vo.paybi}</span></b>
|
|
</td>
|
|
</tr>
|
|
{/volist}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane fade" id="Section2">
|
|
<div class="panel panel-default col-sm-12" id="order-daily-stats-panel">
|
|
<table class="table table-bordered table-striped"
|
|
data-bind="visible: !loading()">
|
|
<thead>
|
|
<tr>
|
|
<th>落地页</th>
|
|
<th class="text-right">充值金额</th>
|
|
<th class="text-right">充值人数</th>
|
|
<th class="text-right">充值笔数</th>
|
|
<th class="text-right">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: stats">
|
|
{volist name="trinfo" id="vo" key="k"}
|
|
<tr>
|
|
<td><span data-bind="date: date">{$vo.tid}<br>{$vo.text}</span></td>
|
|
<td class="text-right">
|
|
<b>¥ <span>{if $vo.money==''}0{else}{$vo.money}{/if}</span></b>
|
|
</td>
|
|
<td class="text-right">
|
|
<span>{$vo.userpaynum}</span></b>
|
|
</td>
|
|
<td class="text-right">
|
|
<span>{$vo.paybi}</span></b>
|
|
</td>
|
|
<td class="text-right">
|
|
<a href="/admin/transfer/indexinfo?id={$vo.tid}" class="btn btn-info">详情</a>
|
|
</td>
|
|
</tr>
|
|
{/volist}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
{block name="script"}
|
|
<script src="/public/js/colResizable-1.6.min.js"></script>
|
|
<!-- datepicker statr -->
|
|
<link href="/public/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
|
|
<script src="/public/plugs/datepicker/js/foundation-datepicker.js"></script>
|
|
<script src="/public/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script>
|
|
<script>
|
|
$(function () {
|
|
//此处实现表格可拖放属性
|
|
$("#table").colResizable({
|
|
liveDrag: true,//实现实时拖动，可看见拖动轨迹
|
|
draggingClass: "dragging", //防止拖动出险虚标线
|
|
});
|
|
});
|
|
$('#startdata').fdatepicker({
|
|
clearBtn: true,
|
|
todayBtn: true,
|
|
format: 'yyyy-mm-dd h:i',
|
|
pickTime: true
|
|
});
|
|
$('#enddata').fdatepicker({
|
|
clearBtn: true,
|
|
todayBtn: true,
|
|
format: 'yyyy-mm-dd h:i',
|
|
pickTime: true
|
|
});
|
|
|
|
</script>
|
|
{/block} |