merchant/src/pages/index.vue

<template>
  <el-container>
    <el-header>
      <el-row type="flex" style="height:100%;" justify="space-between" align="middle">
        <div>航空工业集团快递智能柜管理程序</div>
        <div>
          <el-dropdown @command="onUserEdit">
            <span class="el-dropdown-link">
              <i class="el-icon-user" style="margin-right: 10px"></i>管理员
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
    </el-header>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="250px">
        <el-menu
          router
          class="el-menu"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="curPath"
        >
          <el-menu-item index="express" route="express">
            <i class="el-icon-menu"></i>
            <span slot="title">柜体控制</span>
          </el-menu-item>
          <el-menu-item index="order" route="order">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="log" route="log">
            <i class="el-icon-document"></i>
            <span slot="title">日志管理</span>
          </el-menu-item>
          <el-menu-item index="message" route="message">
            <i class="el-icon-message"></i>
            <span slot="title">消息通知</span>
          </el-menu-item>
          <el-menu-item index="status" route="status">
            <i class="el-icon-search"></i>
            <span slot="title">状态查询</span>
          </el-menu-item>
          <el-menu-item index="view" route="view">
            <i class="el-icon-s-platform"></i>
            <span slot="title">操作记录</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="el-menu">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  created() {
    this.curPath = this.$route.name;
  },
  data() {
    return {
      curPath: ""
    };
  },
  methods: {
    onUserEdit(command) {
      if (command == "logout") {
        this.$router.replace({ path: "/login" });
      }
    }
  }
};
</script>
<style scoped>
.el-menu {
  height: calc(100vh - 62px);
}
.el-dropdown-link {
  color: #409eff;
}
</style>