ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-09 13:42:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

完成表格的描述列表；

Browse Source
This commit is contained in:
augushong
2022-08-03 23:15:33 +08:00
parent 7a6c7a2d9a
commit e86f86ee94
2 changed files with 54 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
demo/pc/descriptions.html
View File

@@ -1,7 +1,9 @@
{volist name="[''=>'基本','table'=>'表格']" id='vo'}
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>描述列表</legend> <legend>描述列表-{$vo}</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-descriptions"> <div class="ul-descriptions {$key}">
<div class="item"> <div class="item">
<div class="label"> <div class="label">
昵称 昵称
@@ -53,3 +55,4 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
{/volist}

57
source/scss/desciptions/_desciptions.scss
View File

@@ -1,6 +1,8 @@
.ul-descriptions { .ul-descriptions {
display:flex; // TODO:使用grid实现布局
display : flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -11,24 +13,59 @@
height : 40px; height : 40px;
.label { .label {
width : calc(40% - 12px);
width : calc(40% - 12px); padding-right : 12px;
padding : 12px 6px; position : absolute;
position: absolute; height : 100%;
display : flex;
align-items : center;
justify-content: flex-end;
color : #333;
} }
.value { .value {
position : absolute; position : absolute;
width : 60%; width : calc(60% - 0px);
margin-left : 40%; margin-left : calc(40% + 0px);
display : flex; display : flex;
align-items : center; align-items : center;
justify-content: left; justify-content: left;
height : 100%;
white-space : break-all;
word-break : break-all;
color : #666;
}
}
height : 100% &.table {
margin-left: 1px;
margin-top : 1px;
.item {
border : 1px solid #000;
margin-left: -1px;
margin-top : -1px;
.label {
position: relative;
&::after {
content : '';
position : absolute;
right : 0;
top : 0;
height : 100%;
width : 1px;
background-color: #000;
}
}
.value {
width : calc(60% - 10px);
margin-left: calc(40% + 10px);
}
} }
} }
} }