新增文档目录

demo/pc/tree.html

@@ -195,3 +195,53 @@
     </div>
   </div>
 </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>

public/cdn/layui-ul-change.css

@@ -1,6 +1,5 @@
-@media screen and (max-width: 768px){
+@media screen and (max-width: 768px) {}
 
-}
 .layui-nav-tree .layui-nav-item a:hover {
   background-color: #6699CC;
 }
@@ -57,20 +56,41 @@
   color: #66CCFF;
 }
 
-.layui-tab-brief > .layui-tab-more li.layui-this::after, .layui-tab-brief > .layui-tab-title .layui-this::after{
+.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-danger {
+  background-color: #FF5722;
+}
+
+.layui-btn-primary {
+  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{
+
+.layui-form-radio>i:hover,
+.layui-form-radioed>i {
   color: #66CCFF;
 }
-.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed > i{
+
+.layui-form-radio:hover *,
+.layui-form-radioed,
+.layui-form-radioed>i {
   color: #66CCFF;
 }
 
@@ -85,6 +105,7 @@
 .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;
@@ -94,16 +115,6 @@
   background-color: #66CCFF;
 }
 
-
-.layui-btn-primary:hover{
-  color: #fff;
-  border-color: #66CCFF;
-}
-.layui-btn-primary{
-  color: #fff;
-  border-color: transparent;
-}
-
 .layui-form-label {
   width      : unset;
   padding    : 3px 3px;
@@ -131,15 +142,18 @@
 .layui-nav-tree {
   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;
 }
@@ -152,7 +166,8 @@
   left: 140px;
 }
 
-.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{
+.layui-nav .layui-nav-child dd.layui-this a,
+.layui-nav-child dd.layui-this {
   background-color: #19B3FF;
 }
 

public/cdn/layui-ul.css

@@ -61,6 +61,11 @@
   background-color: #eee;
 }
 
+.ul-bg-black{
+  
+  background-color: #393D49;
+}
+
 .ul-color-main {
   color: #6cf !important;
 }
@@ -1229,3 +1234,52 @@ body .layui-quote-gray{
   color: #666;
   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;
+
+}