Authored by TaoHuang

add alipay bg

<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>
... ...
export default [{
path: '/mapp/alipayform.html',
name: 'alipayform',
component: () => import(/* webpackChunkName: "alipayform" */ './form.vue')
}];
... ...
import Order from './order';
import license from './license';
import alipay from './alipay';
export default [...Order, ...license];
export default [...Order, ...license, ...alipay];
... ...
... ... @@ -10,5 +10,8 @@ module.exports = [
},
{
route: /mapp\/license\/form.html/,
},
{
route: /mapp\/alipayform.html/
}
];
... ...