designer-hub/packages/app/src/components/img-btn-evo.vue

<script setup lang="ts">
const props = withDefaults(defineProps<{ size?: 'large' | '110x44'; color?: 'black' }>(), {
  size: 'large',
  color: 'black',
})
const width = computed(() => Number(props.size.split('x')[0]) * 2 + 'rpx')
const height = computed(() => Number(props.size.split('x')[1]) * 2 + 'rpx')
const types = [
  {
    color: 'black',
    size: '110x44',
    src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA1IiBoZWlnaHQ9IjQ0IiB2aWV3Qm94PSIwIDAgMTA1IDQ0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTMuMzM1MSA1LjY4MzU2QzE0Ljk5NyAyLjIxMDQ4IDE4LjUwNTMgMCAyMi4zNTU1IDBIOTVDMTAwLjUyMyAwIDEwNSA0LjQ3NzE1IDEwNSAxMFYzNEMxMDUgMzkuNTIyOCAxMDAuNTIzIDQ0IDk1IDQ0SDkuMjg0QzIuNjYxNTYgNDQgLTEuNjkyOTMgMzcuMDg4OSAxLjE2NTYgMzEuMTE1MkwxMy4zMzUxIDUuNjgzNTZaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+Cjwvc3ZnPgo=',
  },
  {
    size: 'large',
    color: 'black',
    width: 110,
    height: 44,
    src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA1IiBoZWlnaHQ9IjQ0IiB2aWV3Qm94PSIwIDAgMTA1IDQ0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTMuMzM1MSA1LjY4MzU2QzE0Ljk5NyAyLjIxMDQ4IDE4LjUwNTMgMCAyMi4zNTU1IDBIOTVDMTAwLjUyMyAwIDEwNSA0LjQ3NzE1IDEwNSAxMFYzNEMxMDUgMzkuNTIyOCAxMDAuNTIzIDQ0IDk1IDQ0SDkuMjg0QzIuNjYxNTYgNDQgLTEuNjkyOTMgMzcuMDg4OSAxLjE2NTYgMzEuMTE1MkwxMy4zMzUxIDUuNjgzNTZaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+Cjwvc3ZnPgo=',
  },
]
const type = computed(() =>
  types.find(({ size, color }) => props.size === size && props.color === color),
)
</script>
<template>
  <div
    class="flex items-center justify-center bg-[length:100%_100%] text-white pl-4 pr-2 box-border text-white text-base font-normal font-['PingFang_SC'] leading-tight"
    :style="{
      width: type.width * 2 + 'rpx',
      height: type.height * 2 + 'rpx',
      backgroundImage: `url(${type.src})`,
    }"
  >
    <slot></slot>
  </div>
</template>