<template>
  <div class="header_wrap">
    <div v-for="(item, index) in data" :key="index" class="header_item">
      <img :src="item.link" />
      <div class="data_wrap">
        <div class="data_title">{{ item.count }}</div>
        <div class="data_content">{{ item.title }}</div>
      </div>
    </div>
    <SvgIcon size="14px" style="cursor: pointer" name="setting"></SvgIcon>
  </div>
</template>

<script lang="ts" setup>

const data = [
  {
    link: "/src/assets/images/taskCount.png",
    title: "任务包总数",
    count: 6399,
  },
  {
    link: "/src/assets/images/nocheck.png",
    title: "未标记",
    count: 6290,
  },
  {
    link: "/src/assets/images/check.png",
    title: "已标记",
    count: 109,
  },
  {
    link: "/src/assets/images/status.png",
    title: "真",
    count: 3290,
  },
  {
    link: "/src/assets/images/status.png",
    title: "假",
    count: 3000,
  },
  {
    link: "/src/assets/images/pic.png",
    title: "相似度100%图",
    count: 230,
  },
  {
    link: "/src/assets/images/xiaojie.png",
    title: "小结重复数",
    count: 365,
  },
];
</script>

<style scoped lang="less">
.header_wrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  background: #fff;
  .header_item {
    width: 10%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    img{
      width: 50px;
      height: 50px
    }
    .data_wrap {
      .data_title {
        font-size: 20px;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
        font-weight: Bold;
        text-align: left;
        color: #202020;
        line-height: 23px;
        text-align: center;
        white-space: nowrap;
      }
      .data_content {
        opacity: 0.6;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #202020;
        line-height: 16px;
        text-align: center;
        white-space: nowrap;
      }
    }
  }
}
</style>
