AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue

<template>
  <div class="qc-flags">
    <div class="qc-flags-item" v-for="(item, index) in items" :key="item">
      <span :class="data[index]"></span>
      {{ item }}
    </div>
  </div>
</template>

<script>
// 配置
const items = ['Collection Time', 'Acq Time', 'Decay Time', 'SampVol', 'Be7-FWHM', 'Ba140-MDC', 'Xe133-MDC']

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  created() {
    this.items = items
  }
}
</script>

<style lang="less" scoped>
.qc-flags {
  display: flex;
  &-item {
    background-color: #46738e;
    display: flex;
    align-items: center;
    width: 150px;
    height: 30px;

    &:not(:last-child) {
      margin-right: 2px;
    }

    span {
      margin-left: 20px;
      margin-right: 5px;
      width: 14px;
      height: 14px;
      border-radius: 50%;

      &.GRAY {
        background: radial-gradient(circle, #979797 0, #777a7c 100%);
      }

      &.GREEN {
        background: radial-gradient(circle, #00fe7f 0, #00d56a 100%);
      }

      &.RED {
        background: radial-gradient(circle, #fe0015 0, #d50000 100%);
      }

      &.BLUE {
        background: radial-gradient(circle, #00E57D 0, #00E57D 100%);
      }

      &.YELLOW {
        background: radial-gradient(circle, #feed00 0, #d5d100 100%);
      }
    }
  }
}
</style>