ソースを参照

update result pages

ddcat1115 8 年 前
コミット
9fc2c15a24

+ 23 - 9
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);
 ````

+ 6 - 6
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>
 );

+ 2 - 2
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;

+ 5 - 5
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>

+ 19 - 10
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>