92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="paymentl-header">
|
|||
|
|
<div :class="!codeTpe.switch ? '' : 'code-title'" class="paymentl-header-title"> {{codeTpe.imgType?'支付成功':'支付失败'}} </div>
|
|||
|
|
<img v-if="!codeTpe.switch" class="paymentl-header-img" :src="codeTpe.imgType? cg :sb " alt="">
|
|||
|
|
<div v-else class="paymentl-vue-qr">
|
|||
|
|
<vue-qr v-if="codeTpe.codeValue" :text="codeTpe.codeValue"></vue-qr>
|
|||
|
|
<div class="paymentl-vue-qr-tip">提示：该二维码每隔3分钟自动刷新一次</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import vueQr from 'vue-qr'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
codeTpe: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {
|
|||
|
|
return {
|
|||
|
|
switch: false,
|
|||
|
|
codeValue: '',
|
|||
|
|
imgType:true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
vueQr,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
cg:require('../../../assets/zfcg.png'),
|
|||
|
|
sb:require('../../../assets/zfsb.png'),
|
|||
|
|
type: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
.paymentl-vue-qr img {
|
|||
|
|
width: 324px;
|
|||
|
|
height: 324px;
|
|||
|
|
border-radius: 0px 0px 0px 0px;
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style scoped>
|
|||
|
|
.paymentl-vue-qr-tip {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 30px;
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.paymentl-vue-qr {
|
|||
|
|
width: 690px;
|
|||
|
|
height: 544px;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.5020);
|
|||
|
|
border-radius: 10px 10px 10px 10px;
|
|||
|
|
opacity: 1;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background-image: url('@/assets/codebg.png');
|
|||
|
|
background-size: 100% 428px;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: -25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.paymentl-header {}
|
|||
|
|
|
|||
|
|
.paymentl-header-img {
|
|||
|
|
width: 515px;
|
|||
|
|
height: 245px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-title {
|
|||
|
|
background-color: #ff6700;
|
|||
|
|
color: #FFFFFF !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.paymentl-header-title {
|
|||
|
|
font-size: 42px;
|
|||
|
|
font-family: PingFang SC-粗体, PingFang SC;
|
|||
|
|
font-weight: normal;
|
|||
|
|
color: #333333;
|
|||
|
|
margin: 0px auto;
|
|||
|
|
padding: 50px 0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|