{extend name="mould:base" /}
{block name="title"}后台首页{/block}
{block name="css"}
<style type="text/css">
	.tj{}
	.tj > div{text-align: center;}
	.tj .tj-box{background: #3797b4; color: #fff; padding: 0 2px; padding-left: 90px; text-align: left; margin-bottom: 5px; position: relative; }
	.tj .tj-box .tj-icon{ display: inline-block; position: absolute; left: 0; top:0; width: 90px; height: 80px; line-height: 90px; text-align: center;  }
	.tj .tj-box .tj-icon .layui-icon{ font-size: 48px; transition: all .4s ease; -webkit-transition: all .4s ease; }
	.tj .tj-box:hover .tj-icon .layui-icon{ color:#000;}
	.tj .tj-box .tj-content{}
	.tj .tj-box .tj-content h4{ padding: 10px 20px 10px 5px; padding-bottom: 5px; border-bottom: 1px solid #fff; font-size: 30px; text-shadow: 3px 3px 3px rgba(0,0,0,0.3); }
	.tj .tj-box .tj-content .box-body{ padding: 5px 20px 10px 5px }

	.echarts-box{ width: 100%; height: 400px; }

	@media screen and (max-width: 575.99px) {
		.echarts-box{ height: 300px; }
	}
</style>
{/block}
{block name="content"}
    <div class="layui-row layui-col-space10 tj">
      <div class="layui-col-md4">
        <div class="tj-box" style="background: #FFB400">
        	<div class="tj-icon">
        		<i class="layui-icon">&#xe613;</i>
        	</div>
        	<div class="tj-content">
        		<h4>{$userCount}</h4>
        		<div class="box-body">会员</div>
        	</div>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="tj-box" style="background: #1ABC9C">
        	<div class="tj-icon">
        		<i class="layui-icon">&#xe629;</i>
        	</div>
        	<div class="tj-content">
        		<h4>{$articleCount}</h4>
        		<div class="box-body">文档</div>
        	</div>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="tj-box">
        	<div class="tj-icon">
        		<i class="layui-icon">&#xe6b2;</i>
        	</div>
        	<div class="tj-content">
        		<h4>{$actionCount}</h4>
        		<div class="box-body">行为记录</div>
        	</div>
        </div>
      </div>
    </div>
	<fieldset class="layui-elem-field" style="border: 1px solid #3c8dbc">
		<legend>常用模块</legend>
		<div class="layui-field-box">这是什么</div>
	</fieldset>
	<fieldset class="layui-elem-field">
		<legend>访问统计</legend>
		<div class="echarts-box" id="weblogEcharts"></div>
	</fieldset>
	<fieldset class="layui-elem-field">
		<legend>文档统计</legend>
		<div class="echarts-box" id="documentEcharts"></div>
	</fieldset>
	<fieldset class="layui-elem-field">
		<legend>行为统计</legend>
		<div class="echarts-box" id="actionEcharts"></div>
	</fieldset>
	<fieldset class="layui-elem-field">
		<legend>开发团队</legend>
		<div class="layui-field-box">
			<table class="layui-table" lay-size="sm">
		        <tr>
		            <td width="20%" align="right">负责人</td>
		            <td>SpringYang</td>
		        </tr>
		        <tr>
		            <td width="20%" align="right">Email</td>
		            <td>ceroot@163.com</td>
		        </tr>
		        <tr>
		            <td width="20%" align="right">QQ</td>
		            <td>525566309 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=525566309&site=qq&menu=yes"><img border="0" src="http://pub.idqqimg.com/wpa/images/counseling_style_51.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
		            </td>
		        </tr>
		        <tr>
		            <td width="20%" align="right">版权所有</td>
		            <td><a href="http://www.benweng.com" target="_blank" title="笨翁">http://www.benweng.com</a></td>
		        </tr>
		    </table>
		</div>
	</fieldset>
    <fieldset class="layui-elem-field">
		<legend>系统信息</legend>
		<div class="layui-field-box">
		    <table class="layui-table" lay-size="sm">
		    	{volist name="info" id="value" mod="2"}
			        <tr>
			            <td width="20%" align="right">{$key}</td>
			            <td>{$value|raw}</td>
			        </tr>
				{/volist}
				<tr>
		            <td align="right">扩展列表</td>
		            <td colspan="3">{$extensionsList}</td>
		        </tr>
		    </table>
		</div>
	</fieldset>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIBS__/echarts/4.0/echarts.min.js"></script>
<script type="text/javascript">
	$(function(){
		var weblogChart = echarts.init(document.getElementById('weblogEcharts'));
		var elementChart = echarts.init(document.getElementById('documentEcharts'));
		var actionChart = echarts.init(document.getElementById('actionEcharts'));

		weblogChart.setOption(echartsFun({$weblogEcharts|raw},'访问量'));
		elementChart.setOption(echartsFun({$documentEcharts|raw},'文档数量'));
		actionChart.setOption(echartsFun({$actionEcharts|raw},'行为数量'));

		setTimeout(function (){
		    window.onresize = function () {
				weblogChart.resize();
				elementChart.resize();
				actionChart.resize();
		    }
		},200)

	});

	function echartsFun(echartsData,textTitle){
		var xData = echartsData.xData;
		var yData = echartsData.yData;

		var	echartsOption = {
				title:{
					// text:'访问统计'
				},
				tooltip : {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            label: {
			                backgroundColor: '#6a7985'
			            }
			        }
			    },
			    xAxis: {
			        type: 'category',
			        // data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
			        data:xData
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        // data: [820, 932, 901, 934, 1290, 900, 500],
			        name:textTitle,
			        data: yData,
			        type: 'line',
			        smooth: true,
			        itemStyle:{
			        	normal:{
			        		color:'#37A2DA'
			        	}
			        },
			        lineStyle:{
			            normal:{
			                width:1,  //连线粗细
			                color: '#37A2DA'  //连线颜色
			            }
			        },
			        label:{
			        	normal:{
			        		show:true,
			        		position:'top'
			        	}
			        }
			    }]
			};
		return echartsOption;
	}
</script>
{/block}