<template>
  <div class="title-bg-box">
    <div class="title-box">
        <img src="../../../assets//imgs/IOTImage/title-bg.png"/>
        <span class="title">{{ title }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  title: {
    type: String,
    require: true,
  },
});
</script>

<style scoped lang="scss">
.title-bg-box {
  width: 100%;
  .title-box{
    position: relative;
    width: 100%;
    img{
        width: 100%;
    }
    .title{
        position: absolute;
        top: 50%;
        transform: translate(0, -60%);
        left: 15px;
        color: #F6F9FE;
        font-size: 18px;
        font-family: "heitao";
    }
  }
}
</style>
