<template>
  <div :class="[`${namespace}-float-panel`, pos]">
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'FloatPanel',
  inject: ['namespace'],
  props: {
    pos: {
      type: 'left' | 'right',
      default: 'left'
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/styles/config.less";

  .@{namespace}-float-panel {
    position: absolute;
    top: -80px;
    min-width: 513px;
    
    .content {
      margin-top: 49px;
    }

    &.left {
      left: 56px;
      
      background: url("@/assets/images/float-panel-left.png") no-repeat;
      background-size: 513px 49px;
    }
    &.right {
      right: 56px; 
      background: url("@/assets/images/float-panel-right.png") no-repeat;
      background-size: 513px 49px;
    }
  }
</style>
