bsdgy-server/kiisoo-ic-ui/src/pages/Home.vue

<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
      <Sider collapsible :collapsed-width="78" v-model="isCollapsed">

        <div style="margin-top: 40px;margin-bottom: 20px;font-weight: bold;font-size: 30px;color: #ffffff;">
          <Avatar size="36"></Avatar>
          <span>拓客营销</span>
        </div>

        <Menu active-name="3" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-paper" />
              设置管理
            </template>
            <MenuItem name="1-1" to="/account/manager">账号管理</MenuItem>
            <MenuItem name="1-2" to="/role/manager">角色管理</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-people" />
              门店推广
            </template>
            <MenuItem name="2-1" to="/shop/increase/manager">推广管理</MenuItem>
            <MenuItem name="2-2" to="/shop/increase/data">推广数据</MenuItem>
          </Submenu>

          <Submenu name="3">
            <template slot="title">
              <Icon type="ios-paper" />
              数据中心
            </template>
            <MenuItem name="3-1" to="/customer/data">客户数据</MenuItem>

          </Submenu>
        </Menu>
      </Sider>
      <Layout>
<!--        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>-->
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}">
            <BreadcrumbItem>Home</BreadcrumbItem>
            <BreadcrumbItem>Components</BreadcrumbItem>
          </Breadcrumb>
          <Card>
            <div :style="{'height':mHeight + 'px'}">
              <router-view/>
            </div>
          </Card>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapsed: false,
      mHeight: 600
    }
  },
  created() {
    this.mHeight = window.screen.availHeight - 22;
  },
  computed: {
    rotateIcon () {
      return [
        'menu-icon',
        this.isCollapsed ? 'rotate-icon' : ''
      ];
    },
    menuitemClasses () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  methods: {
    onSelectLister () {

    },
    collapsedSider () {
      this.$refs.side1.toggleCollapse();
    }
  }
}
</script>
<style scoped>

  .layout-con{
    height: 100%;
    width: 100%;
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
</style>