소스 검색

Fix#1640 Floating Component Style Issues

陈帅 7 년 전
부모
커밋
904ca0aeff
4개의 변경된 파일11개의 추가작업 그리고 11개의 파일을 삭제
  1. 0 7
      src/components/GlobalHeader/index.less
  2. 4 2
      src/components/SiderMenu/SliderMenu.js
  3. 5 0
      src/components/SiderMenu/index.less
  4. 2 2
      src/layouts/BasicLayout.js

+ 0 - 7
src/components/GlobalHeader/index.less

@@ -8,13 +8,6 @@
   position: relative;
 }
 
-:global {
-  .ant-layout {
-    min-height: 100vh;
-    overflow-x: hidden;
-  }
-}
-
 .logo {
   height: 64px;
   line-height: 58px;

+ 4 - 2
src/components/SiderMenu/SliderMenu.js

@@ -220,7 +220,7 @@ export default class SiderMenu extends PureComponent {
     });
   };
   render() {
-    const { logo, collapsed, onCollapse, theme } = this.props;
+    const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
     const { openKeys } = this.state;
     const defaultProps = collapsed ? {} : { openKeys };
     return (
@@ -231,7 +231,9 @@ export default class SiderMenu extends PureComponent {
         breakpoint="lg"
         onCollapse={onCollapse}
         width={256}
-        className={`${styles.sider} ${theme === 'light' ? styles.light : ''}`}
+        className={`${styles.sider} ${fixSiderbar ? styles.fixSiderbar : ''} ${
+          theme === 'light' ? styles.light : ''
+        }`}
       >
         <div className={styles.logo} key="logo" id="logo">
           <Link to="/">

+ 5 - 0
src/components/SiderMenu/index.less

@@ -29,6 +29,11 @@
   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
   position: relative;
   z-index: 10;
+  &.fixSiderbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
   &.light {
     box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
     background-color: white;

+ 2 - 2
src/layouts/BasicLayout.js

@@ -84,10 +84,10 @@ class BasicLayout extends React.PureComponent {
     return title;
   }
   getLayoutStyle = () => {
-    const { fixSiderbar } = this.props;
+    const { fixSiderbar, collapsed } = this.props;
     if (fixSiderbar) {
       return {
-        height: '100vh',
+        paddingLeft: collapsed ? '80px' : '256px',
       };
     }
     return null;