首页

src/app/App.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Layout,Button, Spin, Col, Row, Tabs} from 'antd';
+import {Layout, Button, Spin, Col, Row, Tabs} from 'antd';
 
 import {withRouter} from "react-router-dom";
 
@@ -9,6 +9,7 @@ import {request} from 'graphql-request'
 import {graphqlUrl} from "../config";
 import {SHOW_ALL_CASE} from "../gql";
 import './index.css';
+
 const {Header, Footer, Content} = Layout;
 const TabPane = Tabs.TabPane;
 
@@ -20,6 +21,7 @@ class App extends Component {
             examplesSecond: [],
         }
     }
+
     componentWillMount() {
         this._isMounted = true;
 
@@ -59,75 +61,80 @@ class App extends Component {
                         </div>
                     </Header>
                     <Content>
-                        <Row>
-                            <div className='intro-wrapper'>
-                                <div className="index" >
-                                    <div className="intro" style={{ padding: '30px' }}>
-                                        <Row gutter={16}>
-                                            <Col span={24}>
-                                                <h2>无年费&nbsp;&nbsp;&nbsp;&nbsp;数据完全私有</h2>
-                                                <h3>即刻拥有自己的微信公众号、小程序</h3>
-                                            </Col>
-                                        </Row>
+                        <div className='intro-wrapper'>
+                            <Row>
+                                <Col span={8} offset={12}>
+                                    <div className="intro" style={{padding: '80px 60px 40px 60px'}}>
+                                        <h2>无年费&nbsp;&nbsp;&nbsp;&nbsp;数据完全私有</h2>
+                                        <h3>即刻拥有自己的微信公众号、小程序</h3>
                                     </div>
-                                    <div className="brief">赶紧来试一试吧！</div>
                                     <div className="home-btn">
                                         <Button type="primary" size='large'
-                                                style={{marginRight:'10px'}}
-                                                onClick={()=>{
+                                                style={{marginRight: '10px'}}
+                                                onClick={() => {
                                                     this.props.history.push({
                                                         pathname: `/common`
-                                                    })}}>立即使用
+                                                    })
+                                                }}>立即使用
+                                        </Button>
+                                        <Button type="primary" size='large'
+                                                style={{margin: '0 10px'}}
+                                                onClick={() => {
+                                                    this.props.history.push({
+                                                        pathname: `/common/communication`
+                                                    })
+                                                }}>立即定制
                                         </Button>
                                         <Button size='large'
-                                                style={{marginLeft:'10px'}}
-                                                onClick={()=>{
+                                                style={{marginLeft: '10px'}}
+                                                onClick={() => {
                                                     this.props.history.push({
                                                         pathname: `/developer`
-                                                    })}}>开发设计
+                                                    })
+                                                }}>开发设计
                                         </Button>
                                     </div>
-                                </div>
-                            </div>
-                        </Row>
-
-
-                        <Row>
-                            <Col span={14} offset={5}>
-                                <div className={'cases-show-wrapper'}>
-                                    <div className={'cases-show-title'}>行业模板案例</div>
-                                    <div className={'case-show-tabs'}>
-                                        <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
-                                            <TabPane tab="预约" key="1">
-                                                <div style={{marginLeft: 100}}>
-                                                    {
-                                                        examplesFirst.length === 0 ?
-                                                            <Spin/> :
-                                                            <CasesShow
-                                                                examples={examplesFirst}
-                                                            />
-                                                    }
-                                                </div>
-                                            </TabPane>
-                                            <TabPane tab="电商" key="2">
-                                                <div style={{marginLeft: 100}}>
-                                                    {
-                                                        examplesSecond.length === 0 ?
-                                                            <Spin/> :
-                                                            <CasesShow
-                                                                examples={examplesSecond}
-                                                            />
-                                                    }
-                                                </div>
-                                            </TabPane>
-                                        </Tabs>
+                                    <div className="intro-below" style={{padding: '0 60px'}}>
+                                        <h4>或致电：177 1810 6480</h4>
                                     </div>
-                                </div>
-                            </Col>
-                        </Row>
+                                </Col>
+                            </Row>
+                        </div>
+
+
+                        <div className={'cases-show-wrapper'}>
+                            <div className={'cases-show-title'}>行业模板案例</div>
+                            <div className={'case-show-tabs'}>
+                                <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
+                                    <TabPane tab="预约" key="1">
+                                        <div style={{marginLeft: 100}}>
+                                            {
+                                                examplesFirst.length === 0 ?
+                                                    <Spin/> :
+                                                    <CasesShow
+                                                        examples={examplesFirst}
+                                                    />
+                                            }
+                                        </div>
+                                    </TabPane>
+                                    <TabPane tab="电商" key="2">
+                                        <div style={{marginLeft: 100}}>
+                                            {
+                                                examplesSecond.length === 0 ?
+                                                    <Spin/> :
+                                                    <CasesShow
+                                                        examples={examplesSecond}
+                                                    />
+                                            }
+                                        </div>
+                                    </TabPane>
+                                </Tabs>
+                            </div>
+                        </div>
+
 
                     </Content>
-                    <Footer style={{ textAlign: 'center' }}>
+                    <Footer style={{textAlign: 'center'}}>
                         版权所有 © 2019 栋天科技
                         {/*All right ©2019 Created by Ioobot*/}
                     </Footer>
@@ -140,7 +147,6 @@ class App extends Component {
 export default withRouter(App);
 
 
-
 class CasesShow extends Component {
     constructor(props) {
         super(props);
@@ -157,7 +163,7 @@ class CasesShow extends Component {
         let thisCase = examples[index];
         return (
             <Row>
-                <Col span={12}>
+                <Col span={16}>
                     <Row>
                         <div>
                             <div className={'case-detail-title'}>{thisCase.title}</div>
@@ -171,7 +177,6 @@ class CasesShow extends Component {
                                 />
                                 <div style={{marginTop: 5}}>—— 打开微信扫码体验 ——</div>
                             </div>
-
                         </div>
                     </Row>
                     <Row>
@@ -198,7 +203,7 @@ class CasesShow extends Component {
                         }
                     </Row>
                 </Col>
-                <Col span={6}>
+                <Col span={8}>
                     <div className={'detail-images'}>
                         <img
                             key={thisCase.detailImages[0]}

src/app/index.css

@@ -1,16 +1,53 @@
+.layout {
+    background-color: white;
+}
+
+/* header 相关开始 */
+.logo {
+    width: 25%;
+    height: 31px;
+    padding: 16px 24px 16px 70px;
+    float: left;
+}
+
+.logo img {
+    width: 25%;
+    padding: 0 0 40px 20px
+}
+/* header 结束 */
+
+/* intro 相关开始 */
 .intro-wrapper {
     width: 100%;
+    height: 500px;
+    background: url("https://workbench-1254337200.cos.ap-shanghai.myqcloud.com/bgt2.jpg") no-repeat;
+    background-size: cover;
 }
 
-.index {
-    background-size: contain;
-    background: url("https://workbench-1254337200.cos.ap-shanghai.myqcloud.com/%E9%A6%96%E9%A1%B5%E5%A4%B4%E9%83%A8%E8%83%8C%E6%99%AF.jpg?q-sign-algorithm=sha1&q-ak=AKIDoPe7MMT3NHbGx3recao7QyxTt4WpM2ek&q-sign-time=1550193602;1550195402&q-key-time=1550193602;1550195402&q-header-list=&q-url-param-list=&q-signature=a1633ad47980c4586dfb8dc49c4673bff2c1bec8&x-cos-security-token=07d3ba775e4a66769f7d0c7e3d4ce82f489c123f10001") no-repeat fixed;
+.intro h2 {
+    color: white;
+    font-size: 40px;
+    font-weight: 800;
 }
 
+.intro h3 {
+    color: lightgrey;
+    font-size: 25px;
+    font-weight: 800;
+}
 
+.home-btn {
+    padding: 60px 60px 30px 60px;
+}
 
-/*case 相关开始*/
+.intro-below h4 {
+    color: lightgrey;
+    font-size: 20px;
+    font-weight: 600;
+}
+/* intro 结束 */
 
+/*case 相关开始*/
 .cases-show-wrapper {
     margin-top: 100px;
 }
@@ -23,7 +60,8 @@
 }
 
 .case-show-tabs {
-    margin-top: 60px;
+    width: 60%;
+    margin: 60px auto 0;
 }
 
 .cover-div {
@@ -52,6 +90,7 @@
     width: 100px;
     height: 100px;
 }
+
 .case-detail-title {
     font-weight: bold;
     font-size: 38px;
@@ -67,5 +106,4 @@
     line-height: 30px;
     margin-top: 20px;
 }
-
 /*case 结束*/

src/index.css

@@ -13,76 +13,8 @@ code {
     monospace;
 }
 
-.logo {
-  width: 25%;
-  height: 31px;
-  padding: 16px 24px 16px 70px;
-  float: left;
-}
-.logo img {
-  width: 25%;
-  padding: 0 0 40px 20px
-}
-
 .login {
-  width: 25%;
-  /*color: #ffffff;*/
-  line-height: 31px;
-}
-
-.home-btn {
-    /*background: #fff;*/
-    padding: 24px;
-    min-height: 320px;
-    display: flex;
-    justify-content: center;
-    /*align-items: center;*/
-    margin-top: 20px;
-}
-
-.ant-card-head-title {
-    padding: 16px 0;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    flex: 1 1;
-    display: inline-block;
-    font-weight: 600;
-    color: #1890ff;
-    font-size: 20px;
-}
-
-.brief{
-    text-align: center;
-    font-size: 25px;
-    /*color: #3b3b3c;*/
-    color: #379dfd;
-    margin-top: 200px;
-    font-weight: 600;
-}
-
-.intro p{
-    padding-bottom: 10px;
-    color: black;
-}
-
-.intro .ant-card {
-    background-color: #f4f5f7;
-    min-height: 214px;
-}
-
-.intro h2{
-    text-align: center;
-    color: #fb8238;
-    font-size: 40px;
-    font-weight: 800;
-}
-
-.intro h3{
-    text-align: center;
-    color: #f99e66;
-    font-size: 20px;
-    font-weight: 800;
-}
-
-
+    width: 25%;
+    /*color: #ffffff;*/
+    line-height: 31px;
+}