|
|
@@ -99,66 +99,71 @@ export default defineComponent({
|
|
|
render() {
|
|
|
return (
|
|
|
<div class={styles.loginContainer}>
|
|
|
- <div class={styles.loginLeft}>
|
|
|
- <div class={styles.loginHeader}>
|
|
|
- <div class={styles.logo}>
|
|
|
- <img src="/src/pages/login/images/login-logo.png" alt="" />
|
|
|
+ <div class={styles.loginHeader}>
|
|
|
+ <div class={styles.logo}>
|
|
|
+ <img src="/src/assets/home/logo.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <i class={styles.line}></i>
|
|
|
+ <div class={styles.logoName}>乐团管理系统</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class={styles.loginSection}>
|
|
|
+ <div class={styles.formBg}>
|
|
|
+ <img src="/src/pages/login/images/from-bg.png" alt="" />
|
|
|
</div>
|
|
|
- <i class={styles.line}></i>
|
|
|
- <div class={styles.logoName}>乐团管理系统</div>
|
|
|
+ <ElForm ref="loginForm"
|
|
|
+ model={this.loginForm}
|
|
|
+ rules={this.loginRules}
|
|
|
+ class={styles.loginForm}
|
|
|
+ auto-complete="on"
|
|
|
+ label-position="left">
|
|
|
+ <div class={styles.titleContainer}>登录</div>
|
|
|
+ <ElFormItem prop="username"
|
|
|
+ class={styles.logitem}>
|
|
|
+ <span class={styles.svgContainer}>
|
|
|
+ {/* <img class={styles.icon} src="/src/icons/svg/user.svg" alt="" /> */}
|
|
|
+ <SvgIcon class={styles.icon} name="svg-user" color="#fff" />
|
|
|
+ </span>
|
|
|
+ <ElInput ref="username"
|
|
|
+ class={styles.loginInput}
|
|
|
+ v-model={this.loginForm.username}
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ type="text"
|
|
|
+ tabindex="1"
|
|
|
+ auto-complete="off" />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem prop="password"
|
|
|
+ class={styles.logitem}>
|
|
|
+ <span class={styles.svgContainer}>
|
|
|
+ {/* <img class={styles.icon} src="/src/icons/svg/password.svg" alt="" /> */}
|
|
|
+ <SvgIcon class={styles.icon} name="svg-password" color="#fff" />
|
|
|
+ </span>
|
|
|
+ <ElInput
|
|
|
+ ref="password"
|
|
|
+ class={styles.loginInput}
|
|
|
+ v-model={this.loginForm.password}
|
|
|
+ type={this.passwordType}
|
|
|
+ placeholder="请输入密码"
|
|
|
+ tabindex="2"
|
|
|
+ auto-complete="off" />
|
|
|
+ <span class={styles.showPwd} onClick={this.showPwd}>
|
|
|
+ {this.passwordType === 'password' ? <SvgIcon class={styles.icon} name="svg-eye" color="#fff" /> : <SvgIcon class={styles.icon} name="svg-eye-open" color="#fff" />}
|
|
|
+ </span>
|
|
|
+ </ElFormItem>
|
|
|
+ <div class={[!this.loginForm.username || !this.loginForm.password ? styles.disabled : '', styles.loginBtn]}
|
|
|
+ onClick={this.handleLogin}>登录</div>
|
|
|
+ <div class={styles.remberBox} onClick={() => { this.isSaveUserInfo = !this.isSaveUserInfo }}>
|
|
|
+ <div class={[this.isSaveUserInfo ? styles.checked : '', styles.dotWrap]}></div>
|
|
|
+ 记住密码
|
|
|
+ </div>
|
|
|
+ </ElForm>
|
|
|
</div>
|
|
|
<div class={styles.footer}>
|
|
|
Copyright © 2022 管乐迷, Inc.ALL Rights Reserved
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class={styles.loginSection}>
|
|
|
- <ElForm ref="loginForm"
|
|
|
- model={this.loginForm}
|
|
|
- rules={this.loginRules}
|
|
|
- class={styles.loginForm}
|
|
|
- auto-complete="on"
|
|
|
- label-position="left">
|
|
|
- <div class={styles.titleContainer}>登录</div>
|
|
|
- <ElFormItem prop="username"
|
|
|
- class={styles.logitem}>
|
|
|
- <span class={styles.svgContainer}>
|
|
|
- <img class={styles.icon} src="/src/icons/svg/user.svg" alt="" />
|
|
|
- </span>
|
|
|
- <ElInput ref="username"
|
|
|
- class={styles.loginInput}
|
|
|
- v-model={this.loginForm.username}
|
|
|
- placeholder="请输入用户名"
|
|
|
- type="text"
|
|
|
- tabindex="1"
|
|
|
- auto-complete="off" />
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem prop="password"
|
|
|
- class={styles.logitem}>
|
|
|
- <span class={styles.svgContainer}>
|
|
|
- <img class={styles.icon} src="/src/icons/svg/password.svg" alt="" />
|
|
|
- </span>
|
|
|
- <ElInput
|
|
|
- ref="password"
|
|
|
- class={styles.loginInput}
|
|
|
- v-model={this.loginForm.password}
|
|
|
- type={this.passwordType}
|
|
|
- placeholder="请输入密码"
|
|
|
- tabindex="2"
|
|
|
- auto-complete="off" />
|
|
|
- <span class={styles.showPwd} onClick={this.showPwd}>
|
|
|
- { this.passwordType === 'password' ? <img class={styles.icon} src="/src/icons/svg/eye.svg" alt="" /> : <img class={styles.icon} src="/src/icons/svg/eye-open.svg" alt="" /> }
|
|
|
- </span>
|
|
|
- </ElFormItem>
|
|
|
- <div class={styles.remberBox} onClick={() => { this.isSaveUserInfo = !this.isSaveUserInfo }}>
|
|
|
- <div class={[this.isSaveUserInfo ? styles.checked : '', styles.dotWrap]}></div>
|
|
|
- 记住密码
|
|
|
- </div>
|
|
|
- <div class={[!this.loginForm.username || !this.loginForm.password ? styles.disabled : '', styles.loginBtn]}
|
|
|
- onClick={this.handleLogin}>登录</div>
|
|
|
- </ElForm>
|
|
|
-
|
|
|
- </div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
