请选择 进入手机版 | 继续访问电脑版

图文精华

【智能合约实战】-16-登录组件(login.jsx)定义

2019-11-29 18:23| 发布者: Amuro| 查看: 20| 评论: 0

登录组件(login.jsx)定义

 

首先我们来到登录组件

 

Login.jsx-1

 

我们打开frontend下面的public/scr/components/login,在里面新建一个login.jsxJsx是组件的默认格式。然后我们来看看登录组件到底有哪些东西。

 

先来看一段模板程序

 

Import react{component} from react

Import {button} from components

 

Class login extends component {

   Render() {

      Return (

          <div classname=login}>

          </div>

      )

   }

}

 

Export default login

 

这一段是比较标准的模板,可以进行一个参考。

 

Login.css

Positionrelative

Margin0auto

Width1366px;

Height:768px

Backgroundurl(,/images/popup_bg.png) center no-repeat;

Background-size:615px

Color#d4cfba;

Font-size:14.5px

Display:flex;

Align-items:center;

Justify-content:center;

Flex-directiong:column;

Transform-origin:top left;

Transition:all 500ms ease-in-out !important;}

.Login>*{

 Margin:0auto

 Padding:0 72px

 Width615px;}

.login.title{

 Position:absolute;

 Top:60px

 Width392px;

 Height:163.5px

 Backgroundurl(./images/game_logo.png);

 Background-size:100%

 ……

 

这些就不用细讲了,高宽尺寸等。

 

我们用模板程序直接就会出来,不需要手动输入,节省时间。

 

第二部分的组件就比较多

Login.jsx-2

  

     <div classname=title>元素之战</div>

     <div classname=description>elemental battles 登录</div>

 

     <div classname=field>

     <label>账号名</label>

     <input type=textname=username placeholder=限小写字母a-z1-5.,最大12个字符 required/>

</div>

 

 

这里有个标题,还有相关登录信息,提示用户。

 

Import react{component} from react

Import {button} from components

 

Class login extends component {

   Render() {

      Return (

          <div classname=login}>

          <div classname=title>元素之战</div>

          <div classname=description>elemental battles 登录</div>

 

<div classname=field>

     <label>账号名</label>

     <input type=textname=username placeholder=限小写字母a-z1-5.,最大12个字符 required/>

 

<div classname=field>

     <label>私钥</label>

     <input type=textname=key required/>

</div>

 

          </div>

      )

   }

}

 

Export default login

 

登录组件的第三部分

 

Login.jsx-3

 

<div classname=field form-error>

</div>

 

<div classname=bottom>

        <button type=submitclassname=green>{CONFIRM}</Button>

</div>

 

 


鲜花

握手

雷人

路过

鸡蛋
精彩评论

沙发等你来坐!

发布文章
返回顶部