<!--
 * @FilePath: devinfo.vue
 * @Author: zz
 * @Date: 2024-04-12 11:25:44
 * @LastEditors: 
 * @LastEditTime: 2024-04-12 11:25:44
 * @Descripttion: 
-->
<template>
  <div class="item-card-container">
    <div class="box-left">
      <div class="top-item" v-for="(item, index) in data" :style="{ width }">
        <span class="key-text">{{ item.key }}:</span>
        <span class="value-text" :style="item?.value_style">
          <div
            class="status"
            v-if="index == 3"
            :style="{ background: status_color[item.value] }"
          ></div>
          <span v-else>{{ item.value }}</span>
        </span>
      </div>
    </div>
    <div class="box-right">
      <img :src="imgSrc" alt="" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
const imgSrc =
  "https://www.richpeace.cn/uploadfile/thumb/0b94ce08688c6389ce7b68c52ce3f8c7/880x580_auto.jpg";
const prop = defineProps({
  data: {
    type: Array as any,
    default: () => [],
  },
  imgSrc: {
    type: String,
    default: "",
  },
  rowNum: {
    type: Number,
    default: 2,
  },
});
let width = computed(() => {
  return 100 / prop.rowNum + "%";
});
const status_color = {
  "0": "#FF6E76",
  "1": "#FDDD60",
  "2": "#7CFFB2",
  "3": "#FDDD60",
};
</script>
<style scoped>
.item-card-container {
  width: 100%;
}
.box-left {
  width: 600px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  float: left;
}
.box-right {
  width: 500px;
  height: 100%;
  /* background-color: red; */
  margin-left: 55%;
}
.box-right img {
  max-width: 100%;
  max-height: 100%;
}
.key-text {
  width: 60%;
  font-size: 22px;
  color: #02c1d7;
  font-weight: 700;
}
.top-item {
  height: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 20px 10px;
}
.value-text {
  width: 40%;
  font-size: 20px;
  font-weight: 600;
  color: #aeeefafe;
  font-family: "华文新魏", sans-serif;
  box-sizing: border-box;
  padding-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: blink 1s infinite; /* 添加动画效果 */
}

@keyframes blink {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  90% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
</style>
