-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
460 lines (438 loc) · 15.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="css/hp-layui.css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body class="layui-layout-body hp-white-theme">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">
hp-layui 与你同在
</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="hp-side-menu">
<span><i class="layui-icon " ></i></span>
</li>
<li class="layui-nav-item">
<a href="">阿里云</a>
</li>
<li class="layui-nav-item">
<a href="">CRM系统</a>
</li>
<li class="layui-nav-item">
<a href="">EHR系统</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd>
<a href="">邮件管理</a>
</dd>
<dd>
<a href="">消息管理</a>
</dd>
<dd>
<a href="">授权管理</a>
</dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a class="name" href="javascript:;"><i class="layui-icon"></i>主题<span class="layui-nav-more"></span></a>
<dl class="layui-nav-child layui-anim layui-anim-upbit">
<dd>
<a skin="hp-black-theme" class="hp-theme-skin-switch" href="javascript:;">低调黑</a>
</dd>
<dd>
<a skin="hp-blue-theme" class="hp-theme-skin-switch" href="javascript:;">炫酷蓝</a>
</dd>
<dd>
<a skin="hp-green-theme" class="hp-theme-skin-switch" href="javascript:;">原谅绿</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="">退出</a>
</li>
</ul>
</div>
<div class="layui-side hp-left-menu">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav hp-nav-none">
<li class="layui-nav-item">
<a href="javascript:;" class="hp-user-name">
<img src="img/1.jpg" class="layui-circle-img"><span class="hp-kd">隐无为</span>
</a>
<dl class="layui-nav-child">
<dd>
<a href="">基本资料</a>
</dd>
<dd>
<a href="">安全设置</a>
</dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-nav-tree " lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;"><i class="layui-icon hp-icon-size"></i>基本功能</a>
<dl class="layui-nav-child">
<dd>
<a class="hp-tab-add" hp-href="demo/button.html" href="javascript:;">
<i class="layui-icon hp-icon-size"></i> 按钮
</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="demo/form.html" href="javascript:;">
<i class="layui-icon hp-icon-size"></i> 表单
</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="demo/table.html" href="javascript:;">
<i class="layui-icon hp-icon-size"></i> 表格
</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="demo/layout.html" href="javascript:;">
<i class="layui-icon hp-icon-size"></i> 布局
</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="demo/layer.html" href="javascript:;">
<i class="layui-icon hp-icon-size"></i> 弹窗
</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="demo/upload.html" href="javascript:;">
<i class="layui-icon hp-icon-size"></i> 上传
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon hp-icon-size"></i>扩展组件</a>
<dl class="layui-nav-child">
<dd>
<a class="hp-tab-add" hp-href="hpDemo/hpTab.html" href="javascript:;">动态选项卡</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="hpDemo/hpRightMenu.html" href="javascript:;">右键菜单项</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="hpDemo/hpLayedit.html" href="javascript:;">多图编辑器</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="hpDemo/hpFormAll.html" href="javascript:;">表单全屏层</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="hpDemo/hpWindow.html">弹出窗口层</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon hp-icon-size"></i>示例页面</a>
<dl class="layui-nav-child">
<dd>
<a target="_blank" href="pageDemo/login/login1.html">登录页面</a>
</dd>
<dd>
<a target="_blank" href="pageDemo/404.html">404页面</a>
</dd>
<dd>
<a href="javascript:;">二级菜单<span class="layui-nav-more"></span></a>
<dl class="layui-nav-child hp-child-menu">
<dd>
<a lay-href="component/form/element.html">子菜单一</a>
</dd>
<dd>
<a lay-href="component/form/group.html">子菜单二</a>
</dd>
</dl>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon hp-icon-size"></i>数据列表</a>
<dl class="layui-nav-child">
<dd>
<a class="hp-tab-add" hp-href="pageDemo/list/dataList.html" href="javascript:;">基础列表</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="pageDemo/list/imgList.html" href="javascript:;">图文列表</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="pageDemo/list/formList.html" href="javascript:;">表单列表</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon hp-icon-size"></i>数据分析</a>
<dl class="layui-nav-child">
<dd>
<a class="hp-tab-add" hp-href="pageDemo/echarts/bar.html" href="javascript:;">柱状图</a>
</dd>
<dd>
<a class="hp-tab-add" hp-href="pageDemo/echarts/pie.html" href="javascript:;">饼图</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a target="_blank" href="https://github.com/open-plans">github组织</a>
</li>
<li class="layui-nav-item">
<a target="_blank" href="https://hpit-bat.github.io/hpit-BAT-home">黑科技</a>
</li>
<li class="layui-nav-item">
<a target="_blank" href="open-itsource/index.html">文档</a>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div class="layui-tab hp-tab " style="" lay-filter="hp-tab-filter" lay-allowclose="true">
<ul class="layui-tab-title" style="">
<li class="layui-this" lay-id="0">
<i class="layui-icon hp-icon-size"></i>首页
</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>
<div class="layui-bg-green demo-carousel">
<p style="font-size: 30px;">hp-layui 与你同在</p>
<p style="font-size: 28px;">隐无为</p>
</div>
</div>
<div>
<div class="layui-bg-red demo-carousel">
<p style="font-size: 30px;">hp-layui 与你同在</p>
<p style="font-size: 28px;">隐无为</p>
</div>
</div>
<div>
<div class="layui-bg-blue demo-carousel">
<p style="font-size: 30px;">hp-layui 与你同在</p>
<p style="font-size: 28px;">隐无为</p>
</div>
</div>
<div>
<div class="layui-bg-orange demo-carousel">
<p style="font-size: 30px;">hp-layui 与你同在</p>
<p style="font-size: 28px;">隐无为</p>
</div>
</div>
<div>
<div class="layui-bg-cyan demo-carousel">
<p style="font-size: 30px;">hp-layui 与你同在</p>
<p style="font-size: 28px;">隐无为</p>
</div>
</div>
</div>
</div>
<!-- 源码地址 -->
<div style="margin-top: 10px;">
<blockquote class="layui-elem-quote">
源码地址：<br/><br/>
<a target="_blank" href="https://github.com/open-plans/hp-layui"><button class="layui-btn layui-btn-danger layui-btn-sm">github</button></a>
</blockquote>
<blockquote class="layui-elem-quote">
<h2>hp-layui 与你同在 @隐无为</h2> 如果你有什么疑问欢迎加入qq群讨论交流前端知识
<br/>
<b>qq群:693291343(此群不在加人(整顿中,等待通知))</b>
<br/>
<h2>最近工作比较忙,代码更新慢了，尴尬。。。。。。。</h2>
</blockquote>
<blockquote class="layui-elem-quote">
计划:<br/> 1.运用此模板的后台项目(正在码代码中。。。。)
<br/> 2.增加更多的事例页面
<br/> 3.继续美化样式
<br/>
</blockquote>
</div>
<!--时间线 -->
<div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>hp-layui 今生前世</legend>
</fieldset>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title" style="color: red;">
<div class="layui-timeline-title" style="color: red;">
v1.2.0-更新内容如下
</div>
<ul>
<li>
1、 更新原layui 版本 2.2.5到2.4.3
</li>
<li>
2、 设置侧边栏并自适应
</li>
<li>
3、 多级菜单(示例页面二级菜单)
</li>
<li>
4、 如果还要用以前的table样式 <br/>
可以使用hpTable,已成为内置模块
</li>
</ul>
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title" style="color: red;">
<div class="layui-timeline-title" style="color: red;">
v1.1.0-更新内容如下
</div>
<ul>
<li>
1、 归总模块(具体查看hpModules)
</li>
<li>
2、 样式美化：菜单加上图标、选项卡加上主题色
</li>
</ul>
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title" style="color: red;">
1.增加配置类hpConfig，兼容静态服务器只能get,若要修改post改参数变量isAjaxType='post' 即可
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title" style="color: red;">
更新layui 版本 2.2.5 并添加了如下功能
</div>
<ul>
<li>
示例页面
</li>
<li>
数据列表页面
</li>
<li>
数据分析(百度图表技术Echarts)
</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title" style="color: red;">
2018-没想到layui已经陪我到了2018年,感叹青春正在奔跑
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title" style="color: red;">2017末尾,想把学习的layui成果分享->hp-layui-1.0 </div>
<ul>
<li>
基本功能
</li>
<li>
扩展组件(layui 模块写法)
</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title" style="color: red;">2017 中途,更新版本layui-2.x 感觉layui-越来越好</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title" style="color: red;">2017伊始,接触 layui-1.x 学习使用 </div>
</div>
</li>
<li class="layui-timeline-item">
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">
<p>Hosted by
<a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© hp-layui-version-1.0
</div>
</div>
<script src="lib/layui/layui.js"></script>
<script>
// 配置
layui.config({
base: './hpModules/' // 扩展模块目录
}).extend({ // 模块别名
hpIndex: 'admin/hpIndex',
hpTab: 'hpComponent/hpTab',
hpRightMenu: 'hpComponent/hpRightMenu',
hpFormAll: 'hpComponent/hpFormAll',
hpLayedit: 'hpComponent/hpLayedit',
hpTheme: 'hpComponent/hpTheme',
test: '{/}./other/test' // {/}的意思即代表采用自有路径，即不跟随 base 路径
});
//JavaScript代码区域
layui.use(['element', 'carousel', 'hpTheme', 'hpTab', 'hpLayedit', 'hpRightMenu', 'test', 'hpIndex'], function() {
var element = layui.element;
var carousel = layui.carousel; //轮播
var hpTab = layui.hpTab;
var hpRightMenu = layui.hpRightMenu;
var hpTheme = layui.hpTheme;
var hpIndex = layui.hpIndex;
$ = layui.jquery;
/*var test=layui.test;
console.log(test.version) */
// 初始化主题
hpTheme.init();
//初始化轮播
carousel.render({
elem: '#test1',
width: '100%', //设置容器宽度
interval: 1500,
height: '500px',
arrow: 'none', //不显示箭头
anim: 'fade', //切换动画方式
});
// 初始化 动态tab
hpTab.init();
// 右键tab菜单
hpRightMenu.init();
// 主页公共js
hpIndex.init();
});
</script>
</body>
</html>