<template>
  <div class="app-wrapper">
    <div class="topTitle">
      <div class="com-logo">
        <img src="../src/assets/images/logo.png" alt="logo" />
      </div>
      <h1 class="com-title">后台管理系统</h1>
    </div>

    <div class="body-container">
      <div class="main-container"><slot></slot></div>
    </div>
  </div>
</template>

<style lang="scss">
@import '../src/assets/styles/variables.scss';
.app-wrapper {
  .com-logo {
    width: 80px;
    height: 30px;
  }
  @media screen and (min-width: $bigScreenWidth) {
    .com-logo {
      width: 138px;
      height: 44px;
    }
  }
  .com-title {
    flex: 1;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-indent: 6px;
  }
}
</style>

<script>
export default {
  name: 'layout',

  computed: {
    sidebar() {
      return this.$store.state.app.sidebar;
    },
  },
};
</script>
