Authored by TaoHuang

add alipay bg

  1 +<template>
  2 + <div class="full bg">
  3 +
  4 + <div class="header">
  5 + <div class="back-wrapper" @touchend="onBack">
  6 + <div class="back"></div>
  7 + </div>
  8 + </div>
  9 +
  10 + <div style="position: absolute; width: 100%;">
  11 + <div class="item account">
  12 + <input class="input-class" name="account" placeholder="支付宝帐号"></input>
  13 + </div>
  14 +
  15 + <div class="item username">
  16 + <input class="input-class" name="username" placeholder="支付宝姓名"></input>
  17 + </div>
  18 +
  19 + <div class="item submit">
  20 + <div class="btn" @click="onClick"></div>
  21 + </div>
  22 +
  23 + </div>
  24 + </div>
  25 +</template>
  26 +
  27 +<script>
  28 +
  29 +export default {
  30 + name: 'AlipayForm',
  31 + methods: {
  32 + onClick() {
  33 + console.log('huangtao');
  34 + },
  35 + onBack() {
  36 + this.$yoho.finishPage({});
  37 + }
  38 + }
  39 +};
  40 +</script>
  41 +
  42 +<style lang="scss" scoped>
  43 + .full {
  44 + position: absolute;
  45 + top: 0;
  46 + bottom: 0;
  47 + left: 0;
  48 + right: 0;
  49 + }
  50 +
  51 + .bg {
  52 + background-image: url("~statics/image/alipay/bg.jpg");
  53 + background-size: cover;
  54 + }
  55 +
  56 + .item {
  57 + width: 100%;
  58 + text-align: center;
  59 + }
  60 +
  61 + .input-class {
  62 + width: 480px;
  63 + height: 57px;
  64 + border: 2px solid #131835;
  65 + font-size: 17px;
  66 + color: #131835;
  67 + padding-left: 15px;
  68 + }
  69 +
  70 + .account {
  71 + position: absolute;
  72 + top: 876px;
  73 + }
  74 +
  75 + .username {
  76 + position: absolute;
  77 + top: 1008px;
  78 + }
  79 +
  80 + .submit {
  81 + position: absolute;
  82 + top: 1156px;
  83 + }
  84 +
  85 + .btn {
  86 + display: inline-block;
  87 + width: 300px;
  88 + height: 130px;
  89 + }
  90 +
  91 + .header {
  92 + position: absolute;
  93 + width: 100%;
  94 + height: 45PX;
  95 + padding-left: 20PX;
  96 + padding-right: 20PX;
  97 + background-color: rgba(1, 1, 1, 0);
  98 +
  99 + .back-wrapper {
  100 + display: flex;
  101 + align-items: center;
  102 + height: 100%;
  103 + width: 60PX;
  104 + }
  105 +
  106 + .back {
  107 + width: 24PX;
  108 + height: 24PX;
  109 + background: url(~statics/image/order/back@3x.png) no-repeat;
  110 + background-size: cover;
  111 + }
  112 + }
  113 +</style>
  1 +export default [{
  2 + path: '/mapp/alipayform.html',
  3 + name: 'alipayform',
  4 + component: () => import(/* webpackChunkName: "alipayform" */ './form.vue')
  5 +}];
1 import Order from './order'; 1 import Order from './order';
2 import license from './license'; 2 import license from './license';
  3 +import alipay from './alipay';
3 4
4 -export default [...Order, ...license]; 5 +export default [...Order, ...license, ...alipay];
@@ -10,5 +10,8 @@ module.exports = [ @@ -10,5 +10,8 @@ module.exports = [
10 }, 10 },
11 { 11 {
12 route: /mapp\/license\/form.html/, 12 route: /mapp\/license\/form.html/,
  13 + },
  14 + {
  15 + route: /mapp\/alipayform.html/
13 } 16 }
14 ]; 17 ];