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

<!-- @format -->

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

<template>
  <div>
    <nuxt-link :to="{ name: 'blog-slug', params: { slug: item?.slug } }">
      <img :src="item.thumbnailUrl" alt="" srcset="" class="hover-effect w-352px h-352px b-rd-10px object-cover">
      <div class="mt-20px">
        <div class="mb-10px text-#666 text-14px fw-400 mb-10px">
          {{ item.category_dictText }}
        </div>
        <h3
          class="!mb-10px fw-600 text-24px text-#363C40 line-clamp-2 custom-title-font"
        >
          {{ item.contentTitle }}
        </h3>
        <div class="!mb-20px text-14px text-#999 line-clamp-2">
          {{ item.contentSubhead }}
        </div>
        <div
          class="text-14px text-#C58C64 cursor-pointer read-more pos-relative"
        >
          Read More
        </div>
      </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>