daikan-international/src/components/custom/tagView.vue

<script setup lang="ts">
  import { computed } from 'vue';

  const props = defineProps({
    sid: { type: String },
    url: { type: String },
    title: { type: String, default: '' },
    content: { type: String, default: '' },
    icon: { type: String, default: '' },
  });

  const backgroundURL = computed(
    () => props.url && props.url + '&x-oss-process=image/resize,m_fill,w_80,h_80',
  );
</script>

<template>
  <span
    class="tag-icon animate"
    :style="{
      backgroundImage: `url(${icon})`,
    }"
  ></span>
  <div class="tag-body">
    <div data-id="${data.sid}" class="tag-commodity">
      <div
        :style="{
          backgroundImage: `url(${backgroundURL})`,
        }"
        class="tag-avatar"
      ></div>
      <p class="tag-title">{{ title }}</p>
      <div class="tag-info">
        <div>{{ content.substring(0, 30) }}</div>
      </div>
    </div>
  </div>
</template>