From d44391deea989e76bb5dcc7862fcec1cd949916a Mon Sep 17 00:00:00 2001
From: augushong <augushong@ulthon.com>
Date: Mon, 22 Aug 2022 15:40:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=AB=99=E7=82=B9=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/pc/list.html                   | 33 ++++++++++++-
 source/scss/layui-ul.scss           | 63 -------------------------
 source/scss/list/_index.scss        |  3 +-
 source/scss/list/_ul-site-list.scss | 72 +++++++++++++++++++++++++++++
 4 files changed, 106 insertions(+), 65 deletions(-)
 create mode 100644 source/scss/list/_ul-site-list.scss

diff --git a/demo/pc/list.html b/demo/pc/list.html
index e3874d6..562f0f8 100644
--- a/demo/pc/list.html
+++ b/demo/pc/list.html
@@ -380,7 +380,7 @@
 <fieldset class="layui-elem-field layui-field-title">
     <legend>站点导航</legend>
     <div class="layui-field-box">
-        <div class="ul-site-group" data-repeat="3">
+        <div class="ul-site-group" data-repeat="2">
             <div class="ul-site-group-header">
                 新上线
             </div>
@@ -405,6 +405,37 @@
             </div>
 
 
+        </div>
+    </div>
+</fieldset>
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>站点导航（卡片）</legend>
+    <div class="layui-field-box">
+        <div class="ul-site-group ul-bg-gray ul-padding-md" data-repeat="2">
+            <div class="ul-site-group-header">
+                新上线
+            </div>
+            <div class="ul-site-list">
+
+                <div class="ul-site-item card" data-repeat="6">
+                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
+
+                    </div>
+                    <div class="ul-site-item-info">
+                        <div class="ul-site-item-title">
+                            layui奥宏样式库
+                        </div>
+                        <div class="ul-site-item-desc">
+                            纯CSS的组件案例样式大全
+                        </div>
+
+                    </div>
+                </div>
+
+
+            </div>
+
+
         </div>
     </div>
 </fieldset>
diff --git a/source/scss/layui-ul.scss b/source/scss/layui-ul.scss
index da7a030..3c33afd 100644
--- a/source/scss/layui-ul.scss
+++ b/source/scss/layui-ul.scss
@@ -1304,69 +1304,6 @@ body .layui-quote-gray {
     font-size: 14px;
 }
 
-.ul-site-group {
-    margin-bottom: 8px;
-}
-
-.ul-site-group-header {
-    font-size     : 16px;
-    color         : #333;
-    padding-bottom: 8px;
-}
-
-.ul-site-list {
-    display        : flex;
-    align-items    : flex-start;
-    justify-content: flex-start;
-    flex-wrap      : wrap;
-    margin-top     : 8px;
-}
-
-.ul-site-item {
-    width          : 20%;
-    margin-right   : 5%;
-    display        : flex;
-    align-items    : flex-start;
-    justify-content: flex-start;
-    margin-bottom  : 15px;
-}
-
-.ul-site-item-logo {
-    width              : 24px;
-    height             : 24px;
-    margin-right       : 8px;
-    margin-top         : 4px;
-    background-size    : cover;
-    background-position: center;
-}
-
-
-.ul-site-item-info {
-    width: calc(100% - 34px);
-
-}
-
-.ul-site-item-title {
-    color          : #4662d9;
-    font-weight    : bold;
-    text-decoration: none;
-}
-
-.ul-site-item-desc {
-    font-size: 12px;
-    color    : #666;
-}
-
-@media screen and (max-width:450px) {
-    .ul-site-item {
-        width: 49%;
-    }
-
-    .ul-site-item-desc {
-        font-size : 11px;
-        margin-top: 3px;
-    }
-}
 
 .ul-timeline-rowstyle {
     display   : flex;
diff --git a/source/scss/list/_index.scss b/source/scss/list/_index.scss
index 590ada6..64bddeb 100644
--- a/source/scss/list/_index.scss
+++ b/source/scss/list/_index.scss
@@ -1,2 +1,3 @@
 @import './ul-avatar-list';
-@import './ul-order-list-simple-card';
\ No newline at end of file
+@import './ul-order-list-simple-card';
+@import './ul-site-list';
\ No newline at end of file
diff --git a/source/scss/list/_ul-site-list.scss b/source/scss/list/_ul-site-list.scss
new file mode 100644
index 0000000..0e19add
--- /dev/null
+++ b/source/scss/list/_ul-site-list.scss
@@ -0,0 +1,72 @@
+.ul-site-group {
+    margin-bottom: 8px;
+}
+
+.ul-site-group-header {
+    font-size     : 16px;
+    color         : #333;
+    padding-bottom: 8px;
+}
+
+.ul-site-list {
+    display        : flex;
+    align-items    : flex-start;
+    justify-content: flex-start;
+    flex-wrap      : wrap;
+    margin-top     : 8px;
+}
+
+.ul-site-item {
+    width          : 20%;
+    margin-right   : 5%;
+    display        : flex;
+    align-items    : flex-start;
+    justify-content: flex-start;
+    margin-bottom  : 15px;
+
+    &.card {
+        background-color: #fff;
+        border-radius   : 5px;
+        padding         : 10px;
+        margin-right    : 15px;
+    }
+}
+
+.ul-site-item-logo {
+    width              : 34px;
+    height             : 34px;
+    margin-right       : 8px;
+    margin-top         : 4px;
+    background-size    : cover;
+    background-position: center;
+
+
+}
+
+
+.ul-site-item-info {
+    width: calc(100% - 34px);
+
+}
+
+.ul-site-item-title {
+    color          : #4662d9;
+    font-weight    : bold;
+    text-decoration: none;
+}
+
+.ul-site-item-desc {
+    font-size: 12px;
+    color    : #666;
+}
+
+@media screen and (max-width:450px) {
+    .ul-site-item {
+        width: 49%;
+    }
+
+    .ul-site-item-desc {
+        font-size : 11px;
+        margin-top: 3px;
+    }
+}
\ No newline at end of file