feat: 分组显示应用、联系人弹窗、手机端适配、点击复制
- 应用按6个分组显示：人力资源、企业管理、AI应用中心、文创、工具、个人 - 新增SmartResume人岗匹配应用 - AI图标改为联系人图标，弹窗展示高欣/王立刚两张二维码 - Header品牌改为All by AI / all8ai.top - 手机端取消轮播，改为竖向列表 - 帮助弹窗表格点击复制、手机端横向滚动 - 副标题手机端中英文换行 - 轮播按钮裁切修复
This commit is contained in:
selfrelease
+308
-49
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI 智能工作台 - 企业门户</title>
|
||||
<title>AI 应用门户</title>
|
||||
<meta name="description" content="企业 AI Agent 统一门户，一站式访问所有智能应用" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
@@ -203,6 +203,14 @@
|
||||
}
|
||||
.carousel-wrapper {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
padding: 0 2.5rem;
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.carousel-wrapper { padding: 0 2rem; }
|
||||
}
|
||||
.carousel-viewport {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -211,23 +219,46 @@
|
||||
width: 100%;
|
||||
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.group-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
color: oklch(0.72 0.04 260);
|
||||
padding: 0.5rem 0 0.25rem;
|
||||
border-bottom: 1px solid oklch(0.25 0.02 265 / 0.4);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.carousel-page {
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: 220px;
|
||||
align-content: start;
|
||||
gap: 1rem;
|
||||
display: block;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.carousel-page { grid-template-columns: repeat(2, 1fr); }
|
||||
.carousel-wrapper { display: none; }
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.carousel-page { grid-template-columns: 1fr; }
|
||||
}
|
||||
/* 手机端竖向列表 */
|
||||
.mobile-app-list { display: none; }
|
||||
@media (max-width: 768px) {
|
||||
.mobile-app-list { display: block; }
|
||||
}
|
||||
.mobile-group-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
color: oklch(0.72 0.04 260);
|
||||
padding: 0.75rem 0 0.25rem;
|
||||
border-bottom: 1px solid oklch(0.25 0.02 265 / 0.4);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.mobile-app-list .portal-card {
|
||||
margin-bottom: 0.75rem;
|
||||
height: auto;
|
||||
min-height: 120px;
|
||||
}
|
||||
.carousel-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -254,8 +285,8 @@
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.carousel-btn.prev { left: -0.75rem; }
|
||||
.carousel-btn.next { right: -0.75rem; }
|
||||
.carousel-btn.prev { left: 0; }
|
||||
.carousel-btn.next { right: 0; }
|
||||
.carousel-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -277,6 +308,23 @@
|
||||
width: 1.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.contact-section {
|
||||
border: 1px solid oklch(0.3 0.03 265 / 0.5);
|
||||
background: linear-gradient(145deg, oklch(0.17 0.02 265 / 0.92), oklch(0.13 0.012 260 / 0.88));
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 18px 48px oklch(0 0 0 / 0.3), inset 0 1px 0 oklch(0.35 0.03 265 / 0.35);
|
||||
}
|
||||
.contact-qr {
|
||||
border-radius: 0.625rem;
|
||||
border: 2px solid oklch(0.35 0.04 265 / 0.6);
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.contact-qr { width: 110px !important; height: 150px !important; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-subtitle { white-space: normal !important; }
|
||||
.hero-subtitle .sep { display: block; height: 0.25rem; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
@@ -309,6 +357,10 @@
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.help-overlay { padding: 0.5rem; }
|
||||
.help-modal { max-width: 100% !important; border-radius: 0.75rem; }
|
||||
}
|
||||
.help-overlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
@@ -317,7 +369,7 @@
|
||||
background: oklch(0.13 0.015 260 / 0.98);
|
||||
border: 1px solid oklch(0.3 0.03 265 / 0.55);
|
||||
box-shadow: 0 30px 80px oklch(0 0 0 / 0.5);
|
||||
max-width: 52rem;
|
||||
max-width: 64rem;
|
||||
width: 100%;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
@@ -342,6 +394,10 @@
|
||||
border-collapse: collapse;
|
||||
font-size: 11px;
|
||||
}
|
||||
.help-table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.help-table th {
|
||||
background: oklch(0.15 0.015 260 / 0.6);
|
||||
color: oklch(0.7 0.02 260);
|
||||
@@ -356,6 +412,21 @@
|
||||
border-bottom: 1px solid oklch(0.2 0.015 265 / 0.3);
|
||||
color: oklch(0.8 0.01 260);
|
||||
}
|
||||
.help-table td.copy-cell {
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease, background 0.2s ease;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.help-table td.copy-cell:hover {
|
||||
color: oklch(0.9 0.05 260);
|
||||
background: oklch(0.2 0.03 265 / 0.4);
|
||||
}
|
||||
.help-table td.copy-cell:active {
|
||||
background: oklch(0.25 0.04 265 / 0.5);
|
||||
}
|
||||
.copy-feedback {
|
||||
color: oklch(0.72 0.18 150) !important;
|
||||
}
|
||||
.help-table tr:last-child td { border-bottom: none; }
|
||||
.aurora-paused {
|
||||
animation-play-state: paused !important;
|
||||
@@ -387,21 +458,21 @@
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l7.5 4.25v8.5L12 20l-7.5-4.25v-8.5L12 3z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 9.2L12 7.25l3.5 1.95v3.6L12 14.75l-3.5-1.95v-3.6z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-extrabold tracking-tight text-slate-100">AI 智能工作台 <span class="text-slate-500 font-medium">/ AI Workspace</span></div>
|
||||
<div class="text-[9px] uppercase tracking-[0.22em] text-slate-500 leading-none hidden sm:block">Enterprise Portal</div>
|
||||
<div class="text-xs font-extrabold tracking-tight text-slate-100">All by AI</div>
|
||||
<div class="text-[9px] uppercase tracking-[0.22em] text-slate-500 leading-none hidden sm:block">all8ai.top</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="hidden md:inline-flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1 text-[11px] font-semibold text-slate-400 ring-1 ring-white/10">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400 shadow-[0_0_12px_oklch(0.72_0.18_150)]"></span>
|
||||
14 个智能应用在线 / 14 Apps Online
|
||||
20 个智能应用在线 / 20 Apps Online
|
||||
</span>
|
||||
<button class="help-btn w-7 h-7 rounded-full flex items-center justify-center" onclick="toggleHelpModal(true)" aria-label="帮助 / Help">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18v-3"/><circle cx="12" cy="12" r="9"/><path d="M8.5 8.5a3.5 3.5 0 1 1 5 3c-1 .5-1.5 1-1.5 2"/></svg>
|
||||
</button>
|
||||
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-white text-[10px] font-bold shadow-lg">
|
||||
AI
|
||||
</div>
|
||||
<button class="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-white shadow-lg cursor-pointer hover:ring-2 hover:ring-violet-400/50 transition-all" onclick="toggleContactModal(true)" aria-label="联系方式 / Contact">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"/><circle cx="9.5" cy="7" r="4"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 11h4M19 9v4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -414,8 +485,8 @@
|
||||
<h1 class="text-xl md:text-2xl font-extrabold tracking-tight mb-1">
|
||||
<span class="gradient-text">AI 智能应用中心 / AI Application Hub</span>
|
||||
</h1>
|
||||
<p class="text-slate-500 text-[11px] md:text-xs max-w-xl mx-auto leading-relaxed">
|
||||
一站式访问所有智能应用，让 AI 赋能企业每一个环节 · One-stop access to all AI apps, empowering every business workflow
|
||||
<p class="hero-subtitle text-slate-500 text-[10px] md:text-xs mx-auto leading-relaxed whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
一站式访问所有智能应用，让 AI 赋能企业每一个环节<span class="sep"> · </span>One-stop access to all AI apps, empowering every business workflow
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -424,16 +495,21 @@
|
||||
<button class="carousel-btn prev" id="carouselPrev" aria-label="上一页 / Previous" onclick="changePage(-1)">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 18l-6-6 6-6"/></svg>
|
||||
</button>
|
||||
<div class="carousel-viewport">
|
||||
<div class="carousel-track" id="carouselTrack"></div>
|
||||
</div>
|
||||
<button class="carousel-btn next" id="carouselNext" aria-label="下一页 / Next" onclick="changePage(1)">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 18l6-6-6-6"/></svg>
|
||||
</button>
|
||||
<div class="carousel-dots" id="carouselDots"></div>
|
||||
</section>
|
||||
|
||||
<!-- Mobile App List -->
|
||||
<section class="mobile-app-list" id="mobileAppList"></section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="mt-10 pt-5 border-t border-white/10 text-center text-[11px] text-slate-500">
|
||||
<p>© 2026 AI 智能工作台 · AI Workspace · Enterprise AI Portal</p>
|
||||
<p>© 2026 AI 应用门户 · AI Application Portal</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
@@ -450,6 +526,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Modal -->
|
||||
<div class="help-overlay" id="contactOverlay" onclick="if(event.target===this)toggleContactModal(false)">
|
||||
<div class="help-modal p-4 md:p-6" style="max-width: 28rem;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-base font-extrabold text-slate-100">联系方式 / Contact</h2>
|
||||
<button class="help-btn w-7 h-7 rounded-full flex items-center justify-center" onclick="toggleContactModal(false)" aria-label="关闭 / Close">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l12 12M6 18L18 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-row items-start justify-center gap-3 md:gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<img src="gx.jpg" alt="高欣 / Sidney" class="contact-qr bg-white" style="width: 130px; height: 180px; object-fit: contain;" />
|
||||
<p class="text-[10px] text-slate-400">高欣 / Sidney</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<img src="wlg1.jpg" alt="王立刚 / Wang Ligang" class="contact-qr bg-white" style="width: 130px; height: 180px; object-fit: contain;" />
|
||||
<p class="text-[10px] text-slate-400">王立刚 / Wang Ligang</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const iconPaths = {
|
||||
chart: '<path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 16v-5"/><path d="M12 16V8"/><path d="M16 16v-8"/>',
|
||||
@@ -463,7 +561,10 @@
|
||||
landmark: '<path d="M3 21h18"/><path d="M5 10h14"/><path d="M6 10v8"/><path d="M10 10v8"/><path d="M14 10v8"/><path d="M18 10v8"/><path d="M4 10l8-6 8 6"/>'
|
||||
};
|
||||
|
||||
const apps = [
|
||||
const appGroups = [
|
||||
{
|
||||
title: '人力资源 / Human Resources',
|
||||
apps: [
|
||||
{
|
||||
name: 'TalentMatrix',
|
||||
subtitle: '绩效管理 / Performance',
|
||||
@@ -534,6 +635,31 @@
|
||||
accent2: 'oklch(0.69 0.16 235)',
|
||||
tag: '劳资 / Labor'
|
||||
},
|
||||
{
|
||||
name: '技能人才胜任力',
|
||||
subtitle: '技能胜任力评估 / Skills Assessment',
|
||||
desc: '技能人才胜任力评估系统，科学测评技能水平 · Technical skill competency assessment system',
|
||||
url: 'https://lianxingtest.feihec.com/',
|
||||
icon: 'clipboard',
|
||||
accent: 'oklch(0.58 0.18 210)',
|
||||
accent2: 'oklch(0.65 0.16 235)',
|
||||
tag: '技能 / Skills'
|
||||
},
|
||||
{
|
||||
name: 'SmartResume',
|
||||
subtitle: '人岗匹配 / Resume-Job Matching',
|
||||
desc: '智能人岗匹配系统，精准对接简历与岗位 · Smart resume-to-job matching system for precise talent positioning',
|
||||
url: 'http://62.234.107.180:9005/',
|
||||
icon: 'search',
|
||||
accent: 'oklch(0.6 0.2 145)',
|
||||
accent2: 'oklch(0.68 0.16 170)',
|
||||
tag: '匹配 / Match'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '企业管理 / Enterprise Management',
|
||||
apps: [
|
||||
{
|
||||
name: '项目风险管控 / Risk Control',
|
||||
subtitle: '风险管理系统 / Risk Management',
|
||||
@@ -544,16 +670,6 @@
|
||||
accent2: 'oklch(0.69 0.18 55)',
|
||||
tag: '风控 / Risk'
|
||||
},
|
||||
{
|
||||
name: '政务AI应用中心 / Gov AI Hub',
|
||||
subtitle: '政务智能服务 / Gov AI Services',
|
||||
desc: '政务场景 AI 应用统一入口与服务中心 · Unified portal for government AI applications and services',
|
||||
url: 'https://gov.opc8ai.com',
|
||||
icon: 'landmark',
|
||||
accent: 'oklch(0.47 0.07 255)',
|
||||
accent2: 'oklch(0.56 0.08 235)',
|
||||
tag: '政务 / Gov'
|
||||
},
|
||||
{
|
||||
name: 'MaxCount',
|
||||
subtitle: '财务记账 / Finance & Accounting',
|
||||
@@ -573,16 +689,21 @@
|
||||
accent: 'oklch(0.55 0.16 30)',
|
||||
accent2: 'oklch(0.62 0.14 55)',
|
||||
tag: '法律 / Legal'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '技能人才胜任力',
|
||||
subtitle: '技能胜任力评估 / Skills Assessment',
|
||||
desc: '技能人才胜任力评估系统，科学测评技能水平 · Technical skill competency assessment system',
|
||||
url: 'https://lianxingtest.feihec.com/',
|
||||
icon: 'clipboard',
|
||||
accent: 'oklch(0.58 0.18 210)',
|
||||
accent2: 'oklch(0.65 0.16 235)',
|
||||
tag: '技能 / Skills'
|
||||
title: 'AI应用中心 / AI Application Center',
|
||||
apps: [
|
||||
{
|
||||
name: '政务AI应用中心 / Gov AI Hub',
|
||||
subtitle: '政务智能服务 / Gov AI Services',
|
||||
desc: '政务场景 AI 应用统一入口与服务中心 · Unified portal for government AI applications and services',
|
||||
url: 'https://gov.opc8ai.com',
|
||||
icon: 'landmark',
|
||||
accent: 'oklch(0.47 0.07 255)',
|
||||
accent2: 'oklch(0.56 0.08 235)',
|
||||
tag: '政务 / Gov'
|
||||
},
|
||||
{
|
||||
name: 'K12AI应用中心 / K12 AI Hub',
|
||||
@@ -604,12 +725,78 @@
|
||||
accent2: 'oklch(0.65 0.16 225)',
|
||||
tag: '医学 / Med'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '文创 / Culture & Creative',
|
||||
apps: [
|
||||
{
|
||||
name: '故宫雅游 / Palace Tour',
|
||||
subtitle: '故宫文化探索 / Forbidden City Culture',
|
||||
desc: '故宫文化智能游览平台，沉浸式探索历史瑰宝 · Intelligent palace culture tour platform for immersive exploration',
|
||||
url: 'https://gg.all8ai.top/',
|
||||
icon: 'landmark',
|
||||
accent: 'oklch(0.55 0.15 25)',
|
||||
accent2: 'oklch(0.62 0.13 50)',
|
||||
tag: '文创 / Culture'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '工具 / Tools',
|
||||
apps: [
|
||||
{
|
||||
name: 'Markdown 编辑 / Markdown Editor',
|
||||
subtitle: '在线 Markdown 编辑器 / Online Markdown Editor',
|
||||
desc: '轻量级在线 Markdown 编辑器，实时预览与导出 · Lightweight online Markdown editor with live preview and export',
|
||||
url: 'https://mdedit.all8ai.top/',
|
||||
icon: 'clipboard',
|
||||
accent: 'oklch(0.58 0.16 200)',
|
||||
accent2: 'oklch(0.65 0.14 225)',
|
||||
tag: '工具 / Tool'
|
||||
},
|
||||
{
|
||||
name: 'SVG 编辑 / SVG Editor',
|
||||
subtitle: '在线 SVG 编辑器 / Online SVG Editor',
|
||||
desc: '在线 SVG 矢量图编辑工具，轻松创作与编辑 · Online SVG vector editor for easy creation and editing',
|
||||
url: 'https://svgedit.all8ai.top/',
|
||||
icon: 'chart',
|
||||
accent: 'oklch(0.6 0.18 160)',
|
||||
accent2: 'oklch(0.66 0.16 190)',
|
||||
tag: '工具 / Tool'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '个人 / Personal',
|
||||
apps: [
|
||||
{
|
||||
name: '八字系统 / BaZi System',
|
||||
subtitle: '传统命理分析 / Traditional Fortune Analysis',
|
||||
desc: '传统八字命理智能分析系统 · Traditional BaZi fortune analysis system',
|
||||
url: 'https://wnote.top',
|
||||
icon: 'brain',
|
||||
accent: 'oklch(0.56 0.2 290)',
|
||||
accent2: 'oklch(0.64 0.18 315)',
|
||||
tag: '命理 / Fortune'
|
||||
},
|
||||
{
|
||||
name: '对话交流 / Chat',
|
||||
subtitle: 'AI 对话平台 / AI Chat Platform',
|
||||
desc: '智能对话交流平台，随时与 AI 互动 · Intelligent chat platform for AI interaction anytime',
|
||||
url: 'https://y.all8ai.top',
|
||||
icon: 'search',
|
||||
accent: 'oklch(0.6 0.2 255)',
|
||||
accent2: 'oklch(0.68 0.16 235)',
|
||||
tag: '对话 / Chat'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const grid = document.getElementById('carouselTrack');
|
||||
const PAGE_SIZE = 9;
|
||||
let currentPage = 0;
|
||||
const totalPages = Math.ceil(apps.length / PAGE_SIZE);
|
||||
const totalPages = appGroups.length;
|
||||
|
||||
/**
|
||||
* 生成统一的专业线性 SVG 图标，保持门户卡片视觉一致性。
|
||||
@@ -694,20 +881,45 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染分页轮播，每页最多9个应用卡片。
|
||||
* 渲染手机端竖向列表，所有分组和应用平铺。
|
||||
*/
|
||||
function renderMobileList() {
|
||||
const container = document.getElementById('mobileAppList');
|
||||
container.innerHTML = '';
|
||||
appGroups.forEach((group) => {
|
||||
const titleEl = document.createElement('div');
|
||||
titleEl.className = 'mobile-group-title';
|
||||
titleEl.textContent = group.title;
|
||||
container.appendChild(titleEl);
|
||||
group.apps.forEach((app, i) => {
|
||||
container.appendChild(createAppCard(app, i));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染分页轮播，每组一页，带分组标题。
|
||||
*/
|
||||
function renderCarousel() {
|
||||
grid.innerHTML = '';
|
||||
for (let p = 0; p < totalPages; p++) {
|
||||
appGroups.forEach((group) => {
|
||||
const pageDiv = document.createElement('div');
|
||||
pageDiv.className = 'carousel-page';
|
||||
const start = p * PAGE_SIZE;
|
||||
const pageApps = apps.slice(start, start + PAGE_SIZE);
|
||||
pageApps.forEach((app, i) => {
|
||||
pageDiv.appendChild(createAppCard(app, i));
|
||||
pageDiv.style.display = 'block';
|
||||
const titleEl = document.createElement('div');
|
||||
titleEl.className = 'group-title';
|
||||
titleEl.textContent = group.title;
|
||||
pageDiv.appendChild(titleEl);
|
||||
const innerGrid = document.createElement('div');
|
||||
innerGrid.style.display = 'grid';
|
||||
innerGrid.style.gridTemplateColumns = 'repeat(3, 1fr)';
|
||||
innerGrid.style.gap = '1rem';
|
||||
group.apps.forEach((app, i) => {
|
||||
innerGrid.appendChild(createAppCard(app, i));
|
||||
});
|
||||
pageDiv.appendChild(innerGrid);
|
||||
grid.appendChild(pageDiv);
|
||||
}
|
||||
});
|
||||
renderDots();
|
||||
updateCarousel();
|
||||
}
|
||||
@@ -758,6 +970,7 @@
|
||||
}
|
||||
|
||||
renderCarousel();
|
||||
renderMobileList();
|
||||
|
||||
/**
|
||||
* 帮助弹窗的测试账号数据，中英双语展示。
|
||||
@@ -826,6 +1039,16 @@
|
||||
type: 'text',
|
||||
content: '用户可注册测试 / Users can self-register for testing'
|
||||
},
|
||||
{
|
||||
title: 'SmartResume',
|
||||
subtitle: '人岗匹配 / Resume-Job Matching',
|
||||
url: 'http://62.234.107.180:9005/',
|
||||
type: 'table',
|
||||
headers: ['账号 / Account', '密码 / Password'],
|
||||
rows: [
|
||||
['freedak@163.com', '123456']
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '项目风险管控 / Risk Control',
|
||||
subtitle: '风险管理系统 / Risk Management System',
|
||||
@@ -899,9 +1122,11 @@
|
||||
if (item.type === 'table') {
|
||||
const thead = item.headers.map(h => `<th>${h}</th>`).join('');
|
||||
const tbody = item.rows.map(r =>
|
||||
`<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`
|
||||
`<tr>${r.map(c => `<td class="copy-cell" onclick="copyToClipboard(this,'${c.replace(/'/g,"\\'")}')">${c}</td>`).join('')}</tr>`
|
||||
).join('');
|
||||
bodyHtml = `<table class="help-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
|
||||
bodyHtml = `<div class="help-table-wrap"><table class="help-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table></div>`;
|
||||
} else if (item.type === 'image') {
|
||||
bodyHtml = `<div class="flex flex-col items-center gap-2 py-2"><img src="${item.image}" alt="${item.title}" class="contact-qr" /><p class="text-[11px] text-slate-400">${item.content}</p></div>`;
|
||||
} else {
|
||||
bodyHtml = `<p class="text-[11px] text-slate-400 px-3 py-2">${item.content}</p>`;
|
||||
}
|
||||
@@ -920,6 +1145,21 @@
|
||||
}).join('');
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击复制单元格内容到剪贴板，并显示复制成功反馈。
|
||||
*/
|
||||
function copyToClipboard(td, text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const orig = td.textContent;
|
||||
td.classList.add('copy-feedback');
|
||||
td.textContent = '已复制 / Copied!';
|
||||
setTimeout(() => {
|
||||
td.classList.remove('copy-feedback');
|
||||
td.textContent = orig;
|
||||
}, 1200);
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开或关闭帮助弹窗。
|
||||
*/
|
||||
@@ -941,8 +1181,27 @@
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') toggleHelpModal(false);
|
||||
if (e.key === 'Escape') { toggleHelpModal(false); toggleContactModal(false); }
|
||||
});
|
||||
|
||||
/**
|
||||
* 打开或关闭联系方式弹窗。
|
||||
*/
|
||||
function toggleContactModal(show) {
|
||||
const overlay = document.getElementById('contactOverlay');
|
||||
const aurora = document.querySelector('.aurora');
|
||||
if (show) {
|
||||
overlay.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
if (aurora) aurora.classList.add('aurora-paused');
|
||||
document.body.classList.add('gpu-off');
|
||||
} else {
|
||||
overlay.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
if (aurora) aurora.classList.remove('aurora-paused');
|
||||
document.body.classList.remove('gpu-off');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user