前言

登录页面代码和样式，不多描述，直接看图

登录分为账号密码登录和手机登录，使用tabs切换。

一、登录

1.index.tsx页面

代码如下（示例）：

import { Form, Input, Button, Tabs, Row, Col } from 'antd';
import { Footer } from 'antd/lib/layout/layout';
import React from 'react';
import styles from './index.module.less';const onFinish = (values: any) => {console.log('Received values of form: ', values);
};const { TabPane } = Tabs;
function callback(key) {console.log(key);
}
export default function Login() {return (<div className={styles.bg}><div className={styles.heard}><div className={styles.cloud}><img src="../logo.png" alt="logo" /></div><h1 className={styles.title}>项目名称</h1></div><div className={styles.login_card}><Tabs type="card" defaultActiveKey="1" onChange={callback} centered style={{ margin: '0 auto' }}><TabPane tab="账户密码登录" key="1"><Formname="normal_login"className="login-form"initialValues={{ remember: true }}onFinish={onFinish}><Form.Itemname="username"rules={[{ required: true, message: '请输入手机号 / 用户名!' }]}style={{ borderBottom: '1px solid #DCDCDC' }}><Input placeholder="请输入手机号 / 用户名" bordered={false} /></Form.Item><Form.Itemname="password"rules={[{ required: true, message: '请输入密码!' }]}style={{ borderBottom: '1px solid #DCDCDC' }}><Inputbordered={false}type="password"placeholder="请输入密码"/></Form.Item><Form.Item><a style={{ color: '#8C8D9B' }} href="">创建账号</a></Form.Item><Form.Item><Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>登录</Button></Form.Item></Form></TabPane><TabPane tab="验证码登录" key="2"><Formname="normal_login"className="login-form"initialValues={{ remember: true }}onFinish={onFinish}><Form.Itemname="phone"rules={[{ required: true, message: '请输入手机号!' }]}style={{ borderBottom: '1px solid #DCDCDC' }}><Input placeholder="请输入手机号" bordered={false} /></Form.Item><Form.Itemname="captcha"rules={[{ required: true, message: '请输入验证码!' }]}style={{ borderBottom: '1px solid #DCDCDC' }}><Row><Col span={18}><Inputbordered={false}type="password"placeholder="请输入验证码"/></Col><Col span={6} style={{ float: 'right' }}><Button type="link" style={{ color: '#151830', fontWeight: 'bold' }}>发送验证码</Button></Col></Row></Form.Item><Form.Item><a style={{ color: '#8C8D9B' }} href="">创建账号</a></Form.Item><Form.Item><Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>登录</Button></Form.Item></Form></TabPane></Tabs><Button size="large" shape="circle"><img src="/weixin.png" alt="微信图片" /></Button></div><Footer className={styles.footer}><text>底部说明</text></Footer></div>)
}

2.index.module.less

代码如下（示例）：

.bg {height: 900px;background: linear-gradient(180deg, #a0d7e7, #6c5dd3);margin: auto;// padding: 200px;text-align: center;justify-content: center;display: flex;align-items: center;
}.login_card {width: 520px;height: 450px;background: #f2f3f7;border-radius: 20px;margin: auto;text-align: center;justify-content: center;padding: 51px 60px;
}.login-button {width: 400px;height: 56px;background: #6c5dd3;border-radius: 12px;
}.heard {position: absolute;display: flex;top: 264px;
}
.title {width: 315px;font-size: 30px;font-family: Arial;font-weight: bold;color: #151830;
}
.cloud {width: 100px;height: 72px;line-height: 72px;background-image: url("../../../../public/img/cloud.png");
}
.cloud img {width: 40px;height: 40px;
}
.footer {width: 100%;height: 12px;font-size: 10px;font-family: Microsoft YaHei;font-weight: 300;color: #151830;background: none;bottom: 34px;left: 0;position: absolute;
}

二，注册

注册页面代码和样式，不多描述，直接看图

1.index.tsx

代码如下（示例）：

import React from 'react';
import { Form, Input, Button, Checkbox, Tabs, Row, Col } from 'antd';
import styles from './index.module.less';
import { Footer } from 'antd/lib/layout/layout';const onFinish = (values: any) => {console.log('Received values of form: ', values);
};
export default function Register() {return (<div className={styles.bg}><div className={styles.heard}><div className={styles.cloud}><img src="../logo.png" alt="logo" /></div><h1 className={styles.title}>系统名称</h1></div><div className={styles.login_card}><Formname="normal_login"className="login-form"initialValues={{ remember: true }}onFinish={onFinish}><Form.Itemname="phone"rules={[{ required: true, message: '请输入手机号!' }]}style={{ borderBottom: '1px solid #DCDCDC' }}><Input placeholder="请输入手机号" bordered={false} /></Form.Item><Form.Itemname="captcha"rules={[{ required: true, message: '请输入验证码!' }]}style={{ borderBottom: '1px solid #DCDCDC' }}><Row><Col span={18}><Inputbordered={false}type="password"placeholder="请输入验证码"/></Col><Col span={6} style={{ float: 'right' }}><Button type="link" style={{ color: '#151830', fontWeight: 'bold' }}>发送验证码</Button></Col></Row></Form.Item><Form.Itemname="password"rules={[{ required: true, message: '请设置密码!' }]}style={{ borderBottom: '1px solid #DCDCDC' }}><Inputbordered={false}type="password"placeholder="请设置密码"/></Form.Item><Form.Itemname="password"rules={[{ required: true, message: '请重复密码!' }]}style={{ borderBottom: '1px solid #DCDCDC' }}><Inputbordered={false}type="password"placeholder="请重复密码"/></Form.Item><Form.Item>已有帐号，<a href="#">点击登录</a></Form.Item><Form.Item><Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>登录</Button></Form.Item><Form.Item name="" valuePropName="checked" style={{ textAlign: 'left' }}><Checkbox style={{ color: '#CCCCCC' }}>我已阅读并同意《<a>用户服务协议</a>》</Checkbox></Form.Item><Button size="large" shape="circle"><img src="../weixin.png" alt="微信图片" /></Button></Form></div><Footer className={styles.footer}><text>底部说明</text></Footer></div>);
}

2.index.module.less

代码如下（示例）：

.bg {height: 900px;background: linear-gradient(180deg, #a0d7e7, #6c5dd3);margin: auto;padding: 150px;text-align: center;justify-content: center;display: flex;align-items: center;
}.login_card {width: 520px;height: 540px;background: #f2f3f7;border-radius: 20px;margin: auto;text-align: center;justify-content: center;padding: 51px 60px;
}.login-button {width: 400px;height: 56px;background: #6c5dd3;border-radius: 12px;
}
.heard {position: absolute;display: flex;top: 218px;
}
.title {width: 315px;font-size: 30px;font-family: Arial;font-weight: bold;color: #151830;
}
.cloud {width: 100px;height: 72px;line-height: 72px;background-image: url("../../../../public/img/cloud.png");
}
.cloud img {width: 40px;height: 40px;
}
.footer {width: 100%;height: 12px;font-size: 10px;font-family: Microsoft YaHei;font-weight: 300;color: #151830;background: none;bottom: 34px;left: 0;position: absolute;
}

总结

好像没啥重点，div垂直居中算个重点吧。

  justify-content: center;display: flex;align-items: center;

完。

Ant Design 编写登录和注册页面相关推荐

前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言定义 Model connect 起来更新state 拥抱变化主题切换更换页面获取当前设备类 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言现在的效果安装 dva-cli 创建新应用预览项目文件结构简单介绍使用 antd做页面定义 ...
在猜年龄的基础上编写登录、注册方法，并且把猜年龄游戏分函数处理
''' 在猜年龄的基础上编写登录.注册方法,并且把猜年龄游戏分函数处理,如 2. 登录函数 3. 注册函数 4. 猜年龄三次函数 5. 选择三次奖品函数 ''' import random def u ...
jsp java servlet_jsp+java ，servlet如何实现用户登录和注册页面
jsp+java servlet实现简单用户登录(使用数据库,包括注册页面) 功能介绍本项目通过使用jsp和servlet实现简单的用户登录.主要逻辑为:如果用户不存在,则首先进行注册(注册信息同步 ...
从0开始写Vue项目-Vue页面主体布局和登录、注册页面
1.从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客一.主体布局 ...
WordPress自定义登录和注册页面样式并且添加验证码
通过一番尝试和验证以及网络搜索,终于实现了WordPress默认的登录和注册界面的样式修改,下面把过程记录下来.笔者主要是通过在主题中添加WordPress的钩子来实现登录和注册界面的样式修改的.Wo ...
前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
vue3 导航守卫（在没有登录时只能一直在登录和注册页面）
记录在学习vue中的一些问题导航守卫,官方文档给出的定义: 你可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ - ...
Java实现登录与注册页面
用java实现的登录与注册页面,实现了客户端(浏览器)到服务器(Tomcat)再到后端(servlet程序)数据的交互.这里在注册页面加入了验证码验证. 注册的html代码,页面非常丑!!请见谅.. ...

Ant Design 编写登录和注册页面

Ant Design编写登录和注册页面

前言

一、登录

1.index.tsx页面

2.index.module.less

二，注册

1.index.tsx

2.index.module.less

总结

Ant Design 编写登录和注册页面相关推荐

最新文章

热门文章