|
|
|
|
@ -1,8 +1,27 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="pay"> |
|
|
|
|
<Header fontColor="#000"></Header> |
|
|
|
|
<!-- 支付页面--> |
|
|
|
|
<div class="bg"> |
|
|
|
|
|
|
|
|
|
<Header></Header> |
|
|
|
|
<h1 class="c_fff">感谢您的订购</h1> |
|
|
|
|
</div> |
|
|
|
|
<div class="jz"> |
|
|
|
|
<div class="success"> |
|
|
|
|
<p class="c_1B f_24">您的订单已提交成功</p> |
|
|
|
|
<p class="c_999 f_14">请继续支付，15分钟内未付款，订单将自动取消</p> |
|
|
|
|
<p class="c_999 f_14">如有疑问，请联系客服</p> |
|
|
|
|
<p class="c_1B f_16"><span>1</span><span>4</span><span>:</span><span>5</span><span>2</span></p> |
|
|
|
|
<div class="d-flex btnDiv"> |
|
|
|
|
<div class="dialogButton default c_1B f_12">修改支付方式</div> |
|
|
|
|
<div type="primary" class="dialogButton primary f_12">立即支付</div></div> |
|
|
|
|
</div> |
|
|
|
|
<p class="orderNum f_16"><span class="f_16">订单编号 # </span>GU202301052604844</p> |
|
|
|
|
<p class="date f_16 d-flex"> |
|
|
|
|
<span class="f_16 c_31">下单日期： <span>2023/01/05</span></span> |
|
|
|
|
<span class="f_12 c_888">订单状态： 待付款</span> |
|
|
|
|
<span class="f_12 c_31">数量: 1</span> |
|
|
|
|
<span class="f_12 c_31">总计： ￥9,900</span> |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<Footer></Footer> |
|
|
|
|
</div> |
|
|
|
|
@ -23,15 +42,93 @@ |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<!--<style>--> |
|
|
|
|
<!-- .news .top .middle .router-link-exact-active.router-link-active {--> |
|
|
|
|
<!-- .pay .top .middle .router-link-exact-active.router-link-active {--> |
|
|
|
|
<!-- border-bottom: 2px solid #000;--> |
|
|
|
|
<!-- }--> |
|
|
|
|
<!--</style>--> |
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
@import '../assets/common.css'; |
|
|
|
|
.c_888{ |
|
|
|
|
color: #888; |
|
|
|
|
} |
|
|
|
|
.c_31{ |
|
|
|
|
color: #313131; |
|
|
|
|
} |
|
|
|
|
.btnDiv{ |
|
|
|
|
justify-content: space-around; |
|
|
|
|
.dialogButton { |
|
|
|
|
width: 240px; |
|
|
|
|
height: 40px; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 40px; |
|
|
|
|
transition: all 0.2s; |
|
|
|
|
} |
|
|
|
|
.default { |
|
|
|
|
border: 2px solid #1b1b1b; |
|
|
|
|
color: #1b1b1b; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
border-color: #fff; |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #1b1b1b; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.primary { |
|
|
|
|
background: #1b1b1b; |
|
|
|
|
border: 2px solid #1b1b1b; |
|
|
|
|
color: #e5dfd9; |
|
|
|
|
&:hover { |
|
|
|
|
opacity: 0.8; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pay{ |
|
|
|
|
.bg{ |
|
|
|
|
background-image: url("../assets/bg06.png"); |
|
|
|
|
height: 352px; |
|
|
|
|
line-height: 400px; |
|
|
|
|
text-align: center; |
|
|
|
|
h1{ |
|
|
|
|
font-size: 40px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.jz{ |
|
|
|
|
.success{ |
|
|
|
|
width: 500px; |
|
|
|
|
margin: 60px auto; |
|
|
|
|
p{ |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.f_24{ |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
.f_16{ |
|
|
|
|
span{ |
|
|
|
|
margin-right: 2px; |
|
|
|
|
display: inline-block; |
|
|
|
|
width: 22px; |
|
|
|
|
height: 22px; |
|
|
|
|
line-height: 22px; |
|
|
|
|
background: #EDEDED; |
|
|
|
|
font-weight: 400; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.orderNum{ |
|
|
|
|
color: #313131; |
|
|
|
|
span{ |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.date{ |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.f_16{ |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
