fashion-ssr-vue3/components/business/home/blogs.vue

<script lang='ts' setup>
import img01 from '@/assets/images/home_blog_img01.png'
import img02 from '@/assets/images/home_blog_img02.png'
import img03 from '@/assets/images/home_blog_img03.png'
import {
  getBlogsListApi,
} from '~/api/model/blogs'

const list = ref<any>([])
// [
//   {
//     img: img01,
//     title: 'The Ultimate Guide to Choosing aPerfect',
//     link: '',
//   },
//   {
//     img: img02,
//     title: 'The Ultimate Guide to Choosing aPerfect',
//     link: '',
//   },
//   {
//     img: img03,
//     title: 'The Ultimate Guide to Choosing aPerfect',
//     link: '',
//   },
// ]

async function getVideoOrBlogsList(pageNo = 1, pageSize = 3) {
  const params = {
    pageNo,
    pageSize,
    categoryId: '',
    orderBy: 'createTime',
    orderType: 'desc',
  }
  const res: any = await getBlogsListApi(params)
  list.value = res.records
}
getVideoOrBlogsList()
</script>

<template>
  <div class="mt-160px mb-150px text-center">
    <h2 class="fw-600 text-40px text-#363C40 custom-title-font">
      Latest Blogs
    </h2>
    <div class="mt-20px w-500px mx-auto text-#999 text-16px lh-24px">
      Stay informed with industry trends, product highlights, and expert tips to
      help you grow your business.
    </div>
    <div class="mt-60px px-75px grid grid-cols-3 gap-106px text-left">
      <div v-for="item, index in list" :key="index">
        <NuxtLink to="/register">
          <!-- <img :src="item.thumbnailUrl" alt="" srcset="" class="hover-effect w-352px h-352px b-rd-10px">
          <div class="mt-20px">
            <div class="mb-10px text-#666 text-14px">
              {{ item.contentType === '1' ? 'Blog' : 'Video' }}
            </div>
            <h3 class="!mb-10px fw-600 text-24px text-#363C40 line-clamp-2 custom-title-font">
              {{ item.contentTitle }}
            </h3>
            <h2 class="!mb-20px  text-14px text-#999 line-clamp-2">
              {{ item.contentSubhead }}
            </h2>
            <div class="text-14px text-#C58C64 cursor-pointer read-more pos-relative  ">
              Read More
            </div>
          </div> -->
          <common-blog-item :item="item" />
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

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