-
-
准备好提升开发效率了吗？
-
立即下载 PHPer，开启高效的 PHP 开发之旅
-
@@ -452,16 +310,16 @@
diff --git a/phper.html b/phper.html
new file mode 100644
index 0000000..0fbf5f5
--- /dev/null
+++ b/phper.html
@@ -0,0 +1,419 @@
+
+
+
+
+
+
+
PHPer - Windows PHP 开发环境管理器
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Windows 专属 · 开源免费
+
+
+ 🐘
+ PHPer
+
+
功能强大的 Windows PHP 开发环境管理器
+
+ 告别繁琐的手动配置，轻松管理
+ PHP、
+ MySQL、
+ Nginx、
+ Redis、
+ Node.js、
+ Python 等服务
+
+
+
+
+ 7+
+ 支持服务
+
+
+
+ 100%
+ 开源免费
+
+
+
+ Win
+ 原生支持
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🐘
+
PHP 多版本管理
+
支持 PHP 8.1 - 8.5 多版本并行，每个版本独立 CGI 进程，一键切换系统默认版本
+
+ - 各版本端口自动分配
+ - 可视化扩展管理
+ - 在线编辑 php.ini
+ - 集成 Composer 管理
+ - PECL 在线安装扩展
+
+
+
+
🐬
+
MySQL 管理
+
支持 MySQL 5.7/8.0，一键安装初始化，密码管理，配置编辑
+
+
+
🌐
+
Nginx 管理
+
多版本切换，站点管理，Laravel 自动配置，SSL 证书申请
+
+
+
🔴
+
Redis 管理
+
Windows 原生版 Redis，服务控制，状态监控，配置编辑
+
+
+
💚
+
Node.js 管理
+
多版本管理，LTS 标识，npm 集成，一键切换
+
+
+
🐍
+
Python 管理
+
嵌入式版本，pip 集成，多版本管理，不污染系统
+
+
+
+
+
+
+
+
+
+
🌍 站点管理
+
可视化创建虚拟主机，自动配置 Nginx，支持 Laravel 项目一键配置
+
+
+
📋 Hosts 管理
+
可视化管理系统 hosts 文件，添加域名自动同步
+
+
+
🚀 开机自启
+
服务开机自动启动，静默模式，无黑窗口闪烁
+
+
+
📊 日志查看
+
统一查看各服务日志，支持刷新、清空、打开目录
+
+
+
+
+
+
+
+
+
+
+
+
+
🐬 MySQL
+
阿里云镜像
+
国内高速下载
+
+
+
+
🔴 Redis
+
GitHub
+
Windows 编译版
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
应用需要管理员权限来：
+
+ - 启动/停止 Windows 服务
+ - 修改系统 hosts 文件
+ - 配置系统环境变量
+
+
+
+
+
+
+
PHP 从 windows.php.net 官方下载，如果速度较慢：
+
+ - 可以手动从官网下载 ZIP 文件
+ - 解压到
[安装目录]/php/php-版本号 目录
+ - 重新打开应用即可识别
+
+
+
+
+
+
+
常见原因：
+
+ - 3306 端口被占用，检查是否有其他 MySQL 实例
+ - 防火墙阻止，添加防火墙规则
+ - 数据目录权限问题，确保目录可写
+
+
+
+
+
+
+
+
+
+
+
🛠️ 技术栈
+
+ Vue 3
+ TypeScript
+ Electron
+ Element Plus
+ Vite
+ Pinia
+
+
+
+
+
+
+
+
+
准备好提升开发效率了吗？
+
立即下载 PHPer，开启高效的 PHP 开发之旅
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
index 3a40cb3..e312d50 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,6 @@
/**
- * PHPer 官网交互脚本
+ * DevTools 官网交互脚本
+ * 支持主页、PHPer、EasyShell 页面
*/
document.addEventListener('DOMContentLoaded', () => {
@@ -9,6 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
initScrollAnimations();
initMobileMenu();
initSmoothScroll();
+ initNavbarScroll();
});
/**
@@ -18,6 +20,8 @@ function initScreenshotTabs() {
const tabs = document.querySelectorAll('.tab-btn');
const images = document.querySelectorAll('.screenshot-img');
+ if (!tabs.length || !images.length) return;
+
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.dataset.tab;
@@ -44,6 +48,8 @@ function initScreenshotTabs() {
function initFAQ() {
const faqItems = document.querySelectorAll('.faq-item');
+ if (!faqItems.length) return;
+
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
@@ -81,11 +87,13 @@ function initScrollAnimations() {
// 观察需要动画的元素
const animatedElements = document.querySelectorAll(
- '.feature-card, .faq-item, .table-row:not(.table-header)'
+ '.feature-card, .faq-item, .table-row:not(.table-header), .product-card, .banner-content, .platform-card, .shortcut-item, .comparison-row'
);
animatedElements.forEach((el, index) => {
- el.style.transitionDelay = `${index * 0.05}s`;
+ // 为每组元素设置递增的延迟
+ const delay = Math.min(index * 0.05, 0.5);
+ el.style.transitionDelay = `${delay}s`;
observer.observe(el);
});
}
@@ -111,6 +119,14 @@ function initMobileMenu() {
navLinks.classList.remove('mobile-open');
});
});
+
+ // 点击页面其他地方关闭菜单
+ document.addEventListener('click', (e) => {
+ if (!menuBtn.contains(e.target) && !navLinks.contains(e.target)) {
+ menuBtn.classList.remove('active');
+ navLinks.classList.remove('mobile-open');
+ }
+ });
}
/**
@@ -138,46 +154,204 @@ function initSmoothScroll() {
/**
* 导航栏滚动效果
*/
-let lastScroll = 0;
-const navbar = document.querySelector('.navbar');
+function initNavbarScroll() {
+ const navbar = document.querySelector('.navbar');
+ if (!navbar) return;
+
+ let lastScroll = 0;
+
+ window.addEventListener('scroll', () => {
+ const currentScroll = window.pageYOffset;
+
+ if (currentScroll > 100) {
+ navbar.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.3)';
+ navbar.style.background = 'rgba(8, 12, 20, 0.95)';
+ } else {
+ navbar.style.boxShadow = 'none';
+ navbar.style.background = 'rgba(8, 12, 20, 0.85)';
+ }
+
+ lastScroll = currentScroll;
+ });
+}
-window.addEventListener('scroll', () => {
- const currentScroll = window.pageYOffset;
+/**
+ * 产品卡片悬停效果增强
+ */
+document.querySelectorAll('.product-card').forEach(card => {
+ card.addEventListener('mouseenter', function() {
+ this.style.transform = 'translateY(-8px)';
+ });
- if (currentScroll > 100) {
- navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
- } else {
- navbar.style.boxShadow = 'none';
- }
-
- lastScroll = currentScroll;
+ card.addEventListener('mouseleave', function() {
+ this.style.transform = 'translateY(0)';
+ });
});
/**
- * 打字机效果（终端提示）
+ * 浮动卡片交互效果
*/
-function typeWriter(element, text, speed = 50) {
- let i = 0;
- element.textContent = '';
+document.querySelectorAll('.float-card').forEach(card => {
+ card.addEventListener('mouseenter', function() {
+ // 暂停动画
+ this.style.animationPlayState = 'paused';
+ });
- function type() {
- if (i < text.length) {
- element.textContent += text.charAt(i);
- i++;
- setTimeout(type, speed);
- }
- }
-
- type();
-}
-
-// 页面加载完成后启动打字机效果
-window.addEventListener('load', () => {
- const promptText = document.querySelector('.prompt-text');
- if (promptText) {
- setTimeout(() => {
- typeWriter(promptText, '所有服务已就绪，开始开发吧！', 80);
- }, 1500);
- }
+ card.addEventListener('mouseleave', function() {
+ // 恢复动画
+ this.style.animationPlayState = 'running';
+ });
});
+/**
+ * 按钮点击波纹效果
+ */
+document.querySelectorAll('.btn').forEach(btn => {
+ btn.addEventListener('click', function(e) {
+ const ripple = document.createElement('span');
+ const rect = this.getBoundingClientRect();
+ const size = Math.max(rect.width, rect.height);
+ const x = e.clientX - rect.left - size / 2;
+ const y = e.clientY - rect.top - size / 2;
+
+ ripple.style.cssText = `
+ position: absolute;
+ width: ${size}px;
+ height: ${size}px;
+ left: ${x}px;
+ top: ${y}px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+ transform: scale(0);
+ animation: ripple 0.6s ease-out;
+ pointer-events: none;
+ `;
+
+ this.style.position = 'relative';
+ this.style.overflow = 'hidden';
+ this.appendChild(ripple);
+
+ setTimeout(() => ripple.remove(), 600);
+ });
+});
+
+// 添加波纹动画样式
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes ripple {
+ to {
+ transform: scale(4);
+ opacity: 0;
+ }
+ }
+`;
+document.head.appendChild(style);
+
+/**
+ * 图片懒加载
+ */
+function initLazyLoad() {
+ const images = document.querySelectorAll('img[data-src]');
+
+ if ('IntersectionObserver' in window) {
+ const imageObserver = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const img = entry.target;
+ img.src = img.dataset.src;
+ img.removeAttribute('data-src');
+ imageObserver.unobserve(img);
+ }
+ });
+ });
+
+ images.forEach(img => imageObserver.observe(img));
+ } else {
+ // 降级处理
+ images.forEach(img => {
+ img.src = img.dataset.src;
+ });
+ }
+}
+
+/**
+ * 页面加载完成后的初始化
+ */
+window.addEventListener('load', () => {
+ // 移除加载状态
+ document.body.classList.add('loaded');
+
+ // 初始化懒加载
+ initLazyLoad();
+});
+
+/**
+ * 复制代码功能（如果需要）
+ */
+function copyToClipboard(text) {
+ if (navigator.clipboard) {
+ navigator.clipboard.writeText(text).then(() => {
+ showToast('已复制到剪贴板');
+ });
+ } else {
+ // 降级处理
+ const textarea = document.createElement('textarea');
+ textarea.value = text;
+ document.body.appendChild(textarea);
+ textarea.select();
+ document.execCommand('copy');
+ document.body.removeChild(textarea);
+ showToast('已复制到剪贴板');
+ }
+}
+
+/**
+ * 显示提示消息
+ */
+function showToast(message) {
+ const toast = document.createElement('div');
+ toast.className = 'toast';
+ toast.textContent = message;
+ toast.style.cssText = `
+ position: fixed;
+ bottom: 24px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(16, 185, 129, 0.9);
+ color: white;
+ padding: 12px 24px;
+ border-radius: 8px;
+ font-size: 14px;
+ z-index: 9999;
+ animation: toastIn 0.3s ease, toastOut 0.3s ease 2s forwards;
+ `;
+
+ document.body.appendChild(toast);
+ setTimeout(() => toast.remove(), 2500);
+}
+
+// Toast 动画样式
+const toastStyle = document.createElement('style');
+toastStyle.textContent = `
+ @keyframes toastIn {
+ from {
+ opacity: 0;
+ transform: translateX(-50%) translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ }
+ }
+ @keyframes toastOut {
+ from {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ }
+ to {
+ opacity: 0;
+ transform: translateX(-50%) translateY(-20px);
+ }
+ }
+`;
+document.head.appendChild(toastStyle);
diff --git a/style.css b/style.css
index 3be71d3..475ef8b 100644
--- a/style.css
+++ b/style.css
@@ -1,51 +1,52 @@
/* ============================================
- PHPer 官网样式
- 深色开发者主题 - 绿色/青色配色
+ DevTools 官网样式
+ 支持主页、PHPer、EasyShell 三种风格
============================================ */
:root {
- /* 主色调 - 绿色系 (PHP 象征) */
- --color-primary: #10b981;
- --color-primary-light: #34d399;
- --color-primary-dark: #059669;
-
- /* 强调色 - 青色 */
- --color-accent: #06b6d4;
- --color-accent-light: #22d3ee;
-
- /* 背景色 - 深色 */
- --color-bg: #0a0f1a;
- --color-bg-secondary: #111827;
- --color-bg-tertiary: #1f2937;
- --color-bg-card: rgba(17, 24, 39, 0.8);
+ /* 通用色调 */
+ --color-bg: #080c14;
+ --color-bg-secondary: #0d1320;
+ --color-bg-tertiary: #151c2c;
+ --color-bg-card: rgba(13, 19, 32, 0.8);
/* 文字色 */
- --color-text: #f9fafb;
- --color-text-secondary: #9ca3af;
- --color-text-muted: #6b7280;
+ --color-text: #f0f4f8;
+ --color-text-secondary: #94a3b8;
+ --color-text-muted: #64748b;
/* 边框 */
- --color-border: rgba(255, 255, 255, 0.1);
- --color-border-light: rgba(255, 255, 255, 0.05);
+ --color-border: rgba(255, 255, 255, 0.08);
+ --color-border-light: rgba(255, 255, 255, 0.04);
- /* 状态色 */
- --color-success: #10b981;
- --color-warning: #f59e0b;
- --color-error: #ef4444;
+ /* PHPer 主色 - 绿色系 */
+ --color-green: #10b981;
+ --color-green-light: #34d399;
+ --color-green-dark: #059669;
+ --color-cyan: #06b6d4;
+
+ /* EasyShell 主色 - 赛博朋克 */
+ --color-cyber-cyan: #00d4ff;
+ --color-cyber-magenta: #ff006e;
+ --color-cyber-purple: #8b5cf6;
+ --color-cyber-pink: #ec4899;
/* 渐变 */
- --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
- --gradient-glow: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
+ --gradient-green: linear-gradient(135deg, var(--color-green) 0%, var(--color-cyan) 100%);
+ --gradient-cyber: linear-gradient(135deg, var(--color-cyber-cyan) 0%, var(--color-cyber-magenta) 100%);
+ --gradient-purple: linear-gradient(135deg, var(--color-cyber-purple) 0%, var(--color-cyber-pink) 100%);
/* 字体 */
- --font-mono: 'JetBrains Mono', 'Consolas', monospace;
+ --font-display: 'Outfit', sans-serif;
--font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
+ --font-mono: 'JetBrains Mono', 'Consolas', monospace;
+ --font-cyber: 'Orbitron', var(--font-display);
/* 尺寸 */
--header-height: 72px;
--container-width: 1200px;
- --border-radius: 12px;
- --border-radius-lg: 20px;
+ --border-radius: 16px;
+ --border-radius-lg: 24px;
/* 动画 */
--transition-fast: 0.15s ease;
@@ -80,13 +81,13 @@ body {
}
a {
- color: var(--color-primary-light);
+ color: var(--color-green-light);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
- color: var(--color-primary);
+ color: var(--color-green);
}
img {
@@ -98,7 +99,7 @@ code {
font-family: var(--font-mono);
background: var(--color-bg-tertiary);
padding: 0.2em 0.4em;
- border-radius: 4px;
+ border-radius: 6px;
font-size: 0.9em;
}
@@ -114,48 +115,83 @@ code {
pointer-events: none;
}
-.grid-lines {
+.gradient-orb {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(120px);
+ opacity: 0.4;
+}
+
+.orb-1 {
+ width: 600px;
+ height: 600px;
+ top: -200px;
+ right: -150px;
+}
+
+.orb-2 {
+ width: 500px;
+ height: 500px;
+ bottom: 10%;
+ left: -150px;
+}
+
+.orb-3 {
+ width: 400px;
+ height: 400px;
+ bottom: -100px;
+ right: 30%;
+}
+
+/* 绿色调 */
+.orb-green { background: var(--color-green); opacity: 0.2; }
+.orb-cyan { background: var(--color-cyan); opacity: 0.15; }
+
+/* 赛博朋克色调 */
+.orb-magenta { background: var(--color-cyber-magenta); opacity: 0.2; }
+
+/* 主页渐变 */
+.home-page .orb-1 { background: linear-gradient(135deg, var(--color-green), var(--color-cyber-cyan)); }
+.home-page .orb-2 { background: var(--color-cyber-purple); }
+.home-page .orb-3 { background: var(--color-cyber-magenta); opacity: 0.15; }
+
+/* 噪点覆盖 */
+.noise-overlay {
+ position: absolute;
+ inset: 0;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+ opacity: 0.03;
+ mix-blend-mode: overlay;
+}
+
+/* 赛博朋克网格 */
+.cyber-grid {
position: absolute;
inset: 0;
background-image:
- linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
- background-size: 60px 60px;
+ linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
+ background-size: 50px 50px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
-.glow {
+/* 扫描线效果 */
+.scan-line {
position: absolute;
- border-radius: 50%;
- filter: blur(100px);
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, transparent, var(--color-cyber-cyan), transparent);
opacity: 0.3;
+ animation: scanLine 4s linear infinite;
}
-.glow-1 {
- width: 600px;
- height: 600px;
- background: var(--color-primary);
- top: -200px;
- right: -200px;
- opacity: 0.15;
-}
-
-.glow-2 {
- width: 400px;
- height: 400px;
- background: var(--color-accent);
- bottom: 20%;
- left: -100px;
- opacity: 0.1;
-}
-
-.glow-3 {
- width: 500px;
- height: 500px;
- background: var(--color-primary-dark);
- bottom: -200px;
- right: 20%;
- opacity: 0.1;
+@keyframes scanLine {
+ 0% { top: 0; opacity: 0; }
+ 10% { opacity: 0.3; }
+ 90% { opacity: 0.3; }
+ 100% { top: 100%; opacity: 0; }
}
/* ============================================
@@ -181,17 +217,33 @@ code {
.section-tag {
display: inline-block;
font-family: var(--font-mono);
- font-size: 14px;
- font-weight: 500;
- color: var(--color-primary);
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-green);
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
padding: 6px 16px;
border-radius: 20px;
margin-bottom: 20px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.section-tag-green {
+ color: var(--color-green);
+ background: rgba(16, 185, 129, 0.1);
+ border-color: rgba(16, 185, 129, 0.3);
+}
+
+.section-tag-cyber {
+ color: var(--color-cyber-cyan);
+ background: rgba(0, 212, 255, 0.1);
+ border-color: rgba(0, 212, 255, 0.3);
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.section-title {
+ font-family: var(--font-display);
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
line-height: 1.2;
@@ -206,7 +258,21 @@ code {
}
.gradient-text {
- background: var(--gradient-primary);
+ background: var(--gradient-green);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.gradient-text-green {
+ background: var(--gradient-green);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.gradient-text-cyber {
+ background: var(--gradient-cyber);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -223,7 +289,7 @@ code {
right: 0;
height: var(--header-height);
z-index: 1000;
- background: rgba(10, 15, 26, 0.8);
+ background: rgba(8, 12, 20, 0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--color-border);
}
@@ -239,7 +305,8 @@ code {
display: flex;
align-items: center;
gap: 10px;
- font-size: 24px;
+ font-family: var(--font-display);
+ font-size: 22px;
font-weight: 700;
color: var(--color-text);
}
@@ -249,13 +316,7 @@ code {
}
.logo-icon {
- width: 32px;
- height: 32px;
- border-radius: 6px;
-}
-
-.logo-text {
- font-family: var(--font-mono);
+ font-size: 24px;
}
.nav-links {
@@ -271,7 +332,8 @@ code {
transition: color var(--transition-fast);
}
-.nav-links a:hover {
+.nav-links a:hover,
+.nav-links a.active {
color: var(--color-text);
}
@@ -293,42 +355,9 @@ code {
transition: var(--transition-fast);
}
-/* 移动端导航菜单 */
-@media (max-width: 768px) {
- .nav-links {
- position: fixed;
- top: var(--header-height);
- left: 0;
- right: 0;
- background: var(--color-bg-secondary);
- flex-direction: column;
- padding: 24px;
- gap: 16px;
- border-bottom: 1px solid var(--color-border);
- transform: translateY(-100%);
- opacity: 0;
- pointer-events: none;
- transition: all var(--transition-base);
- }
-
- .nav-links.mobile-open {
- display: flex;
- transform: translateY(0);
- opacity: 1;
- pointer-events: all;
- }
-
- .mobile-menu-btn.active span:nth-child(1) {
- transform: rotate(45deg) translate(5px, 5px);
- }
-
- .mobile-menu-btn.active span:nth-child(2) {
- opacity: 0;
- }
-
- .mobile-menu-btn.active span:nth-child(3) {
- transform: rotate(-45deg) translate(5px, -5px);
- }
+/* 赛博朋克导航 */
+.navbar-cyber {
+ border-bottom-color: rgba(0, 212, 255, 0.2);
}
/* ============================================
@@ -344,7 +373,7 @@ code {
font-size: 15px;
font-weight: 600;
padding: 12px 24px;
- border-radius: 10px;
+ border-radius: 12px;
border: none;
cursor: pointer;
transition: all var(--transition-fast);
@@ -366,15 +395,34 @@ code {
font-size: 16px;
}
+.btn-nav {
+ padding: 8px 16px;
+ font-size: 14px;
+ background: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ color: var(--color-text);
+}
+
+.btn-nav:hover {
+ background: var(--color-bg-secondary);
+ border-color: var(--color-green);
+ color: var(--color-text);
+}
+
+.btn-nav-cyber:hover {
+ border-color: var(--color-cyber-cyan);
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
+}
+
.btn-primary {
- background: var(--gradient-primary);
+ background: var(--gradient-green);
color: white;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
- box-shadow: 0 6px 30px rgba(16, 185, 129, 0.4);
+ box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
color: white;
}
@@ -386,7 +434,7 @@ code {
.btn-outline:hover {
background: var(--color-bg-tertiary);
- border-color: var(--color-primary);
+ border-color: var(--color-green);
color: var(--color-text);
}
@@ -401,6 +449,58 @@ code {
color: var(--color-text);
}
+/* 赛博朋克按钮 */
+.btn-cyber {
+ background: var(--gradient-cyber);
+ color: white;
+ box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
+ position: relative;
+ overflow: hidden;
+}
+
+.btn-cyber::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+ transform: translateX(-100%);
+ transition: transform 0.5s;
+}
+
+.btn-cyber:hover::before {
+ transform: translateX(100%);
+}
+
+.btn-cyber:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4), 0 0 60px rgba(0, 212, 255, 0.2);
+ color: white;
+}
+
+.btn-outline-cyber {
+ background: transparent;
+ color: var(--color-cyber-cyan);
+ border: 1px solid var(--color-cyber-cyan);
+}
+
+.btn-outline-cyber:hover {
+ background: rgba(0, 212, 255, 0.1);
+ box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
+ color: var(--color-cyber-cyan);
+}
+
+.btn-ghost-cyber {
+ background: rgba(0, 212, 255, 0.05);
+ color: var(--color-text);
+ border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.btn-ghost-cyber:hover {
+ background: rgba(0, 212, 255, 0.1);
+ border-color: var(--color-cyber-cyan);
+ color: var(--color-text);
+}
+
/* ============================================
Hero 区域
============================================ */
@@ -423,33 +523,57 @@ code {
.hero-badge {
display: inline-flex;
align-items: center;
- gap: 8px;
+ gap: 10px;
font-family: var(--font-mono);
- font-size: 14px;
- color: var(--color-primary);
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-green);
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
- padding: 8px 16px;
- border-radius: 24px;
+ padding: 8px 18px;
+ border-radius: 30px;
margin-bottom: 24px;
}
+.badge-icon {
+ font-size: 16px;
+}
+
.badge-dot {
width: 8px;
height: 8px;
- background: var(--color-primary);
+ background: var(--color-green);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.5; }
+ 0%, 100% { opacity: 1; transform: scale(1); }
+ 50% { opacity: 0.5; transform: scale(0.9); }
+}
+
+.hero-badge-green {
+ color: var(--color-green);
+ background: rgba(16, 185, 129, 0.1);
+ border-color: rgba(16, 185, 129, 0.2);
+}
+
+.hero-badge-cyber {
+ color: var(--color-cyber-cyan);
+ background: rgba(0, 212, 255, 0.1);
+ border-color: rgba(0, 212, 255, 0.3);
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+.badge-dot-cyber {
+ background: var(--color-cyber-cyan);
+ box-shadow: 0 0 10px var(--color-cyber-cyan);
}
.hero-title {
- font-size: clamp(40px, 6vw, 64px);
- font-weight: 700;
+ font-family: var(--font-display);
+ font-size: clamp(40px, 6vw, 72px);
+ font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
}
@@ -458,6 +582,18 @@ code {
display: block;
}
+.product-logo {
+ font-size: 0.8em;
+ margin-right: 10px;
+}
+
+.hero-tagline {
+ font-size: clamp(18px, 2.5vw, 24px);
+ color: var(--color-text-secondary);
+ margin-bottom: 16px;
+ font-weight: 500;
+}
+
.hero-description {
font-size: 18px;
color: var(--color-text-secondary);
@@ -466,8 +602,13 @@ code {
}
.hero-description .highlight {
- color: var(--color-primary-light);
- font-weight: 500;
+ color: var(--color-green-light);
+ font-weight: 600;
+}
+
+.highlight-cyber {
+ color: var(--color-cyber-cyan);
+ font-weight: 600;
}
.hero-actions {
@@ -494,6 +635,11 @@ code {
color: var(--color-text);
}
+.stat-value-cyber {
+ color: var(--color-cyber-cyan);
+ text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+}
+
.stat-label {
font-size: 14px;
color: var(--color-text-muted);
@@ -505,46 +651,277 @@ code {
background: var(--color-border);
}
-/* Hero Visual - Terminal */
+.stat-divider-cyber {
+ background: rgba(0, 212, 255, 0.3);
+}
+
+/* 详情页 Hero */
+.detail-hero {
+ min-height: auto;
+ padding: 160px 0 100px;
+}
+
+.detail-hero .container {
+ display: block;
+ text-align: center;
+}
+
+.detail-hero .hero-stats {
+ justify-content: center;
+}
+
+.detail-hero .hero-actions {
+ justify-content: center;
+}
+
+/* 赛博朋克 Hero */
+.cyber-hero .hero-title {
+ font-family: var(--font-cyber);
+}
+
+.title-cyber {
+ background: var(--gradient-cyber);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ text-shadow: none;
+ filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.3));
+}
+
+.cyber-tagline {
+ color: var(--color-text-secondary);
+}
+
+/* Hero Visual - 浮动卡片 */
.hero-visual {
position: relative;
+ height: 400px;
+}
+
+.floating-cards {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.float-card {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ width: 100px;
+ height: 100px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: 20px;
+ backdrop-filter: blur(10px);
+ animation: float 6s ease-in-out infinite;
+}
+
+.float-card:hover {
+ border-color: var(--color-green);
+ transform: scale(1.1);
+}
+
+.card-emoji {
+ font-size: 32px;
+}
+
+.card-label {
+ font-family: var(--font-mono);
+ font-size: 12px;
+ color: var(--color-text-secondary);
+}
+
+.card-1 { top: 10%; left: 10%; animation-delay: 0s; }
+.card-2 { top: 5%; right: 20%; animation-delay: 1s; }
+.card-3 { top: 40%; left: 5%; animation-delay: 2s; }
+.card-4 { top: 35%; right: 10%; animation-delay: 3s; }
+.card-5 { bottom: 15%; left: 20%; animation-delay: 4s; }
+.card-6 { bottom: 10%; right: 15%; animation-delay: 5s; }
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-20px); }
+}
+
+/* ============================================
+ 产品卡片
+ ============================================ */
+
+.products {
+ background: var(--color-bg-secondary);
+}
+
+.product-card {
+ display: grid;
+ grid-template-columns: 1fr 1.2fr;
+ gap: 60px;
+ align-items: center;
+ padding: 60px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius-lg);
+ margin-bottom: 60px;
+ transition: all var(--transition-base);
+}
+
+.product-card:hover {
+ border-color: var(--color-green);
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.product-card.reverse {
+ grid-template-columns: 1.2fr 1fr;
+}
+
+.product-card.reverse .product-info {
+ order: 2;
+}
+
+.product-card.reverse .product-preview {
+ order: 1;
+}
+
+.product-card.reverse:hover {
+ border-color: var(--color-cyber-cyan);
+}
+
+.product-header {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 16px;
+}
+
+.product-icon {
+ font-size: 48px;
+}
+
+.product-name {
+ font-family: var(--font-display);
+ font-size: 32px;
+ font-weight: 700;
+}
+
+.product-badge {
+ display: inline-block;
+ font-family: var(--font-mono);
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--color-green);
+ background: rgba(16, 185, 129, 0.1);
+ border: 1px solid rgba(16, 185, 129, 0.3);
+ padding: 4px 10px;
+ border-radius: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.product-badge-cyber {
+ color: var(--color-cyber-cyan);
+ background: rgba(0, 212, 255, 0.1);
+ border-color: rgba(0, 212, 255, 0.3);
+}
+
+.product-tagline {
+ font-size: 18px;
+ font-weight: 500;
+ color: var(--color-text);
+ margin-bottom: 16px;
+}
+
+.product-desc {
+ color: var(--color-text-secondary);
+ margin-bottom: 24px;
+ line-height: 1.7;
+}
+
+.product-features {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 12px;
+ margin-bottom: 24px;
+}
+
+.feature-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+}
+
+.feature-icon {
+ font-size: 16px;
+}
+
+.product-tech {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 24px;
+}
+
+.tech-item {
+ font-family: var(--font-mono);
+ font-size: 12px;
+ color: var(--color-text-muted);
+ background: var(--color-bg-tertiary);
+ padding: 4px 12px;
+ border-radius: 6px;
+}
+
+.product-actions {
+ display: flex;
+ gap: 12px;
+}
+
+/* Product Preview */
+.product-preview {
+ position: relative;
}
-.terminal-window {
+.preview-window {
background: var(--color-bg-secondary);
- border-radius: var(--border-radius-lg);
+ border-radius: var(--border-radius);
border: 1px solid var(--color-border);
overflow: hidden;
- box-shadow:
- 0 25px 50px -12px rgba(0, 0, 0, 0.5),
- 0 0 0 1px rgba(255, 255, 255, 0.05);
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}
-.terminal-header {
+.preview-cyber {
+ border-color: rgba(0, 212, 255, 0.3);
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 212, 255, 0.1);
+}
+
+.window-header {
display: flex;
align-items: center;
gap: 12px;
- padding: 16px 20px;
+ padding: 14px 20px;
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border);
}
-.terminal-buttons {
+.window-dots {
display: flex;
gap: 8px;
}
-.terminal-buttons span {
+.window-dots span {
width: 12px;
height: 12px;
border-radius: 50%;
}
-.btn-close { background: #ef4444; }
-.btn-minimize { background: #f59e0b; }
-.btn-maximize { background: #10b981; }
+.window-dots span:nth-child(1) { background: #ef4444; }
+.window-dots span:nth-child(2) { background: #f59e0b; }
+.window-dots span:nth-child(3) { background: #10b981; }
-.terminal-title {
+.window-title {
flex: 1;
text-align: center;
font-family: var(--font-mono);
@@ -552,81 +929,70 @@ code {
color: var(--color-text-muted);
}
-.terminal-body {
- padding: 20px;
- font-family: var(--font-mono);
- font-size: 14px;
+.preview-img {
+ width: 100%;
+ display: block;
}
-.service-row {
+/* ============================================
+ 对比表格
+ ============================================ */
+
+.comparison {
+ background: var(--color-bg);
+}
+
+.comparison-table {
+ max-width: 900px;
+ margin: 0 auto;
+ background: var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-border);
+ overflow: hidden;
+}
+
+.comparison-header,
+.comparison-row {
display: grid;
- grid-template-columns: 32px 1fr auto auto;
- gap: 12px;
- align-items: center;
- padding: 12px 0;
- border-bottom: 1px solid var(--color-border-light);
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 20px;
}
-.service-row:last-of-type {
- border-bottom: none;
+.comparison-header {
+ background: var(--color-bg-tertiary);
+ padding: 20px 24px;
+ border-bottom: 1px solid var(--color-border);
}
-.service-icon {
- font-size: 20px;
-}
-
-.service-name {
- color: var(--color-text);
-}
-
-.service-status {
- font-size: 12px;
- padding: 4px 12px;
- border-radius: 12px;
-}
-
-.service-status.running {
- color: var(--color-success);
- background: rgba(16, 185, 129, 0.1);
-}
-
-.service-status.stopped {
- color: var(--color-text-muted);
- background: rgba(107, 114, 128, 0.1);
-}
-
-.service-port {
- color: var(--color-text-muted);
- font-size: 13px;
-}
-
-.terminal-prompt {
+.comparison-header .comparison-cell {
display: flex;
align-items: center;
gap: 8px;
- margin-top: 16px;
- padding-top: 16px;
- border-top: 1px solid var(--color-border-light);
+ font-weight: 600;
+ color: var(--color-text);
}
-.prompt-symbol {
- color: var(--color-primary);
+.product-icon-sm {
+ font-size: 20px;
}
-.prompt-text {
+.comparison-row {
+ padding: 16px 24px;
+ border-bottom: 1px solid var(--color-border-light);
+}
+
+.comparison-row:last-child {
+ border-bottom: none;
+}
+
+.comparison-cell:first-child {
color: var(--color-text-secondary);
+ font-weight: 500;
}
-.cursor {
- width: 8px;
- height: 18px;
- background: var(--color-primary);
- animation: blink 1s infinite;
-}
-
-@keyframes blink {
- 0%, 50% { opacity: 1; }
- 51%, 100% { opacity: 0; }
+.comparison-cell {
+ font-size: 14px;
+ color: var(--color-text);
}
/* ============================================
@@ -652,7 +1018,7 @@ code {
}
.feature-card:hover {
- border-color: var(--color-primary);
+ border-color: var(--color-green);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
@@ -664,12 +1030,26 @@ code {
border-color: rgba(16, 185, 129, 0.3);
}
+.feature-card.feature-green:hover {
+ border-color: var(--color-green);
+}
+
+.feature-card-cyber {
+ background: rgba(0, 212, 255, 0.02);
+}
+
+.feature-card-cyber:hover {
+ border-color: var(--color-cyber-cyan);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 212, 255, 0.1);
+}
+
.feature-icon {
font-size: 40px;
margin-bottom: 20px;
}
.feature-card h3 {
+ font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
@@ -689,7 +1069,7 @@ code {
.feature-list li {
position: relative;
- padding-left: 20px;
+ padding-left: 24px;
margin-bottom: 10px;
color: var(--color-text-secondary);
font-size: 14px;
@@ -699,7 +1079,12 @@ code {
content: '✓';
position: absolute;
left: 0;
- color: var(--color-primary);
+ color: var(--color-green);
+ font-weight: 600;
+}
+
+.cyber-grid-features {
+ grid-template-columns: repeat(4, 1fr);
}
/* ============================================
@@ -726,20 +1111,31 @@ code {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
padding: 10px 20px;
- border-radius: 8px;
+ border-radius: 10px;
cursor: pointer;
transition: all var(--transition-fast);
}
.tab-btn:hover {
color: var(--color-text);
- border-color: var(--color-primary);
+ border-color: var(--color-green);
}
.tab-btn.active {
- color: var(--color-primary);
+ color: var(--color-green);
background: rgba(16, 185, 129, 0.1);
- border-color: var(--color-primary);
+ border-color: var(--color-green);
+}
+
+.tab-btn-cyber:hover {
+ border-color: var(--color-cyber-cyan);
+}
+
+.tab-btn-cyber.active {
+ color: var(--color-cyber-cyan);
+ background: rgba(0, 212, 255, 0.1);
+ border-color: var(--color-cyber-cyan);
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}
.screenshot-container {
@@ -757,6 +1153,11 @@ code {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}
+.cyber-frame {
+ border-color: rgba(0, 212, 255, 0.2);
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 80px rgba(0, 212, 255, 0.1);
+}
+
.screenshot-window-bar {
display: flex;
align-items: center;
@@ -766,6 +1167,10 @@ code {
border-bottom: 1px solid var(--color-border);
}
+.cyber-window-bar {
+ border-bottom-color: rgba(0, 212, 255, 0.2);
+}
+
.window-buttons {
display: flex;
gap: 8px;
@@ -775,21 +1180,12 @@ code {
width: 12px;
height: 12px;
border-radius: 50%;
- background: var(--color-text-muted);
}
.window-buttons span:nth-child(1) { background: #ef4444; }
.window-buttons span:nth-child(2) { background: #f59e0b; }
.window-buttons span:nth-child(3) { background: #10b981; }
-.window-title {
- flex: 1;
- text-align: center;
- font-family: var(--font-mono);
- font-size: 13px;
- color: var(--color-text-muted);
-}
-
.screenshot-wrapper {
position: relative;
aspect-ratio: 16/10;
@@ -815,7 +1211,7 @@ code {
============================================ */
.more-features {
- background: var(--color-bg-secondary);
+ background: var(--color-bg);
padding: 60px 0;
}
@@ -827,7 +1223,16 @@ code {
.banner-content {
text-align: center;
- padding: 24px;
+ padding: 32px 24px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ transition: all var(--transition-base);
+}
+
+.banner-content:hover {
+ border-color: var(--color-green);
+ transform: translateY(-4px);
}
.banner-content h3 {
@@ -875,7 +1280,7 @@ code {
.table-row.table-header {
background: var(--color-bg-tertiary);
font-weight: 600;
- font-size: 14px;
+ font-size: 13px;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -893,7 +1298,7 @@ code {
}
.table-row .source a {
- color: var(--color-primary-light);
+ color: var(--color-green-light);
}
.table-row .desc {
@@ -940,7 +1345,7 @@ code {
}
.faq-question:hover {
- color: var(--color-primary);
+ color: var(--color-green);
}
.faq-icon {
@@ -975,6 +1380,92 @@ code {
margin-bottom: 8px;
}
+/* ============================================
+ 快捷键
+ ============================================ */
+
+.shortcuts-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+ max-width: 900px;
+ margin: 0 auto;
+}
+
+.shortcut-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ padding: 24px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ text-align: center;
+}
+
+.shortcut-item kbd {
+ display: inline-block;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--color-cyber-cyan);
+ background: rgba(0, 212, 255, 0.1);
+ border: 1px solid rgba(0, 212, 255, 0.3);
+ padding: 6px 12px;
+ border-radius: 6px;
+ margin: 0 2px;
+}
+
+.shortcut-item span {
+ font-size: 14px;
+ color: var(--color-text-secondary);
+}
+
+/* ============================================
+ 平台支持
+ ============================================ */
+
+.platforms-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 24px;
+ max-width: 900px;
+ margin: 0 auto;
+}
+
+.platform-card {
+ text-align: center;
+ padding: 40px 24px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ transition: all var(--transition-base);
+}
+
+.platform-card:hover {
+ border-color: var(--color-cyber-cyan);
+ transform: translateY(-4px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 212, 255, 0.1);
+}
+
+.platform-icon {
+ font-size: 48px;
+ margin-bottom: 16px;
+}
+
+.platform-card h3 {
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 8px;
+ color: var(--color-text);
+}
+
+.platform-card p {
+ font-size: 14px;
+ color: var(--color-text-muted);
+}
+
/* ============================================
技术栈
============================================ */
@@ -1007,8 +1498,20 @@ code {
color: var(--color-text-secondary);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
- padding: 8px 16px;
- border-radius: 6px;
+ padding: 10px 20px;
+ border-radius: 8px;
+ transition: all var(--transition-fast);
+}
+
+.tech-tag:hover {
+ border-color: var(--color-green);
+ color: var(--color-green);
+}
+
+.tech-tag-cyber:hover {
+ border-color: var(--color-cyber-cyan);
+ color: var(--color-cyber-cyan);
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}
/* ============================================
@@ -1021,11 +1524,23 @@ code {
border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}
+.cta-green {
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
+ border-color: rgba(16, 185, 129, 0.2);
+}
+
+.cta-cyber {
+ background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(255, 0, 110, 0.05) 100%);
+ border-top: 1px solid rgba(0, 212, 255, 0.2);
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+}
+
.cta-content {
text-align: center;
}
.cta-content h2 {
+ font-family: var(--font-display);
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
margin-bottom: 16px;
@@ -1053,6 +1568,10 @@ code {
border-top: 1px solid var(--color-border);
}
+.footer-cyber {
+ border-top-color: rgba(0, 212, 255, 0.2);
+}
+
.footer-content {
text-align: center;
}
@@ -1061,11 +1580,24 @@ code {
display: inline-flex;
align-items: center;
gap: 10px;
+ font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
margin-bottom: 16px;
}
+.product-emoji {
+ font-size: 28px;
+}
+
+.logo-text-cyber {
+ font-family: var(--font-cyber);
+ background: var(--gradient-cyber);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
.footer-text {
color: var(--color-text-secondary);
margin-bottom: 24px;
@@ -1084,7 +1616,11 @@ code {
}
.footer-links a:hover {
- color: var(--color-primary);
+ color: var(--color-green);
+}
+
+.footer-cyber .footer-links a:hover {
+ color: var(--color-cyber-cyan);
}
.copyright {
@@ -1108,8 +1644,9 @@ code {
.hero-visual {
order: 2;
- max-width: 600px;
+ max-width: 500px;
margin: 0 auto;
+ height: 300px;
}
.hero-actions {
@@ -1120,6 +1657,23 @@ code {
justify-content: center;
}
+ .product-card {
+ grid-template-columns: 1fr;
+ padding: 40px;
+ }
+
+ .product-card.reverse {
+ grid-template-columns: 1fr;
+ }
+
+ .product-card.reverse .product-info {
+ order: 1;
+ }
+
+ .product-card.reverse .product-preview {
+ order: 2;
+ }
+
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
@@ -1132,17 +1686,66 @@ code {
.features-banner {
grid-template-columns: repeat(2, 1fr);
}
+
+ .cyber-grid-features {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .comparison-header,
+ .comparison-row {
+ grid-template-columns: 1fr;
+ gap: 8px;
+ }
+
+ .comparison-header {
+ display: none;
+ }
+
+ .shortcuts-grid,
+ .platforms-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
}
@media (max-width: 768px) {
.nav-links {
- display: none;
+ position: fixed;
+ top: var(--header-height);
+ left: 0;
+ right: 0;
+ background: var(--color-bg-secondary);
+ flex-direction: column;
+ padding: 24px;
+ gap: 16px;
+ border-bottom: 1px solid var(--color-border);
+ transform: translateY(-100%);
+ opacity: 0;
+ pointer-events: none;
+ transition: all var(--transition-base);
+ }
+
+ .nav-links.mobile-open {
+ transform: translateY(0);
+ opacity: 1;
+ pointer-events: all;
}
.mobile-menu-btn {
display: flex;
}
+ .mobile-menu-btn.active span:nth-child(1) {
+ transform: rotate(45deg) translate(5px, 5px);
+ }
+
+ .mobile-menu-btn.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .mobile-menu-btn.active span:nth-child(3) {
+ transform: rotate(-45deg) translate(5px, -5px);
+ }
+
.section {
padding: 60px 0;
}
@@ -1169,6 +1772,22 @@ code {
display: none;
}
+ .hero-visual {
+ display: none;
+ }
+
+ .product-card {
+ padding: 24px;
+ }
+
+ .product-features {
+ grid-template-columns: 1fr;
+ }
+
+ .product-actions {
+ flex-direction: column;
+ }
+
.features-grid {
grid-template-columns: 1fr;
}
@@ -1177,6 +1796,10 @@ code {
grid-column: span 1;
}
+ .cyber-grid-features {
+ grid-template-columns: 1fr;
+ }
+
.screenshot-tabs {
gap: 8px;
}
@@ -1199,6 +1822,11 @@ code {
display: none;
}
+ .shortcuts-grid,
+ .platforms-grid {
+ grid-template-columns: 1fr;
+ }
+
.cta-actions {
flex-direction: column;
align-items: center;
@@ -1217,7 +1845,7 @@ code {
@keyframes fadeInUp {
from {
opacity: 0;
- transform: translateY(20px);
+ transform: translateY(30px);
}
to {
opacity: 1;
@@ -1227,45 +1855,40 @@ code {
.hero-badge,
.hero-title,
+.hero-tagline,
.hero-description,
.hero-actions,
.hero-stats {
- animation: fadeInUp 0.6s ease-out backwards;
+ animation: fadeInUp 0.8s ease-out backwards;
}
.hero-badge { animation-delay: 0.1s; }
.hero-title { animation-delay: 0.2s; }
-.hero-description { animation-delay: 0.3s; }
-.hero-actions { animation-delay: 0.4s; }
-.hero-stats { animation-delay: 0.5s; }
-
-.terminal-window {
- animation: fadeInUp 0.8s ease-out 0.3s backwards;
-}
-
-.service-row {
- animation: fadeInUp 0.4s ease-out backwards;
-}
-
-.service-row:nth-child(1) { animation-delay: 0.5s; }
-.service-row:nth-child(2) { animation-delay: 0.6s; }
-.service-row:nth-child(3) { animation-delay: 0.7s; }
-.service-row:nth-child(4) { animation-delay: 0.8s; }
-.service-row:nth-child(5) { animation-delay: 0.9s; }
+.hero-tagline { animation-delay: 0.3s; }
+.hero-description { animation-delay: 0.4s; }
+.hero-actions { animation-delay: 0.5s; }
+.hero-stats { animation-delay: 0.6s; }
/* 滚动动画 */
.feature-card,
.faq-item,
-.table-row:not(.table-header) {
+.table-row:not(.table-header),
+.product-card,
+.banner-content,
+.platform-card,
+.shortcut-item {
opacity: 0;
- transform: translateY(20px);
- transition: opacity 0.5s ease, transform 0.5s ease;
+ transform: translateY(30px);
+ transition: opacity 0.6s ease, transform 0.6s ease;
}
.feature-card.visible,
.faq-item.visible,
-.table-row.visible {
+.table-row.visible,
+.product-card.visible,
+.banner-content.visible,
+.platform-card.visible,
+.shortcut-item.visible {
opacity: 1;
transform: translateY(0);
}
-
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+