<template>
  <div class="_layout">
    <div class="_layout_mains">
      <div class="_layout_mains_item _layout_mains_left"
        :class="appStore.expandFoldType ? 'leftanimeHome' : 'leftanimeHome1'">
        <slot name="left"></slot>
      </div>
      <div class="_layout_mains_content">
        <slot name="content"></slot>
      </div>
      <div class="_layout_mains_item _layout_mains_right"
        :class="appStore.expandFoldType ? 'rightanimeHome' : 'rightanimeHome1'">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
</script>
<style lang="scss">
._layout {
  height: 100%;
  box-sizing: border-box;
  display: flex;

  &_mains {
    flex: 1;
    margin-top: 46px;
    // margin-bottom:76px;
    position: relative;
    display: flex;

    &_item {
      height: 100%;
      width: 25%;
      position: absolute;
      top: 0;
      background: rgba(#3b90d7, 0.03);
      // backdrop-filter: blur(10px);
    }

    &_left {
      left: 0;
      z-index: 2;
    }

    &_right {
      right: 0;
      z-index: 2;
    }

    &_content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      font-size: 100px;
    }
  }
}

// 动画展开、收起
.leftanimeHome {
  animation: leftHomeCssHome 0.6s forwards;
}

.leftanimeHome1 {
  animation: leftHomeCssHome1 0.6s forwards;
}

@keyframes leftHomeCssHome {

  //展开
  from {
    transform: translate(-105%, 0);
  }

  to {
    transform: translate(0, 0);
  }
}

@keyframes leftHomeCssHome1 {

  //消失
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-105%, 0);
  }
}

// 动画展开、收起
.rightanimeHome {
  animation: rightHomeCssHome 0.6s forwards;
}

.rightanimeHome1 {
  animation: rightHomeCssHome1 0.6s forwards;
}

@keyframes rightHomeCssHome {

  //展开
  from {
    transform: translate(105%, 0);
  }

  to {
    transform: translate(0, 0);
  }
}

@keyframes rightHomeCssHome1 {

  //消失
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(105%, 0);
  }
}
</style>