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

<script lang='ts' setup>
import {
  getBlogsListApi,
} from '~/api/model/blogs'

const list = ref<any>([])
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="bg-#fff py-120px data-section"
    data-section-color="#ffffff"
  >
    <div class="w-1200-auto text-center">
      <h2 class="!text-36px !fw-800 text-#333 !mb-44px">
        EJET Spark <span class="custom-title-bg">Blog</span>
      </h2>
      <div class="flex items-center justify-end text-#9B6CFF cursor-pointer text-14px fw-bold mb-20px">
        View All
        <svgo-arrow-line-r class="w-16px h-16px ml-10px" />
      </div>
      <div class=" grid grid-cols-3 gap-40px text-left">
        <div v-for="item, index in list" :key="index">
          <common-blog-item :item="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.custom-title-bg{
  position: relative;
  display: inline-block;
  background: url(~/assets/images/title_bg03.png);
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: 100% auto;
  padding-bottom: 8px;
}
</style>