layout.vue 5.42 KB

<template>
  <div class="outer-main-container">
    <!-- 顶部导航 -->
    <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/logo.png">

        </a>
      </div>
      <div class="collapse navbar-collapse" id="dk-navbar-collapse">
        <!-- 顶部主导航 -->
        <ul class="nav navbar-nav">
          <li><a href="#" class="pl-38">最高权限端</a></li>
        </ul>


        <!-- 顶部其他导航 -->
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="消息管理.html" class="dropdown-toggle mr-16" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
              <span class="iconfont icon-xinxi"></span>
              <span class="badge badge-danger">4</span>
            </a>

          </li>

          <li class="dropdown dk-user-control">
            <div data-href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                 aria-expanded="false">
          <span class="dk-avatar iconfont icon-dianchangxinxi">
          <span class="nick">你好,管理员</span>
          <span class="dk-avatar-img" ></span>
          </span>
            </div>
          </li>
        </ul>
      </div>
    </nav><!-- 顶部导航 结束 -->

    <!-- 侧边导航 -->
    <aside class="dk-main-aside">

      <nav class="dk-nav-aside scroll-bar">
        <ul id="js-aside-collapse">
          <li>
            <router-link to="/store/list"><span class="iconfont icon-shangjia"></span><span>商家管理</span></router-link>
          </li>
          <li>
            <a href="javascript:;" data-toggle="collapse" data-parent="#js-aside-collapse" class="collapsed"
               data-target="#nav-aside-collapse-vip" data-index="3"><span class="iconfont icon-ion-social-vimeo-I"></span><span>会员管理</span></a>
            <ul id="nav-aside-collapse-vip" class="">
              <li>
                <router-link to="/user/list"><span>会员管理</span></router-link>
              </li>
            </ul>
          </li>
        <!--  <li>
            <router-link to="/venues/list"><span class="iconfont icon-Shapex"></span><span>场馆管理</span></router-link>
          </li>-->
          <li class="panel">
            <a href="javascript:;" data-toggle="collapse" data-parent="#js-aside-collapse" class="collapsed"
               data-target="#nav-aside-collapse-3" data-index="3"><span class="iconfont icon-ion-android-cart-I"></span><span>消费管理</span></a>
            <ul id="nav-aside-collapse-3" class="">
             <!-- <li><router-link to="今日消费一览.html"><span>今日消费一览</span></router-link></li>-->
              <li><router-link to="/order/time/list"><span>计时订单</span></router-link></li>
              <li><router-link to="/order/block/list"><span>包场订单</span></router-link></li>
              <!--<li><router-link to="商品订单.html"><span>商品订单</span></router-link></li>
              <li><router-link to="入场券订单.html"><span>入场券订单</span></router-link></li>-->
              <li><router-link to="/order/recharge/list"><span>会员充值订单</span></router-link></li>
              <li><router-link to="/order/package/list"><span>套餐订单</span></router-link></li>
            <!--  <li><router-link to="退款订单.html"><span>退款订单</span></router-link></li>-->
            </ul>
          </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>
<style>
  .el-select .el-input .el-input__icon{
    top:0;
  }

  .el-form-item{
    display: inline-block;
    width: 380px;
  }
  .el-select-dropdown__item.selected{
    color: #fff !important;
  }
  .el-time-panel__content::after, .el-time-panel__content::before{
    background-color: #fff;
  }
  .el-select > .el-input {
    width: 150px;
  }
  .pagination .btn-primary.active,.pagination .btn-primary:active,.pagination .btn-primary:hover,.pagination .open>.dropdown-toggle.btn-primary{
    color: #fff;
    background-color: #929eb0;
    border-color: #929eb0;
  }
  .pagination .btn-primary.active.focus,.pagination  .btn-primary.active:focus,
  .pagination  .btn-primary.active:hover,.pagination  .btn-primary:active.focus,
  .pagination .btn-primary:active:focus,.pagination  .btn-primary:active:hover,
  .pagination .open>.dropdown-toggle.btn-primary.focus,.pagination .open>.dropdown-toggle.btn-primary:focus,
  .pagination .open>.dropdown-toggle.btn-primary:hover{
    background-color: #929eb0;
    border-color: #929eb0;
  }
</style>