mky-vent-base/src/components/vent/customHeader.vue

<template>
  <div class="vent-custom-header">
    <div class="vent-home-header">
      <!-- <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" /> -->
      <div class="header-text"><slot></slot></div>
    </div>
    <div class="container-title" v-if="fieldNames">
      <a-select
        class="title-select"
        ref="select"
        v-model:value="currentTitleValue"
        @change="handleTitleChange"
        dropdownClassName="drop"
        :field-names="fieldNames"
        :options="options"
        :dropdownStyle="{ background: 'transparent', borderBottom: '1px solid #ececec66', backdropFilter: 'blur(50px)', color: '#fff' }"
      >
        <!-- <a-select-option value="2">15212工作面</a-select-option>
        <a-select-option value="1598491318007898113">采煤工作面</a-select-option>
        <a-select-option value="3">掘进工作面</a-select-option> -->
      </a-select>
    </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: {
      optionValue: {
        type: String,
      },
      fieldNames: {
        type: Object,
        default: () => {},
      },
      options: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      const currentTitleValue = computed(() => props.optionValue);
      // 标题选择
      function handleTitleChange(value) {
        emit('change', value);
      }
      return {
        currentTitleValue,
        handleTitleChange,
      };
    },
  });
</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;

  @{theme-green} {
    .vent-custom-header {
      --image-vent-header1: url('/@/assets/images/themify/green/vent/vent-header1.png');
      --image-select-bg: url('/@/assets/images/themify/deepblue/vent/home/select-bg.png');
    }
  }
  @{theme-deepblue} {
    .vent-custom-header {
      --image-vent-header1: url('/@/assets/images/themify/deepblue/vent/vent-header1.png');
      --image-select-bg: url('/@/assets/images/themify/deepblue/vent/home/select-bg.png');
    }
  }

  .vent-custom-header {
    --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
    --image-select-bg: url('/@/assets/images/vent/home/select-bg.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;
      background: var(--image-vent-header1) no-repeat;
      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;
      }
    }
    .container-title {
      width: 380px;
      height: 34px;
      top: 60px;
      // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
      background: var(--image-select-bg) no-repeat;
      background-size: contain;
      padding: 0 0 0 40px;
      // padding: 0 0 0 180px;
      font-size: 20px;
      pointer-events: auto;
      position: relative;
      z-index: 9999;
      .title-select {
        width: 340px;
        position: absolute;

        top: 0;
        // left: 160px;
      }
    }
  }
  :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>