diff --git a/demo/pc/card.html b/demo/pc/card.html index cf9752a..61ce22f 100644 --- a/demo/pc/card.html +++ b/demo/pc/card.html @@ -347,4 +347,55 @@ + + +
+ 数据详情卡片-简约 +
+
+
+
+
+ + 奥古斯宏 +
+
+
详情
+
+
+
+
+
+
+ 姓名: +
+
+ 张三 +
+
+ +
+
+ 地址: +
+
+ 内蒙古大兴安岭雷达峰红岸基地 +
+
+ +
+
+ + +
+
+
\ No newline at end of file diff --git a/source/scss/card/_index.scss b/source/scss/card/_index.scss index e1f5a38..0d8b83e 100644 --- a/source/scss/card/_index.scss +++ b/source/scss/card/_index.scss @@ -2,4 +2,5 @@ @import './ul-card-message'; @import './ul-info-card'; @import './ul-card-data-simple'; -@import './ul-card-data-simple-bg-black'; \ No newline at end of file +@import './ul-card-data-simple-bg-black'; +@import './_ul-data-card'; \ No newline at end of file diff --git a/source/scss/card/_ul-data-card.scss b/source/scss/card/_ul-data-card.scss new file mode 100644 index 0000000..8aa324a --- /dev/null +++ b/source/scss/card/_ul-data-card.scss @@ -0,0 +1,51 @@ +.ul-data-card { + margin : 15px; + padding : 15px; + box-shadow : 0 0 3px #bbb; + border-radius: 5px; + + .header { + display : flex; + align-items : center; + justify-content: space-between; + padding-bottom : 10px; + border-bottom : 1px solid #eee; + + } + + .body { + padding: 10px 0; + + .main { + display : flex; + align-items : flex-start; + justify-content: flex-start; + flex-wrap : wrap; + + .item { + min-width : 50%; + display : flex; + align-items : center; + margin-bottom: 10px; + + .item-title { + font-size : 14px; + font-weight: 600; + } + + .item-value { + font-size: 14px; + } + } + } + + } + + .footer { + border-top : 1px solid #eee; + padding-top : 10px; + display : flex; + justify-content: space-between; + align-items : center + } +} \ No newline at end of file