OtherProject
/
Unipay-H5
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2

This commit is contained in:
zhangds 2024-05-30 17:38:23 +08:00
parent 1d10707626
commit 1bc59b0092
2 changed files with 138 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
detail-style.css
View File

@ -14,8 +14,96 @@
.header { .header {
width: 100%; width: 100%;
height: 3.4rem; height: 3.4rem;
background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/detail-bg.png") position: relative;
no-repeat; }
background-size: 100%;
margin-top: -0.88rem; .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;
} }

47
detail.html
View File

@ -30,7 +30,52 @@
<body> <body>
<div id="app"> <div id="app">
<div class="header"></div> <div class="header">
<img src="https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/detail-bg.png"
alt="">
<div class="detail-box">
<p class="order-status">充值成功</p>
<div class="goods-info">
<p class="goods-title">商品信息</p>
<div class="goods-info-box">
<img src="" alt="">
<div style="padding-left: 0.09rem;">
<p class="name">爱奇艺黄金VIP会员月卡</p>
<p class="type">VIP会员 1个月</p>
</div>
<p class="num">x1</p>
</div>
</div>
</div>
<div class="order-info">
<p class="order-title">订单信息</p>
<div class="order-list">
<span>订单编号</span>
<span>20249990000999909</span>
</div>
<div class="order-list">
<span>充值账号</span>
<span>13556666999</span>
</div>
<div class="order-list">
<span>充值时间</span>
<span>2024-05-29 09:37</span>
</div>
<div class="order-list">
<span>充值状态</span>
<span>充值成功</span>
</div>
</div>
</div>
</div> </div>
</body> </body>
<script> <script>