diff --git a/packages/app/src/components/Layout/bottomBar/index.less b/packages/app/src/components/Layout/bottomBar/index.less index 5a5da703..a0e53753 100755 --- a/packages/app/src/components/Layout/bottomBar/index.less +++ b/packages/app/src/components/Layout/bottomBar/index.less @@ -8,8 +8,7 @@ align-items: center; justify-content: center; - position: fixed; - z-index: 9999; + position: relative; left: 0; bottom: 0; diff --git a/packages/app/src/layouts/mobile/index.jsx b/packages/app/src/layouts/mobile/index.jsx index 0131f103..747521be 100755 --- a/packages/app/src/layouts/mobile/index.jsx +++ b/packages/app/src/layouts/mobile/index.jsx @@ -9,9 +9,11 @@ export default (props) => { -
+
+
{React.cloneElement(props.children, props)}
+
diff --git a/packages/app/src/theme/mobile.less b/packages/app/src/theme/mobile.less index 02b482cc..4b10aa93 100644 --- a/packages/app/src/theme/mobile.less +++ b/packages/app/src/theme/mobile.less @@ -1,7 +1,57 @@ +@frameDecorator_height: 20px; + .app_layout { &.mobile { - padding: 10px; + display: flex; + flex-direction: column; + padding: 0; + + .content_wrapper { + height: 100%; + width: 100%; + overflow-y: scroll; + padding-top: 20px; + } + + .content_layout { + display: flex; + flex-direction: column; + + overflow: hidden; + align-items: center; + justify-content: center; + + width: 100vw; + padding: 0 10px; + } + + .frameDecorator { + position: absolute; + left: 0; + + z-index: 8000; + + width: 100vw; + height: @frameDecorator_height; + + background-color: rgba(var(--layoutBackgroundColor), 0.8); + + filter: blur(4px); + backdrop-filter: blur(10px); + + &.top { + top: 0; + transform: translate(0, -6px); + } + + &.bottom { + bottom: 0; + transform: translate(0, 6px); + } + } + + // FIXMETS FOR MOBILE LAYOUT .loginPage { flex-direction: column;