1494 lines
42 KiB
HTML
Executable File
1494 lines
42 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<script defer src="https://tj.vcck.cn/script.js" data-website-id="a06bbe36-03f8-4f84-987c-99d19567c512"></script>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>NEXT Store</title>
|
||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" cache="force-cache">
|
||
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" cache="force-cache">
|
||
<link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" cache="force-cache">
|
||
<link rel="apple-touch-icon" href="{{ url_for('static', filename='favicon.ico') }}" cache="force-cache">
|
||
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" cache="force-cache">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/all.min.css') }}" cache="force-cache">
|
||
<meta http-equiv="Content-Security-Policy" content="
|
||
default-src 'self';
|
||
script-src 'self' 'unsafe-inline' 'unsafe-eval' nextstore.obs.cn-east-3.myhuaweicloud.com *.vcck.cn *.hc-cdn.com *.hicloud.com *.baidu.com *.hispace.dbankcloud.cn cdnjs.cloudflare.com ;
|
||
style-src 'self' 'unsafe-inline' cdnjs.cloudflare.com nextstore.obs.cn-east-3.myhuaweicloud.com;
|
||
img-src 'self' data: https:;
|
||
font-src 'self' data: cdnjs.cloudflare.com;
|
||
connect-src 'self' *.vcck.cn *.hc-cdn.com *.hicloud.com *.baidu.com *.hispace.dbankcloud.cn nextstore.obs.cn-east-3.myhuaweicloud.com;">
|
||
<style>
|
||
html { display: none; }
|
||
</style>
|
||
<script>
|
||
if (self === top) {
|
||
document.documentElement.style.display = 'block';
|
||
} else {
|
||
top.location = self.location;
|
||
}
|
||
</script>
|
||
<style>
|
||
/* 全局应用名称样式 */
|
||
.app-card .app-info h3,
|
||
.app-tile .app-info h3,
|
||
.app-item .app-info h4,
|
||
.app-name-category h4 {
|
||
font-size: 11px;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
height: auto;
|
||
max-height: 2.4em; /* 允许显示两行文字 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; /* 限制最多显示两 */
|
||
-webkit-box-orient: vertical;
|
||
word-wrap: break-word; /* 允许单词内 */
|
||
word-break: break-all; /* 允许在任意字符间换行 */
|
||
width: 100%; /* 确保宽度占满容器 */
|
||
padding: 0; /* 移除内边距 */
|
||
box-sizing: border-box; /* 使用 border-box 盒模型 */
|
||
}
|
||
|
||
/* 英文应用名称限制 */
|
||
.app-info h3:lang(en),
|
||
.app-info h4:lang(en) {
|
||
max-width: 9ch; /* 限制英文宽度为9个字符 */
|
||
white-space: nowrap; /* 不换行 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
text-align: center; /* 短名称居中显示 */
|
||
direction: ltr; /* 从左到右显示 */
|
||
}
|
||
|
||
/* 中文应用名称限制 */
|
||
.app-info h3:lang(zh),
|
||
.app-info h4:lang(zh) {
|
||
max-width: 7em; /* 限制中文宽度为7个字 */
|
||
white-space: nowrap; /* 不换行 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
text-align: center; /* 短名称居中显示 */
|
||
direction: ltr; /* 从左到右显示 */
|
||
}
|
||
|
||
/* 确保应用信息容器正确对齐 */
|
||
.app-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center; /* 居中对齐内容 */
|
||
width: 100%;
|
||
}
|
||
|
||
/* 长名称左对齐，短名称居中 */
|
||
.app-info h3,
|
||
.app-info h4 {
|
||
text-align: center; /* 默认居中 */
|
||
}
|
||
|
||
.app-info h3:not([style*="text-overflow: ellipsis"]),
|
||
.app-info h4:not([style*="text-overflow: ellipsis"]) {
|
||
text-align: center; /* 短名称居中 */
|
||
}
|
||
</style>
|
||
{% block head %}
|
||
<meta name="description" content="{{ settings.site_description if settings and settings.site_description else 'NEXT Store官网，鸿蒙应用上架查询平台' }}">
|
||
<meta name="keywords" content="{{ settings.site_keywords if settings and settings.site_keywords else '鸿蒙系统,鸿蒙原生应用, 纯血鸿蒙，单框架鸿蒙' }}">
|
||
<meta name="author" content="{{ settings.site_name if settings and settings.site_name else 'NEXT Store' }}">
|
||
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="{{ request.url }}">
|
||
<meta property="og:title" content="{{ settings.site_name if settings and settings.site_name else 'NEXT Store' }} - NEXT Store官网，鸿蒙应用上架查询平台">
|
||
<meta property="og:description" content="{{ settings.site_description if settings and settings.site_description else '全面的鸿蒙原生应用资源平台，鸿蒙系统,鸿蒙原生应用, 纯血鸿蒙，单框架鸿蒙' }}">
|
||
<meta property="og:image" content="{{ url_for('static', filename='logo.png') }}">
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:url" content="{{ request.url }}">
|
||
<meta name="twitter:title" content="{{ settings.site_name if settings and settings.site_name else 'NEXT Store' }} - NEXT Store官网，鸿蒙应用上架查询平台">
|
||
<meta name="twitter:description" content="{{ settings.site_description if settings and settings.site_description else '全面的鸿蒙原生应用资源平台。鸿蒙系统,鸿蒙原生应用, 纯血鸿蒙，单框架鸿蒙' }}">
|
||
<meta name="twitter:image" content="{{ url_for('static', filename='logo.png') }}">
|
||
{% endblock %}
|
||
<!-- 添加反爬虫 meta 标签 -->
|
||
<meta name="robots" content="noindex,nofollow">
|
||
|
||
<!-- 添加基本的反爬虫检测 -->
|
||
<script>
|
||
// 检测是否是真实浏览器，使用更温和的检测方法
|
||
(function detectBot() {
|
||
try {
|
||
// 检查是否支持基本的浏览器功能
|
||
if (!window.localStorage || !window.sessionStorage) {
|
||
// 如果不支持基本存储功能，可能是爬虫
|
||
window.location.href = '/error';
|
||
return;
|
||
}
|
||
|
||
// 检查是否有明显的自动化工具标记
|
||
const automationTools = [
|
||
'_phantom',
|
||
'callPhantom',
|
||
'__nightmare',
|
||
'__selenium_evaluate',
|
||
'__webdriver_evaluate'
|
||
];
|
||
|
||
for (let tool of automationTools) {
|
||
if (window[tool]) {
|
||
window.location.href = '/error';
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 检查是支持基本的DOM操作
|
||
if (!document.createElement || !document.querySelector) {
|
||
window.location.href = '/error';
|
||
return;
|
||
}
|
||
|
||
} catch (e) {
|
||
// 如果检测过程出错，记录错误但不阻止访问
|
||
console.error('Browser check error:', e);
|
||
}
|
||
})();
|
||
</script>
|
||
<style>
|
||
/* 全局样式 */
|
||
body {
|
||
background-color: #f5f5f7;
|
||
margin: 0;
|
||
padding: 0;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
/* 暗色模式全局样式 */
|
||
[data-theme="dark"] body {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
/* 确保所有内容区域也使用正确的背景色 */
|
||
[data-theme="dark"] .container,
|
||
[data-theme="dark"] main,
|
||
[data-theme="dark"] .content {
|
||
background-color: #1a1a1a;
|
||
}
|
||
</style>
|
||
<script>
|
||
// 立即执行主题初始化
|
||
(function() {
|
||
const theme = localStorage.getItem('theme') || 'light';
|
||
document.documentElement.setAttribute('data-theme', theme);
|
||
// 添加初始背景色样式
|
||
document.documentElement.style.backgroundColor = theme === 'dark' ? '#1a1a1a' : '#f5f5f7';
|
||
// 添加 body 的初始背景色
|
||
document.write(`<style>body { background-color: ${theme === 'dark' ? '#1a1a1a' : '#f5f5f7'}; }</style>`);
|
||
})();
|
||
</script>
|
||
|
||
<style>
|
||
html {
|
||
visibility: hidden;
|
||
background-color: #f5f5f7;
|
||
}
|
||
|
||
html[data-theme="dark"] {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
/* 页面准备好后显示 */
|
||
html.ready {
|
||
visibility: visible;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 在 DOMContentLoaded 后添加 ready 类
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
document.documentElement.classList.add('ready');
|
||
});
|
||
</script>
|
||
|
||
{% if settings and settings.grayscale_enabled == '1' %}
|
||
<style>
|
||
html {
|
||
filter: grayscale(100%);
|
||
-webkit-filter: grayscale(100%);
|
||
-moz-filter: grayscale(100%);
|
||
-ms-filter: grayscale(100%);
|
||
-o-filter: grayscale(100%);
|
||
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
|
||
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
|
||
-webkit-filter: grayscale(1);
|
||
}
|
||
</style>
|
||
{% endif %}
|
||
</head>
|
||
<body>
|
||
{% with messages = get_flashed_messages() %}
|
||
{% if messages %}
|
||
{% for message in messages %}
|
||
<div class="flash">{{ message }}</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endwith %}
|
||
|
||
{% block content %}{% endblock %}
|
||
|
||
{# 只在首页显示特别鸣谢 #}
|
||
{% if request.endpoint == 'index' %}
|
||
<div class="credits-section">
|
||
<div class="credits-header">
|
||
<h4>特别鸣谢</h4>
|
||
</div>
|
||
<div class="credits-container">
|
||
<div class="credits-track">
|
||
<div class="credits-content" id="credits-content">
|
||
<!-- 动态加载内容 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 使用严格模式
|
||
'use strict';
|
||
|
||
// 所有的事件监听器使用 addEventListener
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 初始化代码
|
||
});
|
||
|
||
// 避免使用 eval 和其他不安全的函数
|
||
|
||
// 获取并显示鸣谢用户
|
||
function loadCredits() {
|
||
fetch('/credits')
|
||
.then(response => response.json())
|
||
.then(credits => {
|
||
if (credits.length === 0) {
|
||
document.querySelector('.credits-section').style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
// 生成内容
|
||
const content = credits.map(credit => `
|
||
<a href="${credit.link || '#'}" class="credit-item" ${credit.link ? 'target="_blank"' : ''}>
|
||
<img src="${credit.avatar_url}" alt="${credit.name}">
|
||
<span>${credit.name}</span>
|
||
</a>
|
||
`).join('');
|
||
|
||
document.getElementById('credits-content').innerHTML = content;
|
||
|
||
// 设置动画
|
||
function startAnimation() {
|
||
const track = document.querySelector('.credits-track');
|
||
const contentWidth = document.getElementById('credits-content').offsetWidth;
|
||
const screenWidth = window.innerWidth;
|
||
const totalDistance = contentWidth + screenWidth;
|
||
// 加快速度，每100px取0.5秒
|
||
const duration = totalDistance / 200;
|
||
|
||
// 重置动画
|
||
track.style.animation = 'none';
|
||
track.offsetHeight; // 触发重排
|
||
track.style.animation = `scrollCredits ${duration}s linear`;
|
||
|
||
// 动画结束时重新开始
|
||
track.addEventListener('animationend', () => {
|
||
startAnimation();
|
||
}, { once: true });
|
||
}
|
||
|
||
// 开始第一次动画
|
||
setTimeout(startAnimation, 100);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading credits:', error);
|
||
document.querySelector('.credits-section').style.display = 'none';
|
||
});
|
||
}
|
||
|
||
// 页面加载时获取鸣谢用户
|
||
document.addEventListener('DOMContentLoaded', loadCredits);
|
||
|
||
// 窗口大小改变时重新加载
|
||
window.addEventListener('resize', loadCredits);
|
||
</script>
|
||
{% endif %}
|
||
|
||
{% block footer %}{% endblock %}
|
||
<footer class="footer">
|
||
<div class="footer-container">
|
||
<div class="footer-grid">
|
||
<div class="footer-column">
|
||
<h4 class="footer-column-title">关于 NEXT Store</h4>
|
||
<p class="footer-description">NEXT Store 是一个展示和分享应用的平台</p>
|
||
<div class="footer-links-group">
|
||
<a href="{{ url_for('terms') }}" class="footer-link">使用条款</a>
|
||
<a href="{{ url_for('cookie_policy') }}" class="footer-link">Cookie 政策</a>
|
||
<a href="{{ url_for('privacy') }}" class="footer-link">隐私政策</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h4 class="footer-column-title">联系我们</h4>
|
||
<div class="contact-methods">
|
||
<div class="contact-buttons">
|
||
{% if settings and settings.qq_group_link %}
|
||
<button class="contact-btn" onclick="showQQModal()" title="{{ settings.qq_group_text }}">
|
||
<i class="fab fa-qq"></i>
|
||
</button>
|
||
{% endif %}
|
||
|
||
{% if settings and settings.wechat_group_qrcode %}
|
||
<button class="contact-btn" onclick="showWeChatModal()" title="{{ settings.wechat_group_text }}">
|
||
<i class="fab fa-weixin"></i>
|
||
</button>
|
||
{% endif %}
|
||
|
||
{% if settings and settings.discord_link %}
|
||
<a href="{{ settings.discord_link }}" class="contact-btn" target="_blank" title="{{ settings.discord_text }}">
|
||
<i class="fab fa-discord"></i>
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
<p class="contact-email">邮箱：nvveex@petalmail.com</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h4 class="footer-column-title">法律信息</h4>
|
||
<div class="license-info">
|
||
<div class="license-icons">
|
||
<i class="fab fa-creative-commons"></i>
|
||
<i class="fab fa-creative-commons-by"></i>
|
||
<i class="fab fa-creative-commons-nc"></i>
|
||
<i class="fab fa-creative-commons-sa"></i>
|
||
</div>
|
||
<div class="license-text">
|
||
<span>本站内容采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a> 进行许可</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<div class="footer-bottom-content">
|
||
<div class="footer-links">
|
||
<div class="footer-copyright">© 2024-2025 NEXT Store. 保留所有权利</div>
|
||
<a href="https://tj.vcck.cn/share/B2yaueygUSZ9lxxx/nextmax.cn" target="_blank" rel="noopener" class="footer-link">
|
||
<i class="fas fa-chart-bar"></i> 网站统计
|
||
</a>
|
||
<span class="divider">|</span>
|
||
<a href="https://jk.vcck.cn/status/next" target="_blank" rel="noopener" class="footer-link">
|
||
<i class="fas fa-signal"></i> 监控状态
|
||
</a>
|
||
<span class="divider">|</span>
|
||
<span class="footer-text">本网站仅用于演示目的，所有展示的应用仅供参考</span>
|
||
{% if settings and settings.icp_number %}
|
||
<span class="divider">|</span>
|
||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="icp-link">{{ settings.icp_number }}</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<style>
|
||
/* 修改二维码样式，保持原始尺寸 */
|
||
.qr-code {
|
||
max-width: 100%; /* 改为100%最大宽度 */
|
||
height: auto; /* 高度自适应 */
|
||
margin: 0px auto;
|
||
display: block;
|
||
border-radius: 8px;
|
||
object-fit: contain; /* 保持图片比例 */
|
||
}
|
||
|
||
/* 调整弹窗内容区域的宽度以适应二维码 */
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 0;
|
||
width: 90%;
|
||
max-width: 400px; /* 增加最大宽度 */
|
||
position: relative;
|
||
animation: modalShow 0.3s ease;
|
||
}
|
||
|
||
/* 调整弹窗内容的内边距 */
|
||
.modal-body {
|
||
padding: 20px;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.footer {
|
||
background-color: #f8f9fa;
|
||
padding: 30px 0 20px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.footer-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 40px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.footer-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.footer-column-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.footer-description {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 15px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.footer-links-group {
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.footer-links-group .footer-link {
|
||
font-size: 14px;
|
||
color: #666;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.footer-links-group .footer-link:hover {
|
||
color: #007AFF;
|
||
}
|
||
|
||
.contact-methods {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.contact-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.contact-email {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.license-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.license-icons {
|
||
display: flex;
|
||
gap: 10px;
|
||
color: #666;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.license-text {
|
||
font-size: 14px;
|
||
color: #888; /* Softer gray tone */
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.license-text a {
|
||
color: #666; /* Slightly darker for better readability */
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.license-text a:hover {
|
||
color: #444;
|
||
}
|
||
|
||
/* Dark mode styles */
|
||
[data-theme="dark"] .license-text {
|
||
color: #999; /* Lighter gray for dark mode */
|
||
}
|
||
|
||
[data-theme="dark"] .license-text a {
|
||
color: #bbb;
|
||
text-decoration: none;
|
||
}
|
||
|
||
[data-theme="dark"] .license-text a:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
.footer-bottom {
|
||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.footer-bottom-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 20px; /* 增加间距 */
|
||
}
|
||
|
||
.footer-copyright {
|
||
font-size: 14px;
|
||
color: #666;
|
||
opacity: 0.8;
|
||
margin-right: 20px; /* 增加右侧间距 */
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.footer-links .footer-link,
|
||
.footer-links .icp-link {
|
||
color: #666;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: color 0.3s ease;
|
||
white-space: nowrap; /* 防止链接文字换行 */
|
||
}
|
||
|
||
.footer-links .footer-text {
|
||
color: #666;
|
||
font-size: 14px;
|
||
white-space: nowrap; /* 防止文字换行 */
|
||
}
|
||
|
||
.footer-links .divider {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.footer-links i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .footer-links .footer-link,
|
||
[data-theme="dark"] .footer-links .footer-text,
|
||
[data-theme="dark"] .footer-links .icp-link {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-links .footer-link:hover,
|
||
[data-theme="dark"] .footer-links .icp-link:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-links .divider {
|
||
color: #666;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.footer {
|
||
padding: 40px 0 20px;
|
||
}
|
||
|
||
.footer-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 30px;
|
||
}
|
||
|
||
.footer-column {
|
||
text-align: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-column-title {
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.footer-links-group {
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.contact-buttons {
|
||
justify-content: center;
|
||
}
|
||
|
||
.license-info {
|
||
align-items: center;
|
||
}
|
||
|
||
.license-icons {
|
||
justify-content: center;
|
||
}
|
||
|
||
.license-text {
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-bottom-content {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-copyright {
|
||
margin-right: 0;
|
||
text-align: center;
|
||
order: 2; /* 确保版权信息在底部 */
|
||
}
|
||
|
||
.footer-links {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
order: 1; /* 确保链接在版权信息之前 */
|
||
}
|
||
|
||
.footer-links .footer-link,
|
||
.footer-links .icp-link,
|
||
.footer-links .footer-text {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer-links .divider {
|
||
display: none; /* 移动端完全隐藏分隔符 */
|
||
}
|
||
|
||
.footer-links {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.footer-links > * {
|
||
margin: 5px 0; /* 为每个元素添加垂直间距 */
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕进一步优化 */
|
||
@media (max-width: 375px) {
|
||
.footer {
|
||
padding: 30px 0 15px;
|
||
}
|
||
|
||
.footer-grid {
|
||
gap: 20px;
|
||
}
|
||
|
||
.footer-column-title {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.footer-links-group .footer-link,
|
||
.license-text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.license-icons {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
<style>
|
||
|
||
|
||
/* 分享按钮样式 */
|
||
.share-button button {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: #fff;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
padding: 0;
|
||
}
|
||
|
||
.share-button button:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.share-button i {
|
||
font-size: 18px;
|
||
color: #333;
|
||
}
|
||
|
||
/* 主题切换按钮样式 */
|
||
.theme-toggle {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 提示框样式 */
|
||
.toast {
|
||
position: absolute;
|
||
right: 55px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: #fff;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.toast.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 暗色模式样式 */
|
||
[data-theme="dark"] .share-button button {
|
||
background: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .share-button i {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .theme-toggle {
|
||
background: #333;
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
<style>
|
||
/* 修改主题切换按钮样式 */
|
||
.themeToggle {
|
||
color: #333;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.themeToggle:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn {
|
||
position: relative;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn .themeToggleInput {
|
||
opacity: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
position: absolute;
|
||
transition: transform 0.4s ease;
|
||
transform: rotate(40deg);
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn svg .sunMoon {
|
||
transform-origin: center center;
|
||
transition: inherit;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn svg .sunRay {
|
||
transform-origin: center center;
|
||
transform: scale(0);
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn svg mask > circle {
|
||
transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
|
||
transform: translate(0px, 0px);
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn svg .sunRay2 {
|
||
animation-delay: 0.05s !important;
|
||
}
|
||
.st-sunMoonThemeToggleBtn svg .sunRay3 {
|
||
animation-delay: 0.1s !important;
|
||
}
|
||
.st-sunMoonThemeToggleBtn svg .sunRay4 {
|
||
animation-delay: 0.17s !important;
|
||
}
|
||
.st-sunMoonThemeToggleBtn svg .sunRay5 {
|
||
animation-delay: 0.25s !important;
|
||
}
|
||
.st-sunMoonThemeToggleBtn svg .sunRay6 {
|
||
animation-delay: 0.29s !important;
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg {
|
||
transform: rotate(90deg);
|
||
}
|
||
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg mask > circle {
|
||
transform: translate(16px, -3px);
|
||
}
|
||
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunMoon {
|
||
transform: scale(0.55);
|
||
}
|
||
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunRay {
|
||
animation: showRay1832 0.4s ease 0s 1 forwards;
|
||
}
|
||
|
||
@keyframes showRay1832 {
|
||
0% {
|
||
transform: scale(0);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
/* 暗色模式配 */
|
||
[data-theme="dark"] .themeToggle {
|
||
background: #333;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.themeToggle {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const themeToggle = document.getElementById('themeToggle');
|
||
|
||
// 设置初始状态
|
||
if (document.documentElement.getAttribute('data-theme') === 'dark') {
|
||
themeToggle.checked = true;
|
||
}
|
||
|
||
themeToggle.addEventListener('change', () => {
|
||
const newTheme = themeToggle.checked ? 'dark' : 'light';
|
||
|
||
// 设置主题
|
||
document.documentElement.setAttribute('data-theme', newTheme);
|
||
localStorage.setItem('theme', newTheme);
|
||
|
||
// 更新背景
|
||
document.documentElement.style.backgroundColor = newTheme === 'dark' ? '#1a1a1a' : '#f5f5f7';
|
||
document.body.style.backgroundColor = newTheme === 'dark' ? '#1a1a1a' : '#f5f5f7';
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- 在暗模式样式部分添加 credits-section 的样式 -->
|
||
<style>
|
||
/* 暗色模式下的 credits-section 样式 */
|
||
[data-theme="dark"] .credits-section {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
[data-theme="dark"] .credits-header {
|
||
background-color: #1a1a1a;
|
||
border-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .credits-container {
|
||
background: #1a1a1a;
|
||
border-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .credits-track {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
[data-theme="dark"] .credits-content {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
/* 添加滚动区域外的背景色 */
|
||
[data-theme="dark"] .credits-track::before,
|
||
[data-theme="dark"] .credits-track::after {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
/* 确保标题文字颜色正确 */
|
||
[data-theme="dark"] .credits-header h4 {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 确保鸣谢项样式正确 */
|
||
[data-theme="dark"] .credit-item {
|
||
background: #242424;
|
||
border-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .credit-item span {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .credit-item:hover {
|
||
background: #333;
|
||
}
|
||
</style>
|
||
|
||
<!-- 暗色模式下的 donors-section 样式 -->
|
||
<style>
|
||
[data-theme="dark"] .donors-section {
|
||
background: #1a1a1a;
|
||
border: 1px solid #1a1a1a; /* 添加周边框颜色 */
|
||
margin: 0px auto; /* 保持原有间距 */
|
||
}
|
||
|
||
[data-theme="dark"] .donors-wall {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
/* 确保 donors-section 内的卡片样式正确 */
|
||
[data-theme="dark"] .donor-card {
|
||
background: #242424;
|
||
border-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .donor-card:hover {
|
||
background: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .donor-name {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .donor-amount {
|
||
color: #007AFF; /* 保持原有的蓝色 */
|
||
}
|
||
|
||
[data-theme="dark"] .view-all-card {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .view-all-card:hover {
|
||
background: #333;
|
||
}
|
||
</style>
|
||
|
||
|
||
<!-- 在暗色模式样式部分添加 footer 的样式 -->
|
||
<style>
|
||
/* 暗色模式下的页脚样式 */
|
||
[data-theme="dark"] .footer {
|
||
background-color: #1a1a1a;
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-content {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-bottom {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-section h4 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-section p,
|
||
[data-theme="dark"] .footer-bottom p {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .license-info {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .license-icons i {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .license-text span {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .license-info a {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .license-info a:hover {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .analytics-link a {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .analytics-link a:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
</style>
|
||
|
||
<!-- 添加 footer 链接样式 -->
|
||
<style>
|
||
/* 修改 footer 链接样式 */
|
||
.footer-link {
|
||
color: #666;
|
||
text-decoration: none;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.footer-link:hover {
|
||
opacity: 0.8;
|
||
color: #666; /* 保持颜色不变，只改变透明度 */
|
||
}
|
||
|
||
.divider {
|
||
color: #666;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .footer-link {
|
||
color: #888;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-link:hover {
|
||
color: #888;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
[data-theme="dark"] .divider {
|
||
color: #888;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.footer-links .divider {
|
||
display: none; /* 完全隐藏分隔符 */
|
||
}
|
||
|
||
.footer-links {
|
||
flex-direction: row; /* 改为水平布局 */
|
||
flex-wrap: wrap; /* 允许换行 */
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.footer-links > * {
|
||
margin: 5px; /* 调整间距 */
|
||
}
|
||
|
||
.footer-links .footer-link,
|
||
.footer-links .icp-link,
|
||
.footer-links .footer-text {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer-copyright {
|
||
width: 100%;
|
||
text-align: center;
|
||
order: 2; /* 确保版权信息在底部 */
|
||
}
|
||
|
||
.footer-links .footer-text {
|
||
width: 100%;
|
||
text-align: center;
|
||
order: 3;
|
||
}
|
||
|
||
.footer-links .icp-link {
|
||
width: 100%;
|
||
text-align: center;
|
||
order: 4;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 主题切换功能保持不变...
|
||
|
||
// 分享功能
|
||
const shareButton = document.getElementById('shareButton');
|
||
const toast = document.getElementById('toast');
|
||
|
||
shareButton.addEventListener('click', async () => {
|
||
try {
|
||
// 获取当前页面 URL
|
||
const url = window.location.href;
|
||
|
||
// 尝试使用新的 Clipboard API
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
await navigator.clipboard.writeText(url);
|
||
showToast();
|
||
} else {
|
||
// 回退到传统方法
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = url;
|
||
textarea.style.position = 'fixed'; // 避免页面滚动
|
||
textarea.style.opacity = '0';
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(textarea);
|
||
showToast();
|
||
}
|
||
} catch (err) {
|
||
console.error('复制失败:', err);
|
||
// 如果复制失败，仍然尝试传统方法
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = url;
|
||
textarea.style.position = 'fixed';
|
||
textarea.style.opacity = '0';
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(textarea);
|
||
showToast();
|
||
}
|
||
});
|
||
|
||
// 显示提示框的函数
|
||
function showToast() {
|
||
toast.classList.add('show');
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
}, 3000);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- 修改底部链接样式 -->
|
||
<style>
|
||
/* 修改底部链接样式 */
|
||
.footer-bottom-content {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 50px; /* 减少底部间距 */
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
flex-wrap: nowrap;
|
||
margin-bottom: 0; /* 移除底部间距 */
|
||
}
|
||
|
||
.footer-links .footer-link,
|
||
.footer-links .icp-link {
|
||
color: #666;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: color 0.3s ease;
|
||
white-space: nowrap; /* 防止链接文字换行 */
|
||
}
|
||
|
||
.footer-links .footer-text {
|
||
color: #666;
|
||
font-size: 14px;
|
||
white-space: nowrap; /* 防止文字换行 */
|
||
}
|
||
|
||
.footer-links .divider {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.footer-links i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .footer-links .footer-link,
|
||
[data-theme="dark"] .footer-links .footer-text,
|
||
[data-theme="dark"] .footer-links .icp-link {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-links .footer-link:hover,
|
||
[data-theme="dark"] .footer-links .icp-link:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-links .divider {
|
||
color: #666;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.footer-links {
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
margin-bottom: 0; /* 移除底部间距 */
|
||
}
|
||
|
||
.footer-links .footer-link {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer-links .footer-text {
|
||
font-size: 12px;
|
||
width: 100%; /* 让说明文字单独占一行 */
|
||
text-align: center;
|
||
order: 2; /* 将说明文字放到倒数第二位 */
|
||
}
|
||
|
||
.footer-links .icp-link {
|
||
font-size: 12px;
|
||
width: 100%; /* 让备案号单独占一行 */
|
||
text-align: center;
|
||
order: 3; /* 将备案号放到最后 */
|
||
margin-top: 5px; /* 保持与上方内容的间距 */
|
||
display: flex; /* 使用 flex 布局 */
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center; /* 垂直居中 */
|
||
}
|
||
|
||
.footer-links i {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- 联系按钮样式 -->
|
||
<style>
|
||
/* 联系按钮样式 */
|
||
.contact-buttons {
|
||
display: flex;
|
||
gap: 12px; /* 减小按钮间距 */
|
||
margin: 10px 0; /* 减小上下边距 */
|
||
justify-content: flex-start; /* PC端靠左对齐 */
|
||
align-items: center;
|
||
}
|
||
|
||
.contact-btn {
|
||
width: 36px; /* 减小按钮尺寸 */
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.contact-btn i {
|
||
font-size: 18px; /* 减小图标尺寸 */
|
||
}
|
||
|
||
.contact-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* QQ按钮特定样式 */
|
||
.contact-btn .fa-qq {
|
||
color: #12B7F5;
|
||
}
|
||
|
||
/* 微信按钮特定样式 */
|
||
.contact-btn .fa-weixin {
|
||
color: #07C160;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .contact-btn {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.contact-buttons {
|
||
justify-content: center; /* 移动端居中显示 */
|
||
}
|
||
|
||
.contact-btn {
|
||
width: 32px; /* 移动端更小一点 */
|
||
height: 32px;
|
||
}
|
||
|
||
.contact-btn i {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Discord 按钮特定样式 -->
|
||
<style>
|
||
/* Discord 按钮特定样式 */
|
||
.contact-btn .fa-discord {
|
||
color: #5865F2; /* Discord 品牌色 */
|
||
}
|
||
|
||
/* 暗色模式下的 Discord 图标 */
|
||
[data-theme="dark"] .contact-btn .fa-discord {
|
||
color: #5865F2; /* 保持相同的颜色以保持品牌识别度 */
|
||
}
|
||
</style>
|
||
|
||
<!-- 添加备案号样式 -->
|
||
<style>
|
||
.icp-info {
|
||
text-align: center;
|
||
margin-top: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.icp-info a {
|
||
color: #666;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.icp-info a:hover {
|
||
color: #333;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .icp-info a {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .icp-info a:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.icp-info {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// QQ群弹窗函数
|
||
function showQQModal() {
|
||
const modal = document.getElementById('qq-modal');
|
||
if (modal) {
|
||
modal.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
}
|
||
|
||
function closeQQModal() {
|
||
const modal = document.getElementById('qq-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
|
||
// 微信群弹窗函数
|
||
function showWeChatModal() {
|
||
const modal = document.getElementById('wechat-modal');
|
||
if (modal) {
|
||
modal.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
}
|
||
|
||
function closeWeChatModal() {
|
||
const modal = document.getElementById('wechat-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const modals = document.querySelectorAll('.modal');
|
||
modals.forEach(modal => {
|
||
modal.addEventListener('click', function(event) {
|
||
if (event.target === this) {
|
||
this.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |