schoolNews/schoolNewsWeb/src/views/user/home/HomeView.vue

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