From 66a6e551919f47859f52d325838e105e7ddf9318 Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Fri, 12 Oct 2018 22:05:16 +0800
Subject: [PATCH] Added Scrollbar.

---
 src/components/ScrollBar/index.less |  5 +++++
 src/layouts/PrimaryLayout.js        | 12 ++++++++++--
 src/layouts/PrimaryLayout.less      | 10 +++++++++-
 src/pages/dashboard/index.js        | 14 ++++++++++----
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/components/ScrollBar/index.less b/src/components/ScrollBar/index.less
index dbd23fa..31e149b 100644
--- a/src/components/ScrollBar/index.less
+++ b/src/components/ScrollBar/index.less
@@ -14,6 +14,11 @@
     width: 8px;
   }
 
+  .ps__rail-y,
+  .ps__rail-x {
+    z-index: 9;
+  }
+
   .ps__thumb-y {
     width: 4px;
     right: 4px;
diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js
index 6377ef3..a5f7c5a 100644
--- a/src/layouts/PrimaryLayout.js
+++ b/src/layouts/PrimaryLayout.js
@@ -110,7 +110,12 @@ class PrimaryLayout extends PureComponent {
             <Sider {...siderProps} />
           )}
           <div className={styles.container} id="primaryLayout">
-            <ScrollBar>
+            <ScrollBar
+              option={{
+                // Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
+                suppressScrollX: true,
+              }}
+            >
               <Header {...headerProps} />
               <Content className={styles.content}>
                 <Bread routeList={routeList} />
@@ -120,7 +125,10 @@ class PrimaryLayout extends PureComponent {
                 className={styles.backTop}
                 target={() => document.getElementById('primaryLayout')}
               />
-              <GlobalFooter copyright={config.copyright} />
+              <GlobalFooter
+                className={styles.footer}
+                copyright={config.copyright}
+              />
             </ScrollBar>
           </div>
         </Layout>
diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less
index b28bbf6..d945694 100644
--- a/src/layouts/PrimaryLayout.less
+++ b/src/layouts/PrimaryLayout.less
@@ -24,8 +24,16 @@
   flex: 1;
 }
 
+.footer {
+  background: #fff;
+}
+
 :global {
   .antd-pro-global-footer-globalFooter {
-    margin-top: 16px;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 24px;
+    padding-bottom: 24px;
+    background: #fff;
   }
 }
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index 1f8e12d..824ea45 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Row, Col, Card } from 'antd'
 import { Color } from 'utils'
-import { Page } from 'components'
+import { Page, ScrollBar } from 'components'
 import {
   NumberCard,
   Quote,
@@ -93,7 +93,9 @@ class Dashboard extends PureComponent {
                     background: Color.peach,
                   }}
                 >
-                  <Quote {...quote} />
+                  <ScrollBar>
+                    <Quote {...quote} />
+                  </ScrollBar>
                 </Card>
               </Col>
             </Row>
@@ -105,7 +107,9 @@ class Dashboard extends PureComponent {
           </Col>
           <Col lg={12} md={24}>
             <Card bordered={false} {...bodyStyle}>
-              <Comments data={comments} />
+              <ScrollBar>
+                <Comments data={comments} />
+              </ScrollBar>
             </Card>
           </Col>
           <Col lg={24} md={24}>
@@ -125,7 +129,9 @@ class Dashboard extends PureComponent {
           </Col>
           <Col lg={8} md={24}>
             <Card bordered={false} {...bodyStyle}>
-              <Cpu {...cpu} />
+              <ScrollBar>
+                <Cpu {...cpu} />
+              </ScrollBar>
             </Card>
           </Col>
           <Col lg={8} md={24}>