vue 权限管理 header+main+aside设计（5）

1. 我的vue与js。scss分开写的

菜单栏

import {mapState} from 'vuex'

export default {
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor,
      oldThemeColor: state => state.app.oldThemeColor,
      collapse: state => state.app.collapse
    })
  }
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 240px;
  padding-top: 57px;
  display: block;
  z-index: 1000;
  color: #ffffff;
  font-weight: 200;
  -webkit-box-shadow: 1px 0 10px rgba(69, 65, 78, 0.06);
  -moz-box-shadow: 1px 0 10px rgba(69, 65, 78, 0.06);
  box-shadow: 1px 0 10px rgba(69, 65, 78, 0.06);
  transition: all .3s;
}

2.工具栏

.main-header {
  background: #ffffff;
  min-height: 57px;
  width: 100%;
  position: fixed;
  z-index: 1001;
}
.hamburg {
  float: left;
}
.main-header .logo-header {
  float: left;
  width: 180px;
  height: 57px;
  line-height: 45px;
  color: #333333;
  z-index: 1001;
  font-size: 17px;
  font-weight: 400;
  padding-left: 25px;
  padding-right: 25px;
  z-index: 1001;
  display: flex;
  align-items: center;
  position: relative;
  transition: all .3s;
}
.logo-header .el-menu-item{
  height: 58px;
}
.nav-header {
  float: right;
}

import {mapState} from 'vuex'
import Hamburger from "@/components/Hamburger"
import ThemePicker from "@/components/ThemePicker"
import LangSelector from "@/components/LangSelector"
import MessagePanel from "@/components/MessagePanel/MessagePanel"
import NoticePanel from "@/components/NoticePanel/NoticePanel"
import PersonalPanel from "@/components/PersonalPanel/PersonalPanel"

export default {
  components: {
    Hamburger,
    ThemePicker,
    LangSelector,
    NoticePanel,
    MessagePanel,
    PersonalPanel
  },
  data() {
    return {
      input2: "",
      user: {
        name: "Louis",
        avatar: "",
        role: "超级管理员",
        registeInfo: "注册时间：2018-12-20 "
      },
      activeIndex: '1',
      langVisible: false
    }
  },
  methods: {

    // 折叠导航栏
    onCollapse: function () {
      this.$store.commit('onCollapse')
    },
    // 切换主题
    onThemeChange: function (themeColor) {
      this.$store.commit('setThemeColor', themeColor)
    },
    // 语言切换
    changeLanguage(lang) {
      lang === '' ? 'zh_cn' : lang
      this.$i18n.locale = lang
      this.langVisible = false
    }
  },
  mounted() {
    this.sysName = "无欲则刚 有容乃大"
    var user = sessionStorage.getItem("user")
    if (user) {
      this.user.name = user
      this.user.avatar = require("@/assets/sky.png")
    }
  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor,
      collapse: state => state.app.collapse
    })
  }
}

3.内容栏

还没有具体内容

效果显示