From 1bc59b0092bccda5787ff664cf95c55bf74441ad Mon Sep 17 00:00:00 2001 From: zhangds Date: Thu, 30 May 2024 17:38:23 +0800 Subject: [PATCH] 2 --- detail-style.css | 96 ++++++++++++++++++++++++++++++++++++++++++++++-- detail.html | 47 +++++++++++++++++++++++- 2 files changed, 138 insertions(+), 5 deletions(-) diff --git a/detail-style.css b/detail-style.css index 0eb9857..c336a69 100644 --- a/detail-style.css +++ b/detail-style.css @@ -14,8 +14,96 @@ .header { width: 100%; height: 3.4rem; - background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/detail-bg.png") - no-repeat; - background-size: 100%; - margin-top: -0.88rem; + position: relative; +} + +.header > img { + position: absolute; + top: -0.88rem; + z-index: 1; +} + +.detail-box { + position: relative; + z-index: 2; + padding: 0.18rem 0.12rem; +} + +.order-status { + color: #ffffff; + font-size: 0.16rem; +} + +.goods-info { + width: 3.5rem; + height: 1.34rem; + background-color: #ffffff; + border-radius: 0.15rem; + margin: 0.24rem auto; + padding: 0.18rem 0.12rem; +} + +.goods-title, +.order-title { + font-weight: 500; + font-size: 0.16rem; + color: #151517; + line-height: 0.16rem; + padding-bottom: 0.18rem; +} + +.goods-info-box { + display: flex; + align-items: center; +} + +.goods-info-box > img { + width: 0.64rem; + height: 0.64rem; + outline: 1px solid red; +} + +.goods-info-box .name { + font-size: 0.16rem; + color: #151517; + line-height: 0.16rem; +} + +.goods-info-box .type { + font-weight: 300; + font-size: 0.14rem; + color: #999999; + line-height: 0.16rem; + padding-top: 0.09rem; +} + +.goods-info-box .num { + font-size: 0.12rem; + color: #151517; + line-height: 0.16rem; + margin-left: auto; +} + +.order-info { + width: 3.5rem; + height: 1.82rem; + background-color: #ffffff; + border-radius: 0.15rem; + margin: -0.24rem auto 0 auto; + padding: 0.18rem 0.12rem; + position: relative; + z-index: 3; +} + +.order-list { + display: flex; + justify-content: space-between; + padding-bottom: 0.15rem; +} + +.order-list span { + font-weight: 300; + font-size: 0.14rem; + color: #504e5a; + line-height: 0.16rem; } diff --git a/detail.html b/detail.html index d93887f..950a01b 100644 --- a/detail.html +++ b/detail.html @@ -30,7 +30,52 @@
-
+
+ + +
+

充值成功

+
+

商品信息

+ +
+ +
+

爱奇艺黄金VIP会员月卡

+

VIP会员 1个月

+
+

x1

+
+
+
+ +
+

订单信息

+ +
+ 订单编号 + 20249990000999909 +
+ +
+ 充值账号 + 13556666999 +
+ +
+ 充值时间 + 2024-05-29 09:37 +
+ +
+ 充值状态 + 充值成功 +
+
+ + +