diff --git a/demo/pc/card.html b/demo/pc/card.html index 925d50a..7f81633 100644 --- a/demo/pc/card.html +++ b/demo/pc/card.html @@ -265,4 +265,49 @@ + + +
+ 数据卡片极简 +
+
+
+
+
+ 订单数量 +
+
+ 120 +
+
+ 30% ↑ +
+
+
+
+ 订单数量 +
+
+ 120 +
+
+ 30% ↓ +
+
+
+
+ 线下订单 +
+
+ 120 +
+
+ 30% +
+
+ +
+ +
+
\ No newline at end of file diff --git a/demo/pc/fieldset.html b/demo/pc/fieldset.html index c973ed9..647c74c 100644 --- a/demo/pc/fieldset.html +++ b/demo/pc/fieldset.html @@ -1,9 +1,9 @@
- 字段集区块 - 横线风格 + 简介卡片区块
- 字段集区块 - 横线风格 + 简介卡片区块
内容区域
内容区域
diff --git a/source/scss/_common.scss b/source/scss/_common.scss index 52f93a5..854e267 100644 --- a/source/scss/_common.scss +++ b/source/scss/_common.scss @@ -48,4 +48,9 @@ justify-content: space-between; } + +.ul-mobile-box { + width: 360px; +} + /* 通用类结束 */ \ No newline at end of file diff --git a/source/scss/card/_index.scss b/source/scss/card/_index.scss index a5e0089..01f3da1 100644 --- a/source/scss/card/_index.scss +++ b/source/scss/card/_index.scss @@ -1,3 +1,4 @@ @import './ul-card-simple-icon'; @import './ul-card-message'; -@import './ul-info-card'; \ No newline at end of file +@import './ul-info-card'; +@import './ul-card-data-simple'; \ No newline at end of file diff --git a/source/scss/card/_ul-card-data-simple.scss b/source/scss/card/_ul-card-data-simple.scss new file mode 100644 index 0000000..8bbf61c --- /dev/null +++ b/source/scss/card/_ul-card-data-simple.scss @@ -0,0 +1,36 @@ +.ul-card-data-simple { + display : flex; + align-items : center; + justify-content : flex-start; + background-color: #fff; + + .item { + padding: 15px; + + text-align: left; + + .item-title { + font-size: 12px; + color : #666; + } + + .item-value { + font-size : 16px; + font-weight: 600; + line-height: 30px; + } + + .item-rate { + font-size: 12px; + + } + + .item-rate.up { + color: #FF5722; + } + + .item-rate.down { + color: #1E9FFF; + } + } +} \ No newline at end of file