<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/BlockHeader.vue
 * @Date: 2022-07-27 09:44:23
 * @Description: 大屏的公共头部组件
 * @LastEditTime: 2023-09-01 15:20:08
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { defineProps } from 'vue'
import TabImg from '../../../assets/image/screenTabTitle.png'

interface BlockHeaderProps {
  name: string,
}

const { name = '' } = defineProps<BlockHeaderProps>()
</script>

<template>
  <div class="custom-screen-block-header">
    <span class="title">{{ name }}</span>
    <img :src="TabImg" alt="" class="img" />
  </div>
</template>

<style scoped lang="scss">
.custom-screen-block-header {
  width: 100%;
  height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 48px;
  box-sizing: border-box;

  .img {
    width: 100%;
    height: 42px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .title {
    font-size: 18px;
    margin-top: -2px;
    font-family: 'MicrosoftYaHei';
    font-weight: 400;
    color: #fff;
    letter-spacing: 2px;
    z-index: 99;
  }
}
</style>
