From 4458d07933a825e463c0ca3c6d65776d8ba90c6a Mon Sep 17 00:00:00 2001 From: augushong Date: Mon, 4 Apr 2022 11:51:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AE=A2=E5=8D=95=E5=88=97?= =?UTF-8?q?=E8=A1=A8-=E7=AE=80=E7=BA=A6=E5=8D=A1=E7=89=87=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/pc/list.html | 248 +++++++++++------- source/scss/list/_index.scss | 3 +- .../scss/list/_ul-order-list-simple-card.scss | 85 ++++++ view/index/index/index.html | 90 ++++--- 4 files changed, 290 insertions(+), 136 deletions(-) create mode 100644 source/scss/list/_ul-order-list-simple-card.scss diff --git a/demo/pc/list.html b/demo/pc/list.html index 5aaa92d..263a0fe 100644 --- a/demo/pc/list.html +++ b/demo/pc/list.html @@ -1,92 +1,94 @@
头像列表
-
-
-
-
-
- 张三 +
+
+
+
+
+
+ 张三 +
+
+ 深山旅馆电话事件的最新消息 +
+
+ 19:54 +
-
- 深山旅馆电话事件的最新消息 -
-
- 19:54 +
+
+
+
+
+ 张三 +
+
+ 深山旅馆电话事件的最新消息 +
+
+ 19:54 +
-
-
-
-
- 张三 +
+
+
+
+
+ 张三 +
+
+ 深山旅馆电话事件的最新消息 +
+
+ 19:54 +
-
- 深山旅馆电话事件的最新消息 -
-
- 19:54 +
+
+
+
+
+ 张三 +
+
+ 深山旅馆电话事件的最新消息 +
+
+ 19:54 +
-
-
-
-
-
-
- 张三 -
-
- 深山旅馆电话事件的最新消息 -
-
- 19:54 +
+
+
+
+
+ 张三 +
+
+ 深山旅馆电话事件的最新消息 +
+
+ 19:54 +
-
-
-
-
-
- 张三 -
-
- 深山旅馆电话事件的最新消息 -
-
- 19:54 -
-
-
-
-
-
-
-
-
- 张三 -
-
- 深山旅馆电话事件的最新消息 -
-
- 19:54 -
-
-
-
-
-
-
- 张三 -
-
- 深山旅馆电话事件的最新消息 -
-
- 19:54 +
+
+
+
+ 张三 +
+
+ 深山旅馆电话事件的最新消息 +
+
+ 19:54 +
@@ -95,21 +97,22 @@
侧边头像列表 -
- -
-
-
-
-
- 张三 -
-
- 法外狂徒不寂寞 +
+
+
+
+
+
+
+ 张三 +
+
+ 法外狂徒不寂寞 +
-
+
@@ -117,18 +120,20 @@
相册列表
-
-
-
+
+
+
+
+
+
+
周末野外广场树林写真
+
45P+1V
+
相册说明内容
+
-
-
周末野外广场树林写真
-
45P+1V
-
相册说明内容
-
+
-
@@ -400,6 +405,55 @@ + + + + +
+ 订单列表-简约卡片 +
+
+
+
+
奥宏商店
+
处理中
+ +
+
+
+
+ +
+
+
商品名称商品名称商品名称商品名称商品名称商品名称
+
+
+ 500ml +
+
+ 数量×2 +
+
+
+ ￥1300.00 +
+
+
+
+
+
+ 2022年4月4日11:31:24 +
+
+
+ +
取消
+
评价
+
+
+
+
+
\ No newline at end of file diff --git a/source/scss/list/_index.scss b/source/scss/list/_index.scss index 3a8e851..590ada6 100644 --- a/source/scss/list/_index.scss +++ b/source/scss/list/_index.scss @@ -1 +1,2 @@ -@import './ul-avatar-list' \ No newline at end of file +@import './ul-avatar-list'; +@import './ul-order-list-simple-card'; \ No newline at end of file diff --git a/source/scss/list/_ul-order-list-simple-card.scss b/source/scss/list/_ul-order-list-simple-card.scss new file mode 100644 index 0000000..3b6dd43 --- /dev/null +++ b/source/scss/list/_ul-order-list-simple-card.scss @@ -0,0 +1,85 @@ +.ul-order-list-simple-card { + .item { + box-shadow : 0 0 3px #ddd; + border-radius: 2px; + padding : 15px; + margin-bottom: 15px; + } + + .item-header { + display : flex; + align-items : center; + justify-content: space-between; + font-size : 13px; + margin-bottom : 5px; + + .item-header-status { + color: #1E9FFF; + } + } + + .item-body { + margin-top : 10px; + padding-bottom: 10px; + + .item-body-item { + display : flex; + align-items : center; + justify-content: space-between; + padding : 5px 0; + + .item-image { + width : 90px; + height : 90px; + background-size : cover; + background-position: center; + box-shadow : 0 0 2px #999; + + } + + .item-info { + width : calc(100% - 90px - 15px); + margin-left: 15px; + height : 90px; + position : relative; + + .ul-info-title { + font-weight : 500; + font-size : 15px; + margin-bottom : 5px; + text-overflow : -o-ellipsis-lastline; + overflow : hidden; + text-overflow : ellipsis; + display : -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + .ul-info-value { + display : flex; + align-items : center; + justify-content: space-between; + color : #999; + font-size : 14px; + } + + .ul-info-money { + position : absolute; + bottom : 0; + left : 0; + font-size : 15px; + font-weight: 600; + } + } + } + } + + .item-footer { + padding-top : 15px; + margin-top : 5px; + border-top : 1px solid #eee; + display : flex; + align-items : center; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/view/index/index/index.html b/view/index/index/index.html index 180e762..3984582 100644 --- a/view/index/index/index.html +++ b/view/index/index/index.html @@ -123,48 +123,15 @@