From 125f97abb53f7f9a937227b7391873d37dd3f04a Mon Sep 17 00:00:00 2001 From: sichan Date: Thu, 23 Jan 2025 15:07:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E6=BC=94=E7=A4=BA?= =?UTF-8?q?=E7=9A=84header=E3=80=81footer=E5=8A=A0=E8=BD=BD=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/components/footer.css | 33 + assets/css/components/header.css | 57 + assets/css/pages/bi-dashboard.css | 261 ++++ assets/css/pages/index.css | 120 ++ assets/css/pages/mods/mod4-ops/doc-menu.css | 140 ++ assets/css/style.css | 254 +++- assets/css/styles.css | 153 --- assets/images/{ => components}/GX-Logo.png | Bin .../advantage01.png} | Bin .../advantage02.png} | Bin .../advantage03.png} | Bin .../advantage04.png} | Bin .../application.png} | Bin .../{banner-6yKP_oUz.png => index/banner.png} | Bin .../{core01-Do-49SRi.png => index/core01.png} | Bin .../{core02-DYE3Nswp.png => index/core02.png} | Bin .../{core03--_bSTplJ.png => index/core03.png} | Bin .../{core04-CgdtwWqu.png => index/core04.png} | Bin .../{dui-4pqhbkyq.png => index/dui.png} | Bin .../{func01-jNIM7hjY.png => index/func01.png} | Bin .../{func02-Bnh0ZuN5.png => index/func02.png} | Bin .../{func03-DYYDzlwQ.png => index/func03.png} | Bin .../{func04-D80yO0ne.png => index/func04.png} | Bin .../logo-dts-ibi.png} | Bin .../{scen01-Df1_Ba-D.png => index/scen01.png} | Bin .../{scen02-Db38haXK.png => index/scen02.png} | Bin .../{scen03-BMj46DR7.png => index/scen03.png} | Bin assets/images/index/scen04.png | Bin 0 -> 1677 bytes assets/images/index/scen05.png | Bin 0 -> 525 bytes .../{star-D64giDVh.png => index/star.png} | Bin .../images/{ => index}/可信空间技术架构图.png | Bin assets/images/{ => old}/hero.png | Bin assets/images/{ => old}/使能数据交易.png | Bin assets/images/{ => old}/政企联合风控.png | Bin assets/images/{ => old}/政务数据.png | Bin assets/images/{ => old}/金融联合营销.png | Bin assets/js/components.js | 16 - assets/js/header.js | 41 + assets/js/index/index.js | 255 ++++ assets/js/landing.js | 55 + assets/js/main.js | 222 ++++ assets/js/script.js | 165 --- components/header/header.html | 105 +- index.html | 387 +----- pages/mods/mod4-ops/data-market.html | 104 +- pages/{ => old}/data-access.html | 0 pages/{ => old}/data-scenarios.html | 0 pages/{ => old}/data-visualization.html | 0 pages/{ => old}/data-wallet.html | 0 pages/{ => old}/enterprise-wallet.html | 0 index-old.html => pages/old/index-old.html | 0 pages/{ => old}/landing.html | 0 pages/{ => old}/scenario-medical.html | 0 pages/scene/scenario-supply-chain-bi.html | 1164 +++++++++++++++++ pages/{ => sys}/system-config.html | 25 +- 55 files changed, 2677 insertions(+), 880 deletions(-) create mode 100644 assets/css/components/footer.css create mode 100644 assets/css/components/header.css create mode 100644 assets/css/pages/bi-dashboard.css create mode 100644 assets/css/pages/index.css create mode 100644 assets/css/pages/mods/mod4-ops/doc-menu.css delete mode 100644 assets/css/styles.css rename assets/images/{ => components}/GX-Logo.png (100%) rename assets/images/{advantage01-L-h3D4Gk.png => index/advantage01.png} (100%) rename assets/images/{advantage02-Bpq5Upb5.png => index/advantage02.png} (100%) rename assets/images/{advantage03-DVKweE-q.png => index/advantage03.png} (100%) rename assets/images/{advantage04-CVJa6acV.png => index/advantage04.png} (100%) rename assets/images/{application-XgafJxIK.png => index/application.png} (100%) rename assets/images/{banner-6yKP_oUz.png => index/banner.png} (100%) rename assets/images/{core01-Do-49SRi.png => index/core01.png} (100%) rename assets/images/{core02-DYE3Nswp.png => index/core02.png} (100%) rename assets/images/{core03--_bSTplJ.png => index/core03.png} (100%) rename assets/images/{core04-CgdtwWqu.png => index/core04.png} (100%) rename assets/images/{dui-4pqhbkyq.png => index/dui.png} (100%) rename assets/images/{func01-jNIM7hjY.png => index/func01.png} (100%) rename assets/images/{func02-Bnh0ZuN5.png => index/func02.png} (100%) rename assets/images/{func03-DYYDzlwQ.png => index/func03.png} (100%) rename assets/images/{func04-D80yO0ne.png => index/func04.png} (100%) rename assets/images/{logo-new-BAvcg2T4.png => index/logo-dts-ibi.png} (100%) rename assets/images/{scen01-Df1_Ba-D.png => index/scen01.png} (100%) rename assets/images/{scen02-Db38haXK.png => index/scen02.png} (100%) rename assets/images/{scen03-BMj46DR7.png => index/scen03.png} (100%) create mode 100644 assets/images/index/scen04.png create mode 100644 assets/images/index/scen05.png rename assets/images/{star-D64giDVh.png => index/star.png} (100%) rename assets/images/{ => index}/可信空间技术架构图.png (100%) rename assets/images/{ => old}/hero.png (100%) rename assets/images/{ => old}/使能数据交易.png (100%) rename assets/images/{ => old}/政企联合风控.png (100%) rename assets/images/{ => old}/政务数据.png (100%) rename assets/images/{ => old}/金融联合营销.png (100%) delete mode 100644 assets/js/components.js create mode 100644 assets/js/header.js create mode 100644 assets/js/index/index.js create mode 100644 assets/js/main.js delete mode 100644 assets/js/script.js rename pages/{ => old}/data-access.html (100%) rename pages/{ => old}/data-scenarios.html (100%) rename pages/{ => old}/data-visualization.html (100%) rename pages/{ => old}/data-wallet.html (100%) rename pages/{ => old}/enterprise-wallet.html (100%) rename index-old.html => pages/old/index-old.html (100%) rename pages/{ => old}/landing.html (100%) rename pages/{ => old}/scenario-medical.html (100%) create mode 100644 pages/scene/scenario-supply-chain-bi.html rename pages/{ => sys}/system-config.html (98%) diff --git a/assets/css/components/footer.css b/assets/css/components/footer.css new file mode 100644 index 0000000..e619918 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/css/components/header.css b/assets/css/components/header.css new file mode 100644 index 0000000..934363a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/css/pages/bi-dashboard.css b/assets/css/pages/bi-dashboard.css new file mode 100644 index 0000000..1d155e3 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/assets/css/pages/index.css b/assets/css/pages/index.css new file mode 100644 index 0000000..227c3e5 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/css/pages/mods/mod4-ops/doc-menu.css b/assets/css/pages/mods/mod4-ops/doc-menu.css new file mode 100644 index 0000000..6a859b4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index 537265d..851c49a 100644 --- a/assets/css/style.css +++ b/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); - } -} \ No newline at end of file +/* 进度步骤样式 */ +.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; +} \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css deleted file mode 100644 index b77c86d..0000000 --- a/assets/css/styles.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/assets/images/GX-Logo.png b/assets/images/components/GX-Logo.png similarity index 100% rename from assets/images/GX-Logo.png rename to assets/images/components/GX-Logo.png diff --git a/assets/images/advantage01-L-h3D4Gk.png b/assets/images/index/advantage01.png similarity index 100% rename from assets/images/advantage01-L-h3D4Gk.png rename to assets/images/index/advantage01.png diff --git a/assets/images/advantage02-Bpq5Upb5.png b/assets/images/index/advantage02.png similarity index 100% rename from assets/images/advantage02-Bpq5Upb5.png rename to assets/images/index/advantage02.png diff --git a/assets/images/advantage03-DVKweE-q.png b/assets/images/index/advantage03.png similarity index 100% rename from assets/images/advantage03-DVKweE-q.png rename to assets/images/index/advantage03.png diff --git a/assets/images/advantage04-CVJa6acV.png b/assets/images/index/advantage04.png similarity index 100% rename from assets/images/advantage04-CVJa6acV.png rename to assets/images/index/advantage04.png diff --git a/assets/images/application-XgafJxIK.png b/assets/images/index/application.png similarity index 100% rename from assets/images/application-XgafJxIK.png rename to assets/images/index/application.png diff --git a/assets/images/banner-6yKP_oUz.png b/assets/images/index/banner.png similarity index 100% rename from assets/images/banner-6yKP_oUz.png rename to assets/images/index/banner.png diff --git a/assets/images/core01-Do-49SRi.png b/assets/images/index/core01.png similarity index 100% rename from assets/images/core01-Do-49SRi.png rename to assets/images/index/core01.png diff --git a/assets/images/core02-DYE3Nswp.png b/assets/images/index/core02.png similarity index 100% rename from assets/images/core02-DYE3Nswp.png rename to assets/images/index/core02.png diff --git a/assets/images/core03--_bSTplJ.png b/assets/images/index/core03.png similarity index 100% rename from assets/images/core03--_bSTplJ.png rename to assets/images/index/core03.png diff --git a/assets/images/core04-CgdtwWqu.png b/assets/images/index/core04.png similarity index 100% rename from assets/images/core04-CgdtwWqu.png rename to assets/images/index/core04.png diff --git a/assets/images/dui-4pqhbkyq.png b/assets/images/index/dui.png similarity index 100% rename from assets/images/dui-4pqhbkyq.png rename to assets/images/index/dui.png diff --git a/assets/images/func01-jNIM7hjY.png b/assets/images/index/func01.png similarity index 100% rename from assets/images/func01-jNIM7hjY.png rename to assets/images/index/func01.png diff --git a/assets/images/func02-Bnh0ZuN5.png b/assets/images/index/func02.png similarity index 100% rename from assets/images/func02-Bnh0ZuN5.png rename to assets/images/index/func02.png diff --git a/assets/images/func03-DYYDzlwQ.png b/assets/images/index/func03.png similarity index 100% rename from assets/images/func03-DYYDzlwQ.png rename to assets/images/index/func03.png diff --git a/assets/images/func04-D80yO0ne.png b/assets/images/index/func04.png similarity index 100% rename from assets/images/func04-D80yO0ne.png rename to assets/images/index/func04.png diff --git a/assets/images/logo-new-BAvcg2T4.png b/assets/images/index/logo-dts-ibi.png similarity index 100% rename from assets/images/logo-new-BAvcg2T4.png rename to assets/images/index/logo-dts-ibi.png diff --git a/assets/images/scen01-Df1_Ba-D.png b/assets/images/index/scen01.png similarity index 100% rename from assets/images/scen01-Df1_Ba-D.png rename to assets/images/index/scen01.png diff --git a/assets/images/scen02-Db38haXK.png b/assets/images/index/scen02.png similarity index 100% rename from assets/images/scen02-Db38haXK.png rename to assets/images/index/scen02.png diff --git a/assets/images/scen03-BMj46DR7.png b/assets/images/index/scen03.png similarity index 100% rename from assets/images/scen03-BMj46DR7.png rename to assets/images/index/scen03.png diff --git a/assets/images/index/scen04.png b/assets/images/index/scen04.png new file mode 100644 index 0000000000000000000000000000000000000000..c25c20ea5e727204987c924d0f4c63bc933c8264 GIT binary patch literal 1677 zcmV;826Fj{P)Px*M@d9MRCr$PTWxGpWfXqSy&W44wz0N@$Y{G_0zslCBy0?VAP58q_>qjLaYhpU zn1~S*;x@+u1XN5Un()UT7$Ev%1_dHSlA%Zpia||`AxPLqw`!2KV;d0m(R+`1yN=wo z_oH;{){T4rzVCb9^E~&w&pGG4Eito%hxj3z06PNgBVcR5L#%hQ?%0XC|1d`F4D`9!F)BoFqCSX}OoFC-wWh$gaOjtVfcCG3cNtRw}pW$mXo0ru` zz}I=bJgP{aG4Xr?IjjI{$BFS_hudFkwI-_x@P=DADBx38AQH!kaH7NMe=(JHSxtZd z;EA+tQd#|62wEzD06On+<*dJm(!NyYXFUM|gh*$71aX$1G6ThownCCCueiMbr2<~e znGggBM@5?J?2ldp!DRrhE0?jj+3jym75s!EpfuEa7{ssXf@Ac`Oq&8FW#}59-+zOoU$n~-EBUA{GMA7q{a3dR{|;#%xw=3oB?=65(uUv#Z%mD%IrIeF3(O{MC94tT6R^q*s zXm@2TL>Aa$v|rj0P<7>s;}`eToeJ?Q#MDI+4t40H9PP%QNLzKhd`$^|d{Pih=Ztba zgQE^P=lQ@4&zU6fbvOXVJ7$}uO~9N;%g4-kOKY5fFXp(WY}2c^y*FD|Da5A?mHR;` z(aa@6O^4HeAaVJsI_y#z4OV8;CSZ2Bxtl=K5;tJr^7I_JN_!ULHM0*UJqi4K*rBTU$O`<3G{A^}SV{wKI8>?@C8$Vu-K<?c~RA7T{x{K$2ZI>3) zm6EC3Rpz~>(ZKl2=Ps!H39h?ZpsVY#UQzH3fRryu(k39D%NqgSm@3-|^9;K*UnDTk zBpQNwQeNft;z$2U0KX;Nu>DQCw4r$h(GYxuH)a%O4JN^5#SrP5Jcw2kH<|lER>VD>QJFgE2+_Wvvuu~vt9Z&1 z#ZgcuY;D?yAFbY;7}vJ7sm#}#Gin3~o6=WnK|?T;D^k#NfLIDim(ER?|I2>beasL6#)qZh^@P18QYrn#(HkkCk^mc zCPy?rS_BL^aipLKZyJeLwt*K;k2V3q=2h8&txbC{tT)d_@R=e&*o{gOYK8j({{ij@n0HcrTEd z!#PG)Z4F3A17a;{7kb9%C1rG*f+7^?^)8mb5LsD^;{cw^sCSt+e&UDy`X6a62@t-C zi%eDxex#6j=SQ{!A!>GqkrDwT^B}ud+XQ6$kEAjkKXwGz5n%sm%Kp>Tr2W%WDgydH X;+BCfth5_000000NkvXXu0mjf$gdY1 literal 0 HcmV?d00001 diff --git a/assets/images/index/scen05.png b/assets/images/index/scen05.png new file mode 100644 index 0000000000000000000000000000000000000000..a8d896bba82b5790fafaec6ee8d9a910c8480157 GIT binary patch literal 525 zcmV+o0`mQdP)Px$$4Nv%RCr$PTS02VP!N6bYxjjL3Jp|plTh#=F1$nCly2-Dy6_-{lA8pDU&tcR zeKq|>q10d?4*w4%_}m&F^Pe+sCU26+IcIRipNIr716TsofGgHOPz2cp*ag@HF75)4 z&zSw}@CG395>AJ5bc6ZF3*Jw0wDH?w7Kvc?1d9lFUWfnxvCUVQo?>a^`xCIlKG5Nh zF!>7O1_8?WB%p->SqUirLzyx@Gk_Uz&Hzh5G74+gs5U+|fEqvzIAee!ND&nH0op39 zjn6K?F2F9}-32z@ZqQ!{4rTt@be6IuRPntv;AmNWV;#U1vZDzWt(KS~zBd6O-Jrf; zi3Xv*1RXLC5+IobLo(kNEKvq%`}WhX?QCDy-g^fJloMm-o7;!R-oaZ0wSD{hs<08l z?Hz2KHuetw1Sq?jF>>Wrz-|q#O0W1M(07Wq5fW$7qHpn@EgHV^Ih;D|o zZEFrf9E3OsaS-YfEy?#9gOI9kpHxLK{DUj>8K<33w2Hcb_Fmv%iS6oo9l#Z`V`CP< zEip;@4dq%<1`Op;k~m2K_X2_^L?o#-lxtZ6ECH4PUz)o3rKzC^n 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; - }); -}); \ No newline at end of file diff --git a/assets/js/header.js b/assets/js/header.js new file mode 100644 index 0000000..c21bb1b --- /dev/null +++ b/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); + }); + }); + }); + } +}); \ No newline at end of file diff --git a/assets/js/index/index.js b/assets/js/index/index.js new file mode 100644 index 0000000..9d03d64 --- /dev/null +++ b/assets/js/index/index.js @@ -0,0 +1,255 @@ +// 核心技术内容配置 +const techContents = { + '数据沙箱': { + image: './assets/images/index/core01.png', + content: ` +
+ 数据沙箱 +
+
技术价值
+

实现数据可用不可见，保障数据在流通过程中的安全可信。

+
+
+
+
+
技术价值
+

数据沙箱技术是一种安全的数据使用环境，通过构建独立的计算空间，允许数据需求方在不接触原始数据的情况下完成数据分析和计算任务。该技术集成了数据脱敏、访问控制、安全审计等多重保护机制，确保数据在流通和使用过程中的安全性。同时，通过提供标准化的数据服务接口，支持多样化的数据应用场景，实现数据价值的安全释放。

+
+
+
技术优势
+
    +
  • 安全性高：采用多层安全防护架构，包括身份认证、权限控制、数据加密等措施，从多个维度保障数据安全
    • +
  • 场景丰富：支持数据分析、机器学习、统计建模等多种计算场景，满足不同行业的数据应用需求
    • +
  • 易于管理：提供完整的管理功能，包括数据接入、权限配置、使用监控、审计追踪等，降低运维管理成本
    • +
  • 性能优异：通过优化的计算引擎和资源调度机制，确保数据处理的高效性，支持大规模数据分析需求
    • +
+
+
+ ` + }, + '数据抽样': { + image: './assets/images/index/core02.png', + content: ` +
+ 数据抽样 +
+
技术价值
+

确保数据采样的科学性和代表性，提供高效可靠的数据获取方法。

+
+
+
+
+
技术价值
+

数据抽样技术是一种从大规模数据集中提取代表性样本的科学方法，通过系统化的抽样策略和质量控制机制，确保抽取的数据样本能够准确反映整体数据特征。该技术融合了统计学原理和计算优化算法，支持多种抽样方法，包括随机抽样、分层抽样、配额抽样等，并通过智能化的参数调优和样本验证，保证抽样结果的可靠性和实用价值。

+
+
+
技术优势
+
    +
  • 科学准确：基于严谨的统计学理论，通过多种抽样方法和验证机制，确保样本的代表性和可信度
    • +
  • 灵活高效：支持多种抽样策略，可根据不同场景需求灵活配置抽样参数，显著提升数据获取效率
    • +
  • 成本优化：通过合理的样本量设计和优化算法，在保证数据质量的同时，有效降低数据处理成本
    • +
  • 易于集成：提供标准化的接口和服务，可无缝集成到现有数据处理流程中，支持自动化操作
    • +
+
+
+ ` + }, + '数据脱敏': { + image: './assets/images/index/core03.png', + content: ` +
+ 数据脱敏 +
+
技术价值
+

在保护敏感信息的同时保持数据可用性，实现数据安全共享和分析利用。

+
+
+
+
+
技术价值
+

数据脱敏技术是一种信息安全保护方法，通过对敏感数据进行变形、替换、加密等处理，在确保数据分析价值的同时有效保护隐私信息。该技术包含静态脱敏和动态脱敏两大类，支持字符遮蔽、数据替换、格式保留加密等多种脱敏策略，并通过智能规则引擎实现数据的精准识别和安全转换，广泛应用于金融、医疗、政务等领域的数据安全流通场景。

+
+
+
技术优势
+
    +
  • 安全可控：采用多层级脱敏策略，支持字段级、记录级的精细化控制，确保敏感信息得到全面保护
    • +
  • 业务友好：在实现隐私保护的同时保持数据的业务价值，支持多种格式保留脱敏方法，便于后续分析利用
    • +
  • 性能卓越：通过优化的脱敏算法和并行处理机制，支持海量数据的高效处理，满足实时业务需求
    • +
  • 灵活扩展：提供丰富的脱敏规则配置选项，可根据不同场景快速定制脱敏方案，适应各类业务需求
    • +
+
+
+ ` + }, + '多方安全计算': { + image: './assets/images/index/core04.png', + content: ` +
+ 多方安全计算 +
+
技术价值
+

实现多个参与方在不泄露原始数据的前提下进行联合数据计算和分析。

+
+
+
+
+
技术价值
+

多方安全计算是一种先进的密码学技术，允许多个数据持有方在保护各自数据隐私的前提下完成联合计算任务。该技术融合了秘密分享、混淆电路、同态加密等密码学方法，通过构建安全的计算协议，确保计算过程中各方只能获得最终结果，无法获取其他参与方的原始数据。广泛应用于跨机构数据分析、联合风控、隐私计算等场景，是数据安全流通的核心支撑技术。

+
+
+
技术优势
+
    +
  • 隐私保护：基于严格的密码学协议，确保计算过程中各方数据不出域、不泄露，从根本上解决数据安全问题
    • +
  • 结果可信：采用安全的多方计算协议，保证计算结果的准确性和可验证性，支持公平计算
    • +
  • 场景丰富：支持多种基础运算和高级分析功能，可用于联合建模、统计分析、特征计算等多种业务场景
    • +
  • 可扩展性：支持两方到多方的安全计算场景，并可通过分布式计算提升性能，满足大规模数据计算需求
    • +
+
+
+ ` + } +}; + +// 技术演示链接配置 +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 = ` +
+
×
+ +
+ `; + 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'; + }); + } +}); \ No newline at end of file diff --git a/assets/js/landing.js b/assets/js/landing.js index 5b5d87b..1c266dc 100644 --- a/assets/js/landing.js +++ b/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(); + } + }); }); \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..94c94bf --- /dev/null +++ b/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: ` +
+ + +
支持的格式：CSV, Excel, JSON
+
+ `, + api: ` +
+ + +
+
+ + +
+ + `, + database: ` +
+ + +
+
+ + +
+ + ` + }; + + return templates[method] || ''; +} + +// 测试连接功能 +window.testConnection = function() { + const btn = event.target; + const originalText = btn.textContent; + btn.disabled = true; + btn.innerHTML = ' 测试中...'; + + setTimeout(() => { + btn.disabled = false; + btn.textContent = originalText; + alert('连接测试成功！'); + }, 2000); +}; \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js deleted file mode 100644 index 1202749..0000000 --- a/assets/js/script.js +++ /dev/null @@ -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 = ` -
- - -
支持的格式：CSV, Excel, JSON
-
- `; - } else if (method === 'api') { - accessMethodForms.innerHTML = ` -
- - -
-
- - -
- - `; - } else if (method === 'database') { - accessMethodForms.innerHTML = ` -
- - -
-
- - -
- - `; - } - }); - - // 测试连接 - window.testConnection = function() { - // 显示加载状态 - const btn = event.target; - const originalText = btn.textContent; - btn.disabled = true; - btn.innerHTML = ' 测试中...'; - - // 模拟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(); -}); \ No newline at end of file diff --git a/components/header/header.html b/components/header/header.html index 8bcf180..bb1fef3 100644 --- a/components/header/header.html +++ b/components/header/header.html @@ -2,44 +2,101 @@
- logo + logo 可信数据空间
-
-
+
+
文档资料
-
+
+
+ + + 产品说明手册 + +
- 可信数据空间管理员手册 + + 系统管理员手册 -
- 数据管理员使用手册 + + 数据管理员手册 - -
-
- - 产品手册 - -
-
\ No newline at end of file +
+ + \ No newline at end of file diff --git a/index.html b/index.html index de4193d..5d0f923 100644 --- a/index.html +++ b/index.html @@ -4,56 +4,19 @@ 数据资产 + + + + + + + - -
-
- -
- logo - 可信数据空间 -
- -
-
- - 文档资料 -
-
-
- - 可信数据空间管理员手册 - - -
-
- - 数据管理员使用手册 - - -
-
- - 产品手册 - - -
-
-
-
-
+ +