修改显示

src/app/basicVersion/caseShow/CaseShow.jsx

@@ -96,34 +96,41 @@ class CaseShow extends Component {
         })
     };
 
+    showCustom = (item) => {
+        this.setState({
+            showCustom: true,
+            chosenSchemaID: item
+        })
+    };
+
     render() {
         let {userID, showCustom, chosenSchemaID} = this.state;
 
         return (
             <div id="example-show">
                 <Layout style={{padding: '24px 48px', minHeight: '300px'}}>
-                    <div className={'card card-head'}>
-                        <Card.Grid className={'card-head-item orange-change'} >
-                            <p>我们永久无年费 &nbsp;&nbsp;&nbsp;&nbsp; 告别高成本</p>
-                            <p>省钱、更省心</p>
-                        </Card.Grid>
-                        <Card.Grid className={'card-head-item pink-change'} >
-                            <p>数据完全私有 &nbsp;&nbsp;&nbsp;&nbsp; 安全更可靠</p>
-                            <p>数据分析图表为您提供更细致的服务</p>
-                        </Card.Grid>
-                        <Card.Grid className={'card-head-item blue-change'} >
-                            <p>模板不满意 &nbsp;&nbsp;&nbsp;&nbsp; 快来定制化吧！</p>
-                            <p>上手有困难，联系我们即可</p>
-                            <Button
-                                onClick={() => {
-                                this.props.history.push({
-                                    pathname: `/common/communication`
-                                })}}>立即定制</Button>
-                        </Card.Grid>
-                    </div>
                     {
                         !showCustom ?
                             <div>
+                                <div className={'card card-head'}>
+                                    <Card.Grid className={'card-head-item orange-change'} >
+                                        <p>我们永久无年费 &nbsp;&nbsp;&nbsp;&nbsp; 告别高成本</p>
+                                        <p>省钱、更省心</p>
+                                    </Card.Grid>
+                                    <Card.Grid className={'card-head-item pink-change'} >
+                                        <p>数据完全私有 &nbsp;&nbsp;&nbsp;&nbsp; 安全更可靠</p>
+                                        <p>数据分析图表为您提供更细致的服务</p>
+                                    </Card.Grid>
+                                    <Card.Grid className={'card-head-item blue-change'} >
+                                        <p>模板不满意 &nbsp;&nbsp;&nbsp;&nbsp; 快来定制化吧！</p>
+                                        <p>上手有困难，联系我们即可</p>
+                                        <Button
+                                            onClick={() => {
+                                                this.props.history.push({
+                                                    pathname: `/common/communication`
+                                                })}}>立即定制</Button>
+                                    </Card.Grid>
+                                </div>
                                 <div className={'schema-name'}>
                                     <FormattedMessage id='ioobot case'/>
                                 </div>
@@ -182,7 +189,7 @@ class CaseShow extends Component {
                                                         </Col>
                                                         <Col span={9} style={{padding:'20px'}}>
                                                             {gzh.length ?
-                                                                <CaseShowDetail caseContent={gzh}/>
+                                                                <CaseShowDetail caseContent={gzh} showCustom={this.showCustom}/>
                                                                 :
                                                                 <div>敬请期待</div>
                                                             }
@@ -190,7 +197,7 @@ class CaseShow extends Component {
                                                         </Col>
                                                         <Col span={9} style={{padding:'20px'}}>
                                                             {xcx.length ?
-                                                                <CaseShowDetail caseContent={xcx}/>
+                                                                <CaseShowDetail caseContent={xcx} showCustom={this.showCustom}/>
                                                                 :
                                                                 <div>敬请期待</div>
                                                             }
@@ -270,10 +277,7 @@ class CaseShowDetail extends Component {
                                                 <Button type="primary"
                                                         style={{borderRadius:30}}
                                                         onClick={() => {
-                                                            this.setState({
-                                                                showCustom: true,
-                                                                chosenSchemaID: caseDetail.schema_id.id
-                                                            })
+                                                            this.props.showCustom(caseDetail.schema_id.id);
                                                         }}><FormattedMessage id='Publish immediately'/></Button>
                                             </div>
                                         </div>

src/app/basicVersion/caseShow/UserCustom.js

@@ -3,13 +3,14 @@ import {Link} from 'react-router-dom';
 import {deployAll, graphqlUrl, storeFile, copyCos} from "../../../config";
 import {ADD_APIGROUP, ADD_APIGWPATH, ADD_DEPLOY, ADD_PROJECT, SHOW_CLOUD} from "../../../gql";
 import {CloudConfig} from "../../../login/CloudConfig";
-import {Button, message, Modal, Icon, Steps, Row, Col} from 'antd';
+import {Layout,Button, message, Modal, Icon, Steps, Row, Col} from 'antd';
 import {FormattedMessage} from 'react-intl';
 import {request} from 'graphql-request'
 import {idGen} from "../../../func";
 import axios from 'axios';
 import './index.css';
 
+const {Content} = Layout;
 const Step = Steps.Step;
 axios.defaults.withCredentials = true;
 
@@ -219,38 +220,41 @@ class UserCustom extends Component {
         let {cloudName, customName, disableDeployButton, userID, check, dbKind, bucketName, deployFailed} = this.state;
         let {appId, secretID, secretKey} = this.cloudState;
         return (
-            <div>
-                <div className="column-menu" onClick={() => {
-                    this.props.backToMe()
-                }}>
-                    <Icon type="left" style={{color: '#3187FA'}}/>
-                    <FormattedMessage id="back to case show"/>
+            <Content className="content">
+                <div>
+                    <div className="column-menu" onClick={() => {
+                        this.props.backToMe()
+                    }}>
+                        <Icon type="left" style={{color: '#3187FA'}}/>
+                        <FormattedMessage id="back to case show"/>
+                    </div>
+
+                    <Row>
+                        <Col span={9} offset={2}>
+                            <div className='step-kind'>
+                                发布体验
+                            </div>
+                            <Steps direction="vertical" current={2}>
+                                <Step title=<Step00/> />
+                                <Step title=<Step01/> />
+                            </Steps>
+                        </Col>
+                        <Col span={9} offset={2}>
+                            <div className='step-kind'>
+                                发布上线
+                            </div>
+                            <Steps direction="vertical" current={5}>
+                                <Step title=<Step10/> />
+                                <Step title=<Step11 getCloudDetail={this.getCloudDetail} userID={userID}/> />
+                                <Step title=<Step12/> />
+                                <Step title=<Step13/> />
+                                <Step title=<Step14/> />
+                            </Steps>
+                        </Col>
+                    </Row>
                 </div>
+            </Content>
 
-                <Row>
-                    <Col span={9} offset={2}>
-                        <div className='step-kind'>
-                            发布体验
-                        </div>
-                        <Steps direction="vertical" current={2}>
-                            <Step title=<Step00/> />
-                            <Step title=<Step01/> />
-                        </Steps>
-                    </Col>
-                    <Col span={9} offset={2}>
-                        <div className='step-kind'>
-                            发布上线
-                        </div>
-                        <Steps direction="vertical" current={5}>
-                            <Step title=<Step10/> />
-                            <Step title=<Step11 getCloudDetail={this.getCloudDetail} userID={userID}/> />
-                            <Step title=<Step12/> />
-                            <Step title=<Step13/> />
-                            <Step title=<Step14/> />
-                        </Steps>
-                    </Col>
-                </Row>
-            </div>
         )
     }
 }

src/app/basicVersion/caseShow/index.css

@@ -155,3 +155,14 @@
     text-align: center;
 }
 
+.step-kind {
+    text-align: center;
+    margin: 60px 0;
+    font-size: 30px;
+}
+
+.step-block {
+    height: 120px;
+    font-size: 20px;
+}
+