From e86f86ee94b2f4f7c0b52eac41ed359b389eabc2 Mon Sep 17 00:00:00 2001
From: augushong <augushong@ulthon.com>
Date: Wed, 3 Aug 2022 23:15:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=A1=A8=E6=A0=BC=E7=9A=84?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E5=88=97=E8=A1=A8=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/pc/descriptions.html                 |  9 ++--
 source/scss/desciptions/_desciptions.scss | 59 ++++++++++++++++++-----
 2 files changed, 54 insertions(+), 14 deletions(-)

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'}
+
 <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">
                     昵称
@@ -52,4 +54,5 @@
             </div>
         </div>
     </div>
-</fieldset>
\ No newline at end of file
+</fieldset>
+{/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