# 登陆页UI界面构建
<template>
<view>
<!-- 状态栏, 手机状态栏 -->
<uniStatusBar bgcolor="#ffe933"></uniStatusBar>
<!-- 关闭按钮 -->
<view class="icon iconfont icon-guanbi" @tap="back"></view>
<!-- 引入背景图 -->
<image class="loginhead" src="../../static/common/loginhead.png" lazy-load mode="widthFix"></image>
<!-- 登录 -->
<view class="body">
<!-- <input type="text" class="uni-input common-input" placeholder="昵称/手机号/邮箱" >
<view class="login-input-box">
<input type="text" class="uni-input common-input" placeholder="请输入密码" >
<view class="forget u-f-ajc">忘记密码</view>
</view> -->
<view class="login-input-box">
<view class="phone u-f-ajc">+86</view>
<input type="text" class="uni-input common-input phone-input" placeholder="手机号" >
</view>
<view class="login-input-box">
<input type="text" class="uni-input common-input" placeholder="请输入验证码" >
<view class="forget u-f-ajc yanzhengma">
<view class="u-f-ajc">获取验证码</view>
</view>
</view>
<button class="user-set-btn " :loading="loading" :class="{'user-set-btn-disable':disabled}" type="primary" @tap="submit" :disabled="disabled">登录</button>
</view>
<!-- 登录状态切换 -->
<view class="login-status u-f-ajc login-padding">
验证码登录 <view class="icon iconfont icon-jinru login-font-color"></view>
</view>
<!-- 第三方登录 -->
<view class="other-login-title u-f-ajc login-padding login-font-color">第三方登录</view>
<otherLogin></otherLogin>
<!-- 协议 -->
<view class="login-rule u-f-ajc login-padding login-font-color">
注册即代表您同意 <view>《星城百科协议》</view>
</view>
</view>
</template>
<script>
import uniStatusBar from '../../components/uni-status-bar/uni-status-bar.vue'
import otherLogin from '../../components/home/other-login.vue'
export default {
components: {
uniStatusBar,
otherLogin
},
data() {
return {
disabled: true,
loading:false
}
},
methods: {
// 返回上一步
back() {
uni.navigateBack({
delta:1
})
},
// 提交登录
submit() {
}
}
}
</script>
<style lang="less" scoped>
@import "../../common/form.css";
.login-font-color {
color: #bbb;
}
.login-padding {
padding: 20rpx 0;
}
.icon-guanbi {
position: fixed;
top: 60rpx;
left: 30rpx;
font-size: 40rpx;
font-weight: bold;
color: #332f0a;
z-index: 1;
}
.loginhead {
width: 100%;
}
.other-login-title {
position: relative;
&::before {
content: '';
position: absolute;
background-color: #bbb;
width: 100rpx;
height: 1rpx;
left: 25%;
}
&::after {
content: '';
position: absolute;
background-color: #bbb;
width: 100rpx;
height: 1rpx;
right: 25%;
}
}
.login-input-box {
position: relative;
input {
padding-right: 170rpx;
}
.forget {
position: absolute;
top: 0;
right: 0;
width: 150rpx;
height: 100%;
color: #333;
}
}
.login-input-box {
position: relative;
.phone {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100rpx;
font-weight: bold;
}
.phone-input {
padding-left: 120rpx;
}
}
.yanzhengma {
view {
background-color: #eee;
border-radius: 10rpx;
font-size: 26rpx;
width: 150rpx;
padding: 10rpx 0;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153