bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/PanelHeader.vue

<template>
  <div class="panel-header">
    <div class="panel-header__content">
      <span class="panel-header__title">{{ title }}</span>
      <span v-if="subtitle" class="panel-header__subtitle">{{ subtitle }}</span>
      <slot name="title-icon"></slot>
    </div>
    <slot name="extra"></slot>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    default: ''
  }
})
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: vw(400);
  height: vh(43);
  background-image: url('../../assets/images/标题栏bg1.png');
  background-position: 0 -1px;
  background-repeat: no-repeat;
  background-size: vw(400) vh(45);
  padding: 0 vw(20);
  margin-bottom: vw(10);

  &__content {
    display: flex;
    align-items: baseline;
    gap: vw(8);
  }

  &__title {
    color: var(--text-white);
    font-size: fs(20);
    font-family: SourceHanSansCN-Bold, sans-serif;
    font-weight: 700;
    white-space: nowrap;
  }

  &__subtitle {
    color: var(--text-white);
    font-size: fs(14);
    font-family: SourceHanSansCN-Bold, sans-serif;
    font-weight: 700;
    white-space: nowrap;
  }
}
</style>