mky-vent-base/src/views/vent/home/configurable/belt/components/headerBelt.vue

<template>
  <div class="vent-custom-header">
    <div class="vent-home-header">
      <div class="header-text"><slot></slot></div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { Decoration5 } from '@kjgl77/datav-vue3';
export default defineComponent({
  name: 'CustomHeader',
  components: { Decoration5 },
  props: {},
  emits: ['change'],
});
</script>
<style lang="less">
@import '/@/design/vent/modal.less';

.@{ventSpace}-select-dropdown.drop {
  background-color: transparent !important;

  .@{ventSpace}-select-item-option-selected,
  .@{ventSpace}-select-item-option-active {
    background-color: #ffffff33 !important;
  }
  .@{ventSpace}-select-item {
    color: inherit;
    &:hover {
      background-color: #ffffff33 !important;
    }
  }
  .@{ventSpace}-select-tree {
    .@{ventSpace}-select-tree-treenode {
      color: inherit;
    }
    .@{ventSpace}-select-tree-switcher-icon {
      color: inherit;
    }
  }
}
</style>
<style lang="less" scoped>
@import '/@/design/theme.less';
@ventSpace: zxm;

.vent-custom-header {
  --image-vent-header1: url('/@/assets/images/beltFire/top.png');
  width: 100%;
  position: relative;
  z-index: 9999;
  pointer-events: none;
  .vent-home-header {
    width: 100%;
    position: fixed;
    top: 0;
    // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
    // height: 100px;
    height: 89px;
    background-size: contain;
    display: flex;
    justify-content: center;
    .header-icon {
      margin-top: 45px;
    }
    .header-text {
      position: fixed;
      top: 5px;
      color: #fff;
      font-size: 32px;
      font-family: 'ysbtFont';
      background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
}
:deep(.zxm-select) {
  width: 300px;
  .@{ventSpace}-select-selector {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    .zxm-select-selection-item {
      color: #fff !important;
      font-size: 20px;
    }
  }
  .@{ventSpace}-select-arrow {
    color: #fff !important;
  }
}
</style>