feat: 迁移附带说明垂直导航

demo/pc/nav.html

@@ -1,48 +1,4 @@
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>附带说明垂直导航</legend>
-    <div class="layui-field-box">
-        <div class="ul-section">
-            <div class="ul-nav-tree ul-padding-md">
 
-                <div class="ul-nav-tree-group">
-                    <div class="ul-nav-tree-group-title">起步</div>
-                    <div class="ul-nav-tree-group-main">
-                        <a href="" class="ul-nav-tree-item current">
-                            <div class="ul-nav-tree-item-title">欢迎</div>
-                            <div class="ul-nav-tree-item-desc">项目介绍/使用说明</div>
-                        </a>
-                        <a href="" class="ul-nav-tree-item">
-                            <div class="ul-nav-tree-item-title">开始使用</div>
-                            <div class="ul-nav-tree-item-desc">安装方式,注意事项</div>
-                        </a>
-                        <a href="" class="ul-nav-tree-item">
-                            <div class="ul-nav-tree-item-title">如何使用</div>
-                            <div class="ul-nav-tree-item-desc">复制组件</div>
-                        </a>
-                    </div>
-                </div>
-                <div class="ul-nav-tree-group">
-                    <div class="ul-nav-tree-group-title">
-                        组件 </div>
-                    <div class="ul-nav-tree-group-main">
-                        <a href="" class="ul-nav-tree-item">
-                            <div class="ul-nav-tree-item-title">列表</div>
-                            <div class="ul-nav-tree-item-desc">用户列表/文章列表...</div>
-                        </a>
-                        <a href="" class="ul-nav-tree-item">
-                            <div class="ul-nav-tree-item-title">头部</div>
-                            <div class="ul-nav-tree-item-desc">页面头</div>
-                        </a>
-                        <a href="" class="ul-nav-tree-item">
-                            <div class="ul-nav-tree-item-title">导航</div>
-                            <div class="ul-nav-tree-item-desc">横竖导航/多级导航</div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</fieldset>
 <fieldset class="layui-elem-field layui-field-title">
     <legend>无底色简约导航</legend>
     <div class="layui-field-box">

public/cdn/layui-ul.css

@@ -165,35 +165,6 @@
   justify-content: space-between;
 }
 
-/* 附带说明垂直导航 */
-.ul-nav-tree-group-title {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 2;
-}
-
-.ul-nav-tree-item {
-  display: flex;
-  align-items: baseline;
-  cursor: pointer;
-  padding: 5px;
-  white-space: nowrap;
-}
-
-.ul-nav-tree-item.current .ul-nav-tree-item-title {
-  color: #6cf;
-}
-
-.ul-nav-tree-item-title {
-  font-size: 15px;
-}
-
-.ul-nav-tree-item-desc {
-  font-size: 14px;
-  color: #999;
-  margin-left: 15px;
-}
-
 .ul-nav-card-simple .ul-nav-card-item {
   border-radius: 6px;
   background-color: rgb(255, 255, 255);
@@ -1509,51 +1480,6 @@
   color: #fff;
 }
 
-/* 头部结束 */
-/* 导航开始 */
-.layui-nav.ul-nav-white {
-  background-color: #f0f0f0;
-}
-
-.layui-nav.ul-nav-white .layui-nav-child a {
-  color: #666;
-}
-
-.layui-nav.ul-nav-white .layui-nav-item a {
-  color: #666;
-}
-
-.layui-nav.ul-nav-white .layui-nav-itemed > .layui-nav-child {
-  background-color: rgba(255, 255, 255, 0.6) !important;
-  padding-left: 15px;
-  min-width: calc(100% - 15px) !important;
-}
-
-.layui-nav-tree.ul-nav-white .layui-nav-item a:hover {
-  background-color: #9cf;
-  color: #fff !important;
-}
-
-.layui-nav.ul-nav-white .layui-nav-itemed > a,
-.layui-nav-tree.ul-nav-white .layui-nav-title a,
-.layui-nav-tree.ul-nav-white .layui-nav-title a:hover {
-  color: #666 !important;
-}
-
-.layui-nav-tree.ul-nav-white .layui-nav-bar {
-  background-color: #6cf;
-}
-
-.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this,
-.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this a,
-.layui-nav-tree.ul-nav-white .layui-this,
-.layui-nav-tree.ul-nav-white .layui-this > a,
-.layui-nav-tree.ul-nav-white .layui-this > a:hover {
-  background-color: #9cf;
-  color: #fff;
-}
-
-/* 导航结束 */
 .ul-shop-header {
   padding: 15px;
 }
@@ -2648,6 +2574,35 @@
   border-bottom: 1px solid #eee;
 }
 
+/* 附带说明垂直导航 */
+.ul-nav-tree-group-title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 2;
+}
+
+.ul-nav-tree-item {
+  display: flex;
+  align-items: baseline;
+  cursor: pointer;
+  padding: 5px;
+  white-space: nowrap;
+}
+
+.ul-nav-tree-item.current .ul-nav-tree-item-title {
+  color: #6cf;
+}
+
+.ul-nav-tree-item-title {
+  font-size: 15px;
+}
+
+.ul-nav-tree-item-desc {
+  font-size: 14px;
+  color: #999;
+  margin-left: 15px;
+}
+
 .ul-nav-tree-2 .ul-nav-tree-2-group-title {
   font-size: 14px;
   padding: 6px 0;

source/components/_index.scss

@@ -24,7 +24,6 @@
 @import './header/ul-header/index';
 @import './header/ul-header-a/index';
 @import './header/ul-header-shape/index';
-@import './nav/ul-nav-white/index';
 @import './header/ul-shop-header/index';
 @import './list/ul-ad-list/index';
 @import './list/ul-avatar-list/index';
@@ -48,6 +47,7 @@
 @import './nav/ul-nav-block/index';
 @import './nav/ul-nav-grid/index';
 @import './nav/ul-nav-info/index';
+@import './nav/ul-nav-tree/index';
 @import './nav/ul-nav-tree-2/index';
 @import './nav/ul-nav-white/index';
 @import './photo/ul-upload-photo-list/index';

source/components/nav/ul-nav-tree/_index.env

@@ -0,0 +1,6 @@
+title=附带说明垂直导航
+padding=0
+margin=0
+gray=0
+mobile=0
+inner_margin=0

source/components/nav/ul-nav-tree/_index.html

@@ -0,0 +1,56 @@
+<div class="ul-nav-tree">
+
+    <div class="ul-nav-tree-group">
+        <div class="ul-nav-tree-group-title">起步</div>
+        <div class="ul-nav-tree-group-main">
+            <a
+                href=""
+                class="ul-nav-tree-item current"
+            >
+                <div class="ul-nav-tree-item-title">欢迎</div>
+                <div class="ul-nav-tree-item-desc">项目介绍/使用说明</div>
+            </a>
+            <a
+                href=""
+                class="ul-nav-tree-item"
+            >
+                <div class="ul-nav-tree-item-title">开始使用</div>
+                <div class="ul-nav-tree-item-desc">安装方式,注意事项</div>
+            </a>
+            <a
+                href=""
+                class="ul-nav-tree-item"
+            >
+                <div class="ul-nav-tree-item-title">如何使用</div>
+                <div class="ul-nav-tree-item-desc">复制组件</div>
+            </a>
+        </div>
+    </div>
+    <div class="ul-nav-tree-group">
+        <div class="ul-nav-tree-group-title">
+            组件 </div>
+        <div class="ul-nav-tree-group-main">
+            <a
+                href=""
+                class="ul-nav-tree-item"
+            >
+                <div class="ul-nav-tree-item-title">列表</div>
+                <div class="ul-nav-tree-item-desc">用户列表/文章列表...</div>
+            </a>
+            <a
+                href=""
+                class="ul-nav-tree-item"
+            >
+                <div class="ul-nav-tree-item-title">头部</div>
+                <div class="ul-nav-tree-item-desc">页面头</div>
+            </a>
+            <a
+                href=""
+                class="ul-nav-tree-item"
+            >
+                <div class="ul-nav-tree-item-title">导航</div>
+                <div class="ul-nav-tree-item-desc">横竖导航/多级导航</div>
+            </a>
+        </div>
+    </div>
+</div>

source/components/nav/ul-nav-tree/_index.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+
+];

source/scss/nav/_index.scss

@@ -1,2 +1 @@
-@import './ul-nav-tree';
 @import './ul-nav-card-simple';