Sfoglia il codice sorgente

Fix#1640 Floating Component Style Issues

陈帅 7 anni fa
parent
commit
904ca0aeff

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

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

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

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

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

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

+ 2 - 2
src/layouts/BasicLayout.js

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