增加大块导航组件

This commit is contained in:
2023-04-18 09:29:22 +08:00
parent 6afae57896
commit 32fc9de906
8 changed files with 93 additions and 1 deletions

View File

@@ -1647,6 +1647,31 @@
font-size: clac(20px);
}
.ul-nav-block {
border-radius: 16px;
overflow: hidden;
background-color: #fff;
color: #333;
}
.ul-nav-block .item {
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
}
.ul-nav-block .item .item-icon {
margin-right: 16px;
}
.ul-nav-block .item.current {
background-color: rgb(255, 91, 114);
color: #fff;
}
.ul-nav-block .item:hover {
background-color: rgba(255, 91, 113, 0.772);
color: #fff;
}
.ul-nav-grid {
display: flex;
flex-wrap: wrap;

File diff suppressed because one or more lines are too long

View File

@@ -18,5 +18,6 @@
@import './list/ul-photo-list-b/index';
@import './list/ul-site-group/index';
@import './logo/ul-logo/index';
@import './nav/ul-nav-block/index';
@import './nav/ul-nav-grid/index';
@import './nav/ul-nav-info/index';

View File

@@ -0,0 +1,6 @@
title=大块导航
padding=1
margin=0
gray=1
mobile=0
inner_margin=0

View File

@@ -0,0 +1,26 @@
<div class="ul-nav-block" style="width: 160px;">
<div class="item current">
<div class="item-icon">
<i class="layui-icon layui-icon-chart"></i>
</div>
<div class="item-title">首页</div>
</div>
<div class="item">
<div class="item-icon">
<i class="layui-icon layui-icon-light"></i>
</div>
<div class="item-title">订单管理</div>
</div>
<div class="item">
<div class="item-icon">
<i class="layui-icon layui-icon-app"></i>
</div>
<div class="item-title">产品管理</div>
</div>
<div class="item">
<div class="item-icon">
<i class="layui-icon layui-icon-about"></i>
</div>
<div class="item-title">其他</div>
</div>
</div>

View File

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

View File

@@ -0,0 +1,29 @@
.ul-nav-block {
border-radius: 16px;
overflow: hidden;
background-color: #fff;
color: #333;
.item {
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
.item-icon {
margin-right: 16px;
}
&.current {
background-color: rgb(255, 91, 114);
color: #fff;
}
&:hover {
background-color: rgba(255, 91, 113, 0.772);
color: #fff;
}
}
}