添加社会服务
This commit is contained in:
JACKYMYPERSON
@@ -1,5 +1,232 @@
|
|||||||
<template>
|
<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>
|
</div>
|
||||||
</template>
|
</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>
|
||||||
Reference in New Issue
Block a user