ソースを参照

feat: 登录页加入动画效果

lanjianrong 4 年 前
コミット
7f2b85a9e8
1 ファイル変更13 行追加6 行削除
  1. 13 6
      src/pages/Login/index.tsx

+ 13 - 6
src/pages/Login/index.tsx

@@ -31,10 +31,11 @@ const NormalLoginForm: React.FC<iLoginProps> = () => {
     const { code = -1, data = [] } = await apiProject(projectCode)
     if (code === consts.RET_CODE.SUCCESS) {
       if (data.length && data[0].name) {
-        setState({ ...state, projectInfo: data[0].name })
+        setState({ ...state, projectCode, projectInfo: data[0].name })
+      } else {
+        setState({ ...state, projectCode, projectInfo: '' })
       }
     }
-
   }
 
   const setVisible = (label: boolean) => {
@@ -52,16 +53,22 @@ const NormalLoginForm: React.FC<iLoginProps> = () => {
       // initialValues={{ password: '123456', code : '234' }}
       onFinish={onFinish}
     >
-      <h4>纵横工程建设项目管理系统</h4>
-      <h5 className={[ 'project-title' ].join(' ')} >{state.projectInfo}</h5>
-
+      <h4 key="title">纵横工程建设项目管理系统</h4>
       <QueueAnim >
+        <QueueAnim>
+          {
+            state.projectInfo ?
+              <h5 key="projectInfo" className={[ 'project-title' ].join(' ')} >{state.projectInfo}</h5>
+              : null
+          }
+        </QueueAnim>
+
         <div key="code">
           <Form.Item
             name="code"
             rules={[ { required: true, message: '请输入项目编号!' } ]}
           >
-            <Input placeholder="项目编号" onChange={handleProjectCode} />
+            <Input placeholder="项目编号" onChange={handleProjectCode} autoComplete="off" autoFocus/>
           </Form.Item>
         </div>
         <div key="account">