From f93e3b2b856367b98f7a66f290ebc6913b6f9689 Mon Sep 17 00:00:00 2001 From: augushong Date: Sat, 22 May 2021 19:23:44 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=85=88=E7=BA=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- demo/card.html | 57 +++++++++++++++++++++++- public/cdn/layui-ul.css | 97 ++++++++++++++++++++++++++++++++++++++--- 3 files changed, 149 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 188ef78..b237967 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ ulthon扩展的layui样式库. - 收藏主流的JS插件 - 使用了部分layui的样式,但是大部分组件不依赖layui. - 依赖layui的部分也很容易替换掉(使用layui的按钮/颜色之类样式). -- 不限制开发终端,只要支持css的都可以使用 +- 不限制开发终端,只要支持css的都可以使用(vue,angular,uni,小程序都可以) ### 使用说明 diff --git a/demo/card.html b/demo/card.html index 483ac92..e7c1b22 100644 --- a/demo/card.html +++ b/demo/card.html @@ -3,7 +3,7 @@
-
+
@@ -97,6 +97,61 @@
+
+
+ + +
+ 数据卡片 +
+
+
+
+ 509778.80 +
+
+
+ + 余额 +
+
+
充值
+
提现
+
记录
+
+
+
+
+
+ +
+ +
+
+
+ 盈亏总额(元) +
+
+ 0.00 +
+
+
+ +
+
+ +
+
+ 0 +
+
+ 余额 +
+ +
+
+ +
\ No newline at end of file diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css index e6792cd..97c7e02 100644 --- a/public/cdn/layui-ul.css +++ b/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; - font-size: 12px; + color : #666; + 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; } \ No newline at end of file