修改社区服务web

web/src/views/SocialService.vue

@@ -1,232 +1,398 @@
 <template>
-  <div class="cooperation-section">
+  <div class="workstation-page">
-    <!-- 导航标签 -->
+    <!-- 导航栏 -->
-    <div class="tabs-navigation">
+    <nav class="navbar">
-      <div class="tab-item active">社会服务</div>
+      <div class="container">
-      <div class="tab-item">校企合作</div>
+        <ul class="nav-links">
-      <div class="tab-item">研究生实习项目</div>
+          <li><a href="#" class="active">社会服务</a></li>
-      <div class="tab-item">乡村政府项目</div>
+          <li><a href="#">校企合作</a></li>
+          <li><a href="#">研究实习项目</a></li>
+          <li><a href="#">乡村政府项目</a></li>
+        </ul>
+      </div>
+    </nav>
+
+    <!-- 主要内容区 -->
+    <main class="container main-content">
+      <!-- 标题区域 -->
+      <div class="header-section">
+        <h1 class="main-title">良品优生省级研究生工作站</h1>
+        <p class="sub-title">湖北省省级研究生工作站</p>
+        <div class="divider"></div>
       </div>
 
-    <hr class="tab-divider">
+      <!-- 介绍文本 -->
-    
+      <section class="intro-section">
-    <!-- 内容区域 -->
-    <div class="content-container">
-      <!-- 工作站标题 -->
-      <div class="workstation-title">
-        <h2>良品优生省级研究生工作站</h2>
-        <p class="subtitle">湖北省省级研究生工作站</p>
-      </div>
-      
-      <!-- 合作项目介绍（已删除标题） -->
-      <div class="project-intro">
         <p class="intro-text">
-          探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。
+          探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。
         </p>
-      </div>
+        <p class="intro-text">
+          探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。
+        </p>
+        <button class="learn-more-btn">
+          了解更多 <i class="icon-arrow-right"></i>
+        </button>
+      </section>
 
       <!-- 项目展示 -->
-      <div class="projects-grid">
+      <section class="projects-section">
-        <div class="project-card" v-for="(project, index) in projects" :key="index">
+        <div class="project-cards">
-          <div class="project-image" :style="{ backgroundImage: `url(${project.imageUrl})` }"></div>
+          <!-- 项目卡片1 -->
-          <h4 class="project-name">{{ project.name }}</h4>
+          <div class="project-card">
-          <p class="project-author" v-if="project.author">{{ project.author }}</p>
+            <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="card-content">
+              <h3 class="card-title">良品铺子文化馆数位界面设计</h3>
+              <p class="card-meta">设计/品牌策划</p>
+              <p class="card-desc">校企导师制 · 企业导师XXX</p>
             </div>
           </div>
 
-      <!-- 更多链接 -->
+          <!-- 项目卡片2 -->
-      <div class="more-link-container">
+          <div class="project-card">
-        <a href="#" class="more-link">More</a>
+            <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>
+    </main>
+
+    <!-- 页脚 -->
+    <footer class="footer">
+      <div class="container">
+        <p class="copyright">© 2025 良品优生省级研究生工作站 版权所有</p>
+      </div>
+    </footer>
   </div>
 </template>
 
-<script setup>
+<script>
-// 项目数据
+export default {
-const projects = [
+  name: 'WorkstationPage',
-  {
+  data() {
-    imageUrl: "https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/ce0dba6a3c124866996ecb63e5f0b4bd.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
+    return {
-    name: "良品铺子文化馆数控界面设计",
+      // 可以在这里添加需要的数据
-    author: "设计/崔燕琪<br>校内导师/康帆 企业导师/XXX"
-  },
-  {
-    imageUrl: "https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/fcb7578f51f74182a87e2fcdcbe46565.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
-    name: "制度型开放助推经济高质量发展制度型开放"
-  },
-  {
-    imageUrl: "https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/929cebd6f9bc4463a57e790f74efe60c.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
-    name: "制度型开放助推经济高质量发展制度型开放"
     }
-];
+  },
+  mounted() {
+    // 页面加载后的初始化操作
+    this.addScrollEffects();
+  },
+  methods: {
+    addScrollEffects() {
+      // 添加滚动时的动画效果
+      const cards = document.querySelectorAll('.project-card');
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+          }
+        });
+      }, { threshold: 0.1 });
+
+      cards.forEach(card => {
+        observer.observe(card);
+      });
+    }
+  }
+}
 </script>
 
 <style scoped>
-.cooperation-section {
+/* 基础样式 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.container {
+  width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 40px 20px;
+  padding: 0 20px;
-  font-family: "Helvetica Neue", Arial, sans-serif;
 }
 
-/* 导航标签样式 */
+/* 导航栏样式 */
-.tabs-navigation {
+.navbar {
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-links {
   display: flex;
-  gap: 30px;
+  list-style: none;
-  margin-bottom: 15px;
+  gap: 2.5rem;
+  justify-content: center;
 }
 
-.tab-item {
+.nav-links a {
-  font-size: 1.1rem;
+  text-decoration: none;
-  color: #7f8c8d;
+  color: #333333;
-  cursor: pointer;
-  position: relative;
-  padding-bottom: 8px;
-  transition: color 0.3s;
-}
-
-.tab-item.active {
-  color: #2c3e50;
   font-weight: 500;
+  transition: all 0.3s ease;
+  padding: 0.5rem 0;
+  position: relative;
 }
 
-.tab-item.active::after {
+.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: #ccc;
+  background-color: #1a56db;
-  border-radius: 2px;
+  border-radius: 3px;
 }
 
-.tab-divider {
+/* 主要内容区样式 */
-  border: none;
+.main-content {
-  border-top: 1px solid #eee;
+  padding: 4rem 0;
-  margin: 0 0 40px;
 }
 
-/* 内容容器样式 */
+/* 标题区域 */
-.content-container {
+.header-section {
-  max-width: 1000px;
+  text-align: center;
-  margin: 0 auto;
+  margin-bottom: 3rem;
 }
 
-/* 工作站标题样式 */
+.main-title {
-.workstation-title {
+  font-size: 2.5rem;
-  margin-bottom: 50px;
+  color: #1e293b;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
 }
 
-.workstation-title h2 {
+.sub-title {
-  font-size: 2rem;
+  color: #64748b;
-  color: #2c3e50;
-  margin: 0 0 10px;
-}
-
-.subtitle {
   font-size: 1.1rem;
-  color: #7f8c8d;
+  margin-bottom: 1.5rem;
-  margin: 0;
 }
 
-/* 项目介绍样式（已调整间距） */
+.divider {
-.project-intro {
+  width: 80px;
-  margin-bottom: 50px;
+  height: 3px;
+  background-color: #1a56db;
+  margin: 0 auto;
+  border-radius: 3px;
+}
+
+/* 介绍文本区域 */
+.intro-section {
+  max-width: 900px;
+  margin: 0 auto 4rem;
+  text-align: center;
 }
 
 .intro-text {
-  font-size: 1rem;
+  color: #475569;
-  color: #555;
   line-height: 1.8;
-  margin: 0;
+  margin-bottom: 1.5rem;
+  font-size: 1.05rem;
 }
 
-/* 项目展示网格 */
+.learn-more-btn {
-.projects-grid {
+  background-color: #1a56db;
+  color: white;
+  border: none;
+  padding: 0.8rem 2rem;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.learn-more-btn:hover {
+  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;
+}
+
+/* 项目展示区域 */
+.projects-section {
+  margin-top: 5rem;
+}
+
+.project-cards {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 30px;
+  gap: 2.5rem;
-  margin-bottom: 40px;
+  margin-bottom: 3rem;
 }
 
 .project-card {
-  display: flex;
+  background-color: white;
-  flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  opacity: 0;
+  transform: translateY(30px);
 }
 
-.project-image {
+.project-card.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.card-image {
+  height: 200px;
+  overflow: hidden;
+}
+
+.card-img {
   width: 100%;
-  height: 220px;
+  height: 100%;
-  background-color: #eee;
+  object-fit: cover;
-  background-size: cover;
+  transition: transform 0.5s ease;
-  background-position: center;
-  margin-bottom: 15px;
 }
 
-.project-name {
+.project-card:hover .card-img {
-  font-size: 1.1rem;
+  transform: scale(1.05);
-  color: #2c3e50;
-  margin: 0 0 10px;
 }
 
-.project-author {
+.card-content {
+  padding: 1.5rem;
+}
+
+.card-title {
+  color: #1e293b;
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.card-meta {
+  color: #94a3b8;
   font-size: 0.9rem;
-  color: #7f8c8d;
+  margin-bottom: 0.75rem;
-  margin: 0;
-  line-height: 1.6;
-  white-space: pre-line;
 }
 
-/* 更多链接样式 */
+.card-desc {
-.more-link-container {
+  color: #64748b;
-  text-align: right;
+  font-size: 1rem;
+  line-height: 1.6;
 }
 
 .more-link {
-  color: #95a5a6;
+  display: block;
+  text-align: center;
+  color: #1a56db;
+  font-weight: 600;
   text-decoration: none;
-  font-size: 1rem;
+  margin-top: 2rem;
-  transition: color 0.3s;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .more-link:hover {
-  color: #3498db;
+  color: #1e40af;
 }
 
-/* 响应式适配 */
+.icon-angle-right::after {
-@media (max-width: 992px) {
+  content: '»';
-  .projects-grid {
+  font-size: 1.2rem;
-    grid-template-columns: repeat(2, 1fr);
-  }
 }
 
+/* 页脚样式 */
+.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) {
-  .tabs-navigation {
+  .nav-links {
+    gap: 1.5rem;
     flex-wrap: wrap;
-    gap: 20px;
+    justify-content: center;
   }
 
-  .workstation-title h2 {
+  .main-title {
-    font-size: 1.7rem;
+    font-size: 2rem;
   }
-}
 
-@media (max-width: 576px) {
+  .project-cards {
-  .projects-grid {
     grid-template-columns: 1fr;
   }
 
-  .tab-item {
+  .intro-text {
     font-size: 1rem;
   }
+}
 
-  .workstation-title {
+@media (max-width: 480px) {
-    margin-bottom: 30px;
+  .main-title {
+    font-size: 1.75rem;
   }
 
-  .project-intro {
+  .nav-links {
-    margin-bottom: 30px;
+    gap: 1rem;
+    font-size: 0.9rem;
+  }
+
+  .learn-more-btn {
+    padding: 0.7rem 1.5rem;
+    font-size: 0.9rem;
   }
 }
 </style>