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

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

Browse Source
This commit is contained in:
augushong
2023-07-05 16:21:35 +08:00
parent fc0b9f170d
commit 8453e20466
11 changed files with 193 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
demo/pc/nav.html
View File

@@ -215,37 +215,6 @@
</div> </div>
</fieldset> </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"> <fieldset class="layui-elem-field layui-field-title">
<legend>选项菜单导航</legend> <legend>选项菜单导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">

90
public/cdn/layui-ul-change-green.css
View File

@@ -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; background-color: #006600;
} }
.layui-bg-black{ .layui-bg-black {
background-color: #66CC66 !important; background-color: #66CC66 !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: #006600; background-color: #006600;
} }
.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: #509c50; background-color: #509c50;
} }
@@ -30,11 +29,11 @@
background-color: #66CC66; background-color: #66CC66;
} }
.layui-header{ .layui-header {
height: 45px; height: 45px;
} }
.layui-nav .layui-nav-item{ .layui-nav .layui-nav-item {
line-height: 45px; line-height: 45px;
} }
@@ -53,55 +52,68 @@
background-color: #CCFFFF; background-color: #CCFFFF;
} }
.layui-tab-brief > .layui-tab-title .layui-this{ .layui-tab-brief>.layui-tab-title .layui-this {
color: #66CC66; 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; border-color: #66CC66;
} }
.layui-btn{ .layui-btn {
background-color: #66CC66; 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{
.layui-form-radio>i:hover,
.layui-form-radioed>i {
color: #66CC66; color: #66CC66;
} }
.layui-elem-quote{ .layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
color: #66CC66;
}
.layui-elem-quote {
border-color: #66CC66; border-color: #66CC66;
} }
.layui-laydate td.layui-this{ .layui-laydate td.layui-this {
background-color: #66CC66 !important; background-color: #66CC66 !important;
} }
.layui-form-checkbox[lay-skin="primary"]:hover i{ .layui-form-checkbox[lay-skin="primary"]:hover i {
border-color: #66CC66; border-color: #66CC66;
} }
.layui-form-checked[lay-skin="primary"] i{
.layui-form-checked[lay-skin="primary"] i {
border-color: #66CC66 !important; border-color: #66CC66 !important;
background-color: #66CC66 !important; background-color: #66CC66 !important;
} }
.layui-form-select dl dd.layui-this{ .layui-form-select dl dd.layui-this {
background-color: #66CC66; background-color: #66CC66;
} }
.layui-btn-primary:hover{ .layui-btn-primary:hover {
color: #fff; color: #fff;
border-color: #66CC66; border-color: #66CC66;
} }
.layui-btn-primary{
.layui-btn-primary {
color: #fff; color: #fff;
border-color: transparent; border-color: transparent;
} }
.layui-form-label{ .layui-form-label {
width: unset; width: unset;
padding: 3px 3px; padding: 3px 3px;
float: unset; float: unset;
@@ -110,57 +122,61 @@
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{
.layui-layout-admin .layui-side {
width: 140px; width: 140px;
top: 45px; top: 45px;
} }
.layui-layout-admin .layui-footer{
.layui-layout-admin .layui-footer {
left: 140px; left: 140px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
} }
.layui-layout-admin .layui-body{
.layui-layout-admin .layui-body {
top: 45px; top: 45px;
} }
.layui-side-scroll{ .layui-side-scroll {
width: 140px; width: 140px;
} }
.layui-body{ .layui-body {
left: 140px; 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: #006600; background-color: #006600;
} }
.layui-nav-tree .layui-nav-bar{ .layui-nav-tree .layui-nav-bar {
background-color: #66CC66; background-color: #66CC66;
} }
.layui-form-label .layui-word-aux{ .layui-form-label .layui-word-aux {
font-size: 12px; font-size: 12px;
} }
body .layui-laydate .layui-this{ body .layui-laydate .layui-this {
background-color: #006600 !important; background-color: #006600 !important;
} }

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

@@ -2178,6 +2178,23 @@
border-bottom: 1px solid #eee; 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 { .ul-link-select {
display: flex; display: flex;
@@ -2778,26 +2795,6 @@
top: 0px; 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 { .ul-nav-card-item {
padding: 0 15px; padding: 0 15px;
border: 1px solid #ddd; border: 1px solid #ddd;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

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

6
source/components/nav/ul-nav-tree-2/_index.env Normal file
View File

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

26
source/components/nav/ul-nav-tree-2/_index.html Normal file
View File

@@ -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>

0
source/components/nav/ul-nav-tree-2/_index.md Normal file
View File

5
source/components/nav/ul-nav-tree-2/_index.php Normal file
View File

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

23
source/components/nav/ul-nav-tree-2/_index.scss Normal file
View File

@@ -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;
}
}

22
source/scss/layui-ul.scss
View File

@@ -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 { .ul-nav-card-item {