mayiming/hldrCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改社区服务web

Browse Source
This commit is contained in:
马懿铭
2025-10-30 00:04:13 +08:00
parent bc351b5904
commit 1d687b9cb0
1 changed files with 313 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
web/src/views/SocialService.vue
View File

@@ -1,232 +1,398 @@
<template>
<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 class="workstation-page">
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<ul class="nav-links">
<li><a href="#" class="active">社会服务</a></li>
<li><a href="#">校企合作</a></li>
<li><a href="#">研究实习项目</a></li>
<li><a href="#">乡村政府项目</a></li>
</ul>
</div>
<!-- 合作项目介绍（已删除标题） -->
<div class="project-intro">
</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>
<!-- 介绍文本 -->
<section class="intro-section">
<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">
<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>
<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="card-content">
<h3 class="card-title">良品铺子文化馆数位界面设计</h3>
<p class="card-meta">设计/品牌策划</p>
<p class="card-desc">校企导师制 · 企业导师XXX</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>
</main>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<p class="copyright">© 2025 良品优生省级研究生工作站 版权所有</p>
</div>
<!-- 更多链接 -->
<div class="more-link-container">
<a href="#" class="more-link">More</a>
</div>
</div>
</footer>
</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"
<script>
export default {
name: 'WorkstationPage',
data() {
return {
// 可以在这里添加需要的数据
}
},
{
imageUrl: "https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/fcb7578f51f74182a87e2fcdcbe46565.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
name: "制度型开放助推经济高质量发展制度型开放"
mounted() {
// 页面加载后的初始化操作
this.addScrollEffects();
},
{
imageUrl: "https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/929cebd6f9bc4463a57e790f74efe60c.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
name: "制度型开放助推经济高质量发展制度型开放"
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;
font-family: "Helvetica Neue", Arial, sans-serif;
padding: 0 20px;
}
/* 导航标签样式 */
.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;
margin-bottom: 15px;
list-style: none;
gap: 2.5rem;
justify-content: center;
}
.tab-item {
font-size: 1.1rem;
color: #7f8c8d;
cursor: pointer;
position: relative;
padding-bottom: 8px;
transition: color 0.3s;
}
.tab-item.active {
color: #2c3e50;
.nav-links a {
text-decoration: none;
color: #333333;
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;
border-radius: 2px;
background-color: #1a56db;
border-radius: 3px;
}
.tab-divider {
border: none;
border-top: 1px solid #eee;
margin: 0 0 40px;
/* 主要内容区样式 */
.main-content {
padding: 4rem 0;
}
/* 内容容器样式 */
.content-container {
max-width: 1000px;
margin: 0 auto;
/* 标题区域 */
.header-section {
text-align: center;
margin-bottom: 3rem;
}
/* 工作站标题样式 */
.workstation-title {
margin-bottom: 50px;
.main-title {
font-size: 2.5rem;
color: #1e293b;
margin-bottom: 0.5rem;
font-weight: 700;
}
.workstation-title h2 {
font-size: 2rem;
color: #2c3e50;
margin: 0 0 10px;
}
.subtitle {
.sub-title {
color: #64748b;
font-size: 1.1rem;
color: #7f8c8d;
margin: 0;
margin-bottom: 1.5rem;
}
/* 项目介绍样式（已调整间距） */
.project-intro {
margin-bottom: 50px;
.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;
}
.intro-text {
font-size: 1rem;
color: #555;
color: #475569;
line-height: 1.8;
margin: 0;
margin-bottom: 1.5rem;
font-size: 1.05rem;
}
/* 项目展示网格 */
.projects-grid {
.learn-more-btn {
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);
gap: 30px;
margin-bottom: 40px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 3rem;
}
.project-card {
display: flex;
flex-direction: column;
background-color: white;
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;
background-color: #eee;
background-size: cover;
background-position: center;
margin-bottom: 15px;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.project-name {
font-size: 1.1rem;
color: #2c3e50;
margin: 0 0 10px;
.project-card:hover .card-img {
transform: scale(1.05);
}
.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: 0;
line-height: 1.6;
white-space: pre-line;
margin-bottom: 0.75rem;
}
/* 更多链接样式 */
.more-link-container {
text-align: right;
.card-desc {
color: #64748b;
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;
transition: color 0.3s;
margin-top: 2rem;
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;
}
/* 响应式适配 */
@media (max-width: 992px) {
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
.icon-angle-right::after {
content: '»';
font-size: 1.2rem;
}
/* 页脚样式 */
.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 {
font-size: 1.7rem;
}
}
@media (max-width: 576px) {
.projects-grid {
.main-title {
font-size: 2rem;
}
.project-cards {
grid-template-columns: 1fr;
}
.tab-item {
.intro-text {
font-size: 1rem;
}
.workstation-title {
margin-bottom: 30px;
}
@media (max-width: 480px) {
.main-title {
font-size: 1.75rem;
}
.project-intro {
margin-bottom: 30px;
.nav-links {
gap: 1rem;
font-size: 0.9rem;
}
.learn-more-btn {
padding: 0.7rem 1.5rem;
font-size: 0.9rem;
}
}
</style>
</style>