diff --git a/public/serverConfig.json b/public/serverConfig.json index b265b7071..23097b9ee 100644 --- a/public/serverConfig.json +++ b/public/serverConfig.json @@ -1,7 +1,7 @@ { "Version": "2.0.0", "Title": "PureAdmin", - "FixedHeader": false, + "FixedHeader": true, "HiddenSideBar": false, "KeepAlive": true, "Locale": "zh", diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue index 49c9d15dc..a31254e4a 100644 --- a/src/layout/components/appMain.vue +++ b/src/layout/components/appMain.vue @@ -50,22 +50,9 @@ const transition = computed(() => { - - diff --git a/src/layout/index.vue b/src/layout/index.vue index 266fa0885..f4c71630c 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -234,19 +234,6 @@ onBeforeMount(() => { z-index: 999; } -.fixed-header { - position: fixed; - top: 0; - right: 0; - z-index: 9; - width: calc(100% - 210px); - transition: width 0.28s; -} - -.mobile .fixed-header { - width: 100%; -} - .re-screen { margin-top: 12px; } diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index 79fb07802..53768a0a6 100644 --- a/src/style/sidebar.scss +++ b/src/style/sidebar.scss @@ -23,6 +23,15 @@ position: relative; } + .fixed-header { + position: fixed; + top: 0; + right: 0; + z-index: 9; + width: calc(100% - 210px); + transition: width 0.28s; + } + .el-popper.is-light { border: none !important; } @@ -402,6 +411,11 @@ // 手机端 .mobile { + .fixed-header { + width: 100% !important; + transition: width 0.28s; + } + .main-container { margin-left: 0 !important; } @@ -429,9 +443,14 @@ } body[data-layout="vertical"] { + .fixed-header + .app-main { + padding-top: 85px; + } + .hideSidebar { .fixed-header { - width: calc(100% - 54px); + width: calc(100% - 54px) !important; + transition: width 0.28s; } .sidebar-container { @@ -478,6 +497,17 @@ body[data-layout="vertical"] { } } +body[data-layout="horizontal"] { + .fixed-header { + width: 100% !important; + transition: none !important; + } + + .fixed-header + .app-main { + padding-top: 98px; + } +} + // vertical模式下暗色主题 body[data-layout="vertical"][data-theme="dark"] { $subMenuActiveText: #f4f4f5;