<template>
  <div>
    <svg
      width="90px"
      height="30px"
      viewBox="0 0 71 20"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1512, -621)">
          <g id="可视化" transform="translate(-8, -1)">
            <g id="模块" transform="translate(53, 92)">
              <g id="标题模块--右侧1" transform="translate(1449.5, 444)">
                <g id="编组-44" transform="translate(17.5, 86)">
                  <path
                    d="M38.0468141,0.5 L24.9195699,19.5 L5.5,19.5 L5.5,0.5 L38.0468141,0.5 Z"
                    id="矩形"
                    stroke="#049D73"
                    fill="#05A074"
                  ></path>
                  <path
                    d="M70.0581002,0.5 L57.2050021,19.5 L23.5,19.5 L23.5,0.5 L70.0581002,0.5 Z"
                    id="矩形"
                    stroke="#049D72"
                    fill-opacity="0.46"
                    opacity="0.79897926"
                    transform="translate(47, 10) scale(-1, -1) translate(-47, -10)"
                  ></path>
                  <rect id="矩形" fill="#05A074" x="0" y="0" width="2" height="30"></rect>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text x="12" y="13" :font-size="dataStyle.fontSize1" :fill="dataStyle.fontColor1">
        {{ props.item.key }}
      </text>
      <text x="36" y="13" :font-size="dataStyle.fontSize2" :fill="dataStyle.fontColor1">
        {{ props.item.title }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps(['item', 'dataStyle']);
</script>
