4214 lines
105 KiB
HTML
Executable File
4214 lines
105 KiB
HTML
Executable File
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<!-- 修改网站标题区域 -->
|
||
<div class="site-header">
|
||
<div class="site-title">
|
||
<h1>应用</h1>
|
||
</div>
|
||
<div class="header-actions">
|
||
{% if settings.donate_enabled == '1' %}
|
||
<div class="donate-new-button" onclick="showDonateModal()">
|
||
<button type="button" class="button">
|
||
<span class="fold"></span>
|
||
<div class="points_wrapper">
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
<i class="point"></i>
|
||
</div>
|
||
<span class="inner">
|
||
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5">
|
||
<polyline points="13.18 1.37 13.18 9.64 21.45 9.64 10.82 22.63 10.82 14.36 2.55 14.36 13.18 1.37"></polyline>
|
||
</svg>
|
||
充电
|
||
</span>
|
||
</button>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* 修改网站标题样式 */
|
||
.site-header {
|
||
background: rgba(255, 255, 255, 0.6);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
padding: 8px 15px 3px 15px;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 0px solid rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.site-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.site-logo {
|
||
height: 40px;
|
||
width: auto;
|
||
margin-right: 5px;
|
||
display: none;
|
||
}
|
||
|
||
.light-mode-logo {
|
||
display: block;
|
||
}
|
||
|
||
[data-theme="dark"] .light-mode-logo {
|
||
display: none;
|
||
}
|
||
|
||
[data-theme="dark"] .dark-mode-logo {
|
||
display: block;
|
||
}
|
||
|
||
.site-header h1 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: #000;
|
||
margin: 0;
|
||
text-align: left;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .site-header {
|
||
background: rgba(26, 26, 26, 0.6);
|
||
border-bottom-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .site-header h1 {
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
|
||
<!-- 修改搜索栏部分 -->
|
||
<div class="search-bar {% if search %}search-bar-results{% endif %}">
|
||
<div class="search-container">
|
||
{% if search %}
|
||
<a href="javascript:void(0)" onclick="handleBackClick()" class="back-arrow">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</a>
|
||
{% endif %}
|
||
<form class="search-form" method="GET" action="{{ url_for('index') }}">
|
||
<div class="search-wrapper {% if search %}search-wrapper-results{% endif %}">
|
||
<i class="fas fa-search search-icon-input"></i>
|
||
<input type="text" name="search" placeholder="搜索应用..." value="{{ search }}">
|
||
<div class="search-divider"></div>
|
||
<button type="submit" class="search-button">搜索</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-showcase">
|
||
|
||
<!-- 添加说明文字和群聊链接 -->
|
||
<div class="site-notice-container">
|
||
<div class="site-notice-header" onclick="toggleNotice()">
|
||
<div class="notice-icon">
|
||
<i class="fas fa-bullhorn"></i>
|
||
</div>
|
||
<div class="notice-preview">{{ settings.site_notice }}</div>
|
||
<div class="notice-toggle">
|
||
<i class="fas fa-chevron-down"></i>
|
||
</div>
|
||
</div>
|
||
<div class="site-notice-content collapsed">
|
||
<div class="notice-text">{{ settings.site_notice }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改 join-group 区域，隐藏第一个 platform-switch -->
|
||
<div class="join-group">
|
||
<div class="group-buttons">
|
||
{% if settings and settings.qq_group_link %}
|
||
<button class="group-btn qq-btn" onclick="showQQModal()">
|
||
<i class="fab fa-qq"></i>
|
||
<span class="btn-text">{{ settings.qq_group_text or 'QQ群' }}</span>
|
||
</button>
|
||
{% endif %}
|
||
|
||
{% if settings and settings.wechat_group_qrcode %}
|
||
<button class="group-btn wechat-btn" onclick="showWeChatModal()">
|
||
<i class="fab fa-weixin"></i>
|
||
<span class="btn-text">{{ settings.wechat_group_text or '微信群' }}</span>
|
||
</button>
|
||
{% endif %}
|
||
</div>
|
||
<!-- 在搜索结果页面隐藏第一个 platform-switch -->
|
||
<div class="platform-switch" {% if search %}style="display: none;"{% endif %}>
|
||
<label class="switch">
|
||
<input type="checkbox" id="platformToggle">
|
||
<span class="slider">
|
||
<i class="fas fa-mobile-alt"></i>
|
||
<i class="fas fa-tablet-alt"></i>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索结果区域 -->
|
||
{% if search %}
|
||
<div class="search-bar search-bar-results">
|
||
<div class="search-container">
|
||
<a href="javascript:void(0)" onclick="handleBackClick()" class="back-arrow">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</a>
|
||
<form class="search-form" method="GET" action="{{ url_for('index') }}">
|
||
<div class="search-wrapper search-wrapper-results">
|
||
<i class="fas fa-search search-icon-input"></i>
|
||
<input type="text" name="search" placeholder="搜索应用..." value="{{ search }}">
|
||
<div class="search-divider"></div>
|
||
<button type="submit" class="search-button">搜索</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加搜索结果的平台切换开关 -->
|
||
<div class="platform-switch search-platform-switch">
|
||
<label class="switch">
|
||
<input type="checkbox" id="searchPlatformToggle">
|
||
<span class="slider">
|
||
<i class="fas fa-mobile-alt"></i>
|
||
<i class="fas fa-tablet-alt"></i>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="apps-grid mobile-results" style="margin: 0; padding: 0;">
|
||
{% set mobile_apps = [] %}
|
||
{% for app in apps %}
|
||
{% if app.platform and ('mobile' in app.platform.split(',')) %}
|
||
{% set _ = mobile_apps.append(app) %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% if mobile_apps|length == 0 %}
|
||
<div class="no-results">
|
||
<div class="no-results-icon">
|
||
<i class="fas fa-search"></i>
|
||
</div>
|
||
<div class="no-results-text">
|
||
未找到相关应用
|
||
</div>
|
||
{% if settings.feedback_link %}
|
||
<div class="no-results-feedback">
|
||
<a href="{{ settings.feedback_link }}" target="_blank">
|
||
<i class="fas fa-paper-plane"></i>
|
||
反馈给我们
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% else %}
|
||
{% for app in mobile_apps %}
|
||
<div class="app-card" onclick="window.location.href='/app/{{ app.id }}'">
|
||
<div class="app-icon">
|
||
{% if 'http' in app.icon_path %}
|
||
<img data-src="{{ app.icon_path }}" alt="{{ app.name }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
|
||
{% else %}
|
||
<img data-src="{{ url_for('static', filename='uploads/' + app.icon_path) }}" alt="{{ app.name }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
|
||
{% endif %}
|
||
</div>
|
||
<div class="app-info">
|
||
<h3>{{ app.name }}</h3>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="apps-grid tablet-results" style="margin: 0; padding: 0; display: none;">
|
||
{% set tablet_apps = [] %}
|
||
{% for app in apps %}
|
||
{% if app.platform and 'tablet' in app.platform.split(',') %}
|
||
{% set _ = tablet_apps.append(app) %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% if tablet_apps|length == 0 %}
|
||
<div class="no-results">
|
||
<div class="no-results-icon">
|
||
<i class="fas fa-search"></i>
|
||
</div>
|
||
<div class="no-results-text">
|
||
未找到相关应用
|
||
</div>
|
||
{% if settings.feedback_link %}
|
||
<div class="no-results-feedback">
|
||
<a href="{{ settings.feedback_link }}" target="_blank">
|
||
<i class="fas fa-paper-plane"></i>
|
||
反馈给我们
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% else %}
|
||
{% for app in tablet_apps %}
|
||
<div class="app-card" onclick="window.location.href='/app/{{ app.id }}'">
|
||
<div class="app-icon">
|
||
{% if 'http' in app.icon_path %}
|
||
<img data-src="{{ app.icon_path }}" alt="{{ app.name }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
|
||
{% else %}
|
||
<img data-src="{{ url_for('static', filename='uploads/' + app.icon_path) }}" alt="{{ app.name }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
|
||
{% endif %}
|
||
</div>
|
||
<div class="app-info">
|
||
<h3>{{ app.name }}</h3>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
</div>
|
||
{% else %}
|
||
|
||
|
||
<!-- 分类磁贴区域 -->
|
||
<div class="categories-grid mobile-apps">
|
||
<!-- 添加全部应用磁贴 -->
|
||
<div class="category-tile category-color-0" onclick="window.location.href='{{ url_for('all_apps') }}';">
|
||
<i class="category-icon fas fa-th-large"></i>
|
||
<div class="category-tile-header">
|
||
<h3>全部应用</h3>
|
||
<span class="app-count">{{ apps|length }}个应用</span>
|
||
</div>
|
||
</div>
|
||
|
||
{% for category in categories %}
|
||
{% set category_apps = [] %}
|
||
{% for app in apps %}
|
||
{% if app.category_id == category.id %}
|
||
{% set _ = category_apps.append(app) %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% if category_apps|length > 0 %}
|
||
<div class="category-tile category-color-{{ loop.index % 16 }}" onclick="window.location.href='{{ url_for('view_category', category_id=category.id) }}';">
|
||
<i class="category-icon fas {{ category.name|get_category_icon }}"></i>
|
||
<div class="category-tile-header">
|
||
<h3>{{ category.name }}</h3>
|
||
<span class="app-count">{{ category_apps|length }}个应用</span>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- 平板应用区域 -->
|
||
<div class="categories-grid tablet-apps" style="display: none;">
|
||
{% for category in categories %}
|
||
{% set category_apps = [] %}
|
||
{% for app in apps %}
|
||
{% if app.category_id == category.id and app.platform and 'tablet' in app.platform.split(',') %}
|
||
{% set _ = category_apps.append(app) %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% if category_apps|length > 0 %}
|
||
<div class="category-tile category-color-{{ loop.index % 16 }}" onclick="window.location.href='{{ url_for('view_category', category_id=category.id) }}?platform=tablet';">
|
||
<i class="category-icon fas {{ category.name|get_category_icon }}"></i>
|
||
<div class="category-tile-header">
|
||
<h3>{{ category.name }}</h3>
|
||
<span class="app-count">{{ category_apps|length }}个应用</span>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- 充电弹窗 -->
|
||
<div id="donate-modal" class="modal" style="display: none;">
|
||
<div class="modal-content donate-modal">
|
||
<div class="modal-header">
|
||
<span class="close" onclick="closeDonateModal()">×</span>
|
||
<h3>赞赏支持</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="donate-container">
|
||
<p class="donate-text">{{ settings.donate_text }}</p>
|
||
{% if settings.donate_image %}
|
||
<img src="{{ settings.donate_image }}" alt="赞赏码" class="donate-qr">
|
||
{% endif %}
|
||
<p class="donate-note" style="color: rgb(201, 180, 60);"><a href="{{ url_for('donors_page') }}" style="color: inherit; text-decoration: underline;">{{ settings.donate_note }}</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* 充电弹窗样式 */
|
||
.donate-modal {
|
||
max-width: 360px;
|
||
background: linear-gradient(145deg, #ffffff, #f5f5f7);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.donate-modal .modal-header {
|
||
background: linear-gradient(135deg, #7a5af8, #01b4ff);
|
||
padding: 15px 20px;
|
||
border-radius: 12px 12px 0 0;
|
||
position: relative;
|
||
}
|
||
|
||
.donate-modal .modal-header h3 {
|
||
color: white;
|
||
margin: 0;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.donate-modal .close {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: white;
|
||
font-size: 24px;
|
||
opacity: 0.8;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.donate-modal .close:hover {
|
||
opacity: 1;
|
||
transform: translateY(-50%) scale(1.1);
|
||
}
|
||
|
||
.donate-modal .modal-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.donate-container {
|
||
text-align: center;
|
||
}
|
||
|
||
.donate-text {
|
||
color: #333;
|
||
font-size: 15px;
|
||
margin: 0 0 20px 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.donate-qr {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 0 auto 20px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.donate-qr:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.donate-note {
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin: 0;
|
||
line-height: 1.4;
|
||
padding: 10px 15px;
|
||
background: rgba(0, 0, 0, 0.03);
|
||
border-radius: 8px;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* 添加动画效果 */
|
||
@keyframes donateModalShow {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.donate-modal {
|
||
animation: donateModalShow 0.3s ease forwards;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .donate-modal {
|
||
background: linear-gradient(145deg, #1c1c1e, #2c2c2e);
|
||
border-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
[data-theme="dark"] .donate-text {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .donate-note {
|
||
color: #999;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .donate-qr {
|
||
filter: brightness(0.9);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.donate-modal {
|
||
width: 90%;
|
||
max-width: 320px;
|
||
}
|
||
|
||
.donate-text {
|
||
font-size: 15px;
|
||
margin: 0 0 15px 0;
|
||
}
|
||
|
||
.donate-qr {
|
||
width: 180px;
|
||
height: 180px;
|
||
margin: 0 auto 15px;
|
||
}
|
||
|
||
.donate-note {
|
||
font-size: 13px;
|
||
padding: 8px 12px;
|
||
}
|
||
}
|
||
|
||
/* 修改二维码样式，保持原始尺寸 */
|
||
.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;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
function showDonateModal() {
|
||
const modal = document.getElementById('donate-modal');
|
||
if (modal) {
|
||
modal.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
}
|
||
|
||
function closeDonateModal() {
|
||
const modal = document.getElementById('donate-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
window.onclick = function(event) {
|
||
const modal = document.getElementById('donate-modal');
|
||
if (event.target === modal) {
|
||
closeDonateModal();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- 在页面底部添加赞赏名单 -->
|
||
{% if settings.donate_enabled == '1' %}
|
||
<div class="donors-section">
|
||
<h3>赞赏名单</h3>
|
||
{% if donors_section %}
|
||
{% set latest_donor = donors_section|sort(attribute='created_at', reverse=true)|first %}
|
||
{% if latest_donor and latest_donor.created_at %}
|
||
<p class="update-time">更新时间：{{ latest_donor.created_at|datetime_format }}</p>
|
||
{% endif %}
|
||
{% endif %}
|
||
<div class="donors-wall">
|
||
{# 移动端显示 #}
|
||
{% for donor in donors_section[:mobile_limit] %}
|
||
<div class="donor-card mobile-only" {% if donor.link %}onclick="window.location.href='{{ donor.link }}'"{% endif %}>
|
||
<div class="donor-info">
|
||
<div class="donor-name">{{ donor.name }}</div>
|
||
<div class="donor-amount">
|
||
{% set amount = donor.amount.replace('¥', '').strip() %}
|
||
{% set float_amount = amount|float %}
|
||
¥{{ "%.2f"|format(float_amount) }}
|
||
</div>
|
||
</div>
|
||
{% if donor.link %}
|
||
<div class="link-icon">
|
||
<i class="fas fa-link"></i>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
{% if donors_section|length > mobile_limit %}
|
||
<div class="donor-card mobile-only view-all-card" onclick="saveScrollPosition(); window.location.href='{{ url_for('donors_page') }}';">
|
||
<div class="donor-info">
|
||
<div class="view-all-text">查看全部</div>
|
||
<div class="view-all-count">共{{ donors_section|length }}条</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{# PC端<43><E7ABAF>示 #}
|
||
{% for donor in donors_section[:pc_limit] %}
|
||
<div class="donor-card pc-only" {% if donor.link %}onclick="window.location.href='{{ donor.link }}'"{% endif %}>
|
||
<div class="donor-info">
|
||
<div class="donor-name">{{ donor.name }}</div>
|
||
<div class="donor-amount">
|
||
{% set amount = donor.amount.replace('¥', '').strip() %}
|
||
{% set float_amount = amount|float %}
|
||
¥{{ "%.2f"|format(float_amount) }}
|
||
</div>
|
||
</div>
|
||
{% if donor.link %}
|
||
<div class="link-icon">
|
||
<i class="fas fa-link"></i>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
{% if donors_section|length > pc_limit %}
|
||
<div class="donor-card pc-only view-all-card" onclick="saveScrollPosition(); window.location.href='{{ url_for('donors_page') }}';">
|
||
<div class="donor-info">
|
||
<div class="view-all-text">查看全部</div>
|
||
<div class="view-all-count">共{{ donors_section|length }}条</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<style>
|
||
/* 修改 donors-section 的样式 */
|
||
.donors-section {
|
||
margin: 0 auto; /* 移除上下边距，只保留左右居中 */
|
||
padding: 0 15px 15px 15px; /* 移除顶部内边距，保留底部和左右内边距 */
|
||
max-width: 1200px;
|
||
}
|
||
|
||
/* 修改 donors-section 标题样式 */
|
||
.donors-section h3 {
|
||
text-align: center;
|
||
margin-bottom: 5px;
|
||
padding-top: 15px; /* 添加顶部内边距来替代外边距 */
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
|
||
.credits-section {
|
||
margin-bottom: 0; /* 移除底部边距 */
|
||
padding-bottom: 30px; /* 添加底部内边距 */
|
||
}
|
||
|
||
/* 确保暗色模式下的样式正确 */
|
||
[data-theme="dark"] .donors-section h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
.update-time {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin: 0 0 15px 0;
|
||
}
|
||
|
||
.donors-wall {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
gap: 8px;
|
||
}
|
||
|
||
.donor-card {
|
||
background: white;
|
||
padding: 8px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s ease;
|
||
position: relative; /* 添加相对定位 */
|
||
}
|
||
|
||
.donor-card:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.donor-info {
|
||
text-align: left;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.donor-name {
|
||
color: #333;
|
||
font-size: 12px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.donor-amount {
|
||
color: #007AFF;
|
||
font-size: 12px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.donor-message {
|
||
color: #666;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.donors-wall {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 6px;
|
||
}
|
||
|
||
.donor-card {
|
||
padding: 6px;
|
||
}
|
||
|
||
.donor-name {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.donor-amount {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.donor-message {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
/* 添加查看全部卡片样式 */
|
||
.view-all-card {
|
||
cursor: pointer;
|
||
background: #f8f9fa;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.view-all-card:hover {
|
||
background: #f0f0f0;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.view-all-text {
|
||
color: #007AFF;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.view-all-count {
|
||
color: #666;
|
||
font-size: 11px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* 应式显示控<E7A4BA><E68EA7><EFBFBD> */
|
||
@media (max-width: 768px) {
|
||
.pc-only {
|
||
display: none;
|
||
}
|
||
|
||
.donors-wall {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 6px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 769px) {
|
||
.mobile-only {
|
||
display: none;
|
||
}
|
||
|
||
.donors-wall {
|
||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* 弹窗样式 */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.5);
|
||
z-index: 1000;
|
||
/* 添加弹性布局以实现居中 */
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-content {
|
||
position: relative;
|
||
background: white;
|
||
width: 90%;
|
||
max-width: 400px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
padding: 20px;
|
||
/* 移除之前的 margin */
|
||
margin: 0;
|
||
/* 添加最大高度限制 */
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.modal-content {
|
||
width: 85%;
|
||
padding: 16px;
|
||
/* 确保在小屏幕上也能完整显示 */
|
||
max-height: 80vh;
|
||
}
|
||
|
||
|
||
.donate-qr {
|
||
max-width: 180px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.close {
|
||
right: 12px;
|
||
top: 8px;
|
||
}
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .modal-content {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .donate-text {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .close {
|
||
color: #999;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 10px;
|
||
font-size: 24px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.donate-container {
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
.donate-qr {
|
||
max-width: 200px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.categories-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
gap: 12px;
|
||
padding: 0px 15px 15px 15px;
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.category-tile {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
padding: 20px 15px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
cursor: pointer;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.category-tile:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.category-tile:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.category-icon {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.category-tile-header {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.category-tile-header h3 {
|
||
font-size: 16px;
|
||
color: #fff;
|
||
margin: 0;
|
||
font-weight: 600;
|
||
width: 100%;
|
||
text-align: center;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.app-count {
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
background: rgba(255, 255, 255, 0.25);
|
||
padding: 4px 10px;
|
||
border-radius: 12px;
|
||
display: inline-block;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 分类颜色 - 通过伪像素设置背景颜色 */
|
||
.category-color-0::before { background: #FF6B6B !important; } /* 红色 */
|
||
.category-color-1::before { background: #4ECDC4 !important; } /* 青色 */
|
||
.category-color-2::before { background: #45B7D1 !important; } /* 蓝色 */
|
||
.category-color-3::before { background: #96CEB4 !important; } /* 绿色 */
|
||
.category-color-4::before { background: #FFB75E !important; } /* 橙色 */
|
||
.category-color-5::before { background: #D4A5A5 !important; } /* 粉色 */
|
||
.category-color-6::before { background: #9B59B6 !important; } /* 紫色 */
|
||
.category-color-7::before { background: #3498DB !important; } /* 深蓝色 */
|
||
.category-color-8::before { background: #2ECC71 !important; } /* 翠绿色 */
|
||
.category-color-9::before { background: #F1C40F !important; } /* 金黄色 */
|
||
.category-color-10::before { background: #E74C3C !important; } /* 深红色 */
|
||
.category-color-11::before { background: #1ABC9C !important; } /* 青绿色 */
|
||
.category-color-12::before { background: #8E44AD !important; } /* 深紫色 */
|
||
.category-color-13::before { background: #D35400 !important; } /* 褐色 */
|
||
.category-color-14::before { background: #16A085 !important; } /* 墨绿色 */
|
||
.category-color-15::before { background: #E67E22 !important; } /* 橘色 */
|
||
|
||
/* 移除所有可能的背景色变化 */
|
||
.category-tile,
|
||
.category-tile:hover,
|
||
.category-tile:active,
|
||
[data-theme="dark"] .category-tile,
|
||
[data-theme="dark"] .category-tile:hover,
|
||
[data-theme="dark"] .category-tile:active {
|
||
background: none !important;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.categories-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||
gap: 8px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.category-tile {
|
||
padding: 15px 10px;
|
||
}
|
||
|
||
.category-tile-header {
|
||
gap: 6px;
|
||
}
|
||
|
||
.category-tile-header h3 {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.app-count {
|
||
font-size: 12px;
|
||
padding: 3px 8px;
|
||
}
|
||
|
||
.category-icon {
|
||
font-size: 36px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕适配 */
|
||
@media (max-width: 320px) {
|
||
.categories-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.category-tile {
|
||
padding: 12px 8px;
|
||
}
|
||
|
||
.category-tile-header h3 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.app-count {
|
||
font-size: 11px;
|
||
padding: 3px 6px;
|
||
}
|
||
|
||
.category-icon {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
|
||
/* <20><><EFBFBD>改查看全部磁贴的样式 */
|
||
.view-all-tile {
|
||
background: #34495e; /* 使用单一深色背景 */
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.view-all-tile .category-icon {
|
||
font-size: 48px;
|
||
opacity: 0.15;
|
||
color: white;
|
||
}
|
||
|
||
.view-all-tile:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.view-all-tile:hover .category-icon {
|
||
transform: rotate(0deg);
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.view-all-tile .category-tile-header h3 {
|
||
font-weight: 600;
|
||
color: white;
|
||
}
|
||
|
||
.view-all-tile .app-count {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
color: white;
|
||
}
|
||
|
||
/* 确保查看全部磁贴在网格末尾 */
|
||
.categories-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
gap: 12px;
|
||
padding: 0px 15px 15px 15px;
|
||
margin-top: 0px;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.view-all-tile .category-icon {
|
||
font-size: 36px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕适配 */
|
||
@media (max-width: 320px) {
|
||
.view-all-tile .category-icon {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
|
||
/* 修改搜索结果区域的应用网格样式 */
|
||
.apps-grid {
|
||
width: 90%;
|
||
max-width: 1200px;
|
||
margin: 0 auto !important;
|
||
padding: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
|
||
gap: 15px;
|
||
background: #fff; /* 默认亮色背景 */
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
transition: background-color 0.3s ease; /* 添加过渡效果 */
|
||
}
|
||
|
||
/* 搜索结果中的应用卡片样式 */
|
||
.apps-grid .app-card {
|
||
background: #fff; /* 默认亮色背景 */
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.apps-grid .app-card:hover {
|
||
transform: translateY(-2px);
|
||
background: #f5f5f5; /* 亮色模式下的悬停背景 */
|
||
}
|
||
|
||
/* 无结果状态样式 */
|
||
.no-results {
|
||
background: #fff; /* 默认亮色背景 */
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.no-results-icon {
|
||
color: #ccc;
|
||
}
|
||
|
||
.no-results-text {
|
||
color: #666;
|
||
}
|
||
|
||
/* 暗色模式样式 */
|
||
[data-theme="dark"] .apps-grid {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .apps-grid .app-card {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .apps-grid .app-card:hover {
|
||
background: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .no-results {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .no-results-icon {
|
||
color: #666;
|
||
}
|
||
|
||
[data-theme="dark"] .no-results-text {
|
||
color: #ccc;
|
||
}
|
||
|
||
/* 确<><E7A1AE>其他区域也有<E4B99F><E69C89>确的背景色过渡 */
|
||
.header,
|
||
.search-bar,
|
||
.site-header {
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
/* 亮色模式下的背景色 */
|
||
.hot-apps-section {
|
||
background: #fff;
|
||
}
|
||
|
||
.header {
|
||
background: #fff;
|
||
}
|
||
|
||
.search-bar {
|
||
background: #f5f5f7;
|
||
}
|
||
|
||
.site-header {
|
||
background: #f5f5f7;
|
||
}
|
||
|
||
/* 暗色模式下的背景色 */
|
||
[data-theme="dark"] .hot-apps-section {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .header {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .search-bar {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
[data-theme="dark"] .site-header {
|
||
background: #242424;
|
||
}
|
||
|
||
/* 添加赞说明文字样式 */
|
||
.donate-note {
|
||
margin-top: 15px;
|
||
color: #666;
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 平台切换按钮样式 */
|
||
.platform-switch {
|
||
margin: 15px auto;
|
||
width: 200px; /* 和搜索栏下面的开关一样宽 */
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 34px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.slider {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #e0e0e0;
|
||
transition: 0.4s;
|
||
border-radius: 34px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 4px;
|
||
}
|
||
|
||
.slider:before {
|
||
content: "";
|
||
position: absolute;
|
||
height: 26px;
|
||
width: 48%;
|
||
left: 4px;
|
||
bottom: 3px;
|
||
background-color: #007AFF;
|
||
transition: 0.4s;
|
||
border-radius: 17px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.slider i {
|
||
color: #666;
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 48%;
|
||
text-align: center;
|
||
transition: color 0.4s;
|
||
}
|
||
|
||
/* 选中状态样式 */
|
||
input:checked + .slider:before {
|
||
transform: translateX(96%);
|
||
}
|
||
|
||
input:checked + .slider i.fa-tablet-alt {
|
||
color: white;
|
||
}
|
||
|
||
input:checked + .slider i.fa-mobile-alt {
|
||
color: #666;
|
||
}
|
||
|
||
/* 未选中状态样式 */
|
||
input:not(:checked) + .slider i.fa-mobile-alt {
|
||
color: white;
|
||
}
|
||
|
||
input:not(:checked) + .slider i.fa-tablet-alt {
|
||
color: #666;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.platform-switch {
|
||
width: 160px; /* 移动端稍微窄一点 */
|
||
}
|
||
|
||
.switch {
|
||
height: 30px;
|
||
}
|
||
|
||
.slider:before {
|
||
height: 22px;
|
||
}
|
||
|
||
.slider i {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕适配 */
|
||
@media (max-width: 320px) {
|
||
.platform-switch {
|
||
width: 140px;
|
||
}
|
||
}
|
||
|
||
/* 应用区域切换动画 */
|
||
.categories-grid {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.categories-grid.mobile-apps,
|
||
.categories-grid.tablet-apps {
|
||
opacity: 1;
|
||
}
|
||
|
||
.categories-grid.mobile-apps.hidden,
|
||
.categories-grid.tablet-apps.hidden {
|
||
opacity: 0;
|
||
display: none;
|
||
}
|
||
|
||
/* 隐搜索结果界面的勾选框 */
|
||
.search-platform-switch .switch input[type="checkbox"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
/* 修改搜索结果界面的滑块样式 */
|
||
.search-platform-switch .switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 34px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-platform-switch .slider {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #e0e0e0;
|
||
transition: 0.4s;
|
||
border-radius: 34px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 4px;
|
||
}
|
||
|
||
.search-platform-switch .slider:before {
|
||
content: "";
|
||
position: absolute;
|
||
height: 26px;
|
||
width: 48%;
|
||
left: 4px;
|
||
bottom: 3px;
|
||
background-color: #007AFF;
|
||
transition: 0.4s;
|
||
border-radius: 17px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.search-platform-switch .slider i {
|
||
color: #666;
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 48%;
|
||
text-align: center;
|
||
transition: color 0.4s;
|
||
}
|
||
|
||
/* 选中状态样式 */
|
||
.search-platform-switch input:checked + .slider:before {
|
||
transform: translateX(96%);
|
||
}
|
||
|
||
.search-platform-switch input:checked + .slider i.fa-tablet-alt {
|
||
color: white;
|
||
}
|
||
|
||
.search-platform-switch input:checked + .slider i.fa-mobile-alt {
|
||
color: #666;
|
||
}
|
||
|
||
/* 未选中状态样式 */
|
||
.search-platform-switch input:not(:checked) + .slider i.fa-mobile-alt {
|
||
color: white;
|
||
}
|
||
|
||
.search-platform-switch input:not(:checked) + .slider i.fa-tablet-alt {
|
||
color: #666;
|
||
}
|
||
|
||
/* 搜索结果平台切换开关样式 */
|
||
.search-platform-switch {
|
||
margin: 15px auto;
|
||
width: 200px; /* 增加宽度到 200px */
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.search-platform-switch .switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 34px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-platform-switch .slider {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #e0e0e0;
|
||
transition: 0.4s;
|
||
border-radius: 34px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 4px;
|
||
}
|
||
|
||
.search-platform-switch .slider:before {
|
||
content: "";
|
||
position: absolute;
|
||
height: 26px;
|
||
width: 48%;
|
||
left: 4px;
|
||
bottom: 3px;
|
||
background-color: #007AFF;
|
||
transition: 0.4s;
|
||
border-radius: 17px;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.search-platform-switch {
|
||
width: 160px; /* 移动端稍微窄一点 */
|
||
}
|
||
|
||
.search-platform-switch .switch {
|
||
height: 30px;
|
||
}
|
||
|
||
.search-platform-switch .slider:before {
|
||
height: 22px;
|
||
}
|
||
}
|
||
|
||
.no-results {
|
||
grid-column: 1 / -1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
margin: 20px auto;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
}
|
||
|
||
.no-results-icon {
|
||
font-size: 48px;
|
||
color: #ccc;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.no-results-text {
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.no-results-feedback {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.no-results-feedback a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
background: #007AFF;
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.no-results-feedback a:hover {
|
||
background: #0056b3;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.no-results-feedback i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 添加链接图标的样式 */
|
||
.donor-card {
|
||
position: relative; /* 添加相对定位 */
|
||
}
|
||
|
||
.link-icon {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
color: #007AFF;
|
||
font-size: 12px;
|
||
opacity: 0.7;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.donor-card:hover .link-icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 调整移动端样 */
|
||
@media (max-width: 768px) {
|
||
.link-icon {
|
||
top: 6px;
|
||
right: 6px;
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
|
||
/* 优化返回按钮的触摸反馈 */
|
||
.back-arrow {
|
||
-webkit-tap-highlight-color: rgba(0,0,0,0); /* 移除移动端点击高亮 */
|
||
cursor: pointer;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.back-arrow:active {
|
||
opacity: 0.7; /* 点击时的视觉反馈 */
|
||
}
|
||
|
||
@media (hover: hover) {
|
||
.back-arrow:hover {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
/* 暗色模式样式 */
|
||
[data-theme="dark"] .site-header {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .site-header h1 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .search-bar {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .search-wrapper {
|
||
background: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .search-wrapper input {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .search-wrapper input::placeholder {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .search-icon-input {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .search-button {
|
||
background: #333;
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .app-showcase {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
[data-theme="dark"] .hot-apps-section {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .section-title h2 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .app-card {
|
||
background: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .app-card .app-info h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .view-all {
|
||
background: #333;
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .view-all:hover {
|
||
background: #444;
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .site-notice {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .join-group a {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .join-group .group-number {
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .donors-section {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
[data-theme="dark"] .donors-section h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .update-time {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .donor-card {
|
||
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-text {
|
||
color: #007AFF;
|
||
}
|
||
|
||
[data-theme="dark"] .view-all-count {
|
||
color: #ccc;
|
||
}
|
||
|
||
/* 平台切换开关暗色模式样式 */
|
||
[data-theme="dark"] .switch .slider {
|
||
background-color: #333;
|
||
border-color: #444;
|
||
}
|
||
|
||
[data-theme="dark"] .switch .slider i {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .switch input:checked + .slider i.fa-tablet-alt,
|
||
[data-theme="dark"] .switch input:not(:checked) + .slider i.fa-mobile-alt {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 修改热门应用区域的样式 */
|
||
.hot-apps-section {
|
||
margin: 0 15px; /* 移除顶部间距，只保留左右间距 */
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
padding: 10px 20px 0px 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
position: relative;
|
||
}
|
||
|
||
|
||
.hot-apps-section::after {
|
||
content: none;
|
||
}
|
||
|
||
[data-theme="dark"] .hot-apps-section::after {
|
||
content: none;
|
||
}
|
||
|
||
|
||
.apps-scroll::after,
|
||
.apps-row::after {
|
||
content: none;
|
||
}
|
||
|
||
[data-theme="dark"] .apps-scroll::after,
|
||
[data-theme="dark"] .apps-row::after {
|
||
content: none;
|
||
}
|
||
|
||
[data-theme="dark"] .hot-apps-section .app-card {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .hot-apps-section .app-card .app-info h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .apps-grid .app-card {
|
||
background: #242424; /
|
||
}
|
||
|
||
[data-theme="dark"] .categories-grid .app-card {
|
||
background: #242424;
|
||
}
|
||
|
||
|
||
[data-theme="dark"] .app-card {
|
||
background: initial;
|
||
}
|
||
|
||
|
||
|
||
[data-theme="dark"] .app-card {
|
||
background: initial;
|
||
}
|
||
|
||
[data-theme="dark"] .app-card .app-info h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
[data-theme="dark"] .hot-apps-section .app-card {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .hot-apps-section .app-card .app-info h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
[data-theme="dark"] .apps-grid .app-card {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .categories-grid .app-card {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .app-card {
|
||
background: initial;
|
||
}
|
||
|
||
|
||
|
||
/* 波浪渐变动画 */
|
||
@keyframes waveGradient {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
|
||
/* 光效移动动画 */
|
||
@keyframes lightMove {
|
||
0%, 100% {
|
||
opacity: 0.5;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.8;
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
|
||
|
||
/* 充电按钮样式 */
|
||
.button {
|
||
--h-button: 42px; /* 减小高度 */
|
||
--w-button: 88px; /* 减<><E5878F><EFBFBD>宽度 */
|
||
--round: 0.75rem;
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
transition: all 0.25s ease;
|
||
background: radial-gradient(
|
||
65.28% 65.28% at 50% 100%,
|
||
rgba(223, 113, 255, 0.8) 0%,
|
||
rgba(223, 113, 255, 0) 100%
|
||
),
|
||
linear-gradient(0deg, #7a5af8, #7a5af8);
|
||
border-radius: var(--round);
|
||
border: none;
|
||
outline: none;
|
||
padding: 10px 16px; /* 减小内边距 */
|
||
}
|
||
|
||
.button::before,
|
||
.button::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: var(--space);
|
||
transition: all 0.5s ease-in-out;
|
||
border-radius: calc(var(--round) - var(--space));
|
||
z-index: 0;
|
||
}
|
||
|
||
.button::before {
|
||
--space: 1px;
|
||
background: linear-gradient(
|
||
177.95deg,
|
||
rgba(255, 255, 255, 0.19) 0%,
|
||
rgba(255, 255, 255, 0) 100%
|
||
);
|
||
}
|
||
|
||
.button::after {
|
||
--space: 2px;
|
||
background: radial-gradient(
|
||
65.28% 65.28% at 50% 100%,
|
||
rgba(223, 113, 255, 0.8) 0%,
|
||
rgba(223, 113, 255, 0) 100%
|
||
),
|
||
linear-gradient(0deg, #7a5af8, #7a5af8);
|
||
}
|
||
|
||
.button:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.fold {
|
||
z-index: 1;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
height: 0.8rem; /* 减小折角大小 */
|
||
width: 0.8rem;
|
||
display: inline-block;
|
||
transition: all 0.5s ease-in-out;
|
||
background: radial-gradient(
|
||
100% 75% at 55%,
|
||
rgba(223, 113, 255, 0.8) 0%,
|
||
rgba(223, 113, 255, 0) 100%
|
||
);
|
||
box-shadow: 0 0 3px black;
|
||
border-bottom-left-radius: 0.5rem;
|
||
border-top-right-radius: var(--round);
|
||
}
|
||
|
||
.fold::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 150%;
|
||
height: 150%;
|
||
transform: rotate(45deg) translateX(0%) translateY(-18px);
|
||
background-color: #e8e8e8;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.button:hover .fold {
|
||
margin-top: -1rem;
|
||
margin-right: -1rem;
|
||
}
|
||
|
||
.points_wrapper {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
z-index: 1;
|
||
}
|
||
|
||
.points_wrapper .point {
|
||
bottom: -10px;
|
||
position: absolute;
|
||
animation: floating-points infinite ease-in-out;
|
||
pointer-events: none;
|
||
width: 2px;
|
||
height: 2px;
|
||
background-color: #fff;
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
@keyframes floating-points {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
85% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
transform: translateY(-55px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* 设置每个点的位置和动画 */
|
||
.points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
|
||
.points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
|
||
.points_wrapper .point:nth-child(3) { left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s; }
|
||
.points_wrapper .point:nth-child(4) { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
|
||
.points_wrapper .point:nth-child(5) { left: 50%; opacity: 1; animation-duration: 1.9s; }
|
||
.points_wrapper .point:nth-child(6) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }
|
||
.points_wrapper .point:nth-child(7) { left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s; }
|
||
.points_wrapper .point:nth-child(8) { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
|
||
.points_wrapper .point:nth-child(9) { left: 98%; opacity: 0.6; animation-duration: 2.6s; animation-delay: 0.1s; }
|
||
.points_wrapper .point:nth-child(10) { left: 65%; opacity: 1; animation-duration: 2.5s; animation-delay: 0.2s; }
|
||
|
||
.inner {
|
||
z-index: 2;
|
||
font-size: 14px; /* 减小文字大小 */
|
||
gap: 4px; /* 减小图标和文字的间距 */
|
||
position: relative;
|
||
width: 100%;
|
||
color: white;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: color 0.2s ease-in-out;
|
||
}
|
||
|
||
.inner svg.icon {
|
||
width: 16px; /* 减小图标大小 */
|
||
height: 16px;
|
||
transition: fill 0.1s linear;
|
||
}
|
||
|
||
.button:focus svg.icon {
|
||
fill: white;
|
||
}
|
||
|
||
.button:hover svg.icon {
|
||
fill: transparent;
|
||
animation:
|
||
dasharray 1s linear forwards,
|
||
filled 0.1s linear forwards 0.95s;
|
||
}
|
||
|
||
@keyframes dasharray {
|
||
from {
|
||
stroke-dasharray: 0 0 0 0;
|
||
}
|
||
to {
|
||
stroke-dasharray: 68 68 0 0;
|
||
}
|
||
}
|
||
|
||
@keyframes filled {
|
||
to {
|
||
fill: white;
|
||
}
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .fold::after {
|
||
background-color: #333;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.button {
|
||
--h-button: 36px;
|
||
--w-button: 80px;
|
||
padding: 8px 14px;
|
||
}
|
||
|
||
.inner {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.inner svg.icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.fold {
|
||
height: 0.7rem;
|
||
width: 0.7rem;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* 共享按钮基础样式 */
|
||
.share-button button,
|
||
.theme-toggle {
|
||
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;
|
||
}
|
||
|
||
.share-button button:hover,
|
||
.theme-toggle:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* 主题切换按钮样式 */
|
||
.theme-toggle {
|
||
padding: 0;
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.st-sunMoonThemeToggleBtn svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
/* 暗色模式样式 */
|
||
[data-theme="dark"] .share-button button,
|
||
[data-theme="dark"] .theme-toggle {
|
||
background: #333;
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* 修改磁贴悬停样式 - 移除颜色变化效果 */
|
||
.app-tile:hover {
|
||
transform: translateY(-2px); /* 只保留上浮效果 */
|
||
background: none !important; /* 移除背景色变化 */
|
||
}
|
||
|
||
.app-tile:active {
|
||
transform: translateY(0); /* 点击时回到原位 */
|
||
background: none !important; /* 确保点击时也不改变背景色 */
|
||
}
|
||
|
||
/* 修改充电按钮的样式，增加右侧间距 */
|
||
.donate-button {
|
||
margin-right: 12px; /* 增加右侧间距 */
|
||
}
|
||
|
||
/* 暗色模式下也保持磁贴不变色 */
|
||
[data-theme="dark"] .app-tile:hover,
|
||
[data-theme="dark"] .app-tile:active {
|
||
background: none !important;
|
||
}
|
||
|
||
/* 修改分类颜色样式，使用伪元素实现背景色 */
|
||
.category-color-0::before { background: #FF6B6B; } /* 红色 */
|
||
.category-color-1::before { background: #4ECDC4; } /* 青色 */
|
||
.category-color-2::before { background: #45B7D1; } /* 蓝色 */
|
||
/* ... 其他颜色保持不变 ... */
|
||
|
||
/* 添加伪元素作为背景 */
|
||
.category-tile::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 12px;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 修改分类磁贴的基础样式 */
|
||
.category-tile {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
padding: 20px 15px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
cursor: pointer;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
/* 恢复原来的背景图标样式 */
|
||
.category-icon {
|
||
position: absolute;
|
||
right: -10px;
|
||
bottom: -10px;
|
||
font-size: 48px;
|
||
opacity: 0.1;
|
||
transform: rotate(-15deg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.category-tile:hover .category-icon {
|
||
transform: rotate(0deg);
|
||
opacity: 0.15;
|
||
}
|
||
|
||
/* 分类颜色 - 扩充为16种颜色 */
|
||
.category-color-0 { background: #FF6B6B; } /* 红色 */
|
||
.category-color-1 { background: #4ECDC4; } /* 青色 */
|
||
.category-color-2 { background: #45B7D1; } /* 蓝色 */
|
||
.category-color-3 { background: #96CEB4; } /* 绿色 */
|
||
.category-color-4 { background: #FFB75E; } /* 橙色 */
|
||
.category-color-5 { background: #D4A5A5; } /* 粉色 */
|
||
.category-color-6 { background: #9B59B6; } /* 紫色 */
|
||
.category-color-7 { background: #3498DB; } /* 深蓝色 */
|
||
.category-color-8 { background: #2ECC71; } /* 翠绿色 */
|
||
.category-color-9 { background: #F1C40F; } /* 金黄色 */
|
||
.category-color-10 { background: #E74C3C; } /* 深红色 */
|
||
.category-color-11 { background: #1ABC9C; } /* 青绿色 */
|
||
.category-color-12 { background: #8E44AD; } /* 深紫色 */
|
||
.category-color-13 { background: #D35400; } /* 褐色 */
|
||
.category-color-14 { background: #16A085; } /* 绿 */
|
||
.category-color-15 { background: #E67E22; } /* 橘色 */
|
||
|
||
/* 修改磁贴悬停效果 - 只保留上浮效，移除背景色变化 */
|
||
.category-tile:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.category-tile:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 确保内容在最上层 */
|
||
.category-tile-header {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 群组按钮样式 */
|
||
.join-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0px;
|
||
|
||
}
|
||
|
||
.group-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.group-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.qq-btn {
|
||
background: #12B7F5;
|
||
color: white;
|
||
}
|
||
|
||
.wechat-btn {
|
||
background: #07C160;
|
||
color: white;
|
||
}
|
||
|
||
.group-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 群组弹窗样式 */
|
||
.group-container {
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.group-qr {
|
||
max-width: 200px;
|
||
margin: 20px auto;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.group-number {
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.group-tip {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.join-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 20px;
|
||
background: #12B7F5;
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.join-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
<!-- 添加QQ群弹窗 -->
|
||
<div id="qq-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<span class="close" onclick="closeQQModal()">×</span>
|
||
<h3>QQ交流群</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
{% if settings.qq_group_qrcode %}
|
||
<img src="{{ settings.qq_group_qrcode }}" alt="QQ群二维码" class="qr-code">
|
||
{% endif %}
|
||
<div class="group-number-container">
|
||
<p class="group-number">{{ settings.qq_group_number }}</p>
|
||
<button class="copy-btn" onclick="copyGroupNumber()">
|
||
<i class="far fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
<div id="copy-notification" class="copy-notification">
|
||
群号已复制到剪贴板
|
||
</div>
|
||
<a href="{{ settings.qq_group_link }}" class="join-btn qq-join-btn" target="_blank">
|
||
<i class="fab fa-qq"></i>
|
||
立即加入
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* 群号码容器样式 */
|
||
.group-number-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.group-number {
|
||
margin: 0;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 复制按钮样式 */
|
||
.copy-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 4px 8px;
|
||
font-size: 16px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
/* 复制成功提示样式 */
|
||
.copy-notification {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
z-index: 2000;
|
||
}
|
||
|
||
.copy-notification.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 暗色模式样式 */
|
||
[data-theme="dark"] .copy-btn {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .copy-btn:hover {
|
||
background: #333;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 复制群号功能
|
||
function copyGroupNumber() {
|
||
// 从群号文本中提取纯数字
|
||
const groupNumber = document.querySelector('.group-number').textContent.match(/\d+/)[0];
|
||
|
||
// 使用 Clipboard API 复制文本
|
||
navigator.clipboard.writeText(groupNumber).then(() => {
|
||
// 显示复制成功提示
|
||
const notification = document.getElementById('copy-notification');
|
||
notification.classList.add('show');
|
||
|
||
// 1.5秒后藏提示
|
||
setTimeout(() => {
|
||
notification.classList.remove('show');
|
||
}, 1500);
|
||
}).catch(err => {
|
||
console.error('复制失败:', err);
|
||
// 使用备用方案
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = groupNumber;
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
try {
|
||
document.execCommand('copy');
|
||
// 显示复制成功提示
|
||
const notification = document.getElementById('copy-notification');
|
||
notification.classList.add('show');
|
||
setTimeout(() => {
|
||
notification.classList.remove('show');
|
||
}, 1500);
|
||
} catch (err) {
|
||
console.error('备用复制方案失败:', err);
|
||
}
|
||
document.body.removeChild(textarea);
|
||
});
|
||
}
|
||
|
||
// 其他现有的弹窗相关代码保持不变...
|
||
</script>
|
||
|
||
<!-- 添加微信群弹窗 -->
|
||
<div id="wechat-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<span class="close" onclick="closeWeChatModal()">×</span>
|
||
<h3>微信交流群</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
{% if settings.wechat_group_qrcode %}
|
||
<img src="{{ settings.wechat_group_qrcode }}" alt="微信群二维码" class="qr-code">
|
||
{% endif %}
|
||
<p class="group-tip">请扫码加入微信群</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* 群组按钮和平台换的容器样式 */
|
||
.join-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0px;
|
||
}
|
||
|
||
.group-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 群组按钮样式 */
|
||
.group-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.qq-btn {
|
||
background: #12B7F5;
|
||
color: white;
|
||
}
|
||
|
||
.wechat-btn {
|
||
background: #07C160;
|
||
color: white;
|
||
}
|
||
|
||
.group-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 0;
|
||
width: 90%;
|
||
max-width: 320px;
|
||
position: relative;
|
||
animation: modalShow 0.3s ease;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid #eee;
|
||
position: relative;
|
||
}
|
||
|
||
.modal-header h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 0px 20px 20px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 12px;
|
||
font-size: 24px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
}
|
||
|
||
.qr-code {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 0px auto;
|
||
display: block;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.group-number-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.group-number {
|
||
margin: 0;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.copy-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 4px 8px;
|
||
font-size: 16px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
.group-tip {
|
||
margin: 15px 0;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.join-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 20px;
|
||
border-radius: 20px;
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.qq-join-btn {
|
||
background: #12B7F5;
|
||
color: white;
|
||
}
|
||
|
||
.wechat-join-btn {
|
||
background: #07C160;
|
||
color: white;
|
||
}
|
||
|
||
.join-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.copy-notification {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
z-index: 2000;
|
||
}
|
||
|
||
.copy-notification.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 暗色模式样式 */
|
||
[data-theme="dark"] .modal-content {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .close {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .group-number,
|
||
[data-theme="dark"] .group-tip {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .copy-btn {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .copy-btn:hover {
|
||
background: #333;
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .qr-code {
|
||
filter: brightness(0.8);
|
||
}
|
||
|
||
@keyframes modalShow {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 群组弹窗相关函数
|
||
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 = '';
|
||
}
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
window.onclick = function(event) {
|
||
if (event.target.classList.contains('modal')) {
|
||
event.target.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<!-- QQ群弹窗 -->
|
||
<div id="qq-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<span class="close" onclick="closeQQModal()">×</span>
|
||
<h3>QQ交流群</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
{% if settings.qq_group_qrcode %}
|
||
<img src="{{ settings.qq_group_qrcode }}" alt="QQ群二维码" class="qr-code">
|
||
{% endif %}
|
||
<div class="group-number-container">
|
||
<p class="group-number">{{ settings.qq_group_number }}</p>
|
||
<button class="copy-btn" onclick="copyGroupNumber()" title="复制群号">
|
||
<i class="far fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
<div id="copy-notification" class="copy-notification">
|
||
群号已复制到剪贴板
|
||
</div>
|
||
<div class="join-btn-container">
|
||
<a href="{{ settings.qq_group_link }}" class="join-btn qq-join-btn" target="_blank">
|
||
<i class="fab fa-qq"></i>
|
||
立即加入
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信群弹窗 -->
|
||
<div id="wechat-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<span class="close" onclick="closeWeChatModal()">×</span>
|
||
<h3>微信交流群</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
{% if settings.wechat_group_qrcode %}
|
||
<img src="{{ settings.wechat_group_qrcode }}" alt="微信群二维码" class="qr-code">
|
||
{% endif %}
|
||
<p class="group-tip">请扫码加入微信群</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* 弹窗样式 */
|
||
.modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 0;
|
||
width: 90%;
|
||
max-width: 320px;
|
||
position: relative;
|
||
animation: modalShow 0.3s ease;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid #eee;
|
||
position: relative;
|
||
}
|
||
|
||
.modal-header h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 12px;
|
||
font-size: 24px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
}
|
||
|
||
.qr-code {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 0px auto;
|
||
display: block;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.group-number-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.group-number {
|
||
margin: 0;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.group-tip {
|
||
margin: 15px 0;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.join-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 20px;
|
||
border-radius: 20px;
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.qq-join-btn {
|
||
background: #12B7F5;
|
||
color: white;
|
||
}
|
||
|
||
.wechat-join-btn {
|
||
background: #07C160;
|
||
color: white;
|
||
}
|
||
|
||
.join-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(18, 183, 245, 0.2);
|
||
}
|
||
|
||
/* 暗色模式样式 */
|
||
[data-theme="dark"] .modal-content {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .modal-header {
|
||
border-bottom-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .modal-header h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .group-number,
|
||
[data-theme="dark"] .group-tip {
|
||
color: #999;
|
||
}
|
||
|
||
@keyframes modalShow {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 群组弹窗相关函数
|
||
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 = '';
|
||
}
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
window.onclick = function(event) {
|
||
if (event.target.classList.contains('modal')) {
|
||
event.target.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<style>
|
||
/* 站点通知样式 */
|
||
.site-notice-container {
|
||
margin: 15px;
|
||
background: white;
|
||
border-radius: 16px; /* 增大圆角 */
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* 调整阴影 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.site-notice-header {
|
||
display: flex;
|
||
align-items: center; /* 改为居中对齐 */
|
||
padding: 15px; /* 增加内边距 */
|
||
cursor: pointer;
|
||
transition: all 0.3s ease; /* 添加过渡效果 */
|
||
position: relative;
|
||
background: linear-gradient(to right, rgba(0,122,255,0.03), rgba(0,122,255,0.01)); /* 添加渐变背景 */
|
||
}
|
||
|
||
.site-notice-header:hover {
|
||
background: linear-gradient(to right, rgba(0,122,255,0.06), rgba(0,122,255,0.02)); /* 悬停时加深背景 */
|
||
}
|
||
|
||
.notice-icon {
|
||
color: #007AFF;
|
||
margin-right: 12px; /* 增加图标右边距 */
|
||
flex-shrink: 0;
|
||
width: 20px;
|
||
text-align: center;
|
||
font-size: 16px; /* 调整图标大小 */
|
||
animation: noticeIconBounce 2s infinite; /* 添加弹跳动画 */
|
||
}
|
||
|
||
.notice-preview {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #333; /* 加深文字颜色 */
|
||
line-height: 1.6;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 32px;
|
||
text-align: left;
|
||
font-weight: 500; /* 稍微加粗 */
|
||
}
|
||
|
||
.notice-toggle {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #999;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.notice-toggle i {
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.notice-toggle.expanded i {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 添加图标弹跳动画 */
|
||
@keyframes noticeIconBounce {
|
||
0%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .site-notice-container {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .site-notice-header {
|
||
background: linear-gradient(to right, rgba(0,122,255,0.06), rgba(0,122,255,0.02));
|
||
}
|
||
|
||
[data-theme="dark"] .site-notice-header:hover {
|
||
background: linear-gradient(to right, rgba(0,122,255,0.1), rgba(0,122,255,0.04));
|
||
}
|
||
|
||
[data-theme="dark"] .notice-preview {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.site-notice-container {
|
||
margin: 12px;
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.site-notice-header {
|
||
padding: 12px;
|
||
}
|
||
|
||
.notice-preview {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
.site-notice-content {
|
||
height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
padding: 0 15px;
|
||
margin-left: 39px;
|
||
}
|
||
|
||
.site-notice-content.expanded {
|
||
height: auto;
|
||
opacity: 1;
|
||
padding: 0 15px 15px 39px;
|
||
}
|
||
|
||
.notice-text {
|
||
color: #666;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
text-align: left;
|
||
padding-right: 24px; /* 确保展开后的文字也不会和箭头重叠 */
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 修改展开/收起功能
|
||
function toggleNotice() {
|
||
const content = document.querySelector('.site-notice-content');
|
||
const toggle = document.querySelector('.notice-toggle');
|
||
const isExpanded = content.classList.contains('expanded');
|
||
|
||
if (isExpanded) {
|
||
content.style.height = content.scrollHeight + 'px';
|
||
// 触发重排
|
||
content.offsetHeight;
|
||
content.style.height = '0';
|
||
content.classList.remove('expanded');
|
||
toggle.classList.remove('expanded');
|
||
} else {
|
||
content.classList.add('expanded');
|
||
toggle.classList.add('expanded');
|
||
content.style.height = content.scrollHeight + 'px';
|
||
// 动画完成后移除固定高度，允许内容自适应
|
||
setTimeout(() => {
|
||
content.style.height = 'auto';
|
||
}, 300);
|
||
}
|
||
}
|
||
|
||
// 页面加载时初始化通知内容高度
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const content = document.querySelector('.site-notice-content');
|
||
content.style.height = '0';
|
||
});
|
||
</script>
|
||
|
||
{% endblock %}
|
||
|
||
{% block head %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/all.min.css') }}">
|
||
<style>
|
||
/* 修改网站标题样式 */
|
||
.site-header {
|
||
background: #F5F8FB;
|
||
padding: px;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.site-header h1 {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #000;
|
||
margin: 0;
|
||
text-align: left;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* 修改搜索栏样式 */
|
||
.search-bar {
|
||
background: #F5F8FB;
|
||
padding-top: 3px;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
padding-bottom: 5px;
|
||
position: fixed;
|
||
top: 52px;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
transition: transform 0.3s ease;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.search-form {
|
||
display: flex;
|
||
align-items: center;
|
||
max-width: 800px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 搜索结果页的搜栏样式 */
|
||
.search-bar-results .search-wrapper {
|
||
max-width: 700px;
|
||
}
|
||
|
||
.search-wrapper {
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
background: white;
|
||
border-radius: 25px;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
/* 调整搜索图标位置和样式 */
|
||
.search-icon-input {
|
||
position: absolute;
|
||
left: 15px;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 整输入框样式 */
|
||
.search-wrapper input {
|
||
width: 100%;
|
||
height: 44px;
|
||
padding: 0 5px 0 40px;
|
||
border: none;
|
||
border-radius: 25px;
|
||
background: transparent;
|
||
font-size: 16px;
|
||
outline: none;
|
||
}
|
||
|
||
.search-wrapper input:focus {
|
||
background: transparent; /* 保持透明背景 */
|
||
}
|
||
|
||
/* 搜索按钮样 */
|
||
.search-button {
|
||
background: white; /* 改为白色背景 */
|
||
color: #0066cc; /* 改为蓝色文字 */
|
||
border: none; /* 移除边框 */
|
||
border-radius: 6px;
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: opacity 0.3s ease;
|
||
box-shadow: none; /* 移除阴影 */
|
||
}
|
||
|
||
.search-button:hover,
|
||
.search-button:focus {
|
||
opacity: 0.9;
|
||
background: white; /* 保持白色背景 */
|
||
color: #0066cc; /* 保持蓝色文 */
|
||
box-shadow: none; /* 保持无阴影 */
|
||
}
|
||
|
||
.search-button i {
|
||
font-size: 14px;
|
||
color: #0066cc; /* 图标也改为蓝 */
|
||
}
|
||
|
||
/* 移除放镜图标相关式 */
|
||
.search-icon {
|
||
display: none;
|
||
}
|
||
|
||
/* 调整 app-showcase 的 margin-top */
|
||
.app-showcase {
|
||
margin-top: 75px;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.site-header {
|
||
padding: 10px;
|
||
}
|
||
|
||
.site-header h1 {
|
||
font-size: 20px;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.search-wrapper {
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.search-wrapper input {
|
||
padding: 10px 5px 10px 35px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.search-button {
|
||
padding: 6px 20px;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.search-icon i {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
/* 修改搜索栏容器样式 */
|
||
.search-container {
|
||
display: flex;
|
||
align-items: center; /* 垂居中对齐 */
|
||
max-width: 800px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
height: 44px; /* 设置固定高度 */
|
||
}
|
||
|
||
/* 返回箭头样式 */
|
||
.back-arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 44px;
|
||
height: 44px;
|
||
color: #666;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.back-arrow i {
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 搜索表单样式 */
|
||
.search-form {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
height: 44px; /* 与容器高度一致 */
|
||
}
|
||
|
||
/* 搜索框样式 */
|
||
.search-wrapper {
|
||
width: 100%;
|
||
height: 44px; /* 与容器高度一致 */
|
||
display: flex;
|
||
align-items: center;
|
||
background: white;
|
||
border-radius: 25px;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
/* 搜索图标样式 */
|
||
.search-icon-input {
|
||
position: absolute;
|
||
left: 15px;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 搜索输入框样式 */
|
||
.search-wrapper input {
|
||
width: 100%;
|
||
height: 44px; /* 与容器高度一致 */
|
||
padding: 0 5px 0 40px; /* 调整内边距 */
|
||
border: none;
|
||
border-radius: 25px;
|
||
background: transparent;
|
||
font-size: 16px;
|
||
outline: none;
|
||
}
|
||
|
||
/* 修改热门应用区域的样式 */
|
||
.hot-apps-section {
|
||
margin: 0 15px; /* 移除顶部间距，只保留左右间距 */
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
padding: 10px 20px 0px 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
position: relative;
|
||
}
|
||
|
||
.hot-apps-section .apps-scroll {
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
-webkit-overflow-scrolling: touch;
|
||
margin: 0 -20px;
|
||
padding: 10px 15px 10px 15px;
|
||
height: 120px;
|
||
|
||
/* 隐滚动条但保留滚动功能 */
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.hot-apps-section .apps-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 优化应用卡片布局 */
|
||
.hot-apps-section .apps-row {
|
||
display: flex;
|
||
gap: 0; /* 移除卡片之间的间距 */
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.hot-apps-section .app-card {
|
||
flex: 0 0 auto;
|
||
width: 64px;
|
||
height: 74px;
|
||
padding: 4px;
|
||
transition: transform 0.3s ease; /* 添加过渡效果 */
|
||
}
|
||
|
||
/* 加悬停效果 */
|
||
.hot-apps-section .app-card:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.hot-apps-section .app-card .app-icon {
|
||
width: 55px;
|
||
height: 55px;
|
||
margin: 0 auto 4px;
|
||
}
|
||
|
||
.hot-apps-section .app-card .app-info h3 {
|
||
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;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 添加滚动提示 */
|
||
.hot-apps-section::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 30px;
|
||
background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
|
||
pointer-events: none;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.section-title i {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.section-title i.fa-star {
|
||
color: #FFB800; /* 今日上新图标颜色 */
|
||
}
|
||
|
||
.section-title i.fa-fire {
|
||
color: #ff3b30; /* 热门应用图颜 */
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: 15px;
|
||
margin: 0;
|
||
color: #333; /* 热门应用标题改为黑色 */
|
||
font-weight: 500;
|
||
}
|
||
|
||
|
||
.search-count {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 修改应用卡片样式以适应搜索次数显示 */
|
||
.app-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
@keyframes fadeInOut {
|
||
0% { opacity: 0; transform: translateY(20px); }
|
||
10% { opacity: 1; transform: translateY(0); }
|
||
90% { opacity: 1; transform: translateY(0); }
|
||
100% { opacity: 0; transform: translateY(-20px); }
|
||
}
|
||
|
||
|
||
/* 改原有的 new-apps-header 相关样式 */
|
||
.new-apps-header {
|
||
display: none; /* 隐藏旧的标题样式 */
|
||
}
|
||
|
||
.new-apps-title {
|
||
display: none; /* 隐旧的标题样式 */
|
||
}
|
||
|
||
/* 修改看全部链接样式 */
|
||
.new-apps-count {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: white;
|
||
text-decoration: none;
|
||
font-size: 12px;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.new-apps-count i {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.view-all {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: #666;
|
||
text-decoration: none;
|
||
font-size: 12px;
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
background: #f5f5f5;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.view-all:hover {
|
||
background: #e5e5e5;
|
||
color: #333;
|
||
}
|
||
|
||
.view-all i {
|
||
font-size: 10px;
|
||
}
|
||
|
||
/* 修改应用卡片中的名称样式 */
|
||
.app-card .app-info h3 {
|
||
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; /* 允许在任意字符间换行 */
|
||
}
|
||
|
||
/* 调整卡高度以适应两行文字 */
|
||
.app-card {
|
||
flex: 0 0 auto;
|
||
width: 64px;
|
||
height: auto; /* 改为自适应高度 */
|
||
min-height: 74px; /* 设置最小高 */
|
||
padding: 4px;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
let lastScrollTop = 0;
|
||
|
||
// 将滚事件监听器装在 DOMContentLoaded 事件中
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const searchBar = document.querySelector('.search-bar');
|
||
const searchIcon = document.querySelector('.search-icon');
|
||
|
||
// 只有当这些元素存在时才添加滚动监听
|
||
if (searchBar && searchIcon) {
|
||
window.addEventListener('scroll', () => {
|
||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
|
||
// 下滚动超过搜索栏高度时
|
||
if (scrollTop > lastScrollTop && scrollTop > 60) {
|
||
searchBar.classList.add('hidden');
|
||
searchIcon.classList.add('visible');
|
||
}
|
||
// 向上滚动或回到顶部时
|
||
else if (scrollTop < lastScrollTop || scrollTop <= 60) {
|
||
searchBar.classList.remove('hidden');
|
||
searchIcon.classList.remove('visible');
|
||
}
|
||
|
||
lastScrollTop = scrollTop;
|
||
});
|
||
}
|
||
});
|
||
|
||
// 点击放大镜图标显示搜索栏
|
||
function toggleSearch() {
|
||
const searchBar = document.querySelector('.search-bar');
|
||
const searchIcon = document.querySelector('.search-icon');
|
||
|
||
if (searchBar && searchIcon) {
|
||
searchBar.classList.remove('hidden');
|
||
searchIcon.classList.remove('visible');
|
||
// 聚到搜索输入框
|
||
const searchInput = document.querySelector('.search-wrapper input');
|
||
if (searchInput) {
|
||
searchInput.focus();
|
||
}
|
||
// 滚动到顶部
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
}
|
||
|
||
// 创建 Intersection Observer
|
||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const img = entry.target;
|
||
img.src = img.dataset.src;
|
||
observer.unobserve(img); // 加载后取消观
|
||
}
|
||
});
|
||
}, {
|
||
rootMargin: '50px 0px', // 提前50px开始加载
|
||
threshold: 0.01
|
||
});
|
||
|
||
// 添<><E6B7BB><EFBFBD>保存和恢复滚动位置的功能
|
||
window.addEventListener('beforeunload', () => {
|
||
// 保存垂直滚动位置
|
||
sessionStorage.setItem('scrollPosition', window.scrollY);
|
||
|
||
// 保存热门应用区域的横向滚动位置
|
||
const hotAppsScroll = document.querySelector('.hot-apps-section .apps-scroll');
|
||
if (hotAppsScroll) {
|
||
sessionStorage.setItem('hotAppsScrollPosition', hotAppsScroll.scrollLeft);
|
||
}
|
||
});
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 检查是否是从应用详情页返回
|
||
if (document.referrer.includes('/app/')) {
|
||
// 恢复垂直滚动位置
|
||
const scrollPosition = sessionStorage.getItem('scrollPosition');
|
||
if (scrollPosition) {
|
||
window.scrollTo(0, parseInt(scrollPosition));
|
||
}
|
||
|
||
// 恢复热门应用区域的横向滚动位置
|
||
const hotAppsScroll = document.querySelector('.hot-apps-section .apps-scroll');
|
||
const hotAppsScrollPosition = sessionStorage.getItem('hotAppsScrollPosition');
|
||
if (hotAppsScroll && hotAppsScrollPosition) {
|
||
hotAppsScroll.scrollLeft = parseInt(hotAppsScrollPosition);
|
||
}
|
||
|
||
// 清除保存位置
|
||
sessionStorage.removeItem('scrollPosition');
|
||
sessionStorage.removeItem('hotAppsScrollPosition');
|
||
}
|
||
|
||
// 原有图片懒载初始化
|
||
document.querySelectorAll('img[data-src]').forEach(img => {
|
||
imageObserver.observe(img);
|
||
});
|
||
});
|
||
|
||
// 修应用点击处理
|
||
function handleAppClick(event, appId) {
|
||
window.location.href = '/app/' + appId; // 统一跳到应用详情页
|
||
}
|
||
|
||
// 添加保存分类滚动位置的函数
|
||
function saveCategoryScrollPosition() {
|
||
sessionStorage.setItem('indexScrollPosition', window.scrollY);
|
||
}
|
||
|
||
// 在页面加载时检查是分类页面返回
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 检查是是从分类页面返回
|
||
if (document.referrer.includes('/category/')) {
|
||
const scrollPosition = sessionStorage.getItem('indexScrollPosition');
|
||
if (scrollPosition) {
|
||
window.scrollTo(0, parseInt(scrollPosition));
|
||
sessionStorage.removeItem('indexScrollPosition');
|
||
}
|
||
}
|
||
// ... 其他现有的代码 ...
|
||
});
|
||
|
||
function showDonateModal() {
|
||
document.getElementById('donate-modal').style.display = 'flex'; // 使用 flex 而不是 block
|
||
|
||
// 防止背景滚动
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeDonateModal() {
|
||
document.getElementById('donate-modal').style.display = 'none';
|
||
|
||
// 恢复背景滚动
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
window.onclick = function(event) {
|
||
const modal = document.getElementById('donate-modal');
|
||
if (event.target == modal) {
|
||
closeDonateModal();
|
||
}
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 检查是否是从赞赏名单页面返回
|
||
if (document.referrer.includes('/donors')) {
|
||
const scrollPosition = sessionStorage.getItem('indexScrollPosition');
|
||
if (scrollPosition) {
|
||
window.scrollTo(0, parseInt(scrollPosition));
|
||
sessionStorage.removeItem('indexScrollPosition');
|
||
}
|
||
}
|
||
|
||
// 其他现有的代码...
|
||
});
|
||
|
||
// 保存滚动位置
|
||
function saveScrollPosition() {
|
||
sessionStorage.setItem('indexScrollPosition', window.scrollY);
|
||
}
|
||
|
||
// 在面加载时检查是否需要恢复位置
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 检查是否是从赞赏名单页面返回
|
||
if (document.referrer.includes('/donors')) {
|
||
const scrollPosition = sessionStorage.getItem('indexScrollPosition');
|
||
if (scrollPosition) {
|
||
window.scrollTo({
|
||
top: parseInt(scrollPosition),
|
||
behavior: 'instant' // 使用 instant 而不是 smooth
|
||
});
|
||
sessionStorage.removeItem('indexScrollPosition');
|
||
}
|
||
}
|
||
});
|
||
|
||
// 根分类名称回应的图标类名
|
||
function get_category_icon(categoryName) {
|
||
const iconMap = {
|
||
'元服务板块': 'fa-rocket',
|
||
'工具': 'fa-tools',
|
||
'社交': 'fa-comments',
|
||
'娱乐': 'fa-gamepad',
|
||
'音乐': 'fa-music',
|
||
'视频': 'fa-video',
|
||
'图片': 'fa-images',
|
||
'阅读': 'fa-book-reader',
|
||
'新闻': 'fa-newspaper',
|
||
'购物': 'fa-shopping-cart',
|
||
'教育': 'fa-graduation-cap',
|
||
'金融': 'fa-money-bill-wave',
|
||
'美食': 'fa-utensils',
|
||
'旅游': 'fa-plane',
|
||
'运动': 'fa-running',
|
||
'天气': 'fa-cloud-sun',
|
||
'导航': 'fa-compass',
|
||
'办公': 'fa-briefcase',
|
||
'其他': 'fa-ellipsis-h',
|
||
'汽车': 'fa-car',
|
||
'阅读与工具书': 'fa-book',
|
||
'出行导航': 'fa-taxi'
|
||
};
|
||
|
||
return iconMap[categoryName] || 'fa-folder'; // 默认图标
|
||
}
|
||
|
||
// 修改切换功能的JavaScript
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 主页平台切换
|
||
const platformToggle = document.getElementById('platformToggle');
|
||
const mobileApps = document.querySelector('.mobile-apps');
|
||
const tabletApps = document.querySelector('.tablet-apps');
|
||
|
||
if (platformToggle && mobileApps && tabletApps) {
|
||
// 切换功能
|
||
platformToggle.addEventListener('change', function() {
|
||
if (this.checked) {
|
||
// 平应用
|
||
mobileApps.style.opacity = '0';
|
||
setTimeout(() => {
|
||
mobileApps.style.display = 'none';
|
||
tabletApps.style.display = 'grid';
|
||
setTimeout(() => {
|
||
tabletApps.style.opacity = '1';
|
||
}, 50);
|
||
}, 300);
|
||
} else {
|
||
// 手应用
|
||
tabletApps.style.opacity = '0';
|
||
setTimeout(() => {
|
||
tabletApps.style.display = 'none';
|
||
mobileApps.style.display = 'grid';
|
||
setTimeout(() => {
|
||
mobileApps.style.opacity = '1';
|
||
}, 50);
|
||
}, 300);
|
||
}
|
||
|
||
// 保存用户选择
|
||
localStorage.setItem('selectedPlatform', this.checked ? 'tablet' : 'mobile');
|
||
});
|
||
|
||
// 恢复用户之前的选择
|
||
const savedPlatform = localStorage.getItem('selectedPlatform');
|
||
if (savedPlatform === 'tablet') {
|
||
platformToggle.checked = true;
|
||
platformToggle.dispatchEvent(new Event('change'));
|
||
}
|
||
}
|
||
|
||
// 搜索结果平台切换
|
||
const searchToggle = document.getElementById('searchPlatformToggle');
|
||
const mobileResults = document.querySelector('.mobile-results');
|
||
const tabletResults = document.querySelector('.tablet-results');
|
||
|
||
if (searchToggle && mobileResults && tabletResults) {
|
||
// 切换功能
|
||
searchToggle.addEventListener('change', function() {
|
||
if (this.checked) {
|
||
// 平板应用
|
||
mobileResults.style.opacity = '0';
|
||
setTimeout(() => {
|
||
mobileResults.style.display = 'none';
|
||
tabletResults.style.display = 'grid';
|
||
setTimeout(() => {
|
||
tabletResults.style.opacity = '1';
|
||
}, 50);
|
||
}, 300);
|
||
} else {
|
||
// 手机应用
|
||
tabletResults.style.opacity = '0';
|
||
setTimeout(() => {
|
||
tabletResults.style.display = 'none';
|
||
mobileResults.style.display = 'grid';
|
||
setTimeout(() => {
|
||
mobileResults.style.opacity = '1';
|
||
}, 50);
|
||
}, 300);
|
||
}
|
||
|
||
// 保存用户选择
|
||
localStorage.setItem('searchPlatform', this.checked ? 'tablet' : 'mobile');
|
||
});
|
||
|
||
// <20><>复用户之前的选择
|
||
const savedSearchPlatform = localStorage.getItem('searchPlatform');
|
||
if (savedSearchPlatform === 'tablet') {
|
||
searchToggle.checked = true;
|
||
searchToggle.dispatchEvent(new Event('change'));
|
||
}
|
||
}
|
||
});
|
||
|
||
// 添加平滑切换动画样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.categories-grid {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.mobile-apps,
|
||
.tablet-apps {
|
||
opacity: 1;
|
||
}
|
||
|
||
.mobile-apps.hidden,
|
||
.tablet-apps.hidden {
|
||
opacity: 0;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 添加返回按钮处理函数
|
||
function handleBackClick() {
|
||
const searchInput = document.querySelector('input[name="search"]');
|
||
if (searchInput) {
|
||
searchInput.value = '';
|
||
searchInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||
}
|
||
|
||
// 更新 URL，移除搜索参数
|
||
const url = new URL(window.location.href);
|
||
if (url.searchParams.has('search')) {
|
||
url.searchParams.delete('search');
|
||
window.history.replaceState({}, '', url);
|
||
}
|
||
|
||
// 清搜索状态
|
||
sessionStorage.removeItem('isSearching');
|
||
|
||
// 直接跳转到首页，而是使用浏览后退
|
||
window.location.href = '/';
|
||
}
|
||
|
||
// 监听浏览器后退按钮
|
||
window.addEventListener('popstate', function(event) {
|
||
const searchInput = document.querySelector('input[name="search"]');
|
||
if (searchInput) {
|
||
searchInput.value = '';
|
||
searchInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||
}
|
||
// 清除搜索状态
|
||
sessionStorage.removeItem('isSearching');
|
||
});
|
||
|
||
// 添加搜索表单提交处理
|
||
document.querySelector('.search-form').addEventListener('submit', function(event) {
|
||
const searchInput = document.querySelector('input[name="search"]');
|
||
if (!searchInput.value.trim()) {
|
||
event.preventDefault();
|
||
sessionStorage.removeItem('isSearching');
|
||
window.location.href = '/';
|
||
} else {
|
||
sessionStorage.setItem('isSearching', 'true');
|
||
}
|
||
});
|
||
|
||
// 添加页面可见性变化监听
|
||
document.addEventListener('visibilitychange', function() {
|
||
if (document.visibilityState === 'visible' && sessionStorage.getItem('isSearching') !== 'true') {
|
||
const searchInput = document.querySelector('input[name="search"]');
|
||
if (searchInput) {
|
||
searchInput.value = '';
|
||
searchInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||
}
|
||
}
|
||
});
|
||
|
||
// 添加页面卸载前的清理
|
||
window.addEventListener('beforeunload', function() {
|
||
if (!window.location.href.includes('search=')) {
|
||
sessionStorage.removeItem('isSearching');
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<div class="group-buttons">
|
||
{% if settings and settings.qq_group_link %}
|
||
<button class="group-btn qq-btn" onclick="showQQModal()">
|
||
<i class="fab fa-qq"></i>
|
||
<span class="btn-text">{{ settings.qq_group_text or 'QQ群' }}</span>
|
||
</button>
|
||
{% endif %}
|
||
|
||
{% if settings and settings.wechat_group_qrcode %}
|
||
<button class="group-btn wechat-btn" onclick="showWeChatModal()">
|
||
<i class="fab fa-weixin"></i>
|
||
<span class="btn-text">{{ settings.wechat_group_text or '微信群' }}</span>
|
||
</button>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<style>
|
||
/* 群组按钮容器样式 */
|
||
.group-buttons {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
/* 群组按钮基础样式 */
|
||
.group-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 16px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
color: white;
|
||
min-width: 120px;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 图标样式 */
|
||
.group-btn i {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 按钮文字样式 */
|
||
.group-btn .btn-text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* QQ群按钮样式 */
|
||
.qq-btn {
|
||
background: #12B7F5;
|
||
}
|
||
|
||
/* 微信群按钮样式 */
|
||
.wechat-btn {
|
||
background: #07C160;
|
||
}
|
||
|
||
/* 悬停效果 */
|
||
.group-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .group-btn {
|
||
color: white;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.group-buttons {
|
||
margin-bottom: 0px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.group-btn {
|
||
padding: 5px 12px;
|
||
min-width: 100px;
|
||
}
|
||
|
||
.group-btn i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.group-btn .btn-text {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕适配 */
|
||
@media (max-width: 360px) {
|
||
.group-buttons {
|
||
gap: 8px;
|
||
}
|
||
|
||
.group-btn {
|
||
padding: 4px 10px;
|
||
min-width: 90px;
|
||
}
|
||
|
||
.group-btn .btn-text {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* 充电按钮样式 */
|
||
.button {
|
||
--h-button: 42px; /* 减小高度 */
|
||
--w-button: 88px; /* 减小宽度 */
|
||
--round: 0.75rem;
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
transition: all 0.25s ease;
|
||
background: radial-gradient(
|
||
65.28% 65.28% at 50% 100%,
|
||
rgba(223, 113, 255, 0.8) 0%,
|
||
rgba(223, 113, 255, 0) 100%
|
||
),
|
||
linear-gradient(0deg, #7a5af8, #7a5af8);
|
||
border-radius: var(--round);
|
||
border: none;
|
||
outline: none;
|
||
padding: 10px 16px; /* 减小内边距 */
|
||
}
|
||
|
||
.button::before {
|
||
--space: 1px;
|
||
background: linear-gradient(
|
||
177.95deg,
|
||
rgba(255, 255, 255, 0.19) 0%,
|
||
rgba(255, 255, 255, 0) 100%
|
||
);
|
||
}
|
||
|
||
.button::after {
|
||
--space: 2px;
|
||
background: radial-gradient(
|
||
65.28% 65.28% at 50% 100%,
|
||
rgba(223, 113, 255, 0.8) 0%,
|
||
rgba(223, 113, 255, 0) 100%
|
||
),
|
||
linear-gradient(0deg, #7a5af8, #7a5af8);
|
||
}
|
||
|
||
.button:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.fold {
|
||
z-index: 1;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
height: 0.8rem; /* 减小折角大小 */
|
||
width: 0.8rem;
|
||
display: inline-block;
|
||
transition: all 0.5s ease-in-out;
|
||
background: radial-gradient(
|
||
100% 75% at 55%,
|
||
rgba(223, 113, 255, 0.8) 0%,
|
||
rgba(223, 113, 255, 0) 100%
|
||
);
|
||
box-shadow: 0 0 3px black;
|
||
border-bottom-left-radius: 0.5rem;
|
||
border-top-right-radius: var(--round);
|
||
}
|
||
|
||
.fold::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 150%;
|
||
height: 150%;
|
||
transform: rotate(45deg) translateX(0%) translateY(-18px);
|
||
background-color: #e8e8e8;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.button:hover .fold {
|
||
margin-top: -1rem;
|
||
margin-right: -1rem;
|
||
}
|
||
|
||
.points_wrapper {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
z-index: 1;
|
||
}
|
||
|
||
.points_wrapper .point {
|
||
bottom: -10px;
|
||
position: absolute;
|
||
animation: floating-points infinite ease-in-out;
|
||
pointer-events: none;
|
||
width: 2px;
|
||
height: 2px;
|
||
background-color: #fff;
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
@keyframes floating-points {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
85% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
transform: translateY(-55px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* 设置每个点的位置和动画 */
|
||
.points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
|
||
.points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
|
||
.points_wrapper .point:nth-child(3) { left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s; }
|
||
.points_wrapper .point:nth-child(4) { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
|
||
.points_wrapper .point:nth-child(5) { left: 50%; opacity: 1; animation-duration: 1.9s; }
|
||
.points_wrapper .point:nth-child(6) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }
|
||
.points_wrapper .point:nth-child(7) { left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s; }
|
||
.points_wrapper .point:nth-child(8) { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
|
||
.points_wrapper .point:nth-child(9) { left: 98%; opacity: 0.6; animation-duration: 2.6s; animation-delay: 0.1s; }
|
||
.points_wrapper .point:nth-child(10) { left: 65%; opacity: 1; animation-duration: 2.5s; animation-delay: 0.2s; }
|
||
|
||
.inner {
|
||
z-index: 2;
|
||
font-size: 14px; /* 减小文字大小 */
|
||
gap: 4px; /* 减小图标和文字的间距 */
|
||
position: relative;
|
||
width: 100%;
|
||
color: white;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: color 0.2s ease-in-out;
|
||
}
|
||
|
||
.inner svg.icon {
|
||
width: 16px; /* 减小图标大小 */
|
||
height: 16px;
|
||
transition: fill 0.1s linear;
|
||
}
|
||
|
||
.button:focus svg.icon {
|
||
fill: white;
|
||
}
|
||
|
||
.button:hover svg.icon {
|
||
fill: transparent;
|
||
animation:
|
||
dasharray 1s linear forwards,
|
||
filled 0.1s linear forwards 0.95s;
|
||
}
|
||
|
||
@keyframes dasharray {
|
||
from {
|
||
stroke-dasharray: 0 0 0 0;
|
||
}
|
||
to {
|
||
stroke-dasharray: 68 68 0 0;
|
||
}
|
||
}
|
||
|
||
@keyframes filled {
|
||
to {
|
||
fill: white;
|
||
}
|
||
}
|
||
/* 修改充电按钮的样式，增加右侧间距 */
|
||
.donate-new-button {
|
||
margin-right: 15px; /* 增加右侧间距 */
|
||
}
|
||
|
||
</style>
|
||
{% endblock %}
|
||
|
||
<style>
|
||
/* 修改底部链接样式 */
|
||
.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;
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.footer-links .footer-link:hover,
|
||
.footer-links .icp-link:hover {
|
||
color: #333; /* 只改变文字颜色，移除背景色变化 */
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .footer-links .footer-link:hover,
|
||
[data-theme="dark"] .footer-links .icp-link:hover {
|
||
color: #fff; /* 只改变文字颜色，移除背景色变化 */
|
||
}
|
||
</style>
|
||
|
||
<!-- 在文件末尾，在最后的 </div> 之前添加 -->
|
||
{% include 'nav_bar.html' %}
|
||
|
||
<!-- 修改 app-showcase 的样式，添加底部边距 -->
|
||
<style>
|
||
.app-showcase {
|
||
margin-bottom: 60px; /* 为底部导航栏留出空间 */
|
||
}
|
||
</style>
|
||
|
||
{% block footer %}{% endblock %}
|
||
|