新增分组面板,卡片式相册列表,空数据

demo/group_panel.html

@@ -0,0 +1,141 @@
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>按月分组面板</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md layui-bg-gray">
+      <div class="ul-group-list">
+        <fieldset class="layui-elem-field layui-field-title ul-group-item">
+          <legend>8月</legend>
+          <div class="layui-field-box">
+            <div class="ul-info-tips">
+              当前没有数据
+            </div>
+          </div>
+        </fieldset>
+        <fieldset class="layui-elem-field layui-field-title ul-group-item">
+          <legend>7月</legend>
+          <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-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>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>详细属性分组</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md layui-bg-gray">
+      <div class="layui-card ul-card">
+        <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>
+  </div>
+</fieldset>

demo/list.html

@@ -95,3 +95,88 @@
 
 
 </fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>相册列表</legend>
+  <div class="layui-field-box">
+    <div class="ul-photo-list">
+      <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 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>
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>卡片式相册列表</legend>
+  <div class="layui-field-box">
+    <div class="ul-photo-card-list">
+      <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 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 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 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>
+  </div>
+</fieldset>

demo/none.html

@@ -0,0 +1,11 @@
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>没有数据</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md layui-bg-gray">
+      <div class="ul-info-tips">
+        当前没有数据
+      </div>
+    </div>
+
+  </div>
+</fieldset>

public/cdn/layui-ul.css

@@ -1,10 +1,8 @@
 /* 列表开始 */
-.ul-nav-tree {
+.ul-nav-tree {}
 
-}
+.ul-nav-tree-group-title {
-
+  font-size  : 16px;
-.ul-nav-tree-group-title{
-  font-size: 16px;
   font-weight: 600;
   line-height: 2;
 }
@@ -17,7 +15,7 @@
   white-space: nowrap;
 }
 
-.ul-nav-tree-item.current .ul-nav-tree-item-title{
+.ul-nav-tree-item.current .ul-nav-tree-item-title {
   color: #6cf;
 }
 
@@ -53,7 +51,7 @@
   background-position: center;
 }
 
-.ul-border-right{
+.ul-border-right {
   border-right: 1px solid #bbb;
 }
 
@@ -206,32 +204,142 @@
 
 /* 链接导航开始 */
 
-.ul-link-select{
+.ul-link-select {
-  display: flex;
+  display        : flex;
-  align-items: flex-start;
+  align-items    : flex-start;
   justify-content: flex-start
 }
-.ul-link-title{
 
-}
+.ul-link-title {}
-.ul-link-list{
+
-  display: flex;
+.ul-link-list {
-  align-items: flex-start;
+  display        : flex;
+  align-items    : flex-start;
   justify-content: flex-start;
-  flex-wrap: wrap;
+  flex-wrap      : wrap;
-  margin-left: 15px;
+  margin-left    : 15px;
 }
 
-.ul-link-item{
+.ul-link-item {
-  padding: 0px 10px;
+  padding     : 0px 10px;
-  cursor: pointer;
+  cursor      : pointer;
   margin-right: 10px;
 }
 
-.ul-link-item.current{
+.ul-link-item.current {
   border-radius: 15px;
-  border: 1px solid #6cf;
+  border       : 1px solid #6cf;
-  color: #6cf;
+  color        : #6cf;
 }
 
 /* 链接导航结束 */
+
+/* 相册列表开始 */
+
+.ul-photo-list {
+  display        : flex;
+  align-items    : flex-start;
+  justify-content: flex-start;
+  flex-wrap      : wrap;
+}
+
+.ul-photo-item {
+  margin    : 15px;
+  text-align: center;
+  min-width : 220px;
+}
+
+.ul-photo-poster {
+  width              : 180px;
+  height             : 140px;
+  background-image   : url('../static/images/avatar.png');
+  background-size    : cover;
+  background-position: center;
+  margin             : 0 auto;
+}
+
+.ul-photo-info {
+  margin-top : 10px;
+  font-size  : 18px;
+  line-height: 1.5;
+}
+
+.ul-photo-desc {
+  font-size: 14px;
+  color    : #999;
+
+}
+
+
+.ul-photo-card-list {
+  display        : flex;
+  align-items    : flex-start;
+  justify-content: flex-start;
+  flex-wrap      : wrap;
+}
+
+.ul-photo-card-item {
+  width     : 200px;
+  margin    : 15px;
+  box-shadow: 0 5px 10px #999;
+  
+}
+
+.ul-photo-card-poster {
+  width : 100%;
+  height: 140px;
+  background-size    : cover;
+  background-position: center;
+}
+
+.ul-photo-card-info {
+  padding    : 5px;
+  font-size  : 18px;
+  line-height: 1.5;
+}
+
+.ul-photo-card-desc {
+  font-size: 14px;
+  color    : #999;
+
+}
+
+/* 相册列表结束 */
+
+
+.ul-info-tips {
+  padding         : 15px;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.ul-card-status {
+  padding      : 5px;
+  border-radius: 5px;
+}
+
+.ul-card-options {
+  float : right;
+  cursor: pointer;
+}
+
+.data-img .data-img-main {
+  max-width: 120px;
+  margin   : 5px;
+}
+
+.data-img {
+  display: block;
+}
+
+.ul-card-list {
+  display  : flex;
+  flex-wrap: wrap;
+}
+
+.ul-card-list .ul-card {
+  margin-right: 15px;
+}
+
+.ul-card-list .layui-card:last-child {
+  margin-bottom: 15px;
+}