diff --git a/demo/pc/descriptions.html b/demo/pc/descriptions.html index 92544c5..c3d6861 100644 --- a/demo/pc/descriptions.html +++ b/demo/pc/descriptions.html @@ -1,7 +1,9 @@ +{volist name="[''=>'基本','table'=>'表格']" id='vo'} +
- 描述列表 + 描述列表-{$vo}
-
+
昵称 @@ -52,4 +54,5 @@
-
\ No newline at end of file + +{/volist} \ No newline at end of file diff --git a/source/scss/desciptions/_desciptions.scss b/source/scss/desciptions/_desciptions.scss index 5c496b8..532ba75 100644 --- a/source/scss/desciptions/_desciptions.scss +++ b/source/scss/desciptions/_desciptions.scss @@ -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); + } } } } \ No newline at end of file