199 lines
6.1 KiB
HTML
199 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>首页三</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
|
<link rel="stylesheet" href="../../assets/console.css" />
|
|
</head>
|
|
<body class="pear-container">
|
|
<div>
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-xs6 layui-col-md3">
|
|
<div class="layui-card top-panel">
|
|
<div class="layui-card-header">今日访问</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space5">
|
|
<div class="layui-col-xs8 layui-col-md8 top-panel-number">
|
|
9,04,0
|
|
</div>
|
|
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
|
<i class="layui-icon layui-icon-app" style="color: #4099FF;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs6 layui-col-md3">
|
|
<div class="layui-card top-panel">
|
|
<div class="layui-card-header">提交次数</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space5">
|
|
<div class="layui-col-xs8 layui-col-md8 top-panel-number">
|
|
6,34,4
|
|
</div>
|
|
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
|
<i class="layui-icon layui-icon-component" style="color: #DD4A68;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs6 layui-col-md3">
|
|
<div class="layui-card top-panel">
|
|
<div class="layui-card-header">下载数量</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space5">
|
|
<div class="layui-col-xs8 layui-col-md8 top-panel-number">
|
|
1,34,1
|
|
</div>
|
|
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
|
<i class="layui-icon layui-icon-carousel" style="color: #5FB878;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs6 layui-col-md3">
|
|
<div class="layui-card top-panel">
|
|
<div class="layui-card-header">流量统计</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space5">
|
|
<div class="layui-col-xs8 layui-col-md8 top-panel-number">
|
|
7,04,6
|
|
</div>
|
|
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
|
<i class="layui-icon layui-icon-cart" style="color: #E6A23C;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md9">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
|
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">最近更新</div>
|
|
<div class="layui-card-body">
|
|
<ul class="list">
|
|
<li class="list-item"><span class="title">优化代码格式</span><span class="footer">2020-06-04 11:28</span></li>
|
|
<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2020-06-01 04:23</span></li>
|
|
<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2020-05-22 21:38</span></li>
|
|
<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2020-05-15 14:26</span></li>
|
|
<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2020-05-13 16:32</span></li>
|
|
<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2019-12-9 14:58</span></li>
|
|
<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2019-12-7 9:06</span></li>
|
|
<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2019-12-1 10:26</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--</div>-->
|
|
<script src="../../component/layui/layui.js"></script>
|
|
<script src="../../component/pear/pear.js"></script>
|
|
<script>
|
|
layui.use(['layer', 'echarts', 'element'], function() {
|
|
var $ = layui.jquery,
|
|
layer = layui.layer,
|
|
element = layui.element,
|
|
echarts = layui.echarts;
|
|
|
|
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#999"
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
splitNumber: 4,
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#DDD'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#333"
|
|
},
|
|
},
|
|
nameTextStyle: {
|
|
color: "#999"
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '课时',
|
|
type: 'line',
|
|
data: [23, 60, 20, 36, 23, 85],
|
|
lineStyle: {
|
|
normal: {
|
|
width: 8,
|
|
color: {
|
|
type: 'linear',
|
|
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#A9F387' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#48D8BF' // 100% 处的颜色
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
|
},
|
|
shadowColor: 'rgba(72,216,191, 0.3)',
|
|
shadowBlur: 10,
|
|
shadowOffsetY: 20
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff',
|
|
borderWidth: 10,
|
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
|
shadowBlur: 100,*/
|
|
borderColor: "#A9F387"
|
|
}
|
|
},
|
|
smooth: true
|
|
}]
|
|
};
|
|
echartsRecords.setOption(option);
|
|
|
|
window.onresize = function() {
|
|
echartsRecords.resize();
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|