|
|
<template>
|
|
|
<div :class="classObj" class="app-wrapper">
|
|
|
<!-- 头部区域，独占一行 -->
|
|
|
<div class="header-container">
|
|
|
<navbar /> <!-- 导航栏组件 -->
|
|
|
</div>
|
|
|
|
|
|
<!-- 主内容区域 -->
|
|
|
<div class="main-container">
|
|
|
<!-- 左侧边栏 -->
|
|
|
<sidebar class="sidebar-container" />
|
|
|
<div style="display: flex;flex-direction: column;width: 100%;">
|
|
|
<!-- 面包屑 -->
|
|
|
<div class="breadword-container">
|
|
|
<Breadword></Breadword>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧内容区域 -->
|
|
|
<div class="content-container">
|
|
|
<app-main style="background-color: #FAFAFA;" />
|
|
|
</div>
|
|
|
<!-- <el-backtop target=".content-container" :visibility-height = "0"></el-backtop> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<right-panel>
|
|
|
<settings />
|
|
|
</right-panel>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import RightPanel from '@/components/RightPanel'
|
|
|
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
|
|
import ResizeMixin from './mixin/ResizeHandler'
|
|
|
import { mapState } from 'vuex'
|
|
|
import variables from '@/assets/styles/variables.scss'
|
|
|
import Breadword from './components/breadword.vue'
|
|
|
|
|
|
export default {
|
|
|
name: 'Layout',
|
|
|
components: {
|
|
|
AppMain,
|
|
|
Navbar,
|
|
|
RightPanel,
|
|
|
Settings,
|
|
|
Sidebar,
|
|
|
TagsView,
|
|
|
Breadword
|
|
|
},
|
|
|
mixins: [ResizeMixin],
|
|
|
computed: {
|
|
|
...mapState({
|
|
|
theme: state => state.settings.theme,
|
|
|
sideTheme: state => state.settings.sideTheme,
|
|
|
sidebar: state => state.app.sidebar,
|
|
|
needTagsView: state => state.settings.tagsView,
|
|
|
fixedHeader: state => state.settings.fixedHeader
|
|
|
}),
|
|
|
classObj() {
|
|
|
return {
|
|
|
openSidebar: this.sidebar.opened,
|
|
|
withoutAnimation: this.sidebar.withoutAnimation
|
|
|
}
|
|
|
},
|
|
|
variables() {
|
|
|
return variables;
|
|
|
}
|
|
|
},
|
|
|
methods: {}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import "~@/assets/styles/mixin.scss";
|
|
|
@import "~@/assets/styles/variables.scss";
|
|
|
|
|
|
.app-wrapper {
|
|
|
@include clearfix;
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background-image: url("../../src/assets/images/bg@2x.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
.header-container {
|
|
|
width: 100%;
|
|
|
// height: $base-header-height;
|
|
|
background-image: url("../../src/assets/images/top@1x.png");
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
z-index: 1000;
|
|
|
}
|
|
|
|
|
|
.main-container {
|
|
|
display: flex;
|
|
|
border-radius: 1rem 1rem 0 0;
|
|
|
margin-right: .3rem;
|
|
|
flex: 1;
|
|
|
// overflow: hidden;
|
|
|
overflow-y: auto;
|
|
|
background-color: #FAFAFA;
|
|
|
}
|
|
|
|
|
|
.sidebar-container {
|
|
|
width: $base-sidebar-width;
|
|
|
height: calc(100% - 60px);
|
|
|
transition: width 0.28s;
|
|
|
margin-top: 60px;
|
|
|
background-color: #f0f2f5;
|
|
|
}
|
|
|
|
|
|
.breadword-container {
|
|
|
background-color: #fff;
|
|
|
border-radius: 1rem 1rem 0 0;
|
|
|
}
|
|
|
|
|
|
.content-container {
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
overflow-y: auto;
|
|
|
background-color: #f0f2f5;
|
|
|
transition: margin-left 0.28s;
|
|
|
|
|
|
&.sidebarHide {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
}
|
|
|
</style> |
