新增数据卡片极简底色；

demo/pc/card.html

@@ -272,7 +272,7 @@
     <div class="layui-field-box">
         <div class="ul-padding-md ul-bg-gray ul-mobile-box">
             <div class="ul-card-data-simple">
-                <div class="item">
+                <div class="item line">
                     <div class="item-title">
                         订单数量
                     </div>
@@ -308,6 +308,43 @@
 
             </div>
 
+        </div>
+    </div>
+</fieldset>
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>数据卡片极简底色</legend>
+    <div class="layui-field-box">
+        <div class=" ul-mobile-box">
+            <div class="ul-card-data-simple ul-card-data-simple-bg-black">
+                <div class="item main">
+                    <div class="item-title">
+                        订单数量
+                    </div>
+                    <div class="item-value">
+                        120
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="item-title">
+                        订单数量
+                    </div>
+                    <div class="item-value">
+                        120
+                    </div>
+
+                </div>
+                <div class="item">
+                    <div class="item-title">
+                        线下订单
+                    </div>
+                    <div class="item-value">
+                        120
+                    </div>
+
+                </div>
+
+            </div>
+
         </div>
     </div>
 </fieldset>

source/scss/card/_index.scss

@@ -1,4 +1,5 @@
 @import './ul-card-simple-icon';
 @import './ul-card-message';
 @import './ul-info-card';
-@import './ul-card-data-simple';
+@import './ul-card-data-simple';
+@import './ul-card-data-simple-bg-black';

source/scss/card/_ul-card-data-simple-bg-black.scss

@@ -0,0 +1,35 @@
+.ul-card-data-simple-bg-black {
+    background-color: #393D49;
+    color           : #fff;
+    border-radius   : 15px;
+    padding         : 15px;
+
+    box-shadow: 0 0 4px #999;
+
+    .item {
+
+        padding     : 15px;
+        margin-right: 0 10px;
+
+        .item-title {
+            color: #fff;
+        }
+
+        .item-value {
+            font-size: 20px;
+        }
+    }
+
+    .item.main {
+        background-color: #fff;
+        color           : #393D49;
+        border-radius   : 15px;
+
+        box-shadow  : 1px 1px 3px #999;
+        margin-right: 25px;
+
+        .item-title {
+            color: #393D49;
+        }
+    }
+}

source/scss/card/_ul-card-data-simple.scss

@@ -5,8 +5,8 @@
     background-color: #fff;
 
     .item {
-        padding: 15px;
-
+        margin    : 15px 0;
+        padding   : 0 15px;
         text-align: left;
 
         .item-title {
@@ -33,4 +33,8 @@
             color: #1E9FFF;
         }
     }
+
+    .item.line {
+        border-right: 1px solid #eee;
+    }
 }