<template>
  <div class="bg-[#0A404E] bg-opacity-40 flex flex-col w-full" :style="{ width, height }">
    <div
      class="flex items-center justify-between px-14px relative flex-none"
      :style="{ height: headHeight }"
    >
      <div
        class="flex items-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
      >
        <span class="block w-8.5px h-8.5px rounded-full bg-[#6CCDDA]"></span>
        <span class="ml-10.5px text-18px">{{ title }}</span>
      </div>
      <div class="absolute left-100px right-100px">
        <slot name="center"> </slot>
      </div>
      <slot name="right">
        <img class="w-76.5px h-7.5px" :src="HeadIcon" alt="" srcset="" />
      </slot>
    </div>
    <div class="px-14px pb-14px flex-1">
      <div class="bg-[#293E4E] bg-opacity-30 h-full">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import HeadIcon from '/@/assets/images/head-icon.png'
  defineProps({
    title: {
      type: String as PropType<string>,
      default: '标题',
    },
    width: {
      type: String as PropType<string>,
      default: '200px',
    },
    height: {
      type: String as PropType<string>,
      default: '200px',
    },
    headHeight: {
      type: String as PropType<string>,
      default: '49px',
    },
  })
</script>

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