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

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

菜单栏

<template>
  <!-- Sidebar -->
  <div class="sidebar" :style="{'background':oldThemeColor}">
  </div>
</template>

<script src="@/views/asideContainer/asideContainer.js"></script>
<style scoped src="@/views/asideContainer/asideContainer.scss">
</style>

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.工具栏

<template>
  <div class="main-header" :style="{'background':themeColor}">
    <!-- Logo Header -->
    <div class="logo-header">
      <el-menu :background-color="themeColor" :active-text-color="themeColor"
               mode="horizontal">
        <el-menu-item>天 空 之 城</el-menu-item>
      </el-menu>
    </div>
    <div class="hamburg">
      <el-menu :background-color="themeColor" mode="horizontal">
        <el-menu-item index="1" @click="onCollapse">
          <hamburger :isActive="collapse"></hamburger>
        </el-menu-item>
        <el-menu-item index="2">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"></el-input>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="nav-header">
      <el-menu :background-color="themeColor" :default-active="activeIndex" mode="horizontal">
        <el-menu-item index="1">
          <!-- 主题切换 -->
          <theme-picker class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker>
        </el-menu-item>
        <el-menu-item index="2">
          <!-- 语言切换 -->
          <lang-selector></lang-selector>
        </el-menu-item>
        <el-menu-item index="3" v-popover:popover-message>
          <!-- 我的私信 -->
          <el-badge :value="5" :max="99" class="badge" type="success">
            <li style="color:#fff;" class="fa fa-envelope-o fa-lg"></li>
          </el-badge>
          <el-popover ref="popover-message" placement="bottom-end" trigger="click">
            <message-panel></message-panel>
          </el-popover>
        </el-menu-item>
        <el-menu-item index="4" v-popover:popover-notice>
          <!-- 系统通知 -->
          <el-badge :value="4" :max="99" class="badge" type="success">
            <li style="color:#fff;" class="fa fa-bell-o fa-lg"></li>
          </el-badge>
          <el-popover ref="popover-notice" placement="bottom-end" trigger="click">
            <notice-panel></notice-panel>
          </el-popover>
        </el-menu-item>
        <el-menu-item index="5" v-popover:popover-personal>
          <!-- 用户信息 -->
          <span class="user-info"><img :src="user.avatar" />{{user.name}}</span>
          <el-popover ref="popover-personal" placement="bottom-end" trigger="click" :visible-arrow="false">
            <personal-panel :user="user"></personal-panel>
          </el-popover>
        </el-menu-item>
      </el-menu>
    </div>

  </div>
</template>

<script src="@/views/headerContainer/headerContainer.js">
</script>

<style scoped src="@/views/headerContainer/headerContainer.scss"></style>

.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.内容栏

<template>
  <div class="main-panel"></div>
</template>

<script src="@/views/mainContainer/mainContainer.js"></script>
<style scoped src="@/views/mainContainer/mainContainer.scss"></style>

还没有具体内容

效果显示