<template>
  <div class="sale-wrap">
    <div class="sale-header">
      <div
        class="left-block border"
        :style="{width:leftWidth+'px'}">
        <slot
          name="left_up"></slot>
        <slot
          name="left_down"></slot>
      </div>
      <div class="right-block border custom-scroll">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    leftWidth: {
      type: Number,
      default: 1000
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.sale-wrap {
  position: absolute; top: 0; left: 0;display: flex; width: 100%; height: 100%; flex-direction: column;background: #ebe9e9;
}
.sale-header {
  display: flex;  flex: 1;
  .left-block {
    width: 900px; padding: 10px; margin-right: -10px;display: flex;flex-direction: column;

  }
  .right-block {
    flex: 1; overflow: auto; padding: 10px;
  }
}
.sale-footer {
  height: 100px;background: #fff; margin: 10px; margin-top: 0;
}

</style>
