From 702fd9c6229f81815b2e5ad2748e62720806fd9a Mon Sep 17 00:00:00 2001
From: yehuozhili <yehuozhili@outlook.com>
Date: Fri, 25 Sep 2020 13:27:59 +0800
Subject: [PATCH] fix scroll add reset ball

---
 src/layouts/index.tsx          |  2 +-
 src/pages/editor/Container.tsx |  5 +++++
 src/pages/editor/index.less    | 22 ++++++++++++++++------
 src/pages/home/index.tsx       |  7 ++++++-
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index aed9628..2de5cf8 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -47,7 +47,7 @@ export default function Layout({ children }: IRouteComponentProps) {
     <div>welcome!欢迎使用h5-Dooring，你有任何问题，都可以咨询我哦～</div>,
   );
   return (
-    <div>
+    <div style={{ height: '100%', width: '100%' }}>
       <div
         style={{
           position: 'fixed',
diff --git a/src/pages/editor/Container.tsx b/src/pages/editor/Container.tsx
index b17b4c7..5500eb1 100644
--- a/src/pages/editor/Container.tsx
+++ b/src/pages/editor/Container.tsx
@@ -5,6 +5,7 @@ import {
   ExpandOutlined,
   PlayCircleOutlined,
   HighlightOutlined,
+  ReloadOutlined,
 } from '@ant-design/icons';
 import TextLoop from 'react-text-loop';
 import { connect } from 'dva';
@@ -194,7 +195,11 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
             canvasId={canvasId}
             allType={allType}
           />
+          <div className={styles.resetBall}>
+            <ReloadOutlined onClick={() => setDragState({ x: 0, y: 0 })} />
+          </div>
           <div className={styles.controllBall}>{render}</div>
+
           <div className={styles.sliderWrap}>
             <span className={styles.sliderBtn} onClick={handleSlider.bind(this, 1)}>
               +
diff --git a/src/pages/editor/index.less b/src/pages/editor/index.less
index 6060715..ea4a6e7 100644
--- a/src/pages/editor/index.less
+++ b/src/pages/editor/index.less
@@ -1,19 +1,24 @@
 .layout {
+  height: 100%;
+  width: 100%;
   .editorWrap {
     background-color: rgba(245, 245, 245, 1);
+    height: 100%;
+    width: 100%;
   }
   .container {
-    width: 100vw;
+    width: 100%; //写vw产生滚动条会出现横向滚动条
     // height: 100vh;
+    height: calc(100% - 56px);
     display: flex;
     .list {
       width: 350px;
-      height: 100vh;
+      height: 100%;
       padding: 10px 16px 16px;
       box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
       display: inline-block;
       background-color: #fff;
-      overflow: scroll;
+      overflow: auto;
       .searchBar {
         margin-bottom: 20px;
       }
@@ -42,7 +47,7 @@
     .tickMark {
       width: calc(100% - 750px);
       overflow: hidden;
-      height: 100vh;
+      height: 100%;
       position: relative;
       .tickMarkTop {
         width: 100%;
@@ -92,6 +97,11 @@
           }
         }
       }
+      .resetBall {
+        position: absolute;
+        right: 24px;
+        bottom: 445px;
+      }
       .controllBall {
         position: absolute;
         bottom: 380px;
@@ -128,9 +138,9 @@
       width: 400px;
       padding: 20px 0 20px 20px;
       background: #fff;
-      height: 100vh;
+      height: 100%;
       box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.1);
-      overflow: scroll;
+      overflow: auto;
       .tit {
         margin-bottom: 16px;
         font-size: 18px;
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 82014b4..a1cc53a 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -82,7 +82,12 @@ const Home = () => {
             <a href="https://github.com/MrXujiang/h5-Dooring">
               <GithubOutlined />
             </a>
-            <p>Welcome to H5-Dooring 👋</p>
+            <p>
+              Welcome to H5-Dooring{' '}
+              <span role="img" aria-label="welcome">
+                👋
+              </span>
+            </p>
           </div>
         </footer>
       </div>