From 9fc2c15a24c2dfd05b1c3b2667a7b787dcf98491 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Wed, 18 Oct 2017 17:57:36 +0800
Subject: [PATCH] update result pages

---
 src/components/Result/demo/classic.md | 32 +++++++++++++++++++--------
 src/components/Result/demo/error.md   | 12 +++++-----
 src/components/Result/index.less      |  4 ++--
 src/routes/Result/Error.js            | 10 ++++-----
 src/routes/Result/Success.js          | 29 +++++++++++++++---------
 5 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/components/Result/demo/classic.md b/src/components/Result/demo/classic.md
index 9d371a2f..3988d958 100644
--- a/src/components/Result/demo/classic.md
+++ b/src/components/Result/demo/classic.md
@@ -12,28 +12,41 @@ import { Button, Row, Col, Icon, Steps } from 'antd';
 const { Step } = Steps;
 
 const desc1 = (
-  <div style={{ fontSize: 14 }}>
-    <div style={{ marginTop: 4, marginBottom: 8 }}>曲丽丽 <Icon type="dingding-o" /></div>
+  <div style={{ fontSize: 12, color: 'rgba(0, 0, 0, 0.45)' }}>
+    <div style={{ margin: '8px 0 4px' }}>
+      曲丽丽<Icon style={{ marginLeft: 8 }} type="dingding-o" />
+    </div>
     <div>2016-12-12 12:32</div>
   </div>
 );
 
 const desc2 = (
-  <div style={{ fontSize: 14 }}>
-    <div style={{ marginTop: 4, marginBottom: 8 }}>周毛毛 <Icon type="dingding-o" style={{ color: '#00A0E9' }} /></div>
+  <div style={{ fontSize: 12 }}>
+    <div style={{ margin: '8px 0 4px' }}>
+      周毛毛<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
+    </div>
     <div><a href="">催一下</a></div>
   </div>
 );
 
 const extra = (
   <div>
-    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.65)', fontWeight: '600', marginBottom: 16 }}>
+    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500', marginBottom: 20 }}>
       项目名称
     </div>
-    <Row style={{ color: 'rgba(0, 0, 0, 0.65)', marginBottom: 20 }}>
-      <Col span={6}>项目 ID：23421</Col>
-      <Col span={6}>负责人：曲丽丽</Col>
-      <Col span={12}>生效时间：2016-12-12 ~ 2017-12-12</Col>
+    <Row style={{ marginBottom: 16 }}>
+      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>项目 ID：</span>
+        23421
+      </Col>
+      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>负责人：</span>
+        曲丽丽
+      </Col>
+      <Col xs={24} sm={24} md={24} lg={24} xl={12}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>生效时间：</span>
+        2016-12-12 ~ 2017-12-12
+      </Col>
     </Row>
     <Steps progressDot current={1}>
       <Step title="创建项目" description={desc1} />
@@ -59,6 +72,7 @@ ReactDOM.render(
     description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。本文字区域可以展示简单的补充说明，如果有类似展示“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
     extra={extra}
     actions={actions}
+    style={{ width: '100%' }}
   />
 , mountNode);
 ````
diff --git a/src/components/Result/demo/error.md b/src/components/Result/demo/error.md
index d6f3a0e3..d668b8b1 100644
--- a/src/components/Result/demo/error.md
+++ b/src/components/Result/demo/error.md
@@ -11,16 +11,16 @@ import { Button, Icon } from 'antd';
 
 const extra = (
   <div>
-    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.65)', fontWeight: '600', marginBottom: 16 }}>
+    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500', marginBottom: 16 }}>
       您提交的内容有如下错误：
     </div>
-    <div style={{ marginBottom: 8 }}>
-      <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle" />您的账户已被冻结
-      <a style={{ marginLeft: 24 }}>立即解冻 <Icon type="right" /></a>
+    <div style={{ marginBottom: 16 }}>
+      <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle-o" />您的账户已被冻结
+      <a style={{ marginLeft: 16 }}>立即解冻 <Icon type="right" /></a>
     </div>
     <div>
-      <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle" />您的账户还不具备申请资格
-      <a style={{ marginLeft: 24 }}>立即升级 <Icon type="right" /></a>
+      <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格
+      <a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
     </div>
   </div>
 );
diff --git a/src/components/Result/index.less b/src/components/Result/index.less
index 68652a9e..661b4af1 100644
--- a/src/components/Result/index.less
+++ b/src/components/Result/index.less
@@ -34,8 +34,8 @@
   }
 
   .extra {
-    background: rgba(245, 245, 245, 0.5);
-    padding: 16px 40px;
+    background: #fafafa;
+    padding: 24px 40px;
     margin-top: 24px;
     border-radius: @border-radius-sm;
     text-align: left;
diff --git a/src/routes/Result/Error.js b/src/routes/Result/Error.js
index 371d4e3b..f633c340 100644
--- a/src/routes/Result/Error.js
+++ b/src/routes/Result/Error.js
@@ -5,16 +5,16 @@ import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
 const extra = (
   <div>
-    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.65)', fontWeight: '600', marginBottom: 16 }}>
+    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500', marginBottom: 16 }}>
       您提交的内容有如下错误：
     </div>
-    <div style={{ marginBottom: 8 }}>
+    <div style={{ marginBottom: 16 }}>
       <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle-o" />您的账户已被冻结
-      <a style={{ marginLeft: 24 }}>立即解冻 <Icon type="right" /></a>
+      <a style={{ marginLeft: 16 }}>立即解冻 <Icon type="right" /></a>
     </div>
     <div>
       <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格
-      <a style={{ marginLeft: 24 }}>立即升级 <Icon type="right" /></a>
+      <a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
     </div>
   </div>
 );
@@ -30,7 +30,7 @@ export default () => (
         description="请核对并修改以下信息后，再重新提交。"
         extra={extra}
         actions={actions}
-        style={{ marginTop: 30, marginBottom: 30 }}
+        style={{ marginTop: 48, marginBottom: 16 }}
       />
     </Card>
   </PageHeaderLayout>
diff --git a/src/routes/Result/Success.js b/src/routes/Result/Success.js
index 2e461460..75a2e2f6 100644
--- a/src/routes/Result/Success.js
+++ b/src/routes/Result/Success.js
@@ -6,8 +6,8 @@ import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 const { Step } = Steps;
 
 const desc1 = (
-  <div style={{ fontSize: 14 }}>
-    <div style={{ margin: '4px 0' }}>
+  <div style={{ fontSize: 12, color: 'rgba(0, 0, 0, 0.45)' }}>
+    <div style={{ margin: '8px 0 4px' }}>
       曲丽丽<Icon style={{ marginLeft: 8 }} type="dingding-o" />
     </div>
     <div>2016-12-12 12:32</div>
@@ -15,8 +15,8 @@ const desc1 = (
 );
 
 const desc2 = (
-  <div style={{ fontSize: 14 }}>
-    <div style={{ margin: '4px 0' }}>
+  <div style={{ fontSize: 12 }}>
+    <div style={{ margin: '8px 0 4px' }}>
       周毛毛<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
     </div>
     <div><a href="">催一下</a></div>
@@ -25,13 +25,22 @@ const desc2 = (
 
 const extra = (
   <div>
-    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.65)', fontWeight: '600', marginBottom: 16 }}>
+    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500', marginBottom: 20 }}>
       项目名称
     </div>
-    <Row style={{ color: 'rgba(0, 0, 0, 0.65)', marginBottom: 20 }}>
-      <Col span={6}>项目 ID：23421</Col>
-      <Col span={6}>负责人：曲丽丽</Col>
-      <Col span={12}>生效时间：2016-12-12 ~ 2017-12-12</Col>
+    <Row style={{ marginBottom: 16 }}>
+      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>项目 ID：</span>
+        23421
+      </Col>
+      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>负责人：</span>
+        曲丽丽
+      </Col>
+      <Col xs={24} sm={24} md={24} lg={24} xl={12}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>生效时间：</span>
+        2016-12-12 ~ 2017-12-12
+      </Col>
     </Row>
     <Steps progressDot current={1}>
       <Step title="创建项目" description={desc1} />
@@ -62,7 +71,7 @@ export default () => (
         “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
         extra={extra}
         actions={actions}
-        style={{ marginTop: 30, marginBottom: 30 }}
+        style={{ marginTop: 48, marginBottom: 16 }}
       />
     </Card>
   </PageHeaderLayout>
-- 
GitLab