Showing
5 changed files
with
123 additions
and
1 deletions
apps/pages/single/alipay/form.vue
0 → 100644
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> |
apps/pages/single/alipay/index.js
0 → 100644
apps/statics/image/alipay/bg.jpg
0 → 100644
![](/fe/ufo-app-web/raw/4684668f3745bfd25d73135f5817c2de8e929970/apps/statics/image/alipay/bg.jpg)
442 KB
-
Please register or login to post a comment