<template>
  <div
    class="bg"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <div class="container">
      <yh-navigation :head-state="headState" />
      <div class="main">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import yhNavigation from './components/navigation';

const newVar = {
  components: {
    yhNavigation
  },
  data() {
    return {
      loading: false
    };
  },
  props: [
    'headState'
  ]
};
export default newVar;
</script>

<style lang="scss" scoped>
.bg {
  overflow: hidden;
}
.container {
  background: #eee;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main {
  max-width: 1200px;
  width: 100%;
  height: calc(100vh - 70px);
  overflow: hidden;
  background: #fff;
  margin-top: 70px;
  padding: 0;
}
</style>
