Ant Design Pro V5 默认的登录页面功能繁多,而实际项目需要精简一下。
修改项
- 去掉手机号登录。因为不想加短信验证功能。
- 去掉底部的其他登录方式
- 去掉忘记密码
- 修改标题
修改文件
src/pages/user/Login/index.tsx
去掉手机登录
删除 Tab 选项卡
- <Tabs.TabPane
- key="mobile"
- tab={intl.formatMessage({
- id: 'pages.login.phoneLogin.tab',
- defaultMessage: '手机号登录',
- })}
- />
同时删除 type 为 mobile 这一段:
{type === 'mobile' && (
...
}
去掉其他登录方式
- <Space className={styles.other}>
- <FormattedMessage id="pages.login.loginWith" defaultMessage="其他登录方式" />
- <AlipayCircleOutlined className={styles.icon} />
- <TaobaoCircleOutlined className={styles.icon} />
- <WeiboCircleOutlined className={styles.icon} />
- </Space>
去掉忘记密码
- <a
- style={{
- float: 'right',
- }}
- >
- <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
- </a>
修改标题
@@ -95,11 +95,11 @@ const Login: React.FC = () => {
<div className={styles.header}>
<Link to="/">
<img alt="logo" className={styles.logo} src="/logo.svg" />
- <span className={styles.title}>Ant Design</span>
+ <span className={styles.title}>大象笔记</span>
</Link>
</div>
<div className={styles.desc}>
- {intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
+ 宇宙无敌大象
</div>
</div>
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式