|
|
@@ -3,29 +3,29 @@
|
|
|
<div class="confirm_order_top">
|
|
|
<!-- <img :src="info.status == 'PROCESSING'?require(`@/assets/icon_jiaoyizhong.png`):require(`@/assets/icon_yiwancheng@3x.png`)" alt="" class="confirm_order_top_img">
|
|
|
<div>{{ getLabelName(info.status, statusOptions) }}</div> -->
|
|
|
- <img :src="require(`@/assets/jiaoyichenggong@3x.png`)" alt="" class="confirm_order_top_img">
|
|
|
+ <img :src="require(`@/assets/jiaoyichenggong@3x.png`)" alt="" class="confirm_order_top_img" />
|
|
|
<div class="confirm_order_top_title">
|
|
|
<div class="confirm_order_top_title_one">交易成功</div>
|
|
|
<div class="confirm_order_top_title_two">感谢您的购买</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="order_information">
|
|
|
- <img :src="getImg(changeImgs(info.pic))" alt="" class="order_information_img">
|
|
|
+ <img :src="getImg(changeImgs(info.pic))" alt="" class="order_information_img" />
|
|
|
<div class="order_information_title">
|
|
|
- <div class="order_information_title_one">{{info.name}}</div>
|
|
|
+ <div class="order_information_title_one">{{ info.name }}</div>
|
|
|
<div class="order_information_title_two">
|
|
|
- <img :src="require('@/assets/blockchain@3x.png')" alt="" class="order_information_title_two_img">
|
|
|
- <div class="order_information_title_two_title">{{info.tokenId}}</div>
|
|
|
+ <img :src="require('@/assets/blockchain@3x.png')" alt="" class="order_information_title_two_img" />
|
|
|
+ <div class="order_information_title_two_title">{{ info.tokenId }}</div>
|
|
|
</div>
|
|
|
<!-- <div class="order_information_title_two">{{info.category}}</div> -->
|
|
|
- <div class="order_information_title_number">{{info.minter}}</div>
|
|
|
+ <div class="order_information_title_number">{{ info.minter }}</div>
|
|
|
</div>
|
|
|
- <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
|
|
|
+ <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
|
|
|
</div>
|
|
|
<div class="fee_details">
|
|
|
<div class="fee_details_con">
|
|
|
<div class="fee_details_actual_payment">订单金额</div>
|
|
|
- <div>{{info.price}}元</div>
|
|
|
+ <div>{{ info.price }}元</div>
|
|
|
</div>
|
|
|
<div class="fee_details_con">
|
|
|
<div class="fee_details_actual_payment">交易数量</div>
|
|
|
@@ -49,7 +49,7 @@
|
|
|
</div>
|
|
|
<div class="fee_details_con" v-if="info.paySerialNumber">
|
|
|
<div class="fee_details_actual_payment">支付流水号</div>
|
|
|
- <div>{{info.paySerialNumber}}</div>
|
|
|
+ <div>{{ info.paySerialNumber }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="fee_details">
|
|
|
@@ -235,198 +235,201 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- .confirm_order{
|
|
|
+.confirm_order {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ background: #191d27;
|
|
|
+ // margin-top: 44px;
|
|
|
+ padding: 0px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .confirm_order_top {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- background: #191D27;
|
|
|
- // margin-top: 44px;
|
|
|
- padding: 0px 15px;
|
|
|
+ padding: 36px 0px 39px;
|
|
|
box-sizing: border-box;
|
|
|
- .confirm_order_top{
|
|
|
- width: 100%;
|
|
|
- padding: 36px 0px 39px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .confirm_order_top_img {
|
|
|
+ width: 74px;
|
|
|
+ height: 60px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .confirm_order_top_title_one {
|
|
|
+ font-size: 19px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 26px;
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 1px;
|
|
|
+ }
|
|
|
+ .confirm_order_top_title_two {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order_information {
|
|
|
+ width: 100%;
|
|
|
+ background: #232731;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ .bottom_texture {
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .order_information_img {
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .order_information_title {
|
|
|
+ width: calc(100% - 180px);
|
|
|
+ padding: 28px 0px;
|
|
|
box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- .confirm_order_top_img{
|
|
|
- width: 74px;
|
|
|
- height: 60px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- .confirm_order_top_title_one{
|
|
|
- font-size: 19px;
|
|
|
+ .order_information_title_one {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 16px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 26px;
|
|
|
- margin-top: 8px;
|
|
|
- margin-bottom: 1px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 22px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-bottom: 9px;
|
|
|
}
|
|
|
- .confirm_order_top_title_two{
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 20px;
|
|
|
- opacity: 0.5;
|
|
|
+ .order_information_title_two {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 9px;
|
|
|
+ .order_information_title_two_img {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .order_information_title_two_title {
|
|
|
+ height: 18px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 9px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #725837;
|
|
|
+ line-height: 14px;
|
|
|
+ background: linear-gradient(141deg, #fcdc99 0%, #fce7c8 100%);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-left: -6px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .order_information{
|
|
|
+ // .order_information_title_two{
|
|
|
+ // width: 56px;
|
|
|
+ // height: 22px;
|
|
|
+ // background: rgba(255, 255, 255, 0.1);
|
|
|
+ // border-radius: 4px;
|
|
|
+ // font-size: 12px;
|
|
|
+ // font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ // font-weight: 400;
|
|
|
+ // color: #28B6FF;
|
|
|
+ // line-height: 22px;
|
|
|
+ // text-align: center;
|
|
|
+ // margin-bottom: 16px;
|
|
|
+ // }
|
|
|
+ .order_information_title_number {
|
|
|
width: 100%;
|
|
|
- background: #232731;
|
|
|
- border-radius: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 18px;
|
|
|
+ opacity: 0.5;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fee_details {
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(360deg, #232731 0%, #191d27 100%);
|
|
|
+ border-radius: 0px 0px 20px 20px;
|
|
|
+ padding: 24px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .fee_details_con {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
display: flex;
|
|
|
- position: relative;
|
|
|
- .bottom_texture{
|
|
|
- width: 140px;
|
|
|
- height: 140px;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
- .order_information_img{
|
|
|
- width: 140px;
|
|
|
- height: 140px;
|
|
|
- border-radius: 20px;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
- .order_information_title{
|
|
|
- width: calc(100% - 180px);
|
|
|
- padding: 28px 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- .order_information_title_one{
|
|
|
- width: 100%;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 22px;
|
|
|
- white-space:nowrap;
|
|
|
- overflow:hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- margin-bottom: 9px;
|
|
|
- }
|
|
|
- .order_information_title_two{
|
|
|
- display: flex;
|
|
|
- margin-bottom: 9px;
|
|
|
- .order_information_title_two_img{
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- .order_information_title_two_title{
|
|
|
- height: 18px;
|
|
|
- padding: 2px 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 9px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #725837;
|
|
|
- line-height: 14px;
|
|
|
- background: linear-gradient(141deg, #FCDC99 0%, #FCE7C8 100%);
|
|
|
- border-radius: 4px;
|
|
|
- margin-left: -6px;
|
|
|
- margin-top: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // .order_information_title_two{
|
|
|
- // width: 56px;
|
|
|
- // height: 22px;
|
|
|
- // background: rgba(255, 255, 255, 0.1);
|
|
|
- // border-radius: 4px;
|
|
|
- // font-size: 12px;
|
|
|
- // font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- // font-weight: 400;
|
|
|
- // color: #28B6FF;
|
|
|
- // line-height: 22px;
|
|
|
- // text-align: center;
|
|
|
- // margin-bottom: 16px;
|
|
|
- // }
|
|
|
- .order_information_title_number{
|
|
|
- width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ .order_details {
|
|
|
font-size: 12px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 18px;
|
|
|
- opacity: 0.5;
|
|
|
- white-space:nowrap;
|
|
|
- overflow:hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
+ color: #939599;
|
|
|
}
|
|
|
- }
|
|
|
- .fee_details{
|
|
|
- width: 100%;
|
|
|
- background: linear-gradient(360deg, #232731 0%, #191D27 100%);
|
|
|
- border-radius: 0px 0px 20px 20px;
|
|
|
- padding: 24px 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- .fee_details_con{
|
|
|
- font-size: 14px;
|
|
|
+ .order_details_con {
|
|
|
+ font-size: 12px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 14px;
|
|
|
- .order_details{
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #939599;
|
|
|
- }
|
|
|
- .order_details_con{
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- .fee_details_con:last-child{
|
|
|
- margin-bottom: 0;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
- .fee_details_divider{
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
- .payment_method{
|
|
|
- width: 100%;
|
|
|
- background: #29293F;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 12px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- .payment_method_con{
|
|
|
+ .fee_details_con:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fee_details_divider {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .payment_method {
|
|
|
+ width: 100%;
|
|
|
+ background: #29293f;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 12px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .payment_method_con {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ .payment_method_con_left {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- .payment_method_con_left{
|
|
|
- display: flex;
|
|
|
- .payment_method_title{
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- .payment_method_img{
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-right: 6px;
|
|
|
+ .payment_method_title {
|
|
|
+ margin-top: 2px;
|
|
|
}
|
|
|
}
|
|
|
+ .payment_method_img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
- .fee_details_actual_payment{
|
|
|
- color: #FFFFFF;
|
|
|
- opacity: 0.3;
|
|
|
- }
|
|
|
}
|
|
|
- /deep/ .van-divider::before{
|
|
|
- height: 1px;
|
|
|
- background: #5F646F;
|
|
|
- opacity: 0.2;
|
|
|
- }
|
|
|
+ .fee_details_actual_payment {
|
|
|
+ color: #ffffff;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .van-divider::before {
|
|
|
+ height: 1px;
|
|
|
+ background: #5f646f;
|
|
|
+ opacity: 0.2;
|
|
|
+}
|
|
|
</style>
|