Browse Source

style: 修复样式问题

i18n
xiaoxian521 3 years ago
parent
commit
997e31e7be
  1. 2
      public/serverConfig.json
  2. 75
      src/layout/components/appMain.vue
  3. 13
      src/layout/index.vue
  4. 2
      src/plugins/vxe-table/index.ts
  5. 32
      src/style/sidebar.scss

2
public/serverConfig.json

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

75
src/layout/components/appMain.vue

@ -15,57 +15,46 @@ const transition = computed(() => {
<template> <template>
<section class="app-main"> <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> </section>
</template> </template>
<style scoped> <style scoped>
.app-main { .app-main {
min-height: calc(100vh - 70px);
width: 100%; width: 100%;
height: 90vh;
height: 100vh;
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
} }
.fixed-header + .app-main {
padding-top: 50px;
}
</style>
<style lang="scss">
.el-popup-parent--hidden {
.fixed-header {
padding-right: 15px;
}
}
</style> </style>

13
src/layout/index.vue

@ -234,19 +234,6 @@ onBeforeMount(() => {
z-index: 999; 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 { .re-screen {
margin-top: 12px; margin-top: 12px;
} }

2
src/plugins/vxe-table/index.ts

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

32
src/style/sidebar.scss

@ -23,6 +23,15 @@
position: relative; 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 { .el-popper.is-light {
border: none !important; border: none !important;
} }
@ -402,6 +411,11 @@
// 手机端 // 手机端
.mobile { .mobile {
.fixed-header {
width: 100% !important;
transition: width 0.28s;
}
.main-container { .main-container {
margin-left: 0 !important; margin-left: 0 !important;
} }
@ -429,9 +443,14 @@
} }
body[data-layout="vertical"] { body[data-layout="vertical"] {
.fixed-header + .app-main {
padding-top: 85px;
}
.hideSidebar { .hideSidebar {
.fixed-header { .fixed-header {
width: calc(100% - 54px);
width: calc(100% - 54px) !important;
transition: width 0.28s;
} }
.sidebar-container { .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模式下暗色主题 // vertical模式下暗色主题
body[data-layout="vertical"][data-theme="dark"] { body[data-layout="vertical"][data-theme="dark"] {
$subMenuActiveText: #f4f4f5; $subMenuActiveText: #f4f4f5;

Loading…
Cancel
Save