pc--vr/src/views/zixun.vue

<script setup>
import { ref, onMounted } from "vue";
import Banner from "~/components/Banner/index.vue";
import IndexTitle from "~/components/IndexTitle/index.vue";
import IndexNews from "~/components/IndexNews/index.vue";
import YXFooter from "~/components/layouts/Footer.vue";
import * as newsApi from "~/api/news";
import { useRouter } from "vue-router";
const router = useRouter();

const page = ref(1);
const total = ref(0)
//分页器
const handleCurrentChange = (val) => {
  page.value = val;
  __news__();
};
// 获取精品咨询列表
let newsList = ref([]);
const __news__ = async () => {
  try {
    const { data } = await newsApi.list({
      page: page.value,
      limit: 12,
      is_page: 1,
      is_boutique: 1,
    });
    newsList.value = data.list;
    total.value = data.total
  } catch (error) {}
};
onMounted(__news__);

const todetails = (id) => {
  router.push({
    name: "news",
    query: {
      id: id,
    },
  });
};
</script>

<template>
  <div class="articles-container">
    <div class="title">精选资讯</div>
    <div class="content-list flex-row flex-jc-sb">
      <template v-for="(item, idx) in newsList" :key="idx">
        <IndexNews
          @update="todetails(item.id)"
          :title="item.title"
          :time-ago="item.published_at"
          :like-count="item.like_count"
          :comment-count="item.comment_count"
          :image="item.image"
        />
      </template>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="12"
        @current-change="handleCurrentChange"
      />
    </div>
    <YXFooter />
  </div>
</template>

<style lang="scss" scoped>
@import "~/styles/variable.scss";
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
  text-align: left;
  font-style: normal;
  margin-bottom: 24px;
}
.articles-container {
  .index-title-container {
    margin-bottom: 20px;
  }

  .content-list {
    margin-bottom: 30px;
    column-gap: 20px;
    flex-wrap: wrap;
    height: 255px;
    overflow: hidden;
  }

  .article-main {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    row-gap: 30px;
  }
}
</style>