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-07 21:51:27 +08:00
parent 62da76adae
commit 4544dc48c4
4 changed files with 98 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
demo/pc/title.html
View File

@@ -1,74 +1,86 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>标题1号</legend>
<div class="layui-field-box">
<div style="width:200px" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
<legend>标题1号</legend>
<div class="layui-field-box">
<div style="width:200px" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
</div>
</div>
</div>
</div>
<div style="width:200px;margin: 15px auto;" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
</div>
</div>
</div>
<div style="" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
</div>
</div>
</div>
</div>
<div style="width:200px;margin: 15px auto;" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
</div>
</div>
</div>
<div style="" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>分组标题</legend>
<div class="layui-field-box">
<div class="ul-group-title">
销售
</div>
<div class="ul-group-title">
设计
</div>
<legend>分组标题</legend>
<div class="layui-field-box">
<div class="ul-group-title">
销售
</div>
<div class="ul-group-title">
设计
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>分组标题-2</legend>
<div class="layui-field-box">
<div class="ul-group-title-2">
销售
</div>
<div class="ul-group-title-2">
设计
</div>
<legend>分组标题-2</legend>
<div class="layui-field-box">
<div class="ul-group-title-2">
销售
</div>
<div class="ul-group-title-2">
设计
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>简约分组标题</legend>
<div class="layui-field-box">
<div class="">
<div class="ul-group-title-simple">
分组标题
</div>
</div>
</div>
</fieldset>

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

@@ -4,6 +4,7 @@
@import './form/index';
@import './fieldset/index';
@import './card/index';
@import './title/index';
/* 头部开始 */

1
source/scss/title/_index.scss Normal file
View File

@@ -0,0 +1 @@
@import './ul-group-title-simple';

23
source/scss/title/_ul-group-title-simple.scss Normal file
View File

@@ -0,0 +1,23 @@
.ul-group-title-simple {
line-height: 30px;
font-size : 16px;
padding-left: 10px;
position: relative;
&:before {
content : "";
display : block;
position: absolute;
left : 0;
height : 16px;
width : 3px;
top : 7px;
border-radius: 3px;
background : linear-gradient(0deg, #7FC0FC, #4B7EEF);
}
}