587 lines
17 KiB
HTML
587 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<meta name="theme-color" content="#1a1a2e" />
|
||
<title>世博头条 - iOS 安装教程</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
|
||
"Microsoft YaHei", sans-serif;
|
||
color: #fff;
|
||
background: #0f0f23;
|
||
}
|
||
|
||
body {
|
||
min-height: 100vh;
|
||
background: linear-gradient(
|
||
160deg,
|
||
#1a1a2e 0%,
|
||
#16213e 50%,
|
||
#0f3460 100%
|
||
);
|
||
padding: 20px 20px 40px;
|
||
position: relative;
|
||
}
|
||
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
top: -100px;
|
||
left: -100px;
|
||
width: 400px;
|
||
height: 400px;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(73, 105, 255, 0.25) 0%,
|
||
transparent 70%
|
||
);
|
||
filter: blur(40px);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.container {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.back-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.back-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 14px;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
border-radius: 12px;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
-webkit-appearance: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.back-btn:active {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
h1 {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.warning {
|
||
background: rgba(255, 200, 100, 0.1);
|
||
border: 1px solid rgba(255, 200, 100, 0.3);
|
||
border-radius: 14px;
|
||
padding: 14px 16px;
|
||
margin-bottom: 24px;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
color: rgba(255, 220, 150, 0.95);
|
||
}
|
||
|
||
.warning .title {
|
||
font-weight: 600;
|
||
color: #ffd070;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.download-card {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
border-radius: 16px;
|
||
padding: 18px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.download-card .row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.download-card .label {
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.download-card .value {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
text-align: right;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.download-card .download-row {
|
||
margin-top: 10px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 12px 20px;
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
border: none;
|
||
-webkit-appearance: none;
|
||
font-family: inherit;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #4969ff 0%, #6b89ff 100%);
|
||
box-shadow: 0 6px 18px rgba(73, 105, 255, 0.35);
|
||
}
|
||
|
||
.btn-primary:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.btn-ghost {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.step-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.step {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 16px;
|
||
padding: 18px 18px 18px 60px;
|
||
position: relative;
|
||
}
|
||
|
||
.step .num {
|
||
position: absolute;
|
||
left: 18px;
|
||
top: 18px;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #4969ff 0%, #ff49ad 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.step .step-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: #fff;
|
||
}
|
||
|
||
.step .step-desc {
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.step .step-desc a {
|
||
color: #6b89ff;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.step .step-desc strong {
|
||
color: #fff;
|
||
}
|
||
|
||
.step .step-desc code {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-family: ui-monospace, "SF Mono", Consolas, monospace;
|
||
}
|
||
|
||
.step ul {
|
||
margin-left: 18px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.step ul li {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.toggle-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border-radius: 12px;
|
||
padding: 4px;
|
||
}
|
||
|
||
.toggle-tab {
|
||
flex: 1;
|
||
padding: 10px;
|
||
text-align: center;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.toggle-tab.active {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
color: #fff;
|
||
}
|
||
|
||
.platform-content {
|
||
display: none;
|
||
}
|
||
|
||
.platform-content.active {
|
||
display: block;
|
||
}
|
||
|
||
.footer-tip {
|
||
margin-top: 28px;
|
||
padding: 16px;
|
||
background: rgba(255, 100, 100, 0.06);
|
||
border: 1px solid rgba(255, 100, 100, 0.2);
|
||
border-radius: 14px;
|
||
font-size: 12px;
|
||
line-height: 1.7;
|
||
color: rgba(255, 180, 180, 0.9);
|
||
}
|
||
|
||
h2 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin: 24px 0 12px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<div class="back-bar">
|
||
<a href="./" class="back-btn">‹ 返回下载页</a>
|
||
</div>
|
||
|
||
<h1>🍎 iOS 安装教程</h1>
|
||
<p class="subtitle">由于尚未上架 App Store，需通过自签方式安装</p>
|
||
|
||
<div class="warning">
|
||
<div class="title">⚠️ 重要提示（请先阅读）</div>
|
||
• 自签安装的 App **每 7 天会过期**，过期后需重新签名安装<br />
|
||
• 安装过程需要一台<strong>电脑（Mac 或 Windows）+ USB 数据线</strong
|
||
><br />
|
||
• 你需要使用<strong>自己的 Apple ID</strong> 登录签名工具<br />
|
||
• 嫌麻烦可以直接用<a
|
||
href="javascript:void(0)"
|
||
id="goH5"
|
||
style="color: #ffd070; text-decoration: underline"
|
||
>网页版</a
|
||
>
|
||
</div>
|
||
|
||
<div class="download-card" id="versionCard">
|
||
<div class="row">
|
||
<span class="label">版本号</span>
|
||
<span class="value" id="versionName">加载中...</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="label">发布日期</span>
|
||
<span class="value" id="releaseDate">-</span>
|
||
</div>
|
||
<div class="row download-row">
|
||
<button class="btn btn-primary" id="downloadIpa" style="width: 100%">
|
||
📥 下载 IPA 安装包
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>选择你的电脑系统</h2>
|
||
<div class="toggle-tabs">
|
||
<div class="toggle-tab active" data-platform="windows">🪟 Windows</div>
|
||
<div class="toggle-tab" data-platform="mac">💻 Mac</div>
|
||
</div>
|
||
|
||
<!-- Windows 教程 -->
|
||
<div class="platform-content active" data-platform="windows">
|
||
<div class="step-list">
|
||
<div class="step">
|
||
<div class="num">1</div>
|
||
<div class="step-title">下载安装 Sideloadly</div>
|
||
<div class="step-desc">
|
||
在电脑上访问
|
||
<a href="https://sideloadly.io/" target="_blank">sideloadly.io</a>
|
||
，下载并安装 Sideloadly（Windows 版）。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">2</div>
|
||
<div class="step-title">连接 iPhone 到电脑</div>
|
||
<div class="step-desc">
|
||
使用 USB 数据线连接 iPhone，首次连接需要在 iPhone
|
||
上点击<strong>"信任此电脑"</strong>。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">3</div>
|
||
<div class="step-title">下载 IPA 文件到电脑</div>
|
||
<div class="step-desc">
|
||
将上方的 IPA 文件下载到电脑（注意：要在电脑上下载，不是手机上）。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">4</div>
|
||
<div class="step-title">打开 Sideloadly 拖入 IPA</div>
|
||
<div class="step-desc">
|
||
打开 Sideloadly，把刚才下载的 IPA
|
||
文件<strong>拖到主界面</strong>。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">5</div>
|
||
<div class="step-title">输入 Apple ID 开始签名</div>
|
||
<div class="step-desc">
|
||
在 Apple ID 输入框中输入你的 Apple ID 邮箱，点击
|
||
<strong>Start</strong> 按钮， 弹出密码框时输入 Apple ID
|
||
密码（建议提前在
|
||
<a href="https://appleid.apple.com/" target="_blank"
|
||
>appleid.apple.com</a
|
||
>
|
||
生成<strong>专用密码</strong>）。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">6</div>
|
||
<div class="step-title">在 iPhone 上信任开发者</div>
|
||
<div class="step-desc">
|
||
签名安装完成后，打开 iPhone：<br />
|
||
<code>设置 → 通用 → VPN与设备管理</code><br />
|
||
找到你的 Apple ID 邮箱，点击进入 → 点<strong>"信任"</strong>。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">7</div>
|
||
<div class="step-title">打开 App 使用</div>
|
||
<div class="step-desc">
|
||
现在可以打开 App 正常使用了。<strong>7 天后 App 会失效</strong
|
||
>，需要重新执行步骤 4-6。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mac 教程 -->
|
||
<div class="platform-content" data-platform="mac">
|
||
<div class="step-list">
|
||
<div class="step">
|
||
<div class="num">1</div>
|
||
<div class="step-title">安装 Sideloadly 或 AltStore</div>
|
||
<div class="step-desc">
|
||
推荐
|
||
<a href="https://sideloadly.io/" target="_blank">Sideloadly</a> 或
|
||
<a href="https://altstore.io/" target="_blank">AltStore</a>。 Mac
|
||
用户也可以直接用 Xcode 来签名（需要登录 Apple ID）。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">2</div>
|
||
<div class="step-title">连接 iPhone</div>
|
||
<div class="step-desc">
|
||
USB 连接 iPhone，iPhone 上点<strong>"信任此电脑"</strong>。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">3</div>
|
||
<div class="step-title">下载并拖入 IPA</div>
|
||
<div class="step-desc">
|
||
下载 IPA 到 Mac，打开 Sideloadly 拖入 IPA 文件。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">4</div>
|
||
<div class="step-title">输入 Apple ID 签名</div>
|
||
<div class="step-desc">
|
||
登录你的 Apple ID 后点 Start，等待签名安装完成。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">5</div>
|
||
<div class="step-title">iPhone 上信任开发者</div>
|
||
<div class="step-desc">
|
||
<code>设置 → 通用 → VPN与设备管理</code><br />
|
||
找到你的 Apple ID → 点<strong>"信任"</strong>。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="num">6</div>
|
||
<div class="step-title">完成</div>
|
||
<div class="step-desc">
|
||
正常打开 App 即可使用。<strong>每 7 天需要重新签名一次</strong>。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-tip">
|
||
🤔 <strong>不想这么麻烦？</strong><br />
|
||
• 直接用<a
|
||
href="javascript:void(0)"
|
||
id="goH5Bottom"
|
||
style="color: #ffb0b0; text-decoration: underline"
|
||
>网页版</a
|
||
>，无需安装<br />
|
||
• 等 App 上架 App Store 后即可一键下载（无需自签）
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const CONFIG = {
|
||
apiBase: "",
|
||
h5Url: "",
|
||
appName: "世博头条",
|
||
};
|
||
|
||
// 从接口拉取站点配置
|
||
async function loadSiteConfig() {
|
||
try {
|
||
const res = await fetch(`${CONFIG.apiBase}/api/index/config`);
|
||
const json = await res.json();
|
||
if (json.code !== 1) return;
|
||
const data = json.data || {};
|
||
if (data.website?.shop_name) {
|
||
CONFIG.appName = data.website.shop_name;
|
||
document.title = `${CONFIG.appName} - iOS 安装教程`;
|
||
}
|
||
if (data.webPage?.page_url) {
|
||
CONFIG.h5Url = data.webPage.page_url;
|
||
}
|
||
} catch (e) {
|
||
console.warn("加载站点配置失败:", e);
|
||
}
|
||
}
|
||
loadSiteConfig();
|
||
|
||
// 平台切换
|
||
document.querySelectorAll(".toggle-tab").forEach((tab) => {
|
||
tab.addEventListener("click", () => {
|
||
const platform = tab.dataset.platform;
|
||
document
|
||
.querySelectorAll(".toggle-tab")
|
||
.forEach((t) =>
|
||
t.classList.toggle("active", t.dataset.platform === platform),
|
||
);
|
||
document
|
||
.querySelectorAll(".platform-content")
|
||
.forEach((c) =>
|
||
c.classList.toggle("active", c.dataset.platform === platform),
|
||
);
|
||
});
|
||
});
|
||
|
||
// 跳 H5
|
||
const goH5 = () => {
|
||
if (!CONFIG.h5Url) {
|
||
alert("正在加载配置，请稍后重试");
|
||
return;
|
||
}
|
||
location.href = CONFIG.h5Url;
|
||
};
|
||
document.getElementById("goH5").onclick = goH5;
|
||
document.getElementById("goH5Bottom").onclick = goH5;
|
||
|
||
// 拉版本信息
|
||
async function loadIosVersion() {
|
||
try {
|
||
const res = await fetch(`${CONFIG.apiBase}/api/appVersion/latest`);
|
||
const json = await res.json();
|
||
if (json.code !== 1) throw new Error(json.msg || "请求失败");
|
||
const ios = json.data?.ios;
|
||
if (ios && ios.download_url) {
|
||
document.getElementById("versionName").textContent =
|
||
`v${ios.version_name}`;
|
||
if (ios.create_time) {
|
||
document.getElementById("releaseDate").textContent =
|
||
ios.create_time.split(" ")[0];
|
||
}
|
||
document.getElementById("downloadIpa").onclick = () => {
|
||
window.location.href = ios.download_url;
|
||
};
|
||
} else {
|
||
document.getElementById("versionName").textContent =
|
||
"暂无 iOS 版本";
|
||
const btn = document.getElementById("downloadIpa");
|
||
btn.textContent = "暂无可下载的 IPA";
|
||
btn.disabled = true;
|
||
btn.style.opacity = "0.5";
|
||
btn.style.cursor = "not-allowed";
|
||
}
|
||
} catch (e) {
|
||
console.error("获取版本信息失败:", e);
|
||
document.getElementById("versionName").textContent = "加载失败";
|
||
}
|
||
}
|
||
|
||
loadIosVersion();
|
||
</script>
|
||
</body>
|
||
</html>
|