61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<Header />
|
||
|
|
<div class="app-wrapper" :class="[$store.getters.sidebarOpened ? 'openSidebar' : 'hideSidebar']">
|
||
|
|
<!-- 左侧 menu -->
|
||
|
|
<SideBar id="guide-sidebar" class="sidebar-container" />
|
||
|
|
<!-- 顶部的 navbar -->
|
||
|
|
<div class="main-container">
|
||
|
|
<TagsView></TagsView>
|
||
|
|
<!-- 内容区 -->
|
||
|
|
<AppMain />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import Header from "./components/Header";
|
||
|
|
import NavBar from "./components/NavBar";
|
||
|
|
import SideBar from "./components/SideBar/index";
|
||
|
|
import AppMain from "./components/AppMain";
|
||
|
|
import TagsView from "./components/TagsView";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "~@/styles/mixin.scss";
|
||
|
|
@import "~@/styles/variables.scss";
|
||
|
|
@import "~@/styles/sidebar.scss";
|
||
|
|
@import "~@/styles/transition.scss";
|
||
|
|
|
||
|
|
.app-wrapper {
|
||
|
|
@include clearfix;
|
||
|
|
position: relative;
|
||
|
|
height: calc(100vh - 88px);
|
||
|
|
display: flex;
|
||
|
|
overflow: hidden;
|
||
|
|
.el-scrollbar {
|
||
|
|
|
||
|
|
.is-active {
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.fixed-header {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 9;
|
||
|
|
width: calc(100% - #{$sideBarWidth});
|
||
|
|
/* 在variables里面定义的变量 */
|
||
|
|
transition: width #{$sideBarDuration};
|
||
|
|
}
|
||
|
|
|
||
|
|
.hideSidebar .fixed-header {
|
||
|
|
width: calc(100% - #{$hideSideBarWidth});
|
||
|
|
}
|
||
|
|
::v-deep .el-scrollbar__view{
|
||
|
|
border-right: 1px solid #07376d;
|
||
|
|
}
|
||
|
|
</style>
|