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

新增选项菜单导航极简卡片风；

Browse Source
This commit is contained in:
augushong
2022-04-04 10:48:29 +08:00
parent f7d8cb9a99
commit 3c02fd2130
3 changed files with 84 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
demo/pc/nav.html
View File

@@ -317,7 +317,79 @@
</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>

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

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

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

@@ -0,0 +1,10 @@
.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;
}
}