From 7cf709a60a4d04d35fc442fa56e61c5000149738 Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Thu, 22 Apr 2021 00:24:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AF=BC=E8=88=AA,=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E9=93=B6=E8=A1=8C=E5=8D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/card.html          | 36 ++++++++++++++-
 demo/nav.html           | 20 +++++++++
 public/cdn/layui-ul.css | 97 ++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 151 insertions(+), 2 deletions(-)

diff --git a/demo/card.html b/demo/card.html
index aa2d1e8..2ea2e0c 100644
--- a/demo/card.html
+++ b/demo/card.html
@@ -2,7 +2,7 @@
   <legend>卡片A</legend>
   <div class="layui-field-box">
     <div class="ul-padding-md" data-repeat="3">
-      <div class="ul-card-a" >
+      <div class="ul-card-a">
         <div class="ul-card-a-left">
           <img width="100%" src="{$site_logo_src}" alt="">
         </div>
@@ -21,6 +21,40 @@
   </div>
 </fieldset>
 
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>银行卡</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md">
+      <div class="ul-card-bank" data-repeat="3">
+        <div class="ul-common-flex-sb ul-card-bank-header">
+          <div class="ul-card-bank-title">
+            中国银行
+          </div>
+          <div class="ul-card-bank-number">
+            尾号 ********123456
+          </div>
+        </div>
+        <div class="ul-common-flex-sb ul-card-bank-body">
+          <div class="ul-card-bank-line">
+            <div class="ul-card-bank-line-triangle"></div>
+          </div>
+          <div class="ul-card-bank-tips">
+            默认
+          </div>
+        </div>
+        <div class="ul-common-flex-sb ul-card-bank-footer">
+          <div class="ul-card-bank-time">
+            绑定日期:2021-03-15
+          </div>
+          <div class="ul-card-bank-name">
+            **宏
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>
+
 <fieldset class="layui-elem-field layui-field-title">
   <legend>详细属性卡片</legend>
   <div class="layui-field-box">
diff --git a/demo/nav.html b/demo/nav.html
index 94db8d6..79817b1 100644
--- a/demo/nav.html
+++ b/demo/nav.html
@@ -182,4 +182,24 @@
       </div>
     </div>
   </div>
+</fieldset>
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>带图片和边框的导航</legend>
+  <div class="layui-field-box">
+    <div class="ul-nav-poster" style="width: 200px;">
+      <div class="ul-nav-poster-item" data-repeat="6">
+        <div class="ul-nav-poster-left">
+          <div class="ul-nav-poster-img" style="background-image: url('{$site_logo_src}');">
+
+          </div>
+          <div class="ul-nav-post-title">
+            国产专区
+          </div>
+        </div>
+        <div class="ul-nav-poster-right">
+          <div class="ul-nav-poster-desc">进入系统</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </fieldset>
\ No newline at end of file
diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css
index 405d110..bde8e01 100644
--- a/public/cdn/layui-ul.css
+++ b/public/cdn/layui-ul.css
@@ -710,7 +710,7 @@
   padding: 15px;
   cursor: pointer;
 }
-.ul-card-a-left{
+.ul-card-a-left {
   width: 40%;
 }
 .ul-card-a-right {
@@ -726,3 +726,98 @@
   margin-top: 5px;
   font-size: 14px;
 }
+
+.ul-nav-poster {
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-top-width: 3px;
+}
+
+.ul-nav-poster-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ul-nav-poster-left {
+  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: 48px;
+  height: 48px;
+  background-size: cover;
+  background-position: center;
+}
+.ul-nav-poster-item:not(:last-child) {
+  border-bottom: 1px dashed #ddd;
+}
+
+.ul-card-bank {
+  width: 249px;
+  border: 1px solid #e4e4e4;
+  border-radius: 5px;
+  box-shadow: 0 1px 1px #e9e9e9;
+  float: left;
+  margin-right: 14px;
+  margin-bottom: 10px;
+  color: #666666;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.ul-card-bank-header {
+  padding: 10px 0;
+  margin: 0 14px;
+  border-bottom: 1px dotted #d9d9d9;
+}
+
+.ul-common-flex-sb {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ul-card-bank-body {
+  height: 40px;
+  padding: 10px 10px 20px 0;
+}
+
+.ul-card-bank-line {
+  width: 88px;
+  height: 23px;
+  font-weight: 100;
+  text-align: center;
+  background: #2e4158;
+  border-radius: 0 3px 0 0;
+  font-size: 14px;
+  float: left;
+}
+
+.ul-card-bank-footer {
+  padding: 3px 14px;
+  background: #f8f8f8;
+  border-top: 1px solid #e7e7e7;
+}
+
+.ul-card-bank-line-triangle {
+  width: 0px;
+  height: 3px;
+  display: block;
+  float: right;
+  border-left: 9px solid transparent;
+  border-bottom: 20px solid #fff;
+}
+.ul-card-bank-tips {
+  color: #6cf;
+  font-size: 14px;
+}