first commit
This commit is contained in:
root
21
public/demos/LICENSE
Executable file
21
public/demos/LICENSE
Executable file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 就眠儀式 pearadmin.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
451
public/demos/console/console1.html
Executable file
451
public/demos/console/console1.html
Executable 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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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>
|
||||
502
public/demos/console/console2.html
Executable file
502
public/demos/console/console2.html
Executable file
@ -0,0 +1,502 @@
|
||||
<!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="../../demos/css/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: '../../demos/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 => {
|
||||
console.log(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,
|
||||
// showSymbol: false,/
|
||||
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,
|
||||
// showSymbol: false,
|
||||
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>
|
||||
BIN
public/demos/css/avatar.jpg
Executable file
BIN
public/demos/css/avatar.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
141
public/demos/css/console1.css
Executable file
141
public/demos/css/console1.css
Executable file
@ -0,0 +1,141 @@
|
||||
.top-panel {
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-panel>.layui-card-body {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.top-panel-number {
|
||||
line-height: 60px;
|
||||
font-size: 29px;
|
||||
border-right: 1px solid #eceff9;
|
||||
}
|
||||
|
||||
.top-panel-tips {
|
||||
padding-left: 8px;
|
||||
padding-top: 16px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pear-container {
|
||||
background-color: whitesmoke;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background-color: whitesmoke;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card .header .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 20px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.card .header {
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
.card .body {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.card .body {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.card .footer {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.custom-tab .layui-tab-title {
|
||||
border-bottom-width: 0px;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
|
||||
.custom-tab .layui-tab-title li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.list .list-item {
|
||||
height: 31.8px;
|
||||
line-height: 31.8px;
|
||||
color: gray;
|
||||
padding: 5px;
|
||||
padding-left: 15px;
|
||||
border-radius: 4px;
|
||||
margin-top: 5.2px;
|
||||
}
|
||||
|
||||
.list .list-item:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.list .list-item .title {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list .list-item .footer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.top-panel-tips i {
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.layuiadmin-card-status {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
|
||||
.layuiadmin-card-status dd {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #EEE;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layuiadmin-card-status dd div.layui-status-img,
|
||||
.layuiadmin-card-team .layui-team-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.layuiadmin-card-status dd div.layui-status-img a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.layuiadmin-card-status dd div span {
|
||||
color: #BBB;
|
||||
}
|
||||
|
||||
.layuiadmin-card-status dd div a {
|
||||
color: #01AAED;
|
||||
}
|
||||
|
||||
.top-panel-tips svg {
|
||||
margin-top: -12px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
121
public/demos/css/console2.css
Executable file
121
public/demos/css/console2.css
Executable file
@ -0,0 +1,121 @@
|
||||
.pear-container {
|
||||
background-color: whitesmoke;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.pear-card {
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
background-color: #F8F8F8;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.pear-card:hover,
|
||||
.pear-card2:hover {
|
||||
box-shadow: 2px 0 8px 0 lightgray !important;
|
||||
}
|
||||
|
||||
.pear-card2 {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background-color: #F8F8F8;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.pear-card2 i {
|
||||
font-size: 30px;
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.pear-card i {
|
||||
font-size: 30px;
|
||||
height: 66px;
|
||||
line-height: 66px;
|
||||
}
|
||||
|
||||
.layui-col-md3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pear-card-title {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.person img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.pear-card2 .count {
|
||||
color: #51A351;
|
||||
font-size: 30px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.pear-card2 .title {
|
||||
color: gray;
|
||||
font-size: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.pear-card-status {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
|
||||
.pear-card-status li {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #EEE;
|
||||
}
|
||||
|
||||
.pear-card-status li h3 {
|
||||
padding-bottom: 5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pear-card-status li p {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.pear-card-status li>span {
|
||||
color: #999;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.pear-reply {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 12px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.person .title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-left: 18px;
|
||||
margin-top: 16px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.person .desc {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-left: 115px;
|
||||
margin-top: -30px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
6
public/demos/css/department.css
Executable file
6
public/demos/css/department.css
Executable file
@ -0,0 +1,6 @@
|
||||
.organizationTree {
|
||||
width: 100% !important;
|
||||
height: -webkit-calc(100vh - 130px);
|
||||
height: -moz-calc(100vh - 130px);
|
||||
height: calc(100vh - 130px);
|
||||
}
|
||||
76
public/demos/css/error.css
Executable file
76
public/demos/css/error.css
Executable file
@ -0,0 +1,76 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0.38rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 0.28rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content>img {
|
||||
height: 300px;
|
||||
max-width: 370px;
|
||||
margin-right: 180px;
|
||||
}
|
||||
|
||||
.content>* {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.content-r {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.content-r>h1 {
|
||||
font-size: 72px;
|
||||
color: #434e59;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-r>p {
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, .45);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
531
public/demos/css/icon.css
Executable file
531
public/demos/css/icon.css
Executable file
@ -0,0 +1,531 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
99
public/demos/css/login.css
Executable file
99
public/demos/css/login.css
Executable file
@ -0,0 +1,99 @@
|
||||
.layui-form {
|
||||
width: 320px !important;
|
||||
margin: auto !important;
|
||||
margin-top: 160px !important;
|
||||
}
|
||||
|
||||
.layui-form button {
|
||||
width: 100% !important;
|
||||
height: 44px !important;
|
||||
line-height: 44px !important;
|
||||
font-size: 16px !important;
|
||||
background-color: #5FB878 !important;
|
||||
font-weight: 550 !important;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin=primary] i {
|
||||
border-color: #5FB878 !important;
|
||||
background-color: #5FB878 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-tab-content {
|
||||
margin-top: 15px !important;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
.layui-form-item {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
.layui-input {
|
||||
height: 44px !important;
|
||||
line-height: 44px !important;
|
||||
padding-left: 15px !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.layui-input:focus {
|
||||
box-shadow: 0px 0px 2px 1px #5FB878 !important;
|
||||
}
|
||||
|
||||
.layui-form-danger:focus{
|
||||
box-shadow: 0px 0px 2px 1px #f56c6c !important;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 40px !important;
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px !important;
|
||||
font-weight: 550 !important;
|
||||
margin-left: 10px !important;
|
||||
color: #5FB878 !important;
|
||||
display: inline-block !important;
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
margin-top: 10px !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.desc {
|
||||
width: 100% !important;
|
||||
text-align: center !important;
|
||||
color: gray !important;
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-repeat:no-repeat;
|
||||
background-color: whitesmoke;
|
||||
background-size: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.code {
|
||||
float: left;
|
||||
margin-right: 13px;
|
||||
margin: 0px !important;
|
||||
border: #e6e6e6 1px solid;
|
||||
display: inline-block!important;
|
||||
}
|
||||
|
||||
.codeImage {
|
||||
float: right;
|
||||
height: 42px;
|
||||
border: #e6e6e6 1px solid;
|
||||
}
|
||||
|
||||
@media (max-width:768px){
|
||||
body{
|
||||
background-position:center;
|
||||
}
|
||||
}
|
||||
80
public/demos/css/person.css
Executable file
80
public/demos/css/person.css
Executable file
@ -0,0 +1,80 @@
|
||||
.pear-container {
|
||||
background-color: whitesmoke;
|
||||
margin: 10px;
|
||||
}
|
||||
.layui-body {
|
||||
padding: 25px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.user-info-head {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
line-height: 110px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.layui-line-dash {
|
||||
border-bottom: 1px dashed #ccc;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.comment {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
color: dimgray;
|
||||
}
|
||||
.content {
|
||||
padding-left: 13px;
|
||||
font-size: 13px;
|
||||
color: dimgray;
|
||||
}
|
||||
.title {
|
||||
padding-left: 13.5px;
|
||||
}
|
||||
.layui-tab-title {
|
||||
border-bottom: none;
|
||||
}
|
||||
.fl-item {
|
||||
height: 30px;
|
||||
font-size: 13.5;
|
||||
}
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50px;
|
||||
background-color: gray;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.list .list-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: gray;
|
||||
padding: 5px;
|
||||
padding-left: 15px;
|
||||
border-radius: 4px;
|
||||
margin-top: 5.2px;
|
||||
}
|
||||
|
||||
.list .list-item:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.list .list-item .title {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list .list-item .footer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
39
public/demos/css/result.css
Executable file
39
public/demos/css/result.css
Executable file
@ -0,0 +1,39 @@
|
||||
.result {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.result .success svg {
|
||||
color: #32C682;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
|
||||
}
|
||||
.result .error svg {
|
||||
color: #f56c6c;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
|
||||
}
|
||||
.result .title {
|
||||
margin-top: 25px;
|
||||
|
||||
}
|
||||
.result .desc {
|
||||
margin-top: 25px;
|
||||
width: 60%;
|
||||
margin-left: 20%;
|
||||
color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
.result .content {
|
||||
margin-top: 20px;
|
||||
width: 80%;
|
||||
border-radius: 10px;
|
||||
background-color: whitesmoke;
|
||||
height: 200px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.result .action {
|
||||
padding-top: 10px;
|
||||
border-top: 1px whitesmoke solid;
|
||||
margin-top: 25px;
|
||||
}
|
||||
57
public/demos/data/card.json
Executable file
57
public/demos/data/card.json
Executable file
@ -0,0 +1,57 @@
|
||||
{
|
||||
"msg": "not data",
|
||||
"count": 30,
|
||||
"data": [{
|
||||
"id": "1",
|
||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
|
||||
"title": "Alipay",
|
||||
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||
"time": "几秒前"
|
||||
}, {
|
||||
"id": "2",
|
||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
|
||||
"title": "Layui",
|
||||
"remark": "生命就像一盒巧克力，结果往往出人意料",
|
||||
"time": "几秒前"
|
||||
}, {
|
||||
"id": "3",
|
||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
|
||||
"title": "Angular",
|
||||
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
||||
"time": "几秒前"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
|
||||
"title": "React",
|
||||
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||
"time": "几秒前"
|
||||
}, {
|
||||
"id": "5",
|
||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
|
||||
"title": "Alipay",
|
||||
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||
"time": "几秒前"
|
||||
}, {
|
||||
"id": "6",
|
||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
|
||||
"title": "Layui",
|
||||
"remark": "生命就像一盒巧克力，结果往往出人意料",
|
||||
"time": "几秒前"
|
||||
}, {
|
||||
"id": "7",
|
||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
|
||||
"title": "Angular",
|
||||
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
||||
"time": "几秒前"
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
|
||||
"title": "React",
|
||||
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||
"time": "几秒前"
|
||||
}
|
||||
],
|
||||
"code": 0
|
||||
}
|
||||
377
public/demos/data/dataMenu.json
Executable file
377
public/demos/data/dataMenu.json
Executable file
@ -0,0 +1,377 @@
|
||||
{
|
||||
"code": 0,
|
||||
"msg": "ok",
|
||||
"data": [{
|
||||
"id": 1,
|
||||
"title": "工作空间",
|
||||
"type": 0,
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 10,
|
||||
"title": "控制后台",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/console/console1.html"
|
||||
}, {
|
||||
"id": 13,
|
||||
"title": "数据分析",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/console/console2.html"
|
||||
}, {
|
||||
"id": 14,
|
||||
"title": "百度一下",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "http://www.baidu.com"
|
||||
}, {
|
||||
"id": 15,
|
||||
"title": "主题预览",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/theme.html"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"id": "component",
|
||||
"title": "常用组件",
|
||||
"icon": "layui-icon layui-icon-component",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 201,
|
||||
"title": "基础组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 2011,
|
||||
"title": "功能按钮",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/button.html"
|
||||
}, {
|
||||
"id": 2014,
|
||||
"title": "表单集合",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/form.html"
|
||||
}, {
|
||||
"id": 2010,
|
||||
"title": "字体图标",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/icon.html"
|
||||
}, {
|
||||
"id": 2012,
|
||||
"title": "多选下拉",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/select.html"
|
||||
}, {
|
||||
"id": 2013,
|
||||
"title": "动态标签",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/tag.html"
|
||||
}]
|
||||
}, {
|
||||
"id": 203,
|
||||
"title": "进阶组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 2031,
|
||||
"title": "数据表格",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/table.html"
|
||||
}, {
|
||||
"id": 2032,
|
||||
"title": "分布表单",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/step.html"
|
||||
}, {
|
||||
"id": 2033,
|
||||
"title": "树形表格",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/treetable.html"
|
||||
}, {
|
||||
"id": 2034,
|
||||
"title": "树状结构",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/dtree.html"
|
||||
}, {
|
||||
"id": 2035,
|
||||
"title": "文本编辑",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/tinymce.html"
|
||||
}, {
|
||||
"id": 2036,
|
||||
"title": "卡片组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/card.html"
|
||||
}]
|
||||
}, {
|
||||
"id": 202,
|
||||
"title": "弹层组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 2021,
|
||||
"title": "抽屉组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/drawer.html"
|
||||
}, {
|
||||
"id": 2022,
|
||||
"title": "消息通知",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/notice.html"
|
||||
}, {
|
||||
"id": 2024,
|
||||
"title": "加载组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/loading.html"
|
||||
}, {
|
||||
"id": 2023,
|
||||
"title": "弹层组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/popup.html"
|
||||
}]
|
||||
}, {
|
||||
"id": 60331,
|
||||
"title": "高级组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 60131,
|
||||
"title": "多选项卡",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/tab.html"
|
||||
}, {
|
||||
"id": 60132,
|
||||
"title": "数据菜单",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/menu.html"
|
||||
}]
|
||||
}, {
|
||||
"id": 204,
|
||||
"title": "其他组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 2041,
|
||||
"title": "哈希加密",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/hash.html"
|
||||
},
|
||||
{
|
||||
"id": 2042,
|
||||
"title": "图标选择",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/iconPicker.html"
|
||||
},
|
||||
{
|
||||
"id": 2043,
|
||||
"title": "省市级联",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/area.html"
|
||||
},
|
||||
{
|
||||
"id": 2044,
|
||||
"title": "数字滚动",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/count.html"
|
||||
},
|
||||
{
|
||||
"id": 2045,
|
||||
"title": "顶部返回",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/topBar.html"
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
"id": "result",
|
||||
"title": "结果页面",
|
||||
"icon": "layui-icon layui-icon-auz",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": "success",
|
||||
"title": "成功",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/result/success.html"
|
||||
},
|
||||
{
|
||||
"id": "failure",
|
||||
"title": "失败",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/result/error.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "error",
|
||||
"title": "错误页面",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 403,
|
||||
"title": "403",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/403.html"
|
||||
},
|
||||
{
|
||||
"id": 404,
|
||||
"title": "404",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/404.html"
|
||||
},
|
||||
|
||||
{
|
||||
"id": 500,
|
||||
"title": "500",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/500.html"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "system",
|
||||
"title": "系统管理",
|
||||
"icon": "layui-icon layui-icon-set-fill",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 601,
|
||||
"title": "用户管理",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/user.html"
|
||||
},
|
||||
{
|
||||
"id": 602,
|
||||
"title": "角色管理",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/role.html"
|
||||
},
|
||||
|
||||
{
|
||||
"id": 603,
|
||||
"title": "权限管理",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/power.html"
|
||||
},
|
||||
|
||||
{
|
||||
"id": 604,
|
||||
"title": "部门管理",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/deptment.html"
|
||||
},
|
||||
{
|
||||
"id": 605,
|
||||
"title": "行为日志",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/log.html"
|
||||
}, {
|
||||
"id": 606,
|
||||
"title": "数据字典",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/dict.html"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "common",
|
||||
"title": "常用页面",
|
||||
"icon": "layui-icon layui-icon-template-1",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 701,
|
||||
"title": "登录页面",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "login.html"
|
||||
}, {
|
||||
"id": 702,
|
||||
"title": "空白页面",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/space.html"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
37
public/demos/data/dataTree2.json
Executable file
37
public/demos/data/dataTree2.json
Executable file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"status": {
|
||||
"code": 200,
|
||||
"message": "操作成功"
|
||||
},
|
||||
"data": [{
|
||||
"id": "001",
|
||||
"title": "湖南省",
|
||||
"checkArr": "0",
|
||||
"parentId": "0"
|
||||
},
|
||||
{
|
||||
"id": "002",
|
||||
"title": "湖北省",
|
||||
"checkArr": "0",
|
||||
"parentId": "0"
|
||||
},
|
||||
{
|
||||
"id": "003",
|
||||
"title": "广东省",
|
||||
"checkArr": "0",
|
||||
"parentId": "0"
|
||||
},
|
||||
{
|
||||
"id": "004",
|
||||
"title": "浙江省",
|
||||
"checkArr": "0",
|
||||
"parentId": "0"
|
||||
},
|
||||
{
|
||||
"id": "005",
|
||||
"title": "福建省",
|
||||
"checkArr": "0",
|
||||
"parentId": "0"
|
||||
}
|
||||
]
|
||||
}
|
||||
36
public/demos/data/dictData.json
Executable file
36
public/demos/data/dictData.json
Executable file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"code": 0,
|
||||
"msg": null,
|
||||
"count": 2,
|
||||
"data": [{
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"createName": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"updateName": null,
|
||||
"remark": "男 : body",
|
||||
"params": null,
|
||||
"dataId": "1317401149287956480",
|
||||
"dataLabel": "男",
|
||||
"dataValue": "boy",
|
||||
"typeCode": "user_sex",
|
||||
"isDefault": null,
|
||||
"enable": "0"
|
||||
}, {
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"createName": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"updateName": null,
|
||||
"remark": "女 : girl",
|
||||
"params": null,
|
||||
"dataId": "1317402976670711808",
|
||||
"dataLabel": "女",
|
||||
"dataValue": "girl",
|
||||
"typeCode": "user_sex",
|
||||
"isDefault": null,
|
||||
"enable": "0"
|
||||
}]
|
||||
}
|
||||
90
public/demos/data/dictType.json
Executable file
90
public/demos/data/dictType.json
Executable file
@ -0,0 +1,90 @@
|
||||
{
|
||||
"code": 0,
|
||||
"msg": null,
|
||||
"count": 6,
|
||||
"data": [{
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"createName": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"updateName": null,
|
||||
"remark": null,
|
||||
"params": null,
|
||||
"id": "1304489072256876544",
|
||||
"typeName": "用户状态",
|
||||
"typeCode": "user_status",
|
||||
"description": "用户状态",
|
||||
"enable": "0"
|
||||
}, {
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"createName": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"updateName": null,
|
||||
"remark": null,
|
||||
"params": null,
|
||||
"id": "1317360314219495424",
|
||||
"typeName": "登录类型",
|
||||
"typeCode": "login",
|
||||
"description": "登录类型",
|
||||
"enable": "0"
|
||||
}, {
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"createName": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"updateName": null,
|
||||
"remark": null,
|
||||
"params": null,
|
||||
"id": "1317400519127334912",
|
||||
"typeName": "用户类型",
|
||||
"typeCode": "user_status",
|
||||
"description": "用户类型",
|
||||
"enable": "0"
|
||||
}, {
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"createName": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"updateName": null,
|
||||
"remark": null,
|
||||
"params": null,
|
||||
"id": "1317400823096934400",
|
||||
"typeName": "配置类型",
|
||||
"typeCode": "config_type",
|
||||
"description": "配置类型",
|
||||
"enable": "0"
|
||||
}, {
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"createName": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"updateName": null,
|
||||
"remark": null,
|
||||
"params": null,
|
||||
"id": "455184568505470976",
|
||||
"typeName": "用户性别",
|
||||
"typeCode": "user_sex",
|
||||
"description": "用户性别",
|
||||
"enable": "0"
|
||||
}, {
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"createName": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"updateName": null,
|
||||
"remark": null,
|
||||
"params": null,
|
||||
"id": "455184935989415936",
|
||||
"typeName": "全局状态",
|
||||
"typeCode": "sys_status",
|
||||
"description": "状态描述\n",
|
||||
"enable": "0"
|
||||
}]
|
||||
}
|
||||
181
public/demos/data/dtree.json
Executable file
181
public/demos/data/dtree.json
Executable file
@ -0,0 +1,181 @@
|
||||
{
|
||||
"status": {
|
||||
"code": 200,
|
||||
"message": "操作成功"
|
||||
},
|
||||
"data": [{
|
||||
"id": "001",
|
||||
"title": "湖南省",
|
||||
"parentId": "0",
|
||||
"children": [{
|
||||
"id": "001001",
|
||||
"title": "长沙市",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
},
|
||||
{
|
||||
"id": "001002",
|
||||
"title": "株洲市",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
},
|
||||
{
|
||||
"id": "001003",
|
||||
"title": "湘潭市",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
},
|
||||
{
|
||||
"id": "001004",
|
||||
"title": "衡阳市",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
},
|
||||
{
|
||||
"id": "001005",
|
||||
"title": "郴州市",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "002",
|
||||
"title": "湖北省",
|
||||
"parentId": "0",
|
||||
"children": [{
|
||||
"id": "002001",
|
||||
"title": "武汉市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
},
|
||||
{
|
||||
"id": "002002",
|
||||
"title": "黄冈市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
},
|
||||
{
|
||||
"id": "002003",
|
||||
"title": "潜江市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
},
|
||||
{
|
||||
"id": "002004",
|
||||
"title": "荆州市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
},
|
||||
{
|
||||
"id": "002005",
|
||||
"title": "襄阳市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "003",
|
||||
"title": "广东省",
|
||||
"parentId": "0",
|
||||
"children": [{
|
||||
"id": "003001",
|
||||
"title": "广州市",
|
||||
"last": false,
|
||||
"parentId": "003",
|
||||
"children": [{
|
||||
"id": "003001001",
|
||||
"title": "天河区",
|
||||
"last": true,
|
||||
"parentId": "003001"
|
||||
},
|
||||
{
|
||||
"id": "003001002",
|
||||
"title": "花都区",
|
||||
"last": true,
|
||||
"parentId": "003001"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "003002",
|
||||
"title": "深圳市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
},
|
||||
{
|
||||
"id": "003003",
|
||||
"title": "中山市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
},
|
||||
{
|
||||
"id": "003004",
|
||||
"title": "东莞市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
},
|
||||
{
|
||||
"id": "003005",
|
||||
"title": "珠海市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
},
|
||||
{
|
||||
"id": "003006",
|
||||
"title": "韶关市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "004",
|
||||
"title": "浙江省",
|
||||
"parentId": "0",
|
||||
"children": [{
|
||||
"id": "004001",
|
||||
"title": "杭州市",
|
||||
"last": true,
|
||||
"parentId": "004"
|
||||
},
|
||||
{
|
||||
"id": "004002",
|
||||
"title": "温州市",
|
||||
"last": true,
|
||||
"parentId": "004"
|
||||
},
|
||||
{
|
||||
"id": "004003",
|
||||
"title": "绍兴市",
|
||||
"last": true,
|
||||
"parentId": "004"
|
||||
},
|
||||
{
|
||||
"id": "004004",
|
||||
"title": "金华市",
|
||||
"last": true,
|
||||
"parentId": "004"
|
||||
},
|
||||
{
|
||||
"id": "004005",
|
||||
"title": "义乌市",
|
||||
"last": true,
|
||||
"parentId": "004"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "005",
|
||||
"title": "福建省",
|
||||
"parentId": "0",
|
||||
"children": [{
|
||||
"id": "005001",
|
||||
"title": "厦门市",
|
||||
"last": true,
|
||||
"parentId": "005"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
211
public/demos/data/loginLog.json
Executable file
211
public/demos/data/loginLog.json
Executable file
@ -0,0 +1,211 @@
|
||||
{
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"remark": null,
|
||||
"code": 0,
|
||||
"msg": null,
|
||||
"count": 167,
|
||||
"data": [{
|
||||
"id": "1305106851892822016",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T11:31:36.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305101593019940864",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T11:10:42.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305101247900024832",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T11:09:20.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305099674977304576",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T11:03:05.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305095186061197312",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T10:45:15.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305092027951611904",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T10:32:42.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305082862634008576",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T09:56:16.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305071134877679616",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T09:09:40.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305070481803575296",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T09:07:05.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305064691009060864",
|
||||
"title": "登录",
|
||||
"description": "登录成功",
|
||||
"businessType": "OTHER",
|
||||
"requestMethod": "POST",
|
||||
"method": "/login",
|
||||
"operateUrl": "/login",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "LOGIN",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T08:44:04.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}]
|
||||
}
|
||||
444
public/demos/data/menu.json
Executable file
444
public/demos/data/menu.json
Executable file
@ -0,0 +1,444 @@
|
||||
[{
|
||||
"id": 1,
|
||||
"title": "工作空间",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 10,
|
||||
"title": "控制后台",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/console/console1.html"
|
||||
}, {
|
||||
"id": 13,
|
||||
"title": "数据分析",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/console/console2.html"
|
||||
}, {
|
||||
"id": 14,
|
||||
"title": "百度一下",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "http://www.bing.com"
|
||||
}, {
|
||||
"id": 15,
|
||||
"title": "主题预览",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/theme.html"
|
||||
}, {
|
||||
"id": 16,
|
||||
"title": "酸爽翻倍",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/core.html"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"id": "component",
|
||||
"title": "常用组件",
|
||||
"icon": "layui-icon layui-icon-component",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 201,
|
||||
"title": "基础组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [
|
||||
{
|
||||
"id": 2011,
|
||||
"title": "功能按钮",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/button.html"
|
||||
}, {
|
||||
"id": 2014,
|
||||
"title": "表单集合",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/form.html"
|
||||
}, {
|
||||
"id": 2010,
|
||||
"title": "字体图标",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/icon.html"
|
||||
}, {
|
||||
"id": 2012,
|
||||
"title": "多选下拉",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/select.html"
|
||||
}, {
|
||||
"id": 2013,
|
||||
"title": "动态标签",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/tag.html"
|
||||
}]
|
||||
}, {
|
||||
"id": 203,
|
||||
"title": "进阶组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 2031,
|
||||
"title": "数据表格",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/table.html"
|
||||
}, {
|
||||
"id": 2032,
|
||||
"title": "分布表单",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/step.html"
|
||||
}, {
|
||||
"id": 2033,
|
||||
"title": "树形表格",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/treetable.html"
|
||||
}, {
|
||||
"id": 2034,
|
||||
"title": "树状结构",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/dtree.html"
|
||||
}, {
|
||||
"id": 2035,
|
||||
"title": "文本编辑",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/tinymce.html"
|
||||
}, {
|
||||
"id": 2036,
|
||||
"title": "卡片组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/card.html"
|
||||
}]
|
||||
}, {
|
||||
"id": 202,
|
||||
"title": "弹层组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 2021,
|
||||
"title": "抽屉组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/drawer.html"
|
||||
}, {
|
||||
"id": 2022,
|
||||
"title": "消息通知 (过时)",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/notice.html"
|
||||
}, {
|
||||
"id": 2025,
|
||||
"title": "消息通知 (新增)",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/toast.html"
|
||||
}, {
|
||||
"id": 2024,
|
||||
"title": "加载组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/loading.html"
|
||||
}, {
|
||||
"id": 2023,
|
||||
"title": "弹层组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/popup.html"
|
||||
}]
|
||||
},{
|
||||
"id": 60331,
|
||||
"title": "高级组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 60131,
|
||||
"title": "多选项卡",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/tab.html"
|
||||
},{
|
||||
"id": 60132,
|
||||
"title": "数据菜单",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/menu.html"
|
||||
}]
|
||||
}, {
|
||||
"id": 204,
|
||||
"title": "其他组件",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 0,
|
||||
"children": [{
|
||||
"id": 2041,
|
||||
"title": "哈希加密",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/encrypt.html"
|
||||
},
|
||||
{
|
||||
"id": 2042,
|
||||
"title": "图标选择",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/iconPicker.html"
|
||||
},
|
||||
{
|
||||
"id": 2043,
|
||||
"title": "省市级联",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/area.html"
|
||||
},
|
||||
{
|
||||
"id": 2044,
|
||||
"title": "数字滚动",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/count.html"
|
||||
},
|
||||
{
|
||||
"id": 2045,
|
||||
"title": "顶部返回",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/topBar.html"
|
||||
},
|
||||
{
|
||||
"id": 2046,
|
||||
"title": "水印组件",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/watermark.html"
|
||||
},
|
||||
{
|
||||
"id": 2047,
|
||||
"title": "全屏组件",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/fullscreen.html"
|
||||
},
|
||||
{
|
||||
"id": 2048,
|
||||
"title": "汽泡组件",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/popover.html"
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
"id": "result",
|
||||
"title": "结果页面",
|
||||
"icon": "layui-icon layui-icon-auz",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": "success",
|
||||
"title": "成功",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/result/success.html"
|
||||
},
|
||||
{
|
||||
"id": "failure",
|
||||
"title": "失败",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/result/error.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "error",
|
||||
"title": "错误页面",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 403,
|
||||
"title": "403",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/403.html"
|
||||
},
|
||||
{
|
||||
"id": 404,
|
||||
"title": "404",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/404.html"
|
||||
},
|
||||
|
||||
{
|
||||
"id": 500,
|
||||
"title": "500",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/500.html"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "system",
|
||||
"title": "系统管理",
|
||||
"icon": "layui-icon layui-icon-set-fill",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 601,
|
||||
"title": "用户管理",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/user.html"
|
||||
},
|
||||
{
|
||||
"id": 602,
|
||||
"title": "角色管理",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/role.html"
|
||||
},
|
||||
|
||||
{
|
||||
"id": 603,
|
||||
"title": "权限管理",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/power.html"
|
||||
},
|
||||
|
||||
{
|
||||
"id": 604,
|
||||
"title": "部门管理",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/deptment.html"
|
||||
},
|
||||
{
|
||||
"id": 605,
|
||||
"title": "行为日志",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/log.html"
|
||||
}, {
|
||||
"id": 606,
|
||||
"title": "数据字典",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/dict.html"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "common",
|
||||
"title": "常用页面",
|
||||
"icon": "layui-icon layui-icon-template-1",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 701,
|
||||
"title": "登录页面",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "login.html"
|
||||
}, {
|
||||
"id": 702,
|
||||
"title": "空白页面",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/system/space.html"
|
||||
}]
|
||||
}, {
|
||||
"id": "echarts",
|
||||
"title": "数据图表",
|
||||
"icon": "layui-icon layui-icon-chart",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 12121,
|
||||
"title": "折线图",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/echarts/line.html"
|
||||
}, {
|
||||
"id": 121212,
|
||||
"title": "柱状图",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/echarts/column.html"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"id": "code",
|
||||
"title": "开发工具",
|
||||
"icon": "layui-icon layui-icon-util",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 801,
|
||||
"title": "表单构建",
|
||||
"icon": "layui-icon layui-icon-util",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "component/code/index.html"
|
||||
}]
|
||||
}
|
||||
]
|
||||
90
public/demos/data/message.json
Executable file
90
public/demos/data/message.json
Executable file
@ -0,0 +1,90 @@
|
||||
[{
|
||||
"id": 1,
|
||||
"title": "通知",
|
||||
"children": [{
|
||||
"id": 11,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
|
||||
"title": "你收到了 14 份新周报",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
}, {
|
||||
"id": 12,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
|
||||
"title": "曲妮妮 已通过第三轮面试",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
|
||||
"title": "可以区分多种通知类型",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
}, {
|
||||
"id": 12,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
|
||||
"title": "左侧图标用于区分不同的类型",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
|
||||
"title": "内容不要超过两行字",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "消息",
|
||||
"children": [{
|
||||
"id": 11,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
|
||||
"title": "你收到了 14 份新周报",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
}, {
|
||||
"id": 12,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
|
||||
"title": "曲妮妮 已通过第三轮面试",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
|
||||
"title": "可以区分多种通知类型",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
}, {
|
||||
"id": 12,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
|
||||
"title": "左侧图标用于区分不同的类型",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
|
||||
"title": "内容不要超过两行字",
|
||||
"context": "这是消息内容。",
|
||||
"form": "就眠仪式",
|
||||
"time": "刚刚"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "代办",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
211
public/demos/data/operateLog.json
Executable file
211
public/demos/data/operateLog.json
Executable file
@ -0,0 +1,211 @@
|
||||
{
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"remark": null,
|
||||
"code": 0,
|
||||
"msg": null,
|
||||
"count": 178,
|
||||
"data": [{
|
||||
"id": "1305106857240559616",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T11:31:37.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305101599714050048",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T11:10:44.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305101253352620032",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T11:09:21.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305099681512030208",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T11:03:06.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305095191291494400",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T10:45:16.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305092034448588800",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T10:32:43.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305082868002717696",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T09:56:18.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305071141362073600",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T09:09:42.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305070488145362944",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T09:07:06.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}, {
|
||||
"id": "1305064697174687744",
|
||||
"title": "主页",
|
||||
"description": "返回 Index 主页视图",
|
||||
"businessType": "ADD",
|
||||
"requestMethod": "GET",
|
||||
"method": "/index",
|
||||
"operateUrl": "/index",
|
||||
"operateAddress": "127.0.0.1",
|
||||
"requestParam": null,
|
||||
"requestBody": "",
|
||||
"responseBody": null,
|
||||
"success": true,
|
||||
"loggingType": "OPERATE",
|
||||
"errorMsg": null,
|
||||
"systemOs": "Windows",
|
||||
"createTime": "2020-09-13T08:44:05.000+0000",
|
||||
"operateName": "admin",
|
||||
"map": {},
|
||||
"browser": "谷歌浏览器"
|
||||
}]
|
||||
}
|
||||
41
public/demos/data/organization.json
Executable file
41
public/demos/data/organization.json
Executable file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"code": 0,
|
||||
"msg": "...",
|
||||
"count": 3,
|
||||
"data": [{
|
||||
"name": "软件部",
|
||||
"userCount": 324,
|
||||
"location": "二楼201",
|
||||
"leader": "皮卡丘"
|
||||
}, {
|
||||
"name": "美工部",
|
||||
"userCount": 98,
|
||||
"location": "二楼101",
|
||||
"leader": "皮卡丘"
|
||||
}, {
|
||||
"name": "设计部",
|
||||
"userCount": 43,
|
||||
"location": "六楼602",
|
||||
"leader": "皮卡丘"
|
||||
}, {
|
||||
"name": "销售部",
|
||||
"userCount": 12,
|
||||
"location": "一楼131",
|
||||
"leader": "皮卡丘"
|
||||
}, {
|
||||
"name": "产品部",
|
||||
"userCount": 128,
|
||||
"location": "四楼401",
|
||||
"leader": "皮卡丘"
|
||||
}, {
|
||||
"name": "财务部",
|
||||
"userCount": 23,
|
||||
"location": "三楼105",
|
||||
"leader": "皮卡丘"
|
||||
}, {
|
||||
"name": "人事部",
|
||||
"userCount": 67,
|
||||
"location": "二楼201",
|
||||
"leader": "皮卡丘"
|
||||
}]
|
||||
}
|
||||
143
public/demos/data/organizationtree.json
Executable file
143
public/demos/data/organizationtree.json
Executable file
@ -0,0 +1,143 @@
|
||||
{
|
||||
"status": {
|
||||
"code": 200,
|
||||
"message": "操作成功"
|
||||
},
|
||||
"data": [{
|
||||
"id": "0",
|
||||
"title": "济南总部",
|
||||
"last": false,
|
||||
"parentId": "9527",
|
||||
"children": [{
|
||||
"id": "001",
|
||||
"title": "杭州市",
|
||||
"last": false,
|
||||
"parentId": "0",
|
||||
"children": [{
|
||||
"id": "001001",
|
||||
"title": "软件部",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
},
|
||||
{
|
||||
"id": "001002",
|
||||
"title": "销售部",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
},
|
||||
{
|
||||
"id": "001003",
|
||||
"title": "财务部",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
},
|
||||
{
|
||||
"id": "001004",
|
||||
"title": "人事部",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
},
|
||||
{
|
||||
"id": "001005",
|
||||
"title": "行政部",
|
||||
"last": true,
|
||||
"parentId": "001"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "002",
|
||||
"title": "湖北省",
|
||||
"last": false,
|
||||
"parentId": "0",
|
||||
"children": [{
|
||||
"id": "002001",
|
||||
"title": "武汉市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
},
|
||||
{
|
||||
"id": "002002",
|
||||
"title": "黄冈市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
},
|
||||
{
|
||||
"id": "002003",
|
||||
"title": "潜江市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
},
|
||||
{
|
||||
"id": "002004",
|
||||
"title": "荆州市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
},
|
||||
{
|
||||
"id": "002005",
|
||||
"title": "襄阳市",
|
||||
"last": true,
|
||||
"parentId": "002"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "003",
|
||||
"title": "广东省",
|
||||
"last": false,
|
||||
"parentId": "0",
|
||||
"children": [{
|
||||
"id": "003001",
|
||||
"title": "广州市",
|
||||
"last": false,
|
||||
"parentId": "003",
|
||||
"children": [{
|
||||
"id": "003001001",
|
||||
"title": "天河区",
|
||||
"last": true,
|
||||
"parentId": "003001"
|
||||
},
|
||||
{
|
||||
"id": "003001002",
|
||||
"title": "花都区",
|
||||
"last": true,
|
||||
"parentId": "003001"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "003002",
|
||||
"title": "深圳市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
},
|
||||
{
|
||||
"id": "003003",
|
||||
"title": "中山市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
},
|
||||
{
|
||||
"id": "003004",
|
||||
"title": "东莞市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
},
|
||||
{
|
||||
"id": "003005",
|
||||
"title": "珠海市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
},
|
||||
{
|
||||
"id": "003006",
|
||||
"title": "韶关市",
|
||||
"last": true,
|
||||
"parentId": "003"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
185
public/demos/data/power.json
Executable file
185
public/demos/data/power.json
Executable file
@ -0,0 +1,185 @@
|
||||
{
|
||||
"code": 0,
|
||||
"msg": "...",
|
||||
"count": null,
|
||||
"data": [{
|
||||
"powerId": "1",
|
||||
"powerName": "系统管理",
|
||||
"powerType": "0",
|
||||
"powerCode": "",
|
||||
"powerUrl": "",
|
||||
"openType": null,
|
||||
"parentId": "0",
|
||||
"icon": "layui-icon-set-fill",
|
||||
"sort": 1,
|
||||
"enable": 1,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "2",
|
||||
"powerName": "用户管理",
|
||||
"powerType": "1",
|
||||
"powerCode": "sys:user:main",
|
||||
"powerUrl": "/system/user/main",
|
||||
"openType": null,
|
||||
"parentId": "1",
|
||||
"icon": "layui-icon-username",
|
||||
"sort": null,
|
||||
"enable": 1,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "3",
|
||||
"powerName": "角色管理",
|
||||
"powerType": "1",
|
||||
"powerCode": "sys:role:main",
|
||||
"powerUrl": "/system/role/main",
|
||||
"openType": null,
|
||||
"parentId": "1",
|
||||
"icon": "layui-icon-user",
|
||||
"sort": null,
|
||||
"enable": 1,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "4",
|
||||
"powerName": "权限管理",
|
||||
"powerType": "1",
|
||||
"powerCode": "sys:power:main",
|
||||
"powerUrl": "/system/power/main",
|
||||
"openType": null,
|
||||
"parentId": "1",
|
||||
"icon": "layui-icon-vercode",
|
||||
"sort": null,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "442359447487123456",
|
||||
"powerName": "角色列表",
|
||||
"powerType": "2",
|
||||
"powerCode": "sys:role:data",
|
||||
"powerUrl": "",
|
||||
"openType": null,
|
||||
"parentId": "3",
|
||||
"icon": "layui-icon-rate",
|
||||
"sort": 1,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "442417411065516032",
|
||||
"powerName": "敏捷开发",
|
||||
"powerType": "0",
|
||||
"powerCode": "",
|
||||
"powerUrl": "",
|
||||
"openType": null,
|
||||
"parentId": "0",
|
||||
"icon": "layui-icon-senior",
|
||||
"sort": 2,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "442418188639145984",
|
||||
"powerName": "模板管理",
|
||||
"powerType": "1",
|
||||
"powerCode": "exp:template:main",
|
||||
"powerUrl": "/system/user/main",
|
||||
"openType": null,
|
||||
"parentId": "442417411065516032",
|
||||
"icon": "layui-icon-template-1",
|
||||
"sort": null,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "442520236248403968",
|
||||
"powerName": "数据监控",
|
||||
"powerType": "1",
|
||||
"powerCode": "/druid/index.html",
|
||||
"powerUrl": "/druid/index.html",
|
||||
"openType": null,
|
||||
"parentId": "694203021537574912",
|
||||
"icon": "layui-icon-chart",
|
||||
"sort": 1,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "442650387514789888",
|
||||
"powerName": "定时任务",
|
||||
"powerType": "0",
|
||||
"powerCode": "",
|
||||
"powerUrl": "",
|
||||
"openType": null,
|
||||
"parentId": "0",
|
||||
"icon": "layui-icon-log",
|
||||
"sort": 5,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "442650770626711552",
|
||||
"powerName": "任务管理",
|
||||
"powerType": "1",
|
||||
"powerCode": "qrt:task:main",
|
||||
"powerUrl": "/qrt/task/main",
|
||||
"openType": null,
|
||||
"parentId": "442650387514789888",
|
||||
"icon": "layui-icon-chat",
|
||||
"sort": 1,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "442651158935375872",
|
||||
"powerName": "任务日志",
|
||||
"powerType": "1",
|
||||
"powerCode": "qrt:log:main",
|
||||
"powerUrl": "/qrt/log/main",
|
||||
"openType": null,
|
||||
"parentId": "442650387514789888",
|
||||
"icon": "layui-icon-file",
|
||||
"sort": 2,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "442722702474743808",
|
||||
"powerName": "数据字典",
|
||||
"powerType": "1",
|
||||
"powerCode": "system:dictType:main",
|
||||
"powerUrl": "/system/dictType/main",
|
||||
"openType": null,
|
||||
"parentId": "1",
|
||||
"icon": "layui-icon-form",
|
||||
"sort": 1,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "5",
|
||||
"powerName": "工作流程",
|
||||
"powerType": "0",
|
||||
"powerCode": "",
|
||||
"powerUrl": "",
|
||||
"openType": null,
|
||||
"parentId": "0",
|
||||
"icon": "layui-icon-util",
|
||||
"sort": 3,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "6",
|
||||
"powerName": "模型管理",
|
||||
"powerType": "1",
|
||||
"powerCode": null,
|
||||
"powerUrl": null,
|
||||
"openType": null,
|
||||
"parentId": "5",
|
||||
"icon": "layui-icon layui-icon-edit",
|
||||
"sort": null,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "694203021537574912",
|
||||
"powerName": "系统监控",
|
||||
"powerType": "0",
|
||||
"powerCode": "",
|
||||
"powerUrl": "",
|
||||
"openType": null,
|
||||
"parentId": "0",
|
||||
"icon": "layui-icon-console",
|
||||
"sort": 4,
|
||||
"checkArr": "0"
|
||||
}, {
|
||||
"powerId": "694203311615639552",
|
||||
"powerName": "接口文档",
|
||||
"powerType": "1",
|
||||
"powerCode": "",
|
||||
"powerUrl": "/swagger-ui.html",
|
||||
"openType": null,
|
||||
"parentId": "694203021537574912",
|
||||
"icon": "layui-icon-chart",
|
||||
"sort": 1,
|
||||
"checkArr": "0"
|
||||
}]
|
||||
}
|
||||
42
public/demos/data/role.json
Executable file
42
public/demos/data/role.json
Executable file
@ -0,0 +1,42 @@
|
||||
{
|
||||
"code": 0,
|
||||
"msg": "...",
|
||||
"count": 3,
|
||||
"data": [{
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"remark": null,
|
||||
"roleId": "1",
|
||||
"roleName": "超级管理员",
|
||||
"roleCode": "admin",
|
||||
"enable": "1",
|
||||
"details": "超级管理员",
|
||||
"checked": false
|
||||
}, {
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"remark": null,
|
||||
"roleId": "2",
|
||||
"roleName": "普通管理员",
|
||||
"roleCode": "manager",
|
||||
"enable": "0",
|
||||
"details": "普通管理员",
|
||||
"checked": false
|
||||
}, {
|
||||
"createTime": null,
|
||||
"createBy": null,
|
||||
"updateTime": null,
|
||||
"updateBy": null,
|
||||
"remark": null,
|
||||
"roleId": "3",
|
||||
"roleName": "普通用户",
|
||||
"roleCode": "pearson",
|
||||
"enable": "0",
|
||||
"details": "普通用户",
|
||||
"checked": false
|
||||
}]
|
||||
}
|
||||
132
public/demos/data/table.json
Executable file
132
public/demos/data/table.json
Executable file
@ -0,0 +1,132 @@
|
||||
{
|
||||
"code": 0,
|
||||
"msg": "...",
|
||||
"count": 3,
|
||||
"data": [{
|
||||
"userId": "1",
|
||||
"username": "admin",
|
||||
"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "超级'管'理员",
|
||||
"email": "854085'4@'qq.com",
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "15543526531",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "2",
|
||||
"username": "854085467",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "就\"眠\"仪式",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "3",
|
||||
"username": "970796069",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "王二麻子",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "4",
|
||||
"username": "admin",
|
||||
"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "超级管理员",
|
||||
"email": "8540854@qq.com",
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "15543526531",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "5",
|
||||
"username": "854085467",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "就眠仪式",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "6",
|
||||
"username": "970796069",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "王二麻子",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "7",
|
||||
"username": "admin",
|
||||
"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "超级管理员",
|
||||
"email": "8540854@qq.com",
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "15543526531",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "8",
|
||||
"username": "854085467",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "就眠仪式",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "9",
|
||||
"username": "970796069",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "王二麻子",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}]
|
||||
}
|
||||
118
public/demos/data/user.json
Executable file
118
public/demos/data/user.json
Executable file
@ -0,0 +1,118 @@
|
||||
{
|
||||
"code": 0,
|
||||
"msg": "...",
|
||||
"count": 3,
|
||||
"data": [{
|
||||
"userId": "1",
|
||||
"username": "admin",
|
||||
"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "超级管理员",
|
||||
"email": "8540854@qq.com",
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "15543526531",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "442488661347536896",
|
||||
"username": "854085467",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "就眠仪式",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "0",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "442492965651353600",
|
||||
"username": "970796069",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "王二麻子",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "1",
|
||||
"username": "admin",
|
||||
"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "超级管理员",
|
||||
"email": "8540854@qq.com",
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "15543526531",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "442488661347536896",
|
||||
"username": "854085467",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "就眠仪式",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "442492965651353600",
|
||||
"username": "970796069",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "王二麻子",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "1",
|
||||
"username": "admin",
|
||||
"password": "$2a$10$1K7E1.IYCrsoZVCb6utOo.5jENtfOzhdKWhc49t2lk.UQd7Oam4FG",
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "超级管理员",
|
||||
"email": "8540854@qq.com",
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "15543526531",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}, {
|
||||
"userId": "442488661347536896",
|
||||
"username": "854085467",
|
||||
"password": null,
|
||||
"salt": null,
|
||||
"status": null,
|
||||
"realName": "就眠仪式",
|
||||
"email": null,
|
||||
"avatar": null,
|
||||
"sex": "1",
|
||||
"phone": "1555324324234",
|
||||
"enable": "1",
|
||||
"login": "1",
|
||||
"roleIds": null
|
||||
}]
|
||||
}
|
||||
66
public/demos/demo/index.html
Executable file
66
public/demos/demo/index.html
Executable 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/demos/document/area.html
Executable file
143
public/demos/document/area.html
Executable 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/demos/document/button.html
Executable file
305
public/demos/document/button.html
Executable 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>
|
||||
<button class="pear-btn pear-btn-primary">Primary Button</button>
|
||||
<br>
|
||||
<br>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Primary</button>
|
||||
<button class="pear-btn pear-btn-success"> Button-Success</button>
|
||||
<button class="pear-btn pear-btn-danger"> Button-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">
|
||||
<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>
|
||||
<button plain class="pear-btn pear-btn-success"> Button-Success</button>
|
||||
<button plain class="pear-btn pear-btn-danger"> Button-Danger</button>
|
||||
<button plain class="pear-btn pear-btn-warming"> Button-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">
|
||||
<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>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Default</button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm</button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs</button>
|
||||
<br>
|
||||
<br>
|
||||
<button class="pear-btn pear-btn-warming pear-btn-lg"> Button-Lg</button>
|
||||
<button class="pear-btn pear-btn-warming"> Button-Default</button>
|
||||
<button class="pear-btn pear-btn-warming pear-btn-sm"> Button-Sm</button>
|
||||
<button class="pear-btn pear-btn-warming pear-btn-xs"> Button-Xs</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">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Default </button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>
|
||||
</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/demos/document/card.html
Executable file
78
public/demos/document/card.html
Executable 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"></i>
|
||||
搜 索</button>
|
||||
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon"></i>
|
||||
获取数据</button>
|
||||
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-checked-btn"><i class="layui-icon"></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: '../../demos/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/demos/document/core.html
Executable file
219
public/demos/document/core.html
Executable 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/demos/document/count.html
Executable file
124
public/demos/document/count.html
Executable 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/demos/document/drawer.html
Executable file
597
public/demos/document/drawer.html
Executable 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/demos/document/drawerFragment.html
Executable file
385
public/demos/document/drawerFragment.html
Executable 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: '../../demos/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/demos/document/dtree.html
Executable file
165
public/demos/document/dtree.html
Executable 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: "../../demos/data/dtree.json"
|
||||
});
|
||||
|
||||
dtree.render({
|
||||
elem: "#demoTree3",
|
||||
initLevel: "1",
|
||||
method: 'get',
|
||||
url: "../../demos/data/dataTree2.json",
|
||||
dataFormat: "list", //配置data的风格为list
|
||||
checkbar: true //开启复选框
|
||||
});
|
||||
|
||||
dtree.render({
|
||||
elem: "#demoTree2",
|
||||
initLevel: "1",
|
||||
method: 'get',
|
||||
url: "../../demos/data/dtree.json",
|
||||
select: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
160
public/demos/document/encrypt.html
Executable file
160
public/demos/document/encrypt.html
Executable 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() + ' 明文 : ' + $("#enter").val() +
|
||||
' 加密结果 : ' + end + '</button><br><br>');
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
180
public/demos/document/form.html
Executable file
180
public/demos/document/form.html
Executable 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">
|
||||
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
|
||||
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
|
||||
<input type="checkbox" name="aaa" lay-skin="switch" 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="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/demos/document/fullscreen.html
Executable file
126
public/demos/document/fullscreen.html
Executable 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/demos/document/icon.html
Executable file
2195
public/demos/document/icon.html
Executable file
File diff suppressed because it is too large
Load Diff
244
public/demos/document/iconPicker.html
Executable file
244
public/demos/document/iconPicker.html
Executable 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/demos/document/loading.html
Executable file
174
public/demos/document/loading.html
Executable 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/demos/document/menu.html
Executable file
115
public/demos/document/menu.html
Executable 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: "../../demos/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: "../../demos/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/demos/document/notice.html
Executable file
148
public/demos/document/notice.html
Executable 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/demos/document/popover.html
Executable file
227
public/demos/document/popover.html
Executable 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/demos/document/popup.html
Executable file
127
public/demos/document/popup.html
Executable 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/demos/document/select.html
Executable file
218
public/demos/document/select.html
Executable 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/demos/document/step.html
Executable file
256
public/demos/document/step.html
Executable 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">
|
||||
 下一步 
|
||||
</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">
|
||||
 确认入款 
|
||||
</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;"></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/demos/document/tab.html
Executable file
152
public/demos/document/tab.html
Executable 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/demos/document/tabContent.html
Executable file
38
public/demos/document/tabContent.html
Executable 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/demos/document/table.html
Executable file
412
public/demos/document/table.html
Executable 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: '../../demos/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/demos/document/tag.html
Executable file
265
public/demos/document/tag.html
Executable 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/demos/document/tinymce.html
Executable file
93
public/demos/document/tinymce.html
Executable 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/demos/document/toast.html
Executable file
291
public/demos/document/toast.html
Executable 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/demos/document/topBar.html
Executable file
279
public/demos/document/topBar.html
Executable 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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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="../../demos/css/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>
|
||||
234
public/demos/document/treetable.html
Executable file
234
public/demos/document/treetable.html
Executable file
@ -0,0 +1,234 @@
|
||||
<!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,
|
||||
treeIdName: 'powerId',
|
||||
treePidName: 'parentId',
|
||||
skin:'line',
|
||||
treeDefaultClose: true,
|
||||
toolbar:'#power-toolbar',
|
||||
elem: '#power-table',
|
||||
url: '../../demos/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/demos/document/watermark.html
Executable file
161
public/demos/document/watermark.html
Executable 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/demos/echarts/column.html
Executable file
47
public/demos/echarts/column.html
Executable 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="../../demos/css/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/demos/echarts/line.html
Executable file
47
public/demos/echarts/line.html
Executable 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="../../demos/css/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/demos/echarts/script/column1.js
Executable file
137
public/demos/echarts/script/column1.js
Executable 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/demos/echarts/script/column2.js
Executable file
73
public/demos/echarts/script/column2.js
Executable 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/demos/echarts/script/column3.js
Executable file
120
public/demos/echarts/script/column3.js
Executable 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/demos/echarts/script/column4.js
Executable file
84
public/demos/echarts/script/column4.js
Executable 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/demos/echarts/script/line1.js
Executable file
236
public/demos/echarts/script/line1.js
Executable 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/demos/echarts/script/line2.js
Executable file
148
public/demos/echarts/script/line2.js
Executable 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/demos/echarts/script/line3.js
Executable file
102
public/demos/echarts/script/line3.js
Executable 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/demos/echarts/script/line4.js
Executable file
167
public/demos/echarts/script/line4.js
Executable 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/demos/error/403.html
Executable file
21
public/demos/error/403.html
Executable 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="../../demos/css/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/demos/error/404.html
Executable file
21
public/demos/error/404.html
Executable 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="../../demos/css/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/demos/error/500.html
Executable file
21
public/demos/error/500.html
Executable 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="../../demos/css/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/demos/result/error.html
Executable file
45
public/demos/result/error.html
Executable 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="../../demos/css/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>
|
||||
|
||||
<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/demos/result/success.html
Executable file
37
public/demos/result/success.html
Executable 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="../../demos/css/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>
|
||||
|
||||
<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/demos/system/deptment.html
Executable file
289
public/demos/system/deptment.html
Executable 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="../../demos/css/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: "../../demos/data/organizationtree.json"
|
||||
});
|
||||
|
||||
table.render({
|
||||
elem: '#organization-table',
|
||||
url: '../../demos/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/demos/system/dict.html
Executable file
341
public/demos/system/dict.html
Executable 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: "../../demos/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: "../../demos/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/demos/system/log.html
Executable file
101
public/demos/system/log.html
Executable 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: '../../demos/data/operateLog.json',
|
||||
page: true ,
|
||||
cols: cols ,
|
||||
skin: 'line',
|
||||
toolbar: false
|
||||
});
|
||||
|
||||
table.render({
|
||||
elem: '#log-login-table',
|
||||
url: '../../demos/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/demos/system/operate.html
Executable file
107
public/demos/system/operate.html
Executable 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>
|
||||
109
public/demos/system/operate/add.html
Executable file
109
public/demos/system/operate/add.html
Executable 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" 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/demos/system/operate/edit.html
Executable file
109
public/demos/system/operate/edit.html
Executable 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/demos/system/operate/profile.html
Executable file
108
public/demos/system/operate/profile.html
Executable 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/demos/system/person.html
Executable file
183
public/demos/system/person.html
Executable 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="../../demos/css/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="../../demos/css/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 评论 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 评论 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 评论 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 评论 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 评论 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 评论 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 评论 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 = "../../demos/css/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>
|
||||
241
public/demos/system/power.html
Executable file
241
public/demos/system/power.html
Executable file
@ -0,0 +1,241 @@
|
||||
<!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,
|
||||
treeIdName: 'powerId',
|
||||
treePidName: 'parentId',
|
||||
skin:'line',
|
||||
treeDefaultClose: true,
|
||||
toolbar:'#power-toolbar',
|
||||
elem: '#power-table',
|
||||
url: '../../demos/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/demos/system/profile.html
Executable file
108
public/demos/system/profile.html
Executable 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/demos/system/role.html
Executable file
226
public/demos/system/role.html
Executable 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: '../../demos/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/demos/system/space.html
Executable file
27
public/demos/system/space.html
Executable 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/demos/system/theme.html
Executable file
300
public/demos/system/theme.html
Executable 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">
|
||||
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
|
||||
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
|
||||
<input type="checkbox" name="aaa" lay-skin="switch" 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="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"></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"></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"></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: '../../demos/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/demos/system/user.html
Executable file
298
public/demos/system/user.html
Executable 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: '../../demos/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>
|
||||
Reference in New Issue
Block a user