<template>
  <div class="center-top-container">
    <div class="jing-du-biao" v-for="item in showArr">
      <!-- 背景图 -->
      <img class="jing-du-biao-back-img" :src="getImgUrl('preview/jingdubiao.png')" alt="">
      <div class="jdb-show-text">
        <div class="jdb-num-left">{{ item.num }}{{ item.unit == '%' ? '%' : '' }}</div>
        <div class="jdb-txt-num-right">
          <div class="jingdubiao-title">{{ item.title }}</div>
          <div>{{ item.num }}{{ item.unit }}</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import TitleTab from '../TitleTab.vue';
import { getImgUrl } from "@/utils/tools.js"


const props = defineProps({
  /**标题 */
  title: {
    type: String,
    default: ''
  }
})
const showArr = ref([
  { title: '截至目前发生次数', num: '25', unit: '次' },
  { title: '安全投入金额', num: '300', unit: '万元' },
  { title: '责任书签订完成率', num: '80', unit: '%' },
  { title: '目标指标完成率', num: '80', unit: '%' },
  { title: '岗位达标率', num: '90', unit: '%' },
]);
</script>

<style lang="scss" scoped>
.center-top-container {
  display: flex;
  justify-content: space-between;
  height: 4.63vh;
  font-size: 12px;

  .jing-du-biao {
    position: relative;
    width: 9vw;
    height: 100%;

    // border: 1px solid red;
    .jing-du-biao-back-img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      z-index: -1;
    }

    .jdb-show-text {
      display: flex;
    }

    .jdb-num-left {
      width: 2.8vw;
      line-height: 5vh;
      text-align: center;
    }

    .jdb-txt-num-right {
      margin-left: 0.4vw;
    }
  }

  .jingdubiao-title {
    color: green;
  }
}
</style>
