This commit is contained in:
2025-10-27 19:05:56 +08:00
parent 0033ac10ec
commit 98c73632bd
25 changed files with 1223 additions and 133 deletions

View File

@@ -1,7 +1,142 @@
<template>
<div class="home-view"></div>
<div class="home-view">
<!-- 轮播横幅区域 -->
<div class="banner-section">
<Carousel
:items="banners"
:interval="5000"
:active-icon="dangIcon"
indicator-position="bottom-right"
>
<template #default="{ item }">
<BannerCard :banner="item" />
</template>
</Carousel>
</div>
<!-- 热门资源推荐 -->
<div class="section">
<div class="section-header">
<h2 class="section-title">热门资源推荐</h2>
<div class="more-link">
<span>查看更多</span>
<el-icon><ArrowRight /></el-icon>
</div>
</div>
<div class="article-grid">
<HotArticleCard v-for="item in 3" :key="item" />
</div>
</div>
<!-- 思政新闻概览 -->
<div class="section">
<div class="section-header">
<h2 class="section-title">思政新闻概览</h2>
<div class="more-link">
<span>查看更多</span>
<el-icon><ArrowRight /></el-icon>
</div>
</div>
<div class="article-grid">
<IdeologicalArticleCard v-for="item in 3" :key="item" />
</div>
</div>
<!-- 我的学习数据 -->
<div class="section">
<div class="section-header">
<h2 class="section-title">我的学习数据</h2>
<div class="more-link">
<span>查看更多</span>
<el-icon><ArrowRight /></el-icon>
</div>
</div>
<LearningProgress />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BannerCard, LearningProgress } from '@/views/public/';
import { HotArticleCard, IdeologicalArticleCard } from '@/views/public/article';
import { Carousel } from '@/components/base';
import { ArrowRight } from '@element-plus/icons-vue';
import dangIcon from '@/assets/imgs/dang.svg';
// 模拟轮播数据,实际应该从接口获取
const banners = ref([
{ id: 1, imageUrl: '', linkType: 1, linkID: '', linkUrl: '' },
{ id: 2, imageUrl: '', linkType: 1, linkID: '', linkUrl: '' },
]);
</script>
<style lang="scss" scoped>
.home-view {
background-color: #F9F9F9;
min-height: 100vh;
padding-bottom: 60px;
}
.banner-section {
width: 100%;
height: 30vh;
}
.section {
max-width: 1440px;
margin: 0 auto;
padding: 0 120px;
margin-top: 60px;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
.section-title {
font-family: 'PingFang SC';
font-weight: 600;
font-size: 28px;
line-height: 38px;
color: #141F38;
margin: 0;
}
.more-link {
display: flex;
align-items: center;
gap: 2px;
cursor: pointer;
transition: color 0.3s;
span {
font-family: 'PingFang SC';
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(20, 31, 56, 0.3);
}
.el-icon {
width: 17px;
height: 17px;
color: rgba(20, 31, 56, 0.3);
}
&:hover {
span, .el-icon {
color: rgba(20, 31, 56, 0.6);
}
}
}
}
.article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
</style>

View File

@@ -143,10 +143,10 @@ onMounted(() => {
});
// 获取当前用户ID
const getUserID = () => {
function getUserID() {
const userInfo = store.getters['auth/user'];
return userInfo?.id || '';
};
}
// 加载任务列表(用户视角)
async function loadTaskList() {
@@ -161,8 +161,8 @@ async function loadTaskList() {
// 调用用户任务分页接口
const pageParam = {
page: 1,
size: 100 // 获取所有任务,不做分页
pageNumber: 1,
pageSize: 100 // 获取所有任务,不做分页
};
const filter: TaskItemVO = {