怎么用Ant?Design编写登录和注册页面

今天主机评测网小编给大家分享一下怎么用AntDesign编写登录和注册页面的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、登录

1.index.tsx页面

代码如下（示例）：

import{Form,Input,Button,Tabs,Row,Col}from'antd';import{Footer}from'antd/lib/layout/layout';importReactfrom'react';importstylesfrom'./index.module.less';constonFinish=(values:any)=>{console.log('Receivedvaluesofform:',values);};const{TabPane}=Tabs;functioncallback(key){console.log(key);}exportdefaultfunctionLogin(){return(<divclassName={styles.bg}><divclassName={styles.heard}><divclassName={styles.cloud}><imgsrc="../logo.png"alt="logo"/></div><h2className={styles.title}>项目名称</h2></div><divclassName={styles.login_card}><Tabstype="card"defaultActiveKey="1"onChange={callback}centeredstyle={{margin:'0auto'}}><TabPanetab="账户密码登录"key="1"><Formname="normal_login"className="login-form"initialValues={{remember:true}}onFinish={onFinish}><Form.Itemname="username"rules={[{required:true,message:'请输入手机号/用户名!'}]}style={{borderBottom:'1pxsolid#DCDCDC'}}><Inputplaceholder="请输入手机号/用户名"bordered={false}/></Form.Item><Form.Itemname="password"rules={[{required:true,message:'请输入密码!'}]}style={{borderBottom:'1pxsolid#DCDCDC'}}><Inputbordered={false}type="password"placeholder="请输入密码"/></Form.Item><Form.Item><astyle={{color:'#8C8D9B'}}href="">创建账号</a></Form.Item><Form.Item><Buttontype="primary"htmlType="submit"blockstyle={{height:'56PX',borderRadius:'12PX'}}>登录</Button></Form.Item></Form></TabPane><TabPanetab="验证码登录"key="2"><Formname="normal_login"className="login-form"initialValues={{remember:true}}onFinish={onFinish}><Form.Itemname="phone"rules={[{required:true,message:'请输入手机号!'}]}style={{borderBottom:'1pxsolid#DCDCDC'}}><Inputplaceholder="请输入手机号"bordered={false}/></Form.Item><Form.Itemname="captcha"rules={[{required:true,message:'请输入验证码!'}]}style={{borderBottom:'1pxsolid#DCDCDC'}}><Row><Colspan={18}><Inputbordered={false}type="password"placeholder="请输入验证码"/></Col><Colspan={6}style={{float:'right'}}><Buttontype="link"style={{color:'#151830',fontWeight:'bold'}}>发送验证码</Button></Col></Row></Form.Item><Form.Item><astyle={{color:'#8C8D9B'}}href="">创建账号</a></Form.Item><Form.Item><Buttontype="primary"htmlType="submit"blockstyle={{height:'56PX',borderRadius:'12PX'}}>登录</Button></Form.Item></Form></TabPane></Tabs><Buttonsize="large"shape="circle"><imgsrc="/weixin.png"alt="微信图片"/></Button></div><FooterclassName={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:51px60px;}.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");}.cloudimg{width:40px;height:40px;}.footer{width:100%;height:12px;font-size:10px;font-family:MicrosoftYaHei;font-weight:300;color:#151830;background:none;bottom:34px;left:0;position:absolute;}

二，注册

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

1.index.tsx

代码如下（示例）：

importReactfrom'react';import{Form,Input,Button,Checkbox,Tabs,Row,Col}from'antd';importstylesfrom'./index.module.less';import{Footer}from'antd/lib/layout/layout';constonFinish=(values:any)=>{console.log('Receivedvaluesofform:',values);};exportdefaultfunctionRegister(){return(<divclassName={styles.bg}><divclassName={styles.heard}><divclassName={styles.cloud}><imgsrc="../logo.png"alt="logo"/></div><h2className={styles.title}>系统名称</h2></div><divclassName={styles.login_card}><Formname="normal_login"className="login-form"initialValues={{remember:true}}onFinish={onFinish}><Form.Itemname="phone"rules={[{required:true,message:'请输入手机号!'}]}style={{borderBottom:'1pxsolid#DCDCDC'}}><Inputplaceholder="请输入手机号"bordered={false}/></Form.Item><Form.Itemname="captcha"rules={[{required:true,message:'请输入验证码!'}]}style={{borderBottom:'1pxsolid#DCDCDC'}}><Row><Colspan={18}><Inputbordered={false}type="password"placeholder="请输入验证码"/></Col><Colspan={6}style={{float:'right'}}><Buttontype="link"style={{color:'#151830',fontWeight:'bold'}}>发送验证码</Button></Col></Row></Form.Item><Form.Itemname="password"rules={[{required:true,message:'请设置密码!'}]}style={{borderBottom:'1pxsolid#DCDCDC'}}><Inputbordered={false}type="password"placeholder="请设置密码"/></Form.Item><Form.Itemname="password"rules={[{required:true,message:'请重复密码!'}]}style={{borderBottom:'1pxsolid#DCDCDC'}}><Inputbordered={false}type="password"placeholder="请重复密码"/></Form.Item><Form.Item>已有帐号，<ahref="#"rel="externalnofollow">点击登录</a></Form.Item><Form.Item><Buttontype="primary"htmlType="submit"blockstyle={{height:'56PX',borderRadius:'12PX'}}>登录</Button></Form.Item><Form.Itemname=""valuePropName="checked"style={{textAlign:'left'}}><Checkboxstyle={{color:'#CCCCCC'}}>我已阅读并同意《<a>用户服务协议</a>》</Checkbox></Form.Item><Buttonsize="large"shape="circle"><imgsrc="../weixin.png"alt="微信图片"/></Button></Form></div><FooterclassName={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:51px60px;}.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");}.cloudimg{width:40px;height:40px;}.footer{width:100%;height:12px;font-size:10px;font-family:MicrosoftYaHei;font-weight:300;color:#151830;background:none;bottom:34px;left:0;position:absolute;}

总结

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

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

以上就是“怎么用AntDesign编写登录和注册页面”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注主机评测网行业资讯频道。

上一篇：elementPlus修改主题色及皮肤设置的方法是什么

下一篇：springboot怎么结合maven实现多模块打包

---