对接数据
This commit is contained in:
103
pages/Learn/Depth.vue
Normal file
103
pages/Learn/Depth.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="container" v-loading.fullscreen.lock="fullscreenLoading">
|
||||
<div class="top-text">
|
||||
<div class="title">In-Depth Analysis</div>
|
||||
<div class="description">
|
||||
Provides thorough articles, case studies, and technical breakdowns. Analyze AI topics from both theoretical and practical perspectives, offering valuable guidance for professionals, researchers, and enthusiasts looking to deepen their understanding.
|
||||
</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="analysis" />
|
||||
</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: 'analysis', 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>
|
||||
103
pages/Learn/Observer.vue
Normal file
103
pages/Learn/Observer.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="container" v-loading.fullscreen.lock="fullscreenLoading">
|
||||
<div class="top-text">
|
||||
<div class="title">AI Observer</div>
|
||||
<div class="description">
|
||||
An organized hub of leading AI research projects and frameworks. Dive into the methodologies of major academic papers, understand the underlying technical principles, and gain insights that support both learning and hands-on 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="observer" />
|
||||
</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: 'observer', 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>
|
||||
103
pages/Learn/Pioneer.vue
Normal file
103
pages/Learn/Pioneer.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<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>
|
||||
40
pages/Learn/index.vue
Normal file
40
pages/Learn/index.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div id="normal-container">
|
||||
<IntegratedLayout>
|
||||
<div class="content">
|
||||
<div class="bread-menu">
|
||||
<span>AI Hub</span>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
<span class="crumbs gradient-color">{{$route.name}}</span>
|
||||
</div>
|
||||
<nuxt-child />
|
||||
</div>
|
||||
</IntegratedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding-bottom: 100px;
|
||||
.bread-menu {
|
||||
font-size: $mid-font-size;
|
||||
margin: 100px 0;
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
|
||||
.crumbs {
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user