diff --git a/src/components/SettingDarwer/index.js b/src/components/SettingDarwer/index.js
index ce8c6abb3f6d3093df8bfcb8f3f5a31d85eb41d0..4ee20fff779ed52c126801272de2d07c142c0b7e 100644
--- a/src/components/SettingDarwer/index.js
+++ b/src/components/SettingDarwer/index.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Select, message, List, Switch, Divider } from 'antd';
+import { Select, message, List, Switch, Divider, Icon } from 'antd';
 import DrawerMenu from 'rc-drawer-menu';
 import { connect } from 'dva';
 import styles from './index.less';
@@ -125,17 +125,30 @@ class SettingDarwer extends PureComponent {
     const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting;
     return (
       <div className={styles.settingDarwer}>
-        <div className={styles.mini_bar} onClick={this.togglerContent}>
-          <img
-            alt="logo"
-            src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
-          />
-        </div>
         <DrawerMenu
           parent={null}
           level={null}
-          handleChild={null}
           open={collapse}
+          onHandleClick={this.togglerContent}
+          handleChild={
+            !collapse ? (
+              <Icon
+                type="setting"
+                style={{
+                  color: '#FFF',
+                  fontSize: 20,
+                }}
+              />
+            ) : (
+              <Icon
+                type="close"
+                style={{
+                  color: '#FFF',
+                  fontSize: 20,
+                }}
+              />
+            )
+          }
           placement="right"
           width="336px"
           style={{
diff --git a/src/components/SettingDarwer/index.less b/src/components/SettingDarwer/index.less
index 5b196af21329bf58098601c4a1c0c226eb987cdc..ca0cb4d3d095aa40d027529e8a9d030595949133 100644
--- a/src/components/SettingDarwer/index.less
+++ b/src/components/SettingDarwer/index.less
@@ -1,32 +1,5 @@
 @import '~antd/lib/style/themes/default.less';
 
-.settingDarwer {
-  .mini_bar {
-    width: 50px;
-    height: 45px;
-    border-top-left-radius: 28px;
-    border-bottom-left-radius: 28px;
-    text-align: center;
-    font-size: 24px;
-    background: white;
-    position: fixed;
-    bottom: 50px;
-    right: 50px;
-    cursor: pointer;
-    z-index: 99;
-    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
-    img {
-      width: 28px;
-      height: 28px;
-    }
-  }
-  :global {
-    .drawer {
-      z-index: 999;
-    }
-  }
-}
-
 .content {
   width: 273px;
   height: 100%;
@@ -75,3 +48,17 @@
   line-height: 22px;
   margin-bottom: 12px;
 }
+
+:global {
+  .drawer-handle {
+    top: 240px;
+    background: #1890ff;
+    width: 57px;
+    height: 48px;
+    padding: 14px 18px;
+    padding-left: 24px;
+  }
+  .drawer-right .drawer-handle {
+    left: -57px;
+  }
+}