feat: 迁移银色垂直导航

demo/pc/nav.html

@@ -1,30 +1,3 @@
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>银色垂直导航</legend>
-    <div class="layui-field-box">
-        <ul class="layui-nav layui-nav-tree ul-nav-white">
-            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
-            <li class="layui-nav-item layui-nav-itemed">
-                <a href="javascript:;">默认展开</a>
-                <dl class="layui-nav-child">
-                    <dd class="layui-this"><a href="javascript:;">选项1</a></dd>
-                    <dd><a href="javascript:;">选项2</a></dd>
-                    <dd><a href="">跳转</a></dd>
-                </dl>
-            </li>
-            <li class="layui-nav-item">
-                <a href="javascript:;">解决方案</a>
-                <dl class="layui-nav-child">
-                    <dd><a href="">移动模块</a></dd>
-                    <dd><a href="">后台模版</a></dd>
-                    <dd><a href="">电商平台</a></dd>
-                </dl>
-            </li>
-            <li class="layui-nav-item layui-this"><a href="">产品</a></li>
-            <li class="layui-nav-item"><a href="">大数据</a></li>
-        </ul>
-    </div>
-</fieldset>
-
 <fieldset class="layui-elem-field layui-field-title">
     <legend>附带说明垂直导航</legend>
     <div class="layui-field-box">

public/cdn/layui-ul.css

@@ -201,51 +201,6 @@
   border: unset;
 }
 
-/* 头部结束 */
-/* 导航开始 */
-.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;
-}
-
-/* 导航结束 */
 /* 简约风格Form */
 .ul-form-basic .layui-form-item {
   clear: unset;
@@ -1554,6 +1509,51 @@
   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;
 }
@@ -2671,6 +2671,51 @@
   word-wrap: anywhere;
 }
 
+/* 头部结束 */
+/* 导航开始 */
+.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-upload-photo-item {
   display: inline-block;
   width: 120px;

source/components/_index.scss

@@ -24,6 +24,7 @@
 @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 +49,7 @@
 @import './nav/ul-nav-grid/index';
 @import './nav/ul-nav-info/index';
 @import './nav/ul-nav-tree-2/index';
+@import './nav/ul-nav-white/index';
 @import './photo/ul-upload-photo-list/index';
 @import './title/ul-group-title/index';
 @import './title/ul-group-title-2/index';

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

@@ -0,0 +1,6 @@
+title=银色垂直导航
+padding=0
+margin=0
+gray=0
+mobile=0
+inner_margin=0

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

@@ -0,0 +1,21 @@
+<ul class="layui-nav layui-nav-tree ul-nav-white">
+    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
+    <li class="layui-nav-item layui-nav-itemed">
+        <a href="javascript:;">默认展开</a>
+        <dl class="layui-nav-child">
+            <dd class="layui-this"><a href="javascript:;">选项1</a></dd>
+            <dd><a href="javascript:;">选项2</a></dd>
+            <dd><a href="">跳转</a></dd>
+        </dl>
+    </li>
+    <li class="layui-nav-item">
+        <a href="javascript:;">解决方案</a>
+        <dl class="layui-nav-child">
+            <dd><a href="">移动模块</a></dd>
+            <dd><a href="">后台模版</a></dd>
+            <dd><a href="">电商平台</a></dd>
+        </dl>
+    </li>
+    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
+    <li class="layui-nav-item"><a href="">大数据</a></li>
+</ul>

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

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

source/scss/nav/_index.scss

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