修改社会服务web页面
This commit is contained in:
@@ -4,84 +4,132 @@
|
||||
<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>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@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">
|
||||
<p class="intro-text">
|
||||
探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。
|
||||
</p>
|
||||
<p class="intro-text">
|
||||
探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。
|
||||
</p>
|
||||
<button class="learn-more-btn">
|
||||
了解更多 <i class="icon-arrow-right"></i>
|
||||
<!-- 全部文章列表页面 -->
|
||||
<div v-if="showAllList" class="all-articles-page">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="breadcrumbs">
|
||||
<a href="#" @click.prevent="showAllList = false">首页</a>
|
||||
<span>/</span>
|
||||
<span>{{ getTabName(currentTab) }}</span>
|
||||
<span>/</span>
|
||||
<span>全部项目</span>
|
||||
</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>
|
||||
<p class="card-meta">设计/品牌策划</p>
|
||||
<p class="card-desc">校企导师制 · 企业导师XXX</p>
|
||||
<h4 class="card-title">{{ item.title }}</h4>
|
||||
<p class="card-subtitle" v-if="item.subtitle">{{ item.subtitle }}</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() {
|
||||
// 添加滚动时的动画效果
|
||||
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 });
|
||||
async fetchArticles(category) {
|
||||
this.loading = true;
|
||||
try {
|
||||
const mockData = this.getMockData(category);
|
||||
this.articles[category] = mockData;
|
||||
|
||||
cards.forEach(card => {
|
||||
observer.observe(card);
|
||||
const list = this.articles[category];
|
||||
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', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
/* 基础样式保持不变 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
|
||||
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
/* 导航栏 */
|
||||
.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; }
|
||||
.nav-links { display: flex; list-style: none; gap: 2.5rem; justify-content: center; }
|
||||
.nav-links a { text-decoration: none; color: #333; font-weight: 500; transition: all 0.3s ease; padding: 0.5rem 0; position: relative; cursor: pointer; }
|
||||
.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 {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
padding: 1rem 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
/* 主要内容 */
|
||||
.main-content { padding: 4rem 0; min-height: 80vh; }
|
||||
.header-section { text-align: center; margin-bottom: 3rem; }
|
||||
.main-title { font-size: 2.5rem; color: #1D2129; margin-bottom: 0.5rem; font-weight: 700; }
|
||||
.sub-title { color: #6B7280; font-size: 1.1rem; margin-bottom: 1.5rem; }
|
||||
.divider { width: 80px; height: 3px; background-color: #165DFF; margin: 0 auto; border-radius: 3px; }
|
||||
|
||||
.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;
|
||||
gap: 2.5rem;
|
||||
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 {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 4rem auto 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
color: #475569;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.learn-more-btn {
|
||||
background-color: #1a56db;
|
||||
.related-title h3 { font-size: 1.7rem; color: #1D2129; font-weight: 600; margin: 0; }
|
||||
.view-all-btn {
|
||||
background: #165DFF;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.8rem 2rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.learn-more-btn:hover {
|
||||
background-color: #1e40af;
|
||||
.view-all-btn:hover {
|
||||
background: #0E42D2;
|
||||
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: '→';
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
/* 相关卡片 */
|
||||
.related-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto 3rem; }
|
||||
.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 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
/* 空状态 */
|
||||
.empty-state { text-align: center; padding: 4rem 0; color: #9CA3AF; font-size: 1.1rem; }
|
||||
|
||||
.project-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2.5rem;
|
||||
/* 页脚 */
|
||||
.footer { background-color: #F7F8FA; padding: 2.5rem 0; margin-top: 5rem; border-top: 1px solid #E5E6EB; }
|
||||
.copyright { text-align: center; color: #86909C; font-size: 0.95rem; }
|
||||
|
||||
/* 全部文章列表页面样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
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-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;
|
||||
.all-articles-header h2 { font-size: 2rem; color: #1D2129; font-weight: 700; margin: 0; }
|
||||
.back-btn {
|
||||
background: #fff;
|
||||
color: #165DFF;
|
||||
border: 1px solid #165DFF;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.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;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.more-link:hover {
|
||||
color: #1e40af;
|
||||
.back-btn:hover {
|
||||
background: #F0F7FF;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.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) {
|
||||
.nav-links {
|
||||
.icon-arrow-left::before { content: '←'; font-size: 1.1rem; }
|
||||
.all-articles-list { margin-top: 2rem; }
|
||||
.article-item {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
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);
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 2rem;
|
||||
.article-item:hover {
|
||||
background: #F7F8FA;
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.project-cards {
|
||||
grid-template-columns: 1fr;
|
||||
.item-img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
.item-info {
|
||||
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 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.learn-more-btn {
|
||||
padding: 0.7rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.main-title { font-size: 2rem; }
|
||||
.article-title { font-size: 1.8rem; }
|
||||
.all-articles-header h2 { font-size: 1.6rem; }
|
||||
.nav-links { gap: 1.5rem; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user