<template>
  <div ref="card" :height="height" class="pt-3 px-3" :style="`z-index: ${zIndex};top: ${myTop}px`">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'header-panel',
  props: {
    height: {
      type: [Number, String],
      default: 136
    },
    top: {
      type: [Number, String],
      default: 188
    },
    zIndex: {
      type: [Number, String],
      default: 99
    },
    // 是否使用自定义的top
    customTop: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      myTop: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (this.customTop) {
        this.myTop = this.top
        return
      }
      this.myTop = this.$refs.card.offsetTop
    })
  }
}
</script>

<style lang="scss" scoped>
</style>
