marking-cet-web/src/components/common/secNumberStatus.vue

<template>
  <span class="sec-number-box">
    <el-tooltip
      v-if="props.corrected || props.checked"
      effect="light"
      :content="props.corrected ? '已给分' : props.checked ? '已抽查' : ''"
    >
      <span v-if="props.corrected" class="status corrected"></span>
      <span v-else-if="props.checked" class="status checked"></span>
    </el-tooltip>
    <span v-if="!props.corrected && !props.checked" class="status2"></span>

    <span>{{ props.secretNumber }}</span>
  </span>
</template>
<script setup lang="ts" name="SecNumberStatus">
const props = defineProps<{ secretNumber: any; checked: boolean; corrected: boolean }>()
</script>
<style lang="scss" scoped>
.sec-number-box {
  .status,
  .status2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: transparent;
    margin-right: 8px;
    &.corrected {
      background-color: #f53f3f;
      cursor: pointer;
    }
    &.checked {
      background-color: #00b42a;
      cursor: pointer;
    }
  }
}
</style>