fashion-ssr-vue3/components/common/blog/item.vue

<!-- @format -->

<script lang="ts" setup>
defineProps({
  item: Object as any,
})
</script>

<template>
  <div class="pos-relative">
    <nuxt-link :to="{ name: 'blog-slug', params: { slug: item?.slug } }">
      <img :src="item.thumbnailUrl" :alt="item.thumbnailAlt" srcset="" class="w-375px h-240px b-rd-10px object-cover">
      <div v-if="item.category_dictText" class="pos-absolute top-10px b-rd-400px left-10px text-center w-138px py-10px bg-#f0f1f3 text-#9B6CFF text-14px b-1px b-solid b-#e7e7e7">
        {{ item.category_dictText }}
      </div>
      <h3
        class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2 custom-title-font"
      >
        {{ item.contentTitle }}
      </h3>
      <div class="text-14px text-#999 lh-22px line-clamp-2">
        {{ item.contentSubhead }}
      </div>
    </nuxt-link>
  </div>
</template>

<style lang="less" scoped>
.read-more {
  &:after {
    position: absolute;
    content: "";
    bottom: -4px;
    left: 0;
    width: 20%;
    height: 2px;
    background: #cda274;
    border-radius: 1dvb;
    transition:
      height 0.3s,
      background 0.3s; /* 明确过渡效果 */
  }
}
</style>