diff --git a/demo/group_panel.html b/demo/group_panel.html
index 69f8e86..3b2f138 100644
--- a/demo/group_panel.html
+++ b/demo/group_panel.html
@@ -16,43 +16,7 @@
           <div class="layui-field-box">
             <div class="ul-card-list">
 
-              <div class="layui-card ul-card" style="width:300px">
-                <div class="layui-card-header">
-                  <span class="ul-card-status layui-bg-green">意向</span>
-                  <span class="ul-card-title">卡片面板</span>
-                  <span class="ul-card-options">
-                    <span>2021年3月29日</span>
-                    <span class=""><i class="layui-icon layui-icon-right"></i></span>
-                  </span>
-                </div>
-                <div class="layui-card-body">
-                  <div class="data-item">
-                    <span class="data-title">入库时间:</span>
-                    <span class="data-value">2021年3月29日16:33:21</span>
-                  </div>
-                  <div class="data-item">
-                    <span class="data-title">用户名称:</span>
-                    <span class="data-value">奥古斯宏</span>
-                  </div>
-                  <div class="data-item">
-                    <span class="data-title">公司名称:</span>
-                    <span class="data-value">临沂奥宏网络科技有限公司</span>
-                  </div>
-                  <div class="data-item">
-                    <span class="data-title">电话:</span>
-                    <span class="data-value">13012341234</span>
-                  </div>
-                  <div class="data-item">
-                    <span class="data-title">相册:</span>
-                    <span class="data-img">
-                      <img class="data-img-main" src="/static/images/view.jpg" alt="">
-                      <img class="data-img-main" src="/static/images/view.jpg" alt="">
-                      <img class="data-img-main" src="/static/images/view.jpg" alt="">
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div class="layui-card ul-card" style="width:300px">
+              <div class="layui-card ul-card" style="width:300px" data-repeat="2">
                 <div class="layui-card-header">
                   <span class="ul-card-status layui-bg-green">意向</span>
                   <span class="ul-card-title">卡片面板</span>
@@ -88,6 +52,7 @@
                   </div>
                 </div>
               </div>
+              
             </div>
           </div>
         </fieldset>
diff --git a/demo/list.html b/demo/list.html
index 459a42d..f73637a 100644
--- a/demo/list.html
+++ b/demo/list.html
@@ -100,7 +100,7 @@
   <legend>相册列表</legend>
   <div class="layui-field-box">
     <div class="ul-photo-list">
-      <div class="ul-photo-item">
+      <div class="ul-photo-item" data-repeat="3">
         <div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
 
         </div>
@@ -110,26 +110,7 @@
           <div class="ul-photo-desc">相册说明内容</div>
         </div>
       </div>
-      <div class="ul-photo-item">
-        <div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
 
-        </div>
-        <div class="ul-photo-info">
-          <div class="ul-photo-title">周末野外广场树林写真</div>
-          <div class="ul-photo-plus">45P+1V</div>
-          <div class="ul-photo-desc">相册说明内容</div>
-        </div>
-      </div>
-      <div class="ul-photo-item">
-        <div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
-
-        </div>
-        <div class="ul-photo-info">
-          <div class="ul-photo-title">周末野外广场树林写真</div>
-          <div class="ul-photo-plus">45P+1V</div>
-          <div class="ul-photo-desc">相册说明内容</div>
-        </div>
-      </div>
     </div>
   </div>
 </fieldset>
@@ -137,7 +118,8 @@
   <legend>卡片式相册列表</legend>
   <div class="layui-field-box">
     <div class="ul-photo-card-list">
-      <div class="ul-photo-card-item">
+
+      <div class="ul-photo-card-item" data-repeat="7">
         <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
 
         </div>
@@ -147,34 +129,55 @@
           <div class="ul-photo-card-plus">45P+1V</div>
         </div>
       </div>
-      <div class="ul-photo-card-item">
-        <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
 
-        </div>
-        <div class="ul-photo-card-info">
-          <div class="ul-photo-card-title">周末野外广场树林写真</div>
-          <div class="ul-photo-card-desc">相册说明内容</div>
-          <div class="ul-photo-card-plus">45P+1V</div>
-        </div>
-      </div>
-      <div class="ul-photo-card-item">
-        <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
+    </div>
+  </div>
+</fieldset>
 
-        </div>
-        <div class="ul-photo-card-info">
-          <div class="ul-photo-card-title">周末野外广场树林写真</div>
-          <div class="ul-photo-card-desc">相册说明内容</div>
-          <div class="ul-photo-card-plus">45P+1V</div>
-        </div>
-      </div>
-      <div class="ul-photo-card-item">
-        <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>内容丰富的留言列表</legend>
+  <div class="layui-field-box layui-bg-gray">
+    <div class="ul-message-list ul-padding-md">
+      <div class="ul-message-item ul-bg-white" data-repeat="3">
+        <div class="ul-message-item-left">
+          <div class="ul-message-item-avatar" style="background-image: url('/static/images/avatar.png');">
 
+          </div>
         </div>
-        <div class="ul-photo-card-info">
-          <div class="ul-photo-card-title">周末野外广场树林写真</div>
-          <div class="ul-photo-card-desc">相册说明内容</div>
-          <div class="ul-photo-card-plus">45P+1V</div>
+        <div class="ul-message-item-right">
+          <div class="ul-message-item-info">
+            <div class="ul-message-item-name">
+              <div class="data-item">
+                奥古斯宏
+              </div>
+              <div class="data-item">
+                程序员
+              </div>
+            </div>
+            <div class="ul-message-item-data">
+              <div class="data-item split-border">
+                <span class="data-title">联系方式:</span>
+                <span class="data-value">13012341234</span>
+              </div>
+              <div class="data-item">
+                <span class="data-title">价位:</span>
+                <span class="data-value">￥3</span>
+              </div>
+
+            </div>
+            <div class="ul-message-item-options">
+              <div class="layui-btn">查看详情</div>
+            </div>
+          </div>
+          <div class="ul-message-item-content">
+            百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
+          </div>
+          <div class="ul-message-item-img-list">
+            <div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
+
+            </div>
+            
+          </div>
         </div>
       </div>
     </div>
diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css
index 817e020..d0c2ab5 100644
--- a/public/cdn/layui-ul.css
+++ b/public/cdn/layui-ul.css
@@ -55,6 +55,10 @@
   border-right: 1px solid #bbb;
 }
 
+.ul-bg-white {
+  background-color: #fff;
+}
+
 /* 通用类结束 */
 
 /* 用户头像开始 */
@@ -282,12 +286,12 @@
   width     : 200px;
   margin    : 15px;
   box-shadow: 0 5px 10px #999;
-  
+
 }
 
 .ul-photo-card-poster {
-  width : 100%;
-  height: 140px;
+  width              : 100%;
+  height             : 140px;
   background-size    : cover;
   background-position: center;
 }
@@ -322,6 +326,10 @@
   cursor: pointer;
 }
 
+.data-item {
+  margin-right: 15px;
+}
+
 .data-img .data-img-main {
   max-width: 120px;
   margin   : 5px;
@@ -344,20 +352,88 @@
   margin-bottom: 15px;
 }
 
-.ul-title{
-  text-align: center;
+.ul-title {
+  text-align : center;
   line-height: 1.5;
 }
 
-.ul-title-main{
+.ul-title-main {
   font-size: 16px;
 }
 
-.ul-title-plus{
+.ul-title-plus {
   color: #999;
 }
 
-.ul-title-line{
+.ul-title-line {
   border-top: 2px solid #666;
   margin-top: 8px;
+}
+
+.ul-message-list {}
+
+.ul-message-item {
+  margin-bottom  : 15px;
+  display        : flex;
+  justify-content: flex-start;
+  align-items    : flex-start;
+  padding        : 15px;
+}
+
+.ul-message-item-left {
+  width: 120px;
+}
+
+.ul-message-item-right {
+  width: calc(100% - 120px);
+}
+.ul-message-item-info{
+  position: relative;
+}
+.ul-message-item-options{
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.ul-message-item-avatar {
+  background-size    : cover;
+  background-position: center;
+  width              : 100px;
+  height             : 100px;
+  border-radius      : 50%;
+}
+
+.ul-message-item-name {
+  display  : flex;
+  color    : #6cf;
+  font-size: 16px;
+}
+
+.ul-message-item-data {
+  display   : flex;
+  font-size : 14px;
+  color     : #999;
+  margin-top: 10px;
+}
+
+.ul-message-item-content {
+  background-color: #f0f0f0;
+  padding         : 15px;
+  margin-top      : 10px;
+}
+
+.ul-message-item-img-list{
+  
+  margin-top: 10px;
+  
+}
+
+.ul-message-item-img {
+  width              : 160px;
+  height             : 120px;
+  background-size    : cover;
+  background-position: center;
+  margin-right: 10px;
+  display: inline-block;
+  
 }
\ No newline at end of file
diff --git a/view/index/index/index.html b/view/index/index/index.html
index c175a2b..13788bf 100644
--- a/view/index/index/index.html
+++ b/view/index/index/index.html
@@ -74,7 +74,19 @@
     </div>
   </div>
   <script>
-    layui.use(['element','form'])
+    function renderRepeat(elem) {
+      $(elem).find('[data-repeat]').each(function () {
+        for (let index = 1; index < $(this).data('repeat'); index++) {
+          var clone = $(this).clone()
+          clone.insertAfter(this)
+          renderRepeat(clone)
+        }
+      })
+    }
+    renderRepeat('body')
+    layui.use(['element', 'form'])
+
+
   </script>
 </body>