修改细节;新增条幅列表

demo/list.html

@@ -225,3 +225,23 @@
 
   </div>
 </fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>条幅(广告)列表</legend>
+  <div class="layui-field-box">
+    <div class="ul-ad-list">
+      <div class="ul-ad-item" data-repeat="3">
+        <div class="ul-ad-left">
+          <div  class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
+        </div>
+        <div class="ul-ad-right">
+          <div class="ul-ad-title">福牛迎春</div>
+          <div class="ul-ad-desc">天天送大礼</div>
+          <div class="ul-ad-options">
+            <div class="layui-btn">查看详情</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>

demo/nav.html

@@ -203,3 +203,14 @@
     </div>
   </div>
 </fieldset>
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>简单地分割线导航</legend>
+  <div class="layui-field-box">
+    <div class="ul-nav-link">
+      <a class="ul-nav-link-item" href="">导航1</a>
+      <a class="ul-nav-link-item" href="">那个导航2</a>
+      <a class="ul-nav-link-item" href="">这个导航3</a>
+      <a class="ul-nav-link-item" href="">导航4</a>
+    </div>
+  </div>
+</fieldset>

demo/title.html

@@ -44,5 +44,31 @@
 
 
 
+  </div>
+</fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>分组标题</legend>
+  <div class="layui-field-box">
+    <div class="ul-group-title">
+      销售
+    </div>
+    <div class="ul-group-title">
+      设计
+    </div>
+
+  </div>
+</fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>分组标题-2</legend>
+  <div class="layui-field-box">
+    <div class="ul-group-title-2">
+      销售
+    </div>
+    <div class="ul-group-title-2">
+      设计
+    </div>
+
   </div>
 </fieldset>

public/cdn/layui-ul.css

@@ -1,6 +1,5 @@
 /* 列表开始 */
-.ul-nav-tree {
+.ul-nav-tree {}
-}
 
 .ul-nav-tree-group-title {
   font-size  : 16px;
@@ -62,6 +61,7 @@
   display  : flex;
   flex-wrap: wrap;
 }
+
 .ul-common-flex-sb {
   display        : flex;
   align-items    : center;
@@ -72,8 +72,7 @@
 
 /* 用户头像开始 */
 
-.ul-avatar-list {
+.ul-avatar-list {}
-}
 
 .ul-avatar-list-item {
   display         : flex;
@@ -220,8 +219,7 @@
   justify-content: flex-start;
 }
 
-.ul-link-title {
+.ul-link-title {}
-}
 
 .ul-link-list {
   display        : flex;
@@ -373,8 +371,7 @@
   margin-top: 8px;
 }
 
-.ul-message-list {
+.ul-message-list {}
-}
 
 .ul-message-item {
   margin-bottom  : 15px;
@@ -476,8 +473,7 @@
   margin-bottom: 15px;
 }
 
-.ul-upload-photo-list {
+.ul-upload-photo-list {}
-}
 
 .ul-upload-photo-item {
   display         : inline-block;
@@ -513,7 +509,7 @@
   background-position: center;
 }
 
-.ul-form-group-title {
+.ul-group-title {
   color        : #999;
   border-bottom: 1px solid #bbb;
   padding      : 5px 0;
@@ -654,6 +650,7 @@
   width              : 24px;
   background-size    : cover;
   background-position: center;
+  margin-right       : 10px;
 }
 
 .ul-header-a-right {
@@ -676,6 +673,7 @@
   padding        : 5px 15px;
   margin         : 0 auto;
 }
+
 .ul-nav-header-right {
   text-align: right;
 }
@@ -699,9 +697,11 @@
 .ul-nav-header-red .ul-nav-header-item {
   color: #fff;
 }
+
 .ul-nav-header-red .ul-nav-header-item:hover {
   color: #fedf50;
 }
+
 .ul-nav-header-primary {
   background-color: #6cf;
 }
@@ -709,6 +709,7 @@
 .ul-nav-header-primary .ul-nav-header-item {
   color: #fff;
 }
+
 .ul-nav-header-primary .ul-nav-header-item:hover {
   color: #ccffff;
 }
@@ -724,19 +725,24 @@
   cursor         : pointer;
   margin-right   : 15px;
   margin-bottom  : 15px;
+  position       : relative;
 }
+
 .ul-card-a-left {
   width: 40%;
 }
+
 .ul-card-a-right {
   display    : flex;
   align-items: center;
   text-align : center;
   width      : 50%;
 }
+
 .ul-card-a-title {
   font-size: 18px;
 }
+
 .ul-card-a-desc {
   margin-top: 5px;
   font-size : 14px;
@@ -759,15 +765,18 @@
   display    : flex;
   align-items: center;
 }
+
 .ul-nav-post-title {
   color      : #333;
   font-weight: bold;
 }
+
 .ul-nav-poster-desc {
   color      : #999;
   font-size  : 12px;
   font-weight: 100;
 }
+
 .ul-nav-poster-img {
   width              : 38px;
   height             : 38px;
@@ -775,6 +784,7 @@
   background-size    : cover;
   background-position: center;
 }
+
 .ul-nav-poster-item:not(:last-child) {
   border-bottom: 1px dashed #ddd;
 }
@@ -828,7 +838,91 @@
   border-left  : 9px solid transparent;
   border-bottom: 20px solid #fff;
 }
+
 .ul-card-bank-tips {
   color    : #6cf;
   font-size: 14px;
 }
+
+.ul-nav-link-item {
+  display    : inline-block;
+  margin     : 5px 0;
+  padding    : 0 10px;
+  border     : 1px solid transparent;
+  color      : #333;
+  white-space: nowrap;
+}
+
+.ul-nav-link-item:not(:last-child) {
+  border-right-color: #666;
+}
+
+.ul-group-title-2 {
+  background   : #d2dbe0;
+  width        : 84px;
+  height       : 28px;
+  line-height  : 28px;
+  font-size    : 14px;
+  font-weight  : bold;
+  text-align   : center;
+  position     : relative;
+  margin-top   : 30px;
+  margin-bottom: 14px;
+  color        : #666666;
+}
+
+.ul-group-title-2::after {
+  content      : "";
+  width        : 0;
+  height       : 0;
+  position     : absolute;
+  border-top   : 14px solid transparent;
+  border-bottom: 14px solid transparent;
+  border-left  : 15px solid #d2dbe0;
+  right        : -15px;
+  top          : 0px;
+
+}
+
+.ul-ad-list{
+
+}
+.ul-ad-item{
+  box-shadow: 1px 1px 8px  #666;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.ul-ad-left{
+  width: 68%;
+  height: 160px;
+}
+.ul-ad-img{
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+}
+
+.ul-ad-right{
+  width: 28%;
+}
+
+.ul-ad-title{
+  font-size: 28px;
+  font-weight: 100;
+  margin: 0;
+  color: #e4393c;
+
+}
+
+.ul-ad-desc{
+  font-size: 14px;
+color: #666666;
+margin: 26px 0;
+line-height: 24px;
+}