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 0000000..c25c20e Binary files /dev/null and b/assets/images/index/scen04.png differ diff --git a/assets/images/index/scen05.png b/assets/images/index/scen05.png new file mode 100644 index 0000000..a8d896b Binary files /dev/null and b/assets/images/index/scen05.png differ diff --git a/assets/images/star-D64giDVh.png b/assets/images/index/star.png similarity index 100% rename from assets/images/star-D64giDVh.png rename to assets/images/index/star.png diff --git a/assets/images/可信空间技术架构图.png b/assets/images/index/可信空间技术架构图.png similarity index 100% rename from assets/images/可信空间技术架构图.png rename to assets/images/index/可信空间技术架构图.png diff --git a/assets/images/hero.png b/assets/images/old/hero.png similarity index 100% rename from assets/images/hero.png rename to assets/images/old/hero.png diff --git a/assets/images/使能数据交易.png b/assets/images/old/使能数据交易.png similarity index 100% rename from assets/images/使能数据交易.png rename to assets/images/old/使能数据交易.png diff --git a/assets/images/政企联合风控.png b/assets/images/old/政企联合风控.png similarity index 100% rename from assets/images/政企联合风控.png rename to assets/images/old/政企联合风控.png diff --git a/assets/images/政务数据.png b/assets/images/old/政务数据.png similarity index 100% rename from assets/images/政务数据.png rename to assets/images/old/政务数据.png diff --git a/assets/images/金融联合营销.png b/assets/images/old/金融联合营销.png similarity index 100% rename from assets/images/金融联合营销.png rename to assets/images/old/金融联合营销.png diff --git a/assets/js/components.js b/assets/js/components.js deleted file mode 100644 index 14422fc..0000000 --- a/assets/js/components.js +++ /dev/null @@ -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; - }); -}); \ 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 - 可信数据空间 -
- -
-
- - 文档资料 -
-
-
- - 可信数据空间管理员手册 - - -
-
- - 数据管理员使用手册 - - -
-
- - 产品手册 - - -
-
-
-
-
+ +