新增深色大块脚部

demo/pc/footer.html

@@ -1,6 +1,38 @@
 <fieldset class="layui-elem-field layui-field-title">
-    <legend>字段集区块 - 横线风格</legend>
+    <legend>脚部-大块深色</legend>
-    <div class="layui-field-box">
+    <div class="layui-field-box" style="width: 1000px;">
-        内容区域
+        <div class="ul-footer" style="margin-top: 15px;">
+            <div class="container">
+                <div>
+                    <img class="logo" src="https://cdn.720zilla.com/upload/site_logo/60af18f560d62.png" alt="">
+                </div>
+                <div style="min-width: 60%;">
+                    <div class="footer-nav">
+                    </div>
+
+
+                    <div class="footer-link" style="margin-top: 15px;">
+                        <span style="margin-left: 10px;margin-right: -5px;">合作伙伴：</span>
+                        <a href="http://ulthon.com" target="_blank">临沂奥宏网络科技有限公司</a>
+
+                    </div>
+
+                    <div>
+                        <p style="margin-left: 10px;">
+                            <span>本站所有权利归 720zilla.com 所有</span>
+                            <a href="http://www.beian.miit.gov.cn/" target="_blank">鲁ICP备19027671号</a>
+
+                        </p>
+                    </div>
+                </div>
+                <div>
+                    <p>联系我们</p>
+                    <p>电话:13518691790</p>
+                    <p>邮箱:service@ulthon.com</p>
+                    <p>工作时间:周一至周五 9:00 - 18:00</p>
+                    <p><img style="width: 120px;" src="https://cdn.720zilla.com/upload/site_logo/60af122190dfd.jpg" alt=""></p>
+                </div>
+            </div>
+        </div>
     </div>
 </fieldset>

demo/pc/jumbotron.html

@@ -3,7 +3,7 @@
     <div class="layui-field-box">
         <div class="ul-padding-md ul-bg-gray">
 
-            <div class="jumbotron clean">
+            <div class="ul-jumbotron clean">
                 <div class="main">
 
                     <div class="title">layui-ul</div>
@@ -23,7 +23,7 @@
     <div class="layui-field-box">
         <div class="ul-padding-md ul-bg-gray">
 
-            <div class="jumbotron dark">
+            <div class="ul-jumbotron dark">
                 <div class="main">
 
                     <div class="title">layui-ul</div>
@@ -51,7 +51,7 @@
     <div class="layui-field-box">
         <div class="ul-padding-md ul-bg-gray">
 
-            <div class="jumbotron left dark">
+            <div class="ul-jumbotron left dark">
                 <div class="main">
 
                     <div class="title">layui-ul</div>

source/scss/footer/_footer.scss

@@ -0,0 +1,37 @@
+.ul-footer {
+    background-color: #333;
+    color           : #fff;
+}
+
+.ul-footer .container {
+    display: flex;
+    margin : 0 auto;
+    padding: 40px 0;
+}
+
+.ul-footer .logo {
+    width: 120px;
+}
+
+.ul-footer .container>div {
+    padding: 0 25px;
+}
+
+.ul-footer .container>div:not(:last-child) {
+    border-right: 1px solid #555;
+}
+
+.ul-footer .ul-footer-nav a {
+    color      : #fff;
+    margin     : 5px 10px;
+    font-weight: 600;
+}
+
+.ul-footer .ul-footer-link a {
+    color : #ddd;
+    margin: 5px 10px;
+}
+
+.ul-footer p {
+    margin-top: 5px;
+}

source/scss/footer/_index.scss

@@ -0,0 +1 @@
+@import 'footer';

source/scss/jumbotron/_jumbotron.scss

@@ -1,4 +1,4 @@
-.jumbotron {
+.ul-jumbotron {
     padding   : 15px;
     text-align: center;
 

source/scss/jumbotron/_jumbotron_clean.scss

@@ -1,4 +1,4 @@
-.jumbotron {
+.ul-jumbotron {
     &.clean{
         background-color: #fff;
     }

source/scss/jumbotron/_jumbotron_dark.scss

@@ -1,4 +1,4 @@
-.jumbotron {
+.ul-jumbotron {
     &.dark {
         background-color: #1F2430;
         color           : #fff;

source/scss/jumbotron/_jumbotron_left.scss

@@ -1,4 +1,4 @@
-.jumbotron {
+.ul-jumbotron {
     &.left {
         .main {
             text-align : left;

source/scss/layui-ul.scss

@@ -6,6 +6,7 @@
 @import './card/index';
 @import './title/index';
 @import './jumbotron/index';
+@import './footer/index';
 
 
 /* 头部开始 */