修改社会服务web页面

web/src/views/SocialService.vue

@@ -4,84 +4,132 @@
     <nav class="navbar">
       <div class="container">
         <ul class="nav-links">
-          <li><a href="#" class="active">社会服务</a></li>
+          <li>
-          <li><a href="#">校企合作</a></li>
+            <a
-          <li><a href="#">研究实习项目</a></li>
+              href="#"
-          <li><a href="#">乡村政府项目</a></li>
+              @click.prevent="currentTab = 'schoolEnterprise'"
+              :class="{ active: currentTab === 'schoolEnterprise' && !showAllList }"
+            >校企合作</a>
+          </li>
+          <li>
+            <a
+              href="#"
+              @click.prevent="currentTab = 'researchInternship'"
+              :class="{ active: currentTab === 'researchInternship' && !showAllList }"
+            >研究实习项目</a>
+          </li>
+          <li>
+            <a
+              href="#"
+              @click.prevent="currentTab = 'ruralGovernment'"
+              :class="{ active: currentTab === 'ruralGovernment' && !showAllList }"
+            >乡村政府项目</a>
+          </li>
         </ul>
       </div>
     </nav>
 
     <!-- 主要内容区 -->
-    <main class="container main-content">
+    <main class="container main-content" v-loading="loading">
-      <!-- 标题区域 -->
+      <!-- 通用标题 -->
       <div class="header-section">
         <h1 class="main-title">良品优生省级研究生工作站</h1>
         <p class="sub-title">湖北省省级研究生工作站</p>
         <div class="divider"></div>
       </div>
 
-      <!-- 介绍文本 -->
+      <!-- 全部文章列表页面 -->
-      <section class="intro-section">
+      <div v-if="showAllList" class="all-articles-page">
-        <p class="intro-text">
+        <!-- 面包屑导航 -->
-          探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。
+        <div class="breadcrumbs">
-        </p>
+          <a href="#" @click.prevent="showAllList = false">首页</a>
-        <p class="intro-text">
+          <span>/</span>
-          探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。
+          <span>{{ getTabName(currentTab) }}</span>
-        </p>
+          <span>/</span>
-        <button class="learn-more-btn">
+          <span>全部项目</span>
-          了解更多 <i class="icon-arrow-right"></i>
+        </div>
+
+        <!-- 列表标题 -->
+        <div class="all-articles-header">
+          <h2>{{ getTabName(currentTab) }} - 全部项目</h2>
+          <button class="back-btn" @click="showAllList = false">
+            <i class="icon-arrow-left"></i> 返回
           </button>
-      </section>
-
-      <!-- 项目展示 -->
-      <section class="projects-section">
-        <div class="project-cards">
-          <!-- 项目卡片1 -->
-          <div class="project-card">
-            <div class="card-image">
-              <img src="https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/1b667f7ff4554994879ca8368f727027.png~tplv-a9rns2rl98-24-95-exif:1080:1080.png?rcl=20251029235834DED7819DF208E895A9E9&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1762358314&x-signature=%2B62EAKbRjpVd1O1sHglyipyaAS8%3D"
-                   alt="良品铺子文化馆数位界面设计"
-                   class="card-img">
         </div>
+
+        <!-- 文章列表 -->
+        <div class="all-articles-list">
+          <div
+            v-for="item in allArticles"
+            :key="item.id"
+            class="article-item"
+            @click="selectMainArticle(item)"
+          >
+            <img :src="item.cover_url" :alt="item.title" class="item-img" />
+            <div class="item-info">
+              <h4 class="item-title">{{ item.title }}</h4>
+              <p class="item-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p>
+              <p class="item-date">{{ formatDate(item.create_time) }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div v-if="allArticles.length === 0" class="empty-state">
+          <p>暂无相关项目</p>
+        </div>
+      </div>
+
+      <!-- 原首页内容 -->
+      <div v-else>
+        <!-- 主文章内容区 -->
+        <div class="content-section" v-if="currentArticle">
+          <article class="main-article">
+            <!-- 封面图 -->
+            <div class="article-cover">
+              <img :src="currentArticle.cover_url" :alt="currentArticle.title" class="cover-img" />
+            </div>
+
+            <!-- 文字内容 -->
+            <div class="article-body">
+              <h2 class="article-title">{{ currentArticle.title }}</h2>
+              <p class="article-subtitle" v-if="currentArticle.subtitle">{{ currentArticle.subtitle }}</p>
+              <p class="article-date">{{ formatDate(currentArticle.create_time) }}</p>
+              <div class="article-content" v-html="currentArticle.content"></div>
+            </div>
+          </article>
+
+          <!-- 相关文章标题 + 更多按钮 -->
+          <div class="related-title">
+            <h3>更多相关项目</h3>
+            <button class="view-all-btn" @click="showAllList = true">
+              查看全部 <i class="icon-arrow-right"></i>
+            </button>
+          </div>
+
+          <!-- 其他三篇文章（卡片） -->
+          <div class="related-articles">
+            <div
+              v-for="item in relatedArticles"
+              :key="item.id"
+              class="related-card"
+              @click="selectMainArticle(item)"
+            >
+              <img :src="item.cover_url" :alt="item.title" class="card-img" />
               <div class="card-content">
-              <h3 class="card-title">良品铺子文化馆数位界面设计</h3>
+                <h4 class="card-title">{{ item.title }}</h4>
-              <p class="card-meta">设计/品牌策划</p>
+                <p class="card-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p>
-              <p class="card-desc">校企导师制 · 企业导师XXX</p>
+                <p class="card-date">{{ formatDate(item.create_time) }}</p>
               </div>
             </div>
-
-          <!-- 项目卡片2 -->
-          <div class="project-card">
-            <div class="card-image">
-              <img src="https://picsum.photos/id/292/600/400"
-                   alt="制度型开放推动经济高质量发展"
-                   class="card-img">
-            </div>
-            <div class="card-content">
-              <h3 class="card-title">制度型开放推动经济高质量发展</h3>
-              <p class="card-meta">研究项目</p>
-              <p class="card-desc">制度型开放 · 经济发展研究</p>
-            </div>
-          </div>
-
-          <!-- 项目卡片3 -->
-          <div class="project-card">
-            <div class="card-image">
-              <img src="https://picsum.photos/id/431/600/400"
-                   alt="制度型开放助推经济高质量发展"
-                   class="card-img">
-            </div>
-            <div class="card-content">
-              <h3 class="card-title">制度型开放助推经济高质量发展</h3>
-              <p class="card-meta">研究项目</p>
-              <p class="card-desc">制度型开放 · 经济政策研究</p>
-            </div>
           </div>
         </div>
 
-        <a href="#" class="more-link">More <i class="icon-angle-right"></i></a>
+        <!-- 空状态 -->
-      </section>
+        <div v-else class="empty-state">
+          <p>暂无内容</p>
+        </div>
+      </div>
     </main>
 
     <!-- 页脚 -->
@@ -98,301 +146,358 @@ export default {
   name: 'WorkstationPage',
   data() {
     return {
-      // 可以在这里添加需要的数据
+      currentTab: 'schoolEnterprise',
-    }
+      articles: {},
+      currentArticle: null,
+      relatedArticles: [],
+      allArticles: [], // 用于全部文章列表
+      loading: false,
+      showAllList: false, // 控制显示全部文章列表页面
+    };
+  },
+  computed: {
+    currentArticles() {
+      return this.articles[this.currentTab] || [];
+    },
+  },
+  watch: {
+    currentTab: {
+      immediate: true,
+      handler(newTab) {
+        this.fetchArticles(newTab);
+        // 切换标签时隐藏全部列表页面
+        this.showAllList = false;
+      },
     },
-  mounted() {
-    // 页面加载后的初始化操作
-    this.addScrollEffects();
   },
   methods: {
-    addScrollEffects() {
+    async fetchArticles(category) {
-      // 添加滚动时的动画效果
+      this.loading = true;
-      const cards = document.querySelectorAll('.project-card');
+      try {
-      const observer = new IntersectionObserver((entries) => {
+        const mockData = this.getMockData(category);
-        entries.forEach(entry => {
+        this.articles[category] = mockData;
-          if (entry.isIntersecting) {
-            entry.target.classList.add('visible');
-          }
-        });
-      }, { threshold: 0.1 });
 
-      cards.forEach(card => {
+        const list = this.articles[category];
-        observer.observe(card);
+        if (list.length > 0) {
+          this.currentArticle = list[0];
+          this.relatedArticles = list.slice(1, 4);
+          this.allArticles = list; // 全部文章数据
+        } else {
+          this.currentArticle = null;
+          this.relatedArticles = [];
+          this.allArticles = [];
+        }
+      } catch (error) {
+        console.error('获取文章失败:', error);
+        this.$message?.error?.('加载失败') || alert('加载失败');
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    selectMainArticle(article) {
+      this.currentArticle = article;
+      this.relatedArticles = this.currentArticles
+        .filter(a => a.id !== article.id)
+        .slice(0, 3);
+      this.showAllList = false; // 选中文章后返回首页
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    },
+
+    formatDate(dateStr) {
+      const date = new Date(dateStr);
+      return date.toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
       });
-    }
+    },
-  }
+
-}
+    getTabName(tab) {
+      const map = {
+        schoolEnterprise: '校企合作',
+        researchInternship: '研究实习项目',
+        ruralGovernment: '乡村政府项目',
+      };
+      return map[tab] || '';
+    },
+
+    // 模拟数据
+    getMockData(category) {
+      const base = [
+        {
+          id: 1,
+          title: '与良品铺子共建健康食品联合研发中心',
+          subtitle: '产学研深度融合，5项专利获批',
+          cover_url: 'https://picsum.photos/id/180/1200/600',
+          content: `<p>2025年3月，我校与良品铺子正式签署战略合作协议，共建“健康食品联合研发中心”。中心聚焦功能性健康食品研发、食品质量安全检测、食品包装创新等三大方向，配备专业研发设备20余台套，组建由12名教授、20名企业技术骨干组成的研发团队。项目实施以来，已成功研发益生菌零食、低糖糕点等3类新产品，申请发明专利5项，实用新型专利3项，其中2项专利已实现成果转化，产生直接经济效益800余万元。</p>`,
+          create_time: '2025-03-15 10:00:00',
+        },
+        {
+          id: 2,
+          title: '现代食品产业学院揭牌仪式',
+          subtitle: '校企共建人才培养新模式',
+          cover_url: 'https://picsum.photos/id/201/1200/600',
+          content: `<p>产业学院整合企业实训资源，为研究生提供“课堂+车间”双场景教学。学院建筑面积3000平方米，设有食品研发实验室、品质控制中心、市场营销模拟实训室等6个功能区域。采用“3+1”培养模式，研究生前3个学期在校学习理论知识，最后1个学期进入企业开展顶岗实习。目前已开设食品科学与工程、食品质量与安全、市场营销等3个专业方向，录取研究生120名，其中85%的研究生在实习期间参与了企业实际项目研发。</p>`,
+          create_time: '2025-02-20 09:30:00',
+        },
+        {
+          id: 3,
+          title: '研究生双导师培养计划启动',
+          subtitle: '42位企业导师加入指导',
+          cover_url: 'https://picsum.photos/id/160/1200/600',
+          content: `<p>计划覆盖食品科学、营销管理、设计等3个专业方向。每位研究生配备1名校内导师和1名企业导师，校内导师负责学术指导和理论教学，企业导师负责实践指导和项目研发。企业导师均来自良品铺子、周黑鸭、劲牌等知名企业，其中高级工程师25名，企业技术总监8名，具有丰富的行业实践经验。培养计划实施以来，已组织校企导师联合授课36次，开展企业实地教学18次，研究生参与企业横向课题45项。</p>`,
+          create_time: '2025-01-10 14:00:00',
+        },
+        {
+          id: 4,
+          title: '功能性健康食品研发项目',
+          subtitle: '6个月科研津贴3000元/月',
+          cover_url: 'https://picsum.photos/id/96/1200/600',
+          content: `<p>项目聚焦益生菌零食开发，研究生可申请参与。项目为期6个月，面向食品科学、生物工程等相关专业研究生开放申请，选拔20名优秀研究生组成研发团队。项目提供每月3000元科研津贴，配备专项研发经费50万元，以及专业的实验设备和场地支持。研发成果归校企双方共同所有，研究生可参与专利申请和论文发表。目前已有15名研究生通过选拔，项目已完成前期市场调研和配方设计工作。</p>`,
+          create_time: '2024-12-05 11:00:00',
+        },
+        {
+          id: 5,
+          title: '企业导师培训营',
+          subtitle: '提升指导能力，共建培养体系',
+          cover_url: 'https://picsum.photos/id/42/1200/600',
+          content: `<p>为企业导师提供教学方法与科研指导培训。培训营为期3天，采用“理论授课+案例分析+分组研讨”的方式进行，邀请高校教育学专家、资深导师进行授课。培训内容包括研究生培养政策解读、学术论文指导方法、科研项目管理、师生沟通技巧等方面。共有42位企业导师参加培训，培训结束后组织考核，考核合格者颁发企业导师资格证书。通过培训，有效提升了企业导师的教学指导能力，促进了校企培养体系的融合。</p>`,
+          create_time: '2024-11-20 15:00:00',
+        },
+      ];
+
+      const maps = {
+        schoolEnterprise: base.slice(0, 5),
+        researchInternship: [
+          { ...base[3], id: 6, title: '功能性健康食品研发实习', subtitle: '科研+实践双轨制', cover_url: 'https://picsum.photos/id/24/1200/600' },
+          { ...base[1], id: 7, title: '健康食品消费行为调研', subtitle: '大数据分析方向', cover_url: 'https://picsum.photos/id/42/1200/600' },
+          { ...base[2], id: 8, title: '品牌策划实习项目', subtitle: '市场部全流程参与', cover_url: 'https://picsum.photos/id/96/1200/600' },
+          { ...base[0], id: 9, title: '联合实验室科研助理', subtitle: '设备操作与实验设计', cover_url: 'https://picsum.photos/id/180/1200/600' },
+          { ...base[4], id: 10, title: '科研数据分析实训', subtitle: 'Python与SPSS实战', cover_url: 'https://picsum.photos/id/150/1200/600' },
+        ],
+        ruralGovernment: [
+          {
+            id: 11,
+            title: '乡村特色农产品品牌打造',
+            subtitle: '覆盖10个乡镇，品牌增值30%',
+            cover_url: 'https://picsum.photos/id/287/1200/600',
+            content: `<p>为当地蜂蜜、茶叶等农产品设计品牌形象。项目联合当地政府，选取10个乡镇的特色农产品进行品牌化打造，包括品牌定位、LOGO设计、包装创新、市场推广等全流程服务。组建由设计、营销、农学等专业研究生组成的服务团队，深入乡村开展实地调研，了解产品特点和市场需求。项目实施以来，已成功打造“荆楚蜜语”蜂蜜、“云雾山茶”等5个区域品牌，产品附加值提升30%以上，带动农户户均增收8000元。</p>`,
+            create_time: '2025-03-01 08:00:00',
+          },
+          {
+            id: 12,
+            title: '乡村电商人才培育计划',
+            subtitle: '培训500+农户',
+            cover_url: 'https://picsum.photos/id/301/1200/600',
+            content: `<p>开设直播带货、短视频运营课程。计划面向农村地区开展电商技能培训，覆盖500名农户和农村创业者。培训内容包括电商平台操作、直播带货技巧、短视频拍摄剪辑、产品包装设计、客户服务等方面，采用“线上课程+线下实操+导师指导”的培训模式。配备20名研究生作为培训助教，建立长期跟踪指导机制。目前已开展培训12期，培训农户380名，其中150名农户已成功开设电商店铺，月销售额最高达5万元。</p>`,
+            create_time: '2025-02-15 10:00:00',
+          },
+          {
+            id: 13,
+            title: '"健康乡村"建设工程',
+            subtitle: '定期义诊 + 健康设施建设',
+            cover_url: 'https://picsum.photos/id/237/1200/600',
+            content: `<p>研究生医疗队下乡开展健康讲座与义诊活动。项目联合医学院、公共卫生学院组建研究生医疗队，深入乡村开展健康服务。每月组织1次大型义诊活动，提供常见病诊疗、健康体检、慢性病管理等服务；每季度开展2次健康讲座，内容包括健康教育、疾病预防、合理膳食等方面。同时，协助乡村建设5个标准化卫生室，配备基础医疗设备和常用药品。项目实施以来，已开展义诊活动8次，服务村民2000余人次，健康讲座16场，受益群众3000余人。</p>`,
+            create_time: '2025-01-20 09:00:00',
+          },
+          {
+            id: 14,
+            title: '农产品质量安全检测项目',
+            subtitle: '为乡村提供免费检测服务',
+            cover_url: 'https://picsum.photos/id/42/1200/600',
+            content: `<p>建立移动检测车，覆盖周边5个乡镇。项目投入80万元购置移动检测车1辆，配备农药残留检测仪、重金属检测仪、微生物检测仪等专业设备，为乡村农产品提供免费质量安全检测服务。组建由食品质量与安全专业研究生组成的检测团队，定期下乡开展检测服务，同时为农户提供农产品质量安全咨询和技术指导。目前已开展检测服务20次，检测农产品样本500余个，合格率达98%，为农产品质量安全提供了有力保障。</p>`,
+            create_time: '2024-12-10 13:00:00',
+          },
+        ],
+      };
+
+      return (maps[category] || []).sort((a, b) => new Date(b.create_time) - new Date(a.create_time));
+    },
+  },
+};
 </script>
 
 <style scoped>
-/* 基础样式 */
+/* 基础样式保持不变 */
-* {
+* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
-  margin: 0;
+.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
 
-.container {
+/* 导航栏 */
-  width: 100%;
+.navbar { background-color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 1rem 0; position: sticky; top: 0; z-index: 100; }
-  max-width: 1200px;
+.nav-links { display: flex; list-style: none; gap: 2.5rem; justify-content: center; }
-  margin: 0 auto;
+.nav-links a { text-decoration: none; color: #333; font-weight: 500; transition: all 0.3s ease; padding: 0.5rem 0; position: relative; cursor: pointer; }
-  padding: 0 20px;
+.nav-links a.active { color: #165DFF; font-weight: 600; }
-}
+.nav-links a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #165DFF; border-radius: 3px; }
+.nav-links a:hover:not(.active) { color: #4080FF; }
 
-/* 导航栏样式 */
+/* 主要内容 */
-.navbar {
+.main-content { padding: 4rem 0; min-height: 80vh; }
-  background-color: #ffffff;
+.header-section { text-align: center; margin-bottom: 3rem; }
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+.main-title { font-size: 2.5rem; color: #1D2129; margin-bottom: 0.5rem; font-weight: 700; }
-  padding: 1rem 0;
+.sub-title { color: #6B7280; font-size: 1.1rem; margin-bottom: 1.5rem; }
-  position: sticky;
+.divider { width: 80px; height: 3px; background-color: #165DFF; margin: 0 auto; border-radius: 3px; }
-  top: 0;
-  z-index: 100;
-}
 
-.nav-links {
+/* 主文章 */
+.main-article { max-width: 900px; margin: 0 auto 5rem; text-align: center; }
+.article-cover { margin-bottom: 2.5rem; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
+.cover-img { width: 100%; height: auto; max-height: 500px; object-fit: cover; transition: transform 0.6s ease; }
+.article-cover:hover .cover-img { transform: scale(1.02); }
+.article-body { max-width: 800px; margin: 0 auto; }
+.article-title { font-size: 2.2rem; color: #1D2129; margin-bottom: 1rem; font-weight: 700; line-height: 1.4; }
+.article-subtitle { color: #4B5563; font-size: 1.3rem; margin-bottom: 1rem; font-weight: 500; font-style: italic; }
+.article-date { color: #9CA3AF; font-size: 1rem; margin-bottom: 2.5rem; font-weight: 500; }
+.article-content { color: #4B5563; line-height: 1.95; font-size: 1.1rem; text-align: left; margin: 0 auto; }
+.article-content >>> p { margin-bottom: 1.5rem; }
+
+/* 相关文章标题 + 更多按钮 */
+.related-title {
   display: flex;
-  list-style: none;
+  justify-content: space-between;
-  gap: 2.5rem;
+  align-items: center;
-  justify-content: center;
-}
-
-.nav-links a {
-  text-decoration: none;
-  color: #333333;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  padding: 0.5rem 0;
-  position: relative;
-}
-
-.nav-links a:hover,
-.nav-links a.active {
-  color: #1a56db;
-}
-
-.nav-links a.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  background-color: #1a56db;
-  border-radius: 3px;
-}
-
-/* 主要内容区样式 */
-.main-content {
-  padding: 4rem 0;
-}
-
-/* 标题区域 */
-.header-section {
   text-align: center;
-  margin-bottom: 3rem;
+  margin: 4rem auto 2rem;
-}
-
-.main-title {
-  font-size: 2.5rem;
-  color: #1e293b;
-  margin-bottom: 0.5rem;
-  font-weight: 700;
-}
-
-.sub-title {
-  color: #64748b;
-  font-size: 1.1rem;
-  margin-bottom: 1.5rem;
-}
-
-.divider {
-  width: 80px;
-  height: 3px;
-  background-color: #1a56db;
-  margin: 0 auto;
-  border-radius: 3px;
-}
-
-/* 介绍文本区域 */
-.intro-section {
   max-width: 900px;
-  margin: 0 auto 4rem;
-  text-align: center;
 }
-
+.related-title h3 { font-size: 1.7rem; color: #1D2129; font-weight: 600; margin: 0; }
-.intro-text {
+.view-all-btn {
-  color: #475569;
+  background: #165DFF;
-  line-height: 1.8;
-  margin-bottom: 1.5rem;
-  font-size: 1.05rem;
-}
-
-.learn-more-btn {
-  background-color: #1a56db;
   color: white;
   border: none;
-  padding: 0.8rem 2rem;
+  padding: 0.6rem 1.5rem;
-  border-radius: 6px;
+  border-radius: 8px;
+  font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.3s ease;
+  display: flex;
-  display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  margin-top: 1rem;
+  transition: all 0.3s ease;
 }
-
+.view-all-btn:hover {
-.learn-more-btn:hover {
+  background: #0E42D2;
-  background-color: #1e40af;
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.2);
 }
+.icon-arrow-right::after { content: '→'; font-size: 1.1rem; }
 
-.icon-arrow-right::after {
+/* 相关卡片 */
-  content: '→';
+.related-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto 3rem; }
-  font-size: 1.1rem;
+.related-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.08); cursor: pointer; transition: all 0.4s ease; display: flex; flex-direction: column; }
-}
+.related-card:hover { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(0,0,0,0.15); }
+.card-img { width: 100%; height: 180px; object-fit: cover; }
+.card-content { padding: 1.5rem; flex-grow: 1; text-align: center; }
+.card-title { font-size: 1.15rem; color: #1D2129; margin-bottom: 0.75rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.card-subtitle { color: #4B5563; font-size: 0.95rem; margin-bottom: 0.75rem; font-weight: 500; font-style: italic; }
+.card-date { color: #9CA3AF; font-size: 0.9rem; }
 
-/* 项目展示区域 */
+/* 空状态 */
-.projects-section {
+.empty-state { text-align: center; padding: 4rem 0; color: #9CA3AF; font-size: 1.1rem; }
-  margin-top: 5rem;
-}
 
-.project-cards {
+/* 页脚 */
-  display: grid;
+.footer { background-color: #F7F8FA; padding: 2.5rem 0; margin-top: 5rem; border-top: 1px solid #E5E6EB; }
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+.copyright { text-align: center; color: #86909C; font-size: 0.95rem; }
-  gap: 2.5rem;
+
+/* 全部文章列表页面样式 */
+.all-articles-page { max-width: 1000px; margin: 0 auto; }
+.breadcrumbs { margin-bottom: 2rem; font-size: 0.95rem; color: #6B7280; }
+.breadcrumbs a { color: #165DFF; text-decoration: none; margin-right: 0.5rem; }
+.breadcrumbs span { margin: 0 0.5rem; }
+.all-articles-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 3rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #E5E6EB;
 }
-
+.all-articles-header h2 { font-size: 2rem; color: #1D2129; font-weight: 700; margin: 0; }
-.project-card {
+.back-btn {
-  background-color: white;
+  background: #fff;
-  border-radius: 12px;
+  color: #165DFF;
-  overflow: hidden;
+  border: 1px solid #165DFF;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  padding: 0.6rem 1.5rem;
-  transition: all 0.4s ease;
+  border-radius: 8px;
-  opacity: 0;
+  font-size: 0.95rem;
-  transform: translateY(30px);
-}
-
-.project-card.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.card-image {
-  height: 200px;
-  overflow: hidden;
-}
-
-.card-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.5s ease;
-}
-
-.project-card:hover .card-img {
-  transform: scale(1.05);
-}
-
-.card-content {
-  padding: 1.5rem;
-}
-
-.card-title {
-  color: #1e293b;
-  font-size: 1.25rem;
-  margin-bottom: 0.5rem;
   font-weight: 600;
-}
+  cursor: pointer;
-
+  display: flex;
-.card-meta {
-  color: #94a3b8;
-  font-size: 0.9rem;
-  margin-bottom: 0.75rem;
-}
-
-.card-desc {
-  color: #64748b;
-  font-size: 1rem;
-  line-height: 1.6;
-}
-
-.more-link {
-  display: block;
-  text-align: center;
-  color: #1a56db;
-  font-weight: 600;
-  text-decoration: none;
-  margin-top: 2rem;
-  transition: all 0.3s ease;
-  display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  margin-left: auto;
+  transition: all 0.3s ease;
-  margin-right: auto;
 }
-
+.back-btn:hover {
-.more-link:hover {
+  background: #F0F7FF;
-  color: #1e40af;
+  transform: translateY(-2px);
 }
-
+.icon-arrow-left::before { content: '←'; font-size: 1.1rem; }
-.icon-angle-right::after {
+.all-articles-list { margin-top: 2rem; }
-  content: '»';
+.article-item {
-  font-size: 1.2rem;
+  display: flex;
-}
-
-/* 页脚样式 */
-.footer {
-  background-color: #f8fafc;
-  padding: 2.5rem 0;
-  margin-top: 5rem;
-  border-top: 1px solid #e2e8f0;
-}
-
-.copyright {
-  text-align: center;
-  color: #94a3b8;
-  font-size: 0.95rem;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
   gap: 1.5rem;
-    flex-wrap: wrap;
+  padding: 1.5rem;
-    justify-content: center;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 1.5rem;
+  background: #fff;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
 }
-
+.article-item:hover {
-  .main-title {
+  background: #F7F8FA;
-    font-size: 2rem;
+  transform: translateX(4px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 }
-
+.item-img {
-  .project-cards {
+  width: 120px;
-    grid-template-columns: 1fr;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 8px;
+  flex-shrink: 0;
 }
-
+.item-info {
-  .intro-text {
+  flex: 1;
+  min-width: 0;
+}
+.item-title {
+  font-size: 1.3rem;
+  color: #1D2129;
+  margin: 0 0 0.75rem;
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.item-subtitle {
+  color: #4B5563;
   font-size: 1rem;
+  margin: 0 0 0.75rem;
+  font-style: italic;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
+.item-date {
+  color: #9CA3AF;
+  font-size: 0.9rem;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .related-title { flex-direction: column; gap: 1rem; }
+  .related-articles { grid-template-columns: 1fr; }
+
+  /* 全部文章列表响应式 */
+  .all-articles-header { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
+  .article-item { flex-direction: column; }
+  .item-img { width: 100%; height: 180px; }
 }
 
 @media (max-width: 480px) {
-  .main-title {
+  .main-title { font-size: 2rem; }
-    font-size: 1.75rem;
+  .article-title { font-size: 1.8rem; }
-  }
+  .all-articles-header h2 { font-size: 1.6rem; }
-
+  .nav-links { gap: 1.5rem; }
-  .nav-links {
-    gap: 1rem;
-    font-size: 0.9rem;
-  }
-
-  .learn-more-btn {
-    padding: 0.7rem 1.5rem;
-    font-size: 0.9rem;
-  }
 }
 </style>