|
|
@ -1,9 +1,10 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<a-layout :class="['admin-layout', fixedSideBar ? 'fixed-side-bar' : '', 'beauty-scroll']"> |
|
|
|
<a-layout :class="['admin-layout', 'beauty-scroll']"> |
|
|
|
<drawer v-if="isMobile" v-model="collapsed"> |
|
|
|
<drawer v-if="isMobile" v-model="collapsed"> |
|
|
|
<side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/> |
|
|
|
<side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/> |
|
|
|
</drawer> |
|
|
|
</drawer> |
|
|
|
<side-menu :theme="theme.mode" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" /> |
|
|
|
<side-menu :class="[fixedSideBar ? 'fixed-side' : '']" :theme="theme.mode" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" /> |
|
|
|
|
|
|
|
<div v-if="fixedSideBar" :style="`width: ${sideMenuWidth}`" class="virtual-side"></div> |
|
|
|
<drawer v-if="!hideSetting" v-model="showSetting" placement="right"> |
|
|
|
<drawer v-if="!hideSetting" v-model="showSetting" placement="right"> |
|
|
|
<div class="setting" slot="handler"> |
|
|
|
<div class="setting" slot="handler"> |
|
|
|
<a-icon :type="showSetting ? 'close' : 'setting'"/> |
|
|
|
<a-icon :type="showSetting ? 'close' : 'setting'"/> |
|
|
@ -78,12 +79,17 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
<style lang="less" scoped> |
|
|
|
.admin-layout{ |
|
|
|
.admin-layout{ |
|
|
|
&.fixed-side-bar{ |
|
|
|
.side-menu{ |
|
|
|
height: 100vh; |
|
|
|
&.fixed-side{ |
|
|
|
.admin-layout-main{ |
|
|
|
position: fixed; |
|
|
|
overflow: scroll; |
|
|
|
left: 0; |
|
|
|
|
|
|
|
top: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.virtual-side{ |
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
|
|
transition: width 0.2s; |
|
|
|
|
|
|
|
} |
|
|
|
.admin-layout-main{ |
|
|
|
.admin-layout-main{ |
|
|
|
.admin-header{ |
|
|
|
.admin-header{ |
|
|
|
top: 0; |
|
|
|
top: 0; |
|
|
|