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 @@
-
+
+
+