From 9e5ca62a82fe7455598c40c8ee2d9d07037cbcb1 Mon Sep 17 00:00:00 2001
From: JACKYMYPERSON <mayimingperson_person@163.com>
Date: Sun, 26 Oct 2025 11:27:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A4=BE=E4=BC=9A=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/SocialService.vue | 231 +++++++++++++++++++++++++++++++-
 1 file changed, 229 insertions(+), 2 deletions(-)

diff --git a/web/src/views/SocialService.vue b/web/src/views/SocialService.vue
index 46ad7d4d..030f2b3b 100644
--- a/web/src/views/SocialService.vue
+++ b/web/src/views/SocialService.vue
@@ -1,5 +1,232 @@
 <template>
-  <div>
-    基地概况
+  <div class="cooperation-section">
+    <!-- 导航标签 -->
+    <div class="tabs-navigation">
+      <div class="tab-item active">社会服务</div>
+      <div class="tab-item">校企合作</div>
+      <div class="tab-item">研究生实习项目</div>
+      <div class="tab-item">乡村政府项目</div>
+    </div>
+    
+    <hr class="tab-divider">
+    
+    <!-- 内容区域 -->
+    <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>
+      
+      <!-- 项目展示 -->
+      <div class="projects-grid">
+        <div class="project-card" v-for="(project, index) in projects" :key="index">
+          <div class="project-image" :style="{ backgroundImage: `url(${project.imageUrl})` }"></div>
+          <h4 class="project-name">{{ project.name }}</h4>
+          <p class="project-author" v-if="project.author">{{ project.author }}</p>
+        </div>
+      </div>
+      
+      <!-- 更多链接 -->
+      <div class="more-link-container">
+        <a href="#" class="more-link">More</a>
+      </div>
+    </div>
   </div>
 </template>
+
+<script setup>
+// 项目数据
+const projects = [
+  {
+    imageUrl: "https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/ce0dba6a3c124866996ecb63e5f0b4bd.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
+    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: "制度型开放助推经济高质量发展制度型开放"
+  }
+];
+</script>
+
+<style scoped>
+.cooperation-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+
+/* 导航标签样式 */
+.tabs-navigation {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 15px;
+}
+
+.tab-item {
+  font-size: 1.1rem;
+  color: #7f8c8d;
+  cursor: pointer;
+  position: relative;
+  padding-bottom: 8px;
+  transition: color 0.3s;
+}
+
+.tab-item.active {
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+.tab-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: #ccc;
+  border-radius: 2px;
+}
+
+.tab-divider {
+  border: none;
+  border-top: 1px solid #eee;
+  margin: 0 0 40px;
+}
+
+/* 内容容器样式 */
+.content-container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+/* 工作站标题样式 */
+.workstation-title {
+  margin-bottom: 50px;
+}
+
+.workstation-title h2 {
+  font-size: 2rem;
+  color: #2c3e50;
+  margin: 0 0 10px;
+}
+
+.subtitle {
+  font-size: 1.1rem;
+  color: #7f8c8d;
+  margin: 0;
+}
+
+/* 项目介绍样式（已调整间距） */
+.project-intro {
+  margin-bottom: 50px;
+}
+
+.intro-text {
+  font-size: 1rem;
+  color: #555;
+  line-height: 1.8;
+  margin: 0;
+}
+
+/* 项目展示网格 */
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.project-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.project-image {
+  width: 100%;
+  height: 220px;
+  background-color: #eee;
+  background-size: cover;
+  background-position: center;
+  margin-bottom: 15px;
+}
+
+.project-name {
+  font-size: 1.1rem;
+  color: #2c3e50;
+  margin: 0 0 10px;
+}
+
+.project-author {
+  font-size: 0.9rem;
+  color: #7f8c8d;
+  margin: 0;
+  line-height: 1.6;
+  white-space: pre-line;
+}
+
+/* 更多链接样式 */
+.more-link-container {
+  text-align: right;
+}
+
+.more-link {
+  color: #95a5a6;
+  text-decoration: none;
+  font-size: 1rem;
+  transition: color 0.3s;
+}
+
+.more-link:hover {
+  color: #3498db;
+}
+
+/* 响应式适配 */
+@media (max-width: 992px) {
+  .projects-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .tabs-navigation {
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  
+  .workstation-title h2 {
+    font-size: 1.7rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .projects-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .tab-item {
+    font-size: 1rem;
+  }
+  
+  .workstation-title {
+    margin-bottom: 30px;
+  }
+  
+  .project-intro {
+    margin-bottom: 30px;
+  }
+}
+</style>
\ No newline at end of file