首页展示以及详情页修改

src/app.css

@@ -1,3 +1,7 @@
+body {
+    color: rgba(0, 0, 0, 0.86);
+}
+
 .tabbar {
     width: 100%;
     height: 50px;

src/pages/home/all/index.css

@@ -2,6 +2,7 @@
     background-color: white;
     min-height: 300px;
     position: relative;
+    padding-bottom: 20px;
 }
 
 .guess-title {
@@ -12,44 +13,4 @@
     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: #fd7373;
-    font-size: 20px;
-    font-weight: 600;
-    float: right;
-    margin-right: 25px;
-}
-
-.guess-item-price::before {
-    content: '￥';
 }

src/pages/home/all/index.js

@@ -80,7 +80,8 @@ class All extends Component {
                                         this.props.history.push({
                                             pathname: '/home/kind',
                                             state: {
-                                                id: kind.id
+                                                id: kind.id,
+                                                category:kind.text
                                             }
                                         })
                                     }}/>
@@ -138,11 +139,14 @@ class Like extends Component {
                           })
                       }}
                       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 key={dataItem.id} className='product-item'>
+                              <div className='product-item-img' style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
+                              <div className='product-item-description'>
+                                  <div className='product-item-name'>{dataItem.name}</div>
+                                  <div className='product-item-price'>
+                                      <span>￥{dataItem.price}</span>&nbsp;
+                                      <span>￥{dataItem.price}</span>
+                                  </div>
                               </div>
                           </div>
                       )}

src/pages/home/detail/index.css

@@ -2,19 +2,12 @@
 
 }
 
-.detail-wrapper {
-    height: 100%;
-}
-
-.detail-navbar-wrap {
-    width: 100%;
-    height: 5%;
+.detail-padding {
+    padding: 5px 10px;
 }
 
-.detail-navbar {
-    position: fixed;
-    top: 0;
-    width: 100%;
+.detail-wrapper {
+    height: 100%;
 }
 
 .detail-simple-show {
@@ -23,89 +16,88 @@
 }
 
 .detail-img {
-    width: 90%;
-    height: 75%;
+    height: 80%;
     background-size: cover;
     background-repeat: no-repeat;
     margin: 0 auto;
 }
 
-.detail-below-img-in-simle-show-hahahahah {
-    height: 30%;
-    margin-left: 10px;
-}
-
 .detail-name {
-    font-size: 1.6rem;
+    font-size: 16px;
 }
 
-.detail-price {
-    color: orangered;
-    font-size: 1.8rem;
+.detail-price span:first-child {
+    color: #f44;
+    font-size: 22px;
     font-weight: 500;
 }
 
-.detail-price::before {
-    content: '￥';
+.detail-price span:nth-child(2){
+    text-decoration: line-through;
+    color: gray;
+    font-size: 14px;
 }
 
 .detail-stock {
-    font-size: 1.2rem;
+    float: right;
+    color: #5f6f86;
 }
 
-.detail-stock::before {
-    content: '库存：';
+.detail-complicate-show {
+    margin-top: 15px;
+    height: 500px;
+    background-color: white;
 }
 
-.detail-complicate-show {
-    margin-top: 20px;
-    height: 700px;
-    background-color: #f44;
+.detail-complicate-title {
+    background-color: white;
 }
 
-.detail-bottom {
+.detail-footer {
     position: fixed;
     bottom: 0;
     width: 100%;
-    height: 60px;
-    background-color: white;
-    border-top: 1px solid #F3F3F3;
+    height: 50px;
 }
 
-.detail-bottom-cart {
-    display: inline-block;
+.detail-bottom {
     height: 100%;
-    width: 15%;
-    text-align: center;
+    display: flex;
+    font-size: 16px;
+    align-items: center;
+    background-color: #fdfbfb;
+    border-top: 1px solid #f5f5f9;
+    z-index: 3;
 }
 
-.detail-bottom-home {
-    display: inline-block;
+.detail-bottom-icon {
     height: 100%;
     width: 15%;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.detail-bottom-add {
+.border-right {
+    border-right: 1px solid #f5f5f9;
+}
+
+.detail-bottom-button {
     display: inline-block;
     width: 35%;
     text-align: center;
-    color: white;
-    background-color: orange;
     height: 100%;
-    font-size: 18px;
-    line-height: 60px;
+    line-height: 50px;
 }
 
-.detail-bottom-buy {
-    display: inline-block;
-    width: 35%;
-    text-align: center;
+.add {
+    color: #0a0a0a;
+    background-color: #ffd6c7;
+}
+
+.buy {
     color: white;
-    background-color: orangered;
-    height: 100%;
-    font-size: 18px;
-    line-height: 60px;
+    background-color: #f44;
 }
 
 .detail-icon-wrap {

src/pages/home/detail/index.js

@@ -28,13 +28,13 @@ class Detail extends Component {
         let contentHeight = window.innerHeight
         return (
             <div className='detail-wrap' style={{height: contentHeight}}>
-                <div className='detail-navbar-wrap'>
+                <div className='detail-navbar-wrap navbar'>
                     <NavBar
-                        className='detail-navbar'
                         mode="light"
                         icon={<Icon type="left"/>}
                         onLeftClick={() => {this.props.history.go(-1)}}
-                    >商品详情</NavBar>
+                    >商品详情
+                    </NavBar>
                 </div>
 
                 <Query query={gql(productbyid)} variables={{id}}>
@@ -74,21 +74,29 @@ class DetailRender extends Component {
     render() {
         let {data} = this.props;
         return (
-            <div className='detail-wrapper'>
+            <div className='detail-wrapper content-wrap'>
                 <div className='detail-simple-show'>
                     <div className='detail-img' style={{backgroundImage: "url('"+ data.img + "')"}}/>
-                    <div className='detail-below-img-in-simle-show-hahahahah'>
-                        <div className='detail-name'>{data.name}</div>
-                        <div className='detail-price'>{data.price}</div>
-                        <div className='detail-stock'>{data.stock}</div>
+                    <div className='detail-intro'>
+                        <div className='detail-name detail-padding'>{data.name}</div>
+                        <div className='detail-price detail-padding'>
+                            <span>￥{data.price}</span>&nbsp;&nbsp;
+                            <span>￥{data.price}</span>
+                            <span className='detail-stock'>库存 {data.stock}</span>
+                        </div>
                     </div>
                 </div>
-                <div className='detail-complicate-show'>详情详情</div>
-                <div className='detail-bottom'>
-                    <span className='detail-bottom-cart' onClick={()=>{this.props.history.push({pathname: '/cart'})}}><div className='detail-icon-wrap'><div className='detail-icon detail-icon-cart'/><div>购物袋</div></div></span>
-                    <span className='detail-bottom-home' onClick={()=>{this.props.history.push({pathname: '/home'})}}><div className='detail-icon-wrap'><div className='detail-icon detail-icon-shop'/><div>店铺</div></div></span>
-                    <span className='detail-bottom-add' onClick={()=>{}}>加入购物车</span>
-                    <span className='detail-bottom-buy' onClick={()=>{}}>立即购买</span>
+                <div className='detail-complicate-show'>
+                    <div className='detail-padding detail-complicate-title'>商品信息</div>
+                    <div>通过商品详情图片展示</div>
+                </div>
+                <div className='detail-footer'>
+                    <div className='detail-bottom'>
+                        <span className='detail-bottom-icon border-right' onClick={()=>{this.props.history.push({pathname: '/home'})}}><div className='detail-icon detail-icon-shop'/></span>
+                        <span className='detail-bottom-icon' onClick={()=>{this.props.history.push({pathname: '/cart'})}}><div className='detail-icon detail-icon-cart'/></span>
+                        <span className='detail-bottom-button add' onClick={()=>{}}>加入购物车</span>
+                        <span className='detail-bottom-button buy' onClick={()=>{}}>立即购买</span>
+                    </div>
                 </div>
             </div>
         )

src/pages/home/index.css

@@ -3,4 +3,44 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+}
+
+.product-item {
+    width: 100%;
+    height: 100%;
+}
+
+.product-item-img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 60%;
+    height: 80%;
+    display: block;
+    margin: 0 auto;
+}
+
+.product-item-description {
+    font-weight: 500;
+    display: flex;
+    flex-direction: column;
+    color: #010101;
+}
+
+.product-item-name {
+    padding: 5px 15%;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.product-item-price span:first-child {
+    color: #f5617b;
+}
+
+.product-item-price span:nth-child(2){
+    text-decoration: line-through;
+    color: gray;
+    font-weight: lighter;
+    font-size: 12px;
 }

src/pages/home/kind/index.css

@@ -1,14 +1,10 @@
-.kind-wrap {
-}
-
 .kind-search-wrap {
-    height: 60px;
+    height: 50px;
     position: relative;
     z-index: 0;
 }
 
 .kind-search {
-    height: 40px;
     width: 90%;
     position: absolute;
     left: 50%;
@@ -23,6 +19,18 @@
     z-index: 0;
 }
 
+.kind-empty {
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.kind-empty > div {
+    padding: 5px;
+}
+
 .kind-navbar-wrap {
     width: 100%;
     height: 45px;
@@ -43,44 +51,4 @@
     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: #f44;
-    font-size: 20px;
-    font-weight: 600;
-    float: right;
-    margin-right: 25px;
-}
-
-.kind-item-price::before {
-    content: '￥';
 }

src/pages/home/kind/index.js

@@ -1,11 +1,12 @@
 import React, {Component} from 'react'
-import {NavBar, Icon, ActivityIndicator, Grid} from 'antd-mobile'
-import {Input} from 'antd'
-import './index.css'
-import {productbyprops} from "../../../utils/gql"
+import {withRouter} from 'react-router-dom'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
-import {withRouter} from 'react-router-dom'
+import {Input} from 'antd'
+import {NavBar, Icon, ActivityIndicator, Grid} from 'antd-mobile'
+
+import {productbyprops} from "../../../utils/gql"
+import './index.css'
 
 const Search = Input.Search
 
@@ -13,22 +14,25 @@ class Kind extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            id: ''
+            id: '',
+            category:'商品列表'
         }
     }
 
     componentWillMount() {
         let {location} = this.props
         if(location && location.state) {
+            let {id, category} = location.state
             this.setState({
-                id: location.state.id
+                id,
+                category
             })
         }
     }
 
     render() {
-        let {id} = this.state
-        let contentHeight = window.innerHeight - 105
+        let {id, category} = this.state
+        let contentHeight = window.innerHeight - 95
         return (
             <div className='kind-wrap'  style={{height: contentHeight}}>
                 <div className='kind-navbar-wrap'>
@@ -37,7 +41,7 @@ class Kind extends Component {
                         mode="light"
                         icon={<Icon type="left"/>}
                         onLeftClick={() => {this.props.history.go(-1)}}
-                    >商品分类</NavBar>
+                    >{category}</NavBar>
                 </div>
                 <div className='kind-search-wrap'>
                     <Search
@@ -46,7 +50,7 @@ class Kind extends Component {
                         onSearch={value => console.log(value)}
                     />
                 </div>
-                <Query query={gql(productbyprops)} variables={{category: id}}>
+                <Query query={gql(productbyprops)} variables={{category_id: id}}>
                     {
                         ({loading, error, data}) => {
                             if (loading) {
@@ -83,11 +87,25 @@ class KindRender extends Component {
 
     render() {
         let {data} = this.props
+
         return (
             <div className='kind-wrapper'>
                 {
                     data.length === 0?
-                        '这个分类还没有商品呢'
+                        <div className="kind-empty">
+                            <div>即将上新</div>
+                            <div>
+                                <button className="empty-button"
+                                        style={{width:130, padding:'5px 10px'}}
+                                        onClick={() => {
+                                            this.props.history.push({
+                                                pathname: `/`
+                                            })
+                                        }}>
+                                    先逛逛其他商品
+                                </button>
+                            </div>
+                        </div>
                         :
                         <Grid data={data}
                               columnNum={2}
@@ -102,12 +120,15 @@ class KindRender extends Component {
 
                               }}
                               renderItem={dataItem => (
-                                  <div key={dataItem.id} className='kind-item'>
-                                      <div className='kind-item-img'
+                                  <div key={dataItem.id} className='product-item'>
+                                      <div className='product-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 className='product-item-description'>
+                                          <div className='product-item-name'>{dataItem.name}</div>
+                                          <div className='product-item-price'>
+                                              <span>￥{dataItem.price}</span>&nbsp;
+                                              <span>￥{dataItem.price}</span>
+                                          </div>
                                       </div>
                                   </div>
                               )}

src/pages/my/order/detail/index.js

@@ -1,7 +1,7 @@
 import {Component} from "react"
 import React from "react"
 import './index.css'
-import {NavBar, Icon as Iconm} from 'antd-mobile'
+import {NavBar} from 'antd-mobile'
 import {Row, Col, Icon} from 'antd'
 import {orderProduct_by_props} from "../../../../utils/gql"
 import {Query} from "react-apollo"
@@ -101,7 +101,7 @@ class Detail extends Component {
                     <div className='navbar'>
                         <NavBar
                             mode="light"
-                            icon={<Iconm type="left"/>}
+                            icon={<Icon type="left"/>}
                             onLeftClick={() => {
                                 this.props.history.go(-1)
                             }}