-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
368 lines (362 loc) · 14.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--name="renderer"属性用于告诉浏览器以哪种浏览器内核浏览当前网站，浏览器就会在读取到这个属性后，会立马切换到对应的模式-->
<!--content的取值主要有三种浏览器内核：webkit（使用的webkit内核，属于极速模式，常用于网站的高速浏览，网站打开速度快，但某些网站在极速模式下可能出现兼容性问题，显示不正常）、
ie-comp（使用IE兼容模式，就是用IE6，IE7，IE8的渲染模式，网站打开速度比极速模式略低，但网页兼容性问题较少，常用于网银、交易支付、旧版网站）、ie-stand（属于IE标准模式，网站会使用IE9及以上版本的渲染方式渲染，支持硬件加速、支持IE9及以上版本全新的脚本渲染引擎）-->
<meta name="renderer" content="webkit" />
<!--这是针对ie8以上浏览器的一个属性，ie8以下无法识别。ie8以上浏览器遇到这个属性会执行content的描述，大小写不敏感。IE=edge表示以最高级别的可用模式显示内容，ie7支持最高ie7，ie8支持最高ie8，也支持8以下的，但以最高支持的模式使用-->
<!--像下面的IE=edge,chrome=1表示如果IE安装了Google Chrome Frame则使用谷歌浏览器内核模式，否则使用最新的IE模式。如果不指定IE=edge时，当用户浏览器没有chrome内核时，会弹出提示框，提醒用户安装该内核-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--如果请求的url是静态的html页面，则需要在页面中添加meta标签代码-->
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<!--width为可视区域的宽度，值可以为数字或关键词device-width。initial-scale表示页面首次被显式时可视区域的缩放级别，取值1.0则页面按实际尺寸显式，无任何缩放。maximum-scale和minimum-scale表示可视区域的最大最小缩放级别-->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<!--控制苹果手机状态栏显示样式-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--删除默认的苹果工具栏和菜单栏，content有两个值“yes”和“no”，当我们需要显示工具栏和菜单栏时，这个meta就不用加了，默认就是显示-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。telephone=no表示不显示为拨号的超链接-->
<meta name="format-detection" content="telephone=no" />
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="js/plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="css/index.css" media="all" />
<title>BestGuitarAdminWeb</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">GuitarAdmin</div>
<div class="nav-hidden">
<i
title="展开左侧菜单"
id="showSide"
class="layui-icon layui-icon-shrink-right"
></i>
</div>
<!-- <a
class="hidden-menu"
href="javascript:;"
style="color: #ffffff; font-size: 16px; line-height: 60px"
><i id="showSide" class="layui-icon layui-icon-shrink-right"></i
></a> -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<i
class="layui-icon layui-icon-speaker"
style="font-size: 16px; font-weight: 500"
></i
><span style="padding-left: 5px; font-size: 16px">系统公告</span>
</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i
class="layui-icon layui-icon-theme"
style="font-size: 16px; font-weight: 500"
></i
><span style="padding-left: 5px; font-size: 16px">更换主题</span>
</a>
<dl class="layui-nav-child">
<dd>
<a
href="javascript:;"
class="theme-change"
skin="index-black-theme"
>低调黑</a
>
</dd>
<dd>
<a
href="javascript:;"
class="theme-change"
skin="index-blue-theme"
>海洋蓝</a
>
</dd>
<dd>
<a
href="javascript:;"
class="theme-change"
skin="index-green-theme"
>森林绿</a
>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" style="font-size: 16px">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img" />胡斌
</a>
<dl class="layui-nav-child">
<dd>
<a href=""
><i
class="layui-icon layui-icon-username"
style="font-size: 16px; font-weight: 500"
></i
><span style="font-size: 15px; padding-left: 5px"
>个人中心</span
></a
>
</dd>
<dd>
<a href=""
><i
class="layui-icon layui-icon-edit"
style="font-size: 16px; font-weight: 500"
></i
><span style="font-size: 15px; padding-left: 5px"
>修改密码</span
></a
>
</dd>
<dd>
<a href=""
><i
class="layui-icon layui-icon-face-smile-b"
style="font-size: 16px; font-weight: 500"
></i
><span style="font-size: 15px; padding-left: 5px"
>更换头像</span
></a
>
</dd>
<dd>
<a href=""
><i
class="layui-icon layui-icon-logout"
style="font-size: 16px; font-weight: 500"
></i
><span style="font-size: 15px; padding-left: 5px"
>退出登录</span
></a
>
</dd>
</dl>
</li>
</ul>
<div class="layui-form search-box">
<!-- <select
name="modules"
lay-verify="required"
lay-search=""
lay-filter="search-box"
>
<option value="">搜索组件或模块</option>
<option value="">搜索结果一</option>
<option value="">搜索结果二</option>
</select> -->
<input
type="text"
placeholder="请输入搜索内容"
autocomplete="off"
id="searchInput"
class="layui-input"
/>
<i
id="searchIcon"
class="layui-icon layui-icon-search search-icon"
></i>
</div>
</div>
<div class="layui-side layui-bg-black">
<div class="user-info">
<a class="userAvater" title="我的头像"><img src="img/face.jpg" /></a>
<p>你好！<span class="userName">HB</span>，欢迎登录</p>
</div>
<!-- 左侧导航区域 -->
<div class="layui-side-scroll" lay-filter="div-scroll">
<!--lay-filter：事件过滤器。一般是用于监听特定的自定义事件。可以把它看作是一个ID选择器-->
<!--lay-shrink：展开子菜单时，是否收缩兄弟节点已展开的子菜单 （注：layui 2.2.6 开始新增）。空值（默认）不收缩兄弟菜单子菜单，all收缩全部兄弟菜单子菜单-->
<ul
class="layui-nav layui-nav-tree"
lay-filter="leftNav"
lay-shrink=""
>
<li class="layui-nav-item layui-this">
<a href="javascript:;" class="index-fixed"
><i class="layui-icon" data-icon=""></i><cite>首页</cite></a
>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">系统管理</a>
<dl class="layui-nav-child">
<dd>
<a
href="javascript:;"
class="hb-tab-add"
data-href="./SystemManage/AdminManage.html"
data-id="1"
>管理员管理</a
>
</dd>
<dd>
<a
href="javascript:;"
class="hb-tab-add"
data-href="./SystemManage/UserManage.html"
data-id="2"
>用户管理</a
>
</dd>
<dd>
<a
href="javascript:;"
class="hb-tab-add"
data-href="./SystemManage/RoleManage.html"
data-id="3"
>角色管理</a
>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">曲谱管理</a>
<dl class="layui-nav-child">
<dd>
<a
href="javascript:;"
class="hb-tab-add"
data-href="./OpernManage/FolkRhymeOpern.html"
data-id="4"
>民谣曲谱</a
>
</dd>
<dd>
<a
href="javascript:;"
class="hb-tab-add"
data-href="./OpernManage/RockAndRollOpern.html"
data-id="5"
>摇滚曲谱</a
>
</dd>
<dd>
<a
href="javascript:;"
class="hb-tab-add"
data-href="./OpernManage/ClassicOpern.html"
data-id="6"
>古典曲谱</a
>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a
href=""
class="hb-tab-add"
data-href="./OtherManage/Metronome.html"
data-id="7"
>节拍器</a
>
</li>
<li class="layui-nav-item">
<a
href=""
class="hb-tab-add"
data-href="./OtherManage/StudyCorner.html"
data-id="8"
>学习天地</a
>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主题区域 -->
<div
class="layui-tab index-tab"
lay-filter="index-tab-filter"
lay-allowClose="true"
>
<ul class="layui-tab-title">
<li class="tab-home layui-this" lay-id="0">
<i class="layui-icon layui-icon-home"></i>首页
</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<!-- 源码地址 -->
<div>
<blockquote class="layui-elem-quote">
源码地址：<br /><br />
<a target="_blank" href="https://www.baidu.com"
><button class="layui-btn layui-btn-danger layui-btn-sm">
github
</button></a
>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!--底部固定区域-->
© hb.com - 底部固定区域
</div>
</div>
<script src="./js/plugins/layui/layui.js" charset="utf-8"></script>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/plugins/jquery.nicescroll-3.7.6/js/jquery.nicescroll.min.js"></script>
<script>
$(function () {
layui
.config({
base: "./js/plugins/MyLayuiModules/",
})
.extend({
// 设定模块别名
hbTab: "hbTab",
hbTheme: "hbTheme",
hbRightClickTab: "hbRightClickTab"
});
// 注意引入layui组件时传入的是一个包含组件名的数组类型数据（之前未加[]，所以效果怎么都出不来）
// 搜索框的样式是form组件自动渲染的，框内初始文本是首个option标签中的内容
layui.use(["element", "form", "hbTab", "hbTheme", "hbRightClickTab"], function () {
var element = layui.element;
var form = layui.form;
var hbTab = layui.hbTab;
var hbTheme = layui.hbTheme;
var hbRightClickTab = layui.hbRightClickTab;
// 监听导航菜单的点击
element.on("nav(leftNav)", function (elem) {
// 每次点击菜单要重置滚动条，不然会出现展开菜单该出现滚动条时不会出现滚动条的问题
$(".layui-side-scroll").getNiceScroll().resize();
});
// 监听选项卡删除
element.on("tabDelete(index-tab-filter)", function (data) {
var lay_id = $(this).parent().attr("lay-id");
$("#nav-tab-id-"+lay_id).removeAttr("tab-layid");
});
// 初始化自定义Tab组件
hbTab.init();
// 初始化主题组件
hbTheme.init();
// 初始化右键Tab上下文组件
hbRightClickTab.init();
$(".index-fixed").click(function() {
element.tabChange("index-tab-filter", "0");
})
});
});
// 发现注册滚动条功能放在$(document).ready()中是可以的，而放在$(function(){...})是不行的
$(document).ready(function () {
$(".layui-side-scroll").niceScroll({
cursorborder: "",
cursorcolor: "rgba(248,248,250,0.5)",
boxzoom: false,
enabletranslate3d: false,
});
});
</script>
</body>
</html>