|
@@ -1,17 +1,18 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="login">
|
|
<div class="login">
|
|
|
<div class="tabs">
|
|
<div class="tabs">
|
|
|
- <div class="tab active">设置新密码</div>
|
|
|
|
|
|
|
+ <div class="tab active">修改手机号</div>
|
|
|
|
|
+ <div class="text">修改手机号即同时修改登录账户名称</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <van-form @submit="submit">
|
|
|
|
|
|
|
+ <van-form ref="form" @submit="submit">
|
|
|
<van-field
|
|
<van-field
|
|
|
type="tel"
|
|
type="tel"
|
|
|
name="用户名"
|
|
name="用户名"
|
|
|
- placeholder="请输入用户名"
|
|
|
|
|
|
|
+ placeholder="请输入手机号"
|
|
|
v-model="form.phone"
|
|
v-model="form.phone"
|
|
|
:maxlength="11"
|
|
:maxlength="11"
|
|
|
- :rules="[{ required: true, message: '请填写用户名' }]"
|
|
|
|
|
|
|
+ :rules="[{ required: true, message: '请输入手机号' }]"
|
|
|
>
|
|
>
|
|
|
<template #left-icon>
|
|
<template #left-icon>
|
|
|
<img
|
|
<img
|
|
@@ -42,36 +43,6 @@
|
|
|
</template>
|
|
</template>
|
|
|
</van-field>
|
|
</van-field>
|
|
|
|
|
|
|
|
- <van-field
|
|
|
|
|
- type="password"
|
|
|
|
|
- name="密码"
|
|
|
|
|
- placeholder="请输入密码"
|
|
|
|
|
- v-model="form.password"
|
|
|
|
|
- :rules="[{ required: true, message: '请填写密码' }]"
|
|
|
|
|
- >
|
|
|
|
|
- <template #left-icon>
|
|
|
|
|
- <img
|
|
|
|
|
- :src="require('../../assets/svgs/login_icon_mima.svg')"
|
|
|
|
|
- class="icon"
|
|
|
|
|
- />
|
|
|
|
|
- </template>
|
|
|
|
|
- </van-field>
|
|
|
|
|
-
|
|
|
|
|
- <van-field
|
|
|
|
|
- type="password"
|
|
|
|
|
- name="密码"
|
|
|
|
|
- placeholder="请再次输入密码"
|
|
|
|
|
- v-model="form.password2"
|
|
|
|
|
- :rules="[{ required: true, message: '请再次填写密码' }]"
|
|
|
|
|
- >
|
|
|
|
|
- <template #left-icon>
|
|
|
|
|
- <img
|
|
|
|
|
- :src="require('../../assets/svgs/login_icon_mima.svg')"
|
|
|
|
|
- class="icon"
|
|
|
|
|
- />
|
|
|
|
|
- </template>
|
|
|
|
|
- </van-field>
|
|
|
|
|
-
|
|
|
|
|
<div class="button">
|
|
<div class="button">
|
|
|
<van-button
|
|
<van-button
|
|
|
round
|
|
round
|
|
@@ -117,13 +88,14 @@ export default {
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
.login {
|
|
.login {
|
|
|
- padding: 40px 50px 100px;
|
|
|
|
|
|
|
+ padding: 40px 16px 100px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.van-form {
|
|
|
|
|
+ padding: 0 32px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tabs {
|
|
.tabs {
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
.tab {
|
|
.tab {
|
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
|
color: #c8c9cc;
|
|
color: #c8c9cc;
|
|
@@ -136,6 +108,13 @@ export default {
|
|
|
line-height: 33px;
|
|
line-height: 33px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .text {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #939599;
|
|
|
|
|
+ line-height: 22px;
|
|
|
|
|
+ margin-top: 4px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
.icon {
|