From 7eb045c65112f7c9be7894298ea9b4f769ea112d Mon Sep 17 00:00:00 2001 From: jim Date: Fri, 13 Apr 2018 10:15:20 +0800 Subject: [PATCH] Modify the style --- src/components/Sidebar/index.js | 164 +++++++++++++++--------------- src/components/Sidebar/index.less | 71 ++++++------- 2 files changed, 117 insertions(+), 118 deletions(-) diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index bfd893a8..c56e7f69 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -1,5 +1,6 @@ import React, { PureComponent, Fragment } from 'react'; import { Select, List, Switch, Divider, Radio } from 'antd'; +import DrawerMenu from 'rc-drawer-menu'; import styles from './index.less'; import ThemeColor from './ThemeColor'; import LayoutSeting from './LayoutSetting'; @@ -90,16 +91,11 @@ class Sidebar extends PureComponent { { title: 'Fix Siderbar', isShow: layout === 'sidemenu', - action: [ - , - ], + action: [], }, ].filter(item => item.isShow); }; - fixSiderbar = (checked) => { + fixSiderbar = checked => { this.changeSetting('fixSiderbar', checked); }; changeSetting = (key, value) => { @@ -118,9 +114,9 @@ class Sidebar extends PureComponent { } }); }; - propsToState = (props) => { + propsToState = props => { const nextState = {}; - Object.keys(props).forEach((key) => { + Object.keys(props).forEach(key => { if (props[key] && this.defaultstate[key] !== undefined) { nextState[key] = props[key]; } @@ -135,82 +131,84 @@ class Sidebar extends PureComponent { display: 'block', }; return ( -
-
- logo -
-
- - - this.changeSetting('silderTheme', target.value) - } - value={this.state.silderTheme} - > - - - - - - - - this.changeSetting('themeColor', color)} - /> - - - - this.changeSetting('layout', layout)} - /> - ( - {item.title} - )} + <> +
+
+ logo - - - - this.changeSetting('colorWeak', value)} - style={{ width: 120 }} - > - 打开 - 关闭 - , - ], - }, - ]} - renderItem={item => ( - {item.title} - )} - /> - +
-
+ +
+ + this.changeSetting('silderTheme', target.value)} + value={this.state.silderTheme} + > + + + + + + + + this.changeSetting('themeColor', color)} + /> + + + + this.changeSetting('layout', layout)} + /> + {item.title}} + /> + + + + this.changeSetting('colorWeak', value)} + style={{ width: 120 }} + > + 打开 + 关闭 + , + ], + }, + ]} + renderItem={item => {item.title}} + /> + +
+ + ); } } diff --git a/src/components/Sidebar/index.less b/src/components/Sidebar/index.less index 78a62183..8bf6017f 100644 --- a/src/components/Sidebar/index.less +++ b/src/components/Sidebar/index.less @@ -16,47 +16,48 @@ text-align: center; font-size: 24px; background: white; + position: fixed; + bottom: 50px; + right: 50px; box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35); img { width: 28px; height: 28px; } } - .content { - width: 336px; - background: white; - box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35); - box-shadow: -3px 0 10px 3px rgba(183, 183, 183, 0.3); - :global { - .ant-switch-checked { - background-color: #87d068; - } - .ant-list-item { - padding-top: 7px; - padding-bottom: 7px; - } +} + +.content { + width: 336px; + :global { + .ant-switch-checked { + background-color: #87d068; + } + .ant-list-item { + padding-top: 7px; + padding-bottom: 7px; } } - .color_block { - width: 38px; - height: 22px; - margin: 4px; - margin-right: 12px; - display: inline-block; - vertical-align: middle; - background: #002140; - border-radius: 2px; - } - .color_block_title { - display: inline-block; - font-size: 14px; - color: rgba(0, 0, 0, 0.65); - line-height: 22px; - } - .bodyTitle { - font-size: 14px; - color: rgba(0, 0, 0, 0.85); - line-height: 22px; - margin-bottom: 10px; - } +} +.color_block { + width: 38px; + height: 22px; + margin: 4px; + margin-right: 12px; + display: inline-block; + vertical-align: middle; + background: #002140; + border-radius: 2px; +} +.color_block_title { + display: inline-block; + font-size: 14px; + color: rgba(0, 0, 0, 0.65); + line-height: 22px; +} +.bodyTitle { + font-size: 14px; + color: rgba(0, 0, 0, 0.85); + line-height: 22px; + margin-bottom: 10px; } -- GitLab