提交代码

src/layout/index.vue

@@ -0,0 +1,61 @@
+<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>