Pārlūkot izejas kodu

feat.new platform demo

0235915 1 dienu atpakaļ
vecāks
revīzija
26555a97e6
1 mainītis faili ar 239 papildinājumiem un 17 dzēšanām
  1. 239 17
      demo/page-platform.html

+ 239 - 17
demo/page-platform.html

@@ -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', () => {