mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-12 09:12:28 +08:00
fix: 优化部分无用代码及升级ui版本 🚀
This commit is contained in:
山人自有妙计
@@ -359,6 +359,7 @@
|
||||
margin: 0 5px 5px 0;
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
|
||||
.n-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -15,153 +15,153 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
|
||||
import { generatorMenu, generatorMenuMix } from '@/utils';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
|
||||
import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
|
||||
import { generatorMenu, generatorMenuMix } from '@/utils';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Menu',
|
||||
components: {},
|
||||
props: {
|
||||
mode: {
|
||||
// 菜单模式
|
||||
type: String,
|
||||
default: 'vertical',
|
||||
export default defineComponent({
|
||||
name: 'Menu',
|
||||
components: {},
|
||||
props: {
|
||||
mode: {
|
||||
// 菜单模式
|
||||
type: String,
|
||||
default: 'vertical',
|
||||
},
|
||||
collapsed: {
|
||||
// 侧边栏菜单是否收起
|
||||
type: Boolean,
|
||||
},
|
||||
//位置
|
||||
location: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
},
|
||||
},
|
||||
collapsed: {
|
||||
// 侧边栏菜单是否收起
|
||||
type: Boolean,
|
||||
},
|
||||
//位置
|
||||
location: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
},
|
||||
},
|
||||
emits: ['update:collapsed'],
|
||||
setup(props, { emit }) {
|
||||
// 当前路由
|
||||
const currentRoute = useRoute();
|
||||
const router = useRouter();
|
||||
const asyncRouteStore = useAsyncRouteStore();
|
||||
const settingStore = useProjectSettingStore();
|
||||
const menus = ref<any[]>([]);
|
||||
const selectedKeys = ref<string>(currentRoute.name as string);
|
||||
const headerMenuSelectKey = ref<string>('');
|
||||
emits: ['update:collapsed'],
|
||||
setup(props, { emit }) {
|
||||
// 当前路由
|
||||
const currentRoute = useRoute();
|
||||
const router = useRouter();
|
||||
const asyncRouteStore = useAsyncRouteStore();
|
||||
const settingStore = useProjectSettingStore();
|
||||
const menus = ref<any[]>([]);
|
||||
const selectedKeys = ref<string>(currentRoute.name as string);
|
||||
const headerMenuSelectKey = ref<string>('');
|
||||
|
||||
const { getNavMode } = useProjectSetting();
|
||||
const { getNavMode } = useProjectSetting();
|
||||
|
||||
const navMode = getNavMode;
|
||||
const navMode = getNavMode;
|
||||
|
||||
// 获取当前打开的子菜单
|
||||
const matched = currentRoute.matched;
|
||||
// 获取当前打开的子菜单
|
||||
const matched = currentRoute.matched;
|
||||
|
||||
const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
|
||||
const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
|
||||
|
||||
const state = reactive({
|
||||
openKeys: getOpenKeys,
|
||||
});
|
||||
const state = reactive({
|
||||
openKeys: getOpenKeys,
|
||||
});
|
||||
|
||||
const inverted = computed(() => {
|
||||
return ['dark', 'header-dark'].includes(settingStore.navTheme);
|
||||
});
|
||||
const inverted = computed(() => {
|
||||
return ['dark', 'header-dark'].includes(settingStore.navTheme);
|
||||
});
|
||||
|
||||
const getSelectedKeys = computed(() => {
|
||||
let location = props.location;
|
||||
return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
|
||||
? unref(selectedKeys)
|
||||
: unref(headerMenuSelectKey);
|
||||
});
|
||||
const getSelectedKeys = computed(() => {
|
||||
let location = props.location;
|
||||
return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
|
||||
? unref(selectedKeys)
|
||||
: unref(headerMenuSelectKey);
|
||||
});
|
||||
|
||||
// 监听分割菜单
|
||||
watch(
|
||||
() => settingStore.menuSetting.mixMenu,
|
||||
() => {
|
||||
updateMenu();
|
||||
if (props.collapsed) {
|
||||
emit('update:collapsed', !props.collapsed);
|
||||
// 监听分割菜单
|
||||
watch(
|
||||
() => settingStore.menuSetting.mixMenu,
|
||||
() => {
|
||||
updateMenu();
|
||||
if (props.collapsed) {
|
||||
emit('update:collapsed', !props.collapsed);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听菜单收缩状态
|
||||
// watch(
|
||||
// () => props.collapsed,
|
||||
// (newVal) => {
|
||||
// }
|
||||
// );
|
||||
|
||||
// 跟随页面路由变化，切换菜单选中状态
|
||||
watch(
|
||||
() => currentRoute.fullPath,
|
||||
() => {
|
||||
updateMenu();
|
||||
const matched = currentRoute.matched;
|
||||
state.openKeys = matched.map((item) => item.name);
|
||||
const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
|
||||
selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
|
||||
}
|
||||
);
|
||||
|
||||
function updateMenu() {
|
||||
if (!settingStore.menuSetting.mixMenu) {
|
||||
menus.value = generatorMenu(asyncRouteStore.getMenus);
|
||||
} else {
|
||||
//混合菜单
|
||||
const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
|
||||
menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
|
||||
const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
|
||||
headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听菜单收缩状态
|
||||
// watch(
|
||||
// () => props.collapsed,
|
||||
// (newVal) => {
|
||||
// }
|
||||
// );
|
||||
|
||||
// 跟随页面路由变化，切换菜单选中状态
|
||||
watch(
|
||||
() => currentRoute.fullPath,
|
||||
() => {
|
||||
updateMenu();
|
||||
const matched = currentRoute.matched;
|
||||
state.openKeys = matched.map((item) => item.name);
|
||||
const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
|
||||
selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
|
||||
}
|
||||
);
|
||||
|
||||
function updateMenu() {
|
||||
if (!settingStore.menuSetting.mixMenu) {
|
||||
menus.value = generatorMenu(asyncRouteStore.getMenus);
|
||||
} else {
|
||||
//混合菜单
|
||||
const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
|
||||
menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
|
||||
const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
|
||||
headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
|
||||
}
|
||||
}
|
||||
|
||||
// 点击菜单
|
||||
function clickMenuItem(key: string) {
|
||||
if (/http(s)?:/.test(key)) {
|
||||
window.open(key);
|
||||
} else {
|
||||
router.push({ name: key });
|
||||
}
|
||||
emit("clickMenuItem" as any, key)
|
||||
}
|
||||
|
||||
//展开菜单
|
||||
function menuExpanded(openKeys: string[]) {
|
||||
if (!openKeys) return;
|
||||
const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
|
||||
const isExistChildren = findChildrenLen(latestOpenKey as string);
|
||||
state.openKeys = isExistChildren ? (latestOpenKey ? [latestOpenKey] : []) : openKeys;
|
||||
}
|
||||
|
||||
//查找是否存在子路由
|
||||
function findChildrenLen(key: string) {
|
||||
if (!key) return false;
|
||||
const subRouteChildren: string[] = [];
|
||||
for (const { children, key } of unref(menus)) {
|
||||
if (children && children.length) {
|
||||
subRouteChildren.push(key as string);
|
||||
// 点击菜单
|
||||
function clickMenuItem(key: string) {
|
||||
if (/http(s)?:/.test(key)) {
|
||||
window.open(key);
|
||||
} else {
|
||||
router.push({ name: key });
|
||||
}
|
||||
emit('clickMenuItem' as any, key);
|
||||
}
|
||||
return subRouteChildren.includes(key);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateMenu();
|
||||
});
|
||||
//展开菜单
|
||||
function menuExpanded(openKeys: string[]) {
|
||||
if (!openKeys) return;
|
||||
const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
|
||||
const isExistChildren = findChildrenLen(latestOpenKey as string);
|
||||
state.openKeys = isExistChildren ? (latestOpenKey ? [latestOpenKey] : []) : openKeys;
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
inverted,
|
||||
menus,
|
||||
selectedKeys,
|
||||
headerMenuSelectKey,
|
||||
getSelectedKeys,
|
||||
clickMenuItem,
|
||||
menuExpanded,
|
||||
};
|
||||
},
|
||||
});
|
||||
//查找是否存在子路由
|
||||
function findChildrenLen(key: string) {
|
||||
if (!key) return false;
|
||||
const subRouteChildren: string[] = [];
|
||||
for (const { children, key } of unref(menus)) {
|
||||
if (children && children.length) {
|
||||
subRouteChildren.push(key as string);
|
||||
}
|
||||
}
|
||||
return subRouteChildren.includes(key);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateMenu();
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
inverted,
|
||||
menus,
|
||||
selectedKeys,
|
||||
headerMenuSelectKey,
|
||||
getSelectedKeys,
|
||||
clickMenuItem,
|
||||
menuExpanded,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<n-layout class="layout" :position="fixedMenu" has-sider>
|
||||
<n-layout-sider
|
||||
v-if="!isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')"
|
||||
v-if="
|
||||
!isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')
|
||||
"
|
||||
show-trigger="bar"
|
||||
@collapse="collapsed = true"
|
||||
:position="fixedMenu"
|
||||
@@ -67,208 +69,209 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, computed, onMounted } from 'vue';
|
||||
import { Logo } from './components/Logo';
|
||||
import { TabsView } from './components/TagsView';
|
||||
import { MainView } from './components/Main';
|
||||
import { AsideMenu } from './components/Menu';
|
||||
import { PageHeader } from './components/Header';
|
||||
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
|
||||
import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
|
||||
import { useLoadingBar } from 'naive-ui';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { ref, unref, computed, onMounted } from 'vue';
|
||||
import { Logo } from './components/Logo';
|
||||
import { TabsView } from './components/TagsView';
|
||||
import { MainView } from './components/Main';
|
||||
import { AsideMenu } from './components/Menu';
|
||||
import { PageHeader } from './components/Header';
|
||||
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
|
||||
import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
|
||||
import { useLoadingBar } from 'naive-ui';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
|
||||
const { getDarkTheme } = useDesignSetting();
|
||||
const {
|
||||
getShowFooter,
|
||||
getNavMode,
|
||||
getNavTheme,
|
||||
getHeaderSetting,
|
||||
getMenuSetting,
|
||||
getMultiTabsSetting,
|
||||
} = useProjectSetting();
|
||||
const { getDarkTheme } = useDesignSetting();
|
||||
const {
|
||||
// getShowFooter,
|
||||
getNavMode,
|
||||
getNavTheme,
|
||||
getHeaderSetting,
|
||||
getMenuSetting,
|
||||
getMultiTabsSetting,
|
||||
} = useProjectSetting();
|
||||
|
||||
const settingStore = useProjectSettingStore();
|
||||
const settingStore = useProjectSettingStore();
|
||||
|
||||
const navMode = getNavMode;
|
||||
const navMode = getNavMode;
|
||||
|
||||
const collapsed = ref<boolean>(false);
|
||||
const collapsed = ref<boolean>(false);
|
||||
|
||||
const { mobileWidth, menuWidth } = unref(getMenuSetting);
|
||||
const { mobileWidth, menuWidth } = unref(getMenuSetting);
|
||||
|
||||
const isMobile = computed<boolean>({
|
||||
get: () => settingStore.getIsMobile,
|
||||
set: (val) => settingStore.setIsMobile(val)
|
||||
});
|
||||
const isMobile = computed<boolean>({
|
||||
get: () => settingStore.getIsMobile,
|
||||
set: (val) => settingStore.setIsMobile(val),
|
||||
});
|
||||
|
||||
const fixedHeader = computed(() => {
|
||||
const { fixed } = unref(getHeaderSetting);
|
||||
return fixed ? 'absolute' : 'static';
|
||||
});
|
||||
const fixedHeader = computed(() => {
|
||||
const { fixed } = unref(getHeaderSetting);
|
||||
return fixed ? 'absolute' : 'static';
|
||||
});
|
||||
|
||||
const isMixMenuNoneSub = computed(() => {
|
||||
const mixMenu = settingStore.menuSetting.mixMenu;
|
||||
const currentRoute = useRoute();
|
||||
if (unref(navMode) != 'horizontal-mix') return true;
|
||||
if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
const isMixMenuNoneSub = computed(() => {
|
||||
const mixMenu = settingStore.menuSetting.mixMenu;
|
||||
const currentRoute = useRoute();
|
||||
if (unref(navMode) != 'horizontal-mix') return true;
|
||||
if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
const fixedMenu = computed(() => {
|
||||
const { fixed } = unref(getHeaderSetting);
|
||||
return fixed ? 'absolute' : 'static';
|
||||
});
|
||||
const fixedMenu = computed(() => {
|
||||
const { fixed } = unref(getHeaderSetting);
|
||||
return fixed ? 'absolute' : 'static';
|
||||
});
|
||||
|
||||
const isMultiTabs = computed(() => {
|
||||
return unref(getMultiTabsSetting).show;
|
||||
});
|
||||
const isMultiTabs = computed(() => {
|
||||
return unref(getMultiTabsSetting).show;
|
||||
});
|
||||
|
||||
const fixedMulti = computed(() => {
|
||||
return unref(getMultiTabsSetting).fixed;
|
||||
});
|
||||
const fixedMulti = computed(() => {
|
||||
return unref(getMultiTabsSetting).fixed;
|
||||
});
|
||||
|
||||
const inverted = computed(() => {
|
||||
return ['dark', 'header-dark'].includes(unref(getNavTheme));
|
||||
});
|
||||
const inverted = computed(() => {
|
||||
return ['dark', 'header-dark'].includes(unref(getNavTheme));
|
||||
});
|
||||
|
||||
const getHeaderInverted = computed(() => {
|
||||
const navTheme = unref(getNavTheme);
|
||||
return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
|
||||
});
|
||||
const getHeaderInverted = computed(() => {
|
||||
const navTheme = unref(getNavTheme);
|
||||
return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
|
||||
});
|
||||
|
||||
const leftMenuWidth = computed(() => {
|
||||
const { minMenuWidth, menuWidth } = unref(getMenuSetting);
|
||||
return collapsed.value ? minMenuWidth : menuWidth;
|
||||
});
|
||||
const leftMenuWidth = computed(() => {
|
||||
const { minMenuWidth, menuWidth } = unref(getMenuSetting);
|
||||
return collapsed.value ? minMenuWidth : menuWidth;
|
||||
});
|
||||
|
||||
const getChangeStyle = computed(() => {
|
||||
const { minMenuWidth, menuWidth } = unref(getMenuSetting);
|
||||
return {
|
||||
'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
|
||||
// const getChangeStyle = computed(() => {
|
||||
// const { minMenuWidth, menuWidth } = unref(getMenuSetting);
|
||||
// return {
|
||||
// 'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
|
||||
// };
|
||||
// });
|
||||
|
||||
const getMenuLocation = computed(() => {
|
||||
return 'left';
|
||||
});
|
||||
|
||||
// 控制显示或隐藏移动端侧边栏
|
||||
const showSideDrawder = computed({
|
||||
get: () => isMobile.value && collapsed.value,
|
||||
set: (val) => (collapsed.value = val),
|
||||
});
|
||||
|
||||
//判断是否触发移动端模式
|
||||
const checkMobileMode = () => {
|
||||
if (document.body.clientWidth <= mobileWidth) {
|
||||
isMobile.value = true;
|
||||
} else {
|
||||
isMobile.value = false;
|
||||
}
|
||||
collapsed.value = false;
|
||||
};
|
||||
});
|
||||
|
||||
const getMenuLocation = computed(() => {
|
||||
return 'left';
|
||||
});
|
||||
const watchWidth = () => {
|
||||
const Width = document.body.clientWidth;
|
||||
if (Width <= 950) {
|
||||
collapsed.value = true;
|
||||
} else collapsed.value = false;
|
||||
|
||||
// 控制显示或隐藏移动端侧边栏
|
||||
const showSideDrawder = computed({
|
||||
get: () => isMobile.value && collapsed.value,
|
||||
set: (val) => (collapsed.value = val)
|
||||
});
|
||||
checkMobileMode();
|
||||
};
|
||||
|
||||
//判断是否触发移动端模式
|
||||
const checkMobileMode = () => {
|
||||
if (document.body.clientWidth <= mobileWidth) {
|
||||
isMobile.value = true;
|
||||
} else {
|
||||
isMobile.value = false;
|
||||
}
|
||||
collapsed.value = false;
|
||||
}
|
||||
|
||||
const watchWidth = () => {
|
||||
const Width = document.body.clientWidth;
|
||||
if (Width <= 950) {
|
||||
collapsed.value = true;
|
||||
} else collapsed.value = false;
|
||||
|
||||
checkMobileMode();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
checkMobileMode();
|
||||
window.addEventListener('resize', watchWidth);
|
||||
//挂载在 window 方便与在js中使用
|
||||
window['$loading'] = useLoadingBar();
|
||||
window['$loading'].finish();
|
||||
});
|
||||
onMounted(() => {
|
||||
checkMobileMode();
|
||||
window.addEventListener('resize', watchWidth);
|
||||
//挂载在 window 方便与在js中使用
|
||||
window['$loading'] = useLoadingBar();
|
||||
window['$loading'].finish();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.layout-side-drawer {
|
||||
background-color: rgb(0, 20, 40);
|
||||
.layout-sider {
|
||||
min-height: 100vh;
|
||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||
position: relative;
|
||||
z-index: 13;
|
||||
transition: all 0.2s ease-in-out;
|
||||
.layout-side-drawer {
|
||||
background-color: rgb(0, 20, 40);
|
||||
|
||||
.layout-sider {
|
||||
min-height: 100vh;
|
||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||
position: relative;
|
||||
z-index: 13;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: auto;
|
||||
|
||||
&-default-background {
|
||||
background: #f5f7f9;
|
||||
}
|
||||
|
||||
.layout-sider {
|
||||
min-height: 100vh;
|
||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||
position: relative;
|
||||
z-index: 13;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.layout-sider-fix {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-right-fix {
|
||||
overflow-x: hidden;
|
||||
padding-left: 200px;
|
||||
min-height: 100vh;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: auto;
|
||||
min-height: 100vh;
|
||||
|
||||
&-default-background {
|
||||
background: #f5f7f9;
|
||||
}
|
||||
|
||||
.layout-sider {
|
||||
min-height: 100vh;
|
||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||
position: relative;
|
||||
z-index: 13;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.layout-sider-fix {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-right-fix {
|
||||
overflow-x: hidden;
|
||||
padding-left: 200px;
|
||||
min-height: 100vh;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.n-layout-header.n-layout-header--absolute-positioned {
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.n-layout-footer {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.n-layout-header.n-layout-header--absolute-positioned {
|
||||
z-index: 11;
|
||||
.layout-content-main {
|
||||
margin: 0 10px 10px;
|
||||
position: relative;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.n-layout-footer {
|
||||
background: none;
|
||||
.layout-content-main-fix {
|
||||
padding-top: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-content-main {
|
||||
margin: 0 10px 10px;
|
||||
position: relative;
|
||||
padding-top: 64px;
|
||||
}
|
||||
.fluid-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.layout-content-main-fix {
|
||||
padding-top: 64px;
|
||||
}
|
||||
.main-view-fix {
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
||||
.fluid-header {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.main-view-fix {
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
||||
.noMultiTabs {
|
||||
padding-top: 0;
|
||||
}
|
||||
.noMultiTabs {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user