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-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">
<legend>描述列表</legend>
<legend>描述列表-{$vo}</legend>
<div class="layui-field-box">
<div class="ul-descriptions">
<div class="ul-descriptions {$key}">
<div class="item">
<div class="label">
昵称
@@ -53,3 +55,4 @@
</div>
</div>
</fieldset>
{/volist}

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

@@ -1,5 +1,7 @@
.ul-descriptions {
// TODO:使用grid实现布局
display : flex;
flex-wrap: wrap;
@@ -11,24 +13,59 @@
height : 40px;
.label {
width : calc(40% - 12px);
padding : 12px 6px;
padding-right : 12px;
position : absolute;
height : 100%;
display : flex;
align-items : center;
justify-content: flex-end;
color : #333;
}
.value {
position : absolute;
width : 60%;
margin-left : 40%;
width : calc(60% - 0px);
margin-left : calc(40% + 0px);
display : flex;
align-items : center;
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);
}
}
}
}