add style

src/App.js

@@ -23,14 +23,14 @@ class App extends Component {
                 <div style={{position: 'fixed', height: '100%', width: '100%', top: 0}}>
                     <TabBar
                         unselectedTintColor="#949494"
-                        tintColor="orange"
+                        tintColor="#328cee"
                         barTintColor="white"
                     >
                         <TabBar.Item
                             title="预约"
                             key="appointment"
                             icon={<Icon type="fire" />}
-                            selectedIcon={<Icon type="fire" style={{color: 'orange'}}/>}
+                            selectedIcon={<Icon type="fire" style={{color: '#328cee'}}/>}
                             selected={this.state.selectedTab === 'appointment'}
                             onPress={() => {
                                 this.setState({
@@ -43,7 +43,7 @@ class App extends Component {
                         </TabBar.Item>
                         <TabBar.Item
                             icon={<Icon type="home" />}
-                            selectedIcon={<Icon type="home" style={{color: 'orange'}}/>}
+                            selectedIcon={<Icon type="home" style={{color: '#328cee'}}/>}
                             title="我的"
                             key="my"
                             selected={this.state.selectedTab === 'my'}
@@ -57,7 +57,7 @@ class App extends Component {
                         </TabBar.Item>
                         <TabBar.Item
                             icon={<Icon type="setting" />}
-                            selectedIcon={<Icon type="setting" style={{color: 'orange'}}/>}
+                            selectedIcon={<Icon type="setting" style={{color: '#328cee'}}/>}
                             title="管理"
                             key="manage"
                             selected={this.state.selectedTab === 'manage'}

src/page/display/Display.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {serverbyprops, servicebyprops} from "../../gql";
-import {Spin} from 'antd';
+import {ActivityIndicator} from 'antd-mobile';
 import gql from "graphql-tag";
 import {Query} from "react-apollo";
 import Server from './Server';
@@ -18,7 +18,7 @@ class Display extends Component {
 
     pageSwitchToService = (serverID) => {
         return () => {
-            this.setState ({
+            this.setState({
                 serverID,
                 display: 'service'
             })
@@ -27,7 +27,7 @@ class Display extends Component {
     };
 
     pageSwitchToServer = () => {
-        this.setState ({
+        this.setState({
             display: 'server',
             serverID: ''
         })
@@ -44,7 +44,13 @@ class Display extends Component {
                             {
                                 ({loading, error, data}) => {
                                     if (loading) {
-                                        return <Spin className={'spin'}/>
+                                        return (
+                                            <div className="loading">
+                                                <div className="align">
+                                                    <ActivityIndicator text="Loading..." size="large"/>
+                                                </div>
+                                            </div>
+                                        )
                                     }
                                     if (error) {
                                         return 'error!';
@@ -58,11 +64,11 @@ class Display extends Component {
                                     }
 
                                     return (
-                                            <Server
-                                                servers={servers}
-                                                tip={tip}
-                                                pageSwitchToService={this.pageSwitchToService}
-                                            />
+                                        <Server
+                                            servers={servers}
+                                            tip={tip}
+                                            pageSwitchToService={this.pageSwitchToService}
+                                        />
                                     )
                                 }
                             }
@@ -72,7 +78,13 @@ class Display extends Component {
                             {
                                 ({loading, error, data}) => {
                                     if (loading) {
-                                        return <Spin className={'spin'}/>
+                                        return (
+                                            <div className="loading">
+                                                <div className="align">
+                                                    <ActivityIndicator text="Loading..." size="large"/>
+                                                </div>
+                                            </div>
+                                        )
                                     }
                                     if (error) {
                                         return 'error!';

src/page/display/Ordering.js

@@ -7,10 +7,9 @@ import {
     userbyid,
     createorderAndupdaterepertoryAndupdateuser
 } from "../../gql";
-import {Spin} from 'antd';
 import gql from "graphql-tag";
 import {Query, Mutation} from "react-apollo";
-import {InputItem, Toast, List, Button, Stepper, Icon, NavBar, Switch} from 'antd-mobile';
+import {InputItem, Toast, List, Button, Stepper, Icon, NavBar, Switch, ActivityIndicator} from 'antd-mobile';
 import {idGen} from "../../func";
 import {createForm} from 'rc-form';
 
@@ -35,7 +34,13 @@ class Ordering extends Component {
                     {
                         ({loading, error, data}) => {
                             if (loading) {
-                                return <Spin className={'spin'}/>
+                                return (
+                                    <div className="loading">
+                                        <div className="align">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    </div>
+                                )
                             }
                             if (error) {
                                 return 'error!';
@@ -51,7 +56,7 @@ class Ordering extends Component {
                                 <div>
                                     {
                                         tip ?
-                                            <div>{tip}</div>
+                                            <div className={'center'}>{tip}</div>
                                             :
                                             ''
                                     }
@@ -234,7 +239,13 @@ class SaveAndOrderButton extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
                         }
                         if (error) {
                             return 'error!';
@@ -248,7 +259,13 @@ class SaveAndOrderButton extends Component {
                                 >
                                     {(updateuser, {loading, error}) => {
                                         if (loading)
-                                            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                                            return (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                </div>
+                                            );
                                         if (error)
                                             return 'error';
                                         return (
@@ -283,7 +300,13 @@ class SaveAndOrderButton extends Component {
                                 >
                                     {(iwantu, {loading, error}) => {
                                         if (loading)
-                                            return <Spin/>;
+                                            return (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                </div>
+                                            );
                                         if (error)
                                             return 'error';
                                         let varObj = {
@@ -335,7 +358,13 @@ class OrderButton extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
                         }
                         if (error) {
                             return 'error!';
@@ -343,7 +372,7 @@ class OrderButton extends Component {
                         let count = data.repertorybyid.count;
                         if (count <= 0) {
                             return (
-                                <div>名额已满</div>
+                                <div className={'center'}>名额已满</div>
                             )
                         } else {
                             return (
@@ -360,7 +389,13 @@ class OrderButton extends Component {
                                 >
                                     {(iwantu, {loading, error}) => {
                                         if (loading)
-                                            return <Spin/>;
+                                            return (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                </div>
+                                            );
                                         if (error)
                                             return 'error';
                                         let varObj = {
@@ -384,7 +419,7 @@ class OrderButton extends Component {
                                             <Button type='primary' onClick={() => {
                                                 iwantu({variables: varObj});
                                                 donotShowOrdering();
-                                            }}>预约</Button>
+                                            }} style={{margin: '5px 10px'}}>预约</Button>
                                         )
                                     }}
                                 </Mutation>

src/page/display/Server.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Card, WhiteSpace, Button, Carousel, WingBlank} from 'antd-mobile';
+import {Card, WhiteSpace, Button, Carousel, WingBlank, Flex} from 'antd-mobile';
 
 class Server extends Component {
     constructor(props) {
@@ -13,7 +13,7 @@ class Server extends Component {
     render() {
         let {tip, servers} = this.props;
         return (
-            <div >
+            <div>
                 <WingBlank>
                     <Carousel
                         autoplay={true}
@@ -42,7 +42,7 @@ class Server extends Component {
 
                 {
                     tip ?
-                        <div>{tip}</div>
+                        <div className={'center'}>{tip}</div>
                         :
                         ''
                 }
@@ -51,20 +51,30 @@ class Server extends Component {
                     servers.map((server) => {
                         return (
                             <div key={server.id}>
-                                <WhiteSpace size="lg"/>
-                                <Card full>
-                                    <Card.Body>
-                                        <div className={'card'}>
-                                            <div className={'avatar'}
-                                                 style={{backgroundImage: `url(${server.img})`}}>1
+                                <WingBlank size="lg">
+                                    <WhiteSpace size="lg"/>
+                                    <Card className={'card'}>
+                                        <Card.Body>
+                                            <div>
+                                                <Flex>
+                                                    <Flex.Item>
+                                                        <div className={'avatar'}
+                                                             style={{backgroundImage: `url(${server.img})`}}>1
+                                                        </div>
+                                                    </Flex.Item>
+                                                    <Flex.Item>
+                                                        <div className={'server-name'}>{server.name}</div>
+                                                        <div className={'server-description'}>{server.description}</div>
+                                                    </Flex.Item>
+                                                    <Flex.Item>
+                                                        <Button type='ghost' size='small'
+                                                                onClick={this.props.pageSwitchToService(server.id)}>选我</Button>
+                                                    </Flex.Item>
+                                                </Flex>
                                             </div>
-                                            <div>{server.name}</div>
-                                            <div>{server.description}</div>
-                                            <Button type='primary'
-                                                    onClick={this.props.pageSwitchToService(server.id)}>选我</Button>
-                                        </div>
-                                    </Card.Body>
-                                </Card>
+                                        </Card.Body>
+                                    </Card>
+                                </WingBlank>
                             </div>
                         )
                     })

src/page/display/Service.js

@@ -1,9 +1,11 @@
 import React, {Component} from 'react';
-import {NavBar, Icon, WhiteSpace, Card, Button} from 'antd-mobile';
+import {NavBar, Icon, WhiteSpace, Card, Button, WingBlank} from 'antd-mobile';
 import CalendarPick from '../component/CalendarPick';
 import moment from 'moment';
 import 'moment/locale/zh-cn'
 import Ordering from './Ordering';
+import { Row, Col } from 'antd';
+
 moment.locale('zh-cn');
 
 class Service extends Component {
@@ -29,73 +31,86 @@ class Service extends Component {
         return (
             <div>
                 {
-                    this.state.ordering?
+                    this.state.ordering ?
                         ''
                         :
                         <NavBar
                             mode="light"
                             icon={<Icon type="left"/>}
                             onLeftClick={pageSwitchToServer}
-                            rightContent={[
-                                <Icon key="1" type="search" onClick={() => {
-                                    this.setState({pick: true})
-                                }}/>,
-                            ]}
+                            // rightContent={[
+                            //     <Icon key="1" type="search" onClick={() => {
+                            //         this.setState({pick: true})
+                            //     }}/>,
+                            // ]}
                         >服务详情</NavBar>
                 }
 
-                {
-                    this.state.pick ?
-                        <CalendarPick show={true}/>
-                        :
-                        this.state.ordering?
-                            <Ordering
-                                donotShowOrdering={this.donotShowOrdering}
-                                serviceID={serviceID}
-                                repertoryID={repertoryID}
-                                userID={userID}
-                            />
-                            :
-                            <div>
+                <div>
 
-                                {
-                                    tip ?
-                                        <div>{tip}</div>
-                                        :
-                                        ''
-                                }
+                    {
+                        this.state.pick ?
+                            <CalendarPick show={true}/>
+                            :
+                            this.state.ordering ?
+                                <Ordering
+                                    donotShowOrdering={this.donotShowOrdering}
+                                    serviceID={serviceID}
+                                    repertoryID={repertoryID}
+                                    userID={userID}
+                                />
+                                :
+                                <div>
 
-                                {
-                                    services.map(service => {
-                                        return (
-                                            <div key={service.id}>
-                                                <WhiteSpace size="lg"/>
-                                                <Card full>
-                                                    <Card.Body>
-                                                        <div className={'card'}>
-                                                            <div>{service.description}</div>
-                                                            <div>价格: {service.price}</div>
-                                                            <div>开始时间: {moment(Number(service.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                                            <div>工作时间: {moment.duration(Number(service.lastTime), "milliseconds").humanize()}</div>
-                                                            <div>剩余名额: {service.repertory_id.count}</div>
+                                    {
+                                        tip ?
+                                            <div className={'center'}>{tip}</div>
+                                            :
+                                            ''
+                                    }
 
-                                                            <Button type='primary' onClick={() => {
-                                                                this.setState({
-                                                                    ordering: true,
-                                                                    serviceID: service.id,
-                                                                    repertoryID: service.repertory_id.id
-                                                                })
-                                                            }}>预约</Button>
-                                                        </div>
-                                                    </Card.Body>
-                                                </Card>
-                                            </div>
-                                        )
-                                    })
-                                }
-                            </div>
-                }
+                                    {
+                                        services.map(service => {
+                                            return (
+                                                <div key={service.id}>
+                                                    <WingBlank size="lg">
+                                                        <WhiteSpace size="lg"/>
+                                                        <Card full className={'card'}>
+                                                            <Card.Body>
+                                                                <div>
+                                                                    <Row>
+                                                                        <Col span={15}>
+                                                                            <div className={'service-description'}>{service.description}</div>
+                                                                            <div className={'service-time'}>开始: {moment(Number(service.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                                            <div className={'service-time'}>工作时长: {moment.duration(Number(service.lastTime), "milliseconds").humanize()}</div>
+                                                                        </Col>
+                                                                        <Col span={5}>
+                                                                            <div className={'service-price'}>{service.price}</div>
+                                                                            <div className={'service-count'}>剩余 {service.repertory_id.count}</div>
+                                                                        </Col>
+                                                                        <Col span={4}>
+                                                                            <Button inline size="small" type='primary' onClick={() => {
+                                                                                this.setState({
+                                                                                    ordering: true,
+                                                                                    serviceID: service.id,
+                                                                                    repertoryID: service.repertory_id.id
+                                                                                })
+                                                                            }}>预约</Button>
+                                                                        </Col>
+                                                                    </Row>
+                                                                </div>
+                                                            </Card.Body>
+                                                        </Card>
+                                                    </WingBlank>
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </div>
+                    }
+                </div>
             </div>
+
         );
     }
 }

src/page/display/index.css

@@ -1,7 +1,65 @@
 .avatar {
-  width: 50px;
-  height: 50px;
+  width: 70px;
+  height: 70px;
   background-repeat: no-repeat;
-  background-size:100% 100%
+  background-size: 100% 100%;
+  border-radius: 50%;
+  border: 3px solid #eee;
+  overflow: hidden
 }
 
+.server-name, .service-description, .order-name {
+  color: black;
+  font-size: larger;
+  font-weight: bold;
+}
+
+.server-description {
+  color: #999999;
+  font-size: smaller;
+}
+
+.card {
+  border: none;
+  border-radius: 4px;
+  box-shadow: 1px 2px 1px 0 #eee;
+}
+
+.service-price, .order-price {
+  color: indianred;
+  font-size: large;
+  font-weight: bold;
+}
+
+.service-price:before, .order-price:before {
+  content: "￥";
+  color: indianred;
+  font-size: small;
+}
+
+.service-time, .order-time {
+  color: dimgrey;
+  font-size: small;
+  font-weight: lighter;
+}
+
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.center-fix {
+  display: -webkit-flex;
+  -webkit-justify-content: center;
+  -webkit-align-items: center;
+  margin-top: 20px;
+}

src/page/home/Cancelled.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {orderbyprops, updateorder} from "../../gql";
 // import {deleteorder} from "../../gql";
-import {Spin} from 'antd';
 import gql from "graphql-tag";
 import {Query, Mutation} from "react-apollo";
-import {Card, WhiteSpace, Button} from 'antd-mobile';
+import {Card, WhiteSpace, Button, ActivityIndicator, WingBlank} from 'antd-mobile';
 import moment from 'moment';
 import 'moment/locale/zh-cn'
+import {Row, Col} from 'antd';
 moment.locale('zh-cn');
 
 class Cancelled extends Component {
@@ -17,7 +17,13 @@ class Cancelled extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
                         }
                         if (error) {
                             return 'error!';
@@ -49,9 +55,7 @@ export default Cancelled;
 class CancelledRender extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
@@ -60,34 +64,48 @@ class CancelledRender extends Component {
             <div>
                 {
                     tip ?
-                        <div>{tip}</div>
+                        <div className={'center-fix'}>{tip}</div>
                         :
                         ''
                 }
 
                 {
-                    orders.map((order)=> {
+                    orders.map((order) => {
                         return (
                             <div key={order.id}>
-                                <WhiteSpace size="lg"/>
-                                <Card full>
-                                    <Card.Body>
-                                        <div className={'card'}>
-                                            <div>预约: {order.service_id.server_id.name} - {order.service_id.price}元</div>
-                                            <div>留言: {order.remark}</div>
-                                            <div>预约时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                            <div>取消时间: {moment(Number(order.updatedAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                            {/*<DeleteButton1*/}
-                                                {/*orderID={order.id}*/}
-                                                {/*userID={userID}*/}
-                                            {/*/>*/}
-                                            <DeleteButton2
-                                                orderID={order.id}
-                                                userID={userID}
-                                            />
-                                        </div>
-                                    </Card.Body>
-                                </Card>
+                                <WingBlank size="lg">
+                                    <WhiteSpace size="lg"/>
+                                    <Card className={'card'}>
+                                        <Card.Body>
+
+                                            <div>
+                                                <Row>
+                                                    <Col span={14}>
+                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                    </Col>
+                                                    <Col span={6}>
+                                                        <div className={'order-remark'}>留言: {order.remark?order.remark:'无'}</div>
+                                                    </Col>
+                                                    <Col span={4}>
+                                                        {/*<DeleteButton1*/}
+                                                        {/*orderID={order.id}*/}
+                                                        {/*userID={userID}*/}
+                                                        {/*/>*/}
+                                                        <DeleteButton2
+                                                            orderID={order.id}
+                                                            userID={userID}
+                                                        />
+                                                    </Col>
+                                                </Row>
+                                                <Row>
+                                                    <div className={'order-time'}>预约于: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                    <div className={'order-time'}>取消于: {moment(Number(order.updatedAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                </Row>
+                                            </div>
+
+                                        </Card.Body>
+                                    </Card>
+                                </WingBlank>
                             </div>
                         )
                     })
@@ -123,7 +141,7 @@ class CancelledRender extends Component {
 //                         user_id: userID
 //                     };
 //                     return (
-//                         <Button type='warning' onClick={()=>{
+//                         <Button inline size={'small'} type='warning' onClick={()=>{
 //                             deleteorder({variables: varObj})
 //                         }}>删除</Button>
 //                     )
@@ -138,9 +156,7 @@ class CancelledRender extends Component {
 class DeleteButton2 extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
@@ -152,7 +168,13 @@ class DeleteButton2 extends Component {
             >
                 {(updateorder, {loading, error}) => {
                     if (loading)
-                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
                     if (error)
                         return 'error';
                     let varObj = {
@@ -162,7 +184,7 @@ class DeleteButton2 extends Component {
                         updatedAt: new Date().getTime()
                     };
                     return (
-                        <Button type='warning' onClick={()=>{
+                        <Button type='warning' inline size={'small'} onClick={() => {
                             updateorder({variables: varObj})
                         }}>删除</Button>
                     )

src/page/home/Ordered.js

@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
 import {orderbyprops, repertorybyid, updateorderAndupdaterepertory} from "../../gql";
-import {Spin} from 'antd';
 import gql from "graphql-tag";
 import {Query, Mutation} from "react-apollo";
-import {Card, WhiteSpace, Button} from 'antd-mobile';
+import {Card, WhiteSpace, Button, ActivityIndicator, WingBlank} from 'antd-mobile';
+import {Row, Col} from 'antd';
 import moment from 'moment';
 import 'moment/locale/zh-cn'
 
@@ -17,7 +17,13 @@ class Ordered extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
                         }
                         if (error) {
                             return 'error!';
@@ -58,7 +64,7 @@ class OrderedRender extends Component {
             <div>
                 {
                     tip ?
-                        <div>{tip}</div>
+                        <div className={'center-fix'}>{tip}</div>
                         :
                         ''
                 }
@@ -67,22 +73,33 @@ class OrderedRender extends Component {
                     orders.map((order) => {
                         return (
                             <div key={order.id}>
-                                <WhiteSpace size="lg"/>
-                                <Card full>
-                                    <Card.Body>
-                                        <div className={'card'}>
-                                            <div>预约: {order.service_id.server_id.name} - {order.service_id.price}元</div>
-                                            <div>人数: {order.customerNumber}</div>
-                                            <div>留言: {order.remark}</div>
-                                            <div>时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                            <CancelButton
-                                                repertoryID={order.service_id.repertory_id.id}
-                                                orderID={order.id}
-                                                userID={userID}
-                                            />
-                                        </div>
-                                    </Card.Body>
-                                </Card>
+                                <WingBlank size="lg">
+                                    <WhiteSpace size="lg"/>
+                                    <Card className={'card'}>
+                                        <Card.Body>
+                                            <div>
+                                                <Row>
+                                                    <Col span={14}>
+                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                        <div className={'order-price'}>{order.service_id.price}</div>
+                                                        <div className={'order-time'}>{moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                    </Col>
+                                                    <Col span={6}>
+                                                        <div className={'order-people'}>{order.customerNumber}人</div>
+                                                        <div className={'order-remark'}>留言: {order.remark?order.remark:'无'}</div>
+                                                    </Col>
+                                                    <Col span={4}>
+                                                        <CancelButton
+                                                            repertoryID={order.service_id.repertory_id.id}
+                                                            orderID={order.id}
+                                                            userID={userID}
+                                                        />
+                                                    </Col>
+                                                </Row>
+                                            </div>
+                                        </Card.Body>
+                                    </Card>
+                                </WingBlank>
                             </div>
                         )
                     })
@@ -105,7 +122,13 @@ class CancelButton extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
                         }
                         if (error) {
                             return 'error!';
@@ -115,16 +138,22 @@ class CancelButton extends Component {
                             <Mutation
                                 mutation={gql(updateorderAndupdaterepertory)}
                                 refetchQueries={[
-                                        {query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'success'}},
-                                        {query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'cancelled'}},
-                                        {query: gql(orderbyprops), variables: {orderStatus: 'success'}},
-                                        {query: gql(orderbyprops), variables: {orderStatus: 'cancelled'}},
-                                        {query: gql(orderbyprops), variables: {}}
-                                    ]}
+                                    {query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'success'}},
+                                    {query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'cancelled'}},
+                                    {query: gql(orderbyprops), variables: {orderStatus: 'success'}},
+                                    {query: gql(orderbyprops), variables: {orderStatus: 'cancelled'}},
+                                    {query: gql(orderbyprops), variables: {}}
+                                ]}
                             >
                                 {(updateBothTwo, {loading, error}) => {
                                     if (loading)
-                                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                                        return (
+                                            <div className="loading">
+                                                <div className="align">
+                                                    <ActivityIndicator text="Loading..." size="large"/>
+                                                </div>
+                                            </div>
+                                        );
                                     if (error)
                                         return 'error';
                                     let varObj = {
@@ -132,10 +161,10 @@ class CancelButton extends Component {
                                         repertory_id: repertoryID,
                                         updatedAt: new Date().getTime(),
                                         orderStatus: 'cancelled',
-                                        count: count+1
+                                        count: count + 1
                                     };
                                     return (
-                                        <Button type='warning' onClick={() => {
+                                        <Button type='warning' inline size={'small'} onClick={() => {
                                             updateBothTwo({variables: varObj})
                                         }}>取消</Button>
                                     )

src/page/home/User.js

@@ -1,9 +1,8 @@
 import React, {Component} from 'react';
 import {userbyid, updateuser} from "../../gql";
-import {Spin} from 'antd';
 import gql from "graphql-tag";
 import {Query, Mutation} from "react-apollo";
-import {InputItem, Toast, List, Button} from 'antd-mobile';
+import {InputItem, Toast, List, Button, ActivityIndicator} from 'antd-mobile';
 
 class User extends Component {
     render() {
@@ -13,7 +12,13 @@ class User extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
                         }
                         if (error) {
                             return 'error!';
@@ -29,7 +34,7 @@ class User extends Component {
                             <div>
                                 {
                                     tip ?
-                                        <div>{tip}</div>
+                                        <div className={'center'}>{tip}</div>
                                         :
                                         ''
                                 }
@@ -127,11 +132,17 @@ class SaveButton extends Component {
             >
                 {(updateuser, {loading, error}) => {
                     if (loading)
-                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
                     if (error)
                         return 'error';
                     return (
-                        <Button type={'primary'} onClick={()=>{
+                        <Button type={'primary'} style={{margin: '5px 10px'}} onClick={()=>{
                             updateuser({
                                 variables: {
                                     id: userID,

src/page/manage/AllOrder.js

@@ -2,32 +2,32 @@ import React, {Component} from 'react';
 import './index.css';
 import {createForm} from 'rc-form';
 import {NoticeBar, Picker} from 'antd-mobile';
-import {Spin} from 'antd';
 import gql from "graphql-tag";
 import {Query} from "react-apollo";
 import {adminorderbyprops} from "../../gql";
-import {Card, WhiteSpace} from 'antd-mobile';
+import {Card, WhiteSpace, ActivityIndicator, WingBlank} from 'antd-mobile';
 import moment from 'moment';
 import 'moment/locale/zh-cn'
+import {Row, Col} from 'antd';
 
 moment.locale('zh-cn');
 
 const data = [
     {
         "value": "success",
-        "label": "成功",
+        "label": "成功（可选）",
     },
     {
         "value": "cancelled",
-        "label": "已取消",
+        "label": "已取消（可选）",
     },
     {
         "value": "deleted",
-        "label": "已删除",
+        "label": "已删除（可选）",
     },
     {
         "value": "",
-        "label": "全部",
+        "label": "全部（可选）",
     }
 ];
 
@@ -88,7 +88,13 @@ class AdminShowOrders extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
                         }
                         if (error) {
                             return 'error!';
@@ -126,7 +132,7 @@ class OrderedRender extends Component {
             <div>
                 {
                     tip ?
-                        <div>{tip}</div>
+                        <div className={'center'}>{tip}</div>
                         :
                         ''
                 }
@@ -135,21 +141,30 @@ class OrderedRender extends Component {
                     orders.map((order) => {
                         return (
                             <div key={order.id}>
-                                <WhiteSpace size="lg"/>
-                                <Card full>
-                                    <Card.Body>
-                                        <div className={'card'}>
-                                            <div>预约: {order.service_id.server_id.name} - {order.service_id.price}元</div>
-                                            <div>人数: {order.customerNumber}</div>
-                                            <div>留言: {order.remark ? order.remark : '无'}</div>
-                                            <div>预约人: {order.contactName}</div>
-                                            <div>联系方式: {order.contactTelephone}</div>
-                                            <div>预约账号: {order.user_id.username}</div>
-                                            <div>预约时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                            <div>下单时间: {moment(Number(order.createdAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                        </div>
-                                    </Card.Body>
-                                </Card>
+                                <WingBlank size="lg">
+                                    <WhiteSpace size="lg"/>
+                                    <Card className={'card'}>
+                                        <Card.Body>
+                                            <div>
+                                                <Row>
+                                                    <Col span={20}>
+                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                    </Col>
+                                                    <Col span={4}>
+                                                        <div className={'order-price'}>{order.service_id.price}</div>
+                                                    </Col>
+                                                </Row>
+                                                    <div>人数: {order.customerNumber}</div>
+                                                    <div className={'order-remark'}>留言: {order.remark ? order.remark : '无'}</div>
+                                                    <div>预约人: {order.contactName}</div>
+                                                    <div>联系方式: {order.contactTelephone}</div>
+                                                    <div>预约账号: {order.user_id.username}</div>
+                                                    <div className={'order-time'}>预约时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                    <div className={'order-time'}>下单时间: {moment(Number(order.createdAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                            </div>
+                                        </Card.Body>
+                                    </Card>
+                                </WingBlank>
                             </div>
                         )
                     })

src/page/manage/Release.js

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
 import './index.css';
-import {NoticeBar, List, InputItem, ImagePicker, Button, Stepper, DatePicker} from 'antd-mobile';
+import {NoticeBar, List, InputItem, ImagePicker, Button, Stepper, DatePicker, ActivityIndicator} from 'antd-mobile';
 import {Query, Mutation} from "react-apollo";
-import {Spin} from 'antd';
 import gql from "graphql-tag";
 import {
     servicebyid,
@@ -37,7 +36,13 @@ class Release extends Component {
                     {
                         ({loading, error, data}) => {
                             if (loading) {
-                                return <Spin className={'spin'}/>
+                                return (
+                                    <div className="loading">
+                                        <div className="align">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    </div>
+                                );
                             }
                             if (error) {
                                 return 'error!';
@@ -125,7 +130,13 @@ class ServiceList extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="center-fix">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            );
                         }
                         if (error) {
                             return 'error!';
@@ -257,7 +268,13 @@ class SubmitServerButton extends Component {
             >
                 {(createserver, {loading, error}) => {
                     if (loading)
-                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
                     if (error)
                         return 'error';
                     let varObj = {
@@ -293,7 +310,13 @@ class ServiceDetail extends Component {
                 {
                     ({loading, error, data}) => {
                         if (loading) {
-                            return <Spin className={'spin'}/>
+                            return (
+                                <div className="center-fix">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            );
                         }
                         if (error) {
                             return 'error!';
@@ -476,7 +499,13 @@ class SubmitServiceUpdateButton extends Component {
             >
                 {(updateBothTwo, {loading, error}) => {
                     if (loading)
-                        return <Spin/>;
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
                     if (error)
                         return 'error';
                     let varObj = {
@@ -518,7 +547,13 @@ class SubmitServiceCreateButton extends Component {
             >
                 {(createBothTwo, {loading, error}) => {
                     if (loading)
-                        return <Spin/>;
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
                     if (error)
                         return 'error';
                     let varObj = {
@@ -563,7 +598,13 @@ class SubmitServiceDeleteButton extends Component {
             >
                 {(deleteBothTwo, {loading, error}) => {
                     if (loading)
-                        return <Spin/>;
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
                     if (error)
                         return 'error';
                     let varObj = {