merge dev to local

client/components/Header/Header.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { Icon } from 'antd'
-import { loginTypeAction } from  '../../actions/login';
+import loginTypeAction from '../../actions/login';
 
 const ToolUser = (props)=> (
   <ul>
@@ -58,7 +58,6 @@ class Header extends Component {
   }
   render () {
     const { login, user, msg } = this.props;
-    console.log(this.state.guestToolShow);
     return (
       <acticle className="header-box">
         <div className="content">

client/components/Loading/Loading.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './Loading.scss'
+
+export default class Loading extends React.Component{
+  static defaultProps = {
+    visible: false
+  }
+  static propTypes = {
+    visible: PropTypes.bool
+  }
+  constructor(props) {
+    super(props);
+    this.state = { show:props.visible };
+  }
+  componentWillReceiveProps(nextProps) {
+    this.setState({ show : nextProps.visible });
+  }
+  render(){
+    return(
+      <div
+        className="loading-box"
+        style={{ display: this.state.show ? 'flex' : 'none'}}
+      >
+        <div className="loading-box-bg"></div>
+        <div className="loading-box-inner">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    )
+  }
+}

client/components/Loading/Loading.scss

@@ -0,0 +1,88 @@
+$ball-color:#30a1f2;
+$ball-size:.15rem;
+$ball-margin:.02rem;
+$loader-radius:.25rem;
+
+@function delay($interval, $count, $index) {
+  @return ($index * $interval) - ($interval * $count);
+}
+
+@keyframes ball-spin-fade-loader {
+  50% {
+    opacity: 0.3;
+    transform: scale(0.4);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@mixin ball-spin-fade-loader($n:8,$start:1){
+  @for $i from $start through $n {
+    > div:nth-child(#{$i}) {
+      $quarter: ($loader-radius/2) + ($loader-radius/5.5);
+
+      @if $i == 1 {
+        top: $loader-radius;
+        left: 0;
+      } @else if $i == 2 {
+        top: $quarter;
+        left: $quarter;
+      } @else if $i == 3 {
+        top: 0;
+        left: $loader-radius;
+      } @else if $i == 4 {
+        top: -$quarter;
+        left: $quarter;
+      } @else if $i == 5 {
+        top: -$loader-radius;
+        left: 0;
+      } @else if $i == 6 {
+        top: -$quarter;
+        left: -$quarter;
+      } @else if $i == 7 {
+        top: 0;
+        left: -$loader-radius;
+      } @else if $i == 8 {
+        top: $quarter;
+        left: -$quarter;
+      }
+      animation: ball-spin-fade-loader 1s delay(0.12s, $n, $i - 1) infinite linear;
+    }
+  }
+}
+
+.loading-box{
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  &-bg{
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(255,255,255,.7);
+  }
+  &-inner{
+    @include ball-spin-fade-loader();
+    position: relative;
+    >div{
+      position: absolute;
+      width: $ball-size;
+      height: $ball-size;
+      border-radius: 50%;
+      margin: $ball-margin;
+      background-color: $ball-color;
+      animation-fill-mode: both;
+    }
+  }
+}
+
+
+

client/styles/common.scss

@@ -6,7 +6,9 @@ html {
   background: #f1f3f6;
 }
 html, body {
-  font-family: tahoma, 'Microsoft Yahei';
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+             "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+             SimSun, sans-serif;
   margin: 0;
   padding: 0;
   height: 100%;