<template>
  <div class="myShips-layout">
    <el-container>
<!--      <el-header>-->
<!--        <Header></Header>-->
<!--      </el-header>-->
      <el-container>
<!--        <el-aside id="el-aside" style="width: 15.625rem">-->
<!--          <div class="shrink-btn" id="shrink-btn" @click="shrink">{{ isShrink ? "《" : "》" }}</div>-->
<!--          <Search></Search>-->
<!--          <Menu bg="rgb(44, 70, 155)" color="#ffffff"></Menu>-->
<!--        </el-aside>-->
        <el-main>
          <Main></Main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import Header from '@/components/header/index.vue'
import Search from "@/components/search/index.vue"
import Menu from '@/components/menu/index.vue'
import Main from '@/views/main/Main.vue'
import $ from 'jquery'

@Component({
  components: {
    Header,
    Search,
    Menu,
    Main
  }
})
export default class Layout extends Vue {
  private isShrink = true // 是否展开 true 是展开 false 是收缩

  private shrink() {
    this.isShrink = !this.isShrink
    if (this.isShrink) {
      $('#el-aside').animate({width: '15.625rem'}, 450);
      $('#shrink-btn').animate({left: '15.625rem'}, 450);
    } else {
      $('#el-aside').animate({width: '0'}, 450);
      $('#shrink-btn').animate({left: '0'}, 450);
    }
  }
}
</script>

<style scoped lang="scss">
.myShips-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;

  ::v-deep .el-main {
    padding: 0;
    overflow: hidden;
  }

  .shrink-btn {
    width: 1.875rem !important;
    height: 3.125rem !important;
    border-radius: 0 0.625rem 0.625rem 0 !important;
    position: absolute;
    left: 15.625rem;
    z-index: 2 !important;
    top: 50% !important;
    background-color: rgba(255, 255, 255, 0.6);
    font-size: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(3, 3, 3, 0.5);

    &:hover {
      cursor: pointer !important;
    }
  }
}
</style>
