<template>
  <!-- <div class="panel" :style="`width: ${width}px; height: ${height}px`"> -->
  <div class="panel" :style="{ width, height }">
    <div class="panel-title">
      <img src="@/assets/images/engineering/title_icon.png" />
      {{ title }}
      <slot name="title" />
    </div>
    <div class="panel-main">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Panel',
  props: {
    title: {
      type: String,
      default: '加载中'
    },
    width: {
      type: String,
      default: 'auto'
    },
    height: {
      type: String,
      default: 'auto'
    }
  }
}
</script>

<style lang="scss" scoped>
.panel {
  display: flex;
  flex-direction: column;
  position: relative;
  .panel-title {
    display: flex;
    align-items: center;
    position: relative;
    height: 40px;
    padding-left: 20px;
    background-color: #12407f;
    color: #60fff6;
    font-size: 18px;
    img {
      width: 28px;
      height: 14px;
      margin-right: 10px;
    }
  }
  .panel-main {
    flex: 1;
    position: relative;
    padding: 10px;
    background-color: #0c3061;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}
</style>
