root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

2.1版本优化

develop
Jmysy 2020-04-16 18:00:35 +08:00
parent 39130fddcf
commit c6e295e684
10 changed files with 472 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
Pear Admin v 2.0/admin/css/pearAdmin.css
View File

@ -5,11 +5,9 @@
.pear-admin .layui-side{ .pear-admin .layui-side{
transition: all .3s; transition: all .3s;
} }
.pear-admin .layui-logo .title{ .pear-admin .layui-logo .title{
font-size: 20px; font-size: 20px;
} }
.layui-header .layui-nav-more{ .layui-header .layui-nav-more{
display: none!important; display: none!important;
} }
@ -34,17 +32,14 @@
width: calc(100% - 220px); width: calc(100% - 220px);
background-color: white; background-color: white;
} }
.pear-admin .layui-header .layui-nav-img{ .pear-admin .layui-header .layui-nav-img{
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.pear-admin .layui-layout-control{ .pear-admin .layui-layout-control{
left: 120px; left: 120px;
position: absolute; position: absolute;
} }
.pear-admin .layui-logo{ .pear-admin .layui-logo{
width: 220px; width: 220px;
height: 60px; height: 60px;
@ -52,44 +47,50 @@
background-color: #28333E; background-color: #28333E;
} }
.pear-admin .layui-logo img{ .pear-admin .layui-logo img{
width: 36px; width: 36px;
height: 36px; height: 36px;
} }
.pear-admin .layui-logo .title{
font-size: 21px;
font-weight: 550;
color: #5FB878;
position: relative;
top: 5px;
margin-left: 5px;
}
.pear-admin .layui-logo .logo{
display: none;
}
.pear-mini .layui-logo .title{
display: none;
}
.pear-mini .layui-logo .logo{
display: inline-block;
}
.pear-admin .layui-side { .pear-admin .layui-side {
top: 0px; top: 0px;
width: 220px; width: 220px;
box-shadow: 2px 0 6px rgba(0, 21, 41, .35); box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
z-index: 9999; z-index: 9999;
} }
.pear-admin .layui-side-scroll::-webkit-scrollbar{ .pear-admin .layui-side-scroll::-webkit-scrollbar{
width:0px; width:0px;
height:0px; height:0px;
} }
.pear-admin .layui-side-scroll{ .pear-admin .layui-side-scroll{
height: calc(100% - 60px); height: calc(100% - 102px);
background-color: #28333E; background-color: #28333E;
} }
.pear-admin .layui-header .layui-nav .layui-nav-item>a { .pear-admin .layui-header .layui-nav .layui-nav-item>a {
color: black; color: black;
font-size: 15px; font-size: 15px;
} }
.pear-admin .layui-body { .pear-admin .layui-body {
left: 220px; left: 220px;
bottom: 0px; bottom: 0px;
} }
.pear-admin .layui-layout-left { .pear-admin .layui-layout-left {
left: 0px; left: 0px;
@ -99,57 +100,95 @@
.pear-mini .layui-side{ .pear-mini .layui-side{
width: 60px; width: 60px;
} }
.pear-mini .layui-header{ .pear-mini .layui-header{
left: 60px; left: 60px;
width: calc(100% - 60px); width: calc(100% - 60px);
} }
.pear-mini .layui-body{ .pear-mini .layui-body{
left: 60px; left: 60px;
} }
.pear-mini .layui-logo{ .pear-mini .layui-logo{
width: 60px; width: 60px;
} }
.pear-mini .layui-nav-tree .layui-nav-item span{ .pear-mini .layui-nav-tree .layui-nav-item span{
display: none; display: none;
} }
.pear-mini .bottom-nav li{
width: 100%!important;
}
.pear-mini .layui-side-scroll{
height: calc(100% - 228px);
}
/** 快捷按键 */
.bottom-nav {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0 -2px 0 rgba(0,0,0,.3);
background-color: #28333E;
}
.bottom-nav li {
display: block;
float: left;
width: 25%;
padding: 6px;
box-sizing: border-box;
text-align: center;
}
.bottom-nav *{
color: white;
}
.bottom-nav li a {
cursor: pointer;
display: block;
width: 100%;
height: 30px;
line-height: 30px;
color: #666;
border-radius: 4px;
}
.bottom-nav li a:hover{
background-color: #5FB878;
}
/** 顶 部 菜 单 样 式 */ /** 顶 部 菜 单 样 式 */
.pear-admin .layui-header .layui-nav .layui-nav-bar { .pear-admin .layui-header .layui-nav .layui-nav-bar {
top: 0px !important; top: 0px !important;
height: 2px !important; height: 2px !important;
background-color: #5FB878; background-color: #5FB878;
} }
.pear-admin .layui-header .layui-nav .layui-this:after { .pear-admin .layui-header .layui-nav .layui-this:after {
display: none; display: none;
} }
/** 新增兼容 */ /** 新增兼容 */
@media screen and (max-width:768px) { @media screen and (max-width:768px) {
.pear-mini .bottom-nav{
display: none;
}
.pear-mini .layui-side-scroll{
height: calc(100% - 62px);
}
/** 隐 藏 布 局 样 式 */ /** 隐 藏 布 局 样 式 */
.pear-mini .layui-side{ .pear-mini .layui-side{
width: 0px; width: 0px;
} }
.pear-mini .layui-header{ .pear-mini .layui-header{
left: 0px; left: 0px;
width: 100%; width: 100%;
} }
.pear-mini .layui-body{ .pear-mini .layui-body{
left: 0px; left: 0px;
} }
.pear-mini .layui-logo{ .pear-mini .layui-logo{
width: 0px; width: 0px;
} }
.pear-admin .layui-body{ .pear-admin .layui-body{
left: 0px; left: 0px;
} }
@ -157,7 +196,6 @@
left: 0px; left: 0px;
width: 100%; width: 100%;
} }
.pear-admin .pear-cover{ .pear-admin .pear-cover{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -167,7 +205,6 @@
z-index: 1000; z-index: 1000;
opacity: 0; opacity: 0;
} }
.pear-mini .pear-cover{ .pear-mini .pear-cover{
display: none; display: none;
} }
@ -211,5 +248,3 @@
.layui-layer-dialog .layui-layer-content{ .layui-layer-dialog .layui-layer-content{
padding: 0px!important; padding: 0px!important;
} }

36
Pear Admin v 2.0/admin/css/pearNotice.css Normal file
View File

@ -0,0 +1,36 @@
.pear-notice .layui-this {
color: #5FB878 !important;
}
.pear-notice li {
border-right: 1px solid whitesmoke;
}
.pear-notice * {
color: dimgray !important;
}
.pear-notice span{
margin-left: 20px;
font-size: 13px;
}
.pear-notice img{
margin-left: 8px;
width: 33px!important;
height: 33px!important;
border-radius: 50px;
}
.pear-notice-item{
height: 45px!important;
line-height: 45px!important;
}
/** 滚动条样式 */
.pear-notice *::-webkit-scrollbar{width:4px;height:4px;}
.pear-notice *::-webkit-scrollbar-track{background: white;border-radius:2px;}
.pear-notice *::-webkit-scrollbar-thumb{background: #E6E6E6;border-radius:2px;}
.pear-notice *::-webkit-scrollbar-thumb:hover{background: #E6E6E6;}
.pear-notice *::-webkit-scrollbar-corner{background: #f6f6f6;}

68
Pear Admin v 2.0/admin/data/notice.json Normal file
View File

@ -0,0 +1,68 @@
[{
"id": 1,
"title": "私信",
"children": [{
"id": 11,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/success.png",
"title": "收到一条成功通知",
"time": "2019-02-15"
}]
},
{
"id": 2,
"title": "消息",
"children": [{
"id": 11,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
},
{
"id": 11,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
},
{
"id": 11,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
}]
},
{
"id": 3,
"title": "通知",
"children": [{
"id": 11,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/success.png",
"title": "收到一条紧急任务",
"time": "2019-02-15"
}]
}
]

BIN
Pear Admin v 2.0/admin/images/success.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

4
Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js
View File

@ -77,7 +77,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pear
$("body").on("click", ".refresh", function() { $("body").on("click", ".refresh", function() {
bodyTab.refresh(1000); bodyTab.refresh(500);
}) })
sideMenu.click(function(dom, data) { sideMenu.click(function(dom, data) {
@ -105,7 +105,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pear
}); });
$("body").on("click", ".refresh", function() { $("body").on("click", ".refresh", function() {
bodyFrame.refresh(1000); bodyFrame.refresh(500);
}) })
sideMenu.click(function(dom, data) { sideMenu.click(function(dom, data) {

3
Pear Admin v 2.0/component/layui/lay/extends/pearMenu.js
View File

@ -242,7 +242,6 @@ layui.define(['table', 'jquery', 'element'], function (exports) {
if(index === option.defaultMenu){ if(index === option.defaultMenu){
controlItem = '<li pear-id="'+item.id+'" class="layui-this layui-nav-item"><a href="#">'+item.title+'</a></li>'; controlItem = '<li pear-id="'+item.id+'" class="layui-this layui-nav-item"><a href="#">'+item.title+'</a></li>';
menuItem = '<ul pear-id="'+item.id+'" lay-filter="'+option.elem+'" class="layui-nav arrow layui-nav-tree pear-nav-tree">'; menuItem = '<ul pear-id="'+item.id+'" lay-filter="'+option.elem+'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
@ -369,7 +368,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) {
// 封 装 // 封 装
}else{ }else{
content += '<div class="toast"><i class="layui-icon layui-icon-more"></i></div>'; content += '<div class="toast"> 无 内 容 </div>';
/* 暂 无 数 据&nbsp;&nbsp;&nbsp;&nbsp; */ /* 暂 无 数 据&nbsp;&nbsp;&nbsp;&nbsp; */
} }

117
Pear Admin v 2.0/component/layui/lay/extends/pearNotice.js Normal file
View File

@ -0,0 +1,117 @@
layui.define(['table', 'jquery', 'element'], function (exports) {
"use strict";
var MOD_NAME = 'pearNotice',
$ = layui.jquery,
element = layui.element;
var pearNotice = function (opt) {
this.option = opt;
};
pearNotice.prototype.render = function (opt) {
//默认配置值
var option = {
elem:opt.elem,
url:opt.url,
height:opt.height,
data:opt.data,
click:opt.click
}
option.data = getData(option.url);
var notice = createHtml(option);
$("#"+option.elem).html(notice);
// 添加监听
$("*[notice-id]").click(function(){
var id = $(this).attr("notice-id");
var title = $(this).attr("notice-title");
option.click(id,title);
})
return new pearNotice(option);
}
/** 同 步 请 求 获 取 数 据 */
function getData(url){
$.ajaxSettings.async = false;
var data = null;
$.get(url, function(result) {
data = result;
});
$.ajaxSettings.async = true;
return data;
}
function createHtml(option){
var notice = '<li class="layui-nav-item" lay-unselect="">'+
'<a href="#" class="notice layui-icon layui-icon-notice"><span class="layui-badge-dot"></span></a>'+
'<div class="layui-nav-child layui-tab pear-notice" style="left: -200px;">';
var noticeTitle = '<ul class="layui-tab-title">';
var noticeContent = '<div class="layui-tab-content" style="height:'+option.height+';overflow-x: hidden;">'
var index = 0;
// 根据 data 便利数据
$.each(option.data, function(i, item) {
if(index==0){
noticeTitle += '<li class="layui-this">'+item.title+'</li>';
noticeContent += '<div class="layui-tab-item layui-show">';
}else{
noticeTitle += '<li>'+item.title+'</li>';
noticeContent += '<div class="layui-tab-item">';
}
$.each(item.children, function(i, note) {
noticeContent += '<div class="pear-notice-item" notice-title="'+note.title+'" notice-id="'+note.id+'">'+
'<img src="'+note.avatar+'">'+
'<span>'+note.title+'</span>'+
'<span>'+note.time+'</span>'+
'</div>';
})
noticeContent += '</div>';
index++;
})
noticeTitle += '</ul>';
noticeContent += '</div>';
notice += noticeTitle;
notice += noticeContent;
notice += '</div></li>';
return notice;
}
exports(MOD_NAME,new pearNotice());
})

1
Pear Admin v 2.0/component/layui/layui.js
View File

@ -54,6 +54,7 @@
pearAdmin:"extends/pearAdmin", pearAdmin:"extends/pearAdmin",
pearFrame:"extends/pearFrame", pearFrame:"extends/pearFrame",
pearSocial:"extends/pearSocial", pearSocial:"extends/pearSocial",
pearNotice:"extends/pearNotice",
echarts:"extends/echarts", echarts:"extends/echarts",
echartsTheme:"extends/echartsTheme", echartsTheme:"extends/echartsTheme",
treetable:"extends/treetable", treetable:"extends/treetable",

58
Pear Admin v 2.0/index.html
View File

@ -10,10 +10,9 @@
<link rel="stylesheet" href="admin/css/pearLoad.css" /> <link rel="stylesheet" href="admin/css/pearLoad.css" />
<link rel="stylesheet" href="admin/css/pearFrame.css" /> <link rel="stylesheet" href="admin/css/pearFrame.css" />
<link rel="stylesheet" href="admin/css/pearAdmin.css" /> <link rel="stylesheet" href="admin/css/pearAdmin.css" />
<link rel="stylesheet" href="admin/css/pearNotice.css" />
<link rel="stylesheet" href="admin/css/pearSocial.css" /> <link rel="stylesheet" href="admin/css/pearSocial.css" />
<style id="pearone-bg-color"> <style id="pearone-bg-color"></style>
/** 自 定 义 主 题 */
</style>
</head> </head>
<body class="layui-layout-body pear-admin"> <body class="layui-layout-body pear-admin">
<!-- 布局框架 --> <!-- 布局框架 -->
@ -26,20 +25,12 @@
<div id="control" class="layui-layout-control"></div> <div id="control" class="layui-layout-control"></div>
<ul class="layui-nav layui-layout-right"> <ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li> <li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li>
<li class="layui-nav-item layui-hide-xs"><a href="#" class="layui-icon layui-icon-website"></a></li> <li class="layui-nav-item layui-hide-xs"><a href="https://gitee.com/Jmysy/Pear-One-Layui" class="layui-icon layui-icon-website"></a></li>
<li class="layui-nav-item" lay-unselect=""> <li class="layui-nav-item" id="headerNotice"></li>
<a href="#" class="notice layui-icon layui-icon-notice"><span class="layui-badge-dot"></span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"> 收到一条消息 </a></dd>
<dd><a href="javascript:;"> 收到一条消息 </a></dd>
<dd><a href="javascript:;"> 收到一条消息 </a></dd>
<dd><a href="javascript:;"> 收到一条消息 </a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-unselect=""> <li class="layui-nav-item" lay-unselect="">
<a href="javascript:;"><img src="admin/images/avatar.jpg" class="layui-nav-img">就眠仪式</a> <a href="javascript:;"><img src="admin/images/avatar.jpg" class="layui-nav-img">就眠仪式</a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="javascript:;">个人信息</a></dd> <dd><a href="javascript:;" class="pearson">个人信息</a></dd>
<dd><a href="javascript:;">安全配置</a></dd> <dd><a href="javascript:;">安全配置</a></dd>
<dd><a href="javascript:;">打开百度</a></dd> <dd><a href="javascript:;">打开百度</a></dd>
<dd><a href="javascript:;">注销登陆</a></dd> <dd><a href="javascript:;">注销登陆</a></dd>
@ -51,10 +42,25 @@
<div class="layui-side layui-bg-black"> <div class="layui-side layui-bg-black">
<div class="layui-logo"> <div class="layui-logo">
<img class="logo" src="admin/images/logo.png" /> <img class="logo" src="admin/images/logo.png" />
<span class="title">Pear Admin</span>
</div> </div>
<div class="layui-side-scroll"> <div class="layui-side-scroll">
<div id="sideMenu"></div> <div id="sideMenu"></div>
</div> </div>
<ul class="bottom-nav">
<li class="head-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-notice"></i></a>
</li>
<li class="head-nav-item theme">
<a href="javascript:;"><i class="layui-icon layui-icon-theme"></i></a>
</li>
<li class="head-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-username"></i></a>
</li>
<li class="head-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-edit"></i></a>
</li>
</ul>
</div> </div>
<div class="layui-body"> <div class="layui-body">
<div id="content"></div> <div id="content"></div>
@ -71,13 +77,17 @@
<script src="component/layui/layui.js"></script> <script src="component/layui/layui.js"></script>
<script> <script>
layui.use(['pearAdmin','jquery','pearTab'],function(){ layui.use(['pearAdmin', 'jquery', 'pearTab', 'pearNotice'], function() {
var pearAdmin = layui.pearAdmin; var pearAdmin = layui.pearAdmin;
var $ = layui.jquery; var $ = layui.jquery;
var pearTab = layui.pearTab; var pearTab = layui.pearTab;
var pearNotice = layui.pearNotice;
/**
* 框架初始化配置
* */
var config = { var config = {
keepLoad:1000, // 主 页 加 载 过 度 时 长 可为 false keepLoad: false, // 主 页 加 载 过 度 时 长 可为 false
muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭 muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭 control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题 theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题
@ -88,9 +98,23 @@
} }
}; };
/**
* 框架初始化
* */
pearAdmin.render(config); pearAdmin.render(config);
})
/**
* 消息组件初始化
* */
pearNotice.render({
elem: 'headerNotice',
url: 'admin/data/notice.json',
height: '200px',
click: function(id, title) {
layer.msg("当前监听消息" + id + "消息标题:" + title);
}
})
})
</script> </script>
</body> </body>
</html> </html>

186
Pear Admin v 2.0/view/console/console.html
View File

@ -73,8 +73,8 @@
} }
.list .list-item{ .list .list-item{
height: 34px; height: 33px;
line-height: 34px; line-height: 33px;
color: gray; color: gray;
padding: 5px; padding: 5px;
padding-left: 15px; padding-left: 15px;
@ -120,10 +120,10 @@
<div class="layui-card-header">今日访问</div> <div class="layui-card-header">今日访问</div>
<div class="layui-card-body"> <div class="layui-card-body">
<div class="layui-row layui-col-space5"> <div class="layui-row layui-col-space5">
<div class="layui-col-xs9 layui-col-md8 top-panel-number"> <div class="layui-col-xs8 layui-col-md8 top-panel-number">
9,04,0 9,04,0
</div> </div>
<div class="layui-col-xs3 layui-col-md4 top-panel-tips"> <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
<i class="layui-icon layui-icon-app" style="color: #4099FF;"></i> <i class="layui-icon layui-icon-app" style="color: #4099FF;"></i>
</div> </div>
</div> </div>
@ -135,10 +135,10 @@
<div class="layui-card-header">提交次数</div> <div class="layui-card-header">提交次数</div>
<div class="layui-card-body"> <div class="layui-card-body">
<div class="layui-row layui-col-space5"> <div class="layui-row layui-col-space5">
<div class="layui-col-xs9 layui-col-md8 top-panel-number"> <div class="layui-col-xs8 layui-col-md8 top-panel-number">
6,34,4 6,34,4
</div> </div>
<div class="layui-col-xs3 layui-col-md4 top-panel-tips"> <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
<i class="layui-icon layui-icon-component" style="color: #DD4A68;"></i> <i class="layui-icon layui-icon-component" style="color: #DD4A68;"></i>
</div> </div>
</div> </div>
@ -150,10 +150,10 @@
<div class="layui-card-header">下载数量</div> <div class="layui-card-header">下载数量</div>
<div class="layui-card-body"> <div class="layui-card-body">
<div class="layui-row layui-col-space5"> <div class="layui-row layui-col-space5">
<div class="layui-col-xs9 layui-col-md8 top-panel-number"> <div class="layui-col-xs8 layui-col-md8 top-panel-number">
1,34,1 1,34,1
</div> </div>
<div class="layui-col-xs3 layui-col-md4 top-panel-tips"> <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
<i class="layui-icon layui-icon-carousel" style="color: #5FB878;"></i> <i class="layui-icon layui-icon-carousel" style="color: #5FB878;"></i>
</div> </div>
</div> </div>
@ -165,10 +165,10 @@
<div class="layui-card-header">流量统计</div> <div class="layui-card-header">流量统计</div>
<div class="layui-card-body"> <div class="layui-card-body">
<div class="layui-row layui-col-space5"> <div class="layui-row layui-col-space5">
<div class="layui-col-xs9 layui-col-md8 top-panel-number"> <div class="layui-col-xs8 layui-col-md8 top-panel-number">
7,04,6 7,04,6
</div> </div>
<div class="layui-col-xs3 layui-col-md4 top-panel-tips"> <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
<i class="layui-icon layui-icon-cart" style="color: #E6A23C;"></i> <i class="layui-icon layui-icon-cart" style="color: #E6A23C;"></i>
</div> </div>
</div> </div>
@ -187,74 +187,7 @@
<li>数据统计</li> <li>数据统计</li>
</ul> </ul>
<div class="layui-tab-content"> <div class="layui-tab-content">
<div class="layui-row layui-col-space10"> <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
<div class="layui-col-md4">
<div class="card">
<div class="header">
<img class="avatar" src="../../admin/images/avatar.jpg"></img><span class="title">PearOne</span>
</div>
<div class="body">
城镇中有那么多的酒馆，她却偏偏走进了我的酒馆
</div>
<div class="footer">10小时前</div>
</div>
</div>
<div class="layui-col-md4">
<div class="card">
<div class="header">
<img class="avatar" src="../../admin/images/avatar.jpg"></img><span class="title">Angular</span>
</div>
<div class="body">
希望是一个好东西，也许是最好的，好东西是不会消亡
</div>
<div class="footer">1小时前</div>
</div>
</div>
<div class="layui-col-md4">
<div class="card">
<div class="header">
<img class="avatar" src="../../admin/images/avatar.jpg"></img><span class="title">Vue</span>
</div>
<div class="body">
生命就像一盒巧克力，结果往往出人意料
</div>
<div class="footer">2小时前</div>
</div>
</div>
<div class="layui-col-md4">
<div class="card">
<div class="header">
<img class="avatar" src="../../admin/images/avatar.jpg"></img><span class="title">BootStrap</span>
</div>
<div class="body">
一切都在不可避免的走向庸俗
</div>
<div class="footer">3小时前</div>
</div>
</div>
<div class="layui-col-md4">
<div class="card">
<div class="header">
<img class="avatar" src="../../admin/images/avatar.jpg"></img><span class="title">Ant Design</span>
</div>
<div class="body">
你要是愿意我就永远爱你，你要是不愿意我就永远相思
</div>
<div class="footer">10小时前</div>
</div>
</div>
<div class="layui-col-md4">
<div class="card">
<div class="header">
<img class="avatar" src="../../admin/images/avatar.jpg"></img><span class="title">Jmys</span>
</div>
<div class="body">
在所谓'人世间'摸爬滚打至今，一切都会过去
</div>
<div class="footer">24小时前</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -280,6 +213,8 @@
<div class="layui-card-header">最近更新</div> <div class="layui-card-header">最近更新</div>
<div class="layui-card-body"> <div class="layui-card-body">
<ul class="list"> <ul class="list">
<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2019-12-15 11:28</span></li>
<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2019-12-15 11:28</span></li>
<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2019-12-15 11:28</span></li> <li class="list-item"><span class="title">系统布局优化</span><span class="footer">2019-12-15 11:28</span></li>
<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2019-12-15 11:28</span></li> <li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2019-12-15 11:28</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-9 14:58</span></li>
@ -358,8 +293,99 @@
layui.use(['layer', 'echarts','element'], function () { layui.use(['layer', 'echarts','element'], function () {
var $ = layui.jquery, var $ = layui.jquery,
layer = layui.layer, layer = layui.layer,
echarts = layui.echarts, element = layui.element,
element = layui.element; echarts = layui.echarts;
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
var optionRecords = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
areaStyle: {},
data: [220, 182, 200, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [900, 600, 450, 599, 650, 750, 900]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
data: [600, 454, 545, 699, 899, 1000, 1100]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
echartsRecords.setOption(optionRecords);
window.onresize = function () {
echartsRecords.resize();
}
}); });
</script> </script>
</body> </body>