<template>
  <div
    class="box"
    :style="`width:${width}px;height:${height}px`"
  >
    <div class="box-top">
      {{ name }}
    </div>
    <div class="box-content">
      <slot />
    </div>
  </div>
</template>

<script setup lang='ts'>
defineProps<{
  width: number,
  height: number,
  name: string
}>()
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;

  &-top {
    background: url(/src/assets/img/1.png) no-repeat left top;
    width: 100%;
    height: 50px;
    background-size: cover;
    font-weight: 700;
    font-style: oblique;
    white-space: nowrap;
    text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.6980392157);
    font-size: 24px;
    color: white;
    line-height: 58px;
    text-indent: 73px;
  }

  &-content {
    height: calc(100% - 60px);
    background: linear-gradient(180deg, rgba(33, 133, 232, 0.0902) 0%, rgba(0, 170, 255, 0) 99%);
  }
}
</style>