|
|
<template>
|
|
|
<div class="full bg">
|
|
|
|
|
|
<div class="header">
|
|
|
<div class="back-wrapper" @touchend="onBack">
|
|
|
<div class="back"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div style="position: absolute; width: 100%;">
|
|
|
<div class="item account">
|
|
|
<input class="input-class" name="account" placeholder="支付宝帐号"></input>
|
|
|
</div>
|
|
|
|
|
|
<div class="item username">
|
|
|
<input class="input-class" name="username" placeholder="支付宝姓名"></input>
|
|
|
</div>
|
|
|
|
|
|
<div class="item submit">
|
|
|
<div class="btn" @click="onClick"></div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
name: 'AlipayForm',
|
|
|
methods: {
|
|
|
onClick() {
|
|
|
console.log('huangtao');
|
|
|
},
|
|
|
onBack() {
|
|
|
this.$yoho.finishPage({});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.full {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
}
|
|
|
|
|
|
.bg {
|
|
|
background-image: url("~statics/image/alipay/bg.jpg");
|
|
|
background-size: cover;
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.input-class {
|
|
|
width: 480px;
|
|
|
height: 57px;
|
|
|
border: 2px solid #131835;
|
|
|
font-size: 17px;
|
|
|
color: #131835;
|
|
|
padding-left: 15px;
|
|
|
}
|
|
|
|
|
|
.account {
|
|
|
position: absolute;
|
|
|
top: 876px;
|
|
|
}
|
|
|
|
|
|
.username {
|
|
|
position: absolute;
|
|
|
top: 1008px;
|
|
|
}
|
|
|
|
|
|
.submit {
|
|
|
position: absolute;
|
|
|
top: 1156px;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
display: inline-block;
|
|
|
width: 300px;
|
|
|
height: 130px;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 45PX;
|
|
|
padding-left: 20PX;
|
|
|
padding-right: 20PX;
|
|
|
background-color: rgba(1, 1, 1, 0);
|
|
|
|
|
|
.back-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
height: 100%;
|
|
|
width: 60PX;
|
|
|
}
|
|
|
|
|
|
.back {
|
|
|
width: 24PX;
|
|
|
height: 24PX;
|
|
|
background: url(~statics/image/order/back@3x.png) no-repeat;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
}
|
|
|
</style> |
...
|
...
|
|