diff --git a/index.html b/index.html index 795cb39..78b80fa 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,218 @@ + - + + -
+
-
-
@@ -1271,81 +963,20 @@
-
+
- -
-
- - 20 个智能应用已上线 -
-

- All by AI -

-

- 以边缘算力硬件为底座、HR AI全链路为核心的企业AI服务供应商
- 为国企、政府及企事业单位提供"数据不出域"的AI落地解决方案 -

- - -
-
-
- -
-
软硬一体
-
唯一同时具备边缘算力硬件 + AI应用的HR领域供应商
-
-
-
- -
-
垂直深度
-
9个产品覆盖HR全生命周期，竞品只做1-2个单点
-
-
-
- -
-
政府场景
-
GovAI已完成政务场景适配，具备先发优势
-
-
-
- -
-
产品就绪
-
20个AI产品已跑通，可交付的生产级产品
-
-
- -
-
-
20+
-
AI 应用产品
-
-
-
9
-
HR 全链路覆盖
-
-
-
3+
-
行业场景验证
-
-
-
@@ -1354,32 +985,16 @@
-
-
-
- -
-
All by AI
-
企业AI服务供应商
-
-
-
-
-

2026 All by AI. All rights reserved.

-
-
- - 本站已被访问 - -- - 次 -
-
+
+

© 2026 AI 应用门户 · AI Application Portal

+

+ + 本站已被访问 -- 次 +

- +
@@ -1685,39 +1300,80 @@ return `${iconPaths[name]}`; } + /** + * 根据应用链接提取简洁域名，用于卡片底部展示访问来源。 + */ function getHostname(url) { try { - return new URL(url).hostname || '示例'; + return new URL(url).hostname || '示例 / Demo'; } catch (e) { - return '示例'; + return '示例 / Demo'; } } /** - * 渲染单个应用入口卡片 + * 根据鼠标位置更新卡片高光与 3D 倾斜参数。 + */ + function handleCardMove(event) { + const card = event.currentTarget; + if (card._rafId) return; + card._rafId = requestAnimationFrame(() => { + card._rafId = null; + const rect = card.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + const rx = ((y / rect.height) - 0.5) * -7; + const ry = ((x / rect.width) - 0.5) * 7; + card.style.setProperty('--mx', `${x}px`); + card.style.setProperty('--my', `${y}px`); + card.style.setProperty('--rx', `${rx.toFixed(2)}deg`); + card.style.setProperty('--ry', `${ry.toFixed(2)}deg`); + }); + } + + /** + * 鼠标离开时重置卡片 3D 倾斜状态，避免视觉残留。 + */ + function resetCardMove(event) { + const card = event.currentTarget; + card.style.setProperty('--rx', '0deg'); + card.style.setProperty('--ry', '0deg'); + } + + /** + * 渲染单个应用入口卡片，并绑定新窗口跳转和悬浮动效。 */ function createAppCard(app, i) { const card = document.createElement('a'); card.href = app.url; card.target = '_blank'; card.rel = 'noopener noreferrer'; - card.className = 'card animate-fade-in'; - card.style.cssText = `--accent-color: ${app.accent}; --accent-color-2: ${app.accent2}; animation-delay: ${i * 0.06}s;`; + card.className = 'portal-card group rounded-[1.25rem] p-4 flex h-[230px] flex-col animate-fade-in'; + card.style.cssText = `--accent: ${app.accent}; --accent-2: ${app.accent2}; animation-delay: ${i * 0.08}s;`; card.innerHTML = ` -
-
- ${getIcon(app.icon)} +
+
+
+ ${getIcon(app.icon)} +
+ ${app.tag} +
+

${app.name}

+

${app.subtitle}

+

${app.desc}

+
+ ${getHostname(app.url)} + + 进入应用 / Launch + + + +
- ${app.tag} -
-

${app.name}

-

${app.subtitle}

-

${app.desc}

-
- 打开应用 -
`; + card.addEventListener('mousemove', handleCardMove); + card.addEventListener('mouseleave', resetCardMove); return card; } @@ -1747,19 +1403,14 @@ const pageDiv = document.createElement('div'); pageDiv.className = 'carousel-page'; pageDiv.style.display = 'block'; - - // Group header - const headerEl = document.createElement('div'); - headerEl.className = 'group-header'; - headerEl.innerHTML = ` - ${group.title} - - `; - pageDiv.appendChild(headerEl); - - // Cards grid + const titleEl = document.createElement('div'); + titleEl.className = 'group-title'; + titleEl.textContent = group.title; + pageDiv.appendChild(titleEl); const innerGrid = document.createElement('div'); - innerGrid.className = 'grid-cards'; + innerGrid.style.display = 'grid'; + innerGrid.style.gridTemplateColumns = 'repeat(3, 1fr)'; + innerGrid.style.gap = '1rem'; group.apps.forEach((app, i) => { innerGrid.appendChild(createAppCard(app, i)); });