ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-08 13:22:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增文档目录

Browse Source
This commit is contained in:
augushong
2021-09-06 15:33:46 +08:00
parent 4e48a47f50
commit 5b33282786
3 changed files with 220 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
demo/pc/tree.html
View File

@@ -195,3 +195,53 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>文档目录</legend>
<div class="layui-field-box">
<div class="ul-bg-black">
<div class="ul-doc-info-page">
<div class="ul-doc-info-page-list">
<div class="ul-doc-info-page-item page level-0">
文章标题
</div>
<div class="ul-doc-info-page-item page level-0">
文章标题
</div>
<div class="ul-doc-info-page-item group level-0">
文章分组
</div>
<div class="ul-doc-info-page-item page level-1">
二级文章标题
</div>
<div class="ul-doc-info-page-item page level-1">
二级文章标题
</div>
<div class="ul-doc-info-page-item point level-2">
文章内部锚点
</div>
<div class="ul-doc-info-page-item point level-2">
文章内部锚点
</div>
<div class="ul-doc-info-page-item group level-0">
文章分组
</div>
<div class="ul-doc-info-page-item page level-1">
二级文章标题
</div>
<div class="ul-doc-info-page-item page level-1">
二级文章标题
</div>
<div class="ul-doc-info-page-item point level-2">
文章内部锚点
</div>
<div class="ul-doc-info-page-item point level-2">
文章内部锚点
</div>
</div>
</div>
</div>
<div>
这个样式不适合做复杂的特效,比如展开收缩/上移下移.用来展示就好.
</div>
</div>
</fieldset>

217
public/cdn/layui-ul-change.css
View File

@@ -1,169 +1,184 @@
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {}
} .layui-nav-tree .layui-nav-item a:hover {
.layui-nav-tree .layui-nav-item a:hover{ background-color: #6699CC;
background-color: #6699CC;
} }
.layui-bg-black{ .layui-bg-black {
background-color: #66CCFF !important; background-color: #66CCFF !important;
} }
.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this, .layui-nav-tree .layui-this,
.layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-this > a:hover{ .layui-nav-tree .layui-this>a:hover {
background-color: #6699CC; background-color: #6699CC;
} }
.layui-layout-admin .layui-logo{ .layui-layout-admin .layui-logo {
color: #fff; color : #fff;
line-height: 45px; line-height: 45px;
} }
.layui-layout-admin .layui-header{ .layui-layout-admin .layui-header {
background-color: #39BDFF; background-color: #39BDFF;
} }
.layui-nav { .layui-nav {
background-color: #66CCFF; background-color: #66CCFF;
} }
.layui-header{ .layui-header {
height: 45px; height: 45px;
} }
.layui-nav .layui-nav-item{ .layui-nav .layui-nav-item {
line-height: 45px; line-height: 45px;
} }
.layui-nav .layui-nav-item a { .layui-nav .layui-nav-item a {
color: #FFFFFF; color: #FFFFFF;
} }
.layui-nav .layui-nav-child a { .layui-nav .layui-nav-child a {
color: #66CCFF; color: #66CCFF;
} }
.layui-nav .layui-this::after, .layui-nav .layui-this::after,
.layui-nav-bar, .layui-nav-bar,
.layui-nav-tree .layui-nav-itemed::after { .layui-nav-tree .layui-nav-itemed::after {
background-color: #CCFFFF; background-color: #CCFFFF;
} }
.layui-tab-brief > .layui-tab-title .layui-this{ .layui-tab-brief>.layui-tab-title .layui-this {
color: #66CCFF;
}
.layui-tab-brief > .layui-tab-more li.layui-this::after, .layui-tab-brief > .layui-tab-title .layui-this::after{
border-color: #66CCFF;
}
.layui-btn{
background-color: #66CCFF;
}
.layui-btn.layui-btn-disabled{
background-color: #FBFBFB;
}
.layui-form-radio > i:hover, .layui-form-radioed > i{
color: #66CCFF;
}
.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed > i{
color: #66CCFF; color: #66CCFF;
} }
.layui-elem-quote{ .layui-tab-brief>.layui-tab-more li.layui-this::after,
border-color: #66CCFF; .layui-tab-brief>.layui-tab-title .layui-this::after {
border-color: #66CCFF;
} }
.layui-laydate td.layui-this{ .layui-btn {
background-color: #66CCFF !important;
}
.layui-form-checkbox[lay-skin="primary"]:hover i{
border-color: #66CCFF;
}
.layui-form-checked[lay-skin="primary"] i{
border-color: #66CCFF !important;
background-color: #66CCFF !important;
}
.layui-form-select dl dd.layui-this{
background-color: #66CCFF; background-color: #66CCFF;
} }
.layui-btn-danger {
background-color: #FF5722;
}
.layui-btn-primary:hover{ .layui-btn-primary {
color: #fff; background-color: #fff;
color : #666;
border-color : #d2d2d2;
}
.layui-btn-primary:hover {
border-color: #6cf;
}
.layui-btn.layui-btn-disabled {
background-color: #FBFBFB;
}
.layui-form-radio>i:hover,
.layui-form-radioed>i {
color: #66CCFF;
}
.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
color: #66CCFF;
}
.layui-elem-quote {
border-color: #66CCFF; border-color: #66CCFF;
} }
.layui-btn-primary{
color: #fff; .layui-laydate td.layui-this {
border-color: transparent; background-color: #66CCFF !important;
} }
.layui-form-label{ .layui-form-checkbox[lay-skin="primary"]:hover i {
width: unset; border-color: #66CCFF;
padding: 3px 3px; }
float: unset;
text-align: left; .layui-form-checked[lay-skin="primary"] i {
border-color : #66CCFF !important;
background-color: #66CCFF !important;
}
.layui-form-select dl dd.layui-this {
background-color: #66CCFF;
}
.layui-form-label {
width : unset;
padding : 3px 3px;
float : unset;
text-align : left;
font-weight: 600; font-weight: 600;
font-size: 15px; font-size : 15px;
} }
.layui-input-block{ .layui-input-block {
margin-left: 0; margin-left: 0;
} }
.layui-form-pane .layui-form-label{ .layui-form-pane .layui-form-label {
float: left; float : left;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size : 14px;
} }
.layui-nav-tree .layui-nav-item a{ .layui-nav-tree .layui-nav-item a {
height: 35px; height : 35px;
line-height: 35px; line-height: 35px;
} }
.layui-nav-tree{ .layui-nav-tree {
width: 140px; width: 140px;
}
.layui-layout-admin .layui-side{
width: 140px;
top: 45px;
}
.layui-layout-admin .layui-footer{
left: 140px;
height: 35px;
line-height: 35px;
}
.layui-layout-admin .layui-body{
top: 45px;
} }
.layui-side-scroll{ .layui-layout-admin .layui-side {
width: 140px; width: 140px;
top : 45px;
} }
.layui-body{ .layui-layout-admin .layui-footer {
left: 140px; left : 140px;
height : 35px;
line-height: 35px;
} }
.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{ .layui-layout-admin .layui-body {
background-color: #19B3FF; top: 45px;
} }
.layui-nav-child{ .layui-side-scroll {
width: 140px;
}
.layui-body {
left: 140px;
}
.layui-nav .layui-nav-child dd.layui-this a,
.layui-nav-child dd.layui-this {
background-color: #19B3FF;
}
.layui-nav-child {
padding: 0; padding: 0;
} }
.layui-nav-tree .layui-nav-bar{ .layui-nav-tree .layui-nav-bar {
background-color: #66CCFF; background-color: #66CCFF;
} }
.layui-form-label .layui-word-aux{ .layui-form-label .layui-word-aux {
font-size: 12px; font-size: 12px;
} }

54
public/cdn/layui-ul.css
View File

@@ -61,6 +61,11 @@
background-color: #eee; background-color: #eee;
} }
.ul-bg-black{
background-color: #393D49;
}
.ul-color-main { .ul-color-main {
color: #6cf !important; color: #6cf !important;
} }
@@ -1228,4 +1233,53 @@ body .layui-quote-gray{
background-color: #f0f0f0; background-color: #f0f0f0;
color: #666; color: #666;
border-left-color: #ddd; border-left-color: #ddd;
}
.ul-doc-info-page-list {
padding: 15px;
color : #999;
}
.ul-doc-info-page-item {
line-height: 2;
padding : 0 15px;
position: relative;
}
.ul-doc-info-page-item.page {
cursor : pointer;
font-size: 18px;
}
.ul-doc-info-page-item.group {
color : #bbb;
font-size: 16px;
}
.ul-doc-info-page-item.point {
color : #eee;
font-size: 14px;
}
.ul-doc-info-page-item.page:hover {
background-color: #555;
}
.ul-doc-info-page-item.level-0 {}
.ul-doc-info-page-item.level-1 {
margin-left: 15px;
}
.ul-doc-info-page-item.level-2 {
margin-left: 30px;
}
.ul-doc-info-page-item.level-3 {
margin-left: 45px;
} }