<template lang="pug">
row-layout
  div.app-nav(slot="top1")
    span.title.h2 CPT-TOOLKIT 示例
    div.toolbar
      i.icon.icon-git.h2
  column-layout
    ul.app-menu(slot="left1")
      li(v-for="menu in menus")
        a(:href="menu.url") {{menu.title}}
    router-view
</template>

<script>
export default {
  data() {
    return {
      menus: [
        { title: '扩展表格', url: '#/ct' },
        { title: '签名组件', url: '#/ct' },
        { title: '树型组件', url: '#/ct' },
        { title: '纵向选项卡', url: '#/ct' },
        { title: '布局组件', url: '#/ct' },
        { title: '弹框扩展', url: '#/ct' },
        { title: '面板组件', url: '#/ct' },
        { title: '图片预览器', url: '#/ct' }
      ]
    }
  }
}
</script>

<style  lang="less">
.app-nav {
  height: 5rem;
  line-height: 5rem;
  border-bottom: 1px solid #DDD;
  .toolbar {
    position: absolute;
    right: 2rem;
    top: 0;
  }
}

.app-menu {
  width: 16rem;
  border-right: 1px solid #DDD;
}
</style>

