home

src/pages/home/index.css

@@ -1,6 +1,14 @@
+.loading-center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
 .guess-wrap {
     background-color: white;
-    min-height: 100px;
+    min-height: 300px;
+    position: relative;
 }
 
 .guess-title {
@@ -14,11 +22,40 @@
 }
 
 .guess-item {
-
+    width: 100%;
+    height: 100%;
 }
 
 .guess-item-img {
     background-size: cover;
-    width: 150px;
-    height: 160px;
+    width: 60%;
+    height: 80%;
+    display: block;
+    margin: 0 auto;
+}
+
+.guess-item-description {
+    margin-top: 10px;
+}
+
+.guess-item-name {
+    font-size: 18px;
+    font-weight: 500;
+    margin-left: 25px;
+    display: inline-block;
+    float: left;
+    color: grey;
+}
+
+.guess-item-price {
+    display: inline-block;
+    color: #397f44;
+    font-size: 20px;
+    font-weight: 600;
+    float: right;
+    margin-right: 25px;
+}
+
+.guess-item-price::before {
+    content: '￥';
 }

src/pages/home/index.js

@@ -1,8 +1,8 @@
 import React, {Component} from 'react'
-import {Grid, Carousel, WhiteSpace, ActivityIndicator, Flex} from 'antd-mobile'
+import {Grid, Carousel, WhiteSpace, ActivityIndicator} from 'antd-mobile'
 import './index.css'
-import {Query} from "react-apollo";
-import gql from "graphql-tag";
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
 import {productbyprops} from "../../utils/gql"
 
 class Home extends Component {
@@ -59,37 +59,45 @@ class Home extends Component {
                         <a
                             key={val}
                             href="http://www.alipay.com"
-                            style={{ display: 'inline-block', width: '100%', height: 'auto', maxHeight: '200px', overflow: 'hidden' }}
+                            style={{
+                                display: 'inline-block',
+                                width: '100%',
+                                height: 'auto',
+                                maxHeight: '200px',
+                                overflow: 'hidden'
+                            }}
                         >
                             <img
                                 src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                                 alt=""
-                                style={{ width: '100%', verticalAlign: 'top' }}
+                                style={{width: '100%', verticalAlign: 'top'}}
                             />
                         </a>
                     ))}
                 </Carousel>
-                <Grid data={data} activeStyle={false} hasLine={false} isCarousel={true}/>
+                <Grid data={data} hasLine={false}/>
                 <WhiteSpace/>
-                <Query query={gql(productbyprops)} variables={{}}>
-                    {
-                        ({loading, error, data}) => {
-                            if (loading) {
+                <div className='guess-wrap'>
+                    <Query query={gql(productbyprops)} variables={{status: '1'}}>
+                        {
+                            ({loading, error, data}) => {
+                                if (loading) {
+                                    return (
+                                        <div className="loading-center">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    )
+                                }
+                                if (error) {
+                                    return 'error!'
+                                }
                                 return (
-                                    <div className="tab-center">
-                                        <ActivityIndicator text="Loading..." size="large"/>z
-                                    </div>
+                                    <Like data={data.productbyprops}/>
                                 )
                             }
-                            if (error) {
-                                return 'error!';
-                            }
-                            return (
-                                <Like data={data.productbyprops}/>
-                            )
                         }
-                    }
-                </Query>
+                    </Query>
+                </div>
             </div>
         )
     }
@@ -99,29 +107,31 @@ export default Home
 
 class Like extends Component {
     constructor(props) {
-        super(props);
-        this.state = {
-
-        }
+        super(props)
+        this.state = {}
     }
 
     render() {
-        let {data} = this.props;
-        console.log(data)
+        let {data} = this.props
+        if (data % 2 !== 0) {
+            data.splice(0, 1)
+        }
         return (
-            <div className='guess-wrap'>
+            <div className='guess-wrapper'>
                 <div className='guess-title'>- 猜你喜欢 -</div>
-                <Flex wrap="wrap">
-                {
-                    data.map(data=>{
-                        return (
-                            <Flex.Item key={data.id}>
-                                <div className='guess-item-img' style={{backgroundImage: "url('"+ data.img + "')"}}/>
-                            </Flex.Item>
-                        )
-                    })
-                }
-                </Flex>
+                <Grid data={data}
+                      columnNum={2}
+                      hasLine={false}
+                      renderItem={dataItem => (
+                          <div key={dataItem.id} className='guess-item'>
+                              <div className='guess-item-img' style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
+                              <div className='guess-item-description'>
+                                  <div className='guess-item-name'>{dataItem.name}</div>
+                                  <div className='guess-item-price'>{dataItem.price}</div>
+                              </div>
+                          </div>
+                      )}
+                />
             </div>
         )
     }