样式修复

src/layout/components/AppMain.vue

@@ -29,12 +29,12 @@ export default {
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  height: calc(100vh - 98px);
+  height: calc(100vh - 120px);
   width: 100%;
   position: relative;
 
   padding: 10px 10px 0 10px;
-  // background: #f6f7f9;
+  background: #f6f7f9;
 }
 
 .fixed-header + .app-main {

src/layout/components/FixedHeader/index.vue

@@ -80,12 +80,12 @@ export default {
 
 <style lang="scss" scoped>
 .system-header {
-  height: 98px;
   width: 100%;
   color: #fff;
+
   .navigation-bar {
-    height: 64px;
+    padding: 0 15px;
-    padding: 0 10px;
+    height: 65px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -127,9 +127,8 @@ export default {
     }
   }
   .crumbs-box {
-    padding: 0 10px;
+    padding: 0 15px;
-    height: calc(100% - 64px);
+    height: 55px;
-    // border: 1px solid red;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   }
 }

src/layout/index copy.vue

@@ -1,111 +0,0 @@
-<template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar/>
-        <tags-view v-if="needTagsView"/>
-      </div>
-      <app-main/>
-      <right-panel>
-        <settings/>
-      </right-panel>
-    </div>
-  </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'
-
-export default {
-  name: 'Layout',
-  components: {
-    AppMain,
-    Navbar,
-    RightPanel,
-    Settings,
-    Sidebar,
-    TagsView
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      theme: state => state.settings.theme,
-      sideTheme: state => state.settings.sideTheme,
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    },
-    variables() {
-      return variables;
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</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%;
-
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
-  }
-
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
-  }
-
-  .sidebarHide .fixed-header {
-    width: 100%;
-  }
-
-  .mobile .fixed-header {
-    width: 100%;
-  }
-</style>