添加首页文章页面

web/src/views/AboutView.vue

@@ -1,15 +1,11 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div>
+
   </div>
 </template>
 
 <style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
+
 </style>
+<script setup lang="ts">
+</script>

web/src/views/HomeView.vue

@@ -1,9 +1,357 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+<template>
+  <div class="header-with-carousel">
+    <header class="top-navigation">
+      <div class="nav-left">
+        <div class="nav-title">湖北健康生活与康居环境设计研究中心</div>
+        <div class="nav-subtitle">湖北省高校人文社会科学重点研究基地</div>
+      </div>
+      <el-menu
+        class="nav-right"
+        mode="horizontal"
+        background-color="#b50009"
+        text-color="#fff"
+        active-text-color="#ffd700"
+        :default-active="activeIndex"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">首页</el-menu-item>
+        <el-menu-item index="2">基地概况</el-menu-item>
+        <el-menu-item index="3">科学研究</el-menu-item>
+        <el-menu-item index="4">学术交流</el-menu-item>
+        <el-menu-item index="5">社会服务</el-menu-item>
+        <el-menu-item index="6">案例资源</el-menu-item>
+      </el-menu>
+    </header>
+
+    <el-carousel
+      class="carousel-container"
+      height="400px"
+      indicator-position="bottom"
+      autoplay
+      interval="5000"
+      arrow="always"
+    >
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img
+            src="https://picsum.photos/1920/400?random=1"
+            alt="健康生活研究"
+            class="carousel-img"
+          >
+          <div class="carousel-caption">
+            <h3>健康生活环境设计研究成果展</h3>
+            <p>探索健康设计新路径，引领人居环境创新</p>
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img
+            src="https://picsum.photos/1920/400?random=2"
+            alt="学术研讨会"
+            class="carousel-img"
+          >
+          <div class="carousel-caption">
+            <h3>2025健康设计国际学术研讨会</h3>
+            <p>汇聚全球专家智慧，共话健康人居未来</p>
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img
+            src="https://picsum.photos/1920/400?random=3"
+            alt="社区服务案例"
+            class="carousel-img"
+          >
+          <div class="carousel-caption">
+            <h3>社区健康服务创新实践</h3>
+            <p>以设计赋能社区，提升居民生活品质</p>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+
+  <div class="news-section">
+    <div class="section-header">
+      <h2>新闻动态 <span class="en-title">News</span></h2>
+      <el-link class="more-btn">More</el-link>
+    </div>
+
+    <div class="news-cards">
+      <el-card
+        class="news-card"
+        v-for="(news, index) in newsList"
+        :key="index"
+        shadow="hover"
+        :body-style="{ padding: '0px' }"
+      >
+        <img :src="news.imageUrl" alt="新闻图片" class="card-img">
+        <div class="card-content">
+          <h3 class="card-title">{{ news.title }}</h3>
+          <p class="card-desc">{{ news.desc }}</p>
+          <el-button type="text" class="detail-btn">
+            <el-icon><ArrowRight /></el-icon> 详情
+          </el-button>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+// **修复点1：将所有用到的 Element Plus 组件一次性导入**
+import {
+  ElMenu,
+  ElMenuItem,
+  ElCarousel,
+  ElCarouselItem,
+  ElLink,
+  ElCard,
+  ElButton,
+  ElIcon
+} from 'element-plus';
+// **修复点2：从 @element-plus/icons-vue 导入图标**
+import { ArrowRight } from '@element-plus/icons-vue';
+
+
+// 导航菜单激活项
+const activeIndex = ref('1');
+const handleSelect = (index: string) => {
+  activeIndex.value = index;
+  // 可添加导航跳转逻辑
+};
+
+// 模拟新闻数据（实际项目可替换为接口请求）
+const newsList = ref([
+  {
+    imageUrl: 'https://picsum.photos/300/200?random=10', // 随机图片占位
+    title: '健康设计与知识创新国际学术研讨会',
+    desc: '探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。'
+  },
+  {
+    imageUrl: 'https://picsum.photos/300/200?random=11',
+    title: '第二届中国研究生“美丽中国”创新设计大赛',
+    desc: '探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。'
+  },
+  {
+    imageUrl: 'https://picsum.photos/300/200?random=12',
+    title: '国家一流专业中期建设成果展',
+    desc: '探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。'
+  }
+]);
 </script>
 
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>
+<style scoped>
+.header-with-carousel {
+  width: 100%;
+}
+
+/* 顶部导航样式 */
+.top-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 50px; /* 增加左右边距 */
+  color: #fff;
+  background-color: #b50009;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.nav-left {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.4;
+}
+
+.nav-title {
+  font-size: 18px; /* 稍大一些 */
+  font-weight: bold;
+}
+
+.nav-subtitle {
+  font-size: 12px; /* 稍小一些，形成对比 */
+  opacity: 0.9;
+}
+
+.nav-right {
+  display: flex;
+  align-items: center;
+}
+
+.el-menu--horizontal {
+  border-bottom: none;
+}
+
+.el-menu-item {
+  padding: 0 20px !important; /* 增加菜单项间距 */
+  font-size: 16px;
+}
+
+/* 轮播图样式 */
+.carousel-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 保持图片比例并填充容器 */
+}
+
+.carousel-caption {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.7); /* 加深阴影 */
+  width: 80%;
+}
+
+.carousel-caption h3 {
+  font-size: 32px; /* 加大标题字号 */
+  margin-bottom: 15px;
+  font-weight: 500;
+}
+
+.carousel-caption p {
+  font-size: 18px;
+}
+
+/* --- 新闻动态部分 --- */
+.news-section {
+  max-width: 1200px; /* 内容居中，限制最大宽度 */
+  margin: 50px auto; /* 增加上下外边距 */
+  padding: 0 20px;
+}
+
+/* 标题栏 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 30px; /* 增加标题和内容间距 */
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 10px;
+}
+
+.section-header h2 {
+  font-size: 26px; /* 加大标题字号 */
+  margin: 0;
+  font-weight: 400;
+}
+
+.en-title {
+  font-size: 16px;
+  color: #999;
+  margin-left: 10px;
+  text-transform: uppercase; /* 英文大写 */
+}
+
+.more-btn {
+  color: #999;
+  font-size: 14px;
+}
+.more-btn:hover {
+  color: #b50009;
+}
+
+/* 新闻卡片列表 */
+.news-cards {
+  display: grid; /* 使用 Grid 布局，更灵活 */
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px; /* 卡片之间的间距 */
+}
+
+.news-card {
+  border: 1px solid #e0e0e0; /* 添加一个细微的边框 */
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.news-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.card-img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  display: block;
+}
+
+.card-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1; /* 让内容区域填满卡片剩余空间 */
+}
+
+.card-title {
+  font-size: 18px;
+  margin: 0 0 10px 0;
+  font-weight: 500;
+  color: #333;
+}
+
+.card-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.7;
+  flex-grow: 1; /* 让描述文本占满，将按钮推到底部 */
+  margin-bottom: 15px;
+}
+
+.detail-btn {
+  color: #b50009 !important; /* 按钮文字为红色主色调 */
+  display: flex;
+  align-items: center;
+  gap: 5px; /* 图标与文字间距 */
+  padding: 0 !important; /* 去除按钮默认 padding */
+  align-self: flex-start; /* 让按钮在左侧 */
+}
+
+
+/* --- 响应式调整 --- */
+@media (max-width: 992px) {
+  .news-cards {
+    grid-template-columns: repeat(2, 1fr); /* 平板：一行两个 */
+  }
+}
+
+@media (max-width: 768px) {
+  .top-navigation {
+    flex-direction: column;
+    padding: 15px;
+  }
+  .nav-left {
+    margin-bottom: 15px;
+    text-align: center;
+  }
+  .carousel-caption h3 {
+    font-size: 20px;
+  }
+  .carousel-caption p {
+    font-size: 14px;
+  }
+  .news-cards {
+    grid-template-columns: 1fr; /* 手机：一行一个 */
+  }
+}
+</style>