layout.vue 3.55 KB
<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div id="dk-app" class="dk-app-wrapper">
    <!-- 顶部导航 -->
    <nav class="navbar navbar-inverse dk-navbar">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dk-navbar-collapse"
                aria-expanded="false">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- 样式一 -->
        <!--<a class="navbar-brand navbar-brand-img" href="#">
          <img class="dk-brand-img-lg" src="images/logo-lg.png">
          <img class="dk-brand-img-sm" class="" src="images/logo-sm.png">
        </a>-->
        <!-- 样式二 -->
        <a class="navbar-brand" href="#">
          <img src="../assets/images/houtai-logo.png">
          <span>辞海管理后台</span>
        </a>
      </div>
      <div class="collapse navbar-collapse" id="dk-navbar-collapse">
        <!-- 顶部其他导航 -->
        <ul class="nav navbar-nav navbar-right">
          <li class="hidden-xs">
            <a id="js-full-screen" href="javascript:;">
              <span class="ion ion-arrow-expand"></span>
            </a>
          </li>
          <li class="dropdown dk-user-control">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
              <img class="dk-avatar" src="../assets/images/avatar.png">
              <span>管理员</span>
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <router-link to='/index/account/change-password'><span class="ion ion-compose"></span><span>修改密码</span>
                </router-link>
              </li>
              <li><a class="" v-on:click.prevent="logout" href="#"><span class="ion ion-log-out"></span>退出</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav><!-- 顶部导航 结束 -->

    <!-- 侧边导航 -->
    <aside class="dk-main-aside">
      <a id="js-toggle-aside-nav" class="dk-nav-shrink-btn" href="javascript:;"><span
        class="ion ion-navicon-round"></span></a>
      <nav class="dk-nav-aside scroll-bar">
        <ul id="js-aside-collapse">
          <li>
            <a href="#"><span class="ion ion-ios-home"></span><span>词条管理</span></a>
          </li>
          <li>
            <a href="#"><span class="ion ion-ios-home"></span><span>主题管理</span></a>
          </li>
        </ul>
      </nav>
    </aside><!-- 侧边导航 结束 -->

    <!-- 主内容 -->
    <div class="dk-main-container">
      <transition
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    created: function () {
      var self = this;
    },
    mounted: function () {
      commonApp.init();
    },
    methods: {
      logout: function () {
        window.sessionStorage.clear();
        this.$router.push('/passport/login');
      },
      isEmptyObject: function (obj) {
        for (var key in obj) {
          return false;
        }
        return true;
      },

    },
    computed: {
      user(){

      }
    }
  }
</script>

<style>
  .dk-app-wrapper {
    height: 100%;
  }

  .dk-main-container > .animated {
    position: absolute;
    left: 10px;
    right: 10px;
  }


</style>