hsq-pro/src/views/vent/comment/components/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"
        popupClassName="drop"
        :field-names="fieldNames"
        :options="options"
        :dropdownStyle="{ background : 'transparent',  borderBottom: '1px solid #ececec66', backdropFilter: 'blur(50px)', color: '#fff !important'}"
      >
        <!-- <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 {
  color: #fff !important;
  .@{ventSpace}-select-item-option-selected,
  .@{ventSpace}-select-item-option-active {
    background-color: #ffffff33 !important;
  }
  .zxm-select-item{
    color: #fff;
  }
  .@{ventSpace}-select-item:hover {
    background-color: #ffffff33 !important;
  }
}
</style>
<style lang="less" scoped>
  @ventSpace: zxm;
  .vent-custom-header{
    width: 100%;
    height: fit-content;
    .vent-home-header {
      width: 100%;
      
      position: fixed;
      top: 0;
      // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
      // height: 100px;
      background: url('/@/assets/images/vent/vent-header1.png') 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%, #60f4ff);
        -webkit-background-clip: text;
        color: transparent;
      }
    }
    .container-title {
      width: 398px;
      height: 34px;
      top: 60px;
      background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
      background-size: contain;
      padding: 0 0 0 180px;
      font-size: 20px;
      pointer-events: auto;
      position: relative;
      z-index: 9999;
      .title-select {
        width: 228px;
        position: absolute;
        top: 0;
        left: 160px;
      }
    }
  }
  .custom-drop{
      border-bottom: 1px solid #ececec66 !important;
      background: transparent !important;
      backdrop-filter: blur(50px) !important;
  }
  :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>