peihaoyu/TaoLer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2.2.7

Browse Source
This commit is contained in:
taoser 2023-05-05 12:00:22 +08:00
parent 2047a80ceb
commit 149d89e9db
74 changed files with 13045 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/admin/controller/addon/Addons.php
View File

@ -390,6 +390,9 @@ class Addons extends AdminController
public function upgrade()
{
$data = Request::only(['name','version','uid','token']);
// 接口
$response = HttpHelper::withHost()->post('/v1/getaddons',$data)->toJson();
if($response->code < 0) return json($response);
// 获取配置信息
$config = get_addons_config($data['name']);
// 卸载插件
@ -406,7 +409,9 @@ class Addons extends AdminController
try {
// 升级安装，第二个type参数false为升级，true安装
$res = $this->install($data,false);
$installRes = $this->install($data,false);
$res = $installRes->getData();
if($res['code'] == -1) return json(['code' => -1, 'msg' => $res['msg']]);
// 升级sql
$sqlUpdateFile = root_path().'addons/'.$data['name'].'/update.sql';
if(file_exists($sqlUpdateFile)) {

2
app/admin/controller/user/User.php
View File

@ -37,7 +37,7 @@ class User extends AdminController
if(Request::isAjax()){
$datas = Request::only(['id','name','email','sex','status']);
$map = array_filter($datas,[$this,'filtrArr']);
halt($map);
$user = Db::name('user')->where(['delete_time'=>0])->where($map)->order('id desc')->paginate([
'list_rows' => input('limit'),
'page' => input('page')

8
app/common/model/Comment.php
View File

@ -35,8 +35,12 @@ class Comment extends Model
//获取评论
public function getComment($id, $page)
{
$comments = $this::with(['user'])->where(['article_id'=>(int)$id,'status'=>1])->order(['cai'=>'asc','create_time'=>'asc'])->paginate(['list_rows'=>10, 'page'=>$page]);
return $comments;
return $this::with(['user'])
->where(['article_id'=>(int)$id,'status'=>1])
->order(['cai'=>'asc','create_time'=>'asc'])
->paginate(['list_rows'=>10, 'page'=>$page])
->toArray();
}
//回帖榜

3
app/index/controller/Article.php
View File

@ -137,6 +137,7 @@ class Article extends BaseController
//评论
$comments = $this->getComments($id, $page);
//halt($comments);
//最新评论时间
$lrDate_time = Db::name('comment')->where('article_id', $id)->max('update_time',false) ?? time();
// 热议文章
@ -149,7 +150,7 @@ class Article extends BaseController
$ad_comm = $ad->getSliderList(7);
//push
$push_js = Db::name('push_jscode')->where(['delete_time'=>0,'type'=>1])->cache(true)->select();
View::assign([
'article' => $artDetail,
'pv' => $pv,

1
app/index/route/route.php
View File

@ -68,6 +68,7 @@ Route::get('arttag','tag/getArticleTag')->name('get_art_tag');
Route::group(function () use($detail_as, $cate_as){
// 动态路径路由会影响下面的路由，所以动态路由放下面
Route::get($detail_as . ':id$', 'article/detail')->name('article_detail');
Route::get($detail_as . '<id>/<page>$', 'article/detail')->name('article_comment');
Route::get($cate_as . '<ename>$','article/cate')->name('cate');
Route::get($cate_as . '<ename>/<type>$', 'article/cate')->name('cate_type');
Route::get($cate_as . '<ename>/<type>/<page>$', 'article/cate')->name('cate_page');

2
config/taoler.php
View File

@ -16,7 +16,7 @@ return [
// 应用名,此项不可更改
'appname' => 'TaoLer',
// 版本配置
'version' => '2.2.5',
'version' => '2.2.7',
// 加盐
'salt' => 'taoler',
// 数据库备份目录

1
public/view/common/blog/js/theme.js Normal file
View File

File diff suppressed because one or more lines are too long

451
public/view/console/console1.html Normal file
View File

@ -0,0 +1,451 @@
<!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="../../admin/css/other/console1.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" style="color: #28333E;" id="value1">
0
</div>
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="200" height="200" t="1591462258798"
p-id="942" version="1.1">
<path fill="#fcc66f" d="M 262.7 835 c -15.3 0 -28.1 -11.4 -29.8 -26.6 L 174.1 291 c -0.6 -5.1 1 -10.2 4.5 -14 s 8.3 -6 13.4 -6 h 640 c 5.1 0 10 2.2 13.4 6 s 5 8.9 4.5 14 l -58.8 517.4 c -1.7 15.2 -14.5 26.6 -29.8 26.6 H 262.7 Z"
p-id="943" />
<path fill="#ffd79c" d="M 802 289 l -58.8 517.4 c -0.7 6.1 -5.8 10.6 -11.9 10.6 h 30 c 6.1 0 11.2 -4.6 11.9 -10.6 L 832 289 h -30 Z"
p-id="944" />
<path fill="#f56e73" d="M 164 307 c -16.5 0 -30 -13.5 -30 -30 v -58 c 0 -16.5 13.5 -30 30 -30 h 696 c 16.5 0 30 13.5 30 30 v 58 c 0 16.5 -13.5 30 -30 30 H 164 Z"
p-id="945" />
<path fill="#ffa1a8" d="M 860 207 h -30 c 6.6 0 12 5.4 12 12 v 58 c 0 6.6 -5.4 12 -12 12 h 30 c 6.6 0 12 -5.4 12 -12 v -58 c 0 -6.6 -5.4 -12 -12 -12 Z"
p-id="946" />
<path fill="#65c8ff" d="M 190.9 651.5 c -31.4 0 -56.9 -25.5 -56.9 -56.9 V 219 c 0 -16.5 13.5 -30 30 -30 h 466.2 c 9.9 0 18 8.1 18 18 v 301.1 c 0 34.7 -28.2 62.9 -62.9 62.9 s -62.9 -28.2 -62.9 -62.9 V 393.5 c 0 -23.2 -18.8 -42 -42 -42 s -42 18.8 -42 42 v 68.1 c 0 29.4 -23.9 53.4 -53.4 53.4 s -53.4 -23.9 -53.4 -53.4 v -68.1 c 0 -23.2 -18.8 -42 -42 -42 s -42 18.8 -42 42 v 201.1 c 0.1 31.4 -25.4 56.9 -56.7 56.9 Z"
p-id="947" />
<path fill="#b3eaff" d="M 277.8 321.5 c -33.1 0 -60 26.9 -60 60 v 201.1 c 0 21.5 -17.4 38.9 -38.9 38.9 c -7.7 0 -14.8 -2.2 -20.8 -6.1 c 6.9 10.9 19 18.1 32.8 18.1 c 21.5 0 38.9 -17.4 38.9 -38.9 V 393.5 c 0 -33.1 26.9 -60 60 -60 c 13.5 0 25.9 4.5 36 12 c -11 -14.5 -28.4 -24 -48 -24 Z M 618.3 207 v 289.1 c 0 24.8 -20.1 44.9 -44.9 44.9 c -9.3 0 -18 -2.8 -25.2 -7.7 c 8.1 11.9 21.7 19.7 37.2 19.7 c 24.8 0 44.9 -20.1 44.9 -44.9 V 207 h -12 Z M 468.5 321.5 c -33.1 0 -60 26.9 -60 60 v 68.1 c 0 19.5 -15.8 35.4 -35.4 35.4 c -6.7 0 -12.9 -1.9 -18.3 -5.1 c 6.2 10.2 17.4 17.1 30.3 17.1 c 19.5 0 35.4 -15.8 35.4 -35.4 v -68.1 c 0 -33.1 26.9 -60 60 -60 c 13.5 0 25.9 4.5 36 12 c -11 -14.5 -28.4 -24 -48 -24 Z"
p-id="948" />
<path fill="#453b56" d="M 698 729.4 m -18 0 a 18 18 0 1 0 36 0 a 18 18 0 1 0 -36 0 Z" p-id="949" />
<path fill="#453b56" d="M 860 171 H 632.5 v 0.1 c -0.7 0 -1.5 -0.1 -2.2 -0.1 H 164 c -26.5 0 -48 21.5 -48 48 v 375.6 c 0 41.3 33.6 74.9 74.9 74.9 c 2.7 0 5.4 -0.2 8.1 -0.5 l 16 141.4 c 2.8 24.3 23.3 42.6 47.7 42.6 h 498.6 c 24.4 0 44.9 -18.3 47.7 -42.6 l 55.2 -485.6 c 24.5 -2.1 43.8 -22.7 43.8 -47.8 v -58 c 0 -26.5 -21.5 -48 -48 -48 Z M 190.9 633.5 c -21.5 0 -38.9 -17.4 -38.9 -38.9 V 219 c 0 -6.6 5.4 -12 12 -12 h 466.3 v 301.1 c 0 24.8 -20.1 44.9 -44.9 44.9 c -24.8 0 -44.9 -20.1 -44.9 -44.9 V 393.5 c 0 -33.1 -26.9 -60 -60 -60 s -60 26.9 -60 60 v 68.1 c 0 19.5 -15.8 35.4 -35.4 35.4 c -19.5 0 -35.4 -15.8 -35.4 -35.4 v -68.1 c 0 -33.1 -26.9 -60 -60 -60 s -60 26.9 -60 60 v 201.1 c 0.1 21.5 -17.4 38.9 -38.8 38.9 Z m 582.3 172.9 c -0.7 6.1 -5.8 10.6 -11.9 10.6 H 262.7 c -6.1 0 -11.2 -4.6 -11.9 -10.6 l -6.7 -59 h 396.6 c 9.9 0 18 -8.1 18 -18 s -8.1 -18 -18 -18 H 240 l -6.3 -55.4 c 19.3 -13.6 32.1 -36 32.1 -61.3 V 393.5 c 0 -13.2 10.8 -24 24 -24 s 24 10.8 24 24 v 68.1 c 0 39.4 32 71.4 71.4 71.4 s 71.4 -32 71.4 -71.4 v -68.1 c 0 -13.2 10.8 -24 24 -24 s 24 10.8 24 24 v 114.6 c 0 44.6 36.3 80.9 80.9 80.9 c 44.6 0 80.9 -36.3 80.9 -80.9 V 325 h 161.7 l -54.9 481.4 Z M 872 277 c 0 6.6 -5.4 12 -12 12 H 666.3 v -82 H 860 c 6.6 0 12 5.4 12 12 v 58 Z"
p-id="950" /></svg>
</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" style="color: #28333E;" id="value2">
0
</div>
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
<svg t="1591462430908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="3170" width="200" height="200">
<path d="M532 784.2c0 24.4-19.8 44.3-44.3 44.3s-44.3-19.8-44.3-44.3c0-24.4 44.3-80.3 44.3-80.3s44.3 55.8 44.3 80.3zM766 784.2c0 24.4 19.8 44.3 44.3 44.3 24.4 0 44.3-19.8 44.3-44.3 0-24.4-44.3-80.3-44.3-80.3S766 759.7 766 784.2z"
fill="#97DCFF" p-id="3171"></path>
<path d="M123.5 471.3c-9.9 0-18-8.1-18-18v-302c0-9.9 8.1-18 18-18h58c9.9 0 18 8.1 18 18v302c0 9.9-8.1 18-18 18h-58z"
fill="#FCC66F" p-id="3172"></path>
<path d="M181.5 151.3v302h-58v-302h58m0-36h-58c-19.9 0-36 16.1-36 36v302c0 19.9 16.1 36 36 36h58c19.9 0 36-16.1 36-36v-302c0-19.8-16.1-36-36-36z"
fill="#453B56" p-id="3173"></path>
<path d="M266.4 210.7m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3174"></path>
<path d="M430.8 641.1c-9.9 0-18-8.1-18-18v-21.6c0-130.3 106-236.3 236.3-236.3s236.3 106 236.3 236.3v21.6c0 9.9-8.1 18-18 18H430.8z"
fill="#FCC66F" p-id="3175"></path>
<path d="M649 383.2c-5 0-10 0.2-15 0.6 113.5 7.7 203.3 102.2 203.3 217.7v21.6h30v-21.6c0-120.6-97.7-218.3-218.3-218.3z"
fill="#FFD79C" p-id="3176"></path>
<path d="M419.6 694.4c-22.1 0-40.1-18-40.1-40.1s18-40.1 40.1-40.1h458.8c22.1 0 40.1 18 40.1 40.1s-18 40.1-40.1 40.1H419.6z"
fill="#F56E73" p-id="3177"></path>
<path d="M878.4 632.3h-30c12.2 0 22.1 9.9 22.1 22.1s-9.9 22.1-22.1 22.1h30c12.2 0 22.1-9.9 22.1-22.1s-9.9-22.1-22.1-22.1z"
fill="#FFA1A8" p-id="3178"></path>
<path d="M693.3 846.4c0 24.4-19.8 44.3-44.3 44.3-24.4 0-44.3-19.8-44.3-44.3s44.3-80.3 44.3-80.3 44.3 55.9 44.3 80.3z"
fill="#97DCFF" p-id="3179"></path>
<path d="M649 908.7c-34.3 0-62.3-27.9-62.3-62.3 0-28.5 36.9-77.2 48.1-91.4 3.4-4.3 8.6-6.8 14.1-6.8s10.7 2.5 14.1 6.8c11.3 14.2 48.1 62.9 48.1 91.4 0.2 34.3-27.8 62.3-62.1 62.3z m0-112.3c-14.1 20.4-26.3 41.9-26.3 50 0 14.5 11.8 26.3 26.3 26.3s26.3-11.8 26.3-26.3c0-8.1-12.1-29.6-26.3-50z"
fill="#453B56" p-id="3180"></path>
<path d="M903.3 601.9v-0.5c0-134.1-104.4-244.3-236.3-253.6v-30.7c0-68.7-55.9-124.6-124.6-124.6H326.5c-9.9 0-18 8.1-18 18s8.1 18 18 18h215.9c48.8 0 88.6 39.7 88.6 88.6v30.7c-131.8 9.3-236.3 119.4-236.3 253.6v0.5c-19.6 9.3-33.2 29.3-33.2 52.4 0 32 26 58.1 58.1 58.1H459c-14.8 21-33.5 51.5-33.5 71.8 0 34.3 27.9 62.3 62.3 62.3 34.3 0 62.2-27.9 62.2-62.3 0-20.3-18.6-50.7-33.5-71.8h264.9c-14.8 21-33.5 51.5-33.5 71.8 0 34.3 27.9 62.3 62.3 62.3 34.3 0 62.3-27.9 62.3-62.3 0-20.3-18.6-50.7-33.5-71.8h39.4c32 0 58.1-26 58.1-58.1 0-23.1-13.6-43-33.2-52.4zM487.8 810.4c-14.5 0-26.3-11.8-26.3-26.3 0-8.1 12.1-29.6 26.3-50 14.1 20.4 26.2 41.9 26.2 50 0 14.5-11.8 26.3-26.2 26.3z m322.5 0c-14.5 0-26.3-11.8-26.3-26.3 0-8.1 12.1-29.6 26.3-50 14.1 20.4 26.3 41.9 26.3 50-0.1 14.5-11.9 26.3-26.3 26.3zM649 383.2c118.8 0 215.4 94.9 218.1 213.1H430.9c2.8-118.1 99.3-213.1 218.1-213.1z m251.5 271.1c0 12.2-9.9 22.1-22.1 22.1H419.6c-12.2 0-22.1-9.9-22.1-22.1 0-12.2 9.9-22.1 22.1-22.1h458.8c12.2 0.1 22.1 10 22.1 22.1z"
fill="#453B56" p-id="3181"></path>
</svg>
</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" style="color: #28333E;" id="value3">
0
</div>
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
<svg t="1591462464512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="3311" width="200" height="200">
<path d="M750.4 216.5h-130v-15.3c0-32.9-26.8-59.7-59.7-59.7h-97.3c-32.9 0-59.7 26.8-59.7 59.7v15.3h-130c-30.7 0-55.6 25-55.6 55.6v72.4c0 9.9 8.1 18 18 18h31.5v478c0 23.2 18.8 42 42 42h405c23.2 0 42-18.8 42-42v-478H788c9.9 0 18-8.1 18-18v-72.4c0-30.6-25-55.6-55.6-55.6z"
fill="#FCC66F" p-id="3312"></path>
<path d="M708.5 344.5v496c0 13.3-10.7 24-24 24h30c13.3 0 24-10.7 24-24v-496h-30z" fill="#FFD79C" p-id="3313"></path>
<path d="M309.5 882.5c-23.2 0-42-18.8-42-42V596c0-9.9 8.1-18 18-18h36.8c30.2 0 54.8 24.6 54.8 54.8v231.7c0 9.9-8.1 18-18 18h-49.6zM664.9 882.5c-9.9 0-18-8.1-18-18V632.8c0-30.2 24.6-54.8 54.8-54.8h36.8c9.9 0 18 8.1 18 18v244.5c0 23.2-18.8 42-42 42h-49.6z"
fill="#F56E73" p-id="3314"></path>
<path d="M708.5 596v244.5c0 13.3-10.7 24-24 24h30c13.3 0 24-10.7 24-24V596h-30z" fill="#FFA1A8" p-id="3315"></path>
<path d="M475.2 882.5c-9.9 0-18-8.1-18-18V632.8c0-30.2 24.6-54.8 54.8-54.8 30.2 0 54.8 24.6 54.8 54.8v231.7c0 9.9-8.1 18-18 18h-73.6z"
fill="#F56E73" p-id="3316"></path>
<path d="M560.7 159.5h-18c23 0 41.7 18.7 41.7 41.7V221h18v-19.8c-0.1-23-18.7-41.7-41.7-41.7zM750.4 234.5h-30c20.8 0 37.6 16.8 37.6 37.6v72.4h30v-72.4c0-20.8-16.8-37.6-37.6-37.6z"
fill="#FFD79C" p-id="3317"></path>
<path d="M750.4 198.5H638.2c-1.4-41.6-35.6-75-77.5-75h-97.3c-41.9 0-76.1 33.4-77.5 75H273.6c-40.6 0-73.6 33-73.6 73.6v72.4c0 19.9 16.1 36 36 36h13.5v460c0 33.1 26.9 60 60 60H714.7c33.1 0 60-26.9 60-60v-460H788c19.9 0 36-16.1 36-36v-72.4c0-40.6-33-73.6-73.6-73.6z m-287.1-39h97.3c22.1 0 40.2 17.2 41.5 39H421.8c1.4-21.8 19.4-39 41.5-39z m-104.2 705h-49.6c-13.3 0-24-10.7-24-24V596h36.8c20.3 0 36.8 16.5 36.8 36.8v231.7z m189.7 0h-73.6V632.8c0-20.3 16.5-36.8 36.8-36.8 20.3 0 36.8 16.5 36.8 36.8v231.7z m189.7-24c0 13.3-10.7 24-24 24h-49.6V632.8c0-20.3 16.5-36.8 36.8-36.8h36.8v244.5z m0-280.5h-36.8c-40.1 0-72.8 32.6-72.8 72.8v231.7h-44.2V632.8c0-40.1-32.6-72.8-72.8-72.8-40.1 0-72.8 32.6-72.8 72.8v231.7h-44.2V632.8c0-40.1-32.6-72.8-72.8-72.8h-36.8v-74.5h279c9.9 0 18-8.1 18-18s-8.1-18-18-18h-279v-69h453V560zM788 344.5H236v-72.4c0-20.8 16.8-37.6 37.6-37.6h476.8c20.8 0 37.6 16.8 37.6 37.6v72.4z"
fill="#453B56" p-id="3318"></path>
<path d="M621.8 467.5m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3319"></path>
</svg>
</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" style="color: #28333E;" id="value4">
0
</div>
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
<svg t="1591462491887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="3449" width="200" height="200">
<path d="M363.2 807c-9.9 0-18-8.1-18-18v-75.5c0-9.9 8.1-18 18-18h108.5c9.9 0 18 8.1 18 18V789c0 9.9-8.1 18-18 18H363.2z"
fill="#F56E73" p-id="3450"></path>
<path d="M441.7 713.5h30V789h-30z" fill="#FFA1A8" p-id="3451"></path>
<path d="M259.6 398c-9.9 0-18-8.1-18-18V178.6c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1V380c0 9.9-8.1 18-18 18h-50.2zM525.1 398c-9.9 0-18-8.1-18-18V178.6c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1V380c0 9.9-8.1 18-18 18h-50.2z"
fill="#65C8FF" p-id="3452"></path>
<path d="M550.2 153.5c-3.2 0-6.2 0.7-9 1.7 9.4 3.6 16.1 12.7 16.1 23.4V380h18V178.6c0.1-13.9-11.2-25.1-25.1-25.1z"
fill="#97DCFF" p-id="3453"></path>
<path d="M686 330.5H149c-9.9 0-18 8.1-18 18v63c0 9.9 8.1 18 18 18h33.2l45 225c8.7 43.4 47.1 75 91.4 75h197.6c44.3 0 82.7-31.5 91.4-75l45-225H686c9.9 0 18-8.1 18-18v-63c0-9.9-8.1-18-18-18z"
fill="#FCC66F" p-id="3454"></path>
<path d="M608 411.5L560.1 651c-7 35.2-37.9 60.5-73.8 60.5h30c35.9 0 66.7-25.3 73.8-60.5L638 411.5h-30zM656 348.5h30v63h-30z"
fill="#FFD79C" p-id="3455"></path>
<path d="M474.2 543.5m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3456"></path>
<path d="M416.9 525.5h-125c-9.9 0-18 8.1-18 18s8.1 18 18 18h125c9.9 0 18-8.1 18-18s-8.1-18-18-18zM893 543.5h-33.4c-65.2 0-118.2 53-118.2 118.2v19.6c0 9.9 8.1 18 18 18s18-8.1 18-18v-19.6c0-45.3 36.9-82.2 82.2-82.2H893c9.9 0 18-8.1 18-18s-8-18-18-18zM772.2 744.2c7-7 7-18.4 0-25.5-7-7-18.4-7-25.5 0s-7 18.4 0 25.5 18.4 7.1 25.5 0z"
fill="#453B56" p-id="3457"></path>
<path d="M759.5 761.6c-9.9 0-18 8.1-18 18v11.6c0 43.7-35.6 79.3-79.3 79.3H487.3c-26.4 0-48.3-19.9-51.4-45.5h35.8c19.9 0 36-16.1 36-36v-41.5h8.6c52.8 0 98.7-37.6 109.1-89.4l42.1-210.6H686c19.9 0 36-16.1 36-36v-63c0-19.9-16.1-36-36-36h-74.6V178.6c0-33.7-27.4-61.1-61.1-61.1s-61.1 27.4-61.1 61.1v133.9H345.9V178.6c0-33.7-27.4-61.1-61.1-61.1s-61.1 27.4-61.1 61.1v133.9H149c-19.9 0-36 16.1-36 36v63c0 19.9 16.1 36 36 36h18.5l42.1 210.6c10.4 51.8 56.2 89.4 109.1 89.4h8.6V789c0 19.9 16.1 36 36 36h36.6c3.3 45.5 41.2 81.5 87.5 81.5h174.8c63.6 0 115.3-51.7 115.3-115.3v-11.6c0-10-8.1-18-18-18z m-234.4-583c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v133.9H525V178.6z m-265.5 0c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v133.9h-50.3V178.6zM149 411.5v-63h537v63H149z m169.7 300c-35.9 0-66.7-25.3-73.8-60.5l-40.7-203.5h426.6L590.1 651c-7 35.2-37.9 60.5-73.8 60.5H318.7z m44.5 77.5v-41.5h108.5V789H363.2z"
fill="#453B56" p-id="3458"></path>
</svg>
</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 class="layui-card">
<div class="layui-card-header">动态</div>
<div class="layui-card-body">
<dl class="layuiadmin-card-status">
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>七彩枫叶 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
<span>几秒前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>简 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a
class="pear-text" lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>2天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>恒宇少年 将 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0
版本</p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>如花 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a
class="pear-text" lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>就眠仪式 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a
class="pear-text" lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>贤心 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a
class="pear-text" lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>8天前</span>
</div>
</dd>
</dl>
</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">2021-09-06 11:28</span></li>
<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2021-09-06 11:28</span></li>
<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2021-09-06 11:28</span></li>
<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2021-09-06 11:28</span></li>
<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2021-09-06 11:28</span></li>
<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2021-09-06 11:28</span></li>
<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2021-09-06 11:28</span></li>
<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2021-09-06 11:28</span></li>
</ul>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">
链接
</div>
<div class="layui-card-body">
<a target="_blank" href="http://www.pearadmin.com" class="pear-btn pear-btn-primary layui-btn-fluid" style="margin-top: 8px;height: 50px;line-height: 50px;">官
网</a>
<br />
<a target="_blank" href="https://gitee.com/pear-admin/Pear-Admin-Layui" class="pear-btn pear-btn-warming layui-btn-fluid"
style="margin-top: 8px;height: 50px;line-height: 50px;">下 载</a>
<br />
<a target="_blank" href="https://gitee.com/pear-admin/Pear-Admin-Boot" class="pear-btn pear-btn-danger layui-btn-fluid"
style="margin-top: 8px;height: 50px;line-height: 50px;">后 端</a>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">
寄语
</div>
<div class="layui-card-body" style="line-height:40px;">
原想将澎湃的爱平平稳稳放置你手心，奈何我徒有一股蛮劲，只顾向你跑去，一个不稳跌的满身脏兮兮。试图爬起的我，
心想你会不会笑我 " 献爱献的这样笨拙, 怎么不知避开爱里的埋伏 "
</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', 'count'], function() {
var $ = layui.jquery,
layer = layui.layer,
element = layui.element,
count = layui.count,
echarts = layui.echarts;
count.up("value1", {
time: 4000,
num: 440.34,
bit: 2,
regulator: 50
})
count.up("value2", {
time: 4000,
num: 236.30,
bit: 2,
regulator: 50
})
count.up("value3", {
time: 4000,
num: 634.43,
bit: 2,
regulator: 50
})
count.up("value4", {
time: 4000,
bit: 2,
num: 373.23,
regulator: 50
})
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
var option = {
backgroundColor: '#fff',
tooltip: {
show: false
},
grid: {
top: '10%',
bottom: '6%',
left: '6%',
right: '6%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
//textStyle: {
fontSize: 14,
color: 'rgba(#999)'
//}
},
splitLine: {
show: true,
lineStyle: {
color: '#939ab6',
opacity: .15
}
},
data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
}, ],
yAxis: [{
type: 'value',
offset: 15,
max: 100,
min: 0,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
margin: 10,
//textStyle: {
fontSize: 14,
color: '#999'
//}
},
splitLine: {
show: false
}
}],
series: [{
name: '2',
type: 'line',
z: 3,
showSymbol: false,
smoothMonotone: 'x',
lineStyle: {
width: 3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(59,102,246)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(118,237,252)' // 100% 处的颜色
}]
},
shadowBlur: 4,
shadowColor: 'rgba(69,126,247,.2)',
shadowOffsetY: 4
},
areaStyle: {
//normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(227,233,250,.9)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(248,251,252,.3)' // 100% 处的颜色
}]
}
//}
},
smooth: true,
data: [20, 56, 17, 40, 68, 42]
}, {
name: '1',
type: 'line',
showSymbol: false,
smoothMonotone: 'x',
lineStyle: {
width: 3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,84,108)'
}, {
offset: 1,
color: 'rgba(252,140,118)'
}], false),
shadowBlur: 4,
shadowColor: 'rgba(253,121,128,.2)',
shadowOffsetY: 4
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,84,108,.15)'
}, {
offset: 1,
color: 'rgba(252,140,118,0)'
}], false),
},
smooth: true,
data: [20, 71, 8, 50, 57, 32]
}, ]
};
echartsRecords.setOption(option);
window.onresize = function() {
echartsRecords.resize();
}
});
</script>
</body>
</html>

516
public/view/console/console2.html Normal file
View File

@ -0,0 +1,516 @@
<!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="../../admin/css/other/console2.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md8">
<div class="layui-row layui-col-space10">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">
快捷菜单
</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space10">
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home1" data-title="主页"
data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-home"></i>
</div>
<span class="pear-card-title">主页</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home2" data-title="弹层"
data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-camera"></i>
</div>
<span class="pear-card-title">弹层</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home2" data-title="聊天"
data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-star"></i>
</div>
<span class="pear-card-title">聊天</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home3" data-title="相机"
data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-camera"></i>
</div>
<span class="pear-card-title">相机</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home4" data-title="表单"
data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-console"></i>
</div>
<span class="pear-card-title">表单</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home5" data-title="安全"
data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-auz"></i>
</div>
<span class="pear-card-title">安全</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home6" data-title="公告"
data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-cart"></i>
</div>
<span class="pear-card-title">公告</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home7" data-title="更多"
data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-app"></i>
</div>
<span class="pear-card-title">更多</span>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">
代办任务
</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space10">
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
<div class="pear-card2">
<div class="title">待审评论</div>
<div class="count pear-text">21</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
<div class="pear-card2">
<div class="title">待审帖子</div>
<div class="count pear-text">32</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
<div class="pear-card2">
<div class="title">待审文章</div>
<div class="count pear-text">14</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
<div class="pear-card2">
<div class="title">待审用户</div>
<div class="count pear-text">63</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<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;"></div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">
使用记录
</div>
<div class="layui-card-body">
<table id="role-table" lay-filter="role-table"></table>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">留言板</div>
<div class="layui-card-body">
<ul class="pear-card-status">
<li>
<p>要不要作为我的家人，搬来我家。</p>
<span>12月25日 19:92</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>夏天真的来了，尽管它还有些犹豫。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
<span>5月12日 01:25</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
</li>
<li>
<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
<span>6月11日 15:33</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>一切都在不可避免的走向庸俗。</p>
<span>2月09日 13:40</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>路上没有灯火的时候，就点亮自己的头颅。</p>
<span>3月11日 12:30</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
</li>
<li>
<p>接近，是我对一切的态度，是我对一切态度的距离</p>
<span>6月11日 15:33</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
<li>
<p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
<span>2月09日 13:40</span>
<a href="javascript:;" data-id="1"
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--</div>-->
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function() {
var $ = layui.jquery,
layer = layui.layer,
element = layui.element,
echarts = layui.echarts,
table = layui.table,
carousel = layui.carousel;
let cols = [
[{
type: 'checkbox'
},
{
title: '角色名',
field: 'roleName',
align: 'center',
width: 100
},
{
title: 'Key值',
field: 'roleCode',
align: 'center'
},
{
title: '描述',
field: 'details',
align: 'center'
},
{
title: '是否可用',
field: 'enable',
align: 'center',
templet: '#role-enable'
}
]
]
table.render({
elem: '#role-table',
url: '../../admin/data/role.json',
page: true,
cols: cols,
skin: 'line'
});
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
$("body").on("click", "[data-url]", function() {
parent.layui.tab.addTabOnlyByElem("content", {
id: $(this).attr("data-id"),
title: $(this).attr("data-title"),
url: $(this).attr("data-url"),
close: true
})
})
let bgColor = "#fff";
let color = [
"#0090FF",
"#36CE9E",
"#FFC005",
"#FF515A",
"#8B5CFF",
"#00CA69"
];
let echartData = [{
name: "1",
value1: 100,
value2: 233
},
{
name: "2",
value1: 138,
value2: 233
},
{
name: "3",
value1: 350,
value2: 200
},
{
name: "4",
value1: 173,
value2: 180
},
{
name: "5",
value1: 180,
value2: 199
},
{
name: "6",
value1: 150,
value2: 233
},
{
name: "7",
value1: 180,
value2: 210
},
{
name: "8",
value1: 230,
value2: 180
}
];
let xAxisData = echartData.map(v => v.name);
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
let yAxisData1 = echartData.map(v => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
let yAxisData2 = echartData.map(v => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor =
`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
}
option = {
backgroundColor: bgColor,
color: color,
legend: {
right: 10,
top: 10
},
tooltip: {
trigger: "axis",
formatter: function(params) {
let html = '';
params.forEach(v => {
html +=
`<div style="color: #666;font-size: 14px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
${v.seriesName}.${v.name}
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
万元`;
})
return html
},
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: '#ffffff',
shadowColor: 'rgba(225,225,225,1)',
shadowBlur: 5
}
}
},
grid: {
top: 100,
containLabel: true
},
xAxis: [{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: '{value}月',
textStyle: {
color: "#333"
}
},
axisLine: {
lineStyle: {
color: "#D9D9D9"
}
},
data: xAxisData
}],
yAxis: [{
type: "value",
name: '单位：万千瓦时',
axisLabel: {
textStyle: {
color: "#666"
}
},
nameTextStyle: {
color: "#666",
fontSize: 12,
lineHeight: 40
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#E9E9E9"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [{
name: "2018",
type: "line",
smooth: true,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[0],
shadowBlur: 3,
shadowColor: hexToRgba(color[0], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[0], 0.3)
},
{
offset: 1,
color: hexToRgba(color[0], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[0], 0.1),
shadowBlur: 10
}
},
data: yAxisData1
}, {
name: "2019",
type: "line",
smooth: true,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[1],
shadowBlur: 3,
shadowColor: hexToRgba(color[1], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[1], 0.3)
},
{
offset: 1,
color: hexToRgba(color[1], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[1], 0.1),
shadowBlur: 10
}
},
data: yAxisData2
}]
};
echartsRecords.setOption(option);
window.onresize = function() {
echartsRecords.resize();
}
});
</script>
</body>
</html>

66
public/view/demo/index.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<style>
body {
margin: 0;
padding: 0;
}
.pear-container {
margin: 0;
padding: 0;
}
.right,
.left {
height: 100%;
position: absolute;
transition: all .3s;
}
.left {
width: 200px;
background-color: #f56c6c;
}
.right {
width: calc(100% - 200px);
background-color: #2d8cf0;
margin-left: 200px;
}
.mini .left{
width: 0px;
}
.mini .right {
width: 100%;
margin-left: 0px;
}
</style>
</head>
<body class="pear-container">
<div class="left">
</div>
<div class="right">
<button class="">显示 / 隐藏
</button>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['jquery'], function(){
var $ = layui.jquery;
$("button").click(function(){
if($(".pear-container").is(".mini")){
$(".pear-container").removeClass("mini");
} else {
$(".pear-container").addClass("mini");
}
})
})
</script>
</body>
</html>

143
public/view/document/area.html Normal file
View File

@ -0,0 +1,143 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>区域选择</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Area 省市级联 选择组件
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
基本使用
</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="广东省">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="深圳市">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="龙岗区">
<option value="">请选择区</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
基本使用
</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item" id="area-picker-copy">
<div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="广东省">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="深圳市">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="龙岗区">
<option value="">请选择区</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['area'], function () {
var area = layui.area;
area.render({
elem: '#area-picker',
change: function (res) {
console.log(res);
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['layer', 'form', 'area', 'element', 'code'], function() {
var layer = layui.layer,
form = layui.form,
area = layui.area;
layui.code();
area.render({
elem: '#area-picker',
change: function(res) {
//选择结果
console.log(res);
}
});
area.render({
elem: '#area-picker-copy',
change: function(res) {
//选择结果
console.log(res);
}
});
});
</script>
</body>
</html>

305
public/view/document/button.html Normal file
View File

@ -0,0 +1,305 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮组件</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
开发环境
</div>
<div class="layui-card-body">
Pear Button 参考 Element UI 样式 ，提供 Button 服务
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
或
<link rel="stylesheet" href="component/pear/css/pear-module/button.css" />
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
简单使用
</div>
<div class="layui-card-body">
<button class="pear-btn">Default Button</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary">Primary Button</button>&nbsp;&nbsp;
<br>
<br>
<button class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-danger"> Button-danger</button>&nbsp;&nbsp;
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<button class="pear-btn"> Default Button </button>
<button class="pear-btn" dashed> Dashed Button </button>
<button class="pear-btn pear-btn-primary"> Primary Button </button>
<button class="pear-btn pear-btn-primary"> Button-Primary </button>
<button class="pear-btn pear-btn-success"> Button-Success </button>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
简约样式
</div>
<div class="layui-card-body">
<button plain class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
<button plain class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
<button plain class="pear-btn pear-btn-danger"> Button-Danger</button>&nbsp;&nbsp;
<button plain class="pear-btn pear-btn-warming"> Button-Warming</button>&nbsp;&nbsp;
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<button class="pear-btn"> Default Button </button>
<button class="pear-btn" dashed> Dashed Button </button>
<button class="pear-btn pear-btn-primary"> Primary Button </button>
<button class="pear-btn pear-btn-primary"> Button-Primary </button>
<button class="pear-btn pear-btn-success"> Button-Success </button>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
按钮大小
</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary"> Button-Default</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
<br>
<br>
<button class="pear-btn pear-btn-warming pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-warming"> Button-Default</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-warming pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-warming pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary"> Button-Default </button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>&nbsp;&nbsp;
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
按钮组
</div>
<div class="layui-card-body">
<div class="pear-btn-group">
<button class="pear-btn pear-btn-primary" round> Button-One</button>
<button class="pear-btn pear-btn-primary" round> Button-Two</button>
<button class="pear-btn pear-btn-primary" round> Button-Three</button>
</div>
<br>
<br>
<div class="pear-btn-group">
<button class="pear-btn"> Button-One </button>
<button class="pear-btn"> Button-Two </button>
<button class="pear-btn"> Button-Three </button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="pear-btn-group">
<button class="pear-btn"> Button-One </button>
<button class="pear-btn"> Button-Two </button>
<button class="pear-btn"> Button-Three </button>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
Load 自动
</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary" load> 加载 600 ms </button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(["button"], function() {
var button = layui.button;
button.load({
elem:'[load]',
time: 600,
done: function(){
popup.success("加载完成");
}
})
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
Load 手动
</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary" loading> 开始 </button>
<button class="pear-btn pear-btn-danger" stop> 停止 </button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(["button"], function() {
var button = layui.button;
var dom = button.load({
elem:'[load]',
})
dom.stop(function() {
popup.failure("已停止");
});
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
本页跳转
</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary" to> 本页跳转 </button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(["jquery"], function() {
var $ = layui.jquery;
$("[to]").click(function(){
top.layui.frame.changePageByElement("content","http://www.baidu.com","百度一下",true)
})
})
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['element', 'code', 'jquery', "button", "popup"], function() {
var element = layui.element;
var $ = layui.jquery;
var popup = layui.popup;
var button = layui.button;
layui.code();
$("[load]").click(function() {
button.load({
elem: '[load]',
time: 600,
done: function() {
popup.success("加载完成");
}
})
})
var dom;
$("[loading]").click(function() {
dom = button.load({
elem: '[loading]'
})
})
$("[stop]").click(function() {
dom.stop(function() {
popup.failure("已停止");
});
})
$("[to]").click(function(){
top.layui.admin.jump(14,"百度一下","http://www.bing.com",true)
})
})
</script>
</body>
</html>

78
public/view/document/card.html Normal file
View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据卡片</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form layui-form-pane">
<div class="layui-form-item">
<label class="layui-form-label">卡片标题</label>
<div class="layui-input-inline">
<input type="text" name="realName" id="realName" placeholder="" class="layui-input">
</div>
<label class="layui-form-label">卡片名称</label>
<div class="layui-input-inline">
<input type="text" name="username" id="username" placeholder="" class="layui-input">
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon">&#xe615;</i>
搜 索</button>
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon">&#xe615;</i>
获取数据</button>
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-checked-btn"><i class="layui-icon">&#xe615;</i>
获取选中数据</button>
</div>
</div>
</form>
<div id="currentTableId"></div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table', 'layer', 'form', 'jquery', 'card'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let layer = layui.layer;
let card = layui.card;
card.render({
elem: '#currentTableId',
url: '../../admin/data/card.json', // 接口数据
data: [], // 静态数据
page: true, // 是否分页
limit: 8, // 每页数量
linenum: 4, // 每行数量
clickItem: function(data){ // 单击事件
console.log(data)
}
})
// 监听搜索操作
form.on('submit(data-search-btn)', function(data) {
queryJson = data.field;
card.reload("currentTableId", {
where: queryJson,
});
return false;
});
form.on('submit(data-checked-btn)', function() {
var data = card.getChecked("currentTableId");
layer.msg(JSON.stringify(data));
return false;
});
form.on('submit(data-btn)', function() {
var data = card.getAllData("currentTableId");
layer.msg(JSON.stringify(data));
return false;
});
})
</script>
</body>
</html>

219
public/view/document/core.html Normal file
View File

@ -0,0 +1,219 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据卡片</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<button id="collapseSide" class="pear-btn">侧边切换</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="refreshThis" class="pear-btn">刷新当前</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="refresh" class="pear-btn">刷新指定</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="addTab" class="pear-btn">新增卡片</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="changeTabTitle" class="pear-btn">修改标题</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="closeTab" class="pear-btn">删除卡片</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="closeThis" class="pear-btn">删除当前</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="closeAll" class="pear-btn">删除全部</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="closeOther" class="pear-btn">删除其他</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="changeIframe" class="pear-btn">切换页面</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="jump" class="pear-btn">兼容切换</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<button id="fullScreen" class="pear-btn">有点多余</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
<th>参数</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>admin.collapseSide</td>
<td>侧边收缩</td>
<td>无</td>
<td>无模式限制</td>
</tr>
<tr>
<td>admin.refreshThis</td>
<td>刷新当前</td>
<td>无</td>
<td>无模式限制</td>
</tr>
<tr>
<td>admin.refresh</td>
<td>刷新指定</td>
<td>id: 编号</td>
<td>仅限 TAB 模式</td>
</tr>
<tr>
<td>admin.addTab</td>
<td>新增卡片</td>
<td>id:编号,title:标题,url:路径</td>
<td>仅限 TAB 模式</td>
</tr>
<tr>
<td>admin.changeTabTitle</td>
<td>修改标题</td>
<td>id:编号,title:标题</td>
<td>仅限 TAB 模式</td>
</tr>
<tr>
<td>admin.closeTab</td>
<td>关闭卡片</td>
<td>id:编号</td>
<td>仅限 TAB 模式</td>
</tr>
<tr>
<td>admin.closeCurrentTab</td>
<td>关闭当前</td>
<td>无</td>
<td>仅限 TAB 模式</td>
</tr>
<tr>
<td>admin.closeAllTab</td>
<td>关闭所有</td>
<td>无</td>
<td>仅限 TAB 模式</td>
</tr>
<tr>
<td>admin.closeOtherTab</td>
<td>关闭其他</td>
<td>无</td>
<td>仅限 TAB 模式</td>
</tr>
<tr>
<td>admin.changeIframe</td>
<td>切换页面</td>
<td>id:编号,title:标题,url:路径</td>
<td>仅限 IFRAME 模式</td>
</tr>
<tr>
<td>admin.jump</td>
<td>兼容切换</td>
<td>id:编号,title:标题,url:路径</td>
<td>无模式限制</td>
</tr>
<tr>
<td>admin.fullScreen</td>
<td>全屏模式</td>
<td>无</td>
<td>无模式限制</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['jquery','layer'], function() {
var $ = layui.jquery;
$("#collapseSide").click(function(){
parent.layui.admin.collapseSide()
})
$("#refreshThis").click(function(){
parent.layui.admin.refreshThis()
})
$("#refresh").click(function(){
parent.layui.admin.refresh(14)
})
$("#addTab").click(function(){
parent.layui.admin.addTab(14,"百度一下","http://www.bing.com")
})
$("#closeTab").click(function(){
parent.layui.admin.closeTab(14)
})
$("#closeThis").click(function(){
parent.layui.admin.closeCurrentTab()
})
$("#closeAll").click(function(){
parent.layui.admin.closeAllTab()
})
$("#changeTabTitle").click(function(){
parent.layui.admin.changeTabTitle(16,"修改标题")
})
$("#closeOther").click(function(){
parent.layui.admin.closeOtherTab()
})
$("#changeIframe").click(function(){
parent.layui.admin.changeIframe(14,"百度一下","http://www.bing.com")
})
$("#jump").click(function(){
parent.layui.admin.jump(14,"百度一下","http://www.bing.com")
})
$("#fullScreen").click(function(){
parent.layui.admin.fullScreen()
})
})
</script>
</body>
</html>

124
public/view/document/count.html Normal file
View File

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字滚动</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
开发环境
</div>
<div class="layui-card-body">
Pear Count 数据滚动特效
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
简单使用
</div>
<div class="layui-card-body">
<h2 id="number1">0</h2>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['count'], function() {
var count = layui.count;
count.up("number1", {
time: 8000,
num: 4540.34,
regulator: 100
})
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
保留小数
</div>
<div class="layui-card-body">
<h2 id="number2">0</h2>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['count'], function() {
var count = layui.count;
count.up("number2", {
time: 8000,
num: 4540.34,
bit: 2,
regulator: 100
})
})
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['element', 'code', 'count'], function() {
var element = layui.element;
var count = layui.count;
count.up("number1", {
time: 8000,
num: 4540.34,
regulator: 100
})
count.up("number2", {
time: 8000,
num: 9832.34,
bit: 2,
regulator: 100
})
layui.code();
})
</script>
</body>
</html>

597
public/view/document/drawer.html Normal file
View File

@ -0,0 +1,597 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽屉组件</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
<style>
.wrap {
display: none;
}
</style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Drawer 在 弹出层 UI 上带来不一样的体验.
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">抽屉</div>
<div class="layui-card-body">
<button class="drawer-top pear-btn pear-btn-primary">上</button>
<button class="drawer-bottom pear-btn pear-btn-success">下</button>
<button class="drawer-left pear-btn pear-btn-warming">左</button>
<button class="drawer-right pear-btn pear-btn-danger">右</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['drawer'], function() {
var drawer = layui.drawer;
drawer.open({
direction: "right",
dom: ".layer-top",
distance: "30%"
});
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">进阶</div>
<div class="layui-card-body">
<button class="drawer-close-mask pear-btn pear-btn-primary">手动关闭</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
var dom;
$(".drawer-close-mask").click(function() {
dom = drawer.open({
direction: "right",
dom: ".layer-close-mask",
distance: "30%",
maskClose: false
});
})
$("#btnClose").click(function() {
dom.close();
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">扩展</div>
<div class="layui-card-body">
<button class="drawer-auto-close pear-btn pear-btn-success">自动关闭</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['drawer'], function() {
var drawer = layui.drawer;
$(".drawer-auto-close").click(function() {
dom = drawer.open({
direction: "right",
dom: ".layer-auto-close",
distance: "30%",
maskClose: false,
time: 1000
});
})
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">扩展</div>
<div class="layui-card-body">
<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['drawer'], function() {
var drawer = layui.drawer;
$(".drawer-auto-close").click(function() {
dom = drawer.open({
direction: "right",
dom: ".layer-auto-close",
distance: "30%",
success:function(){
layer.msg("触发回调函数");
}
});
})
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">扩展</div>
<div class="layui-card-body">
<div id="targetEl"
style="width: 600px;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid gainsboro;
background-color: #EEE;
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center">
<button id="targetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['drawer'], function() {
var drawer = layui.drawer;
$("#targetDemo").click(function () {
drawer.open({
// 指定挂载节点
target: "#targetEl"
direction: "right",
dom: ".layer-right",
distance: "50%",
});
})
</pre>
</div>
</div>
</div>
</div>
<!-- 新版 API -->
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">基于 layer 的抽屉扩展</div>
<div class="layui-card-body">
<p style="margin-bottom: 10px;">兼容原版 drawer 所有参数,要使用 layer 扩展,设置 legacy 选项为 false 即可</p>
<button id="layerDrawerLeft" class="pear-btn pear-btn-success">左</button>
<button id="layerDrawerRight" class="pear-btn pear-btn-success">右</button>
<button id="layerDrawerTop" class="pear-btn pear-btn-success">上</button>
<button id="layerDrawerBottom" class="pear-btn pear-btn-success">下</button>
<button id="layerDrawer" class="pear-btn pear-btn-success">更多参数示例</button>
<button id="layerDrawerParent" class="pear-btn pear-btn-success">父窗口打开</button>
<button id="layerDrawerIframe" class="pear-btn pear-btn-success">iframe远程页面</button>
<button id="layerDrawerURL" class="pear-btn pear-btn-success">URL远程页面</button>
<div
id="layertargetEl"
style="width: 600px;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid gainsboro;
background-color: #EEE;
margin-top: 10px;
display: flex;
justify-content: space-around;
align-items: center">
<button id="layertargetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
</div>
<blockquote class="layui-elem-quote layui-quote-nm">指定容器内打开，需使用 layer 捕获层模式，并设置目标容器 style="overflow: hidden;
position: relative;"</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">
使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。
</blockquote>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
$("#layerDrawerLeft").click(function(){
drawer.open({
legacy: false,
offset: 'l',
area: "30%",
content: "left内容",
})
})
$("#layerDrawerRight").click(function () {
drawer.open({
legacy: false,
offset: 'r',
area: "30%",
content: "right内容",
})
})
$("#layerDrawerTop").click(function () {
drawer.open({
legacy: false,
offset: "t",
content: "top内容",
})
})
$("#layerDrawerBottom").click(function () {
drawer.open({
legacy: false,
offset: "b",
content: "bottom内容",
})
})
$("#layerDrawer").click(function () {
var index = drawer.open({
legacy: false,
title: ['标题', 'font-size:16px;color:#2d8cf0'],
maxmin: true,
offset: "r",
area: "30%",
content: "抽屉内容",
btn:"关闭",
yes:function(index,layero){
drawer.close(index);
console.log(index,layero);
},
btnAlign: "l",
closeBtn: 1,
})
})
$("#layerDrawerParent").click(function () {
var index = parent.layui.drawer.open({
legacy: false,
title: ['标题', 'font-size:16px;color:#2d8cf0'],
maxmin: true,
offset: "r",
area: "30%",
content: "抽屉内容",
btn:"关闭",
yes:function(index,layero){
drawer.close(index);
console.log(index,layero);
},
btnAlign: "l",
closeBtn: 1,
})
})
$("#layertargetDemo").click(function () {
drawer.open({
legacy: false,
target: "#layertargetEl",
direction: "right",
dom: ".layer-right",
distance: "50%",
});
})
$("#layerDrawerIframe").click(function () {
drawer.open({
legacy: false,
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
offset: 'r',
area: "80%",
maxmin: true,
closeBtn: 1,
iframe: window.location.origin + "/view/document/table.html"
})
})
$("#layerDrawerURL").click(function () {
drawer.open({
legacy: false,
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
offset: 'r',
area: "80%",
maxmin: true,
closeBtn: 1,
url: window.location.origin + "/view/document/drawerFragment.html"
})
})
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="layer-left" style="display: none;">
<br />
<h3>左侧弹层内容...</h3>
</div>
<div class="layer-right" style="display: none;">
<br />
<h3>右侧弹层内容...</h3>
</div>
<div class="layer-top" style="display: none;">
<br />
<h3>上侧弹层内容...</h3>
</div>
<div class="layer-bottom" style="display: none;">
<br />
<h3>下侧弹层内容...</h3>
</div>
<div class="layer-open-mask" style="display: none;">
<br />
<h3>点击右侧灰色区域</h3>
</div>
<div class="layer-close-mask" style="display: none;">
<button id="btnClose" class="pear-btn pear-btn-primary"
style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
</div>
<div class="layer-auto-close" style="display: none;">
<br />
<h3>打开 2秒 后自动关闭...</h3>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['element', 'jquery', 'drawer', 'layer', 'code'], function() {
var element = layui.element;
var $ = layui.jquery;
var drawer = layui.drawer;
var layer = layui.layer;
layui.code();
$("#layerDrawerIframe").click(function () {
drawer.open({
legacy: false,
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
offset: 'r',
area: "80%",
maxmin: true,
closeBtn: 1,
iframe: window.location.origin + "/view/document/table.html"
})
})
$("#layerDrawerURL").click(function () {
drawer.open({
legacy: false,
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
offset: 'r',
area: "80%",
maxmin: true,
closeBtn: 1,
url: window.location.origin + "/view/document/drawerFragment.html"
})
})
$("#layerDrawerLeft").click(function(){
drawer.open({
legacy: false,
offset: 'l',
area: "30%",
content: "left内容",
})
})
$("#layerDrawerRight").click(function () {
drawer.open({
legacy: false,
offset: 'r',
area: "30%",
content: "right内容",
})
})
$("#layerDrawerTop").click(function () {
drawer.open({
legacy: false,
offset: "t",
content: "top内容",
})
})
$("#layerDrawerBottom").click(function () {
drawer.open({
legacy: false,
offset: "b",
content: "bottom内容",
})
})
$("#layerDrawer").click(function () {
var index = drawer.open({
legacy: false,
title: ['标题', 'font-size:16px;color:#2d8cf0'],
maxmin: true,
offset: "r",
area: "30%",
content: "抽屉内容",
btn:"关闭",
yes:function(index,layero){
drawer.close(index);
console.log(index,layero);
},
btnAlign: "l",
closeBtn: 1,
})
})
$("#layerDrawerParent").click(function () {
var index = parent.layui.drawer.open({
legacy: false,
title: ['标题', 'font-size:16px;color:#2d8cf0'],
maxmin: true,
offset: "r",
area: "30%",
content: "抽屉内容",
btn: "关闭",
yes: function (index, layero) {
parent.layui.drawer.close(index);
console.log(index, layero);
},
btnAlign: "l",
closeBtn: 1,
})
})
$("#layertargetDemo").click(function () {
drawer.open({
legacy: false,
target: "#layertargetEl",
direction: "right",
dom: ".layer-right",
distance: "50%",
});
})
$(".drawer-right").click(function() {
drawer.open({
direction: "right",
dom: ".layer-right",
distance: "30%"
});
})
$(".drawer-left").click(function() {
drawer.open({
direction: "left",
dom: ".layer-left",
distance: "30%"
});
})
$(".drawer-top").click(function() {
drawer.open({
direction: "top",
dom: ".layer-top",
distance: "30%"
});
})
$(".drawer-bottom").click(function() {
drawer.open({
direction: "bottom",
dom: ".layer-bottom",
distance: "30%"
});
})
$(".drawer-open-mask").click(function() {
drawer.open({
direction: "right",
dom: ".layer-open-mask",
distance: "30%",
maskClose: true
});
})
var dom;
$(".drawer-close-mask").click(function() {
dom = drawer.open({
direction: "right",
dom: ".layer-close-mask",
distance: "30%",
maskClose: false
});
})
$("#btnClose").click(function() {
dom.close();
})
$(".drawer-auto-close").click(function() {
dom = drawer.open({
direction: "right",
dom: ".layer-auto-close",
distance: "30%",
maskClose: false,
time: 1000
});
})
$(".drawer-call-back").click(function() {
dom = drawer.open({
direction: "right",
dom: ".layer-right",
distance: "30%",
success: function() {
layer.msg("触发回调函数", {
icon: 1,
time: 1000
});
}
});
})
$("#targetDemo").click(function () {
drawer.open({
target: "#targetEl",
direction: "right",
dom: ".layer-right",
distance: "50%",
});
})
})
</script>
</html>

385
public/view/document/drawerFragment.html Normal file
View File

@ -0,0 +1,385 @@
<style>
.expand.pear-btn:hover {
color: currentColor;
background-color: unset;
}
.expand.pear-btn {
border: 1px solid rgb(255 255 255 / 0%)
}
</style>
<div class="layui-card">
<div class="layui-card-body">
<form id="userForm" class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline" style="margin-left: 50px;">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
<button type="button" class="pear-btn pear-btn-md expand">
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
</div>
</div>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
class="layui-icon layui-icon-delete"></i></button>
<button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
checked="{{ d.enable == 0 ? 'true' : 'false' }}">
</script>
<script type="text/html" id="user-sex">
{{#if (d.sex == 1) { }}
<span>男</span>
{{# }else if(d.sex == 2){ }}
<span>女</span>
{{# } }}
</script>
<script type="text/html" id="user-login">
{{#if (d.login == 0) { }}
<span>在线</span>
{{# }else if(d.sex == 1){ }}
<span>离线</span>
{{# } }}
</script>
<script type="text/html" id="user-createTime">
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>
<script>
layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let drawer = layui.drawer;
let dropdown = layui.dropdown;
let MODULE_PATH = "/system/user/";
formToggle({
elem: "#userForm",
});
function formToggle(options) {
var defaultsOpt = {
isExpand: false,
prefixIcon: "layui-icon",
toggleIcon: ['layui-icon-down', 'layui-icon-up'],
toggleText: ['展开', '折叠'],
}
var opt = $.extend({}, defaultsOpt, options);
var elem = opt.elem; // 绑定的表单元素,必填
var min = opt.min; // 最小显示数,默认显示一行
var isExpand = opt.isExpand; // 初始展开
var prefixIcon = opt.prefixIcon + " "; // 图标前缀
var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
var toggleText = opt.toggleText; // 折叠和展开时的文本
var eleDOM = $(elem + " .layui-inline");
var firstElTop = eleDOM.first().offset().top;
var targetEl = eleDOM.filter(function (index) {
var isGtMin = (index + 1) > min;
var isGtFirstElTop = $(this).offset().top > firstElTop;
var isNeqLast = (index + 1) != eleDOM.length;
return min
? isGtMin && isNeqLast
: isGtFirstElTop && isNeqLast;
});
var unExpandIcon = prefixIcon + toggleIcon[0];
var expandIcon = prefixIcon + toggleIcon[1];
var unExpandText = toggleText[0];
var expandText = toggleText[1];
var btnSelector = elem + " .expand";
$(btnSelector).append("<i></i>")
if (isExpand) {
$(btnSelector).prepend("<span>" + expandText + "</span>");
$(btnSelector + ">i").addClass(expandIcon);
} else {
$(btnSelector).prepend("<span>" + unExpandText + "</span>")
$(btnSelector + ">i").addClass(unExpandIcon)
targetEl.addClass("layui-hide");
}
$(btnSelector).click(function () {
isExpand = !isExpand;
if (isExpand) {
$(btnSelector + ">span").html(expandText);
$(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon);
targetEl.removeClass("layui-hide")
} else {
$(btnSelector + ">span").html(unExpandText);
$(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon);
targetEl.addClass("layui-hide")
}
})
}
let cols = [
[{
type: 'checkbox'
},
{
title: '账号',
field: 'username',
align: 'center',
width: 100
},
{
title: '姓名',
field: 'realName',
align: 'center'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: 80,
templet: '#user-sex'
},
{
title: '电话',
field: 'phone',
align: 'center'
},
{
title: '启用',
field: 'enable',
align: 'center',
templet: '#user-enable'
},
{
title: '登录',
field: 'login',
align: 'center',
templet: '#user-login'
},
{
title: '注册',
field: 'createTime',
align: 'center',
templet: '#user-createTime'
},
{
title: '操作',
toolbar: '#user-bar',
align: 'left',
width: 160,
fixed: 'right'
}
]
]
table.render({
elem: '#user-table',
url: '../../admin/data/table.json',
page: true,
cols: cols,
skin: 'line',
toolbar: '#user-toolbar',
defaultToolbar: [{
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'],
done: function (res, curr, count) {
for (var i = 0; i < res.data.length; i++) {
dropdown.render({
elem: '#more_' + res.data[i].userId,
data: [{
title: 'menu item11',
id: 100
}, {
title: 'menu item22',
id: 101
}, {
title: 'menu item33',
id: 102
}],
id: '#more_' + res.data[i].userId,
click: function (obj) {
layer.tips('点击了：' + obj.title, this.elem, {
tips: [1, '#5FB878']
})
}
});
}
}
});
table.on('tool(user-table)', function (obj) {
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
}
});
table.on('toolbar(user-table)', function (obj) {
if (obj.event === 'add') {
window.add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'batchRemove') {
window.batchRemove(obj);
}
});
form.on('submit(user-query)', function (data) {
table.reload('user-table', {
where: data.field
})
return false;
});
form.on('switch(user-enable)', function (obj) {
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
});
window.add = function () {
layer.msg("添加")
}
window.edit = function (obj) {
layer.msg("修改");
}
window.remove = function (obj) {
layer.confirm('确定要删除该用户', {
icon: 3,
title: '提示'
}, function (index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "remove/" + obj.data['userId'],
dataType: 'json',
type: 'delete',
success: function (result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function () {
obj.del();
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.batchRemove = function (obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].userId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些用户', {
icon: 3,
title: '提示'
}, function (index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function (result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function () {
table.reload('user-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.refresh = function (param) {
table.reload('user-table');
}
})
</script>

165
public/view/document/dtree.html Normal file
View File

@ -0,0 +1,165 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树形结构</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">Dtree 提供 树状态 的数据结构展示</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link href="component/pear/css/pear.css" rel="stylesheet" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
嵌套数据格式
</div>
<div class="layui-card-body">
<ul id="demoTree" class="dtree" data-id="0"></ul>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['dtree'], function () {
dtree = layui.dtree;
dtree.render({
elem: "#demoTree",
initLevel: "1",
method: 'get',
url: "admin/data/dtree.json"
});
});
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
嵌套数据格式
</div>
<div class="layui-card-body">
<ul id="demoTree3" class="dtree" data-id="0"></ul>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['dtree'], function () {
dtree = layui.dtree;
dtree.render({
elem: "#demoTree",
initLevel: "1",
method: 'get',
url: "admin/data/dtree.json",
dataFormat: "list",
checkbar: true
});
});
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
下拉树
</div>
<div class="layui-card-body">
<ul id="demoTree2" class="dtree" data-id="0"></ul>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['dtree'], function () {
dtree = layui.dtree;
dtree.render({
elem: "#demoTree2",
initLevel: "1",
method: 'get',
url: "admin/data/dtree.json",
select: true
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['dtree', 'jquery','element','code'], function () {
var $ = layui.jquery,
dtree = layui.dtree;
layui.code();
// 初始化树
dtree.render({
elem: "#demoTree",
initLevel: "1",
method: 'get',
url: "../../admin/data/dtree.json"
});
dtree.render({
elem: "#demoTree3",
initLevel: "1",
method: 'get',
url: "../../admin/data/dataTree2.json",
dataFormat: "list", //配置data的风格为list
checkbar: true //开启复选框
});
dtree.render({
elem: "#demoTree2",
initLevel: "1",
method: 'get',
url: "../../admin/data/dtree.json",
select: true
});
});
</script>
</body>
</html>

160
public/view/document/encrypt.html Normal file
View File

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哈希加密</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
开发环境
</div>
<div class="layui-card-body">
Pear encrypt 为前端开发 提供 加密服务
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">加密操作</div>
<div class="layui-card-body">
<form class="layui-form" action="javascript:void(0);">
<div class="layui-form-item layui-input-inline">
<input id="enter" value="123456" type="text" class="layui-input" />
</div>
<div class="layui-form-item layui-input-inline">
<select name="encode" lay-verify="">
<option value="">加密方式</option>
<option value="1">MD5</option>
<option value="2">SHA1</option>
<option value="3">SHA256</option>
<option value="4">SHA512</option>
<option value="5">rmd160</option>
<option value="6">crc32</option>
<option value="7">Base64Encode</option>
</select>
</div>
<div class="layui-form-item layui-input-inline">
<button id="encode" class="pear-btn pear-btn-primary">Encode</button>
</div>
</form>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">加密结果</div>
<div class="layui-card-body" id="end">
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['encrypt'], function() {
var encrypt = layui.encrypt;
encrypt.md5( str );
encrypt.sha1( str );
encrypt.sha256( str );
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">API 文档</div>
<div class="layui-card-body" id="end">
<div>
<span>encrypt.md5( str ) -- MD5加密</span>
<br>
<br>
<span>encrypt.sha1( str ) -- SHA1加密</span>
<br>
<br>
<span>encrypt.sha256( str ) -- SHA256加密</span>
<br>
<br>
<span>encrypt.sha512( str ) -- SHA512加密</span>
<br>
<br>
<span>encrypt.rmd160( str ) -- RMD160加密</span>
<br>
<br>
<span>encrypt.crc32( str ) -- CRC32加密</span>
<br>
<br>
<span>encrypt.Base64Encode( str ) -- BASE64加密</span>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['encrypt', 'form', 'jquery','layer','element','code'], function() {
var encrypt = layui.encrypt;
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
var element = layui.element;
layui.code();
$("#encode").click(function() {
var encode = $("[name='encode']").val();
var end;
if (encode == 1) {
end = encrypt.md5($("#enter").val());
} else if (encode == 2) {
end = encrypt.sha1($("#enter").val());
} else if (encode == 3) {
end = encrypt.sha256($("#enter").val());
} else if (encode == 4) {
end = encrypt.sha512($("#enter").val());
} else if (encode == 5) {
end = encrypt.rmd160($("#enter").val());
} else if (encode == 6) {
end = encrypt.crc32($("#enter").val());
} else if (encode == 7) {
end = encrypt.Base64Encode($("#enter").val());
} else{
layer.msg("请选择加密方式",{icon:3,time:1000});
}
$("#end").append('<button class="pear-btn">加密方式 : ' + $("[value=" + $("[name='encode']")
.val() + "]").text() + '&nbsp;&nbsp;&nbsp;&nbsp;明文 : ' + $("#enter").val() +
'&nbsp;&nbsp;&nbsp;&nbsp;加密结果 : ' + end + '</button><br><br>');
})
})
</script>
</body>
</html>

180
public/view/document/form.html Normal file
View File

@ -0,0 +1,180 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>表单页面</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet">
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Pear 基于 Form 的基础上扩展样式
</div>
</div>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
或
<link rel="stylesheet" href="component/pear/css/pear-module/form.css" />
</pre>
</div>
</div>
</div>
<div class="layui-card" style="margin-top: 10px;">
<div class="layui-card-header">输入框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="text" name="title" hover placeholder="用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="password" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">下拉选择框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md6">
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
<div class="layui-col-md6">
<select name="city" lay-verify="">
<option value="010">北京</option>
<option value="021" disabled>上海（禁用效果）</option>
<option value="0571" selected>杭州</option>
</select>
</div>
<div class="layui-col-md6">
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
</div>
<div class="layui-col-md6">
<select name="city" lay-verify="required" lay-search>
<option value="">带搜索的选择框</option>
<option value="1">layer</option>
<option value="2">form</option>
<option value="3">layim</option>
<option value="4">element</option>
<option value="5">laytpl</option>
<option value="6">upload</option>
<option value="7">laydate</option>
<option value="8">laypage</option>
<option value="9">flow</option>
<option value="10">util</option>
<option value="11">code</option>
<option value="12">tree</option>
<option value="13">layedit</option>
<option value="14">nav</option>
<option value="15">tab</option>
<option value="16">table</option>
<option value="17">select</option>
<option value="18">checkbox</option>
<option value="19">switch</option>
<option value="20">radio</option>
</select>
</div>
<div class="layui-col-md12">
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
<input type="checkbox" name="" lay-skin="primary">
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">扩展样式</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="text" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md12">
<input type="text" name="title" success placeholder="成功" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md12">
<input type="text" name="title" failure placeholder="失败" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">文本域</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">开关</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="xxx" lay-skin="switch">&nbsp;&nbsp;
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>&nbsp;&nbsp;
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">&nbsp;&nbsp;
<input type="checkbox" name="aaa" lay-skin="switch" disabled>&nbsp;&nbsp;
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">单选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['form','element','code'], function() {
var form = layui.form;
var element = layui.element;
layui.code();
});
</script>
</body>
</html>

126
public/view/document/fullscreen.html Normal file
View File

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏组件</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<style type="text/css">
</style>
<body class="pear-container">
<div class="layui-row layui-col-space10" id="homeid">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
fullscreen 用于控制页面或元素全屏
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">全屏控制</div>
<div class="layui-card-body">
<button class="fullstart pear-btn pear-btn-primary">全屏</button>
<button class="fullclose pear-btn pear-btn-danger">退出全屏</button>
<button class="fulltarg pear-btn pear-btn-warming">指定目标全屏</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['fullscreen'], function() {
var fullscreen = layui.fullscreen;
fullscreen.fullScreen();
fullscreen.fullClose();
fullscreen.fullScreen("#fulltarget");
fullscreen.isFullscreen();
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">指定容器全屏</div>
<div class="layui-card-body">
<div id="fulltarget"
style="width: 600px;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid gainsboro;
background-color: #EEE;
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center">
<button class="fullclose pear-btn pear-btn-danger">退出全屏</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use([ 'jquery', 'code','admin','fullscreen'], function() {
var popup = layui.popup;
var $ = layui.jquery;
var admin = layui.admin;
var fullscreen=layui.fullscreen;
layui.code();
fullscreen.onFullchange(function(){
//增加全屏状态回调，可针对不同浏览器做后续处理
console.log("当前全屏状态:",fullscreen.isFullscreen());
var document = fullscreen.isFullscreen();
if(document){
$("#fulltarget").addClass('pear-full-screen');
}else{
$("#fulltarget").removeClass('pear-full-screen');
}
});
$(".fullstart").click(function() {
fullscreen.fullScreen().then(function ok(res){
console.log(res);
}
);
})
$(".fullclose").click(function() {
fullscreen.fullClose();
})
$(".fulltarg").click(function() {
fullscreen.fullScreen("#fulltarget");
})
})
</script>
</html>

2195
public/view/document/icon.html Normal file
View File

File diff suppressed because it is too large Load Diff

244
public/view/document/iconPicker.html Normal file
View File

@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
IconPicker 提供图标选择功能
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
默认图标
</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" id="iconPicker" value="layui-icon-face-smile" lay-filter="iconPicker" class="hide">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['iconPicker'], function() {
var iconPicker = layui.iconPicker;
iconPicker.render({
elem: '#iconPicker',
type: 'fontClass',
search: true,
page: true,
limit: 16,
click: function(data) {
console.log(data);
},
success: function(d) {
console.log(d);
}
});
});
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">默认选中</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" id="iconPicker2" value="layui-icon-face-smile-fine" lay-filter="iconPicker2">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['iconPicker'], function() {
var iconPicker = layui.iconPicker;
iconPicker.render({
elem: '#iconPicker2',
type: 'fontClass',
search: true,
page: true,
limit: 16,
click: function(data) {
console.log(data);
},
success: function(d) {
console.log(d);
}
});
});
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">不分页</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" id="iconPicker3" value="layui-icon-face-smile-fine" lay-filter="iconPicker3">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['iconPicker'], function() {
var iconPicker = layui.iconPicker;
iconPicker.render({
elem: '#iconPicker',
type: 'fontClass',
search: true,
page: false,
limit: 16,
click: function(data) {
console.log(data);
},
success: function(d) {
console.log(d);
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['iconPicker', 'form', 'layer', 'code','element'], function() {
var iconPicker = layui.iconPicker,
form = layui.form,
layer = layui.layer,
$ = layui.$;
layui.code();
iconPicker.render({
// 选择器，推荐使用input
elem: '#iconPicker',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false，默认true
search: true,
// 是否开启分页：true/false，默认true
page: true,
// 每页显示数量，默认12
limit: 16,
// 点击回调
click: function(data) {
console.log(data);
},
// 渲染成功后的回调
success: function(d) {
console.log(d);
}
});
iconPicker.render({
// 选择器，推荐使用input
elem: '#iconPicker2',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false
search: true,
// 是否开启分页
page: true,
// 每页显示数量，默认12
limit: 16,
// 点击回调
click: function(data) {
console.log(data);
},
// 渲染成功后的回调
success: function(d) {
console.log(d);
}
});
iconPicker.render({
// 选择器，推荐使用input
elem: '#iconPicker3',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false
search: true,
// 是否开启分页
page: false,
// 每页显示数量，默认12
limit: 16,
// 点击回调
click: function(data) {
console.log(data);
},
// 渲染成功后的回调
success: function(d) {
console.log(d);
}
});
});
</script>
</body>
</html>

174
public/view/document/loading.html Normal file
View File

@ -0,0 +1,174 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载组件</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<style>
.load-div {
width: 100%;
height: 300px;
background-color: lightgray;
border-radius: 10px;
margin-top: 10px;
}
</style>
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header">加载组件</div>
<div class="layui-card-body">
<div>
<span>loading.Load(1,message);</span>
<br>
<br>
<span>loading.Load(2,message);</span>
<br>
<br>
<span>loading.Load(3,message);</span>
<br>
<br>
<span>loading.Load(4,message);</span>
<br>
<br>
<span>loading.Load(5,message);</span>
<br>
<br>
<span>loading.remove(time);</span>
<br>
<br>
</div>
<button class="loading-1 pear-btn pear-btn-primary" plain>加载</button>
<button class="loading-2 pear-btn pear-btn-success" plain>加载</button>
<button class="loading-3 pear-btn pear-btn-danger" plain>加载</button>
<button class="loading-4 pear-btn pear-btn-warming" plain>加载</button>
<button class="loading-5 pear-btn">加载</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">加载组件</div>
<div class="layui-card-body">
<button class="block-5 pear-btn">加载</button>
<button class="block-4 pear-btn">加载</button>
<button class="block-3 pear-btn">加载</button>
<button class="block-2 pear-btn">加载</button>
<button class="block-1 pear-btn">加载</button>
<div class="load-div load-div-1"></div>
</div>
</div>
<div class="layer-right">
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['element', 'jquery', 'loading', 'code'], function() {
var element = layui.element;
var $ = layui.jquery;
var loading = layui.loading;
var msg =
'"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein'
$(".loading-1").click(function() {
loading.Load(1, "");
loading.loadRemove(1000);
})
$(".loading-2").click(function() {
loading.Load(2, "");
loading.loadRemove(1000);
})
$(".loading-3").click(function() {
loading.Load(3, "");
loading.loadRemove(1000);
})
$(".loading-4").click(function() {
loading.Load(4, "");
loading.loadRemove(1000);
})
$(".loading-5").click(function() {
loading.Load(5, "");
loading.loadRemove(1000);
})
$(".block-1").click(function() {
loading.block({
type: 1,
elem: '.load-div-1',
msg: '加载中'
})
loading.blockRemove(".load-div-1", 1000);
})
$(".block-2").click(function() {
loading.block({
type: 2,
elem: '.load-div-1',
msg: ''
})
loading.blockRemove(".load-div-1", 1000);
})
$(".block-3").click(function() {
loading.block({
type: 3,
elem: '.load-div-1',
msg: ''
})
loading.blockRemove(".load-div-1", 1000);
})
$(".block-4").click(function() {
loading.block({
type: 4,
elem: '.load-div-1',
msg: ''
})
loading.blockRemove(".load-div-1", 1000);
})
$(".block-5").click(function() {
loading.block({
type: 5,
elem: '.load-div-1',
msg: ''
})
loading.blockRemove(".load-div-1", 1000);
})
$(".block-6").click(function() {
loading.block({
type: 6,
elem: '.load-div-1',
msg: ''
})
loading.blockRemove(".load-div-1", 1000);
})
})
</script>
</body>
</html>

115
public/view/document/menu.html Normal file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据菜单</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Menu 数据菜单对普通菜单的深度封装
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">实例</div>
<div class="layui-card-body">
<button id="collapse" class="pear-btn">隐藏</button>
<br/>
<br/>
<div id="sideMenu"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content layui-show">
<pre class="layui-code" lay-encode="true">
var sideMenu = menu.render({
elem: 'sideMenu',
async: true,
theme: "light-theme",
height: '300px',
control: false,
defaultMenu: 0,
accordion: true,
url: "../../admin/data/menu.json",
parseData: false,
done: function() {
layer.msg("加载完成")
}
});
sideMenu.click(function(dom, data) {
layer.msg("菜单点击 : " + JSON.stringify(data));
})
</pre>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['layer', 'form',
'element', 'menu', 'code','jquery'
], function() {
var layer = layui.layer,
menu = layui.menu,
$ = layui.jquery,
form = layui.form;
layui.code();
var sideMenu = menu.render({
elem: 'sideMenu',
async: true,
theme: "light-theme",
height: '300px',
control: false,
defaultMenu: 0,
accordion: true,
url: "../../admin/data/dataMenu.json",
parseData: false,
done: function() {
layer.msg("加载完成")
}
});
sideMenu.click(function(dom, data) {
layer.msg("菜单点击 : " + JSON.stringify(data));
})
$("#collapse").click(function(){
sideMenu.collapse();
})
});
</script>
</html>

148
public/view/document/notice.html Normal file
View File

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通知组件</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Notice 用于 消息通知 场景
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
或
<link rel="stylesheet" href="component/pear/css/pear-module/notice.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">消息提醒</div>
<div class="layui-card-body">
<div>
<span>notice.success("成功消息")</span>
<br>
<br>
<span>notice.error("危险消息")</span>
<br>
<br>
<span>notice.warning("警告消息")</span>
<br>
<br>
<span>notice.info("通用消息")</span>
<br>
<br>
</div>
<button class="notice-info pear-btn pear-btn-primary">通用消息</button>
<button class="notice-success pear-btn pear-btn-success">成功消息</button>
<button class="notice-failure pear-btn pear-btn-danger">错误消息</button>
<button class="notice-warning pear-btn pear-btn-warming">警告消息</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['notice', 'jquery', 'layer', 'code'], function() {
var notice = layui.notice;
notice.success("成功消息")
notice.error("危险消息")
notice.warning("警告消息")
notice.info("通用消息")
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
消息移除
</div>
<div class="layui-card-body">
<button class="pear-btn" id="closeAll">移除全部</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['notice', 'jquery', 'layer', 'code'], function() {
var notice = layui.notice;
notice.clear();
})
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['notice', 'jquery', 'layer', 'code', 'element'], function() {
var notice = layui.notice;
var layer = layui.layer;
var $ = layui.jquery;
layui.code();
notice.warning("成功消息");
notice.info("提示消息");
notice.error("错误消息");
notice.success("成功消息");
$(".notice-success").click(function() {
notice.success("成功消息")
})
$(".notice-failure").click(function() {
notice.error("危险消息")
})
$(".notice-warning").click(function() {
notice.warning("警告消息")
})
$(".notice-info").click(function() {
notice.info("通用消息")
})
$("#closeAll").click(function() {
notice.clear();
});
});
</script>
</html>

227
public/view/document/popover.html Normal file
View File

@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>汽泡组件</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
popover 用于 汽泡显示 场景
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">汽泡控制</div>
<div class="layui-card-body">
<button class="popover-show pear-btn pear-btn-primary">显示</button>
<button class="popover-hide pear-btn pear-btn-success">隐藏</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['popover', 'jquery', 'layer', 'code'], function() {
var popover = layui.popover;
popover.show('#el1');
popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
不同方式
</div>
<div class="layui-card-body">
<button class="toast-top-left-btn pear-btn" id="el1">手动</button>
<button class="toast-top-center-btn pear-btn" id="el2">回调</button>
<button class="toast-top-center-btn pear-btn" id="el3">iframe</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
var popover = layui.popover;
popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',placement:'auto',
animation:'pop',
closeable:true,
delay: {
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 100
},
opacity:0.98,
type:'html',//content type, values:'html','iframe','async'
});
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
隐藏
</div>
<div class="layui-card-body">
<button class="pear-btn" id="closeAll">隐藏全部</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['popover', 'jquery', 'layer', 'code'], function() {
var popover = layui.popover;
popover.hideAll();
})
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['popover', 'jquery', 'layer', 'code', 'element'], function() {
var layer = layui.layer;
var $ = layui.jquery;
var popover = layui.popover;
var element = layui.element;
layui.code();
$(".popover-show").click(function(e) {
popover.show('#el1');
})
$("#el1").click(function(e) {
popover.show('#el1');
})
$(".popover-hide").click(function(e){
popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
})
$("#closeAll").click(function(e){
popover.hideAll();
});
//html 事件 手动
//用法参照 https://github.com/sandywalker/webui-popover
//增加功能 opacity [0,1] 可指定 popover 透明度
popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',
animation:'pop',
closeable:true,
placement:'auto',
delay: {
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 100
},
opacity:0.98,
type:'html',//content type, values:'html','iframe','async'
})
//html 事件 hover
popover.create('#el2',{title:' hello popover-hover',content:'<div class="layui-tab layui-tab-brief" lay-filter="test">\n' +
' <ul class="layui-tab-title">\n' +
' <li class="layui-this" lay-id="11">网站设置</li>\n' +
' <li lay-id="22">用户管理</li>\n' +
' <li lay-id="33">权限分配</li>\n' +
' <li lay-id="44">商品管理</li>\n' +
' <li lay-id="55">订单管理</li>\n' +
' </ul>\n' +
' <div class="layui-tab-content" style="height: 100px;">\n' +
' <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以获得 tab 事件</div>\n' +
' <div class="layui-tab-item">内容2</div>\n' +
' <div class="layui-tab-item">内容3</div>\n' +
' <div class="layui-tab-item">内容4</div>\n' +
' <div class="layui-tab-item">内容5</div>\n' +
' </div>\n' +
'</div> ',trigger:'hover',
animation:'pop',
delay: {
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 100
},
placement:'top-right',
opacity:0.98,
onShow: function($element) {
//console.log("onShow",$element);
element.on('tab(test)', function(elem){
location.hash = 'test='+ $(this).attr('lay-id');
console.log(location.hash);
})
},
});
popover.create('#el3',{title:' hello popover-iframe',trigger:'hover',
animation:'pop',
closeable:true,
placement:'auto',
delay: {
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 100
},
opacity:0.98,
type:'iframe',//content type, values:'html','iframe','async'
url:'http://cn.bing.com/',
width:500,
height:400
})
});
</script>
</html>

127
public/view/document/popup.html Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>封装弹窗</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Popup 基于 Layer 的 二次封装, 提供简洁高效的 API 调用
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">提示消息</div>
<div class="layui-card-body">
<button class="success pear-btn pear-btn-primary">成功消息</button>
<button class="failure pear-btn pear-btn-danger">失败消息</button>
<button class="warming pear-btn pear-btn-warming">警告消息</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['popup'], function() {
var popup = layui.popup;
popup.success("成功消息")
popup.failure("失败消息")
popup.warning("警告消息")
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">回调函数</div>
<div class="layui-card-body">
<button class="success-callback pear-btn pear-btn-primary">成功消息</button>
<button class="failure-callback pear-btn pear-btn-danger">失败消息</button>
<button class="warming-callback pear-btn pear-btn-warming">警告消息</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['popup'], function() {
var popup = layui.popup;
popup.success("成功消息",callback)
popup.failure("失败消息",callback)
popup.warning("警告消息",callback)
})
</pre>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['popup', 'jquery', 'code'], function() {
var popup = layui.popup;
var $ = layui.jquery;
layui.code();
$(".success").click(function() {
popup.success("成功消息")
})
$(".failure").click(function() {
popup.failure("失败消息")
})
$(".warming").click(function() {
popup.warning("警告消息")
})
$(".success-callback").click(function() {
popup.success("成功消息", function() {
layer.msg("回调函数")
})
})
$(".failure-callback").click(function() {
popup.failure("失败消息", function() {
layer.msg("回调函数")
})
})
$(".warming-callback").click(function() {
popup.warning("警告消息", function() {
layer.msg("回调函数")
})
})
})
</script>
</html>

218
public/view/document/select.html Normal file
View File

@ -0,0 +1,218 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多选组件</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
开发环境
</div>
<div class="layui-card-body">
Select 应用于 多选 场景
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link href="component/pear/css/pear.css" rel="stylesheet" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
默认主题
</div>
<div class="layui-card-body">
<select name="city5" xm-select="select5" xm-select-skin="default">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<select name="demo1" xm-selects="demo1" xm-select-skin="default">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
绿色主题
</div>
<div class="layui-card-body">
<select name="city1" xm-select="select1">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<select name="demo2" xm-selects="demo2">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
通用主题
</div>
<div class="layui-card-body">
<select name="city2" xm-select="select2" xm-select-skin="normal">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<select name="demo3" xm-selects="demo3" xm-select-skin="normal">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
警告主题
</div>
<div class="layui-card-body">
<select name="city3" xm-select="select3" xm-select-skin="warm">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<select name="demo4" xm-selects="demo4" xm-select-skin="warm">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
危险主题
</div>
<div class="layui-card-body">
<select name="city4" xm-select="select4" xm-select-skin="danger">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<select name="demo5" xm-selects="demo5" xm-select-skin="danger">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['select','code','element'], function() {
let select = layui.select;
layui.code();
});
</script>
</body>
</html>

256
public/view/document/step.html Normal file
View File

@ -0,0 +1,256 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分布表单</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">Step 步骤表单</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card">
<div class="layui-card-body" style="padding-top: 40px;">
<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
<div carousel-item>
<div>
<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
<div class="layui-form-item">
<label class="layui-form-label">游戏编号:</label>
<div class="layui-input-block">
<input type="text" placeholder="请填写入款人游戏ID" class="layui-input" lay-verify="number" required />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入款金额:</label>
<div class="layui-input-block">
<input type="number" placeholder="请填写入款金额" value="" class="layui-input" lay-verify="number" required>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入款类型:</label>
<div class="layui-input-block">
<select lay-verify="required">
<option value="1" selected>保险箱</option>
<option value="2">现金</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入款方式:</label>
<div class="layui-input-block">
<select lay-verify="required">
<option value="1" selected>人工入款</option>
<option value="2">修正</option>
<option value="3">活动</option>
<option value="4">佣金</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注说明:</label>
<div class="layui-input-block">
<textarea placeholder="入款备注" value="" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
&emsp;下一步&emsp;
</button>
</div>
</div>
</form>
</div>
<div>
<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
<div class="layui-form-item">
<label class="layui-form-label">游戏编号:</label>
<div class="layui-input-block">
<div class="layui-form-mid layui-word-aux">639537</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账户余额:</label>
<div class="layui-input-block">
<div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入款金额:</label>
<div class="layui-input-block">
<div class="layui-form-mid layui-word-aux">
<span style="font-size: 18px;color: #333;">1800 元</span>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入款类型:</label>
<div class="layui-input-block">
<div class="layui-form-mid layui-word-aux">保险箱</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入款方式:</label>
<div class="layui-input-block">
<div class="layui-form-mid layui-word-aux">人工入款</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注说明:</label>
<div class="layui-input-block">
<div class="layui-form-mid layui-word-aux">备注说明</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="pear-btn pear-btn-success pre">上一步</button>
<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
&emsp;确认入款&emsp;
</button>
</div>
</div>
</form>
</div>
<div>
<div style="text-align: center;margin-top: 90px;">
<i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
入款成功
</div>
<div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
</div>
<div style="text-align: center;margin-top: 50px;">
<button class="pear-btn pear-btn-success next">再入一笔</button>
<button class="pear-btn pear-btn-success">查看账单</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['form', 'step','element'], function() {
var $ = layui.$,
form = layui.form,
step = layui.step;
step.render({
elem: '#stepForm',
filter: 'stepForm',
width: '100%',
stepWidth: '600px',
height: '500px',
stepItems: [{
title: '填写'
}, {
title: '确认'
}, {
title: '完成'
}]
});
form.on('submit(formStep)', function(data) {
step.next('#stepForm');
return false;
});
form.on('submit(formStep2)', function(data) {
step.next('#stepForm');
return false;
});
$('.pre').click(function() {
step.pre('#stepForm');
return false;
});
$('.next').click(function() {
step.next('#stepForm');
return false;
});
})
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['form', 'step','code','element'], function() {
var $ = layui.$,
form = layui.form,
step = layui.step;
layui.code();
step.render({
elem: '#stepForm',
filter: 'stepForm',
width: '100%',
stepWidth: '600px',
height: '500px',
stepItems: [{
title: '填写'
}, {
title: '确认'
}, {
title: '完成'
}]
});
form.on('submit(formStep)', function(data) {
step.next('#stepForm');
return false;
});
form.on('submit(formStep2)', function(data) {
step.next('#stepForm');
return false;
});
$('.pre').click(function() {
step.pre('#stepForm');
return false;
});
$('.next').click(function() {
step.next('#stepForm');
return false;
});
})
</script>
</body>
</html>

152
public/view/document/tab.html Normal file
View File

@ -0,0 +1,152 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>多选项卡</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Tab.js 是一个多视图组件，你可在任何地方内嵌它，并执行常用操作，Admin 正式使用该组件进行路由切换
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
常用操作
</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary add">新增 Demo</button>
<button class="pear-btn pear-btn-danger del">删除当前</button>
<button class="pear-btn pear-btn-warming enable">高级操作</button>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">
基本使用
</div>
<div class="layui-card-body">
<!-- 内 容 页 面 -->
<div id="contents"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content layui-show">
<pre class="layui-code" lay-encode="true">
tab.render({
elem: 'contents',
roll: false,
tool: false,
width: '100%',
height: '480px',
index: 0,
tabMax: 30,
closeEvent: function(id) {
// do something
},
data: [{
id: "1",
title: "首页",
url: "http://www.baidu.com",
close: false
},{
id: "2",
title: "百度一下",
url: "http://www.baidu.com",
close: false
}]
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['layer', 'form',
'element', 'tab', 'code','jquery'
], function() {
var layer = layui.layer,
tab = layui.tab,
$ = layui.jquery,
form = layui.form;
layui.code();
tab.render({
elem: 'contents',
roll: false,
tool: false,
width: '100%',
height: '485px',
index: 0,
session: false,
tabMax: 30,
closeEvent: function(id) {
layer.msg("关闭回调")
},
data: [{
id: "1",
title: "百度一下",
url: "../system/space.html",
close: false
}]
});
$(".add").click(function(){
// ADD 添加方法
tab.addTabOnlyByElem('contents',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
})
$(".enable").click(function(){
// ADD 添加方法
tab.addTabOnlyByElem('contents',{id:'tabContent',title:'高级操作',url:'tabContent.html',close: true})
})
$(".del").click(function(){
tab.delCurrentTabByElem('contents',function(id){
layer.msg("已删除 '"+id+"' 标签页")
});
})
});
</script>
</body>
</html>

38
public/view/document/tabContent.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多选项卡内容</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary add">新增 Demo</button>
<button class="pear-btn pear-btn del">关闭 当前</button>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['tab','jquery','layer'],function(){
var $ = layui.jquery,
layer = layui.layer,
tab = layui.tab;
$(".add").click(function(){
// ADD 添加方法
parent.layui.tab.addTabOnlyByElem('contents',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
})
$(".del").click(function(){
parent.layui.tab.delCurrentTabByElem('contents',function(id){
layer.msg("已删除 '"+id+"' 标签页")
});
})
})
</script>
</html>

412
public/view/document/table.html Normal file
View File

@ -0,0 +1,412 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<style>
.expand.pear-btn:hover {
color: currentColor;
background: none;
}
.expand.pear-btn {
border: 1px solid rgba(255, 255, 255, 0)
}
</style>
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form id="userForm" class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline" style="margin-left: 50px;">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
<button type="button" class="pear-btn pear-btn-md expand">
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
</div>
</div>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
class="layui-icon layui-icon-delete"></i></button>
<button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
checked="{{ d.enable == 0 ? 'true' : 'false' }}">
</script>
<script type="text/html" id="user-sex">
{{#if (d.sex == 1) { }}
<span>男</span>
{{# }else if(d.sex == 2){ }}
<span>女</span>
{{# } }}
</script>
<script type="text/html" id="user-login">
{{#if (d.login == 0) { }}
<span>在线</span>
{{# }else if(d.sex == 1){ }}
<span>离线</span>
{{# } }}
</script>
<script type="text/html" id="user-createTime">
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>
<div style="display: none;">
<div class="layer-top">
<br />
<h3>上侧弹层内容...</h3>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let drawer = layui.drawer;
let dropdown = layui.dropdown;
let MODULE_PATH = "/system/user/";
formToggle({
elem: "#userForm",
});
function formToggle(options) {
var defaultsOpt = {
isExpand: false,
prefixIcon: "layui-icon",
toggleIcon: ['layui-icon-down', 'layui-icon-up'],
toggleText: ['展开', '折叠'],
}
var opt = $.extend({}, defaultsOpt, options);
var elem = opt.elem; // 绑定的表单元素,必填
var min = opt.min; // 最小显示数,默认显示一行
var isExpand = opt.isExpand; // 初始展开
var prefixIcon = opt.prefixIcon + " "; // 图标前缀
var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
var toggleText = opt.toggleText; // 折叠和展开时的文本
var eleDOM = $(elem + " .layui-inline");
var firstElTop = eleDOM.first().offset().top;
var targetEl = eleDOM.filter(function(index) {
var isGtMin = (index + 1) > min;
var isGtFirstElTop = $(this).offset().top > firstElTop;
var isNeqLast = (index + 1) != eleDOM.length;
return min ? isGtMin && isNeqLast : isGtFirstElTop && isNeqLast;
});
var unExpandIcon = prefixIcon + toggleIcon[0];
var expandIcon = prefixIcon + toggleIcon[1];
var unExpandText = toggleText[0];
var expandText = toggleText[1];
var btnSelector = elem + " .expand";
$(btnSelector).append("<i></i>")
if (targetEl.length > 0) {
if (isExpand) {
$(btnSelector).prepend("<span>" + expandText + "</span>");
$(btnSelector + ">i").addClass(expandIcon);
} else {
$(btnSelector).prepend("<span>" + unExpandText + "</span>")
$(btnSelector + ">i").addClass(unExpandIcon)
targetEl.addClass("layui-hide");
}
$(btnSelector).click(function() {
isExpand = !isExpand;
if (isExpand) {
$(btnSelector + ">span").html(expandText);
$(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon);
targetEl.removeClass("layui-hide")
} else {
$(btnSelector + ">span").html(unExpandText);
$(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon);
targetEl.addClass("layui-hide")
}
})
}
}
let cols = [
[{
type: 'checkbox'
},
{
title: '账号',
field: 'username',
align: 'center',
width: 100
},
{
title: '姓名',
field: 'realName',
align: 'center'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: 80,
templet: '#user-sex'
},
{
title: '电话',
field: 'phone',
align: 'center'
},
{
title: '启用',
field: 'enable',
align: 'center',
templet: '#user-enable'
},
{
title: '登录',
field: 'login',
align: 'center',
templet: '#user-login'
},
{
title: '注册',
field: 'createTime',
align: 'center',
templet: '#user-createTime'
},
{
title: '操作',
toolbar: '#user-bar',
align: 'left',
width: 160,
fixed: 'right'
}
]
]
table.render({
elem: '#user-table',
url: '../../admin/data/table.json',
page: true,
cols: cols,
skin: 'line',
toolbar: '#user-toolbar',
defaultToolbar: [{
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'],
done: function(res, curr, count) {
for (var i = 0; i < res.data.length; i++) {
dropdown.render({
elem: '#more_' + res.data[i].userId,
data: [{
title: 'menu item11',
id: 100
}, {
title: 'menu item22',
id: 101
}, {
title: 'menu item33',
id: 102
}],
id: '#more_' + res.data[i].userId,
click: function(obj) {
layer.tips('点击了：' + obj.title, this.elem, {
tips: [1, '#5FB878']
})
}
});
}
}
});
table.on('tool(user-table)', function(obj) {
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
}
});
table.on('toolbar(user-table)', function(obj) {
if (obj.event === 'add') {
window.add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'batchRemove') {
window.batchRemove(obj);
}
});
form.on('submit(user-query)', function(data) {
table.reload('user-table', {
where: data.field
})
return false;
});
form.on('switch(user-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
});
window.add = function() {
drawer.open({
direction: "top",
dom: ".layer-top",
distance: "30%"
});
}
window.edit = function(obj) {
layer.msg("修改");
}
window.remove = function(obj) {
layer.confirm('确定要删除该用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "remove/" + obj.data['userId'],
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
obj.del();
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].userId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
table.reload('user-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.refresh = function(param) {
table.reload('user-table');
}
})
</script>
</body>
</html>

265
public/view/document/tag.html Normal file
View File

@ -0,0 +1,265 @@
<!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" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Tag 标签组件
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">主题风格</div>
<div class="layui-card-body">
<div class="layui-btn-container tag">
<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag">
<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">动态操作</div>
<div class="layui-card-body">
<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
tag.add('demo', {text: '新选项',id: 12})
tag.delete('demo', '44');
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">圆角风格</div>
<div class="layui-card-body">
<div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-filter="test" lay-newTags="true">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">删除功能</div>
<div class="layui-card-body">
<div class="layui-btn-container tag" lay-allowclose="true">
<button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
<button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
<button lay-id="55" type="button" class="tag-item tag-item-danger">订单管理</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-allowclose="true">
<button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
<button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
tag.on('delete(demo)', function(data) {
console.log('删除');
console.log(this);
console.log(data.index);
console.log(data.elem);
console.log(data.othis);
});
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">新建功能</div>
<div class="layui-card-body">
<div class="layui-btn-container tag" lay-newTag="true">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-newTags="true">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
</div>
tag.on('add(demo)', function(data) {
console.log('新建');
console.log(this);
console.log(data.index);
console.log(data.elem);
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['tag', 'code', 'element'], function() {
var $ = layui.jquery,
tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块
layui.code();
tag.render("test", {
skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式
tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
});
var active = {
tagAdd: function() {
//新增一个Tag项
tag.add('demo', {
text: '新选项' + (Math.random() * 1000 | 0) //用于演示
,
id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
})
},
tagDelete: function(othis) {
//删除指定Tag项
tag.delete('demo', '44'); //删除：“商品管理”
othis.addClass('layui-btn-disabled');
}
};
$('.site-demo-active').on('click', function() {
var othis = $(this),
type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
tag.on('click(demo)', function(data) {
console.log('点击');
console.log(this); //当前Tag标签所在的原始DOM元素
console.log(data.index); //得到当前Tag的所在下标
console.log(data.elem); //得到当前的Tag大容器
});
tag.on('add(demo)', function(data) {
console.log('新增');
console.log(this); //当前Tag标签所在的原始DOM元素
console.log(data.index); //得到当前Tag的所在下标
console.log(data.elem); //得到当前的Tag大容器
console.log(data.othis); //得到新增的DOM对象
//return false; //返回false 取消新增操作； 同from表达提交事件。
});
tag.on('delete(demo)', function(data) {
console.log('删除');
console.log(this); //当前Tag标签所在的原始DOM元素
console.log(data.index); //得到当前Tag的所在下标
console.log(data.elem); //得到当前的Tag大容器
});
});
</script>
</body>
</html>

93
public/view/document/tinymce.html Normal file
View File

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>文本编辑</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
开发环境
</div>
<div class="layui-card-body">
Tinymce 文本编辑器
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link href="component/pear/css/pear.css" rel="stylesheet" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">富文本编辑器</div>
<div class="layui-card-body">
<textarea name="" id="edit" cols="30" rows="10"></textarea>
<div class="layui-btn-group" style="margin-top: 10px">
<button class="pear-btn pear-btn-primary" lay-event="getContent">获取内容</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['tinymce'], function() {
var tinymce = layui.tinymce
var edit = tinymce.render({
elem: "#edit",
height: 400
});
edit.getContent()
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['tinymce', 'util', 'layer','code','element'], function() {
var tinymce = layui.tinymce
var util = layui.util;
layui.code();
var edit = tinymce.render({
elem: "#edit",
height: 400
});
util.event('lay-event', {
getContent: function() {
console.log(edit.getContent())
layer.msg("展开控制台查看")
}
});
});
</script>
</body>
</html>

291
public/view/document/toast.html Normal file
View File

@ -0,0 +1,291 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通知组件</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
toast 用于 消息通知 场景
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
或
<link rel="stylesheet" href="component/pear/css/pear-module/toast.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">消息提醒</div>
<div class="layui-card-body">
<div>
<span>toast.success({title:"成功消息",message:"消息描述"})</span>
<br>
<br>
<span>toast.error({title:"危险消息",message:"消息描述"})</span>
<br>
<br>
<span>toast.warning({title:"警告消息",message:"消息描述"})</span>
<br>
<br>
<span>toast.info({title:"通知消息",message:"消息描述"})</span>
<br>
<br>
</div>
<button class="toast-info pear-btn pear-btn-primary">通用消息</button>
<button class="toast-success pear-btn pear-btn-success">成功消息</button>
<button class="toast-failure pear-btn pear-btn-danger">错误消息</button>
<button class="toast-warning pear-btn pear-btn-warming">警告消息</button>
<button class="toast-question pear-btn">问题消息</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
var toast = layui.toast;
toast.success({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
toast.info({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
toast.warning({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
toast.error({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
toast.question({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
不同位置
</div>
<div class="layui-card-body">
<button class="toast-top-left-btn pear-btn">上左</button>
<button class="toast-top-center-btn pear-btn">上中</button>
<button class="toast-top-right-btn pear-btn">上右</button>
<button class="toast-bottom-left-btn pear-btn">下左</button>
<button class="toast-bottom-center-btn pear-btn">下中</button>
<button class="toast-bottom-right-btn pear-btn">下右</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
var toast = layui.toast;
$(".toast-top-left-btn").click(function(){
toast.success({title: 'Caution',message: 'You forgot important data',position: 'topLeft'});
})
$(".toast-top-center-btn").click(function(){
toast.success({title: 'Caution',message: 'You forgot important data',position: 'topCenter'});
})
$(".toast-top-right-btn").click(function(){
toast.success({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
})
$(".toast-bottom-left-btn").click(function(){
toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomLeft'});
})
$(".toast-bottom-center-btn").click(function(){
toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomCenter'});
})
$(".toast-bottom-right-btn").click(function(){
toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomRight'});
})
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
消息移除
</div>
<div class="layui-card-body">
<button class="pear-btn" id="closeAll">移除全部</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
var toast = layui.toast;
toast.destroy();
})
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['toast', 'toast', 'jquery', 'layer', 'code', 'element'], function() {
var toast = layui.toast;
var layer = layui.layer;
var $ = layui.jquery;
var toast = layui.toast;
layui.code();
toast.success({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
toast.info({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
toast.error({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
toast.warning({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
toast.question({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
$(".toast-success").click(function() {
toast.success({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
})
$(".toast-failure").click(function() {
toast.error({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
})
$(".toast-warning").click(function() {
toast.warning({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
})
$(".toast-info").click(function() {
toast.info({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
})
$(".toast-question").click(function() {
toast.question({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
})
$(".toast-top-left-btn").click(function(){
toast.info({
title: 'Caution',
message: 'You forgot important data',
position: 'topLeft'
});
})
$(".toast-top-center-btn").click(function(){
toast.info({
title: 'Caution',
message: 'You forgot important data',
position: 'topCenter'
});
})
$(".toast-top-right-btn").click(function(){
toast.info({
title: 'Caution',
message: 'You forgot important data',
position: 'topRight'
});
})
$(".toast-bottom-left-btn").click(function(){
toast.info({
title: 'Caution',
message: 'You forgot important data',
position: 'bottomLeft'
});
})
$(".toast-bottom-center-btn").click(function(){
toast.info({
title: 'Caution',
message: 'You forgot important data',
position: 'bottomCenter'
});
})
$(".toast-bottom-right-btn").click(function(){
toast.info({
title: 'Caution',
message: 'You forgot important data',
position: 'bottomRight'
});
})
$("#closeAll").click(function() {
toast.destroy();
});
});
</script>
</html>

279
public/view/document/topBar.html Normal file
View File

@ -0,0 +1,279 @@
<!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="../../admin/css/other/console1.css" />
</head>
<body class="pear-container">
<div>
<div class="layui-row layui-col-space10">
<div class="layui-card">
<div class="layui-card-header">动态</div>
<div class="layui-card-body">
<dl class="layuiadmin-card-status">
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
<span>几秒前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>2天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
<span>几秒前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>2天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
<span>几秒前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>2天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
<span>几秒前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>2天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>次等水货 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
<span>几秒前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>2天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
src="../../admin/images/avatar.jpg"></a></div>
<div>
<p>微笑刺客 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>8天前</span>
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!--</div>-->
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['layer', 'element','topBar'], function() {
var $ = layui.jquery,
layer = layui.layer,
element = layui.element;
});
</script>
</body>
</html>

235
public/view/document/treetable.html Normal file
View File

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形表格</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">关键字</label>
<div class="layui-input-inline">
<input type="text" name="keyword" placeholder="" class="layui-input">
</div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="power-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="power-table" lay-filter="power-table"></table>
</div>
</div>
<script type="text/html" id="power-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
<i class="layui-icon layui-icon-spread-left"></i>
展开
</button>
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
<i class="layui-icon layui-icon-shrink-right"></i>
折叠
</button>
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="reload">
<i class="layui-icon layui-icon-refresh"></i>
重载
</button>
</script>
<script type="text/html" id="power-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="power-type">
{{#if (d.powerType == '0') { }}
<span>目录</span>
{{# }else if(d.powerType == '1'){ }}
<span>菜单</span>
{{# }else if(d.powerType == '2'){ }}
<span>按钮</span>
{{# } }}
</script>
<script type="text/html" id="power-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.id == 10003 ? 'true' : 'false' }}">
</script>
<script type="text/html" id="icon">
<i class="layui-icon {{d.icon}}"></i>
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table','form','jquery','treetable'],function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let treetable = layui.treetable;
let MODULE_PATH = "../system/operate/";
treetable.render({
treeColIndex: 1,
treeSpid: 0,
treeIdName: 'powerId',
treePidName: 'parentId',
skin:'line',
treeDefaultClose: true,
toolbar:'#power-toolbar',
elem: '#power-table',
url: '../../admin/data/power.json',
page: false,
cols: [
[
{type: 'checkbox'},
{field: 'powerName', minWidth: 200, title: '权限名称'},
{field: 'icon', title: '图标',templet:'#icon'},
{field: 'powerType', title: '权限类型',templet:'#power-type'},
{field: 'enable', title: '是否可用',templet:'#power-enable'},
{field: 'sort', title: '排序'},
{title: '操作',templet: '#power-bar', width: 150, align: 'center'}
]
]
});
table.on('tool(power-table)',function(obj){
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
}
})
table.on('toolbar(power-table)', function(obj){
if(obj.event === 'add'){
window.add();
} else if(obj.event === 'refresh'){
window.refresh();
} else if(obj.event === 'batchRemove'){
window.batchRemove(obj);
} else if(obj.event === 'expandAll'){
treetable.expandAll("#power-table");
} else if(obj.event === 'foldAll'){
treetable.foldAll("#power-table");
} else if(obj.event === 'reload'){
treetable.reload("#power-table");
}
});
form.on('submit(power-query)', function(data) {
var keyword = data.field.keyword;
treetable.search('#power-table',keyword);
return false;
});
window.add = function(){
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['450px', '500px'],
content: MODULE_PATH + 'add.html'
});
}
window.edit = function(obj){
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['450px', '500px'],
content: MODULE_PATH + 'edit.html'
});
}
window.remove = function(obj){
layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH+"remove/"+obj.data['powerId'],
dataType:'json',
type:'delete',
success:function(result){
layer.close(loading);
if(result.success){
layer.msg(result.msg,{icon:1,time:1000},function(){
obj.del();
});
}else{
layer.msg(result.msg,{icon:2,time:1000});
}
}
})
});
}
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].powerId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些数据', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
table.reload('user-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
})
</script>
</body>
</html>

161
public/view/document/watermark.html Normal file
View File

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水印组件</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
watermark 用于水印叠加
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">水印创建</div>
<div class="layui-card-body">
<button class="btntype1 pear-btn pear-btn-primary">单行水印</button>
<button class="btntype2 pear-btn pear-btn-danger">多行水印</button>
<button class="btntype3 pear-btn pear-btn-warming">叠加目标</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['watermark'], function() {
var watermark = layui.watermark;
var mark_node=new watermark({
content: "单行水印"
});
new watermark({
content: "多行水印1<br>多行水印2",
height:40
});
new watermark({
content: "指定容器上",
appendTo:'#water_div',
});
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">指定容器水印</div>
<div class="layui-card-body">
<div id="water_div"
style="width: 600px;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid gainsboro;
background-color: #EEE;
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center">
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">移除水印</div>
<div class="layui-card-body">
<button class="btnclose pear-btn pear-btn-primary">销毁水印</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['watermark'], function() {
var popup = layui.popup;
mark_node.destroy();
})
</pre>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['watermark', 'jquery', 'code'], function() {
var popup = layui.popup;
var $ = layui.jquery;
var watermark = layui.watermark;
layui.code();
var mark_node = null;
function remove_water_marker(){
mark_node && mark_node.destroy();
mark_node = null;
}
$(".btntype1").click(function() {
remove_water_marker();
mark_node=new watermark({
content: "单行水印"
});
})
$(".btntype2").click(function() {
remove_water_marker();
mark_node =new watermark({
content: "多行水印1<br>第二行长多行水印2",
height:40
});
})
$(".btntype3").click(function() {
remove_water_marker();
mark_node = new watermark({
content: "指定目标上",
appendTo:'#water_div',
});
})
$(".btnclose").click(function() {
remove_water_marker();
})
})
</script>
</html>

47
public/view/echarts/column.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条状图表</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/result.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div id="column1" style="min-height:400px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div id="column2" style="min-height:400px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div id="column3" style="min-height:400px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div id="column4" style="min-height:400px;"></div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="script/column1.js"></script>
<script src="script/column2.js"></script>
<script src="script/column3.js"></script>
<script src="script/column4.js"></script>
</body>
</html>

47
public/view/echarts/line.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折线图表</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/result.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div id="line1" style="min-height:400px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div id="line2" style="min-height:400px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div id="line3" style="min-height:400px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div id="line4" style="min-height:400px;"></div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="script/line1.js"></script>
<script src="script/line2.js"></script>
<script src="script/line3.js"></script>
<script src="script/line4.js"></script>
</body>
</html>

137
public/view/echarts/script/column1.js Normal file
View File

@ -0,0 +1,137 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var column1 = echarts.init(document.getElementById('column1'),null, {
width: 600,
height: 400
});
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' ,
color: '#fff',
fontSize: '26'
}
},
legend: {
top:'5%',
right:'10%',
data: ['猕猴桃', '香蕉'],
fontSize:12,
color:'#808080',
icon:'rect'
},
grid: {
top:60,
left:50,
bottom:60,
right:60
},
xAxis: [{
type: 'category',
axisTick:{
show:false
},
axisLine:{
show:false
},
axisLabel:{
color:'#4D4D4D',
fontSize:14,
margin:21,
fontWeight:'bold'
},
data: ['第一周', '第二周', '第三周', '第四周'],
}],
yAxis: [{
name:'单位：万',
nameTextStyle:{
color:'#808080',
fontSize:12,
padding:[0, 0, 0, -5]
},
max: function(value) {
if(value.max<5){
return 5
}else{
return value.max
}
},
type: 'value',
axisLine:{
show:false
},
axisLabel:{
color:'#808080',
fontSize:12,
margin:5
},
splitLine:{
show:false
},
axisTick:{
show:false
}
}],
series: [
{
name: '猕猴桃',
type: 'bar',
label:{
show:true,
position:'top',
fontSize:14,
color:'#3DC3F0',
fontWeight:'bold'
},
barMaxWidth:60,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#3DC3F0' // 0% 处的颜色
}, {
offset: 1, color: '#CCF2FF' // 100% 处的颜色
}]
},
data: [60, 110, 180, 100]
},
{
name: '香蕉',
type: 'bar',
label:{
show:true,
position:'top',
fontSize:14,
color:'#3D8BF0',
fontWeight:'bold'
},
barMaxWidth:60,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#3D8BF0' // 0% 处的颜色
}, {
offset: 1, color: '#CCE2FF' // 100% 处的颜色
}]
},
data: [90, 130, 170, 130]
}
]
};
column1.setOption(option);
window.onresize = function() {
column1.resize();
}
})

73
public/view/echarts/script/column2.js Normal file
View File

@ -0,0 +1,73 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var column2 = echarts.init(document.getElementById('column2'),null, {
width: 600,
height: 400
});
var data = [1000, 600, 500, 300];
option = {
backgroundColor: '#ffffff',
title: {
text: 'ETC交易成功率',
left: 'center',
top: 2,
fontSize: 20
},
color: ['#fed46b','#2194ff', ],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
legend: {
left: 'center',
bottom: '2%',
data: ['去年', '今年', ]
},
xAxis: [{
type: 'category',
data: ['09-22', '09-22', '09-22', '09-22', '09-22', '09-22', '09-22'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
barMaxWidth: '30',
label:{
show:true,
position:'top',
formatter:function(params){
return params.value+'%'
}
},
series: [
{
name: '去年',
type: 'bar',
data: [90, 52, 90, 80, 90, 70, 90]
},
{
name: '今年',
type: 'bar',
data: [10, 52, 90, 70, 90, 70, 90]
},
]
};
column2.setOption(option);
window.onresize = function() {
column2.resize();
}
})

120
public/view/echarts/script/column3.js Normal file
View File

@ -0,0 +1,120 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var column3 = echarts.init(document.getElementById('column3'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
backgroundColor: '#fff',
tooltip: {
trigger: "axis",
padding: [8, 10],
backgroundColor: 'rgba(255,255,255,0.5)',
axisPointer: {
type: "shadow",
color: "#fff"
}
},
legend: {
data: ['新开会员', '激活会员', '关闭会员'],
align: 'left',
right: 0,
color: "#333",
fontSize: 14,
fontWeight: 200,
itemWidth: 14,
itemHeight: 14,
itemGap: 35
},
grid: {
left: '0',
right: '0',
bottom: '8%',
top: '15%',
containLabel: true
},
label: {
show: true,
position: 'top',
color: '#333',
fontSize: 14,
fontWeight: 700
},
xAxis: [{
type: 'category',
offset: 10,
data: ['团队1', '团队2', '团队3', '团队4'],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: "#333",
fontSize: 16,
fontWeight: 200
},
}],
yAxis: [{
type: 'value',
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
}],
series: [{
name: '新开会员',
type: 'bar',
data: [20, 34, 18, 14, 16],
barWidth: 22, //柱子宽度
barGap: 1, //柱子之间间距
itemStyle: {
color: '#0071c8',
opacity: 1,
}
}, {
name: '激活会员',
type: 'bar',
data: [10, 24, 5, 24, 16],
barWidth: 22,
barGap: 1,
itemStyle: {
color: '#fdc508',
opacity: 1,
}
}, {
name: '关闭会员',
type: 'bar',
data: [7, 24, 18, 20, 6],
barWidth: 22,
barGap: 1,
itemStyle: {
color: '#dfeafc',
opacity: 1,
}
}]
};
column3.setOption(option);
window.onresize = function() {
column3.resize();
}
})

84
public/view/echarts/script/column4.js Normal file
View File

@ -0,0 +1,84 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var column4 = echarts.init(document.getElementById('column4'),null, {
width: 600,
height: 400
});
option = {
backgroundColor:'#fff',
title:{
text:"描边柱状图",
top:10,
left:15,
color:"#35598d",
fontSize:16,
fontWeight:'normal'
},
tooltip: {
trigger: 'axis',
formatter:'{b}：{c}',
},
grid: {
left: '5%',
right: '6%',
bottom: '3%',
top: '20%',
containLabel: true
},
xAxis :{
type : 'category',
data : ['策略1','策略2','策略3','策略4','策略5','策略6','策略7','策略8','策略9'],
axisLabel:{ //坐标轴字体颜色
color: '#9eaaba'
},
axisLine:{
lineStyle:{
color:"#e5e5e5"
}
},
axisTick:{ //y轴刻度线
show:false
},
splitLine:{ //网格
show: false,
}
},
yAxis :{
type : 'value',
axisLabel:{ //坐标轴字体颜色
color: '#9eaaba'
},
axisLine:{
show:false,
},
axisTick:{ //y轴刻度线
show:false
},
splitLine:{ //网格
show: true,
lineStyle:{
color:'#dadde4',
type:"dashed" //坐标网线类型
}
}
},
series:{
name:'',
type:'bar',
barWidth : '40%', //柱子宽度
itemStyle:{ //柱子颜色
borderWidth: 2,
borderColor: 'rgb(79, 116, 223)',
color:'rgba(79, 116, 223, .3)',
},
data:[320, 332, 301, 334, 390, 330, 320, 230, 156]
}
};
column4.setOption(option);
window.onresize = function() {
column4.resize();
}
})

236
public/view/echarts/script/line1.js Normal file
View File

@ -0,0 +1,236 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var line2 = echarts.init(document.getElementById('line2'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
backgroundColor: '#fff',
title: {
text: '全国6月销售统计',
fontSize: 12,
fontWeight: 400,
left: 'center',
top: '5%'
},
legend: {
icon: 'circle',
top: '5%',
right: '5%',
itemWidth: 6,
itemGap: 20,
color: '#556677'
},
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
backgroundColor: '#fff',
color: '#556677',
borderColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(0,0,0,0)',
shadowOffsetY: 0
},
lineStyle: {
width: 0
}
},
backgroundColor: '#fff',
color: '#5c6c7c',
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
grid: {
top: '15%'
},
xAxis: [{
type: 'category',
data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
axisLine: {
lineStyle: {
color: '#DCE2E8'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
color: '#556677',
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 15
},
axisPointer: {
label: {
// padding: [11, 5, 7],
padding: [0, 0, 10, 0],
// 这里的margin和axisLabel的margin要一致!
margin: 15,
// 移入时的字体大小
fontSize: 12,
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#fff' // 0% 处的颜色
}, {
// offset: 0.9,
offset: 0.86,
color: '#fff' // 0% 处的颜色
}, {
offset: 0.86,
color: '#33c0cd' // 0% 处的颜色
}, {
offset: 1,
color: '#33c0cd' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
boundaryGap: false
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#DCE2E8'
}
},
axisLabel: {
color: '#556677',
},
splitLine: {
show: false
}
}, {
type: 'value',
position: 'right',
axisTick: {
show: false
},
axisLabel: {
color: '#556677',
formatter: '{value}'
},
axisLine: {
show: true,
lineStyle: {
color: '#DCE2E8'
}
},
splitLine: {
show: false
}
}],
series: [{
name: 'Adidas',
type: 'line',
data: [10, 10, 30, 12, 15, 3, 7],
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: true,
lineStyle: {
width: 5,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#9effff'
},
{
offset: 1,
color: '#9E87FF'
}
]),
shadowColor: 'rgba(158,135,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
color: colorList[0],
borderColor: colorList[0]
}
}, {
name: 'Nike',
type: 'line',
data: [5, 12, 11, 14, 25, 16, 10],
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: true,
lineStyle: {
width: 5,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
offset: 0,
color: '#73DD39'
},
{
offset: 1,
color: '#73DDFF'
}
]),
shadowColor: 'rgba(115,221,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
color: colorList[1],
borderColor: colorList[1]
}
},
{
name: '老北京布鞋',
type: 'line',
data: [150, 120, 170, 140, 500, 160, 110],
symbolSize: 1,
yAxisIndex: 1,
symbol: 'circle',
smooth: true,
showSymbol: true,
lineStyle: {
width: 5,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#fe9a'
},
{
offset: 1,
color: '#fe9a8b'
}
]),
shadowColor: 'rgba(254,154,139, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
color: colorList[2],
borderColor: colorList[2]
}
}
]
};
line2.setOption(option);
window.onresize = function() {
line2.resize();
}
})

148
public/view/echarts/script/line2.js Normal file
View File

@ -0,0 +1,148 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var line1 = echarts.init(document.getElementById('line1'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
backgroundColor: '#fff',
tooltip: {
show: false
},
grid: {
top: '10%',
bottom: '6%',
left: '6%',
right: '6%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
fontSize: 14,
color: 'rgba(#999)'
},
splitLine: {
show: true,
lineStyle: {
color: '#939ab6',
opacity: .15
}
},
data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
},],
yAxis: [{
type: 'value',
offset: 15,
max: 100,
min: 0,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
margin: 10,
fontSize: 14,
color: '#999'
},
splitLine: {
show: false
}
}],
series: [{
name: '2',
type: 'line',
z: 3,
showSymbol: false,
smoothMonotone: 'x',
lineStyle: {
width: 3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(59,102,246)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(118,237,252)' // 100% 处的颜色
}]
},
shadowBlur: 4,
shadowColor: 'rgba(69,126,247,.2)',
shadowOffsetY: 4
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(227,233,250,.9)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(248,251,252,.3)' // 100% 处的颜色
}]
}
},
smooth: true,
data: [20, 56, 17, 40, 68, 42]
},{
name: '1',
type: 'line',
showSymbol: false,
smoothMonotone: 'x',
lineStyle: {
width: 3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,84,108)'
}, {
offset: 1,
color: 'rgba(252,140,118)'
}], false),
shadowBlur: 4,
shadowColor: 'rgba(253,121,128,.2)',
shadowOffsetY: 4
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,84,108,.15)'
}, {
offset: 1,
color: 'rgba(252,140,118,0)'
}], false),
},
smooth: true,
data: [20, 71, 8, 50, 57, 32]
}
]
};
line1.setOption(option);
window.onresize = function() {
line1.resize();
}
})

102
public/view/echarts/script/line3.js Normal file
View File

@ -0,0 +1,102 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var line3 = echarts.init(document.getElementById('line3'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
backgroundColor: '#fff',
title: {
text: "告警数",
left: "18px",
top: "0",
color: "#999",
fontSize: 12,
fontWeight: '400'
},
color: ['#73A0FA', '#73DEB3', '#FFB761'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
},
lineStyle: {
type: 'dashed'
}
}
},
grid: {
left: '25',
right: '25',
bottom: '24',
top: '75',
containLabel: true
},
legend: {
data: ['上周', '本周'],
orient: 'horizontal',
icon: "rect",
show: true,
left: 20,
top: 25,
},
xAxis: {
type: 'category',
data: ['爱立信端局', '中兴端局', '爱立信HSS', '中兴HSS', '华为HSS', '华为智能网', '中兴VIMS'],
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#999',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#F3F4F4'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
series: [{
name: '上周',
type: 'line',
smooth: true,
data: [1800, 1000, 2000, 1000, 500, 100, 1200]
},
{
name: '本周',
type: 'line',
smooth: true,
data: [1700, 999, 1100, 899, 199, 99, 1000]
}
]
};
line3.setOption(option);
window.onresize = function() {
line3.resize();
}
})

167
public/view/echarts/script/line4.js Normal file
View File

@ -0,0 +1,167 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var line4 = echarts.init(document.getElementById('line4'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
title: {
text: '用电量'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['2018', '2019']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,//坐标轴两边留白
data: ['12201', '12202', '12203','12204','12301','12302','12303','12304','12401', '12402', '12403','12404'],
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
// margin:15,
color: '#1B253A',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
formatter:function(params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 4; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName
},
//rotate:50,
},
axisTick:{//坐标轴刻度相关设置。
show: false,
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'#E5E9ED',
// opacity:0.2
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
color: '#E5E9ED',
// opacity:0.1
}
}
},
yAxis: [
{
type: 'value',
splitNumber: 5,
axisLabel: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#E5E9ED',
// opacity:0.1
}
}
}
],
series: [
{
name: '2018',
type: 'line',
itemStyle: {
color:'#3A84FF',
lineStyle: {
color: "#3A84FF",
width:1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(58,132,255,0)'
}, {
offset: 1,
color: 'rgba(58,132,255,0.35)'
}]),
}
},
data: [ 1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4]
},
{
name: '2019',
type: 'line',
itemStyle: {
color:'rgba(255,80,124,1)',
lineStyle: {
color: "rgba(255,80,124,1)",
width:1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(255,80,124,0)'
}, {
offset: 1,
color: 'rgba(255,80,124,0.35)'
}]),
}
},
data: [9, 5,7,8,6,7,8,7,7,6,8,6]
}
]
};
line4.setOption(option);
window.onresize = function() {
line4.resize();
}
})

21
public/view/error/403.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
<link href="../../admin/css/other/error.css" rel="stylesheet" />
</head>
<body>
<div class="content">
<img src="../../admin/images/403.svg" alt="">
<div class="content-r">
<h1>403</h1>
<p>抱歉，你无权访问该页面</p>
<button class="pear-btn pear-btn-primary">返回首页</button>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
</body>
</html>

21
public/view/error/404.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
<link href="../../admin/css/other/error.css" rel="stylesheet" />
</head>
<body>
<div class="content">
<img src="../../admin/images/404.svg" alt="">
<div class="content-r">
<h1>404</h1>
<p>抱歉，你访问的页面不存在或仍在开发中</p>
<button class="pear-btn pear-btn-primary">返回首页</button>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
</body>
</html>

21
public/view/error/500.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
<link href="../../admin/css/other/error.css" rel="stylesheet" />
</head>
<body>
<div class="content">
<img src="../../admin/images/500.svg" alt="">
<div class="content-r">
<h1>500</h1>
<p>抱歉，服务器出错了</p>
<button class="pear-btn pear-btn-primary">返回首页</button>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
</body>
</html>

45
public/view/result/error.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>失败</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/result.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<div class="result">
<div class="error">
<svg viewBox="64 64 896 896" data-icon="close-circle" width="80px" height="80px" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg>
</div>
<h2 class="title">提交失败</h2>
<p class="desc">
请核对并修改以下信息后，再重新提交。如果仅是简单操作，使用 Message 全局提示反馈即可。
本文字区域可以展示简单的补充说明，如果有类似展示
“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。
</p>
<div class="content">
</div>
<div class="action">
<button class="pear-btn pear-btn-primary">返回修改</button>
&nbsp;&nbsp;&nbsp;
<button class="pear-btn">返回首页</button>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['jquery'],function(){
setTimeout(function(){
top.layui.tab.delCurrentTabByElem("content",function(){
/// 回调
})
},3000)
})
</script>
</body>
</html>

37
public/view/result/success.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>成功</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/result.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<div class="result">
<div class="success">
<svg viewBox="64 64 896 896" data-icon="check-circle" width="80px" height="80px" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg>
</div>
<h2 class="title">提交成功</h2>
<p class="desc">
提交结果页用于反馈一系列操作任务的处理结果，
如果仅是简单操作，使用 Message 全局提示反馈即可。
本文字区域可以展示简单的补充说明，如果有类似展示
“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。
</p>
<div class="content">
</div>
<div class="action">
<button class="pear-btn pear-btn-primary">再次申请</button>
&nbsp;&nbsp;&nbsp;
<button class="pear-btn">返回首页</button>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
</body>
</html>

289
public/view/system/deptment.html Normal file
View File

@ -0,0 +1,289 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>部门管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/department.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-body">
<div id="organizationTreeContent" style="overflow: auto">
<ul id="organizationTree" class="dtree organizationTree" data-id="9527"></ul>
</div>
</div>
</div>
</div>
<div class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-body">
<table id="organization-table" lay-filter="organization-table"></table>
</div>
</div>
</div>
</div>
<script type="text/html" id="organization-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="organization-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
class="layui-icon layui-icon-delete"></i></button>
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery', 'dtree'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let dtree = layui.dtree;
let MODULE_PATH = "operate/";
let cols = [
[{
type: 'checkbox'
},
{
title: '名称',
field: 'name',
align: 'center'
},
{
title: '人数',
field: 'userCount',
align: 'center'
},
{
title: '位置',
field: 'location',
align: 'center'
},
{
title: '负责人',
field: 'leader',
align: 'center'
},
{
title: '操作',
toolbar: '#organization-bar',
align: 'center',
width: 130
}
]
]
var DTree = dtree.render({
elem: "#organizationTree",
//data: data,
initLevel: "2", //默认展开层级为1
line: true, // 有线树
ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
method: 'get',
url: "../../admin/data/organizationtree.json"
});
table.render({
elem: '#organization-table',
url: '../../admin/data/organization.json',
height: 'full-150',
page: true,
cols: cols,
skin: 'line',
toolbar: '#organization-toolbar',
defaultToolbar: [{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports']
});
// 绑定节点点击事件
dtree.on("node(organizationTree)", function(obj) {
if (!obj.param.leaf) {
var $div = obj.dom;
DTree.clickSpread($div); //调用内置函数展开节点
} else {
layer.msg("叶子节点就不展开了,刷新右侧列表");
table.reload("organization-table");
}
});
table.on('tool(organization-table)', function(obj) {
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
}
});
table.on('toolbar(organization-table)', function(obj) {
if (obj.event === 'add') {
window.add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'batchRemove') {
window.batchRemove(obj);
}
});
form.on('submit(organization-query)', function(data) {
table.reload('organization-table', {
where: data.field
})
return false;
});
window.add = function() {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'add.html'
});
}
window.edit = function(obj) {
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'edit.html'
});
}
window.remove = function(obj) {
layer.confirm('确定要删除该用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "remove/" + obj.data['organizationId'],
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
obj.del();
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].organizationId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
table.reload('organization-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.refresh = function(param) {
table.reload('organization-table');
}
})
</script>
</body>
</html>

341
public/view/system/dict.html Normal file
View File

@ -0,0 +1,341 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据字典</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">字典名称</label>
<div class="layui-input-inline">
<input type="text" name="typeName" placeholder="" class="layui-input">
</div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="dict-type-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</form>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<table id="dict-type-table" lay-filter="dict-type-table"></table>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<svg class="empty" style="margin-top: 50px;margin-left: 220px;margin-bottom: 80px;" width="184" height="152"
viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<g transform="translate(24 31.67)">
<ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
<path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
fill="#AEB8C2"></path>
<path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
<path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
<path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
fill="#DCE0E6"></path>
</g>
<path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
fill="#DCE0E6"></path>
<g transform="translate(149.65 15.383)" fill="#FFF">
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
</g>
</g>
</svg>
<table id="dict-data-table" lay-filter="dict-data-table"></table>
</div>
</div>
</div>
</div>
</body>
<script type="text/html" id="dict-type-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="dict-type-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
<i class="layui-icon layui-icon-edit"></i>
</button>
<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="details">
<i class="layui-icon layui-icon-transfer"></i>
</button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
<i class="layui-icon layui-icon-delete"></i>
</button>
</script>
<script type="text/html" id="dict-type-enable">
<input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-type-enable" {{d.enable== '0' ? 'checked' : '' }}>
</script>
<script type="text/html" id="dict-data-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="dict-data-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
</button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
</button>
</script>
<script type="text/html" id="dict-data-enable">
<input type="checkbox" value="{{d.dataId}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-data-enable" {{d.enable== '0' ? 'checked' : '' }}>
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let MODULE_PATH = "operate/";
let typeCode;
let cols = [
[{
type: 'checkbox'
},
{
title: '字典名称',
field: 'typeName',
align: 'center',
width: 120
},
{
title: '描述',
field: 'description',
align: 'center'
},
{
title: '字典状态',
field: 'enable',
align: 'center',
templet: '#dict-type-enable'
},
{
title: '操作',
toolbar: '#dict-type-bar',
align: 'center',
width: 180
}
]
];
let dataCols = [
[{
type: 'checkbox'
},
{
title: '标签',
field: 'dataLabel',
align: 'center',
width: 120
},
{
title: '对应值',
field: 'dataValue',
align: 'center'
},
{
title: '状态',
field: 'enable',
align: 'center',
templet: '#dict-data-enable'
},
{
title: '操作',
toolbar: '#dict-data-bar',
align: 'center',
width: 180
}
]
];
table.render({
elem: '#dict-type-table',
url: "../../admin/data/dictType.json",
page: true,
cols: cols,
skin: 'line',
height: 'full-148',
toolbar: '#dict-type-toolbar',
defaultToolbar: [{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports']
});
window.renderData = function(code) {
typeCode = code;
$(".empty").hide();
table.render({
elem: '#dict-data-table',
url: "../../admin/data/dictData.json",
page: true,
height: 'full-148',
cols: dataCols,
skin: 'line',
toolbar: '#dict-data-toolbar'
});
}
table.on('tool(dict-type-table)', function(obj) {
if (obj.event === 'remove') {
window.removeType(obj);
} else if (obj.event === 'edit') {
window.editType(obj);
} else if (obj.event === 'details') {
window.renderData(obj.data['typeCode'])
}
});
table.on('toolbar(dict-type-table)', function(obj) {
if (obj.event === 'add') {
window.addType();
} else if (obj.event === 'refresh') {
window.refreshType();
} else if (obj.event === 'batchRemove') {
layer.msg("批量删除")
}
});
form.on('submit(dict-type-query)', function(data) {
table.reload('dict-type-table', {
where: data.field
})
return false;
});
form.on('switch(dict-type-enable)', function(obj) {
layer.msg("切换");
});
window.addType = function() {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'add.html'
});
}
window.editType = function(obj) {
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'edit.html'
});
}
window.removeType = function(obj) {
layer.msg("删除");
}
window.refreshType = function() {
table.reload('dict-type-table');
}
window.addData = function() {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '450px'],
content: MODULE_PATH + 'add.html'
});
}
window.editData = function(obj) {
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['500px', '450px'],
content: MODULE_PATH + 'edit.html'
});
}
window.removeData = function(obj) {
layer.msg("删除");
}
table.on('tool(dict-data-table)', function(obj) {
if (obj.event === 'remove') {
window.removeData(obj);
} else if (obj.event === 'edit') {
window.editData(obj);
} else if (obj.event === 'details') {
window.details(obj);
}
});
table.on('toolbar(dict-data-table)', function(obj) {
if (obj.event === 'add') {
window.addData();
} else if (obj.event === 'refresh') {
window.refreshData();
} else if (obj.event === 'batchRemove') {
layer.msg("批量删除")
}
});
form.on('submit(dict-data-query)', function(data) {
data.field.typeCode = typeCode;
table.reload('dict-data-table', {
where: data.field
})
return false;
});
form.on('switch(dict-data-enable)', function(obj) {
layer.msg("切换状态");
});
window.refreshData = function() {
table.reload('dict-data-table');
}
})
</script>
</html>

101
public/view/system/log.html Normal file
View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行为日志</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">登录日志</li>
<li>操作日志</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table style="margin-top: 10px;" id="log-login-table" lay-filter="user-table"></table>
</div>
<div class="layui-tab-item">
<table style="margin-top: 10px;" id="log-operate-table" lay-filter="user-table"></table>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/html" id="log-bar">
{{#if (d.success == true) { }}
<button class="pear-btn pear-btn-sm pear-btn-success" lay-event="edit"><i class="layui-icon layui-icon-ok"></i>
成功</button>
{{# }else if(d.success == false){ }}
<button class="pear-btn pear-btn-sm pear-btn-danger" lay-event="error"><i class="layui-icon layui-icon-help"></i>
异常</button>
{{# } }}
</script>
<script type="text/html" id="log-createTime">
{{layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")}}
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table','form','jquery','element'],function () {
let table = layui.table;
let form = layui.form;
let element = layui.element;
let MODULE_PATH = "/system/logging/";
let cols = [
[
{title: '模块', field: 'title', align:'center'},
{title: '请求方式', field: 'requestMethod', align:'center'},
{title: '接口', field: 'method', align:'center'},
{title: '浏览器', field: 'browser', align:'center'},
{title: '操作地址', field: 'operateAddress',align:'center'},
{title: '操作系统', field: 'systemOs', align:'center'},
{title: '访问时间', field: 'createTime',templet:'#log-createTime', align:'center'},
{title: '操作人', field: 'operateName', align:'center'},
{title: '访问状态', toolbar: '#log-bar', align:'center', width:150}
]
]
table.render({
elem: '#log-operate-table',
url: '../../admin/data/operateLog.json',
page: true ,
cols: cols ,
skin: 'line',
toolbar: false
});
table.render({
elem: '#log-login-table',
url: '../../admin/data/loginLog.json',
page: true ,
cols: cols ,
skin: 'line',
toolbar: false
});
form.on('submit(dict-type-query)', function(data){
table.reload('dict-type-table',{where:data.field})
return false;
});
window.error = function(obj){
layer.open({
type: 1,
title: '异常信息',
shade: 0,
area: ['450px', '350px'],
content: '<div class="pear-container"><div class="layui-card"><div class="layui-card-body">'+obj.data['error']+'</div></div></div>'
});
}
})
</script>
</html>

107
public/view/system/operate.html Normal file
View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>表单页面</title>
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="username" value="854085467" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" value="854085467@qq.com" lay-verify="title"
autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="text" name="password" value="*******" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" value="15555555555" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="form-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(form-save)', function(data) {
$.ajax({
url: '/system/user/save',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
parent.layer.close(parent.layer.getFrameIndex(window
.name)); //关闭当前页
parent.layui.table.reload("form-table");
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
return false;
});
})
</script>
</body>
</html>

108
public/view/system/operate/add.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增页面</title>
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="text" name="password" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="user-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(user-save)', function(data) {
$.ajax({
url: '/system/user/save',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
parent.layer.close(parent.layer.getFrameIndex(window
.name)); //关闭当前页
parent.layui.table.reload("user-table");
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
return false;
});
})
</script>
<script>
</script>
</body>
</html>

109
public/view/system/operate/edit.html Normal file
View File

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改页面</title>
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="username" value="854085467" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" value="854085467@qq.com" lay-verify="title"
autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="text" name="password" value="*******" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" value="15555555555" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="user-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(user-save)', function(data) {
$.ajax({
url: '/system/user/save',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
parent.layer.close(parent.layer.getFrameIndex(window
.name)); //关闭当前页
parent.layui.table.reload("user-table");
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
return false;
});
})
</script>
<script>
</script>
</body>
</html>

108
public/view/system/operate/profile.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头像上传</title>
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
<div class="layui-col-xs9">
<div style="height:325px;background-color: rgb(247, 247, 247);">
<img id="sourceImage" src="">
</div>
</div>
<div class="layui-col-xs3" style="padding-left:0px;">
<div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-form-item">
<div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
<button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button>
<button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button>
<button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button>
<label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" title="选择图片"></label>
<input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
</div>
<div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
</div>
</div>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
layui.use(['jquery','layer','cropper'], function () {
let $ = layui.jquery;
let layer = layui.layer;
let cropper = layui.cropper;
var options = {
aspectRatio: 1 / 1, // 裁剪框比例
preview: '#previewImage', // 预览div
viewmode: 1
};
$("#sourceImage").attr("src", parent.layui.$("#userAvatar").attr("src"));
$("#sourceImage").cropper(options);
window.submitForm = function () {
$("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题
$("#sourceImage").cropper("getCroppedCanvas", {
width: 280,
height: 140
}).toBlob(function (blob) {
var timeStamp = Date.parse(new Date());
var fileName = timeStamp + '.jpg';
var formData = new FormData();
formData.append('file', blob, fileName);
formData.append('fileName', fileName);
formData.append('fileToken', timeStamp);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
var data={
index:parent.layer.getFrameIndex(window.name),
newAvatar : e.target.result
};
console.log(data);
parent.window.callback(data);
};
});
}
$(".pear-btn").on('click', function () {
var event = $(this).attr("cropper-event");
if (event === 'rotate') {
var option = $(this).attr('data-option');
$("#sourceImage").cropper('rotate', option);
} else if (event === 'reset') {
$("#sourceImage").cropper('reset');
}
$("#uploadPicture").change(function () {
var r = new FileReader();
var f = this.files[0];
var uploadFileSize = f.size / 1024;
if (uploadFileSize > 5120) {
parent.layer.msg("上传文件不得超过5m", { icon: 5 });
return false;
}
r.readAsDataURL(f);
r.onload = function (e) {
$("#sourceImage")
.cropper('destroy')
.attr('src', this.result)
.cropper(options);
};
});
});
});
</script>
</body>
</html>

183
public/view/system/person.html Normal file
View File

@ -0,0 +1,183 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人资料</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/person.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-body" style="padding: 25px;">
<div class="text-center layui-text">
<div class="user-info-head" id="userInfoHead">
<img src="../../admin/images/avatar.jpg" id="userAvatar" width="115px" height="115px" alt="">
</div>
<h2 style="padding-top: 20px;font-size: 20px;">就眠仪式</h2>
<p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
</div>
</div>
<div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
<span>今日事 ，今日毕</span>
</div>
</div>
<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 class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-header">
我的文章
</div>
<div class="layui-card-body">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['jquery', 'element', 'layer', 'convert'], function () {
var element = layui.element,
layer = layui.layer,
$ = layui.jquery,
convert = layui.convert;
let MODULE_PATH = "operate/";
var image = new Image();
image.src = "../../admin/images/avatar.jpg";
image.onload = function() {
$("#userAvatar").attr("src", convert.imageToBase64(image));
}
window.callback = function (data) {
layer.close(data.index);
$("#userAvatar").attr("src", data.newAvatar);
}
$("#userAvatar").click(function () {
layer.open({
type: 2,
title: '更换图片',
shade: 0.1,
area: ["900px", "500px"],
content: MODULE_PATH + 'profile.html',
btn: ['确定', '取消'],
yes: function (index, layero) {
window['layui-layer-iframe' + index].submitForm();
}
});
});
});
</script>
</body>
</html>

242
public/view/system/power.html Normal file
View File

@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权限管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="power-table" lay-filter="power-table"></table>
</div>
</div>
<script type="text/html" id="power-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
<i class="layui-icon layui-icon-spread-left"></i>
展开
</button>
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
<i class="layui-icon layui-icon-shrink-right"></i>
折叠
</button>
</script>
<script type="text/html" id="power-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="power-type">
{{#if (d.powerType == '0') { }}
<span>目录</span>
{{# }else if(d.powerType == '1'){ }}
<span>菜单</span>
{{# }else if(d.powerType == '2'){ }}
<span>按钮</span>
{{# } }}
</script>
<script type="text/html" id="power-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{ d.enable== true ? 'checked' : '' }} />
</script>
<script type="text/html" id="icon">
<i class="layui-icon {{d.icon}}"></i>
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table','form','jquery','treetable'],function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let treetable = layui.treetable;
let MODULE_PATH = "operate/";
window.render = function(){
treetable.render({
treeColIndex: 1,
treeSpid: 0,
treeIdName: 'powerId',
treePidName: 'parentId',
skin:'line',
treeDefaultClose: true,
toolbar:'#power-toolbar',
elem: '#power-table',
url: '../../admin/data/power.json',
page: false,
cols: [
[
{type: 'checkbox'},
{field: 'powerName', minWidth: 200, title: '权限名称'},
{field: 'icon', title: '图标',templet:'#icon'},
{field: 'powerType', title: '权限类型',templet:'#power-type'},
{field: 'enable', title: '是否可用',templet:'#power-enable'},
{field: 'sort', title: '排序'},
{title: '操作',templet: '#power-bar', width: 150, align: 'center'}
]
]
});
}
render();
table.on('tool(power-table)',function(obj){
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
}
})
table.on('toolbar(power-table)', function(obj){
if(obj.event === 'add'){
window.add();
} else if(obj.event === 'refresh'){
window.refresh();
} else if(obj.event === 'batchRemove'){
window.batchRemove(obj);
} else if(obj.event === 'expandAll'){
treetable.expandAll("#power-table");
} else if(obj.event === 'foldAll'){
treetable.foldAll("#power-table");
}
});
window.add = function(){
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['450px', '500px'],
content: MODULE_PATH + 'add.html'
});
}
window.edit = function(obj){
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['450px', '500px'],
content: MODULE_PATH + 'edit.html'
});
}
window.remove = function(obj){
layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH+"remove/"+obj.data['powerId'],
dataType:'json',
type:'delete',
success:function(result){
layer.close(loading);
if(result.success){
layer.msg(result.msg,{icon:1,time:1000},function(){
obj.del();
});
}else{
layer.msg(result.msg,{icon:2,time:1000});
}
}
})
});
}
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].powerId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些权限', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
table.reload('user-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
})
</script>
</body>
</html>

108
public/view/system/profile.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头像上传</title>
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
<div class="layui-col-xs9">
<div style="height:325px;background-color: rgb(247, 247, 247);">
<img id="sourceImage" src="">
</div>
</div>
<div class="layui-col-xs3" style="padding-left:0px;">
<div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-form-item">
<div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
<button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button>
<button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button>
<button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button>
<label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" title="选择图片"></label>
<input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
</div>
<div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
</div>
</div>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
layui.use(['jquery','layer','cropper'], function () {
let $ = layui.jquery;
let layer = layui.layer;
let cropper = layui.cropper;
var options = {
aspectRatio: 1 / 1, // 裁剪框比例
preview: '#previewImage', // 预览div
viewmode: 1
};
$("#sourceImage").attr("src", parent.layui.$("#userAvatar").attr("src"));
$("#sourceImage").cropper(options);
window.submitForm = function () {
$("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题
$("#sourceImage").cropper("getCroppedCanvas", {
width: 280,
height: 140
}).toBlob(function (blob) {
var timeStamp = Date.parse(new Date());
var fileName = timeStamp + '.jpg';
var formData = new FormData();
formData.append('file', blob, fileName);
formData.append('fileName', fileName);
formData.append('fileToken', timeStamp);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
var data={
index:parent.layer.getFrameIndex(window.name),
newAvatar : e.target.result
};
console.log(data);
parent.window.callback(data);
};
});
}
$(".pear-btn").on('click', function () {
var event = $(this).attr("cropper-event");
if (event === 'rotate') {
var option = $(this).attr('data-option');
$("#sourceImage").cropper('rotate', option);
} else if (event === 'reset') {
$("#sourceImage").cropper('reset');
}
$("#uploadPicture").change(function () {
var r = new FileReader();
var f = this.files[0];
var uploadFileSize = f.size / 1024;
if (uploadFileSize > 5120) {
parent.layer.msg("上传文件不得超过5m", { icon: 5 });
return false;
}
r.readAsDataURL(f);
r.onload = function (e) {
$("#sourceImage")
.cropper('destroy')
.attr('src', this.result)
.cropper(options);
};
});
});
});
</script>
</body>
</html>

226
public/view/system/role.html Normal file
View File

@ -0,0 +1,226 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>角色管理</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="role-table" lay-filter="role-table"></table>
</div>
</div>
<script type="text/html" id="role-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="role-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="power"><i class="layui-icon layui-icon-vercode"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="role-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="role-enable" {{ d.enable== true ? 'checked' : '' }} />
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table','form','jquery'],function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let MODULE_PATH = "operate/";
let cols = [
[
{type:'checkbox'},
{title: '角色名', field: 'roleName', align:'center', width:100},
{title: 'Key值', field: 'roleCode', align:'center'},
{title: '描述', field: 'details', align:'center'},
{title: '是否可用', field: 'enable', align:'center', templet:'#role-enable'},
{title: '操作', toolbar: '#role-bar', align:'center', width:195}
]
]
table.render({
elem: '#role-table',
url: '../../admin/data/role.json',
page: true ,
cols: cols ,
skin: 'line',
toolbar: '#role-toolbar',
defaultToolbar: [{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports']
});
table.on('tool(role-table)', function(obj){
if(obj.event === 'remove'){
window.remove(obj);
} else if(obj.event === 'edit'){
window.edit(obj);
} else if(obj.event === 'power'){
window.power(obj);
}
});
table.on('toolbar(role-table)', function(obj){
if(obj.event === 'add'){
window.add();
} else if(obj.event === 'refresh'){
window.refresh();
} else if(obj.event === 'batchRemove'){
window.batchRemove(obj);
}
});
form.on('submit(role-query)', function(data){
table.reload('role-table',{where:data.field})
return false;
});
form.on('switch(role-enable)', function(obj){
layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
});
window.add = function(){
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'add.html'
});
}
window.power = function(obj){
layer.open({
type: 2,
title: '授权',
shade: 0.1,
area: ['320px', '400px'],
content: MODULE_PATH + 'edit.html'
});
}
window.edit = function(obj){
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'edit.html'
});
}
window.remove = function(obj){
layer.confirm('确定要删除该角色', {icon: 3, title:'提示'}, function(index){
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH+"remove/"+obj.data['roleId'],
dataType:'json',
type:'delete',
success:function(result){
layer.close(loading);
if(result.success){
layer.msg(result.msg,{icon:1,time:1000},function(){
obj.del();
});
}else{
layer.msg(result.msg,{icon:2,time:1000});
}
}
})
});
}
window.batchRemove = function(obj){
let data = table.checkStatus(obj.config.id).data;
if(data.length === 0){
layer.msg("未选中数据",{icon:3,time:1000});
return false;
}
let ids = "";
for(let i = 0;i<data.length;i++){
ids += data[i].roleId+",";
}
ids = ids.substr(0,ids.length-1);
layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH+"batchRemove/"+ids,
dataType:'json',
type:'delete',
success:function(result){
layer.close(loading);
if(result.success){
layer.msg(result.msg,{icon:1,time:1000},function(){
table.reload('role-table');
});
}else{
layer.msg(result.msg,{icon:2,time:1000});
}
}
})
});
}
window.refresh = function(){
table.reload('role-table');
}
})
</script>
</body>
</html>

27
public/view/system/space.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>空白页面</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
<style>
h1{
margin-top: 200px;
color: #5FB878;
}
.layui-card-body{
text-align: center;height: 500px;
}
</style>
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<h1><b>Space Page</b></h1>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
</html>

300
public/view/system/theme.html Normal file
View File

@ -0,0 +1,300 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主题预览</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header">按钮</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary">Button</button>
<button class="pear-btn pear-btn-primary">Button</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">输入框</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">开关</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="xxx" lay-skin="switch">&nbsp;&nbsp;
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>&nbsp;&nbsp;
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">&nbsp;&nbsp;
<input type="checkbox" name="aaa" lay-skin="switch" disabled>&nbsp;&nbsp;
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">单选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
</div>
<div class="layui-card layui-form">
<div class="layui-card-header">下拉</div>
<div class="layui-card-body">
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
</div>
</div>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
</script>
<script type="text/html" id="user-sex">
{{#if (d.sex == 1) { }}
<span>男</span>
{{# }else if(d.sex == 2){ }}
<span>女</span>
{{# } }}
</script>
<script type="text/html" id="user-login">
{{#if (d.login == 0) { }}
<span>在线</span>
{{# }else if(d.sex == 1){ }}
<span>离线</span>
{{# } }}
</script>
<script type="text/html" id="user-createTime">
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>
<div class="layui-card">
<div class="layui-card-header">选项卡</div>
<div class="layui-card-body">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" style="height: 30px;">
<div class="layui-tab-item layui-show"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">进度条</div>
<div class="layui-card-body">
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="30%"></div>
</div>
<br />
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="20%"></div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">分页</div>
<div class="layui-card-body">
<div id="test1"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">辅助元素</div>
<div class="layui-card-body">
<blockquote class="layui-elem-quote">快乐的时候不敢尽兴，频繁警戒自己保持清醒.</blockquote>
<blockquote class="layui-elem-quote">路上没有灯火的时候，就点亮自己的头颅.</blockquote>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利72周年
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">日期选择</div>
<div class="layui-card-body">
<input type="text" class="layui-input" id="test2">
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery', 'drawer'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let drawer = layui.drawer;
let MODULE_PATH = "/system/user/";
let cols = [
[{
type: 'checkbox'
},
{
title: '姓名',
field: 'realName',
align: 'center'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: 80,
templet: '#user-sex'
},
{
title: '启用',
field: 'enable',
align: 'center',
templet: '#user-enable'
},
{
title: '登录',
field: 'login',
align: 'center',
templet: '#user-login'
},
{
title: '注册',
field: 'createTime',
align: 'center',
templet: '#user-createTime'
},
{
title: '操作',
toolbar: '#user-bar',
align: 'center',
width: 130
}
]
]
table.render({
elem: '#user-table',
url: '../../admin/data/table.json',
page: true,
cols: cols,
skin: 'line',
toolbar: '#user-toolbar',
defaultToolbar: [{
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports']
});
form.on('switch(user-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
});
})
</script>
<script>
layui.use('form', function() {
})
</script>
<script>
layui.use('laypage', function() {
var laypage = layui.laypage;
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,
count: 50 //数据总数，从服务端得到
});
});
</script>
<script>
layui.use('laydate', function() {
var laydate = layui.laydate;
laydate.render({
elem: '#test2' //指定元素
});
});
</script>
</html>

298
public/view/system/user.html Normal file
View File

@ -0,0 +1,298 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
</div>
</div>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{ d.enable== true ? 'checked' : '' }} />
</script>
<script type="text/html" id="user-sex">
{{#if (d.sex == 1) { }}
<span>男</span>
{{# }else if(d.sex == 2){ }}
<span>女</span>
{{# } }}
</script>
<script type="text/html" id="user-login">
{{#if (d.login == 0) { }}
<span>在线</span>
{{# }else if(d.sex == 1){ }}
<span>离线</span>
{{# } }}
</script>
<script type="text/html" id="user-createTime">
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery','common'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let common = layui.common;
let MODULE_PATH = "operate/";
let cols = [
[{
type: 'checkbox'
},
{
title: '账号',
field: 'username',
align: 'center',
width: 100
},
{
title: '姓名',
field: 'realName',
align: 'center'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: 80,
templet: '#user-sex'
},
{
title: '电话',
field: 'phone',
align: 'center'
},
{
title: '启用',
field: 'enable',
align: 'center',
templet: '#user-enable'
},
{
title: '登录',
field: 'login',
align: 'center',
templet: '#user-login'
},
{
title: '注册',
field: 'createTime',
align: 'center',
templet: '#user-createTime'
},
{
title: '操作',
toolbar: '#user-bar',
align: 'center',
width: 130
}
]
]
table.render({
elem: '#user-table',
url: '../../admin/data/user.json',
page: true,
cols: cols,
skin: 'line',
toolbar: '#user-toolbar',
defaultToolbar: [{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports']
});
table.on('tool(user-table)', function(obj) {
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
}
});
table.on('toolbar(user-table)', function(obj) {
if (obj.event === 'add') {
window.add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'batchRemove') {
window.batchRemove(obj);
}
});
form.on('submit(user-query)', function(data) {
table.reload('user-table', {
where: data.field
})
return false;
});
form.on('switch(user-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
});
window.add = function() {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: [common.isModile()?'100%':'500px', common.isModile()?'100%':'400px'],
content: MODULE_PATH + 'add.html'
});
}
window.edit = function(obj) {
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'edit.html'
});
}
window.remove = function(obj) {
layer.confirm('确定要删除该用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "remove/" + obj.data['userId'],
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
obj.del();
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.batchRemove = function(obj) {
var checkIds = common.checkField(obj,'userId');
if (checkIds === "") {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
layer.confirm('确定要删除这些用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
table.reload('user-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.refresh = function(param) {
table.reload('user-table');
}
})
</script>
</body>
</html>

11
view/taoler/index/article/ask/cate.html
View File

@ -121,12 +121,11 @@
//获取起始页
,jump: function(obj, first){
//首次不执行
if(!first){
var page = obj.curr;
location.href ="{$path}/"+page+'.html';
}
var page = obj.curr;
//首次不执行
if(!first){
location.href ="{$path}/"+page+'.html';
}
}
});
});

21
view/taoler/index/article/ask/detail.html
View File

@ -43,6 +43,7 @@
{//问题内容}
<div style="margin-top: 15px; font-size: 18px; font-weight: bold; color: rgb(130, 125, 125)">问题描述：</div>
<hr />
{:hook('taoplayerdiv')}
<div class="detail-body photos" id="content">{$article.content|raw}</div>
{if (($article.upzip !== '') || session('?user_name'))}
<div class="">
@ -69,7 +70,7 @@
<div class="fly-panel detail-box" id="flyReply">
<span style="font-size: 18px">评论 {$article.comments_count}</span>
<ul class="jieda" id="jieda">
{volist name="comments" id="vo" empty= ""}
{volist name="comments['data']" id="vo" empty= ""}
<li data-id="{$vo.id}" class="jieda-daan">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
@ -268,7 +269,7 @@
data: { id: id, title_color: color },
dataType: "json",
success: function (data) {
if (data.code == 0) {
if (data.code === 0) {
layer.msg(data.msg, { icon: 6, time: 2000 });
} else {
layer.open({ content: data.msg, icon: 5, adim: 6 });
@ -293,7 +294,7 @@
data: filed,
dataType: "json",
success: function (data) {
if (data.code == 0) {
if (data.code === 0) {
layer.msg(data.msg, { icon: 6, time: 2000 }, function () {
location.reload(true);
});
@ -306,22 +307,22 @@
return false;
});
//执行一个laypage实例
// 评论分页
laypage.render({
elem: "pages", //注意，这里的 test1 是 ID，不用加 # 号
count: "{$article.comments_count}", //数据总数，从服务端得到
limit: 10,
curr: {$page},
curr: "{$page}",
//获取起始页
jump: function (obj, first) {
var page = obj.curr;
var limit = obj.limit;
var url = "{:url('article_detail',['id' => $article.id ,'ename' =>$article['cate']['ename']])}";
var id = "{$article.id}";
//首次不执行
if (!first) {
var page = obj.curr;
var url = "{:url('article/detail',['id'=>$article.id])}";
var id = "{$article.id}";
$.post("{:url('article/detail')}", { id: id, page: page }, function () {
window.location.href = url + "?page=" + page + "#flyReply";
location.href = url + '?page=' + page;
});
}
},

4
view/taoler/index/article/blog/detail.html
View File

@ -48,6 +48,7 @@
</div>
<div class="border-theme bg-primary"></div>
</div>
{:hook('taoplayerdiv')}
<article class="post-content detail-body" itemprop="articleBody" view-image>
{$article.content|raw}
</article>
@ -117,7 +118,7 @@
<div class="mb-3" id="flyReply">
文章评论 <small class="font-theme text-muted">({$article.comments_count})</small>
<ul class="jieda" id="jieda">
{volist name="comments" id="vo" empty= ""}
{volist name="comments['data']" id="vo" empty= ""}
<li data-id="{$vo.id}" class="jieda-daan">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
@ -289,6 +290,7 @@
{block name="script"}
{:hook('taonyeditor')}
{:hook('taoplayer')}
<script type='text/javascript' src="{$Request.domain}/view/common/blog/js/theme.js"></script>
<script>

6
view/taoler/index/article/detail.html
View File

@ -49,6 +49,7 @@
</div>
</div>
{:hook('taoplayerdiv')}
<div class="detail-body photos">{$article.content|raw}</div>
{//管理}
{if (($article.upzip !== '') || session('?user_name'))}
@ -84,7 +85,7 @@
<div class="fly-panel detail-box" id="flyReply">
<span style="font-size:18px;">评论 {$comments->count()}</span>
<ul class="jieda" id="jieda">
{volist name="comments" id="vo" empty= ""}
{volist name="comments['data']" id="vo" empty= ""}
<li data-id="{$vo.id}" class="jieda-daan">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
@ -173,6 +174,9 @@
{include file="public/menu" /}
{/block}
{block name="script"}
{:hook('taoplayer')}
<script>
var collectionFind = "{:url('Collection/find')}",
articleJieset = "{:url('Article/jieset')}",

3
view/taoler/index/article/news/detail.html
View File

@ -31,6 +31,7 @@
</div>
<hr style="margin-bottom: 25px">
{// 内容}
{:hook('taoplayerdiv')}
<div class="detail-body photos" style="font-size: 18px;line-height: 200%;" id="content">{$article.content|raw}</div>
{if (($article.upzip !== '') || session('?user_name'))}
<div class="">
@ -68,6 +69,8 @@
{:hook('taonyeditor')}
{:hook('taoplayer')}
<script>
var collectionFind = "{:url('Collection/find')}",
collection = "{:url('collection/')}",

3
view/taoler/index/article/posts/detail.html
View File

@ -52,6 +52,7 @@
</div>
<hr>
{// 内容}
{:hook('taoplayerdiv')}
<div class="detail-body photos" id="content">{$article.content|raw}</div>
{//下载}
{if (($article.upzip !== '') || session('?user_name'))}
@ -87,7 +88,7 @@
<div class="fly-panel detail-box" id="flyReply">
<span style="font-size:18px;">评论 {$article.comments_count}</span>
<ul class="jieda" id="jieda">
{volist name="comments" id="vo" empty= ""}
{volist name="comments['data']" id="vo" empty= ""}
<li data-id="{$vo.id}" class="jieda-daan">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">