web-home

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

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