|
|
@@ -22,6 +22,10 @@
|
|
|
--mountain-color: #a5d6a7;
|
|
|
--red-culture: #b71c1c;
|
|
|
--heritage: #5d4037;
|
|
|
+ --community-color: #8e44ad;
|
|
|
+ --university-color: #3498db;
|
|
|
+ --gov-color: #27ae60;
|
|
|
+ --public-color: #e67e22;
|
|
|
--animation-speed: 0.4s;
|
|
|
}
|
|
|
|
|
|
@@ -173,6 +177,8 @@
|
|
|
height: fit-content;
|
|
|
flex-shrink: 0;
|
|
|
will-change: transform;
|
|
|
+ position: sticky;
|
|
|
+ top: 20px;
|
|
|
}
|
|
|
|
|
|
.sidebar-title {
|
|
|
@@ -606,6 +612,32 @@
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
|
|
|
+ /* 新增部分样式 */
|
|
|
+ .section-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 40px 0 25px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ border-bottom: 2px solid var(--water-color);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-family: 'Ma Shan Zheng', cursive;
|
|
|
+ font-size: 2.2rem;
|
|
|
+ color: var(--primary-blue);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title-icon {
|
|
|
+ color: var(--primary-gold);
|
|
|
+ font-size: 1.8rem;
|
|
|
+ }
|
|
|
+
|
|
|
/* 缩放比例优化 */
|
|
|
@media screen and (min-width: 1600px) {
|
|
|
.container {
|
|
|
@@ -639,6 +671,7 @@
|
|
|
|
|
|
.sidebar {
|
|
|
width: 100%;
|
|
|
+ position: static;
|
|
|
}
|
|
|
|
|
|
.module-grid {
|
|
|
@@ -689,6 +722,10 @@
|
|
|
flex-direction: column;
|
|
|
gap: 30px;
|
|
|
}
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 1.8rem;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
@@ -721,6 +758,13 @@
|
|
|
perspective: 1000;
|
|
|
transform: translate3d(0,0,0);
|
|
|
}
|
|
|
+
|
|
|
+ /* 新增部分标识 */
|
|
|
+ .section-anchor {
|
|
|
+ position: relative;
|
|
|
+ top: -80px;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -756,26 +800,26 @@
|
|
|
<h2 class="sidebar-title">数智共创平台</h2>
|
|
|
<ul class="module-nav">
|
|
|
<li>
|
|
|
- <a href="#" class="active"><i class="fas fa-database"></i> 文化资源库</a>
|
|
|
+ <a href="#cultural-resource-library" class="active"><i class="fas fa-database"></i> 文化资源库</a>
|
|
|
<ul class="sub-nav">
|
|
|
- <li><a href="#"><i class="fas fa-microphone-alt"></i> 多模态采集中心</a></li>
|
|
|
- <li><a href="#"><i class="fas fa-sitemap"></i> 分类知识图谱</a></li>
|
|
|
+ <li><a href="#multimodal-collection"><i class="fas fa-microphone-alt"></i> 多模态采集中心</a></li>
|
|
|
+ <li><a href="#knowledge-graph"><i class="fas fa-sitemap"></i> 分类知识图谱</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <a href="#"><i class="fas fa-brain"></i> 智慧应用中心</a>
|
|
|
+ <a href="#smart-app-center"><i class="fas fa-brain"></i> 智慧应用中心</a>
|
|
|
<ul class="sub-nav">
|
|
|
- <li><a href="#"><i class="fas fa-paint-brush"></i> 数字文创工坊</a></li>
|
|
|
- <li><a href="#"><i class="fas fa-map-marked-alt"></i> 智慧文旅系统</a></li>
|
|
|
- <li><a href="#"><i class="fas fa-egg"></i> IP孵化平台</a></li>
|
|
|
+ <li><a href="#digital-workshop"><i class="fas fa-paint-brush"></i> 数字文创工坊</a></li>
|
|
|
+ <li><a href="#smart-tourism"><i class="fas fa-map-marked-alt"></i> 智慧文旅系统</a></li>
|
|
|
+ <li><a href="#ip-incubation"><i class="fas fa-egg"></i> IP孵化平台</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <a href="#"><i class="fas fa-users"></i> 共创社区</a>
|
|
|
+ <a href="#co-creation-community"><i class="fas fa-users"></i> 共创社区</a>
|
|
|
<ul class="sub-nav">
|
|
|
- <li><a href="#"><i class="fas fa-graduation-cap"></i> 高校联盟</a></li>
|
|
|
- <li><a href="#"><i class="fas fa-landmark"></i> 政府协作</a></li>
|
|
|
- <li><a href="#"><i class="fas fa-edit"></i> 全民创作</a></li>
|
|
|
+ <li><a href="#university-alliance"><i class="fas fa-graduation-cap"></i> 高校联盟</a></li>
|
|
|
+ <li><a href="#gov-collab"><i class="fas fa-landmark"></i> 政府协作</a></li>
|
|
|
+ <li><a href="#public-creation"><i class="fas fa-edit"></i> 全民创作</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -783,6 +827,8 @@
|
|
|
|
|
|
<!-- 主内容区 -->
|
|
|
<main class="content-area no-flash">
|
|
|
+ <!-- 文化资源库 -->
|
|
|
+ <div class="section-anchor" id="cultural-resource-library"></div>
|
|
|
<div class="content-header">
|
|
|
<h1 class="content-title">
|
|
|
<i class="fas fa-database content-title-icon"></i>
|
|
|
@@ -834,7 +880,7 @@
|
|
|
<!-- 功能模块网格 -->
|
|
|
<div class="module-grid">
|
|
|
<!-- 多模态采集中心 -->
|
|
|
- <div class="module-card no-flash">
|
|
|
+ <div class="module-card no-flash" id="multimodal-collection">
|
|
|
<div class="card-header">
|
|
|
<i class="fas fa-microphone-alt card-icon"></i>
|
|
|
<h3 class="card-title">多模态采集中心</h3>
|
|
|
@@ -855,7 +901,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 分类知识图谱 -->
|
|
|
- <div class="module-card no-flash">
|
|
|
+ <div class="module-card no-flash" id="knowledge-graph">
|
|
|
<div class="card-header" style="background: var(--red-culture);">
|
|
|
<i class="fas fa-sitemap card-icon"></i>
|
|
|
<h3 class="card-title">分类知识图谱</h3>
|
|
|
@@ -874,9 +920,20 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 智慧应用中心 -->
|
|
|
+ <div class="section-anchor" id="smart-app-center"></div>
|
|
|
+ <div class="section-header">
|
|
|
+ <h1 class="section-title">
|
|
|
+ <i class="fas fa-brain section-title-icon"></i>
|
|
|
+ 智慧应用中心
|
|
|
+ </h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="module-grid">
|
|
|
<!-- 数字文创工坊 -->
|
|
|
- <div class="module-card no-flash">
|
|
|
+ <div class="module-card no-flash" id="digital-workshop">
|
|
|
<div class="card-header" style="background: var(--primary-gold);">
|
|
|
<i class="fas fa-paint-brush card-icon"></i>
|
|
|
<h3 class="card-title">数字文创工坊</h3>
|
|
|
@@ -897,7 +954,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 智慧文旅系统 -->
|
|
|
- <div class="module-card no-flash">
|
|
|
+ <div class="module-card no-flash" id="smart-tourism">
|
|
|
<div class="card-header" style="background: var(--heritage);">
|
|
|
<i class="fas fa-map-marked-alt card-icon"></i>
|
|
|
<h3 class="card-title">智慧文旅系统</h3>
|
|
|
@@ -916,6 +973,101 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- IP孵化平台 -->
|
|
|
+ <div class="module-card no-flash" id="ip-incubation">
|
|
|
+ <div class="card-header" style="background: var(--community-color);">
|
|
|
+ <i class="fas fa-egg card-icon"></i>
|
|
|
+ <h3 class="card-title">IP孵化平台</h3>
|
|
|
+ <p class="card-subtitle">文化IP创新与商业化</p>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <ul class="card-features">
|
|
|
+ <li><i class="fas fa-lightbulb"></i> IP价值评估系统</li>
|
|
|
+ <li><i class="fas fa-sync-alt"></i> IP生态转化模型</li>
|
|
|
+ <li><i class="fas fa-chart-line"></i> 市场潜力分析</li>
|
|
|
+ <li><i class="fas fa-handshake"></i> 商业对接平台</li>
|
|
|
+ </ul>
|
|
|
+ <div class="card-actions">
|
|
|
+ <button class="btn btn-primary" style="background: var(--community-color);"><i class="fas fa-rocket"></i> 孵化项目</button>
|
|
|
+ <button class="btn btn-outline" style="border-color: var(--community-color); color: var(--community-color);"><i class="fas fa-store"></i> IP商城</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 共创社区 -->
|
|
|
+ <div class="section-anchor" id="co-creation-community"></div>
|
|
|
+ <div class="section-header">
|
|
|
+ <h1 class="section-title">
|
|
|
+ <i class="fas fa-users section-title-icon"></i>
|
|
|
+ 共创社区
|
|
|
+ </h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="module-grid">
|
|
|
+ <!-- 高校联盟 -->
|
|
|
+ <div class="module-card no-flash" id="university-alliance">
|
|
|
+ <div class="card-header" style="background: var(--university-color);">
|
|
|
+ <i class="fas fa-graduation-cap card-icon"></i>
|
|
|
+ <h3 class="card-title">高校联盟</h3>
|
|
|
+ <p class="card-subtitle">学术研究与人才培养</p>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <ul class="card-features">
|
|
|
+ <li><i class="fas fa-flask"></i> 联合研究项目</li>
|
|
|
+ <li><i class="fas fa-user-graduate"></i> 人才实训基地</li>
|
|
|
+ <li><i class="fas fa-book-open"></i> 课程共建计划</li>
|
|
|
+ <li><i class="fas fa-trophy"></i> 创新竞赛平台</li>
|
|
|
+ </ul>
|
|
|
+ <div class="card-actions">
|
|
|
+ <button class="btn btn-primary" style="background: var(--university-color);"><i class="fas fa-user-plus"></i> 加入联盟</button>
|
|
|
+ <button class="btn btn-outline" style="border-color: var(--university-color); color: var(--university-color);"><i class="fas fa-school"></i> 合作院校</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 政府协作 -->
|
|
|
+ <div class="module-card no-flash" id="gov-collab">
|
|
|
+ <div class="card-header" style="background: var(--gov-color);">
|
|
|
+ <i class="fas fa-landmark card-icon"></i>
|
|
|
+ <h3 class="card-title">政府协作</h3>
|
|
|
+ <p class="card-subtitle">政策支持与资源整合</p>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <ul class="card-features">
|
|
|
+ <li><i class="fas fa-file-contract"></i> 政策申报指南</li>
|
|
|
+ <li><i class="fas fa-hand-holding-usd"></i> 专项扶持资金</li>
|
|
|
+ <li><i class="fas fa-network-wired"></i> 区域协作平台</li>
|
|
|
+ <li><i class="fas fa-chart-pie"></i> 文化资源统筹</li>
|
|
|
+ </ul>
|
|
|
+ <div class="card-actions">
|
|
|
+ <button class="btn btn-primary" style="background: var(--gov-color);"><i class="fas fa-file-alt"></i> 政策查询</button>
|
|
|
+ <button class="btn btn-outline" style="border-color: var(--gov-color); color: var(--gov-color);"><i class="fas fa-hands-helping"></i> 协作申请</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 全民创作 -->
|
|
|
+ <div class="module-card no-flash" id="public-creation">
|
|
|
+ <div class="card-header" style="background: var(--public-color);">
|
|
|
+ <i class="fas fa-edit card-icon"></i>
|
|
|
+ <h3 class="card-title">全民创作</h3>
|
|
|
+ <p class="card-subtitle">大众参与的文化创新</p>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <ul class="card-features">
|
|
|
+ <li><i class="fas fa-cloud-upload-alt"></i> UGC内容平台</li>
|
|
|
+ <li><i class="fas fa-trophy"></i> 创作竞赛活动</li>
|
|
|
+ <li><i class="fas fa-coins"></i> 创作激励计划</li>
|
|
|
+ <li><i class="fas fa-store"></i> 作品交易市场</li>
|
|
|
+ </ul>
|
|
|
+ <div class="card-actions">
|
|
|
+ <button class="btn btn-primary" style="background: var(--public-color);"><i class="fas fa-pencil-alt"></i> 开始创作</button>
|
|
|
+ <button class="btn btn-outline" style="border-color: var(--public-color); color: var(--public-color);"><i class="fas fa-medal"></i> 优秀作品</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</main>
|
|
|
</div>
|
|
|
@@ -999,14 +1151,84 @@
|
|
|
});
|
|
|
|
|
|
// 导航链接交互效果
|
|
|
- const navLinks = document.querySelectorAll('.nav-main a, .module-nav a');
|
|
|
+ const navLinks = document.querySelectorAll('.nav-main a, .module-nav a, .sub-nav a');
|
|
|
navLinks.forEach(link => {
|
|
|
link.addEventListener('click', function(e) {
|
|
|
+ // 阻止默认跳转行为
|
|
|
+ e.preventDefault();
|
|
|
+
|
|
|
+ // 移除所有活动状态
|
|
|
navLinks.forEach(l => l.classList.remove('active'));
|
|
|
+
|
|
|
+ // 设置当前活动状态
|
|
|
this.classList.add('active');
|
|
|
+
|
|
|
+ // 处理父菜单活动状态
|
|
|
+ const parentLi = this.closest('li');
|
|
|
+ if (parentLi && parentLi.parentElement.classList.contains('module-nav')) {
|
|
|
+ const parentLink = parentLi.querySelector('a');
|
|
|
+ if (parentLink) {
|
|
|
+ parentLink.classList.add('active');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取目标锚点
|
|
|
+ const targetId = this.getAttribute('href');
|
|
|
+ if (targetId.startsWith('#')) {
|
|
|
+ const targetElement = document.querySelector(targetId);
|
|
|
+ if (targetElement) {
|
|
|
+ // 计算偏移量（考虑顶部固定导航）
|
|
|
+ const headerHeight = document.querySelector('header').offsetHeight;
|
|
|
+ const targetPosition = targetElement.offsetTop - headerHeight - 20;
|
|
|
+
|
|
|
+ // 平滑滚动
|
|
|
+ window.scrollTo({
|
|
|
+ top: targetPosition,
|
|
|
+ behavior: 'smooth'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新URL
|
|
|
+ history.pushState(null, null, targetId);
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
});
|
|
|
|
|
|
+ // 页面加载时处理URL锚点
|
|
|
+ window.addEventListener('load', function() {
|
|
|
+ if (window.location.hash) {
|
|
|
+ const targetElement = document.querySelector(window.location.hash);
|
|
|
+ if (targetElement) {
|
|
|
+ // 计算偏移量
|
|
|
+ const headerHeight = document.querySelector('header').offsetHeight;
|
|
|
+ const targetPosition = targetElement.offsetTop - headerHeight - 20;
|
|
|
+
|
|
|
+ // 平滑滚动到锚点
|
|
|
+ window.scrollTo({
|
|
|
+ top: targetPosition,
|
|
|
+ behavior: 'smooth'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 设置对应导航为活动状态
|
|
|
+ const targetId = window.location.hash;
|
|
|
+ const targetLink = document.querySelector(`.module-nav a[href="${targetId}"], .sub-nav a[href="${targetId}"]`);
|
|
|
+ if (targetLink) {
|
|
|
+ navLinks.forEach(l => l.classList.remove('active'));
|
|
|
+ targetLink.classList.add('active');
|
|
|
+
|
|
|
+ // 处理父菜单活动状态
|
|
|
+ const parentLi = targetLink.closest('li');
|
|
|
+ if (parentLi && parentLi.parentElement.classList.contains('module-nav')) {
|
|
|
+ const parentLink = parentLi.querySelector('a');
|
|
|
+ if (parentLink) {
|
|
|
+ parentLink.classList.add('active');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
// 防止快速缩放时的闪烁
|
|
|
let resizeTimer;
|
|
|
window.addEventListener('resize', () => {
|
0235915