修复了演示的header、footer加载失败的问题

assets/css/components/footer.css

@@ -0,0 +1,33 @@
+.footer {
+    background-color: #1a1a1a;
+    padding: 20px 0;
+    margin-top: auto;
+}
+
+.footer p {
+    margin: 0;
+    text-align: center;
+    color: #ffffff;
+    opacity: 0.8;
+}
+
+.copy-tooltip {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0,0,0,0.8);
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 4px;
+    display: none;
+}
+
+.copy-tooltip.show {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.copy-tooltip.hide {
+    display: none;
+} 

assets/css/components/header.css

@@ -0,0 +1,57 @@
+.header-wrap {
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    padding: 10px 0;
+}
+
+.header-inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+.doc-dropdown {
+    position: relative;
+}
+
+.doc-icon {
+    cursor: pointer;
+    padding: 8px 15px;
+}
+
+.dropdown-menu {
+    display: none;
+    position: absolute;
+    right: 0;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    border-radius: 4px;
+    padding: 10px;
+    min-width: 200px;
+}
+
+.dropdown-menu.show {
+    display: block;
+}
+
+.doc-item {
+    padding: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.doc-link {
+    color: #333;
+    text-decoration: none;
+}
+
+.copy-btn {
+    border: none;
+    background: none;
+    color: #666;
+    cursor: pointer;
+    padding: 4px 8px;
+} 

assets/css/pages/bi-dashboard.css

@@ -0,0 +1,261 @@
+/* 基础变量定义 */
+:root {
+    --bg-dark: #0F172A;
+    --card-bg: #1E293B;
+    --primary-blue: #3B82F6;
+    --primary-glow: rgba(59, 130, 246, 0.15);
+    --success-green: #10B981;
+    --warning-yellow: #F59E0B;
+    --danger-red: #EF4444;
+    --text-primary: #E2E8F0;
+    --text-secondary: #94A3B8;
+    --border-color: rgba(59, 130, 246, 0.2);
+    --grid-line: rgba(148, 163, 184, 0.1);
+}
+
+/* 全局样式 */
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-primary);
+    min-height: 100vh;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* 网格背景 */
+.grid-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        linear-gradient(var(--grid-line) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+    background-size: 50px 50px;
+    z-index: -1;
+}
+
+/* BI看板头部 */
+.bi-header {
+    background: var(--bg-dark);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1rem 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.header-content {
+    max-width: 100%;
+}
+
+.bi-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+    background: linear-gradient(90deg, var(--primary-blue), #60A5FA);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.bi-meta {
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.bi-meta span {
+    margin-right: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+}
+
+.bi-meta i {
+    margin-right: 0.5rem;
+    color: var(--primary-blue);
+}
+
+/* 时间选择器样式 */
+.time-selector .btn-group {
+    background: rgba(59, 130, 246, 0.1);
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.time-selector .btn {
+    font-size: 0.85rem;
+    padding: 0.375rem 0.75rem;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+}
+
+.time-selector .btn.active {
+    background: var(--primary-blue);
+    color: white;
+    border-radius: 4px;
+}
+
+.time-selector .btn:hover:not(.active) {
+    background: rgba(59, 130, 246, 0.2);
+    color: var(--primary-blue);
+}
+
+/* 数据流转视图 */
+.data-flow-container {
+    background: var(--card-bg);
+    border-radius: 16px;
+    border: 1px solid var(--border-color);
+    padding: 2rem;
+    position: relative;
+    backdrop-filter: blur(10px);
+}
+
+/* 数据节点 */
+.data-node {
+    background: rgba(30, 41, 59, 0.8);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.data-node::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 12px;
+    padding: 1px;
+    background: linear-gradient(45deg, var(--primary-blue), transparent);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+}
+
+.data-node:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 0 20px var(--primary-glow);
+}
+
+/* 数据流线条 */
+.data-flow-line {
+    height: 2px;
+    background: linear-gradient(90deg, 
+        transparent,
+        var(--primary-blue),
+        transparent
+    );
+    position: relative;
+    overflow: hidden;
+}
+
+.data-flow-line::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg,
+        transparent,
+        var(--primary-blue),
+        transparent
+    );
+    animation: flowAnimation 2s infinite linear;
+}
+
+@keyframes flowAnimation {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+/* 数据指标卡片 */
+.metric-card {
+    background: rgba(30, 41, 59, 0.8);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.metric-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--primary-blue);
+    text-shadow: 0 0 10px var(--primary-glow);
+}
+
+.metric-label {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+/* 图表容器 */
+.chart-container {
+    background: rgba(30, 41, 59, 0.8);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    height: 300px;
+    position: relative;
+}
+
+/* 数据表格 */
+.data-table {
+    background: rgba(30, 41, 59, 0.8);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+}
+
+.data-table th {
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--text-primary);
+    font-weight: 500;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.data-table td {
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+/* 状态标签 */
+.status-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.status-active {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--success-green);
+}
+
+.status-warning {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--warning-yellow);
+}
+
+/* 动画效果 */
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 var(--primary-glow); }
+    70% { box-shadow: 0 0 0 10px transparent; }
+    100% { box-shadow: 0 0 0 0 transparent; }
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .bi-title {
+        font-size: 2rem;
+    }
+    
+    .data-flow-container {
+        padding: 1rem;
+    }
+    
+    .chart-container {
+        height: 250px;
+    }
+} 

assets/css/pages/index.css

@@ -0,0 +1,120 @@
+/* 应用项目卡片动画 */
+.application-item {
+    transition: all 0.3s ease;
+    transform: translateY(0);
+}
+
+.application-item:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.application-item img {
+    transition: all 0.3s ease;
+}
+
+.application-item:hover img {
+    transform: scale(1.05);
+}
+
+.application-item .btn {
+    transition: all 0.3s ease;
+}
+
+.application-item:hover .btn {
+    background-color: #0056b3;
+    color: white;
+}
+
+/* Banner背景 */
+.banner-wrap {
+    background: linear-gradient(45deg, rgba(0, 194, 255, 0.05), rgba(0, 255, 157, 0.05)),
+                url('../../images/index/banner.png') no-repeat center center;
+    background-size: cover;
+}
+
+/* 技术演示浮窗 */
+.demo-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.demo-modal-content {
+    position: relative;
+    width: 90%;
+    height: 90%;
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.demo-modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    color: #fff;
+    cursor: pointer;
+    z-index: 1001;
+    width: 30px;
+    height: 30px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.demo-modal-close:hover {
+    background: rgba(0, 0, 0, 0.8);
+}
+
+.demo-modal iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* 技术图片交互 */
+.tech-image img {
+    cursor: pointer;
+}
+
+.tech-image img:hover {
+    opacity: 0.9;
+}
+
+/* iframe遮罩层 */
+.demo-3d {
+    position: relative;
+}
+
+.iframe-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.iframe-overlay:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.core-tech-frame {
+    width: 100%;
+    height: 100%;
+    border: none;
+} 

assets/css/pages/mods/mod4-ops/doc-menu.css

@@ -0,0 +1,140 @@
+.doc-menu {
+    position: relative;
+    margin-left: auto;
+}
+
+.doc-menu .doc-btn {
+    cursor: pointer;
+    padding: 10px 15px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #333;
+    transition: all 0.3s ease;
+    background: none;
+    border: none;
+}
+
+.doc-menu .doc-btn:hover {
+    color: #0056b3;
+    background: none;
+}
+
+.doc-list {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background: white;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    padding: 12px;
+    min-width: 320px;
+    z-index: 1000;
+}
+
+.doc-menu:hover .doc-list {
+    display: block;
+}
+
+.doc-item {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+}
+
+.doc-item:last-child {
+    border-bottom: none;
+}
+
+.doc-link {
+    color: #333;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
+.doc-link:hover {
+    color: #0056b3;
+}
+
+.doc-link i {
+    color: #0056b3;
+}
+
+/* 重置所有按钮的基础样式 */
+.data-market .btn {
+    background: none;
+    padding: 6px 12px;
+    transition: all 0.3s ease;
+    border: 1px solid;
+}
+
+/* 筛选区域按钮样式 */
+.data-market .filter-section .btn-outline-danger {
+    color: #dc3545;
+    border-color: #dc3545;
+}
+
+.data-market .filter-section .btn-outline-warning {
+    color: #ffc107;
+    border-color: #ffc107;
+}
+
+.data-market .filter-section .btn-outline-info {
+    color: #0dcaf0;
+    border-color: #0dcaf0;
+}
+
+.data-market .filter-section .btn-outline-success {
+    color: #198754;
+    border-color: #198754;
+}
+
+.data-market .filter-section .btn-outline-secondary {
+    color: #6c757d;
+    border-color: #6c757d;
+}
+
+/* 卡片中的购买按钮样式 */
+.data-market .card .btn-outline-primary {
+    color: #0d6efd;
+    border-color: #0d6efd;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* 悬停效果 */
+.data-market .filter-section .btn-outline-danger:hover {
+    color: #fff;
+    background-color: #dc3545;
+}
+
+.data-market .filter-section .btn-outline-warning:hover {
+    color: #fff;
+    background-color: #ffc107;
+}
+
+.data-market .filter-section .btn-outline-info:hover {
+    color: #fff;
+    background-color: #0dcaf0;
+}
+
+.data-market .filter-section .btn-outline-success:hover {
+    color: #fff;
+    background-color: #198754;
+}
+
+.data-market .filter-section .btn-outline-secondary:hover {
+    color: #fff;
+    background-color: #6c757d;
+}
+
+.data-market .card .btn-outline-primary:hover {
+    color: #fff;
+    background-color: #0d6efd;
+}

assets/css/style.css

@@ -1,4 +1,4 @@
-/* 修改基础配色 */
+/* ===== 1. 变量定义 ===== */
 :root {
     --primary-blue: #00c2ff;
     --primary-green: #00d87b;
@@ -9,7 +9,7 @@
     --border-color: rgba(0, 194, 255, 0.2);
 }
 
-/* 将index.html中的所有样式内容移动到这里 */
+/* ===== 2. 全局基础样式 ===== */
 body {
     margin: 0;
     font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
@@ -35,7 +35,58 @@ body {
     color: var(--text-dark) !important;
 }
 
-/* 修改banner样式 */
+/* ===== 3. 通用组件样式 ===== */
+/* 按钮样式 */
+.btn {
+    display: inline-block;
+    padding: 12px 40px;
+    background: linear-gradient(45deg, var(--primary-blue), var(--primary-green));
+    color: white;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
+    border: none;
+}
+
+.btn:hover {
+    background: linear-gradient(45deg, var(--primary-green), var(--primary-blue));
+    opacity: 0.95;
+}
+
+/* 标题样式 */
+.public-title {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.public-title h4 {
+    color: var(--text-dark);
+    position: relative;
+    display: inline-block;
+    font-size: 36px;
+    margin: 0 0 15px 0;
+}
+
+.public-title h4::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 3px;
+    background: linear-gradient(90deg, var(--primary-blue), var(--primary-green));
+}
+
+.public-title p {
+    color: var(--text-secondary);
+    font-size: 18px;
+    margin: 0;
+}
+
+/* ===== 4. 页面特定样式 ===== */
+/* Banner区域 */
 .banner-wrap {
     background: linear-gradient(45deg, rgba(0, 194, 255, 0.05), rgba(0, 255, 157, 0.05)),
                 url('../images/banner-6yKP_oUz.png') no-repeat center center;
@@ -107,36 +158,6 @@ body {
     padding: 60px 0;
 }
 
-.public-title {
-    text-align: center;
-    margin-bottom: 40px;
-}
-
-.public-title h4 {
-    color: var(--text-dark);
-    position: relative;
-    display: inline-block;
-    font-size: 36px;
-    margin: 0 0 15px 0;
-}
-
-.public-title h4::after {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 60px;
-    height: 3px;
-    background: linear-gradient(90deg, var(--primary-blue), var(--primary-green));
-}
-
-.public-title p {
-    color: var(--text-secondary);
-    font-size: 18px;
-    margin: 0;
-}
-
 .function-module-list {
     display: flex;
     flex-wrap: wrap;
@@ -185,23 +206,6 @@ body {
     line-height: 1.6;
 }
 
-.function-item .btn {
-    display: inline-block;
-    padding: 12px 40px;
-    background: linear-gradient(45deg, var(--primary-blue), var(--primary-green));
-    color: white;
-    border-radius: 4px;
-    text-decoration: none;
-    font-size: 16px;
-    transition: background-color 0.3s ease;
-    border: none;
-}
-
-.function-item .btn:hover {
-    background: linear-gradient(45deg, var(--primary-green), var(--primary-blue));
-    opacity: 0.95;
-}
-
 /* 核心技术样式 */
 .core-tech {
     background: var(--light-bg);
@@ -478,6 +482,7 @@ body {
     border-radius: 8px;
 }
 
+/* ===== 5. 工具类 ===== */
 /* 动画效果 */
 @keyframes glow {
     0% { box-shadow: 0 0 5px rgba(0, 194, 255, 0.2); }
@@ -485,6 +490,33 @@ body {
     100% { box-shadow: 0 0 5px rgba(0, 194, 255, 0.2); }
 }
 
+@keyframes zoomIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* 自定义颜色类 */
+.text-purple { color: #6f42c1; }
+.text-orange { color: #fd7e14; }
+
+/* ===== 6. 响应式样式 ===== */
+@media (max-width: 768px) {
+    .step-text {
+        font-size: 0.75rem;
+    }
+    
+    .step-circle {
+        width: 30px;
+        height: 30px;
+    }
+}
+
 /* 修改案例样式 */
 .case-section {
     background: var(--light-secondary);
@@ -872,13 +904,115 @@ body {
     transform: rotate(90deg);
 }
 
-@keyframes zoomIn {
-    from {
-        opacity: 0;
-        transform: scale(0.8);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-} 
+/* 进度步骤样式 */
+.progress-steps {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    margin-bottom: 30px;
+}
+
+.step {
+    text-align: center;
+    position: relative;
+    z-index: 1;
+}
+
+.step-circle {
+    width: 30px;
+    height: 30px;
+    background-color: #fff;
+    border: 2px solid #dee2e6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 5px;
+}
+
+.step.active .step-circle {
+    border-color: #0d6efd;
+    background-color: #0d6efd;
+    color: #fff;
+}
+
+.step.completed .step-circle {
+    border-color: #198754;
+    background-color: #198754;
+    color: #fff;
+}
+
+.step-text {
+    font-size: 0.875rem;
+    color: #6c757d;
+}
+
+.step.active .step-text {
+    color: #0d6efd;
+}
+
+.step.completed .step-text {
+    color: #198754;
+}
+
+/* 连接线 */
+.progress-steps::before {
+    content: '';
+    position: absolute;
+    top: 15px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: #dee2e6;
+    z-index: 0;
+}
+
+/* 表单验证样式 */
+.was-validated .form-control:invalid,
+.form-control.is-invalid {
+    border-color: #dc3545;
+    padding-right: calc(1.5em + 0.75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+/* 轮播图样式优化 */
+.carousel-item {
+    height: 400px; /* 固定高度 */
+}
+
+.carousel-item img {
+    object-fit: cover; /* 图片填充方式 */
+    height: 100%;
+}
+
+.carousel-caption {
+    background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
+    padding: 20px;
+    border-radius: 10px;
+}
+
+/* 可点击图片的鼠标样式 */
+.cursor-pointer {
+    cursor: pointer;
+}
+
+/* 图片模态框样式 */
+#imageModal .modal-dialog {
+    max-width: 90vw;
+}
+
+#imageModal .modal-content {
+    background-color: rgba(0, 0, 0, 0.9);
+}
+
+#imageModal .btn-close-white {
+    filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+#modalImage {
+    max-height: 85vh;
+    object-fit: contain;
+}

assets/css/styles.css

@@ -1,153 +0,0 @@
-/* 进度步骤样式 */
-.progress-steps {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    margin-bottom: 30px;
-}
-
-.step {
-    text-align: center;
-    position: relative;
-    z-index: 1;
-}
-
-.step-circle {
-    width: 30px;
-    height: 30px;
-    background-color: #fff;
-    border: 2px solid #dee2e6;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 5px;
-}
-
-.step.active .step-circle {
-    border-color: #0d6efd;
-    background-color: #0d6efd;
-    color: #fff;
-}
-
-.step.completed .step-circle {
-    border-color: #198754;
-    background-color: #198754;
-    color: #fff;
-}
-
-.step-text {
-    font-size: 0.875rem;
-    color: #6c757d;
-}
-
-.step.active .step-text {
-    color: #0d6efd;
-}
-
-.step.completed .step-text {
-    color: #198754;
-}
-
-/* 连接线 */
-.progress-steps::before {
-    content: '';
-    position: absolute;
-    top: 15px;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background-color: #dee2e6;
-    z-index: 0;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-    .step-text {
-        font-size: 0.75rem;
-    }
-    
-    .step-circle {
-        width: 30px;
-        height: 30px;
-    }
-}
-
-/* 表单验证样式 */
-.was-validated .form-control:invalid,
-.form-control.is-invalid {
-    border-color: #dc3545;
-    padding-right: calc(1.5em + 0.75rem);
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right calc(0.375em + 0.1875rem) center;
-    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-}
-
-/* 自定义颜色 */
-.text-purple {
-    color: #6f42c1;
-}
-.btn-purple {
-    background-color: #6f42c1;
-    border-color: #6f42c1;
-    color: #fff;
-}
-.btn-purple:hover {
-    background-color: #5a32a3;
-    border-color: #5a32a3;
-    color: #fff;
-}
-
-.text-orange {
-    color: #fd7e14;
-}
-.btn-orange {
-    background-color: #fd7e14;
-    border-color: #fd7e14;
-    color: #fff;
-}
-.btn-orange:hover {
-    background-color: #e66a02;
-    border-color: #e66a02;
-    color: #fff;
-}
-
-/* 轮播图样式优化 */
-.carousel-item {
-    height: 400px; /* 固定高度 */
-}
-
-.carousel-item img {
-    object-fit: cover; /* 图片填充方式 */
-    height: 100%;
-}
-
-.carousel-caption {
-    background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
-    padding: 20px;
-    border-radius: 10px;
-}
-
-/* 可点击图片的鼠标样式 */
-.cursor-pointer {
-    cursor: pointer;
-}
-
-/* 图片模态框样式 */
-#imageModal .modal-dialog {
-    max-width: 90vw;
-}
-
-#imageModal .modal-content {
-    background-color: rgba(0, 0, 0, 0.9);
-}
-
-#imageModal .btn-close-white {
-    filter: invert(1) grayscale(100%) brightness(200%);
-}
-
-#modalImage {
-    max-height: 85vh;
-    object-fit: contain;
-}

assets/js/components.js

@@ -1,16 +0,0 @@
-// 加载组件
-document.addEventListener('DOMContentLoaded', function() {
-    // 加载 header
-    fetch('/components/header/header.html')
-        .then(response => response.text())
-        .then(data => {
-            document.getElementById('header').innerHTML = data;
-        });
-
-    // 加载 footer
-    fetch('/components/footer/footer.html')
-        .then(response => response.text())
-        .then(data => {
-            document.getElementById('footer').innerHTML = data;
-        });
-}); 

assets/js/header.js

@@ -0,0 +1,41 @@
+// 文档下拉菜单交互
+document.addEventListener('DOMContentLoaded', () => {
+    const docIcon = document.querySelector('.doc-icon');
+    const dropdownMenu = document.querySelector('.dropdown-menu');
+    const copyButtons = document.querySelectorAll('.copy-btn');
+    const tooltip = document.querySelector('.copy-tooltip');
+
+    if (docIcon && dropdownMenu) {
+        docIcon.addEventListener('click', (e) => {
+            e.stopPropagation();
+            dropdownMenu.classList.toggle('show');
+        });
+
+        document.addEventListener('click', () => {
+            dropdownMenu.classList.remove('show');
+        });
+
+        dropdownMenu.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+    }
+
+    if (copyButtons && tooltip) {
+        copyButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const password = button.dataset.password;
+                
+                navigator.clipboard.writeText(password).then(() => {
+                    tooltip.classList.remove('hide');
+                    tooltip.classList.add('show');
+                    
+                    setTimeout(() => {
+                        tooltip.classList.remove('show');
+                        tooltip.classList.add('hide');
+                    }, 2000);
+                });
+            });
+        });
+    }
+}); 

assets/js/index/index.js

@@ -0,0 +1,255 @@
+// 核心技术内容配置
+const techContents = {
+    '数据沙箱': {
+        image: './assets/images/index/core01.png',
+        content: `
+            <div class="tech-image">
+                <img src="./assets/images/index/core01.png" alt="数据沙箱">
+                <div class="tech-image-value">
+                    <h5>技术价值</h5>
+                    <p>实现数据可用不可见，保障数据在流通过程中的安全可信。</p>
+                </div>
+            </div>
+            <div class="tech-info">
+                <div class="tech-value">
+                    <h5>技术价值</h5>
+                    <p>数据沙箱技术是一种安全的数据使用环境，通过构建独立的计算空间，允许数据需求方在不接触原始数据的情况下完成数据分析和计算任务。该技术集成了数据脱敏、访问控制、安全审计等多重保护机制，确保数据在流通和使用过程中的安全性。同时，通过提供标准化的数据服务接口，支持多样化的数据应用场景，实现数据价值的安全释放。</p>
+                </div>
+                <div class="tech-advantages">
+                    <h5>技术优势</h5>
+                    <ul>
+                        <li>安全性高：采用多层安全防护架构，包括身份认证、权限控制、数据加密等措施，从多个维度保障数据安全</li>
+                        <li>场景丰富：支持数据分析、机器学习、统计建模等多种计算场景，满足不同行业的数据应用需求</li>
+                        <li>易于管理：提供完整的管理功能，包括数据接入、权限配置、使用监控、审计追踪等，降低运维管理成本</li>
+                        <li>性能优异：通过优化的计算引擎和资源调度机制，确保数据处理的高效性，支持大规模数据分析需求</li>
+                    </ul>
+                </div>
+            </div>
+        `
+    },
+    '数据抽样': {
+        image: './assets/images/index/core02.png',
+        content: `
+            <div class="tech-image">
+                <img src="./assets/images/index/core02.png" alt="数据抽样">
+                <div class="tech-image-value">
+                    <h5>技术价值</h5>
+                    <p>确保数据采样的科学性和代表性，提供高效可靠的数据获取方法。</p>
+                </div>
+            </div>
+            <div class="tech-info">
+                <div class="tech-value">
+                    <h5>技术价值</h5>
+                    <p>数据抽样技术是一种从大规模数据集中提取代表性样本的科学方法，通过系统化的抽样策略和质量控制机制，确保抽取的数据样本能够准确反映整体数据特征。该技术融合了统计学原理和计算优化算法，支持多种抽样方法，包括随机抽样、分层抽样、配额抽样等，并通过智能化的参数调优和样本验证，保证抽样结果的可靠性和实用价值。</p>
+                </div>
+                <div class="tech-advantages">
+                    <h5>技术优势</h5>
+                    <ul>
+                        <li>科学准确：基于严谨的统计学理论，通过多种抽样方法和验证机制，确保样本的代表性和可信度</li>
+                        <li>灵活高效：支持多种抽样策略，可根据不同场景需求灵活配置抽样参数，显著提升数据获取效率</li>
+                        <li>成本优化：通过合理的样本量设计和优化算法，在保证数据质量的同时，有效降低数据处理成本</li>
+                        <li>易于集成：提供标准化的接口和服务，可无缝集成到现有数据处理流程中，支持自动化操作</li>
+                    </ul>
+                </div>
+            </div>
+        `
+    },
+    '数据脱敏': {
+        image: './assets/images/index/core03.png',
+        content: `
+            <div class="tech-image">
+                <img src="./assets/images/index/core03.png" alt="数据脱敏">
+                <div class="tech-image-value">
+                    <h5>技术价值</h5>
+                    <p>在保护敏感信息的同时保持数据可用性，实现数据安全共享和分析利用。</p>
+                </div>
+            </div>
+            <div class="tech-info">
+                <div class="tech-value">
+                    <h5>技术价值</h5>
+                    <p>数据脱敏技术是一种信息安全保护方法，通过对敏感数据进行变形、替换、加密等处理，在确保数据分析价值的同时有效保护隐私信息。该技术包含静态脱敏和动态脱敏两大类，支持字符遮蔽、数据替换、格式保留加密等多种脱敏策略，并通过智能规则引擎实现数据的精准识别和安全转换，广泛应用于金融、医疗、政务等领域的数据安全流通场景。</p>
+                </div>
+                <div class="tech-advantages">
+                    <h5>技术优势</h5>
+                    <ul>
+                        <li>安全可控：采用多层级脱敏策略，支持字段级、记录级的精细化控制，确保敏感信息得到全面保护</li>
+                        <li>业务友好：在实现隐私保护的同时保持数据的业务价值，支持多种格式保留脱敏方法，便于后续分析利用</li>
+                        <li>性能卓越：通过优化的脱敏算法和并行处理机制，支持海量数据的高效处理，满足实时业务需求</li>
+                        <li>灵活扩展：提供丰富的脱敏规则配置选项，可根据不同场景快速定制脱敏方案，适应各类业务需求</li>
+                    </ul>
+                </div>
+            </div>
+        `
+    },
+    '多方安全计算': {
+        image: './assets/images/index/core04.png',
+        content: `
+            <div class="tech-image">
+                <img src="./assets/images/index/core04.png" alt="多方安全计算">
+                <div class="tech-image-value">
+                    <h5>技术价值</h5>
+                    <p>实现多个参与方在不泄露原始数据的前提下进行联合数据计算和分析。</p>
+                </div>
+            </div>
+            <div class="tech-info">
+                <div class="tech-value">
+                    <h5>技术价值</h5>
+                    <p>多方安全计算是一种先进的密码学技术，允许多个数据持有方在保护各自数据隐私的前提下完成联合计算任务。该技术融合了秘密分享、混淆电路、同态加密等密码学方法，通过构建安全的计算协议，确保计算过程中各方只能获得最终结果，无法获取其他参与方的原始数据。广泛应用于跨机构数据分析、联合风控、隐私计算等场景，是数据安全流通的核心支撑技术。</p>
+                </div>
+                <div class="tech-advantages">
+                    <h5>技术优势</h5>
+                    <ul>
+                        <li>隐私保护：基于严格的密码学协议，确保计算过程中各方数据不出域、不泄露，从根本上解决数据安全问题</li>
+                        <li>结果可信：采用安全的多方计算协议，保证计算结果的准确性和可验证性，支持公平计算</li>
+                        <li>场景丰富：支持多种基础运算和高级分析功能，可用于联合建模、统计分析、特征计算等多种业务场景</li>
+                        <li>可扩展性：支持两方到多方的安全计算场景，并可通过分布式计算提升性能，满足大规模数据计算需求</li>
+                    </ul>
+                </div>
+            </div>
+        `
+    }
+};
+
+// 技术演示链接配置
+const techDemoUrls = {
+    '数据沙箱': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据沙箱.icraft&preview=true',
+    '数据抽样': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据抽样.icraft&preview=true',
+    '数据脱敏': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据脱敏计算.icraft&preview=true',
+    '多方安全计算': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/多方安全计算.icraft&preview=true'
+};
+
+// DOM 加载完成后执行
+document.addEventListener('DOMContentLoaded', function() {
+    // 获取所有技术标签和内容区域
+    const techTabs = document.querySelectorAll('.tech-tab');
+    const techContentArea = document.querySelector('.tech-content');
+
+    // 为每个技术标签添加点击事件
+    techTabs.forEach(tab => {
+        tab.addEventListener('click', function() {
+            // 移除所有标签的active类
+            techTabs.forEach(t => t.classList.remove('active'));
+            // 为当前点击的标签添加active类
+            this.classList.add('active');
+
+            // 获取当前标签对应的技术内容
+            const techName = this.textContent;
+            const techData = techContents[techName];
+
+            // 如果找到对应的内容，则更新显示
+            if (techData) {
+                techContentArea.innerHTML = techData.content;
+            }
+        });
+    });
+
+    // 展示类型切换功能
+    const displayTabs = document.querySelectorAll('.display-tab');
+    const displayContents = document.querySelectorAll('.display-content > div');
+
+    displayTabs.forEach((tab, index) => {
+        tab.addEventListener('click', function() {
+            // 移除所有标签和内容的active类
+            displayTabs.forEach(t => t.classList.remove('active'));
+            displayContents.forEach(c => c.classList.remove('active'));
+
+            // 为当前点击的标签和对应内容添加active类
+            this.classList.add('active');
+            displayContents[index].classList.add('active');
+        });
+    });
+
+    // 图片模态框功能
+    const archImage = document.querySelector('.arch-image img');
+    const imageModal = document.querySelector('.image-modal');
+    const modalImage = document.querySelector('.image-modal img');
+    const modalClose = document.querySelector('.image-modal-close');
+
+    if (archImage && imageModal && modalImage && modalClose) {
+        archImage.addEventListener('click', function() {
+            modalImage.src = this.src;
+            imageModal.style.display = 'flex';
+        });
+
+        modalClose.addEventListener('click', function() {
+            imageModal.style.display = 'none';
+        });
+
+        imageModal.addEventListener('click', function(e) {
+            if (e.target === imageModal) {
+                imageModal.style.display = 'none';
+            }
+        });
+    }
+
+    // 创建技术演示浮窗
+    const demoModal = document.createElement('div');
+    demoModal.className = 'demo-modal';
+    demoModal.innerHTML = `
+        <div class="demo-modal-content">
+            <div class="demo-modal-close">&times;</div>
+            <iframe 
+                src=""
+                frameborder="0"
+                allowfullscreen>
+            </iframe>
+        </div>
+    `;
+    document.body.appendChild(demoModal);
+
+    // 获取浮窗中的iframe和关闭按钮
+    const modalFrame = demoModal.querySelector('iframe');
+    const modalCloseDemo = demoModal.querySelector('.demo-modal-close');
+
+    // 为技术图片添加点击事件
+    const techContent = document.querySelector('.tech-content');
+    techContent.addEventListener('click', function(e) {
+        const techImage = e.target.closest('.tech-image img');
+        if (techImage) {
+            // 获取当前激活的技术标签文本
+            const activeTechTab = document.querySelector('.tech-tab.active');
+            const techName = activeTechTab.textContent;
+            
+            // 获取对应的演示链接
+            const demoUrl = techDemoUrls[techName];
+            if (demoUrl) {
+                modalFrame.src = demoUrl;
+                demoModal.style.display = 'flex';
+                document.body.style.overflow = 'hidden';
+            }
+        }
+    });
+
+    // 关闭浮窗
+    modalCloseDemo.addEventListener('click', function() {
+        demoModal.style.display = 'none';
+        document.body.style.overflow = '';
+        modalFrame.src = ''; // 清空iframe源，停止加载
+    });
+
+    // 点击浮窗背景关闭
+    demoModal.addEventListener('click', function(e) {
+        if (e.target === demoModal) {
+            demoModal.style.display = 'none';
+            document.body.style.overflow = '';
+            modalFrame.src = '';
+        }
+    });
+
+    // 为3D演示区域的遮罩层添加点击事件
+    const iframeOverlay = document.querySelector('.iframe-overlay');
+    const coreFrame = document.querySelector('.core-tech-frame');
+    
+    if (iframeOverlay && coreFrame) {
+        iframeOverlay.addEventListener('click', function() {
+            // 获取当前iframe的src
+            const currentSrc = coreFrame.src;
+            
+            // 使用现有的demoModal显示全屏iframe
+            const modalFrame = demoModal.querySelector('iframe');
+            modalFrame.src = currentSrc;
+            demoModal.style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+        });
+    }
+}); 

assets/js/landing.js

@@ -54,4 +54,59 @@ document.addEventListener('DOMContentLoaded', function() {
     window.addEventListener('resize', function() {
         marketTrendChart.resize();
     });
+
+    // 展示类型切换
+    const displayTabs = document.querySelectorAll('.display-tab');
+    const displayContents = document.querySelectorAll('.display-content > div');
+    
+    displayTabs.forEach((tab, index) => {
+        tab.addEventListener('click', () => {
+            // 更新标签状态
+            document.querySelector('.display-tab.active').classList.remove('active');
+            tab.classList.add('active');
+            
+            // 更新内容显示
+            document.querySelector('.display-content > div.active').classList.remove('active');
+            displayContents[index].classList.add('active');
+        });
+    });
+
+    // 图片放大功能
+    const archImage = document.querySelector('.arch-image');
+    const imageModal = document.querySelector('.image-modal');
+    const modalImage = imageModal.querySelector('img');
+    const modalClose = imageModal.querySelector('.image-modal-close');
+
+    if (archImage) {
+        archImage.addEventListener('click', () => {
+            const imgSrc = archImage.querySelector('img').src;
+            modalImage.src = imgSrc;
+            imageModal.classList.add('show');
+            document.body.style.overflow = 'hidden';  // 防止背景滚动
+        });
+    }
+
+    // 点击关闭按钮关闭
+    if (modalClose) {
+        modalClose.addEventListener('click', () => {
+            imageModal.classList.remove('show');
+            document.body.style.overflow = '';
+        });
+    }
+
+    // 点击背景关闭
+    if (imageModal) {
+        imageModal.addEventListener('click', (e) => {
+            if (e.target === imageModal) {
+                modalClose.click();
+            }
+        });
+    }
+
+    // ESC键关闭
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && imageModal.classList.contains('show')) {
+            modalClose.click();
+        }
+    });
 }); 

assets/js/main.js

@@ -0,0 +1,222 @@
+// 组件加载器类
+class ComponentLoader {
+    static async loadComponent(elementSelector, componentPath) {
+        try {
+            const response = await fetch(componentPath);
+            const html = await response.text();
+            document.querySelector(elementSelector).innerHTML = html;
+            
+            const componentName = componentPath.split('/').slice(-2)[0];
+            const scriptPath = componentPath.replace('.html', '.js');
+            const scriptExists = await fetch(scriptPath).then(() => true).catch(() => false);
+            
+            if (scriptExists) {
+                const script = document.createElement('script');
+                script.src = scriptPath;
+                document.body.appendChild(script);
+            }
+        } catch (error) {
+            console.error(`Error loading component ${componentPath}:`, error);
+        }
+    }
+
+    static init() {
+        const pathDepth = window.location.pathname.split('/').length - 2;
+        const basePath = '../'.repeat(pathDepth);
+        
+        this.loadComponent('header', `${basePath}components/header/header.html`);
+        this.loadComponent('footer', `${basePath}components/footer/footer.html`);
+    }
+}
+
+// 图片模态框功能
+function showImageModal(imgElement) {
+    const modal = document.getElementById('imageModal');
+    const modalImg = document.getElementById('modalImage');
+    modalImg.src = imgElement.src;
+    modalImg.alt = imgElement.alt;
+    
+    const bsModal = new bootstrap.Modal(modal);
+    bsModal.show();
+}
+
+// 页面加载完成后的初始化
+document.addEventListener('DOMContentLoaded', () => {
+    // 初始化组件
+    ComponentLoader.init();
+
+    // 初始化工具提示
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl)
+    });
+
+    // 案例切换功能初始化
+    initCaseTabs();
+
+    // 表单步骤功能初始化
+    initFormSteps();
+});
+
+// 案例切换功能
+function initCaseTabs() {
+    document.querySelectorAll('.case-tab').forEach(tab => {
+        tab.addEventListener('click', function() {
+            document.querySelector('.case-tab.active').classList.remove('active');
+            this.classList.add('active');
+            
+            const type = this.textContent;
+            document.querySelectorAll('.case-item').forEach(item => {
+                item.style.display = item.dataset.type === type ? 'block' : 'none';
+            });
+        });
+    });
+
+    // 初始化显示政府案例
+    document.querySelectorAll('.case-item').forEach(item => {
+        if(item.dataset.type !== '政府案例') {
+            item.style.display = 'none';
+        }
+    });
+}
+
+// 表单步骤功能
+function initFormSteps() {
+    const form = document.getElementById('dataAccessForm');
+    if (!form) return; // 如果页面上没有表单，直接返回
+
+    const steps = document.querySelectorAll('.form-step');
+    const progressSteps = document.querySelectorAll('.step');
+    const prevBtn = document.getElementById('prevBtn');
+    const nextBtn = document.getElementById('nextBtn');
+    let currentStep = 0;
+
+    function updateSteps() {
+        steps.forEach((step, index) => {
+            step.classList.toggle('d-none', index !== currentStep);
+        });
+
+        progressSteps.forEach((step, index) => {
+            if (index === currentStep) {
+                step.classList.add('active');
+            } else if (index < currentStep) {
+                step.classList.add('completed');
+                step.classList.remove('active');
+            } else {
+                step.classList.remove('active', 'completed');
+            }
+        });
+
+        prevBtn.disabled = currentStep === 0;
+        nextBtn.textContent = currentStep === steps.length - 1 ? '提交' : '下一步';
+    }
+
+    function validateCurrentStep() {
+        const currentStepElement = steps[currentStep];
+        const inputs = currentStepElement.querySelectorAll('input, select');
+        let isValid = true;
+
+        inputs.forEach(input => {
+            if (input.hasAttribute('required') && !input.value) {
+                isValid = false;
+                input.classList.add('is-invalid');
+            } else {
+                input.classList.remove('is-invalid');
+            }
+        });
+
+        return isValid;
+    }
+
+    // 初始化接入方式选择
+    initAccessMethodSelect();
+
+    // 按钮事件监听
+    prevBtn?.addEventListener('click', () => {
+        if (currentStep > 0) {
+            currentStep--;
+            updateSteps();
+        }
+    });
+
+    nextBtn?.addEventListener('click', () => {
+        if (!validateCurrentStep()) return;
+
+        if (currentStep < steps.length - 1) {
+            currentStep++;
+            updateSteps();
+        } else if (form.checkValidity()) {
+            alert('表单提交成功！');
+            // 这里添加实际的表单提交逻辑
+        }
+    });
+
+    updateSteps();
+}
+
+// 接入方式选择功能
+function initAccessMethodSelect() {
+    const accessMethodSelect = document.querySelector('select');
+    const accessMethodForms = document.getElementById('accessMethodForms');
+    
+    if (!accessMethodSelect || !accessMethodForms) return;
+
+    accessMethodSelect.addEventListener('change', function(e) {
+        const method = e.target.value;
+        accessMethodForms.innerHTML = getAccessMethodHTML(method);
+    });
+}
+
+function getAccessMethodHTML(method) {
+    const templates = {
+        file: `
+            <div class="mb-3">
+                <label class="form-label">选择文件</label>
+                <input type="file" class="form-control" required>
+                <div class="form-text">支持的格式：CSV, Excel, JSON</div>
+            </div>
+        `,
+        api: `
+            <div class="mb-3">
+                <label class="form-label">API 地址</label>
+                <input type="url" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label class="form-label">认证令牌</label>
+                <input type="text" class="form-control" required>
+            </div>
+            <button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
+        `,
+        database: `
+            <div class="mb-3">
+                <label class="form-label">数据库类型</label>
+                <select class="form-select" required>
+                    <option value="mysql">MySQL</option>
+                    <option value="postgresql">PostgreSQL</option>
+                    <option value="sqlserver">SQL Server</option>
+                </select>
+            </div>
+            <div class="mb-3">
+                <label class="form-label">连接字符串</label>
+                <input type="text" class="form-control" required>
+            </div>
+            <button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
+        `
+    };
+    
+    return templates[method] || '';
+}
+
+// 测试连接功能
+window.testConnection = function() {
+    const btn = event.target;
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 测试中...';
+
+    setTimeout(() => {
+        btn.disabled = false;
+        btn.textContent = originalText;
+        alert('连接测试成功！');
+    }, 2000);
+}; 

assets/js/script.js

@@ -1,165 +0,0 @@
-// 显示图片模态框函数移到全局作用域
-function showImageModal(imgElement) {
-    const modal = document.getElementById('imageModal');
-    const modalImg = document.getElementById('modalImage');
-    modalImg.src = imgElement.src;
-    modalImg.alt = imgElement.alt;
-    
-    const bsModal = new bootstrap.Modal(modal);
-    bsModal.show();
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    // 初始化工具提示
-    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-        return new bootstrap.Tooltip(tooltipTriggerEl)
-    });
-
-    const form = document.getElementById('dataAccessForm');
-    const steps = document.querySelectorAll('.form-step');
-    const progressSteps = document.querySelectorAll('.step');
-    const prevBtn = document.getElementById('prevBtn');
-    const nextBtn = document.getElementById('nextBtn');
-    let currentStep = 0;
-
-    // 更新步骤显示
-    function updateSteps() {
-        steps.forEach((step, index) => {
-            if (index === currentStep) {
-                step.classList.remove('d-none');
-            } else {
-                step.classList.add('d-none');
-            }
-        });
-
-        // 更新进度指示器
-        progressSteps.forEach((step, index) => {
-            if (index === currentStep) {
-                step.classList.add('active');
-            } else if (index < currentStep) {
-                step.classList.add('completed');
-                step.classList.remove('active');
-            } else {
-                step.classList.remove('active', 'completed');
-            }
-        });
-
-        // 更新按钮状态
-        prevBtn.disabled = currentStep === 0;
-        if (currentStep === steps.length - 1) {
-            nextBtn.textContent = '提交';
-        } else {
-            nextBtn.textContent = '下一步';
-        }
-    }
-
-    // 处理接入方式选择
-    const accessMethodSelect = document.querySelector('select');
-    const accessMethodForms = document.getElementById('accessMethodForms');
-
-    accessMethodSelect.addEventListener('change', function(e) {
-        const method = e.target.value;
-        accessMethodForms.innerHTML = '';
-
-        if (method === 'file') {
-            accessMethodForms.innerHTML = `
-                <div class="mb-3">
-                    <label class="form-label">选择文件</label>
-                    <input type="file" class="form-control" required>
-                    <div class="form-text">支持的格式：CSV, Excel, JSON</div>
-                </div>
-            `;
-        } else if (method === 'api') {
-            accessMethodForms.innerHTML = `
-                <div class="mb-3">
-                    <label class="form-label">API 地址</label>
-                    <input type="url" class="form-control" required>
-                </div>
-                <div class="mb-3">
-                    <label class="form-label">认证令牌</label>
-                    <input type="text" class="form-control" required>
-                </div>
-                <button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
-            `;
-        } else if (method === 'database') {
-            accessMethodForms.innerHTML = `
-                <div class="mb-3">
-                    <label class="form-label">数据库类型</label>
-                    <select class="form-select" required>
-                        <option value="mysql">MySQL</option>
-                        <option value="postgresql">PostgreSQL</option>
-                        <option value="sqlserver">SQL Server</option>
-                    </select>
-                </div>
-                <div class="mb-3">
-                    <label class="form-label">连接字符串</label>
-                    <input type="text" class="form-control" required>
-                </div>
-                <button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
-            `;
-        }
-    });
-
-    // 测试连接
-    window.testConnection = function() {
-        // 显示加载状态
-        const btn = event.target;
-        const originalText = btn.textContent;
-        btn.disabled = true;
-        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 测试中...';
-
-        // 模拟API调用
-        setTimeout(() => {
-            btn.disabled = false;
-            btn.textContent = originalText;
-            alert('连接测试成功！');
-        }, 2000);
-    };
-
-    // 表单验证
-    function validateCurrentStep() {
-        const currentStepElement = steps[currentStep];
-        const inputs = currentStepElement.querySelectorAll('input, select');
-        let isValid = true;
-
-        inputs.forEach(input => {
-            if (input.hasAttribute('required') && !input.value) {
-                isValid = false;
-                input.classList.add('is-invalid');
-            } else {
-                input.classList.remove('is-invalid');
-            }
-        });
-
-        return isValid;
-    }
-
-    // 按钮事件监听
-    prevBtn.addEventListener('click', () => {
-        if (currentStep > 0) {
-            currentStep--;
-            updateSteps();
-        }
-    });
-
-    nextBtn.addEventListener('click', () => {
-        if (!validateCurrentStep()) {
-            return;
-        }
-
-        if (currentStep < steps.length - 1) {
-            currentStep++;
-            updateSteps();
-        } else {
-            // 提交表单
-            if (form.checkValidity()) {
-                alert('表单提交成功！');
-                // 这里添加实际的表单提交逻辑
-            }
-        }
-    });
-
-    // 初始化显示
-    updateSteps();
-});

components/header/header.html

@@ -2,44 +2,101 @@
     <div class="header-inner width1600">
         <a href="/" style="text-decoration:none;">
             <div class="s-flex ai-ct">
-                <img src="/assets/images/GX-Logo.png" alt="logo" style="height:60px;width:auto;margin-right:8px;">
+                <img src="/assets/images/components/GX-Logo.png" alt="logo" style="height:60px;width:auto;margin-right:8px;">
                 <span style="font-size:25px;font-weight:bold;">可信数据空间</span>
             </div>
         </a>
-        <div class="doc-dropdown">
-            <div class="doc-icon">
+        <div class="doc-menu">
+            <div class="doc-btn">
                 <i class="fas fa-book"></i>
                 <span>文档资料</span>
             </div>
-            <div class="dropdown-menu">
+            <div class="doc-list">
+                <div class="doc-item">
+                    <a href="https://ona6vkv8mv.feishu.cn/docx/Og9YdjCpMoECevxxH7KczFQNn2g" target="_blank" class="doc-link">
+                        <i class="far fa-file-alt"></i>
+                        产品说明手册
+                    </a>
+                </div>
                 <div class="doc-item">
                     <a href="https://ona6vkv8mv.feishu.cn/docx/MTdAdHydmoQtqpxaDwDcwVDXnRf" target="_blank" class="doc-link">
-                        可信数据空间管理员手册
+                        <i class="far fa-file-alt"></i>
+                        系统管理员手册
                     </a>
-                    <button class="copy-btn" data-password="1#838S83">
-                        <i class="far fa-copy"></i>
-                        复制密码
-                    </button>
                 </div>
                 <div class="doc-item">
                     <a href="https://ona6vkv8mv.feishu.cn/docx/RSAgdKxcoolO0IxPGnMcKn2Bn2b" target="_blank" class="doc-link">
-                        数据管理员使用手册
+                        <i class="far fa-file-alt"></i>
+                        数据管理员手册
                     </a>
-                    <button class="copy-btn" data-password="88135K&1">
-                        <i class="far fa-copy"></i>
-                        复制密码
-                    </button>
-                </div>
-                <div class="doc-item">
-                    <a href="https://ona6vkv8mv.feishu.cn/docx/Og9YdjCpMoECevxxH7KczFQNn2g" target="_blank" class="doc-link">
-                        产品手册
-                    </a>
-                    <button class="copy-btn" data-password="H1#65257">
-                        <i class="far fa-copy"></i>
-                        复制密码
-                    </button>
                 </div>
             </div>
         </div>
     </div>
-</div> 
+</div>
+
+<style>
+    .doc-menu {
+        position: relative;
+        margin-left: auto;
+    }
+
+    .doc-btn {
+        cursor: pointer;
+        padding: 10px 15px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #333;
+        transition: all 0.3s ease;
+    }
+
+    .doc-btn:hover {
+        color: #0056b3;
+    }
+
+    .doc-list {
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        background: white;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+        min-width: 320px;
+        z-index: 1000;
+    }
+
+    .doc-menu:hover .doc-list {
+        display: block;
+    }
+
+    .doc-item {
+        padding: 12px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #eee;
+    }
+
+    .doc-item:last-child {
+        border-bottom: none;
+    }
+
+    .doc-link {
+        color: #333;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+    }
+
+    .doc-link:hover {
+        color: #0056b3;
+    }
+
+    .doc-link i {
+        color: #0056b3;
+    }
+</style> 

index.html

@@ -4,56 +4,19 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>数据资产</title>
+    <!-- 全局样式 -->
     <link rel="stylesheet" href="./assets/css/style.css">
+    <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!-- 组件样式 -->
+    <link rel="stylesheet" href="./assets/css/components/header.css">
+    <link rel="stylesheet" href="./assets/css/components/footer.css">
+    <!-- 页面特定样式 -->
+    <link rel="stylesheet" href="./assets/css/pages/index.css">
 </head>
 <body>
-    <!-- 替换组件化的Header -->
-    <div class="header-wrap">
-        <div class="header-inner width1600">
-            <a href="/" style="text-decoration:none;">
-                <div class="s-flex ai-ct">
-                    <img src="./assets/images/GX-Logo.png" alt="logo" style="height:60px;width:auto;margin-right:8px;">
-                    <span style="font-size:25px;font-weight:bold;">可信数据空间</span>
-                </div>
-            </a>
-            <div class="doc-dropdown">
-                <div class="doc-icon">
-                    <i class="fas fa-book"></i>
-                    <span>文档资料</span>
-                </div>
-                <div class="dropdown-menu">
-                    <div class="doc-item">
-                        <a href="https://ona6vkv8mv.feishu.cn/docx/MTdAdHydmoQtqpxaDwDcwVDXnRf" target="_blank" class="doc-link">
-                            可信数据空间管理员手册
-                        </a>
-                        <button class="copy-btn" data-password="1#838S83">
-                            <i class="far fa-copy"></i>
-                            复制密码
-                        </button>
-                    </div>
-                    <div class="doc-item">
-                        <a href="https://ona6vkv8mv.feishu.cn/docx/RSAgdKxcoolO0IxPGnMcKn2Bn2b" target="_blank" class="doc-link">
-                            数据管理员使用手册
-                        </a>
-                        <button class="copy-btn" data-password="88135K&1">
-                            <i class="far fa-copy"></i>
-                            复制密码
-                        </button>
-                    </div>
-                    <div class="doc-item">
-                        <a href="https://ona6vkv8mv.feishu.cn/docx/Og9YdjCpMoECevxxH7KczFQNn2g" target="_blank" class="doc-link">
-                            产品手册
-                        </a>
-                        <button class="copy-btn" data-password="H1#65257">
-                            <i class="far fa-copy"></i>
-                            复制密码
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    <!-- Header -->
+    <header></header>
 
     <div class="banner-wrap">
         <div class="s-flex ai-ct" style="height:100%">
@@ -72,25 +35,25 @@
             </div>
             <div class="function-module-list">
                 <div class="function-item">
-                    <img src="./assets/images/func01-jNIM7hjY.png" alt="数据资产登记">
+                    <img src="./assets/images/index/func01.png" alt="数据资产登记">
                     <h5>数据资产登记</h5>
                     <p>专业的数据资产登记服务，助力企业完成数据确权和入表。</p>
                     <a href="http://demo.sutedt.com:3060" class="btn" target="_blank">了解更多</a>
                 </div>
                 <div class="function-item">
-                    <img src="./assets/images/func02-Bnh0ZuN5.png" alt="数据治理服务">
+                    <img src="./assets/images/index/func02.png" alt="数据治理服务">
                     <h5>数据治理服务</h5>
                     <p>全面的数据治理能力，提供数据标准化、质量管理等服务。</p>
-                    <a href="http://demo.sutedt.com:3070" class="btn" target="_blank">立即体验</a>
+                    <a href="http://demo.sutedt.com:3061" class="btn" target="_blank">立即体验</a>
                 </div>
                 <div class="function-item">
-                    <img src="./assets/images/func03-DYYDzlwQ.png" alt="可信数据环境">
+                    <img src="./assets/images/index/func03.png" alt="可信数据环境">
                     <h5>可信数据环境</h5>
                     <p>安全可信的数据环境，支持数据沙箱和隐私计算。</p>
                     <a href="https://icloud-open.ibisaas.com" class="btn" target="_blank">进入环境</a>
                 </div>
                 <div class="function-item">
-                    <img src="./assets/images/func04-D80yO0ne.png" alt="数据运营服务">
+                    <img src="./assets/images/index/func04.png" alt="数据运营服务">
                     <h5>数据运营服务</h5>
                     <p>专业的数据运营服务，助力企业挖掘数据价值。</p>
                     <a href="./pages/mods/mod4-ops/data-market.html" class="btn">进入数据市场</a>
@@ -116,6 +79,7 @@
             <div class="display-content">
                 <!-- 3D演示 -->
                 <div class="demo-3d active">
+                    <div class="iframe-overlay"></div>
                     <iframe 
                         class="core-tech-frame"
                         src="https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数联网-可信数据空间.icraft&preview=true"
@@ -126,7 +90,7 @@
                 
                 <!-- 架构图 -->
                 <div class="arch-image">
-                    <img src="./assets/images/可信空间技术架构图.png" alt="可信空间技术架构图">
+                    <img src="./assets/images/index/可信空间技术架构图.png" alt="可信空间技术架构图">
                 </div>
             </div>
 
@@ -139,7 +103,7 @@
             </div>
             <div class="tech-content">
                 <div class="tech-image">
-                    <img src="./assets/images/core01-Do-49SRi.png" alt="数据沙箱">
+                    <img src="./assets/images/index/core01.png" alt="数据沙箱">
                     <div class="tech-image-value">
                         <h5>技术价值</h5>
                         <p>实现数据可用不可见，保障数据在流通过程中的安全可信。</p>
@@ -173,7 +137,7 @@
             </div>
             <div class="application-list">
                 <div class="application-item">
-                    <img src="./assets/images/scen01-Df1_Ba-D.png" alt="供应链金融企业信用评级">
+                    <img src="./assets/images/index/scen01.png" alt="供应链金融企业信用评级">
                     <h5>供应链金融企业信用评级</h5>
                     <p>基于多方数据的企业信用评估模型，助力供应链金融风控。</p>
                     <ul class="features">
@@ -184,7 +148,7 @@
                     <a href="#" class="btn">立即体验</a>
                 </div>
                 <div class="application-item">
-                    <img src="./assets/images/scen02-Db38haXK.png" alt="行业研究数据服务">
+                    <img src="./assets/images/index/scen02.png" alt="行业研究数据服务">
                     <h5>行业研究数据服务</h5>
                     <p>整合多家行业数据，提供深度分析和研究报告服务。</p>
                     <ul class="features">
@@ -195,7 +159,7 @@
                     <a href="#" class="btn">了解更多</a>
                 </div>
                 <div class="application-item">
-                    <img src="./assets/images/scen03-BMj46DR7.png" alt="工业互联网大模型">
+                    <img src="./assets/images/index/scen03.png" alt="工业互联网大模型">
                     <h5>工业互联网大模型</h5>
                     <p>基于海量工业数据训练的专业大模型，赋能智能制造。</p>
                     <ul class="features">
@@ -314,316 +278,17 @@
         </div>
     </div>
 
-    <!-- 替换组件化的Footer -->
-    <div class="footer">
-        <div class="width1600">
-            <p>© 2024 国信中健数字科技有限公司</p>
-        </div>
-    </div>
-
-    <div class="modal-overlay">
-        <div class="modal-content">
-            <div class="modal-close">&times;</div>
-            <iframe class="modal-iframe" frameborder="0" allowfullscreen></iframe>
-        </div>
-    </div>
-
-    <div class="copy-tooltip">
-        <i class="fas fa-check-circle"></i>
-        <span>密码已复制到剪贴板</span>
-    </div>
+    <!-- Footer -->
+    <footer></footer>
 
+    <!-- 图片模态框 -->
     <div class="image-modal">
         <div class="image-modal-close">&times;</div>
         <img src="" alt="技术架构图">
     </div>
 
-    <script>
-        // 直接添加事件监听代码
-        const docIcon = document.querySelector('.doc-icon');
-        const dropdownMenu = document.querySelector('.dropdown-menu');
-        const copyButtons = document.querySelectorAll('.copy-btn');
-        const tooltip = document.querySelector('.copy-tooltip');
-
-        if (docIcon && dropdownMenu) {
-            docIcon.addEventListener('click', (e) => {
-                e.stopPropagation();
-                dropdownMenu.classList.toggle('show');
-            });
-
-            document.addEventListener('click', () => {
-                dropdownMenu.classList.remove('show');
-            });
-
-            dropdownMenu.addEventListener('click', (e) => {
-                e.stopPropagation();
-            });
-        }
-
-        if (copyButtons && tooltip) {
-            copyButtons.forEach(button => {
-                button.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const password = button.dataset.password;
-                    
-                    navigator.clipboard.writeText(password).then(() => {
-                        tooltip.classList.remove('hide');
-                        tooltip.classList.add('show');
-                        
-                        setTimeout(() => {
-                            tooltip.classList.remove('show');
-                            tooltip.classList.add('hide');
-                        }, 2000);
-                    });
-                });
-            });
-        }
-
-        // 准备所有技术内容
-        const techContents = {
-            '数据沙箱': {
-                image: './assets/images/core01-Do-49SRi.png',
-                content: `
-                    <div class="tech-image">
-                        <img src="./assets/images/core01-Do-49SRi.png" alt="数据沙箱">
-                        <div class="tech-image-value">
-                            <h5>技术价值</h5>
-                            <p>实现数据可用不可见，保障数据在流通过程中的安全可信。</p>
-                        </div>
-                    </div>
-                    <div class="tech-info">
-                        <div class="tech-intro">
-                            <h5>技术简介</h5>
-                            <p>数据沙箱技术是一种安全的数据使用环境，通过构建独立的计算空间，允许数据需求方在不接触原始数据的情况下完成数据分析和计算任务。该技术集成了数据脱敏、访问控制、安全审计等多重保护机制，确保数据在流通和使用过程中的安全性。同时，通过提供标准化的数据服务接口，支持多样化的数据应用场景，实现数据价值的安全释放。</p>
-                        </div>
-                        <div class="tech-advantages">
-                            <h5>技术优势</h5>
-                            <ul>
-                                <li>安全性高：采用多层安全防护架构，包括身份认证、权限控制、数据加密等措施，从多个维度保障数据安全</li>
-                                <li>场景丰富：支持数据分析、机器学习、统计建模等多种计算场景，满足不同行业的数据应用需求</li>
-                                <li>易于管理：提供完整的管理功能，包括数据接入、权限配置、使用监控、审计追踪等，降低运维管理成本</li>
-                                <li>性能优异：通过优化的计算引擎和资源调度机制，确保数据处理的高效性，支持大规模数据分析需求</li>
-                            </ul>
-                        </div>
-                    </div>
-                `
-            },
-            '数据抽样': {
-                image: './assets/images/core02-DYE3Nswp.png',
-                content: `
-                    <div class="tech-image">
-                        <img src="./assets/images/core02-DYE3Nswp.png" alt="数据抽样">
-                        <div class="tech-image-value">
-                            <h5>技术价值</h5>
-                            <p>确保数据采样的科学性和代表性，提供高效可靠的数据获取方法。</p>
-                        </div>
-                    </div>
-                    <div class="tech-info">
-                        <div class="tech-intro">
-                            <h5>技术简介</h5>
-                            <p>数据抽样技术是一种从大规模数据集中提取代表性样本的科学方法，通过系统化的抽样策略和质量控制机制，确保抽取的数据样本能够准确反映整体数据特征。该技术融合了统计学原理和计算优化算法，支持多种抽样方法，包括随机抽样、分层抽样、配额抽样等，并通过智能化的参数调优和样本验证，保证抽样结果的可靠性和实用价值。</p>
-                        </div>
-                        <div class="tech-advantages">
-                            <h5>技术优势</h5>
-                            <ul>
-                                <li>科学准确：基于严谨的统计学理论，通过多种抽样方法和验证机制，确保样本的代表性和可信度</li>
-                                <li>灵活高效：支持多种抽样策略，可根据不同场景需求灵活配置抽样参数，显著提升数据获取效率</li>
-                                <li>成本优化：通过合理的样本量设计和优化算法，在保证数据质量的同时，有效降低数据处理成本</li>
-                                <li>易于集成：提供标准化的接口和服务，可无缝集成到现有数据处理流程中，支持自动化操作</li>
-                            </ul>
-                        </div>
-                    </div>
-                `
-            },
-            '数据脱敏': {
-                image: './assets/images/core03--_bSTplJ.png',
-                content: `
-                    <div class="tech-image">
-                        <img src="./assets/images/core03--_bSTplJ.png" alt="数据脱敏">
-                        <div class="tech-image-value">
-                            <h5>技术价值</h5>
-                            <p>在保护敏感信息的同时保持数据可用性，实现数据安全共享和分析利用。</p>
-                        </div>
-                    </div>
-                    <div class="tech-info">
-                        <div class="tech-intro">
-                            <h5>技术简介</h5>
-                            <p>数据脱敏技术是一种信息安全保护方法，通过对敏感数据进行变形、替换、加密等处理，在确保数据分析价值的同时有效保护隐私信息。该技术包含静态脱敏和动态脱敏两大类，支持字符遮蔽、数据替换、格式保留加密等多种脱敏策略，并通过智能规则引擎实现数据的精准识别和安全转换，广泛应用于金融、医疗、政务等领域的数据安全流通场景。</p>
-                        </div>
-                        <div class="tech-advantages">
-                            <h5>技术优势</h5>
-                            <ul>
-                                <li>安全可控：采用多层级脱敏策略，支持字段级、记录级的精细化控制，确保敏感信息得到全面保护</li>
-                                <li>业务友好：在实现隐私保护的同时保持数据的业务价值，支持多种格式保留脱敏方法，便于后续分析利用</li>
-                                <li>性能卓越：通过优化的脱敏算法和并行处理机制，支持海量数据的高效处理，满足实时业务需求</li>
-                                <li>灵活扩展：提供丰富的脱敏规则配置选项，可根据不同场景快速定制脱敏方案，适应各类业务需求</li>
-                            </ul>
-                        </div>
-                    </div>
-                `
-            },
-            '多方安全计算': {
-                image: './assets/images/core04-CgdtwWqu.png',
-                content: `
-                    <div class="tech-image">
-                        <img src="./assets/images/core04-CgdtwWqu.png" alt="多方安全计算">
-                        <div class="tech-image-value">
-                            <h5>技术价值</h5>
-                            <p>实现多个参与方在不泄露原始数据的前提下进行联合数据计算和分析。</p>
-                        </div>
-                    </div>
-                    <div class="tech-info">
-                        <div class="tech-intro">
-                            <h5>技术简介</h5>
-                            <p>多方安全计算是一种先进的密码学技术，允许多个数据持有方在保护各自数据隐私的前提下完成联合计算任务。该技术融合了秘密分享、混淆电路、同态加密等密码学方法，通过构建安全的计算协议，确保计算过程中各方只能获得最终结果，无法获取其他参与方的原始数据。广泛应用于跨机构数据分析、联合风控、隐私计算等场景，是数据安全流通的核心支撑技术。</p>
-                        </div>
-                        <div class="tech-advantages">
-                            <h5>技术优势</h5>
-                            <ul>
-                                <li>隐私保护：基于严格的密码学协议，确保计算过程中各方数据不出域、不泄露，从根本上解决数据安全问题</li>
-                                <li>结果可信：采用安全的多方计算协议，保证计算结果的准确性和可验证性，支持公平计算</li>
-                                <li>场景丰富：支持多种基础运算和高级分析功能，可用于联合建模、统计分析、特征计算等多种业务场景</li>
-                                <li>可扩展性：支持两方到多方的安全计算场景，并可通过分布式计算提升性能，满足大规模数据计算需求</li>
-                            </ul>
-                        </div>
-                    </div>
-                `
-            }
-        };
-
-        // 添加点击事件处理
-        document.querySelectorAll('.tech-tab').forEach(tab => {
-            tab.addEventListener('click', function() {
-                // 更新激活状态
-                document.querySelector('.tech-tab.active').classList.remove('active');
-                this.classList.add('active');
-                
-                // 更新内容
-                const content = techContents[this.textContent];
-                document.querySelector('.tech-content').innerHTML = content.content;
-            });
-        });
-
-        const techUrls = {
-            '数据沙箱': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据沙箱.icraft&preview=true',
-            '数据抽样': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据抽样.icraft&preview=true',
-            '数据脱敏': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据脱敏计算.icraft&preview=true',
-            '多方安全计算': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/多方安全计算.icraft&preview=true'
-        };
-
-        // 浮窗相关
-        const modal = document.querySelector('.modal-overlay');
-        const modalIframe = modal.querySelector('.modal-iframe');
-        const closeBtn = modal.querySelector('.modal-close');
-
-        // 点击图片打开浮窗
-        document.addEventListener('click', function(e) {
-            if (e.target.closest('.tech-image')) {
-                const techName = document.querySelector('.tech-tab.active').textContent;
-                const url = techUrls[techName];
-                if (url) {
-                    modalIframe.src = url;
-                    modal.style.display = 'flex';
-                    document.body.style.overflow = 'hidden';  // 防止背景滚动
-                }
-            }
-        });
-
-        // 关闭浮窗
-        closeBtn.addEventListener('click', function() {
-            modal.style.display = 'none';
-            modalIframe.src = '';  // 清空 iframe 内容
-            document.body.style.overflow = '';  // 恢复背景滚动
-        });
-
-        // 点击遮罩层关闭浮窗
-        modal.addEventListener('click', function(e) {
-            if (e.target === modal) {
-                closeBtn.click();
-            }
-        });
-
-        // ESC 键关闭浮窗
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape' && modal.style.display === 'flex') {
-                closeBtn.click();
-            }
-        });
-
-        // 案例切换功能
-        document.querySelectorAll('.case-tab').forEach(tab => {
-            tab.addEventListener('click', function() {
-                // 更新标签状态
-                document.querySelector('.case-tab.active').classList.remove('active');
-                this.classList.add('active');
-                
-                // 更新内容显示
-                const type = this.textContent;
-                document.querySelectorAll('.case-item').forEach(item => {
-                    if(item.dataset.type === type) {
-                        item.style.display = 'block';
-                    } else {
-                        item.style.display = 'none';
-                    }
-                });
-            });
-        });
-
-        // 初始化显示政府案例
-        document.querySelectorAll('.case-item').forEach(item => {
-            if(item.dataset.type !== '政府案例') {
-                item.style.display = 'none';
-            }
-        });
-
-        // 展示类型切换
-        const displayTabs = document.querySelectorAll('.display-tab');
-        const displayContents = document.querySelectorAll('.display-content > div');
-
-        displayTabs.forEach((tab, index) => {
-            tab.addEventListener('click', () => {
-                // 更新标签状态
-                document.querySelector('.display-tab.active').classList.remove('active');
-                tab.classList.add('active');
-                
-                // 更新内容显示
-                document.querySelector('.display-content > div.active').classList.remove('active');
-                displayContents[index].classList.add('active');
-            });
-        });
-
-        // 图片放大功能
-        const archImage = document.querySelector('.arch-image');
-        const imageModal = document.querySelector('.image-modal');
-        const modalImage = imageModal.querySelector('img');
-        const modalClose = imageModal.querySelector('.image-modal-close');
-
-        archImage.addEventListener('click', () => {
-            const imgSrc = archImage.querySelector('img').src;
-            modalImage.src = imgSrc;
-            imageModal.classList.add('show');
-            document.body.style.overflow = 'hidden';  // 防止背景滚动
-        });
-
-        // 点击关闭按钮关闭
-        modalClose.addEventListener('click', () => {
-            imageModal.classList.remove('show');
-            document.body.style.overflow = '';
-        });
-
-        // 点击背景关闭
-        imageModal.addEventListener('click', (e) => {
-            if (e.target === imageModal) {
-                modalClose.click();
-            }
-        });
-
-        // ESC键关闭
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && imageModal.classList.contains('show')) {
-                modalClose.click();
-            }
-        });
-    </script>
+    <!-- 脚本引用 -->
+    <script src="./assets/js/main.js"></script>
+    <script src="./assets/js/index/index.js"></script>
 </body>
 </html> 

pages/mods/mod4-ops/data-market.html

@@ -8,58 +8,14 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link href="../../../vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <link href="../../../assets/css/styles.css" rel="stylesheet">
+    <link href="../../../assets/css/pages/mods/mod4-ops/doc-menu.css" rel="stylesheet">
 </head>
 <body class="d-flex flex-column min-vh-100">
-    <!-- 替换组件化的Header -->
-    <div class="header-wrap">
-        <div class="header-inner width1600">
-            <a href="/" style="text-decoration:none;">
-                <div class="s-flex ai-ct">
-                    <img src="../../../assets/images/GX-Logo.png" alt="logo" style="height:60px;width:auto;margin-right:8px;">
-                    <span style="font-size:25px;font-weight:bold;">可信数据空间</span>
-                </div>
-            </a>
-            <div class="doc-dropdown">
-                <div class="doc-icon">
-                    <i class="fas fa-book"></i>
-                    <span>文档资料</span>
-                </div>
-                <div class="dropdown-menu">
-                    <div class="doc-item">
-                        <a href="https://ona6vkv8mv.feishu.cn/docx/MTdAdHydmoQtqpxaDwDcwVDXnRf" target="_blank" class="doc-link">
-                            可信数据空间管理员手册
-                        </a>
-                        <button class="copy-btn" data-password="1#838S83">
-                            <i class="far fa-copy"></i>
-                            复制密码
-                        </button>
-                    </div>
-                    <div class="doc-item">
-                        <a href="https://ona6vkv8mv.feishu.cn/docx/RSAgdKxcoolO0IxPGnMcKn2Bn2b" target="_blank" class="doc-link">
-                            数据管理员使用手册
-                        </a>
-                        <button class="copy-btn" data-password="88135K&1">
-                            <i class="far fa-copy"></i>
-                            复制密码
-                        </button>
-                    </div>
-                    <div class="doc-item">
-                        <a href="https://ona6vkv8mv.feishu.cn/docx/Og9YdjCpMoECevxxH7KczFQNn2g" target="_blank" class="doc-link">
-                            产品手册
-                        </a>
-                        <button class="copy-btn" data-password="H1#65257">
-                            <i class="far fa-copy"></i>
-                            复制密码
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    <!-- 使用组件加载器加载header -->
+    <header></header>
 
     <!-- 主要内容区域 -->
-    <div class="container-fluid py-4 flex-grow-1">
+    <div class="container-fluid py-4 flex-grow-1 data-market">
         <div class="container">
 
             <!-- 搜索栏 -->
@@ -279,12 +235,8 @@
         </div>
     </div>
 
-    <!-- 替换组件化的Footer -->
-    <div class="footer">
-        <div class="width1600">
-            <p>© 2024 国信中健数字科技有限公司</p>
-        </div>
-    </div>
+    <!-- 使用组件加载器加载footer -->
+    <footer></footer>
 
     <!-- 复制提示 -->
     <div class="copy-tooltip">
@@ -293,46 +245,12 @@
     </div>
 
     <script src="../../../vendor/bootstrap/bootstrap.bundle.min.js"></script>
+    <script src="../../../assets/js/main.js"></script>
     <script>
-        // 直接添加事件监听代码
-        const docIcon = document.querySelector('.doc-icon');
-        const dropdownMenu = document.querySelector('.dropdown-menu');
-        const copyButtons = document.querySelectorAll('.copy-btn');
-        const tooltip = document.querySelector('.copy-tooltip');
-
-        if (docIcon && dropdownMenu) {
-            docIcon.addEventListener('click', (e) => {
-                e.stopPropagation();
-                dropdownMenu.classList.toggle('show');
-            });
-
-            document.addEventListener('click', () => {
-                dropdownMenu.classList.remove('show');
-            });
-
-            dropdownMenu.addEventListener('click', (e) => {
-                e.stopPropagation();
-            });
-        }
-
-        if (copyButtons && tooltip) {
-            copyButtons.forEach(button => {
-                button.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const password = button.dataset.password;
-                    
-                    navigator.clipboard.writeText(password).then(() => {
-                        tooltip.classList.remove('hide');
-                        tooltip.classList.add('show');
-                        
-                        setTimeout(() => {
-                            tooltip.classList.remove('show');
-                            tooltip.classList.add('hide');
-                        }, 2000);
-                    });
-                });
-            });
-        }
+        document.addEventListener('DOMContentLoaded', () => {
+            // 初始化组件
+            ComponentLoader.init();
+        });
     </script>
 </body>
 </html> 

pages/sys/system-config.html

@@ -4,13 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>系统配置 - 可信数据空间</title>
-    <link href="../vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap CSS -->
+    <link href="../../vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <link href="../assets/css/styles.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link href="../../assets/css/style.css" rel="stylesheet">
+    <!-- Header & Footer 样式 -->
+    <link rel="stylesheet" href="../../assets/css/components/header.css">
+    <link rel="stylesheet" href="../../assets/css/components/footer.css">
+    <link rel="stylesheet" href="../../assets/css/pages/system-config.css">
 </head>
 <body class="d-flex flex-column min-vh-100">
     <!-- Header -->
-    <div id="header"></div>
+    <header></header>
 
     <!-- 主要内容区域 -->
     <div class="container my-5 flex-grow-1">
@@ -20,7 +29,7 @@
                 <h2>系统配置</h2>
                 <nav aria-label="breadcrumb">
                     <ol class="breadcrumb">
-                        <li class="breadcrumb-item"><a href="../index.html">首页</a></li>
+                        <li class="breadcrumb-item"><a href="../../index.html">首页</a></li>
                         <li class="breadcrumb-item active">系统配置</li>
                     </ol>
                 </nav>
@@ -993,10 +1002,10 @@
     </div>
 
     <!-- Footer -->
-    <div id="footer"></div>
+    <footer></footer>
 
-    <script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
-    <script src="../assets/js/components.js"></script>
-    <script src="../assets/js/script.js"></script>
+    <!-- 脚本引用 -->
+    <script src="../../assets/js/common/components.js"></script>
+    <script src="../../assets/js/pages/system.js"></script>
 </body>
 </html>