VPN产品官网设计，现代简约风格，科技感，极简主义，白橙配色，模块化布局，卡片式定价模块，干净留白，核心功能矩阵展示，全球节点可视化，橙色CTA按钮高亮，用户证言模块，折叠式FAQ，国际化商务简洁风，
总结
- 核心风格关键词：现代简约、科技感、扁平化、白橙柔和配色、模块化布局；
- 核心功能关键词：Hero 首屏、定价卡片、全球节点、FAQ、用户证言；
- 核心转化关键词：CTA 高亮、AIDA 逻辑、性价比对比、信任背书。
直接展出代码：
（可以复制代码在：代码在线运行工具 - 墨桅博客 看效果）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>墨桅博客 - 点亮世界，探索网络自由</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#FF9F45',
secondary: '#4A90E2',
gradient: 'linear-gradient(135deg, #4A90E2 0%, #87CEEB 100%)',
light: '#F8FAFC',
dark: '#1E293B',
},
fontFamily: {
sans: ['Inter', 'PingFang SC', 'Microsoft YaHei', 'sans-serif'],
},
boxShadow: {
card: '0 4px 20px rgba(0, 0, 0, 0.05)',
}
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.bg-chinese {
background-image: url('https://picsum.photos/id/152/1920/1080'),
linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85));
background-blend-mode: overlay;
background-position: center;
background-size: cover;
}
.text-gradient {
background: linear-gradient(135deg, #FF9F45 0%, #FF6B35 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-active .accordion-content {
max-height: 200px;
}
}
</style>
<script>
// 墨桅博客 https://www.jetmast.com
</script>
</head>
<body class="font-sans text-dark bg-light">
<header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<span class="text-xl font-bold text-primary">墨桅博客</span>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="text-dark hover:text-primary transition-colors">功能</a>
<a href="#download" class="text-dark hover:text-primary transition-colors">下载</a>
<a href="#pricing" class="text-dark hover:text-primary transition-colors">价格</a>
<a href="#reviews" class="text-dark hover:text-primary transition-colors">用户评价</a>
<a href="#faq" class="text-dark hover:text-primary transition-colors">常见问题</a>
</nav>
<div class="flex items-center space-x-4">
<a href="https://www.jetmast.com" class="text-dark hover:text-primary transition-colors">登录</a>
<a href="https://www.jetmast.com" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">注册</a>
</div>
<button class="md:hidden text-dark hover:text-primary">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
</div>
</header>
<section class="pt-24 pb-16 md:pt-32 md:pb-24 bg-chinese">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-6 leading-tight">
点亮世界，<span class="text-gradient">探索网络自由</span>
</h1>
<p class="text-lg md:text-xl text-gray-700 mb-8">
融合东方智慧与现代科技，为您提供安全、稳定、高速的全球网络连接体验
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="https://www.jetmast.com" class="bg-primary text-white px-8 py-3 rounded-md text-lg font-medium hover:bg-primary/90 transition-colors shadow-lg">
立即下载
</a>
<a href="https://www.jetmast.com" class="bg-white/80 text-dark border border-gray-200 px-8 py-3 rounded-md text-lg font-medium hover:bg-white transition-colors">
了解更多
</a>
</div>
</div>
<div class="absolute top-40 right-10 hidden lg:block opacity-20">
<i class="fa fa-paper-plane-o text-[120px] rotate-45 text-secondary"></i>
</div>
<div class="absolute bottom-20 left-10 hidden lg:block opacity-20">
<i class="fa fa-leaf text-[100px] -rotate-15 text-primary"></i>
</div>
</div>
</section>
<section id="features" class="py-16 md:py-24 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">核心功能</h2>
<p class="text-gray-600 max-w-2xl mx-auto">东方智慧护航，现代科技加持，全方位保障您的网络体验</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-light rounded-xl p-8 shadow-card card-hover">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
<i class="fa fa-globe text-2xl text-secondary"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-center">全球节点覆盖</h3>
<p class="text-gray-600 text-center">覆盖全球100+国家和地区的高速节点，水墨山川般的网络覆盖，畅游无阻</p>
</div>
<div class="bg-light rounded-xl p-8 shadow-card card-hover">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
<i class="fa fa-shield text-2xl text-secondary"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-center">稳定运行保障</h3>
<p class="text-gray-600 text-center">99.9%超高可用性，如长城般稳固的网络连接，无惧网络波动</p>
</div>
<div class="bg-light rounded-xl p-8 shadow-card card-hover">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
<i class="fa fa-lock text-2xl text-secondary"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-center">严格隐私保护</h3>
<p class="text-gray-600 text-center">军工级加密技术，如中式园林般层层守护，确保您的网络隐私安全</p>
</div>
</div>
</div>
</section>
<section id="download" class="py-16 md:py-24 bg-gradient-to-b from-light to-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">多平台支持</h2>
<p class="text-gray-600 max-w-2xl mx-auto">全设备覆盖，无缝切换，如行云流水般的使用体验</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl p-6 shadow-card card-hover">
<div class="flex justify-center mb-4">
<i class="fa fa-windows text-4xl text-secondary"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-center">Windows</h3>
<ul class="text-gray-600 mb-6 space-y-2">
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> Windows 10/11</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 一键连接</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 自动切换节点</li>
</ul>
<a href="https://www.jetmast.com" class="block text-center bg-primary text-white py-2 rounded-md hover:bg-primary/90 transition-colors">
下载客户端
</a>
</div>
<div class="bg-white rounded-xl p-6 shadow-card card-hover">
<div class="flex justify-center mb-4">
<i class="fa fa-apple text-4xl text-secondary"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-center">macOS</h3>
<ul class="text-gray-600 mb-6 space-y-2">
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> macOS 10.15+</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 原生适配</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 低资源占用</li>
</ul>
<a href="https://www.jetmast.com" class="block text-center bg-primary text-white py-2 rounded-md hover:bg-primary/90 transition-colors">
下载客户端
</a>
</div>
<div class="bg-white rounded-xl p-6 shadow-card card-hover">
<div class="flex justify-center mb-4">
<i class="fa fa-android text-4xl text-secondary"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-center">Android</h3>
<ul class="text-gray-600 mb-6 space-y-2">
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> Android 8.0+</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 后台运行</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 流量统计</li>
</ul>
<a href="https://www.jetmast.com" class="block text-center bg-primary text-white py-2 rounded-md hover:bg-primary/90 transition-colors">
下载客户端
</a>
</div>
<div class="bg-white rounded-xl p-6 shadow-card card-hover">
<div class="flex justify-center mb-4">
<i class="fa fa-mobile text-4xl text-secondary"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-center">iOS</h3>
<ul class="text-gray-600 mb-6 space-y-2">
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> iOS 13.0+</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 快捷指令</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 电池优化</li>
</ul>
<a href="https://www.jetmast.com" class="block text-center bg-primary text-white py-2 rounded-md hover:bg-primary/90 transition-colors">
下载客户端
</a>
</div>
</div>
</div>
</section>
<section id="pricing" class="py-16 md:py-24 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">灵活定价方案</h2>
<p class="text-gray-600 max-w-2xl mx-auto">丰俭由人，如中式茶道般，为您量身定制的使用方案</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-light rounded-xl p-8 shadow-card card-hover border border-gray-100">
<h3 class="text-xl font-bold mb-2 text-center">月度套餐</h3>
<div class="text-center mb-6">
<span class="text-3xl font-bold">¥39</span>
<span class="text-gray-500">/月</span>
</div>
<ul class="text-gray-600 mb-8 space-y-3">
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 全平台使用</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 50+国家节点</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 单设备连接</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 24/7客服支持</li>
</ul>
<a href="https://www.jetmast.com" class="block text-center bg-white border border-primary text-primary py-2 rounded-md hover:bg-primary/5 transition-colors">
立即使用
</a>
</div>
<div class="bg-white rounded-xl p-8 shadow-lg card-hover border-2 border-primary transform md:scale-105">
<div class="bg-primary/10 text-primary text-sm font-medium py-1 px-3 rounded-full inline-block mb-4">
最受欢迎
</div>
<h3 class="text-xl font-bold mb-2 text-center">年度套餐</h3>
<div class="text-center mb-6">
<span class="text-3xl font-bold">¥299</span>
<span class="text-gray-500">/年 (¥25/月)</span>
</div>
<ul class="text-gray-600 mb-8 space-y-3">
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 全平台使用</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 100+国家节点</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 5设备同时连接</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 24/7专属客服</li>
</ul>
<a href="https://www.jetmast.com" class="block text-center bg-primary text-white py-2 rounded-md hover:bg-primary/90 transition-colors">
立即使用
</a>
</div>
<div class="bg-light rounded-xl p-8 shadow-card card-hover border border-gray-100">
<h3 class="text-xl font-bold mb-2 text-center">优惠套餐</h3>
<div class="text-center mb-6">
<span class="text-3xl font-bold">¥599</span>
<span class="text-gray-500">/3年 (¥17/月)</span>
</div>
<ul class="text-gray-600 mb-8 space-y-3">
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 全平台使用</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 全量节点解锁</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 10设备同时连接</li>
<li class="flex items-center"><i class="fa fa-check text-primary mr-2"></i> 高级技术支持</li>
</ul>
<a href="https://www.jetmast.com" class="block text-center bg-white border border-primary text-primary py-2 rounded-md hover:bg-primary/5 transition-colors">
立即使用
</a>
</div>
</div>
</div>
</section>
<section id="reviews" class="py-16 md:py-24 bg-gradient-to-b from-white to-light">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">用户心声</h2>
<p class="text-gray-600 max-w-2xl mx-auto">来自全球用户的真实评价，如信笺般真诚</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl p-6 shadow-card card-hover">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">李先生</h4>
<div class="text-primary">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600">"速度非常快，连接稳定，客服响应也很及时，用了半年多了，体验很好。"</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-card card-hover">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">王女士</h4>
<div class="text-primary">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
</div>
</div>
<p class="text-gray-600">"节点很多，切换方便，看海外视频一点都不卡，性价比很高。"</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-card card-hover">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">张先生</h4>
<div class="text-primary">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600">"多设备支持很实用，全家都能用，隐私保护做得也很到位，值得推荐。"</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-card card-hover">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/26/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">陈女士</h4>
<div class="text-primary">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>
<p class="text-gray-600">"操作简单，界面友好，虽然偶尔会有小卡顿，但总体来说非常满意。"</p>
</div>
</div>
</div>
</section>
<section class="py-16 md:py-24 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">全球节点覆盖</h2>
<p class="text-gray-600 max-w-2xl mx-auto">足迹遍布五洲四海，如丝绸之路般连接世界</p>
</div>
<div class="flex flex-wrap justify-center gap-4 md:gap-8">
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">🇺🇸</span>
</div>
<span class="text-sm text-gray-600">美国</span>
</div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">🇯🇵</span>
</div>
<span class="text-sm text-gray-600">日本</span>
</div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">🇬🇧</span>
</div>
<span class="text-sm text-gray-600">英国</span>
</div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">🇩🇪</span>
</div>
<span class="text-sm text-gray-600">德国</span>
</div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">🇨🇦</span>
</div>
<span class="text-sm text-gray-600">加拿大</span>
</div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">🇦🇺</span>
</div>
<span class="text-sm text-gray-600">澳大利亚</span>
</div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">🇸🇬</span>
</div>
<span class="text-sm text-gray-600">新加坡</span>
</div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">🇭🇰</span>
</div>
<span class="text-sm text-gray-600">中国香港</span>
</div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
<span class="text-xl font-bold">+92</span>
</div>
<span class="text-sm text-gray-600">更多地区</span>
</div>
</div>
</div>
</section>
<section id="faq" class="py-16 md:py-24 bg-light">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">常见问题</h2>
<p class="text-gray-600 max-w-2xl mx-auto">解惑答疑，如中式书院般传道授业</p>
</div>
<div class="max-w-3xl mx-auto space-y-4">
<div class="accordion bg-white rounded-xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium">
<span>墨桅博客的连接速度如何？</span>
<i class="fa fa-chevron-down text-primary transition-transform"></i>
</button>
<div class="accordion-content px-6 pb-6 text-gray-600">
我们采用全球分布式服务器架构和智能路由技术，确保您获得最快的连接速度。95%以上的用户实测速度可达本地带宽的80%以上，支持4K视频流畅播放和大型游戏低延迟体验。
</div>
</div>
<div class="accordion bg-white rounded-xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium">
<span>使用墨桅博客是否安全合法？</span>
<i class="fa fa-chevron-down text-primary transition-transform"></i>
</button>
<div class="accordion-content px-6 pb-6 text-gray-600">
我们采用AES-256位加密技术，严格遵守隐私保护政策，不会记录您的任何上网行为。在大多数国家和地区，使用VPN访问公开网络内容是合法的，但请遵守当地法律法规，不要用于非法用途。
</div>
</div>
<div class="accordion bg-white rounded-xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium">
<span>可以同时在多少设备上使用？</span>
<i class="fa fa-chevron-down text-primary transition-transform"></i>
</button>
<div class="accordion-content px-6 pb-6 text-gray-600">
不同套餐支持的设备数量不同：月度套餐支持1台设备，年度套餐支持5台设备，优惠套餐支持10台设备同时连接。支持Windows、macOS、Android、iOS等所有主流平台，同一账号可在不同设备间切换使用。
</div>
</div>
<div class="accordion bg-white rounded-xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium">
<span>退款政策是怎样的？</span>
<i class="fa fa-chevron-down text-primary transition-transform"></i>
</button>
<div class="accordion-content px-6 pb-6 text-gray-600">
我们提供30天无理由退款保证。如果您在购买后30天内对服务不满意，可随时联系客服申请全额退款，无需说明理由。年度套餐和优惠套餐超过30天后可按剩余使用时长比例退款。
</div>
</div>
<div class="accordion bg-white rounded-xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium">
<span>如何解决连接不稳定的问题？</span>
<i class="fa fa-chevron-down text-primary transition-transform"></i>
</button>
<div class="accordion-content px-6 pb-6 text-gray-600">
连接不稳定通常可通过以下方式解决：1) 切换到距离更近的节点；2) 更换VPN协议（UDP/TCP/ICMP）；3) 关闭本地防火墙或杀毒软件；4) 更新客户端到最新版本。如问题仍未解决，可联系24/7在线客服获取技术支持。
</div>
</div>
</div>
</div>
</section>
<footer class="bg-dark text-white py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold text-primary mb-4">墨桅博客</h3>
<p class="text-gray-400 mb-4">点亮世界，探索网络自由</p>
<div class="flex space-x-4">
<a href="https://www.jetmast.com" class="text-gray-400 hover:text-primary transition-colors">
<i class="fa fa-weixin text-xl"></i>
</a>
<a href="https://www.jetmast.com" class="text-gray-400 hover:text-primary transition-colors">
<i class="fa fa-weibo text-xl"></i>
</a>
<a href="https://www.jetmast.com" class="text-gray-400 hover:text-primary transition-colors">
<i class="fa fa-twitter text-xl"></i>
</a>
<a href="https://www.jetmast.com" class="text-gray-400 hover:text-primary transition-colors">
<i class="fa fa-telegram text-xl"></i>
</a>
</div>
</div>
<div>
<h4 class="font-bold mb-4">快速链接</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="#features" class="hover:text-primary transition-colors">功能介绍</a></li>
<li><a href="#download" class="hover:text-primary transition-colors">客户端下载</a></li>
<li><a href="#pricing" class="hover:text-primary transition-colors">价格方案</a></li>
<li><a href="#faq" class="hover:text-primary transition-colors">常见问题</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">客户支持</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="https://www.jetmast.com" class="hover:text-primary transition-colors">联系我们</a></li>
<li><a href="https://www.jetmast.com" class="hover:text-primary transition-colors">帮助中心</a></li>
<li><a href="https://www.jetmast.com" class="hover:text-primary transition-colors">隐私政策</a></li>
<li><a href="https://www.jetmast.com" class="hover:text-primary transition-colors">服务条款</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">联系我们</h4>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center">
<a href="https://wpa.qq.com/msgrd?v=3&uin=910049360&site=qq&menu=yes" target="_blank" class="text-gray-400 hover:text-primary transition-colors">
<i class="fa fa-qq mr-2 text-primary"></i> 910049360
</a>
</li>
<li class="flex items-center"><i class="fa fa-headphones mr-2 text-primary"></i> 24/7 在线客服</li>
<li class="flex items-center"><i class="fa fa-map-marker mr-2 text-primary"></i> 中国香港中环皇后大道</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
<p>© 2025 墨桅博客 版权所有 | 东方智慧，连接世界</p>
</div>
</div>
</footer>
<script>
document.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', () => {
const accordion = header.parentElement;
accordion.classList.toggle('accordion-active');
const icon = header.querySelector('i');
icon.style.transform = accordion.classList.contains('accordion-active')
? 'rotate(180deg)'
: 'rotate(0)';
document.querySelectorAll('.accordion').forEach(item => {
if (item !== accordion && item.classList.contains('accordion-active')) {
item.classList.remove('accordion-active');
item.querySelector('i').style.transform = 'rotate(0)';
}
});
});
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('shadow-md');
header.classList.remove('shadow-sm');
} else {
header.classList.remove('shadow-md');
header.classList.add('shadow-sm');
}
});
</script>
</body>
</html>
请登录后发表评论
注册
停留在世界边缘，与之惜别