用vue写一个支付成功,并且样式美观的页面
时间: 2023-05-19 08:03:15 浏览: 65
好的,以下是一个用 Vue 编写的支付成功页面的示例代码:
```
<template>
<div class="payment-success">
<h1>支付成功!</h1>
<p>您的订单已经成功支付。</p>
<p>订单号:{{ orderId }}</p>
<p>支付金额:{{ amount }} 元</p>
<button @click="goToOrder">查看订单</button>
</div>
</template>
<script>
export default {
name: 'PaymentSuccess',
props: {
orderId: {
type: String,
required: true
},
amount: {
type: Number,
required: true
}
},
methods: {
goToOrder() {
// 跳转到订单详情页
}
}
}
</script>
<style scoped>
.payment-success {
text-align: center;
margin-top: 50px;
font-size: 24px;
color: #333;
}
.payment-success h1 {
font-size: 36px;
margin-bottom: 20px;
}
.payment-success button {
margin-top: 30px;
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #42b983;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.payment-success button:hover {
background-color: #3aa76d;
}
</style>
```
这个页面会显示支付成功的信息,包括订单号和支付金额,并提供一个按钮可以跳转到订单详情页。样式方面,页面使用了一些简单的 CSS 样式,使得页面看起来更美观。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)