pc--vr/src/views/video/index.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 IndexSection from "~/components/IndexSection/index.vue";
import YXFooter from "~/components/layouts/Footer.vue";
import {useRouter} from 'vue-router'
const router = useRouter()
import * as videoApi from "~/api/video";

// 精选视频
let videoList = ref([]);
const __articles__ = async () => {
  try {
    const { data } = await videoApi.list({
      is_page: 0,
      is_boutique: 1,
    });
    videoList.value = data;
  } catch (error) {}
};
onMounted(__articles__);
//最近视频
let newList = ref([]);
const __article__ = async () => {
  try {
    const { data } = await videoApi.list({
      is_page: 1,
      limit: 12,
      status: "normal",
      page: 1,
    });
    newList.value = data.list;
  } catch (error) {}
};
onMounted(__article__);
const todetails = (id,type) => {
  router.push({   
    name: "videos",
    query: {
      id: id,
      type:type
    },
  });
};
//查看更多
const pickmore = (val) => {
  router.push({
    path: "/moreArticles",
    query: {
      title: val,
    },
  });
};
</script>

<template>
  <div class="articles-container">
    <Banner type="video" />
    <IndexTitle title="精选视频" @seeMore="pickmore"/>
    <div class="article-main">
      <template v-for="(item, idx) in videoList" :key="idx">
        <IndexSection
          @update="todetails(item.id)"
          :type="!item.image ? 'article' : 'common'"
          :title="item.title"
          :time-ago="item.published_at"
          :descs="item.description"
          :topic-name="item.topic?.title"
          :author="item.user?.username"
          :author-avatar="item.user?.avatar"
          :view_count="item.view_count"
          :comment_count="item.comment_count"
          :collect_count="item.collect_count"
          :share_count="item.share_count"
          :image="item.image"
        />
      </template>
    </div>

    <IndexTitle title="最新视频" />
    <div class="article-main">
      <template v-for="(item, idx) in newList" :key="idx">
        <IndexSection
          @update="todetails(item.id)"
          :type="!item.image ? 'article' : 'common'"
          :title="item.title"
          :time-ago="item.published_at"
          :descs="item.description"
          :topic-name="item.topic?.title"
          :author="item.user?.username"
          :author-avatar="item.user?.avatar"
          :view_count="item.view_count"
          :comment_count="item.comment_count"
          :collect_count="item.collect_count"
          :share_count="item.share_count"
          :image="item.image"
        />
      </template>
    </div>

    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
    <YXFooter />
  </div>
</template>

<style lang="scss" scoped>
@import "~/styles/variable.scss";

.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>