104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<template>
|
|
<div class="container" v-loading.fullscreen.lock="fullscreenLoading">
|
|
<div class="top-text">
|
|
<div class="title">Pioneer In the Field</div>
|
|
<div class="description">
|
|
Spotlights leading figures, research teams, and innovators in AI. Discover their philosophies, key achievements, and the impact they are making, offering inspiration and context for understanding the forefront of AI development.
|
|
</div>
|
|
</div>
|
|
<div class="input">
|
|
<SearchInput v-model="searchText" placeholder="Please enter the key words" @search="handleTextSearch" />
|
|
</div>
|
|
<div class="list">
|
|
<ListCardItem v-for="it in articleList" :key="it.id" :item="it" type="pioneer" />
|
|
</div>
|
|
<div class="pagination-wrapper">
|
|
<Pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ListCardItem from "@/pages/AIHub/components/ListCardItem.vue";
|
|
|
|
export default {
|
|
components: {
|
|
ListCardItem,
|
|
},
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
totalPages: 1,
|
|
pageSize: 10,
|
|
articleList: [],
|
|
searchText: '',
|
|
total: 0,
|
|
fullscreenLoading: false,
|
|
}
|
|
},
|
|
methods: {
|
|
// 模糊搜索
|
|
async handleTextSearch() {
|
|
await this.getArticleListData(this.currentPage, this.pageSize, this.searchText);
|
|
},
|
|
calculateTotalPages() {
|
|
// 否则向上取整计算总页数
|
|
this.totalPages = this.total === 0 ? 1 : Math.ceil(this.total / this.pageSize);
|
|
},
|
|
handlePageChange(pageNumber) {
|
|
this.currentPage = pageNumber;
|
|
this.getArticleListData(pageNumber, 10);
|
|
},
|
|
// 获取文章列表
|
|
async getArticleListData(page = 1, limit = 10, searchText) {
|
|
this.fullscreenLoading = true;
|
|
const params = {page, limit, articleType: 'pioneer', title: searchText};
|
|
if (!searchText) {
|
|
delete params.title;
|
|
}
|
|
const {data: res} = await this.$api.article.getArticleList(params);
|
|
const {code, data} = res;
|
|
if (code === 0 && data.list) {
|
|
this.articleList = data.list;
|
|
this.total = data.total;
|
|
this.calculateTotalPages();
|
|
}
|
|
this.fullscreenLoading = false;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getArticleListData(this.currentPage, this.pageSize);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: $huge-font-size1;
|
|
}
|
|
|
|
.description {
|
|
font-size: $big-font-size;
|
|
color: $grey-color;
|
|
}
|
|
|
|
.input {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.input-container {
|
|
margin-top: 100px;
|
|
margin-bottom: 60px;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
margin-bottom: 60px;
|
|
}
|
|
}
|
|
</style>
|