jmash-core-mp 0.1.34 → 0.1.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
<!-- 用户信息 -->
|
|
14
14
|
<view class="auth-user-r">
|
|
15
15
|
<view class="user-edit">
|
|
16
|
-
<text class="user-name" style="color: {{ userNameColor }}">{{ userInfo.realName ||
|
|
16
|
+
<text class="user-name" style="color: {{ userNameColor }}">{{ userInfo.realName || userInfo.nickName ||
|
|
17
|
+
'微信用户' }}</text>
|
|
17
18
|
<view class="edit-icon-bg">
|
|
18
19
|
<text class="edit-icon">✎</text>
|
|
19
20
|
</view>
|
|
@@ -91,6 +92,7 @@ createComponent({
|
|
|
91
92
|
}
|
|
92
93
|
};
|
|
93
94
|
onShow(refreshFunc);
|
|
95
|
+
// TODO: 讨论是否改为 checkLogin()，避免 token 过期时"伪登录"导致显示"微信用户"
|
|
94
96
|
const isLogin = computed(() => userStore.accessToken !== '');
|
|
95
97
|
return { resourceUrl, baseUrl, userInfo, userStore, refreshFunc, isLogin };
|
|
96
98
|
},
|
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<slot name="before"></slot>
|
|
3
|
+
<view class="login_box">
|
|
4
|
+
<!-- 头像区域 -->
|
|
5
|
+
<view class="avatar-section">
|
|
6
|
+
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
|
|
7
|
+
<image class="avatar-img" src="{{ avatarUrl || avatar }}" mode="aspectFill" />
|
|
8
|
+
<view class="avatar-badge">
|
|
9
|
+
<text class="badge-icon">✎</text>
|
|
10
|
+
</view>
|
|
11
|
+
</button>
|
|
12
|
+
<text class="avatar-tip">点击更换头像</text>
|
|
13
|
+
</view>
|
|
14
|
+
|
|
15
|
+
<!-- 姓名输入 -->
|
|
16
|
+
<view class="name-section">
|
|
17
|
+
<view class="name-field">
|
|
18
|
+
<text class="field-icon">👤</text>
|
|
19
|
+
<input name="nickname" type="nickname" class="weui-input name-input" placeholder="请输入您的姓名" bindinput="validate"
|
|
20
|
+
wx:model="{{ nameValue }}" />
|
|
21
|
+
</view>
|
|
22
|
+
</view>
|
|
23
|
+
|
|
24
|
+
<button open-type="getPhoneNumber" style="{{ loginStyle }}" bind:getphonenumber="wxPhoneLogin"
|
|
25
|
+
wx:if="{{ agreeStatus && isValidate }}">手机号授权登录</button>
|
|
26
|
+
<button bind:tap="onLogin" style="{{ loginStyle }}" wx:else>授权登录</button>
|
|
27
|
+
<checkbox-group bindchange="agreeChange" class="protocol_agree" wx:if="{{ showPrivacyPolicy }}">
|
|
28
|
+
<label>
|
|
29
|
+
<checkbox value="{{ agreeStatus+'' }}" checked="{{ agreeStatus }}" color="{{ checkedColor }}" />
|
|
30
|
+
已阅读
|
|
31
|
+
<text id="user" style="{{ agreementStyle }}" catch:tap="goPolicyInfo">《用户使用协议》</text>
|
|
32
|
+
<text id="privacy" style="{{ agreementStyle }}" catch:tap="goPolicyInfo">《隐私权政策》</text>
|
|
33
|
+
</label>
|
|
34
|
+
</checkbox-group>
|
|
35
|
+
<slot name="after"></slot>
|
|
36
|
+
</view>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<script lang="ts">
|
|
40
|
+
import { useUserStore } from '../../store/user'
|
|
41
|
+
import mpx, { createComponent, ref } from '@mpxjs/core'
|
|
42
|
+
|
|
43
|
+
createComponent({
|
|
44
|
+
options: {
|
|
45
|
+
multipleSlots: true,
|
|
46
|
+
},
|
|
47
|
+
properties: {
|
|
48
|
+
// 登录按钮样式
|
|
49
|
+
loginStyle: {
|
|
50
|
+
type: String,
|
|
51
|
+
value:
|
|
52
|
+
"width: 100%;background-color: #2563EB;color: #fff;font-size: 15px;",
|
|
53
|
+
},
|
|
54
|
+
// 单选框选中的颜色
|
|
55
|
+
checkedColor: {
|
|
56
|
+
type: String,
|
|
57
|
+
value: "#0551ff",
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
// 协议样式
|
|
61
|
+
agreementStyle: {
|
|
62
|
+
type: String,
|
|
63
|
+
value: "color: #0551ff",
|
|
64
|
+
},
|
|
65
|
+
// 登录后跳转页面
|
|
66
|
+
backurl: {
|
|
67
|
+
type: String,
|
|
68
|
+
value: "/pages/home",
|
|
69
|
+
},
|
|
70
|
+
// 登录后跳转方式 "redirectTo switchTab reLaunch navigateTo"
|
|
71
|
+
linkType: {
|
|
72
|
+
type: String,
|
|
73
|
+
value: "redirectTo",
|
|
74
|
+
},
|
|
75
|
+
// 遮罩层效果
|
|
76
|
+
isShowModel: {
|
|
77
|
+
type: Boolean,
|
|
78
|
+
value: false,
|
|
79
|
+
},
|
|
80
|
+
// 是否显示隐私协议和政策
|
|
81
|
+
showPrivacyPolicy: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
value: true
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
setup(props) {
|
|
87
|
+
let config = getApp().globalData.config || { resourceUrl: '', name: '应用' };
|
|
88
|
+
let agreeStatus = ref(false);
|
|
89
|
+
let nameValue = ref('');
|
|
90
|
+
let avatarUrl = ref('');
|
|
91
|
+
let isValidate = ref(false);
|
|
92
|
+
let userStore = useUserStore();
|
|
93
|
+
let avatar = ref(config.resourceUrl + "/images/components/gray_head2x.png");
|
|
94
|
+
console.log(avatar);
|
|
95
|
+
return {
|
|
96
|
+
agreeStatus,
|
|
97
|
+
nameValue,
|
|
98
|
+
avatarUrl,
|
|
99
|
+
isValidate,
|
|
100
|
+
avatar,
|
|
101
|
+
userStore
|
|
102
|
+
};
|
|
103
|
+
},
|
|
104
|
+
methods: {
|
|
105
|
+
// 协议勾选事件
|
|
106
|
+
agreeChange() {
|
|
107
|
+
this.agreeStatus = !this.agreeStatus;
|
|
108
|
+
this.validate();
|
|
109
|
+
},
|
|
110
|
+
// 跳转隐私协议
|
|
111
|
+
goPolicyInfo(e: any) {
|
|
112
|
+
const id = e.currentTarget.id
|
|
113
|
+
this.triggerEvent("policy", id);
|
|
114
|
+
mpx.navigateTo({
|
|
115
|
+
url: '/jmash/pages/auth/cms-protocol?channelAlias=' + id
|
|
116
|
+
});
|
|
117
|
+
},
|
|
118
|
+
// 头像选择
|
|
119
|
+
onChooseAvatar(e: any) {
|
|
120
|
+
this.avatarUrl = e.detail.avatarUrl;
|
|
121
|
+
this.validate();
|
|
122
|
+
},
|
|
123
|
+
// 验证
|
|
124
|
+
validate() {
|
|
125
|
+
if (!this.nameValue) {
|
|
126
|
+
this.isValidate = false;
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
this.isValidate = true;
|
|
130
|
+
},
|
|
131
|
+
// 登录前验证
|
|
132
|
+
onLogin() {
|
|
133
|
+
console.log(this.agreeStatus);
|
|
134
|
+
if (!this.agreeStatus && this.showPrivacyPolicy) {
|
|
135
|
+
mpx.showModal({
|
|
136
|
+
title: "提示",
|
|
137
|
+
content: "您是否已阅读《用户使用协议》《隐私权政策》？",
|
|
138
|
+
success: (res) => {
|
|
139
|
+
if (res.confirm) {
|
|
140
|
+
this.agreeStatus = true;
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
if (!this.nameValue) {
|
|
146
|
+
mpx.showToast({
|
|
147
|
+
title: "请输入姓名",
|
|
148
|
+
icon: "none",
|
|
149
|
+
duration: 2000,
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
wxPhoneLogin(event: any) {
|
|
154
|
+
let that = this;
|
|
155
|
+
console.log(event);
|
|
156
|
+
if (!this.agreeStatus && this.showPrivacyPolicy) {
|
|
157
|
+
mpx.showModal({
|
|
158
|
+
title: "提示",
|
|
159
|
+
content: "您是否已阅读《用户使用协议》《隐私权政策》？",
|
|
160
|
+
success(res) {
|
|
161
|
+
if (res.confirm) {
|
|
162
|
+
that.agreeStatus = true;
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
});
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
if (!this.nameValue) {
|
|
169
|
+
mpx.showToast({
|
|
170
|
+
title: "请输入姓名",
|
|
171
|
+
icon: "none",
|
|
172
|
+
duration: 2000,
|
|
173
|
+
});
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
if (event.detail.errMsg === "getPhoneNumber:ok") {
|
|
177
|
+
console.log(event.detail.code);
|
|
178
|
+
this.userStore.mpRegister(event.detail.code, this.nameValue).then((resp) => {
|
|
179
|
+
if (resp.status === false) {
|
|
180
|
+
mpx.showToast({
|
|
181
|
+
title: resp.message ? resp.message : "登录失败联系管理员",
|
|
182
|
+
icon: "none",
|
|
183
|
+
duration: 2000,
|
|
184
|
+
});
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
const backurl = decodeURIComponent(this.backurl);
|
|
188
|
+
if (this.linkType === "switchTab") {
|
|
189
|
+
mpx.switchTab({ url: backurl });
|
|
190
|
+
} else if (this.linkType === "navigateTo") {
|
|
191
|
+
mpx.navigateTo({ url: backurl });
|
|
192
|
+
} else if (this.linkType === "redirectTo") {
|
|
193
|
+
mpx.redirectTo({ url: backurl });
|
|
194
|
+
} else {
|
|
195
|
+
mpx.reLaunch({ url: backurl });
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
} else {
|
|
199
|
+
mpx.showToast({
|
|
200
|
+
title: "您已取消授权",
|
|
201
|
+
icon: "none",
|
|
202
|
+
duration: 2000,
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
})
|
|
208
|
+
</script>
|
|
209
|
+
|
|
210
|
+
<style lang="scss">
|
|
211
|
+
@use "../../styles/index.scss" as *;
|
|
212
|
+
|
|
213
|
+
$primary: #07c160;
|
|
214
|
+
$primary-dark: #06ad56;
|
|
215
|
+
$text-1: #111111;
|
|
216
|
+
$text-2: #555555;
|
|
217
|
+
$text-3: #888888;
|
|
218
|
+
$border: #d0d0d0;
|
|
219
|
+
$bg-page: #f2f2f2;
|
|
220
|
+
$bg-card: #ffffff;
|
|
221
|
+
|
|
222
|
+
.login_box {
|
|
223
|
+
padding: 13% 3% 4%;
|
|
224
|
+
display: flex;
|
|
225
|
+
flex-direction: column;
|
|
226
|
+
align-items: center;
|
|
227
|
+
|
|
228
|
+
.login_btn {
|
|
229
|
+
background-color: $blue-color;
|
|
230
|
+
color: $white-color;
|
|
231
|
+
padding: 16px 0;
|
|
232
|
+
width: $width;
|
|
233
|
+
font-size: $font-size;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.protocol_agree {
|
|
237
|
+
color: $font-color-grey-opacity;
|
|
238
|
+
font-size: $font-size;
|
|
239
|
+
margin-top: 20px;
|
|
240
|
+
|
|
241
|
+
text {
|
|
242
|
+
color: $blue-color;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.avatar-section {
|
|
247
|
+
display: flex;
|
|
248
|
+
flex-direction: column;
|
|
249
|
+
align-items: center;
|
|
250
|
+
margin-bottom: 32rpx;
|
|
251
|
+
|
|
252
|
+
.avatar-wrapper {
|
|
253
|
+
position: relative;
|
|
254
|
+
margin: 0;
|
|
255
|
+
padding: 0;
|
|
256
|
+
background: none;
|
|
257
|
+
border: none;
|
|
258
|
+
line-height: 1;
|
|
259
|
+
|
|
260
|
+
.avatar-img {
|
|
261
|
+
width: 120rpx;
|
|
262
|
+
height: 120rpx;
|
|
263
|
+
border-radius: 50%;
|
|
264
|
+
border: 4rpx solid $border;
|
|
265
|
+
display: block;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.avatar-badge {
|
|
269
|
+
position: absolute;
|
|
270
|
+
right: 0;
|
|
271
|
+
bottom: 0;
|
|
272
|
+
width: 36rpx;
|
|
273
|
+
height: 36rpx;
|
|
274
|
+
background: $primary;
|
|
275
|
+
border-radius: 50%;
|
|
276
|
+
border: 3rpx solid $bg-card;
|
|
277
|
+
display: flex;
|
|
278
|
+
align-items: center;
|
|
279
|
+
justify-content: center;
|
|
280
|
+
|
|
281
|
+
.badge-icon {
|
|
282
|
+
font-size: 16rpx;
|
|
283
|
+
color: #fff;
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.avatar-tip {
|
|
289
|
+
margin-top: 16rpx;
|
|
290
|
+
font-size: 20rpx;
|
|
291
|
+
color: $text-3;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.name-section {
|
|
296
|
+
width: 100%;
|
|
297
|
+
margin-bottom: 32rpx;
|
|
298
|
+
|
|
299
|
+
.name-field {
|
|
300
|
+
display: flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
background: $bg-page;
|
|
303
|
+
border-radius: 20rpx;
|
|
304
|
+
padding: 0 28rpx;
|
|
305
|
+
height: 88rpx;
|
|
306
|
+
border: 2rpx solid transparent;
|
|
307
|
+
transition: border-color 0.25s, background-color 0.25s;
|
|
308
|
+
|
|
309
|
+
.field-icon {
|
|
310
|
+
font-size: 32rpx;
|
|
311
|
+
margin-right: 16rpx;
|
|
312
|
+
flex-shrink: 0;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.name-input {
|
|
316
|
+
flex: 1;
|
|
317
|
+
min-width: 0;
|
|
318
|
+
font-size: 28rpx;
|
|
319
|
+
color: $text-1;
|
|
320
|
+
background: transparent;
|
|
321
|
+
border: none;
|
|
322
|
+
outline: none;
|
|
323
|
+
height: 80rpx;
|
|
324
|
+
line-height: 80rpx;
|
|
325
|
+
padding: 0;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.name-input::placeholder {
|
|
329
|
+
font-size: 28rpx;
|
|
330
|
+
color: $text-3;
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.name-field:focus-within {
|
|
335
|
+
border-color: $primary;
|
|
336
|
+
background: $bg-card;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
</style>
|
|
341
|
+
|
|
342
|
+
<script type="application/json">
|
|
343
|
+
{
|
|
344
|
+
"component": true,
|
|
345
|
+
"usingComponents": {}
|
|
346
|
+
}
|
|
347
|
+
</script>
|
|
@@ -1,38 +1,41 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<slot name="before"></slot>
|
|
3
|
-
<view class="
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
<!-- <slot name="before"></slot> -->
|
|
3
|
+
<view class="login-page">
|
|
4
|
+
<view class="login_box">
|
|
5
|
+
<text class="app-name">{{ config.xcxName }}</text>
|
|
6
|
+
<!-- 头像区域 -->
|
|
7
|
+
<view class="avatar-section">
|
|
8
|
+
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
|
|
9
|
+
<image class="avatar-img" src="{{ avatarUrl || avatar }}" mode="aspectFill" />
|
|
10
|
+
<view class="avatar-badge">
|
|
11
|
+
<text class="badge-icon">✎</text>
|
|
12
|
+
</view>
|
|
13
|
+
</button>
|
|
14
|
+
<text class="avatar-tip">点击更换头像</text>
|
|
15
|
+
</view>
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
<!-- 姓名输入 -->
|
|
18
|
+
<view class="name-section">
|
|
19
|
+
<view class="name-field">
|
|
20
|
+
<cube-icon class="field-icon" type="user" size="36rpx" color="#999" />
|
|
21
|
+
<input name="nickname" type="nickname" class="weui-input name-input" placeholder="请输入您的姓名"
|
|
22
|
+
bindinput="validate" wx:model="{{ nameValue }}" />
|
|
23
|
+
</view>
|
|
21
24
|
</view>
|
|
22
|
-
</view>
|
|
23
25
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
<button open-type="getPhoneNumber" style="{{ loginStyle }}" bind:getphonenumber="wxPhoneLogin"
|
|
27
|
+
wx:if="{{ agreeStatus && isValidate }}">手机号授权登录</button>
|
|
28
|
+
<button bind:tap="onLogin" style="{{ loginStyle }}" wx:else>授权登录</button>
|
|
29
|
+
<checkbox-group bindchange="agreeChange" class="protocol_agree" wx:if="{{ showPrivacyPolicy }}">
|
|
30
|
+
<label>
|
|
31
|
+
<checkbox value="{{ agreeStatus+'' }}" checked="{{ agreeStatus }}" color="{{ checkedColor }}" />
|
|
32
|
+
已阅读
|
|
33
|
+
<text id="user" style="{{ agreementStyle }}" catch:tap="goPolicyInfo">《用户使用协议》</text>
|
|
34
|
+
<text id="privacy" style="{{ agreementStyle }}" catch:tap="goPolicyInfo">《隐私权政策》</text>
|
|
35
|
+
</label>
|
|
36
|
+
</checkbox-group>
|
|
37
|
+
<slot name="after"></slot>
|
|
38
|
+
</view>
|
|
36
39
|
</view>
|
|
37
40
|
</template>
|
|
38
41
|
|
|
@@ -45,23 +48,6 @@ createComponent({
|
|
|
45
48
|
multipleSlots: true,
|
|
46
49
|
},
|
|
47
50
|
properties: {
|
|
48
|
-
// 登录按钮样式
|
|
49
|
-
loginStyle: {
|
|
50
|
-
type: String,
|
|
51
|
-
value:
|
|
52
|
-
"width: 100%;background-color: #2563EB;color: #fff;font-size: 15px;",
|
|
53
|
-
},
|
|
54
|
-
// 单选框选中的颜色
|
|
55
|
-
checkedColor: {
|
|
56
|
-
type: String,
|
|
57
|
-
value: "#0551ff",
|
|
58
|
-
},
|
|
59
|
-
|
|
60
|
-
// 协议样式
|
|
61
|
-
agreementStyle: {
|
|
62
|
-
type: String,
|
|
63
|
-
value: "color: #0551ff",
|
|
64
|
-
},
|
|
65
51
|
// 登录后跳转页面
|
|
66
52
|
backurl: {
|
|
67
53
|
type: String,
|
|
@@ -84,21 +70,29 @@ createComponent({
|
|
|
84
70
|
}
|
|
85
71
|
},
|
|
86
72
|
setup(props) {
|
|
87
|
-
|
|
73
|
+
mpx.setNavigationBarTitle({ title: "登录" });
|
|
74
|
+
let config = getApp().globalData.config || { resourceUrl: '', xcxName: '应用' };
|
|
75
|
+
let themeColor = config.themeColor || "#2563EB";
|
|
88
76
|
let agreeStatus = ref(false);
|
|
89
77
|
let nameValue = ref('');
|
|
90
78
|
let avatarUrl = ref('');
|
|
91
79
|
let isValidate = ref(false);
|
|
92
80
|
let userStore = useUserStore();
|
|
93
81
|
let avatar = ref(config.resourceUrl + "/images/components/gray_head2x.png");
|
|
94
|
-
|
|
82
|
+
let loginStyle = "width: 100%;background-color: " + themeColor + ";color: #fff;font-size: 15px;padding:11rpx 0";
|
|
83
|
+
let checkedColor = themeColor;
|
|
84
|
+
let agreementStyle = "color: " + themeColor;
|
|
95
85
|
return {
|
|
96
86
|
agreeStatus,
|
|
97
87
|
nameValue,
|
|
98
88
|
avatarUrl,
|
|
99
89
|
isValidate,
|
|
100
90
|
avatar,
|
|
101
|
-
userStore
|
|
91
|
+
userStore,
|
|
92
|
+
config,
|
|
93
|
+
loginStyle,
|
|
94
|
+
checkedColor,
|
|
95
|
+
agreementStyle
|
|
102
96
|
};
|
|
103
97
|
},
|
|
104
98
|
methods: {
|
|
@@ -175,7 +169,7 @@ createComponent({
|
|
|
175
169
|
}
|
|
176
170
|
if (event.detail.errMsg === "getPhoneNumber:ok") {
|
|
177
171
|
console.log(event.detail.code);
|
|
178
|
-
this.userStore.mpRegister(event.detail.code, this.nameValue).then((resp) => {
|
|
172
|
+
this.userStore.mpRegister(event.detail.code, this.nameValue, this.avatarUrl || this.avatar).then((resp) => {
|
|
179
173
|
if (resp.status === false) {
|
|
180
174
|
mpx.showToast({
|
|
181
175
|
title: resp.message ? resp.message : "登录失败联系管理员",
|
|
@@ -219,12 +213,43 @@ $border: #d0d0d0;
|
|
|
219
213
|
$bg-page: #f2f2f2;
|
|
220
214
|
$bg-card: #ffffff;
|
|
221
215
|
|
|
216
|
+
.login-page {
|
|
217
|
+
position: relative;
|
|
218
|
+
min-height: 100vh;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.back-bar {
|
|
222
|
+
position: fixed;
|
|
223
|
+
top: 88rpx;
|
|
224
|
+
left: 16rpx;
|
|
225
|
+
z-index: 10;
|
|
226
|
+
display: flex;
|
|
227
|
+
align-items: center;
|
|
228
|
+
justify-content: center;
|
|
229
|
+
width: 60rpx;
|
|
230
|
+
height: 60rpx;
|
|
231
|
+
|
|
232
|
+
.back-arrow {
|
|
233
|
+
font-size: 48rpx;
|
|
234
|
+
color: #333;
|
|
235
|
+
line-height: 1;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
222
239
|
.login_box {
|
|
223
|
-
padding:
|
|
240
|
+
padding: 5% 3% 4%;
|
|
224
241
|
display: flex;
|
|
225
242
|
flex-direction: column;
|
|
226
243
|
align-items: center;
|
|
227
244
|
|
|
245
|
+
.app-name {
|
|
246
|
+
font-size: 50rpx;
|
|
247
|
+
color: $text-1;
|
|
248
|
+
margin-bottom: 302rpx;
|
|
249
|
+
margin-top: 78rpx;
|
|
250
|
+
letter-spacing: 3rpx;
|
|
251
|
+
}
|
|
252
|
+
|
|
228
253
|
.login_btn {
|
|
229
254
|
background-color: $blue-color;
|
|
230
255
|
color: $white-color;
|
|
@@ -257,6 +282,10 @@ $bg-card: #ffffff;
|
|
|
257
282
|
border: none;
|
|
258
283
|
line-height: 1;
|
|
259
284
|
|
|
285
|
+
&::after {
|
|
286
|
+
border: none;
|
|
287
|
+
}
|
|
288
|
+
|
|
260
289
|
.avatar-img {
|
|
261
290
|
width: 120rpx;
|
|
262
291
|
height: 120rpx;
|
|
@@ -342,6 +371,8 @@ $bg-card: #ffffff;
|
|
|
342
371
|
<script type="application/json">
|
|
343
372
|
{
|
|
344
373
|
"component": true,
|
|
345
|
-
"usingComponents": {
|
|
374
|
+
"usingComponents": {
|
|
375
|
+
"cube-icon": "@mpxjs/mpx-cube-ui/lib/components/icon/index"
|
|
376
|
+
}
|
|
346
377
|
}
|
|
347
|
-
</script>
|
|
378
|
+
</script>
|