完成表格的描述列表;

This commit is contained in:
2022-08-03 23:15:33 +08:00
parent 7a6c7a2d9a
commit e86f86ee94
2 changed files with 54 additions and 14 deletions

View File

@@ -1,6 +1,8 @@
.ul-descriptions {
display:flex;
// TODO:使用grid实现布局
display : flex;
flex-wrap: wrap;
@@ -10,25 +12,60 @@
position: relative;
height : 40px;
.label {
width : calc(40% - 12px);
padding : 12px 6px;
position: absolute;
width : calc(40% - 12px);
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%
height : 100%;
white-space : break-all;
word-break : break-all;
color : #666;
}
}
&.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);
}
}
}
}