Browse Source

style: 修复样式问题

i18n
xiaoxian521 3 years ago
parent
commit
997e31e7be
  1. 2
      public/serverConfig.json
  2. 17
      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",
"Title": "PureAdmin",
"FixedHeader": false,
"FixedHeader": true,
"HiddenSideBar": false,
"KeepAlive": true,
"Locale": "zh",

17
src/layout/components/appMain.vue

@ -15,6 +15,7 @@ const transition = computed(() => {
<template>
<section class="app-main">
<el-scrollbar>
<router-view>
<template #default="{ Component, route }">
<transition
@ -45,27 +46,15 @@ const transition = computed(() => {
</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>

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

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

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

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

Loading…
Cancel
Save