-
Notifications
You must be signed in to change notification settings - Fork 28
/
index.html
163 lines (151 loc) · 6.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>layui-theme-dark</title>
<style>
wc-include{
padding: 15px;
display: block;
}
.layui-layout-right .layui-nav-bar {
background-color: unset !important;
}
.layui-layout-admin .layui-side {
top: 0 !important;
z-index: 1001;
}
.layui-layout-admin .layui-logo {
position: relative !important;
height: 60px !important;
top: -2px !important;
}
.layui-side,
.layui-header,
.layui-body,
.layui-footer {
transition: left 0.3s;
}
.collapse .layui-layout-admin .layui-side,
.collapse .layui-layout-admin .layui-header {
left: -200px;
}
.collapse .layui-layout-admin .layui-footer,
.collapse .layui-layout-admin .layui-body {
left: 0px;
}
</style>
<style>
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(root) {
z-index: 9999;
}
::view-transition-new(root) {
z-index: 1;
}
.dark::view-transition-old(root) {
z-index: 1;
}
.dark::view-transition-new(root) {
z-index: 9999;
}
</style>
<script type="module" src="./docs/lib/include.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item"><span id="layuiv" style="margin-left: 20px; font-size: 10px"></span></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<i id="change-theme" class="layui-icon layui-icon-theme" style="font-size: 20px"></i>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" style="background-color: unset">
<i class="layui-icon layui-icon-github" style="font-size: 20px"></i>
</a>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;" style="background-color: unset; padding-left: 0">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域 -->
<div class="layui-logo layui-bg-black">dark demo</div>
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-unselect lay-filter="nav-side" id="ws-nav-side">
<li class="layui-nav-item">
<a class="" href="javascript:;">基本元素</a>
<dl class="layui-nav-child">
<dd><a data-path="view/button" href="javascript:;">按钮</a></dd>
<dd><a data-path="view/element.nav" href="javascript:;">导航/面包屑</a></dd>
<dd><a data-path="view/form" href="javascript:;">表单</a></dd>
<dd><a data-path="view/menu" href="javascript:;">基础菜单</a></dd>
<dd><a data-path="view/element.tab" href="javascript:;">选项卡</a></dd>
<dd><a data-path="view/progress" href="javascript:;">进度条</a></dd>
<dd><a data-path="view/panel" href="javascript:;">面板</a></dd>
<dd><a data-path="view/badge" href="javascript:;">徽章</a></dd>
<dd><a data-path="view/timeline" href="javascript:;">时间线</a></dd>
<dd><a data-path="view/table-static" href="javascript:;">静态表格</a></dd>
<dd><a data-path="view/auxiliar" href="javascript:;">辅助元素</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">组件示例</a>
<dl class="layui-nav-child">
<dd><a data-path="view/layer" href="javascript:;">弹出层</a></dd>
<dd><a data-path="view/laydate" href="javascript:;">日期与时间选择</a></dd>
<dd><a data-path="view/table" href="javascript:;">表格综合</a></dd>
<dd><a data-path="view/table-test" href="javascript:;">表格操作</a></dd>
<dd><a data-path="view/treeTable" href="javascript:;">树形表格</a></dd>
<dd><a data-path="view/laypage" href="javascript:;">分页</a></dd>
<dd><a data-path="view/upload" href="javascript:;">上传</a></dd>
<dd><a data-path="view/dropdown" href="javascript:;">下拉菜单</a></dd>
<dd><a data-path="view/transfer" href="javascript:;">穿梭框</a></dd>
<dd><a data-path="view/tree" href="javascript:;">树形组件</a></dd>
<dd><a data-path="view/colorpicker" href="javascript:;">颜色选择器</a></dd>
<dd><a data-path="view/slider" href="javascript:;">滑块</a></dd>
<dd><a data-path="view/rate" href="javascript:;">评分</a></dd>
<dd><a data-path="view/carousel" href="javascript:;">轮播</a></dd>
<dd><a data-path="view/flow" href="javascript:;">流加载</a></dd>
<dd><a data-path="view/util" href="javascript:;">工具模块</a></dd>
<dd><a data-path="view/code" href="javascript:;">文本行修饰</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">第三方模块</a>
<dl class="layui-nav-child">
<!-- <dd><a data-path="view/color-mode" href="javascript:;">colorMode 模块(WIP)</a></dd> -->
<dd><a data-path="view/layui-soul-table" href="javascript:;">layui-soul-table</a></dd>
<dd><a data-path="view/xm-select" href="javascript:;">xm-select</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<wc-include id="router-view" allow-scripts></wc-include>
</div>
<!-- <div class="layui-footer">
底部固定区域
</div> -->
</div>
<script src="./app.js"></script>
</body>
</html>