You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
232 lines
7.1 KiB
232 lines
7.1 KiB
<!DOCTYPE html> |
|
<html lang="zh-CN"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>数字督查插件下载</title> |
|
<style> |
|
body { |
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
background-color: #f9f9f9; |
|
color: #000; |
|
margin: 0; |
|
padding: 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
height: 100vh; |
|
text-align: center; |
|
} |
|
|
|
.container { |
|
background: #fff; |
|
padding: 3rem; |
|
border-radius: 18px; |
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); |
|
max-width: 500px; |
|
width: 100%; |
|
} |
|
|
|
h1 { |
|
font-size: 2.5rem; |
|
margin-bottom: 2rem; |
|
color: #007aff; |
|
font-weight: 600; |
|
} |
|
|
|
@keyframes smooth-gradient { |
|
0% { |
|
background-position: 0% 50%; |
|
} |
|
100% { |
|
background-position: 100% 50%; |
|
} |
|
} |
|
|
|
#downloadBtn { |
|
background-color: #007aff; |
|
color: white; |
|
border: none; |
|
padding: 1.2rem 2.5rem; |
|
font-size: 1.1rem; |
|
border-radius: 24px; |
|
cursor: pointer; |
|
transition: background-color 0.3s ease; |
|
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2); |
|
display: inline-flex; |
|
align-items: center; |
|
} |
|
|
|
#downloadBtn:hover { |
|
background: linear-gradient(270deg, #fe0000, #ff5d00, #ffff00, #fe0000); |
|
background-size: 400% 400%; |
|
animation: smooth-gradient 3s ease infinite; |
|
} |
|
|
|
#downloadBtn:active, #downloadBtn:focus { |
|
animation: none; |
|
background-color: #007aff; |
|
} |
|
|
|
.info { |
|
margin-top: 2rem; |
|
font-size: 0.9rem; |
|
color: #888; |
|
} |
|
|
|
.info p { |
|
margin: 0.7rem 0; |
|
} |
|
|
|
.instructions { |
|
margin-top: 3rem; |
|
font-size: 0.9rem; |
|
color: #555; |
|
text-align: left; |
|
line-height: 1.8; |
|
} |
|
|
|
.instructions h2 { |
|
font-size: 1.3rem; |
|
color: #007aff; |
|
margin-bottom: 1rem; |
|
font-weight: 600; |
|
} |
|
|
|
.instructions p { |
|
position: relative; |
|
padding-left: 2rem; |
|
} |
|
|
|
.instructions p::before { |
|
content: counter(step-counter); |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
color: white; |
|
background-color: #007aff; |
|
width: 20px; |
|
height: 20px; |
|
border-radius: 50%; |
|
text-align: center; |
|
line-height: 20px; |
|
font-size: 0.9rem; |
|
} |
|
|
|
.instructions { |
|
counter-reset: step-counter; |
|
} |
|
|
|
.instructions p { |
|
counter-increment: step-counter; |
|
} |
|
|
|
/* 新增样式 */ |
|
.browser-nav { |
|
display: flex; |
|
justify-content: center; |
|
gap: 10px; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.browser-btn { |
|
padding: 0.5rem 1.5rem; |
|
border: 1px solid #ddd; |
|
border-radius: 8px; |
|
cursor: pointer; |
|
font-size: 0.9rem; |
|
background-color: #fff; |
|
transition: background-color 0.3s ease-out, color 0.3s ease-out; |
|
} |
|
|
|
.browser-btn.active { |
|
background-color: #007aff; |
|
color: white; |
|
border-color: #007aff; |
|
} |
|
|
|
.install-content { |
|
display: none; |
|
} |
|
|
|
.install-content.active { |
|
display: block; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>欢迎使用数字督查插件</h1> |
|
<button id="downloadBtn"> |
|
<span class="download-logo"></span> 点此下载插件 |
|
</button> |
|
<div class="info"> |
|
<p>版本号 : 1.0.1</p> |
|
<p>更新时间 : 2025年2月20日</p> |
|
<p>兼容内核 : Chromium 88及以上</p> |
|
<p>©Copr. 长沙创客</p> |
|
</div> |
|
|
|
<div class="instructions"> |
|
<h2>插件安装方法</h2> |
|
<div class="browser-nav"> |
|
<button class="browser-btn active" data-browser="native">国产浏览器</button> |
|
<button class="browser-btn" data-browser="chrome">Chrome浏览器</button> |
|
<button class="browser-btn" data-browser="edge">Edge浏览器</button> |
|
</div> |
|
|
|
<!-- 国产浏览器安装方法 --> |
|
<div class="install-content active" id="native"> |
|
<p>下载插件（crx 文件）后，找到下载的文件。</p> |
|
<p>启动浏览器，将下载好的 crx 文件拖动至浏览器页面。</p> |
|
<p>松开鼠标，3秒内系统将弹出“添加数字督察”提示框。</p> |
|
<p>点击“添加”按钮，即可完成插件安装（或升级）操作。</p> |
|
</div> |
|
|
|
<!-- Chrome浏览器安装方法 --> |
|
<div class="install-content" id="chrome"> |
|
<p>在浏览器地址栏输入 <b>chrome://extensions/</b> 并按下回车键，打开扩展程序页面。</p> |
|
<p>打开右上方的 “开发者模式” 开关。</p> |
|
<p>将下载的 crx 插件后缀名改为 <b>.zip</b>，并解压成文件夹。</p> |
|
<p>点击浏览器左上方 “加载已解压的扩展程序” 按钮，选择刚才的文件夹。</p> |
|
</div> |
|
|
|
<!-- Edge浏览器安装方法 --> |
|
<div class="install-content" id="edge"> |
|
<p>在浏览器地址栏输入 <b>edge://extensions/</b> 并按下回车键，打开扩展页面。</p> |
|
<p>打开左侧的 “开发人员模式” 开关。</p> |
|
<p>将下载的 crx 插件拖动到浏览器框内。</p> |
|
<p>在弹出框里点击 “添加扩展” 即可完成插件安装（或升级）操作。</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document.getElementById('downloadBtn').addEventListener('click', () => { |
|
window.location.href = 'http://65.47.6.108/extension/shuziducha.crx'; |
|
}); |
|
|
|
// 浏览器按钮点击事件 |
|
document.querySelectorAll('.browser-btn').forEach(button => { |
|
button.addEventListener('click', () => { |
|
// 移除所有按钮的active类 |
|
document.querySelectorAll('.browser-btn').forEach(btn => { |
|
btn.classList.remove('active'); |
|
}); |
|
|
|
// 移除所有安装内容的active类 |
|
document.querySelectorAll('.install-content').forEach(content => { |
|
content.classList.remove('active'); |
|
}); |
|
|
|
// 添加当前按钮的active类 |
|
button.classList.add('active'); |
|
|
|
// 显示对应的内容 |
|
const browserType = button.dataset.browser; |
|
document.getElementById(browserType).classList.add('active'); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html>
|
|
|