ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 10:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 迁移选项菜单导航

Browse Source
This commit is contained in:
augushong
2025-09-02 12:22:34 +08:00
parent 474c139675
commit 6683f0183a
12 changed files with 270 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
demo/pc/nav.html
View File

@@ -1,148 +1,3 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>选项菜单导航</legend>
<div class="layui-field-box">
<div class="ul-nav-card">
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
登录密码
</div>
<div class="ul-nav-card-item-desc">
建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
修改密码
</div>
</div>
</div>
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
资金密码
</div>
<div class="ul-nav-card-item-desc">
资金密码用于提现、绑定银行卡等操作，可保障资金安全
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
找回资金密码
</div>
<div class="layui-btn layui-btn-sm">
修改资金密码
</div>
</div>
</div>
<div class="ul-nav-card-item disabled">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
比特币转出
</div>
<div class="ul-nav-card-item-desc">
系统维护,不能转出
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm layui-btn-disabled">
立即转出
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>选项菜单导航极简卡片风</legend>
<div class="layui-field-box">
<div class="">
<div class="ul-nav-card ul-nav-card-simple">
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
登录密码
</div>
<div class="ul-nav-card-item-desc">
建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
修改密码
</div>
</div>
</div>
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
资金密码
</div>
<div class="ul-nav-card-item-desc">
资金密码用于提现、绑定银行卡等操作，可保障资金安全
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
找回资金密码
</div>
<div class="layui-btn layui-btn-sm">
修改资金密码
</div>
</div>
</div>
<div class="ul-nav-card-item disabled">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
比特币转出
</div>
<div class="ul-nav-card-item-desc">
系统维护,不能转出
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm layui-btn-disabled">
立即转出
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>操作导航</legend>
<div class="layui-field-box">

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

@@ -165,13 +165,6 @@
justify-content: space-between;
}
.ul-nav-card-simple .ul-nav-card-item {
border-radius: 6px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 8px 18px -8px #aebcca;
border: unset;
}
/* 简约风格Form */
.ul-form-basic .layui-form-item {
clear: unset;
@@ -2434,6 +2427,63 @@
color: #fff;
}
.ul-nav-card-item {
padding: 0 15px;
border: 1px solid #ddd;
border-radius: 6px;
height: 82px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ul-nav-card-item-left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.ul-nav-card-item-icon {
font-size: 28px;
width: 50px;
height: 50px;
border-radius: 5px;
line-height: 50px;
text-align: center;
background: #2E4158;
display: inline-block;
color: #fff;
vertical-align: bottom;
}
.ul-nav-card-item-info {
margin-left: 10px;
}
.ul-nav-card-item-title {
font-size: 14px;
color: #253647;
font-weight: 700;
margin-bottom: 4px;
}
.ul-nav-card-item-desc {
color: #666;
font-size: 12px;
}
.ul-nav-card-item.disabled .ul-nav-card-item-icon {
background-color: #908b8b;
}
.ul-nav-card-simple .ul-nav-card-item {
border-radius: 6px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 8px 18px -8px #aebcca;
border: unset;
}
.ul-nav-easy {
background-color: transparent;
}
@@ -3122,56 +3172,6 @@
top: 0px;
}
.ul-nav-card-item {
padding: 0 15px;
border: 1px solid #ddd;
border-radius: 6px;
height: 82px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ul-nav-card-item-left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.ul-nav-card-item-icon {
font-size: 28px;
width: 50px;
height: 50px;
border-radius: 5px;
line-height: 50px;
text-align: center;
background: #2E4158;
display: inline-block;
color: #fff;
vertical-align: bottom;
}
.ul-nav-card-item-info {
margin-left: 10px;
}
.ul-nav-card-item-title {
font-size: 14px;
color: #253647;
font-weight: 700;
margin-bottom: 4px;
}
.ul-nav-card-item-desc {
color: #666;
font-size: 12px;
}
.ul-nav-card-item.disabled .ul-nav-card-item-icon {
background-color: #908b8b;
}
.ul-doc-info-page-list {
padding: 15px;
color: #999;

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

@@ -45,6 +45,7 @@
@import './list/ul-site-group/index';
@import './logo/ul-logo/index';
@import './nav/ul-nav-block/index';
@import './nav/ul-nav-card/index';
@import './nav/ul-nav-easy/index';
@import './nav/ul-nav-grid/index';
@import './nav/ul-nav-header/index';

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

@@ -0,0 +1,6 @@
title=选项菜单导航
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

136
source/components/nav/ul-nav-card/_index.html Normal file
View File

@@ -0,0 +1,136 @@
<div class="ul-section">
<div class="ul-nav-card">
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
登录密码
</div>
<div class="ul-nav-card-item-desc">
建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
修改密码
</div>
</div>
</div>
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
资金密码
</div>
<div class="ul-nav-card-item-desc">
资金密码用于提现、绑定银行卡等操作，可保障资金安全
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
找回资金密码
</div>
<div class="layui-btn layui-btn-sm">
修改资金密码
</div>
</div>
</div>
<div class="ul-nav-card-item disabled">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
比特币转出
</div>
<div class="ul-nav-card-item-desc">
系统维护,不能转出
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm layui-btn-disabled">
立即转出
</div>
</div>
</div>
</div>
</div>
<div class="ul-section">
<div class="ul-nav-card ul-nav-card-simple">
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
登录密码
</div>
<div class="ul-nav-card-item-desc">
建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
修改密码
</div>
</div>
</div>
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
资金密码
</div>
<div class="ul-nav-card-item-desc">
资金密码用于提现、绑定银行卡等操作，可保障资金安全
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
找回资金密码
</div>
<div class="layui-btn layui-btn-sm">
修改资金密码
</div>
</div>
</div>
<div class="ul-nav-card-item disabled">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
比特币转出
</div>
<div class="ul-nav-card-item-desc">
系统维护,不能转出
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm layui-btn-disabled">
立即转出
</div>
</div>
</div>
</div>
</div>

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

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

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

64
source/components/nav/ul-nav-card/_index.scss Normal file
View File

@@ -0,0 +1,64 @@
.ul-nav-card-item {
padding : 0 15px;
border : 1px solid #ddd;
border-radius : 6px;
height : 82px;
margin-bottom : 10px;
display : flex;
align-items : center;
justify-content: space-between;
}
.ul-nav-card-item-left {
display : flex;
align-items : center;
justify-content: flex-start;
}
.ul-nav-card-item-icon {
font-size : 28px;
width : 50px;
height : 50px;
border-radius : 5px;
line-height : 50px;
text-align : center;
background : #2E4158;
display : inline-block;
color : #fff;
vertical-align: bottom;
}
.ul-nav-card-item-info {
margin-left: 10px;
}
.ul-nav-card-item-title {
font-size : 14px;
color : #253647;
font-weight : 700;
margin-bottom: 4px;
}
.ul-nav-card-item-desc {
color : #666;
font-size: 12px;
}
.ul-nav-card-item.disabled .ul-nav-card-item-icon {
background-color: #908b8b;
}
.ul-nav-card-simple {
.ul-nav-card-item {
border-radius : 6px;
background-color: rgba(255, 255, 255, 1);
box-shadow : 0px 8px 18px -8px #aebcca;
border : unset;
}
}

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

@@ -1,6 +1,5 @@
@import './common';
@import './list/index';
@import './nav/index';
@import './form/index';
@import './fieldset/index';
@import './title/index';
@@ -223,60 +222,6 @@
.ul-nav-card-item {
padding : 0 15px;
border : 1px solid #ddd;
border-radius : 6px;
height : 82px;
margin-bottom : 10px;
display : flex;
align-items : center;
justify-content: space-between;
}
.ul-nav-card-item-left {
display : flex;
align-items : center;
justify-content: flex-start;
}
.ul-nav-card-item-icon {
font-size : 28px;
width : 50px;
height : 50px;
border-radius : 5px;
line-height : 50px;
text-align : center;
background : #2E4158;
display : inline-block;
color : #fff;
vertical-align: bottom;
}
.ul-nav-card-item-info {
margin-left: 10px;
}
.ul-nav-card-item-title {
font-size : 14px;
color : #253647;
font-weight : 700;
margin-bottom: 4px;
}
.ul-nav-card-item-desc {
color : #666;
font-size: 12px;
}
.ul-nav-card-item.disabled .ul-nav-card-item-icon {
background-color: #908b8b;
}
.ul-doc-info-page-list {
padding: 15px;
color : #999;

1
source/scss/nav/_index.scss
View File

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

10
source/scss/nav/_ul-nav-card-simple.scss
View File

@@ -1,10 +0,0 @@
.ul-nav-card-simple {
.ul-nav-card-item {
border-radius : 6px;
background-color: rgba(255, 255, 255, 1);
box-shadow : 0px 8px 18px -8px #aebcca;
border : unset;
}
}