bxztApp/packages/screen/src/views/RiskWarning/top.vue

<template>
  <div class="filter-header">
    <div class="filter-container">
      <span class="filter-item active">本轮</span>
      <div class="date-range-wrapper">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          popper-class="dark-date-picker"
          :prefix-icon="Calendar"
        />
      </div>
    </div>
    <img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Calendar } from "@element-plus/icons-vue";

const dateRange = ref([]);
</script>

<style lang="scss" scoped>
.filter-header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  // align-items: center;
}

.filter-container {
  display: flex;
  align-items: center;
  height: 20px;
  gap: 8px;
  font-size: 13px;

  .filter-item {
    color: rgba(255, 255, 255, 0.6);
    padding: 0 12px;
    height: 24px;
    border: 1px solid rgba(64, 169, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;

    background: #183c67;
    box-shadow: inset 0px 0px 8px 0px #4fecff;

    // &:hover {
    //   border-color: rgba(64, 169, 255, 0.5);
    //   color: rgba(255, 255, 255, 0.8);
    // }

    // &.active {
    //   background: rgba(64, 169, 255, 0.2);
    //   color: #40a9ff;
    //   border-color: rgba(64, 169, 255, 0.5);
    // }
  }

  .date-range-wrapper {
    :deep(.el-date-editor) {
      width: 200px;
      background: transparent;
      border: 1px solid rgba(64, 169, 255, 0.3);
      border-radius: 4px;
      background: #183c67;
      box-shadow: inset 0px 0px 8px 0px #4fecff;

      .el-range-input {
        background: transparent;
        color: rgba(255, 255, 255, 0.8);

        &::placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
      }

      .el-range-separator {
        color: rgba(255, 255, 255, 0.4);
      }

      .el-icon {
        color: rgba(255, 255, 255, 0.5);
      }

      // &:hover {
      //   border-color: rgba(64, 169, 255, 0.5);
      // }
    }
  }
}
.filter-icon-ai {
  width: 67px;
  height: 67px;
  cursor: pointer;
}
// 日期选择器下拉面板样式
.dark-date-picker {
  background: rgba(21, 41, 59, 0.95) !important;
  border: 1px solid rgba(64, 169, 255, 0.3) !important;

  .el-picker-panel__content {
    background: transparent;
  }

  .el-date-table {
    th {
      color: rgba(255, 255, 255, 0.7);
    }

    td {
      color: rgba(255, 255, 255, 0.9);

      &.prev-month,
      &.next-month {
        color: rgba(255, 255, 255, 0.4);
      }

      &:hover {
        color: #40a9ff;
      }

      &.current:not(.disabled) {
        span {
          background: #40a9ff;
        }
      }

      &.start-date,
      &.end-date {
        span {
          background: #40a9ff;
        }
      }

      &.in-range {
        background: rgba(64, 169, 255, 0.2);
      }
    }
  }

  .el-picker-panel__icon-btn {
    color: rgba(255, 255, 255, 0.7);

    &:hover {
      color: #40a9ff;
    }
  }

  .el-date-picker__header-label {
    color: rgba(255, 255, 255, 0.9);

    &:hover {
      color: #40a9ff;
    }
  }
}
</style>