将ul-nav-tree-2重构新架构并调整样式细节

demo/pc/nav.html

@@ -215,37 +215,6 @@
     </div>
 </fieldset>
 
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>简单二级导航</legend>
-    <div class="layui-field-box">
-        <div class="ul-nav-tree-2">
-            <div class="ul-nav-tree-2-group">
-                <div class="ul-nav-tree-2-group-title">账号管理</div>
-                <div class="ul-nav-tree-2-group-main">
-                    <a href="" class="ul-nav-tree-2-item">
-                        <div class="ul-nav-tree-2-item-title">个人信息</div>
-                    </a>
-                    <a href="" class="ul-nav-tree-2-item">
-                        <div class="ul-nav-tree-2-item-title">安全中心</div>
-                    </a>
-                    <a href="" class="ul-nav-tree-2-item">
-                        <div class="ul-nav-tree-2-item-title">提现管理</div>
-                    </a>
-                </div>
-            </div>
-            <div class="ul-nav-tree-2-group">
-                <div class="ul-nav-tree-2-group-title">资金管理</div>
-                <div class="ul-nav-tree-2-group-main">
-                    <a href="" class="ul-nav-tree-2-item">
-                        <div class="ul-nav-tree-2-item-title">余额宝</div>
-                    </a>
-
-                </div>
-            </div>
-
-        </div>
-    </div>
-</fieldset>
 <fieldset class="layui-elem-field layui-field-title">
     <legend>选项菜单导航</legend>
     <div class="layui-field-box">

public/cdn/layui-ul-change-green.css

@@ -1,28 +1,27 @@
-@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: #006600;
 }
 
-.layui-bg-black{
+.layui-bg-black {
     background-color: #66CC66 !important;
 }
 
 .layui-nav-tree .layui-nav-child dd.layui-this,
 .layui-nav-tree .layui-nav-child dd.layui-this a,
 .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: #006600;
 }
 
-.layui-layout-admin .layui-logo{
+.layui-layout-admin .layui-logo {
     color: #fff;
     line-height: 45px;
 }
 
-.layui-layout-admin .layui-header{
+.layui-layout-admin .layui-header {
     background-color: #509c50;
 }
 
@@ -30,11 +29,11 @@
     background-color: #66CC66;
 }
 
-.layui-header{
+.layui-header {
     height: 45px;
 }
 
-.layui-nav .layui-nav-item{
+.layui-nav .layui-nav-item {
     line-height: 45px;
 }
 
@@ -53,114 +52,131 @@
     background-color: #CCFFFF;
 }
 
-.layui-tab-brief > .layui-tab-title .layui-this{
+.layui-tab-brief>.layui-tab-title .layui-this {
     color: #66CC66;
 }
 
-.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: #66CC66;
 }
 
-.layui-btn{
+.layui-btn {
     background-color: #66CC66;
 }
-.layui-form-radio > i:hover, .layui-form-radioed > i{
+
-    color: #66CC66;
+.layui-btn-danger {
-}
+    background-color: #ff7d55;
-.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed > i{
+
-  color: #66CC66;
 }
 
-.layui-elem-quote{
+.layui-form-radio>i:hover,
+.layui-form-radioed>i {
+    color: #66CC66;
+}
+
+.layui-form-radio:hover *,
+.layui-form-radioed,
+.layui-form-radioed>i {
+    color: #66CC66;
+}
+
+.layui-elem-quote {
     border-color: #66CC66;
 }
 
-.layui-laydate td.layui-this{
+.layui-laydate td.layui-this {
     background-color: #66CC66 !important;
 }
 
-.layui-form-checkbox[lay-skin="primary"]:hover i{
+.layui-form-checkbox[lay-skin="primary"]:hover i {
     border-color: #66CC66;
 }
-.layui-form-checked[lay-skin="primary"] i{
+
+.layui-form-checked[lay-skin="primary"] i {
     border-color: #66CC66 !important;
     background-color: #66CC66 !important;
 }
 
-.layui-form-select dl dd.layui-this{
+.layui-form-select dl dd.layui-this {
-  background-color: #66CC66;
-}
-
-
-.layui-btn-primary:hover{
-  color: #fff;
-  border-color: #66CC66;
-}
-.layui-btn-primary{
-  color: #fff;
-  border-color: transparent;
-}
-
-.layui-form-label{
-  width: unset;
-  padding: 3px 3px;
-  float: unset;
-  text-align: left;
-  font-weight: 600;
-  font-size: 15px;
-}
-
-.layui-input-block{
-  margin-left: 0;
-}
-
-.layui-form-pane .layui-form-label{
-  float: left;
-  font-weight: normal;
-  font-size: 14px;
-}
-
-.layui-nav-tree .layui-nav-item a{
-    height: 35px;
-    line-height: 35px;
-}
-
-.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;
-}
-
-.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: #006600;
-}
-
-.layui-nav-tree .layui-nav-bar{
     background-color: #66CC66;
 }
 
-.layui-form-label .layui-word-aux{
+
-  font-size: 12px;
+.layui-btn-primary:hover {
+    color: #fff;
+    border-color: #66CC66;
 }
 
-body .layui-laydate .layui-this{
+.layui-btn-primary {
-  background-color: #006600 !important;
+    color: #fff;
+    border-color: transparent;
+}
+
+.layui-form-label {
+    width: unset;
+    padding: 3px 3px;
+    float: unset;
+    text-align: left;
+    font-weight: 600;
+    font-size: 15px;
+}
+
+.layui-input-block {
+    margin-left: 0;
+}
+
+.layui-form-pane .layui-form-label {
+    float: left;
+    font-weight: normal;
+    font-size: 14px;
+}
+
+.layui-nav-tree .layui-nav-item a {
+    height: 35px;
+    line-height: 35px;
+}
+
+.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;
+}
+
+.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: #006600;
+}
+
+.layui-nav-tree .layui-nav-bar {
+    background-color: #66CC66;
+}
+
+.layui-form-label .layui-word-aux {
+    font-size: 12px;
+}
+
+body .layui-laydate .layui-this {
+    background-color: #006600 !important;
 }

public/cdn/layui-ul.css

@@ -2178,6 +2178,23 @@
   border-bottom: 1px solid #eee;
 }
 
+.ul-nav-tree-2 .ul-nav-tree-2-group-title {
+  font-size: 14px;
+  padding: 6px 0;
+  color: #253647;
+  font-weight: 600;
+}
+.ul-nav-tree-2 .ul-nav-tree-2-item-title {
+  font-size: 14px;
+  color: #999;
+  padding-left: 15px;
+  line-height: 24px;
+}
+.ul-nav-tree-2 .ul-nav-tree-2-item:hover .ul-nav-tree-2-item-title {
+  color: #6cf;
+  text-decoration: underline;
+}
+
 /* 链接导航开始 */
 .ul-link-select {
   display: flex;
@@ -2778,26 +2795,6 @@
   top: 0px;
 }
 
-.ul-nav-tree-2-group-title {
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
-  color: #253647;
-  font-weight: 600;
-}
-
-.ul-nav-tree-2-item-title {
-  font-size: 14px;
-  color: #999;
-  padding-left: 15px;
-  line-height: 24px;
-}
-
-.ul-nav-tree-2-item:hover .ul-nav-tree-2-item-title {
-  color: #6cf;
-  text-decoration: underline;
-}
-
 .ul-nav-card-item {
   padding: 0 15px;
   border: 1px solid #ddd;

source/components/_index.scss

@@ -30,3 +30,4 @@
 @import './nav/ul-nav-block/index';
 @import './nav/ul-nav-grid/index';
 @import './nav/ul-nav-info/index';
+@import './nav/ul-nav-tree-2/index';

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

@@ -0,0 +1,6 @@
+title=简单二级导航
+padding=0
+margin=0
+gray=0
+mobile=0
+inner_margin=0

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

@@ -0,0 +1,26 @@
+<div class="ul-nav-tree-2">
+    <div class="ul-nav-tree-2-group">
+        <div class="ul-nav-tree-2-group-title">账号管理</div>
+        <div class="ul-nav-tree-2-group-main">
+            <a href="" class="ul-nav-tree-2-item">
+                <div class="ul-nav-tree-2-item-title">个人信息</div>
+            </a>
+            <a href="" class="ul-nav-tree-2-item">
+                <div class="ul-nav-tree-2-item-title">安全中心</div>
+            </a>
+            <a href="" class="ul-nav-tree-2-item">
+                <div class="ul-nav-tree-2-item-title">提现管理</div>
+            </a>
+        </div>
+    </div>
+    <div class="ul-nav-tree-2-group">
+        <div class="ul-nav-tree-2-group-title">资金管理</div>
+        <div class="ul-nav-tree-2-group-main">
+            <a href="" class="ul-nav-tree-2-item">
+                <div class="ul-nav-tree-2-item-title">余额宝</div>
+            </a>
+
+        </div>
+    </div>
+
+</div>

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

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

source/components/nav/ul-nav-tree-2/_index.scss

@@ -0,0 +1,23 @@
+.ul-nav-tree-2 {
+
+    .ul-nav-tree-2-group-title {
+
+        font-size: 14px;
+        padding: 6px 0;
+        color: #253647;
+        font-weight: 600;
+
+    }
+
+    .ul-nav-tree-2-item-title {
+        font-size: 14px;
+        color: #999;
+        padding-left: 15px;
+        line-height: 24px;
+    }
+
+    .ul-nav-tree-2-item:hover .ul-nav-tree-2-item-title {
+        color: #6cf;
+        text-decoration: underline;
+    }
+}

source/scss/layui-ul.scss

@@ -622,29 +622,7 @@
 }
 
 
-.ul-nav-tree-2 {}
 
-.ul-nav-tree-2-group-title {
-
-    font-size  : 14px;
-    height     : 32px;
-    line-height: 32px;
-    color      : #253647;
-    font-weight: 600;
-
-}
-
-.ul-nav-tree-2-item-title {
-    font-size   : 14px;
-    color       : #999;
-    padding-left: 15px;
-    line-height : 24px;
-}
-
-.ul-nav-tree-2-item:hover .ul-nav-tree-2-item-title {
-    color          : #6cf;
-    text-decoration: underline;
-}
 
 .ul-nav-card-item {