reservation-ssr/components/default/adminSide.vue

<template>
<div class="side">
  <ul class="g-nav">
    <template v-for="item in list">
      <li class="group">
        <i :class="item.icon"></i>
        <span v-text="item.label">商家设置</span>
      </li>
      <li v-for="tab in item.sub">
        <nuxt-link :to="tab.link" v-text="tab.title">账号管理</nuxt-link>
      </li>
    </template>
  </ul>
</div>
</template>

<script>
  export default {
    name: 'adminSide',
    data () {
      return {
        list: [{
          icon: 'icon-merchant',
          label: '商家设置',
          sub: [{
            title: '账号管理',
            link: '/admin/AccountSettings'
          }, {
            title: '商家信息',
            link: '/admin/MerchantInfo'
          }, {
            title: '批量开通账号',
            link: '/admin/SetAccount'
          }]}, {
          icon: 'icon-business',
          label: '营业设置',
          sub: [{
            title: '商品设置',
            link: '/admin/SetGoods'
          }, {
            title: '包间设置',
            link: '/'
          }, {
            title: '服务设置',
            link: '/'
          }, {
            title: '活动设置',
            link: '/'
          }]}, {
          icon: 'icon-order',
          label: '订单设置',
          sub: [{
            title: '已预约订单',
            link: '/admin/OrderManagement'
          }, {
            title: '进行中订单',
            link: '/'
          }, {
            title: '已完成订单',
            link: '/'
          }, {
            title: '盈收统计',
            link: '/'
          }]}, {
          icon: 'icon-client',
          label: '客户管理',
          sub: [{
            title: '客户资料',
            link: '/admin/ClientManagement'
          }, {
            title: '会员客户',
            link: '/'
          }, {
            title: '服务评价',
            link: '/'
          }]}
        ]
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.side{
  border:1px solid #e3e3e3;
  padding:20px 0 0 27px;
  .g-nav{
    li{
      position:relative;
      padding-left:25px;
      margin-bottom:10px;
      &.group{
        margin-bottom:15px;
        margin-top:25px;
        &:first-child{
          margin-top:0;
        }
        i{
          position:absolute;
          top:0;
          left:0;
        }
        span{
          color:#2f95dd;
          font-size: 16px;
        }
      }
      a.nuxt-link-active {
        font-size: 14px;
        color:#666;
        &:hover,&:active {
          color:#2f95dd;
        }
      }
    }
  }
}
</style>