缺少部分样式

src/pages/home/all/index.css

@@ -0,0 +1,55 @@
+.guess-wrap {
+    background-color: white;
+    min-height: 300px;
+    position: relative;
+}
+
+.guess-title {
+    display: block;
+    color: #397f44;
+    font-size: 16px;
+    margin: 0 auto;
+    padding: 20px 0;
+    width: 120px;
+    text-align: center;
+}
+
+.guess-item {
+    width: 100%;
+    height: 100%;
+}
+
+.guess-item-img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    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/all/index.js

@@ -3,6 +3,7 @@ import {productbyprops} from "../../../utils/gql"
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
 import {Grid, Carousel, WhiteSpace, ActivityIndicator} from 'antd-mobile'
+import './index.css'
 
 class All extends Component {
     constructor(props) {

src/pages/home/detail/index.css

@@ -6,6 +6,16 @@
     height: 100%;
 }
 
+.detail-navbar-wrap {
+    width: 100%;
+}
+
+.detail-navbar {
+    /*position: fixed;*/
+    /*top: 0;*/
+    width: 100%;
+}
+
 .detail-simple-show {
     height: 70%;
     background-color: white;

src/pages/home/detail/index.js

@@ -15,14 +15,18 @@ class Detail extends Component {
         let {id, changePageInHome} = this.props
         return (
             <div className='detail-wrap'>
-                <NavBar
-                    mode="light"
-                    icon={<Icon type="left"/>}
-                    onLeftClick={() => changePageInHome('all', {}, false)}
-                    rightContent={[
-                        <Icon key="1" type="ellipsis"/>,
-                    ]}
-                >商品详情</NavBar>
+                <div className='detail-navbar-wrap'>
+                    <NavBar
+                        className='detail-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => changePageInHome('all', {}, false)}
+                        rightContent={[
+                            <Icon key="1" type="ellipsis"/>,
+                        ]}
+                    >商品详情</NavBar>
+                </div>
+
                 <Query query={gql(productbyid)} variables={{id}}>
                     {
                         ({loading, error, data}) => {

src/pages/home/index.css

@@ -3,60 +3,4 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-}
-
-.guess-wrap {
-    background-color: white;
-    min-height: 300px;
-    position: relative;
-}
-
-.guess-title {
-    display: block;
-    color: #397f44;
-    font-size: 16px;
-    margin: 0 auto;
-    padding: 20px 0;
-    width: 120px;
-    text-align: center;
-}
-
-.guess-item {
-    width: 100%;
-    height: 100%;
-}
-
-.guess-item-img {
-    background-size: cover;
-    background-repeat: no-repeat;
-    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/kind/index.css

@@ -0,0 +1,84 @@
+.kind-wrap {
+    height: 100%
+}
+
+.kind-search-wrap {
+    height: 8%;
+    position: relative;
+    z-index: 100;
+}
+
+.kind-search {
+    height: 65%;
+    width: 90%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.kind-wrapper {
+    height: 100%;
+    background-color: white;
+    position: relative;
+}
+
+.kind-navbar-wrap {
+    width: 100%;
+}
+
+.kind-navbar {
+    /*position: fixed;*/
+    /*top: 0;*/
+    width: 100%;
+}
+
+.kind-title {
+    display: block;
+    color: #397f44;
+    font-size: 16px;
+    margin: 0 auto;
+    padding: 20px 0;
+    width: 120px;
+    text-align: center;
+}
+
+.kind-item {
+    width: 100%;
+    height: 100%;
+}
+
+.kind-item-img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 60%;
+    height: 80%;
+    display: block;
+    margin: 0 auto;
+}
+
+.kind-item-description {
+    margin-top: 10px;
+}
+
+.kind-item-name {
+    font-size: 18px;
+    font-weight: 500;
+    margin-left: 25px;
+    display: inline-block;
+    float: left;
+    color: grey;
+}
+
+.kind-item-price {
+    display: inline-block;
+    color: #397f44;
+    font-size: 20px;
+    font-weight: 600;
+    float: right;
+    margin-right: 25px;
+}
+
+.kind-item-price::before {
+    content: '￥';
+}

src/pages/home/kind/index.js

@@ -1,5 +1,12 @@
 import React, {Component} from 'react'
-import {NavBar, Icon} from 'antd-mobile'
+import {NavBar, Icon, ActivityIndicator, Grid} from 'antd-mobile'
+import {Input} from 'antd'
+import './index.css'
+import {productbyprops} from "../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+
+const Search = Input.Search
 
 class Kind extends Component {
     constructor(props) {
@@ -10,18 +17,83 @@ class Kind extends Component {
     render() {
         let {id, changePageInHome} = this.props
         return (
-            <div>
-                <NavBar
-                    mode="light"
-                    icon={<Icon type="left"/>}
-                    onLeftClick={() => changePageInHome('all', {}, false)}
-                    rightContent={[
-                        <Icon key="1" type="ellipsis"/>,
-                    ]}
-                >商品分类</NavBar>
+            <div className='kind-wrap'>
+                <div className='kind-navbar-wrap'>
+                    <NavBar
+                        className='kind-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => changePageInHome('all', {}, false)}
+                        rightContent={[
+                            <Icon key="1" type="ellipsis"/>,
+                        ]}
+                    >商品分类</NavBar>
+                </div>
+                <div className='kind-search-wrap'>
+                    <Search
+                        className='kind-search'
+                        placeholder="请输入搜索内容"
+                        onSearch={value => console.log(value)}
+                    />
+                </div>
+                <Query query={gql(productbyprops)} variables={{intro: id}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+                            return (
+                                <KindRender
+                                    data={data.productbyprops}
+                                    changePageInHome={changePageInHome}
+                                />
+                            )
+                        }
+                    }
+                </Query>
+
             </div>
         )
     }
 }
 
-export default Kind
+export default Kind
+
+class KindRender extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {data, changePageInHome} = this.props
+        return (
+            <div className='kind-wrapper'>
+                <Grid data={data}
+                      columnNum={2}
+                      hasLine={false}
+                      onClick={(kind) => {
+                          changePageInHome('detail', {id: kind.id})
+                      }}
+                      renderItem={dataItem => (
+                          <div key={dataItem.id} className='kind-item'>
+                              <div className='kind-item-img'
+                                   style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
+                              <div className='kind-item-description'>
+                                  <div className='kind-item-name'>{dataItem.name}</div>
+                                  <div className='kind-item-price'>{dataItem.price}</div>
+                              </div>
+                          </div>
+                      )}
+                />
+            </div>
+        )
+    }
+}