首页

src/app/App.jsx

@@ -19,6 +19,7 @@ class App extends Component {
         this.state = {
             examplesFirst: [],
             examplesSecond: [],
+            examplesThird: []
         }
     }
 
@@ -27,12 +28,14 @@ class App extends Component {
 
         request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
                 let cases = data.case_by_props;
-                let examplesFirst = cases.filter(case1 => case1.title.includes('预约'));
-                let examplesSecond = cases.filter(case2 => case2.title.includes('服装店'));
+                let examplesFirst = cases.filter(cases => cases.title.includes('预约'));
+                let examplesSecond = cases.filter(cases => cases.title.includes('服装'));
+                let examplesThird = cases.filter(cases => cases.title.includes('少年博览'));
                 if (this._isMounted) {
                     this.setState({
                         examplesFirst,
                         examplesSecond,
+                        examplesThird
                     })
                 }
             }
@@ -45,7 +48,7 @@ class App extends Component {
 
 
     render() {
-        let {examplesFirst, examplesSecond} = this.state;
+        let {examplesFirst, examplesSecond, examplesThird} = this.state;
         const tabStyle = {
             paddingBottom: '50px',
             height: '550px',
@@ -54,7 +57,7 @@ class App extends Component {
 
         return (
             <div>
-                <Layout className="layout">
+                <Layout className="layout-home" style={{minWidth: 1600}}>
                     <Header>
                         <div className="logo-wrapper">
                             <div className='logo'/>
@@ -68,8 +71,9 @@ class App extends Component {
                                         <h2>无年费&nbsp;&nbsp;&nbsp;&nbsp;数据完全私有</h2>
                                         <h3>即刻拥有自己的微信公众号、小程序</h3>
                                     </div>
-                                    <div className="home-btn">
+                                    <div className="home-btn-group">
                                         <Button type="primary" size='large'
+                                                className='home-btn'
                                                 style={{marginRight: '10px'}}
                                                 onClick={() => {
                                                     this.props.history.push({
@@ -78,6 +82,7 @@ class App extends Component {
                                                 }}>立即使用
                                         </Button>
                                         <Button type="primary" size='large'
+                                                className='home-btn'
                                                 style={{margin: '0 10px'}}
                                                 onClick={() => {
                                                     this.props.history.push({
@@ -86,6 +91,7 @@ class App extends Component {
                                                 }}>立即定制
                                         </Button>
                                         <Button size='large'
+                                                className='home-btn'
                                                 style={{marginLeft: '10px'}}
                                                 onClick={() => {
                                                     this.props.history.push({
@@ -128,6 +134,17 @@ class App extends Component {
                                             }
                                         </div>
                                     </TabPane>
+                                    <TabPane tab="杂志" key="3">
+                                        <div style={{marginLeft: 100}}>
+                                            {
+                                                examplesThird.length === 0 ?
+                                                    <Spin/> :
+                                                    <CasesShow
+                                                        examples={examplesThird}
+                                                    />
+                                            }
+                                        </div>
+                                    </TabPane>
                                 </Tabs>
                             </div>
                         </div>

src/app/index.css

@@ -1,4 +1,4 @@
-.layout {
+.layout-home {
     background-color: white;
 }
 
@@ -36,15 +36,20 @@
     font-weight: 800;
 }
 
-.home-btn {
+.home-btn-group {
     padding: 60px 60px 30px 60px;
 }
 
+.home-btn {
+    border-radius: 30px;
+}
+
 .intro-below h4 {
     color: lightgrey;
     font-size: 20px;
     font-weight: 600;
 }
+
 /* intro 结束 */
 
 /*case 相关开始*/