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-01 12:37:26 +08:00
parent 75de7e4d51
commit ce93afbab2
10 changed files with 118 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
demo/pc/nav.html
View File

@@ -1,23 +1,3 @@
<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">

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

@@ -2669,6 +2669,47 @@
color: #6cf;
}
.ul-nav-poster {
padding: 5px;
border: 1px solid #ddd;
border-top-width: 3px;
}
.ul-nav-poster-item {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.ul-nav-poster-left {
display: flex;
align-items: center;
}
.ul-nav-post-title {
color: #333;
font-weight: bold;
}
.ul-nav-poster-desc {
color: #999;
font-size: 12px;
font-weight: 100;
}
.ul-nav-poster-img {
width: 38px;
height: 38px;
margin: 5px;
background-size: cover;
background-position: center;
}
.ul-nav-poster-item:not(:last-child) {
border-bottom: 1px dashed #ddd;
}
/* 附带说明垂直导航 */
.ul-nav-tree-group-title {
font-size: 16px;
@@ -3042,47 +3083,6 @@
white-space: nowrap;
}
.ul-nav-poster {
padding: 5px;
border: 1px solid #ddd;
border-top-width: 3px;
}
.ul-nav-poster-item {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.ul-nav-poster-left {
display: flex;
align-items: center;
}
.ul-nav-post-title {
color: #333;
font-weight: bold;
}
.ul-nav-poster-desc {
color: #999;
font-size: 12px;
font-weight: 100;
}
.ul-nav-poster-img {
width: 38px;
height: 38px;
margin: 5px;
background-size: cover;
background-position: center;
}
.ul-nav-poster-item:not(:last-child) {
border-bottom: 1px dashed #ddd;
}
.ul-nav-link-item {
display: inline-block;
margin: 5px 0;

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

@@ -50,6 +50,7 @@
@import './nav/ul-nav-header/index';
@import './nav/ul-nav-info/index';
@import './nav/ul-nav-min/index';
@import './nav/ul-nav-poster/index';
@import './nav/ul-nav-tree/index';
@import './nav/ul-nav-tree-2/index';
@import './nav/ul-nav-white/index';

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

@@ -0,0 +1,6 @@
title=带图片和边框的导航
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

23
source/components/nav/ul-nav-poster/_index.html Normal file
View File

@@ -0,0 +1,23 @@
<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 ul-demo-img-bg"
>
</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>

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

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

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

41
source/components/nav/ul-nav-poster/_index.scss Normal file
View File

@@ -0,0 +1,41 @@
.ul-nav-poster {
padding : 5px;
border : 1px solid #ddd;
border-top-width: 3px;
}
.ul-nav-poster-item {
display : flex;
justify-content: space-between;
align-items : center;
cursor : pointer;
}
.ul-nav-poster-left {
display : flex;
align-items: center;
}
.ul-nav-post-title {
color : #333;
font-weight: bold;
}
.ul-nav-poster-desc {
color : #999;
font-size : 12px;
font-weight: 100;
}
.ul-nav-poster-img {
width : 38px;
height : 38px;
margin : 5px;
background-size : cover;
background-position: center;
}
.ul-nav-poster-item:not(:last-child) {
border-bottom: 1px dashed #ddd;
}

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

@@ -192,46 +192,6 @@
white-space: nowrap;
}
.ul-nav-poster {
padding : 5px;
border : 1px solid #ddd;
border-top-width: 3px;
}
.ul-nav-poster-item {
display : flex;
justify-content: space-between;
align-items : center;
cursor : pointer;
}
.ul-nav-poster-left {
display : flex;
align-items: center;
}
.ul-nav-post-title {
color : #333;
font-weight: bold;
}
.ul-nav-poster-desc {
color : #999;
font-size : 12px;
font-weight: 100;
}
.ul-nav-poster-img {
width : 38px;
height : 38px;
margin : 5px;
background-size : cover;
background-position: center;
}
.ul-nav-poster-item:not(:last-child) {
border-bottom: 1px dashed #ddd;
}
.ul-nav-link-item {
display : inline-block;