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
Files
68d4e35c54de1a48f14232c4a11a4d169727bf7f
layui-ul/demo/pc/nav.html
augushong 68d4e35c54 feat: 迁移最简单的导航
2025-09-01 12:31:53 +08:00

290 lines
12 KiB
HTML
Raw Blame History

<fieldset class="layui-elem-field layui-field-title">
<legend>经典头部跳转导航</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-nav-header">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 60px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md">
<div class="ul-nav-header ul-nav-header-red">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 60px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md">
<div class="ul-nav-header ul-nav-header-primary">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 80px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>带图片和边框的导航</legend>
<div class="layui-field-box">
<div class="ul-nav-poster" style="width: 200px;">
<div class="ul-nav-poster-item" data-repeat="6">
<div class="ul-nav-poster-left">
<div class="ul-nav-poster-img" style="background-image: url('{$site_logo_src}');">
</div>
<div class="ul-nav-post-title">
国产专区
</div>
</div>
<div class="ul-nav-poster-right">
<div class="ul-nav-poster-desc">进入系统</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>简单地分割线导航</legend>
<div class="layui-field-box">
<div class="ul-nav-link">
<a class="ul-nav-link-item" href="">导航1</a>
<a class="ul-nav-link-item" href="">那个导航2</a>
<a class="ul-nav-link-item" href="">这个导航3</a>
<a class="ul-nav-link-item" href="">导航4</a>
</div>
</div>
</fieldset>
<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">
<div class="ul-padding-md ul-bg-gray">
<div class="ul-nav-button">
<div class="ul-nav-button-item">
<div class="ul-nav-button-icon">
<i class="icon layui-icon layui-icon-add-circle"></i>
</div>
<div class="ul-nav-button-info">
<div class="ul-nav-button-title">
发布公告
</div>
<div class="ul-nav-button-desc">
发布文字/图片和视频.
</div>
</div>
</div>
<div class="ul-nav-button-item">
<div class="ul-nav-button-icon">
<i class="icon layui-icon layui-icon-about"></i>
</div>
<div class="ul-nav-button-info">
<div class="ul-nav-button-title">
关于
</div>
<div class="ul-nav-button-desc">
查看详细系统信息
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
Reference in New Issue View Git Blame Copy Permalink