<template>
  <div class="main-container">
    <!-- 左边 -->
    <div class="left-box">
      <slot name="left"></slot>
    </div>
    <!-- 右边 -->
    <div class="right-box">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
</script>
<style scoped lang="scss">
.main-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left-box,
  .right-box {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    :deep(button) {
      background: transparent !important;
    }
  }
  .right-box {
    justify-content: flex-end;
  }
}
</style>
