<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/safeComponents/BlockHeader.vue
 * @Date: 2022-07-27 09:44:23
 * @Description: 大屏的公共头部组件
 * @LastEditTime: 2023-09-01 15:31:48
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { defineProps } from 'vue'
interface BlockHeaderProps {
  name: string,
}

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

<template>
  <div class="custom-screen-block-header">
    <span class="title prefix">{{ name }}</span>
    <img
      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcoAAAAYCAMAAABNw01+AAAARVBMVEUAAAA+eZc+eZY+eZU+eZY+epY+epc+epY+eJY+dpM9fo5Odoo/eZU+eZU9eJZBd5hBd5RAd5I9epY/eZVAe5Y9epU+eZb2o8xVAAAAFnRSTlMA+fHkxK6XaDsbDgbUfFNPKyfY14OCoXngAAAAALxJREFUaN7t2DkOAlEMA9DZV4ad3P+olKkswNK3xJdfa7lJOjdWp0ukESdEw7S2Pq/frTghGqY1RZpxQjRMa4k04IRomNZ+yuu3V5wQDdM6Ij1xQjRM69bm9e87ToiGaQ2RFpwQDdOaI004IRqmtXZ5/X7DCdEwrTHSGSdEwz7zYmde7Crmxa4WXuxq4cWuGkekF06IhgmAle2x4+Tnhhe77/zbYhdWWMnFzq+UKrjY+ZVaBRc7v1KrsVq8Ac1F0jGl2AC4AAAAAElFTkSuQmCC"
      alt="" class="img" />
  </div>
</template>

<style scoped lang="scss">
.custom-screen-block-header {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;

  .img {
    width: 130px;
    height: 12px;
    flex-shrink: 0;
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    padding-left: 8px;
    box-sizing: border-box;
  }

  .prefix {
    position: relative;
  }

  .prefix::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 3px;
    height: 18px;
    background: #4D7893;
    z-index: 1;
  }

}
</style>
