<!--
 * @Descripttion: 
 * @version: 
 * @Author: 曹文丽
 * @Date: 2023-08-30 17:02:04
 * @LastEditors: 曹文丽
 * @LastEditTime: 2023-08-31 14:14:10
-->
<script setup lang="ts">
import { ref, defineProps } from 'vue';
const props = defineProps({
  innfectedList: {
    type: Array,
    default: []
  }
})
</script>
<template>
  <div class="infected-areas-con">
    <div class="infected-areas-content" v-for="(item, index) in innfectedList" :key="index">
      <div class="infected-areas-content-num"
        :class="[index == 0 ? 'access-rank-first' : index == 1 ? 'access-rank-secend' : index == 2 ? 'access-rank-third' : '']">
        {{ index }}
      </div>
      <div>{{ item.name }}</div>
      <div>{{ item.programNum }}</div>
      <div>{{ item.hostNum }}</div>
      <div>{{ item.portNum }}}</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.infected-areas-con {
  height: 156px;

  .infected-areas-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    background: #F4F4F4;
    border-radius: 4px;
    padding: 7px;
    margin-bottom: 12px;

    .access-rank-first {
      background: #E65857 !important;
    }

    .access-rank-secend {
      background: #F18301 !important;
    }

    .access-rank-third {
      background: #0095FF !important;
    }

    .infected-areas-content-num {
      width: 16px;
      height: 16px;
      line-height: 16px;
      border-radius: 50%;
      text-align: center;
      color: #fff;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.2);
    }
  }
}
</style>