修改部分样式优先级

README.md

@@ -14,7 +14,7 @@ ulthon扩展的layui样式库.
 - 收藏主流的JS插件
 - 使用了部分layui的样式,但是大部分组件不依赖layui.
 - 依赖layui的部分也很容易替换掉(使用layui的按钮/颜色之类样式).
-- 不限制开发终端,只要支持css的都可以使用
+- 不限制开发终端,只要支持css的都可以使用(vue,angular,uni,小程序都可以)
 
 ### 使用说明
 

demo/card.html

@@ -3,7 +3,7 @@
   <div class="layui-field-box">
     <div class="ul-padding-md">
       <div class="ul-common-flex-list">
-        <div class="ul-card-a"  data-repeat="3">
+        <div class="ul-card-a" data-repeat="3">
           <div class="ul-card-a-left">
             <img width="100%" src="{$site_logo_src}" alt="">
           </div>
@@ -100,3 +100,58 @@
     </div>
   </div>
 </fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>数据卡片</legend>
+  <div class="layui-field-box">
+    <div class="ul-card-data-container ul-padding-md">
+      <div class="ul-card-data-a ul-card-data" data-repeat="2">
+        <div class="ul-card-data-a-title">
+          509778.80
+        </div>
+        <div class="ul-card-data-a-options">
+          <div class="ul-card-data-a-item">
+            <i class="layui-icon layui-icon-gift"></i>
+            余额
+          </div>
+          <div class="ul-card-data-a-item">
+            <div class="layui-btn layui-btn-xs">充值</div>
+            <div class="layui-btn layui-btn-xs">提现</div>
+            <div class="layui-btn layui-btn-xs">记录</div>
+          </div>
+        </div>
+      </div>
+      <div class="ul-card-data-b ul-card-data" data-repeat="2">
+        <div class="ul-card-data-b-main">
+
+          <div class="ul-card-data-b-icon layui-icon layui-icon-gift">
+
+          </div>
+          <div class="ul-card-data-b-info">
+            <div class="ul-card-data-b-title">
+              盈亏总额(元)
+            </div>
+            <div class="ul-card-data-b-value">
+              0.00
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="ul-card-data-c ul-card-data">
+
+        <div class="ul-card-data-c-item" data-repeat="3">
+          <div class="ul-card-data-c-value">
+            0
+          </div>
+          <div class="ul-card-data-c-title">
+            余额
+          </div>
+
+        </div>
+      </div>
+
+
+    </div>
+  </div>
+</fieldset>

public/cdn/layui-ul.css

@@ -568,6 +568,7 @@
   color     : #999;
   font-size : 12px;
   margin-top: 5px;
+  word-break: break-all;
 }
 
 .ul-note-item .ul-note-item-time {
@@ -605,7 +606,7 @@
   text-align: center;
 }
 
-.ul-nav-min-item {
+.ul-nav-min .ul-nav-min-item {
   padding: 5px 0;
   cursor : pointer;
   color  : #333;
@@ -663,7 +664,13 @@
   top             : 100%;
   left            : 50%;
   display         : none;
+  background-color: transparent;
+  z-index: 99999;
+}
+
+.ul-header-a-nav-plus>.ul-nav-min {
   background-color: #fff;
+  margin-top      : 15px;
 }
 
 .ul-nav-header-main {
@@ -746,6 +753,7 @@
 .ul-card-a-desc {
   margin-top: 5px;
   font-size : 14px;
+  white-space: nowrap;
 }
 
 .ul-nav-poster {
@@ -794,7 +802,7 @@
   border       : 1px solid #e4e4e4;
   border-radius: 5px;
   box-shadow   : 0 1px 1px #e9e9e9;
-  float        : left;
+  display      : inline-block;
   margin-right : 14px;
   margin-bottom: 10px;
   color        : #666666;
@@ -994,11 +1002,90 @@
 
 .ul-nav-card-item-desc {
   line-height: 28px;
-  color: #666;
+  color      : #666;
-  font-size: 12px;
+  font-size  : 12px;
 }
 
-.ul-nav-card-item.disabled .ul-nav-card-item-icon{
+.ul-nav-card-item.disabled .ul-nav-card-item-icon {
   background-color: #908b8b;
 
 }
+
+.ul-card-data-container {
+  display  : flex;
+  flex-wrap: wrap;
+}
+
+.ul-card-data {
+  display      : inline-block;
+  border       : 1px solid #eee;
+  border-radius: 5px;
+  padding      : 15px;
+  margin-right : 15px;
+  margin-bottom: 15px;
+  height       : 70px;
+}
+
+.ul-card-data-a-title {
+  padding-bottom: 15px;
+  color         : #6cf;
+  font-size     : 28px;
+}
+
+.ul-card-data-a-item {
+  display     : inline-block;
+  margin-right: 5px;
+}
+
+.ul-card-data-b-icon {
+  display         : inline-block;
+  margin-right    : 15px;
+  font-size       : 46px;
+  background-color: #6cf;
+  padding         : 8px;
+  color           : #fff;
+  border-radius   : 5px;
+}
+
+.ul-card-data-b-info {
+  display     : inline-block;
+  margin-right: 15px;
+
+}
+
+.ul-card-data-b-value {
+  font-size : 28px;
+  color     : #6cf;
+  margin-top: 5px;
+}
+
+.ul-card-data-b-main {
+  display    : flex;
+  align-items: center;
+}
+
+.ul-card-data-b-title {
+  line-height: 24px;
+}
+
+
+.ul-card-data-c-item {
+  display   : inline-block;
+  padding   : 10px 40px;
+  text-align: center;
+  color     : #999;
+}
+
+.ul-card-data-c-item:not(:last-child) {
+  border-right: 1px solid #ddd;
+
+}
+
+.ul-card-data-c-value {
+  font-size  : 18px;
+  line-height: 30px;
+}
+
+.ul-card-data-c-title {
+  font-size: 12px;
+}