ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-07 21:02:48 +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

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