style: 修复样式问题

public/serverConfig.json

@@ -1,7 +1,7 @@
 {
   "Version": "2.1.0",
   "Title": "PureAdmin",
-  "FixedHeader": false,
+  "FixedHeader": true,
   "HiddenSideBar": false,
   "KeepAlive": true,
   "Locale": "zh",

src/layout/components/appMain.vue

@@ -15,57 +15,46 @@ const transition = computed(() => {
 
 <template>
   <section class="app-main">
-    <router-view>
-      <template #default="{ Component, route }">
-        <transition
-          :name="
-            transition(route) && route.meta.transition.enterTransition
-              ? 'pure-classes-transition'
-              : (transition(route) && route.meta.transition.name) ||
-                'fade-transform'
-          "
-          :enter-active-class="
-            transition(route) &&
-            `animate__animated ${route.meta.transition.enterTransition}`
-          "
-          :leave-active-class="
-            transition(route) &&
-            `animate__animated ${route.meta.transition.leaveTransition}`
-          "
-          mode="out-in"
-          appear
-        >
-          <keep-alive
-            v-if="keepAlive"
-            :include="usePermissionStoreHook().cachePageList"
+    <el-scrollbar>
+      <router-view>
+        <template #default="{ Component, route }">
+          <transition
+            :name="
+              transition(route) && route.meta.transition.enterTransition
+                ? 'pure-classes-transition'
+                : (transition(route) && route.meta.transition.name) ||
+                  'fade-transform'
+            "
+            :enter-active-class="
+              transition(route) &&
+              `animate__animated ${route.meta.transition.enterTransition}`
+            "
+            :leave-active-class="
+              transition(route) &&
+              `animate__animated ${route.meta.transition.leaveTransition}`
+            "
+            mode="out-in"
+            appear
           >
-            <component :is="Component" :key="route.fullPath" />
-          </keep-alive>
-          <component v-else :is="Component" :key="route.fullPath" />
-        </transition>
-      </template>
-    </router-view>
+            <keep-alive
+              v-if="keepAlive"
+              :include="usePermissionStoreHook().cachePageList"
+            >
+              <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+            <component v-else :is="Component" :key="route.fullPath" />
+          </transition>
+        </template>
+      </router-view>
+    </el-scrollbar>
   </section>
 </template>
 
 <style scoped>
 .app-main {
-  min-height: calc(100vh - 70px);
   width: 100%;
-  height: 90vh;
+  height: 100vh;
   position: relative;
   overflow-x: hidden;
 }
-
-.fixed-header + .app-main {
-  padding-top: 50px;
-}
-</style>
-
-<style lang="scss">
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
-}
 </style>

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;
 }

src/plugins/vxe-table/index.ts

@@ -51,7 +51,7 @@ import {
 VXETable.setup({
   size: "medium",
   version: 0,
-  zIndex: 100,
+  zIndex: 1002,
   table: {
     // 自动监听父元素的变化去重新计算表格
     autoResize: true,

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;