请添加要对比的客户端

点击选择

VS

点击选择

// 保存每个框选择的客户端 let lastSelection = { logo1: null, logo2: null }; // 打开模态框 function openModal(logoId) { console.log(`打开模态框: ${logoId}`); // 调试信息，查看点击时是否触发 const modalId = logoId === ‘logo1’ ? ‘myModal1’ : ‘myModal2’; const modal = document.getElementById(modalId); modal.style.display = “block”; // 显示模态框 window.selectedLogo = logoId; // 保存哪个 logo 被点击 } // 关闭模态框 function closeModal(modalId) { const modal = document.getElementById(modalId); modal.style.display = “none”; // 隐藏模态框 } // 选择客户端并替换对应的 logo 和名称 function selectClient(logoId, client) { const logoMap = { “clash-for-windows”: { logo: “https://clashmeta.me/wp-content/uploads/logo.png”, name: “Clash for Windows” }, “clash-verge-rev”: { logo: “https://clashmeta.me/wp-content/uploads/Clash-Verge-Rev-Logo.png”, name: “Clash Verge Rev” }, “clash-verge”: { logo: “https://clashmeta.me/wp-content/uploads/clash-verge-logo.png”, name: “Clash Verge” }, “flclash”: { logo: “https://clashmeta.me/wp-content/uploads/FlClash-logo.png”, name: “FlClash” }, “mihomo-party”: { logo: “https://clashmeta.me/wp-content/uploads/Mihomo-Party-logo.png”, name: “Mihomo Party” }, “clash-nyanpasu”: { logo: “https://clashmeta.me/wp-content/uploads/Clash-Nyanpasu-Logo.png”, name: “Clash Nyanpasu” }, “clashx”: { logo: “https://clashmeta.me/wp-content/uploads/ClashX-Pro-logo.png”, name: “ClashX” }, “clashx-pro”: { logo: “https://clashmeta.me/wp-content/uploads/ClashX-Pro-logo.png”, name: “ClashX Pro” }, “clashx-meta”: { logo: “https://clashmeta.me/wp-content/uploads/clashx-meta-logo.png”, name: “ClashX Meta” }, “clash-for-android”: { logo: “https://clashmeta.me/wp-content/uploads/logo.png”, name: “Clash for Android” }, “clash-meta-for-android”: { logo: “https://clashmeta.me/wp-content/uploads/clashx-meta-logo.png”, name: “Clash Meta for Android” }, “shadowrocket”: { logo: “https://clashmeta.me/wp-content/uploads/Shadowrocket-Logo.png”, name: “Shadowrocket” }, “quantumult-x”: { logo: “https://clashmeta.me/wp-content/uploads/Quantumult-X-Logo.png”, name: “Quantumult X” }, “stash”: { logo: “https://clashmeta.me/wp-content/uploads/Stash-Logo.png”, name: “Stash” }, “v2rayu”: { logo: “https://clashmeta.me/wp-content/uploads/V2rayU-Logo.png”, name: “V2rayU” }, “v2rayn”: { logo: “https://clashmeta.me/wp-content/uploads/V2rayN-logo.png”, name: “V2rayN” }, “v2rayng”: { logo: “https://clashmeta.me/wp-content/uploads/v2rayNG-logo.png”, name: “V2rayNG” } }; const selectedLogo = logoMap[client]; // 更新选择框内容 document.getElementById(logoId).style.backgroundImage = `url(${selectedLogo.logo})`; document.getElementById(logoId.replace(‘logo’, ‘name’)).textContent = selectedLogo.name; // 更新 lastSelection if (logoId === ‘logo1’) { lastSelection.logo1 = selectedLogo; } else { lastSelection.logo2 = selectedLogo; } // 检查是否选择了相同的客户端 if (lastSelection.logo1 && lastSelection.logo2) { if (lastSelection.logo1.name === lastSelection.logo2.name) { alert(“客户端不能相同，请重新选择”); resetSelection(logoId); // 重置选择框 } } closeModal(logoId === ‘logo1’ ? ‘myModal1’ : ‘myModal2’); // 关闭相应的模态框 } // 重置选择框 function resetSelection(logoId) { lastSelection[logoId] = null; document.getElementById(logoId).style.backgroundImage = “”; // 清空背景图 document.getElementById(logoId.replace(‘logo’, ‘name’)).textContent = “点击选择客户端”; // 清空名称 } // 查看对比按钮功能 function compareSelection() { if (lastSelection.logo1 && lastSelection.logo2) { const client1 = lastSelection.logo1.name.toLowerCase().replace(/ /g, ‘-‘); // 转换为 URL 格式 const client2 = lastSelection.logo2.name.toLowerCase().replace(/ /g, ‘-‘); // 转换为 URL 格式 const url = `https://clashmeta.me/${client1}-vs-${client2}`; // 拼接对比页面的 URL window.location.href = url; // 跳转到该页面 } else { alert(“请先选择两个客户端进行对比！”); } } /* Hero Section 样式 */ .hero-header { background-color: #4047a1; color: white; text-align: center; padding: 150px 20px; } .hero-content { max-width: 980px; margin: 0 auto; padding: 20px; } .logos { display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: 20px; } .logo-item { text-align: center; cursor: pointer; } /* 设置加号符号的图片 */ .add-logo { width: 130px; height: 130px; border-radius: 10px; display: flex; justify-content: center; align-items: center; background-image: url(‘https://clashmeta.me/wp-content/uploads/tianjia.png’); /* 使用指定的图片 */ background-size: contain; background-repeat: no-repeat; cursor: pointer; } .vs-text { font-size: 24px; font-weight: 700; color: white; } .logo-name { font-size: 16px; color: white; margin-top: 10px; font-weight: 600; } .hero-title { font-size: 40px; font-weight: 700; line-height: 1.25; margin: 20px 0; color: white; } .compare-btn { font-size: 16px; font-weight: 600; color: white; background-color: #6a7df5; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; margin-top: 20px; transition: background-color 0.3s ease; } .compare-btn:hover { background-color: #9aa4ff; } .hero-note { background-color: #f8d7da; color: #842029; padding: 14px; border-radius: 10px; font-size: 14px; max-width: 800px; margin: 0 auto; } /* 模态框样式 */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); padding-top: 60px; } .modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* 使用 CSS Grid 来确保每行数量一致 */ .client-options { display: grid; /* 使用 grid 布局 */ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 每行最多4个项，自动调整 */ gap: 20px; /* 项目之间的间距 */ margin-top: 50px; } .client-option { text-align: center; cursor: pointer; } .client-option img { width: 80px; height: 80px; border-radius: 10px; margin-bottom: 10px; } .client-option p { font-size: 14px; margin-top: 8px; color: #333; } function switchPlatform(platform) { // 隐藏所有平台的卡片 const allCards = document.querySelectorAll(‘.account-card’); allCards.forEach(card => { card.style.display = ‘none’; // 隐藏所有卡片 }); // 显示选中的平台的卡片 const selectedCards = document.querySelectorAll(`.${platform}`); selectedCards.forEach(card => { card.style.display = ‘block’; // 显示对应平台的卡片 }); // 更新按钮颜色 const buttons = document.querySelectorAll(‘.platform-btn’); buttons.forEach(button => { button.style.backgroundColor = ‘#d1d5db’; // 默认按钮颜色（未选中） button.style.color = ‘#374151’; // 默认文字颜色（未选中） }); // 选中平台按钮的颜色变化 const activeButton = document.querySelector(`.platform-btn.${platform}`); activeButton.style.backgroundColor = ‘#4CAF50’; // 选中按钮的颜色（绿色） activeButton.style.color = ‘#ffffff’; // 选中按钮的文字颜色（白色） // 更新平台推荐信息 const platformDescription = document.querySelector(‘.platform-description’); if (platform === ‘windows’) { platformDescription.innerHTML = ‘Windows 推荐使用 CFW（Clash for Windows），配置简单适合新手使用。’; } else if (platform === ‘mac’) { platformDescription.innerHTML = ‘ClashX、ClashX Pro 是针对 Mac 系统开发的，也是 Mac 系统上使用最多的软件。’; } else if (platform === ‘android’) { platformDescription.innerHTML = ‘Android 用户可选择多款 Clash 兼容客户端，如官方的 Clash for Android，或经过修改优化的版本。’; } else if (platform === ‘ios’) { platformDescription.innerHTML = ‘iOS 系统受限较多，推荐使用支持 Clash 配置的第三方软件，如 Shadowrocket、Stash 和 Quantumult X。’; } } // 默认显示Windows平台的卡片 window.onload = function() { switchPlatform(‘windows’); }

客户端大全

:root { –fz-h1: 40px; –fz-h2: 32px; –fz-h3: 24px; –fz-p: 20px; –lh-title: 1.25; –lh-text: 1.75; –c-hero: #4047a1; –c-primary: #6a7df5; –c-primary-2: #9aa4ff; –c-accent: #4047a1; –c-border: #e2e2e2; –c-card: #fafafa; } @media (max-width: 768px) { :root { –fz-h1: 32px; –fz-h2: 28px; –fz-h3: 24px; –fz-p: 18px; } } .download-section, .faq-section { max-width: 980px; margin: 50px auto; padding: 0 20px; text-align: center; } .download-section h2, .faq-title { font-size: var(–fz-h2); line-height: var(–lh-title); margin: 0 0 14px; font-weight: 700; color: #222; } .account-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; } .account-card { background: var(–c-card); border: 1px solid var(–c-border); border-radius: 12px; padding: 22px; position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .account-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); } .card-logo { width: 54px; height: 54px; border-radius: 14px; border: 1px solid #ddd; background: #fff; margin: 0 auto 12px; object-fit: contain; } .account-card h3 { font-size: var(–fz-h3); line-height: 1.35; margin: 0 0 10px; font-weight: 700; color: #222; } .meta-line { font-size: var(–fz-p); line-height: var(–lh-text); color: #555; margin: 0 0 10px; } .tag-row { margin: 0 0 10px; } .tag { display: inline-block; background: #eef2ff; color: var(–c-accent); font-size: 13px; padding: 4px 10px; border-radius: 999px; margin: 0 6px 6px 0; } .btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 10px 16px; background: var(–c-primary); color: #fff; border-radius: 6px; font-size: 15px; text-decoration: none; line-height: 1; } .btn:hover { opacity: .92; } .btn-secondary { background: var(–c-primary-2); } .btn-ghost { background: #fff; color: var(–c-accent); border: 1px solid #cfd6ff; } .btn-disabled { background: #e5e7eb; color: #64748b; cursor: not-allowed; } .ribbon { position: absolute; top: 14px; right: -48px; width: 160px; background: linear-gradient(135deg, #ff7a18, #ff3d00); color: #fff; font-size: 14px; font-weight: 700; text-align: center; padding: 6px 0; transform: rotate(45deg); pointer-events: none; } /* Platform buttons styles */ .platform-btn { padding: 10px 20px; margin: 5px; background-color: #d1d5db; color: #374151; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background-color 0.3s, color 0.3s; } .platform-btn:hover { background-color: #4CAF50; color: white; } .platform-buttons { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }

滚动至顶部