From b55be88ee17644a6f3076f147236b306483ae5de Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Wed, 25 Oct 2017 22:56:54 +0800
Subject: [PATCH] update styles

---
 src/components/Result/index.less    | 19 +++++++++----------
 src/routes/List/CardList.js         |  4 ++--
 src/routes/List/CardList.less       |  5 +++++
 src/routes/User/Login.js            |  8 ++++----
 src/routes/User/Login.less          |  8 ++++++++
 src/routes/User/Register.js         |  2 +-
 src/routes/User/RegisterResult.js   | 10 +++++++---
 src/routes/User/RegisterResult.less | 15 +++++++++++++++
 8 files changed, 51 insertions(+), 20 deletions(-)
 create mode 100644 src/routes/User/RegisterResult.less

diff --git a/src/components/Result/index.less b/src/components/Result/index.less
index 5e56c0cd..9204f0f6 100644
--- a/src/components/Result/index.less
+++ b/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;
diff --git a/src/routes/List/CardList.js b/src/routes/List/CardList.js
index 26575a76..1fdd1736 100644
--- a/src/routes/List/CardList.js
+++ b/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}>
diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less
index eede4e5f..8d169b90 100644
--- a/src/routes/List/CardList.less
+++ b/src/routes/List/CardList.less
@@ -27,6 +27,11 @@
   height: 185px;
 }
 
+.cardAvatar {
+  width: 48px;
+  height: 48px;
+}
+
 .cardDescription {
   .textOverflowMulti();
   color: @text-color;
diff --git a/src/routes/User/Login.js b/src/routes/User/Login.js
index 95ae7743..ad9fc8a6 100644
--- a/src/routes/User/Login.js
+++ b/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="验证码"
                       />
                     )}
diff --git a/src/routes/User/Login.less b/src/routes/User/Login.less
index 3c29ba0e..53af1321 100644
--- a/src/routes/User/Login.less
+++ b/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%;
diff --git a/src/routes/User/Register.js b/src/routes/User/Register.js
index 0f9d49cf..fbbfbecf 100644
--- a/src/routes/User/Register.js
+++ b/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>
diff --git a/src/routes/User/RegisterResult.js b/src/routes/User/RegisterResult.js
index 77e4e8a4..d85f976c 100644
--- a/src/routes/User/RegisterResult.js
+++ b/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 }}
   />
 );
diff --git a/src/routes/User/RegisterResult.less b/src/routes/User/RegisterResult.less
new file mode 100644
index 00000000..209f8ae2
--- /dev/null
+++ b/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;
+  }
+}
-- 
GitLab