ddcat1115 8 лет назад
Родитель
Сommit
b55be88ee1

+ 9 - 10
src/components/Result/index.less

@@ -6,9 +6,9 @@
   margin: 0 auto;
 
   .icon {
-    font-size: 64px;
-    line-height: 64px;
-    margin-bottom: 32px;
+    font-size: 72px;
+    line-height: 72px;
+    margin-bottom: 24px;
 
     & > .success {
       color: @success-color;
@@ -20,30 +20,29 @@
   }
 
   .title {
-    font-size: 20px;
+    font-size: 24px;
     color: @heading-color;
     font-weight: 500;
-    line-height: 28px;
-    margin-bottom: 8px;
+    line-height: 32px;
+    margin-bottom: 16px;
   }
 
   .description {
     font-size: 14px;
     line-height: 22px;
     color: @text-color-secondary;
-    margin-bottom: 16px;
+    margin-bottom: 24px;
   }
 
   .extra {
     background: #fafafa;
-    padding: 16px 40px;
-    margin-top: 16px;
+    padding: 24px 40px;
     border-radius: @border-radius-sm;
     text-align: left;
   }
 
   .actions {
-    margin-top: 40px;
+    margin-top: 32px;
 
     button:not(:last-child) {
       margin-right: 8px;

+ 2 - 2
src/routes/List/CardList.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
 import { Link } from 'dva/router';
-import { Card, Avatar, Button, Icon, List } from 'antd';
+import { Card, Button, Icon, List } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
@@ -65,7 +65,7 @@ export default class CardList extends PureComponent {
                 <Card hoverable actions={[<a>操作一</a>, <a>操作二</a>]}>
                   <Link to="/list/card-list">
                     <Card.Meta
-                      avatar={<Avatar size="large" src={item.avatar} />}
+                      avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                       title={item.title}
                       description={(
                         <p className={styles.cardDescription}>

+ 5 - 0
src/routes/List/CardList.less

@@ -27,6 +27,11 @@
   height: 185px;
 }
 
+.cardAvatar {
+  width: 48px;
+  height: 48px;
+}
+
 .cardDescription {
   .textOverflowMulti();
   color: @text-color;

+ 4 - 4
src/routes/User/Login.js

@@ -94,7 +94,7 @@ export default class Login extends Component {
                 })(
                   <Input
                     size="large"
-                    prefix={<Icon type="user" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
+                    prefix={<Icon type="user" className={styles.prefixIcon} />}
                     placeholder="admin"
                   />
                 )}
@@ -107,7 +107,7 @@ export default class Login extends Component {
                 })(
                   <Input
                     size="large"
-                    prefix={<Icon type="lock" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
+                    prefix={<Icon type="lock" className={styles.prefixIcon} />}
                     type="password"
                     placeholder="888888"
                   />
@@ -131,7 +131,7 @@ export default class Login extends Component {
                 })(
                   <Input
                     size="large"
-                    prefix={<Icon type="mobile" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
+                    prefix={<Icon type="mobile" className={styles.prefixIcon} />}
                     placeholder="手机号"
                   />
                 )}
@@ -146,7 +146,7 @@ export default class Login extends Component {
                     })(
                       <Input
                         size="large"
-                        prefix={<Icon type="mail" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
+                        prefix={<Icon type="mail" className={styles.prefixIcon} />}
                         placeholder="验证码"
                       />
                     )}

+ 8 - 0
src/routes/User/Login.less

@@ -12,6 +12,9 @@
         font-size: 16px;
         line-height: 24px;
       }
+      .ant-input-affix-wrapper .ant-input:not(:first-child) {
+        padding-left: 34px;
+      }
     }
   }
 
@@ -27,6 +30,11 @@
     }
   }
 
+  .prefixIcon {
+    font-size: @font-size-base;
+    color: @disabled-color;
+  }
+
   .getCaptcha {
     display: block;
     width: 100%;

+ 1 - 1
src/routes/User/Register.js

@@ -160,7 +160,7 @@ export default class Register extends Component {
           <FormItem help={this.state.help}>
             <Popover
               content={
-                <div>
+                <div style={{ padding: '4px 0' }}>
                   {passwordStatusMap[this.getPasswordStatus()]}
                   {this.renderPasswordProgress()}
                   <p style={{ marginTop: 10 }}>请至少输入 6 个字符。请不要使用容易被猜到的密码。</p>

+ 7 - 3
src/routes/User/RegisterResult.js

@@ -2,9 +2,12 @@ import React from 'react';
 import { Button } from 'antd';
 import { Link } from 'dva/router';
 import Result from '../../components/Result';
+import styles from './RegisterResult.less';
+
+const title = <div className={styles.title}>你的账户:AntDesign@example.com 注册成功</div>;
 
 const actions = (
-  <div>
+  <div className={styles.actions}>
     <Button size="large" type="primary"><a href="">查看邮箱</a></Button>
     <Button size="large"><Link to="/">返回首页</Link></Button>
   </div>
@@ -12,10 +15,11 @@ const actions = (
 
 export default () => (
   <Result
+    className={styles.registerResult}
     type="success"
-    title="你的账户:AntDesign@example.com 注册成功"
+    title={title}
     description="激活邮件已发送到你的邮箱中,邮件有效期为24小时。请及时登录邮箱,点击邮件中的链接激活帐户。"
     actions={actions}
-    style={{ marginTop: 64 }}
+    style={{ marginTop: 56 }}
   />
 );

+ 15 - 0
src/routes/User/RegisterResult.less

@@ -0,0 +1,15 @@
+.registerResult {
+  :global {
+    .anticon {
+      font-size: 64px;
+    }
+  }
+  .title {
+    margin-top: 32px;
+    font-size: 20px;
+    line-height: 28px;
+  }
+  .actions {
+    margin-top: 40px;
+  }
+}