初始化鸿蒙应用展示平台项目 - 前后端分离架构
This commit is contained in:
Nvex
278
templates/category.html
Executable file
278
templates/category.html
Executable file
@@ -0,0 +1,278 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="category-page">
|
||||
<div class="header">
|
||||
<a href="{{ url_for('index') }}" class="back-link" title="返回首页">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<div class="header-title">
|
||||
<h1>{{ category.name }} ({{ apps|length }}个)</h1>
|
||||
{% if platform == 'tablet' %}
|
||||
<span class="platform-badge">
|
||||
<i class="fas fa-tablet-alt"></i> 平板应用
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="apps-grid" style="margin: 0; padding: 0;">
|
||||
{% for app in 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 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.category-page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 15px 20px 15px;
|
||||
transform: none !important;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 30px;
|
||||
background: white;
|
||||
padding: 5px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transform: none !important;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
background: #e5e5e7;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
flex: 1;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-family: "SimHei", "黑体", sans-serif;
|
||||
text-align: left;
|
||||
padding-right: auto;
|
||||
margin-right: auto;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.platform-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* 暗色模式样式 */
|
||||
[data-theme="dark"] .category-page {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .header {
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .header h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .back-link {
|
||||
color: #ccc;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .back-link:hover {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .app-card {
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .app-info h3 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 添加全局过渡效果 */
|
||||
* {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 确保 apps-grid 也有过渡效果 */
|
||||
.apps-grid {
|
||||
transition: background-color 0.3s ease;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .apps-grid {
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
.floating-buttons {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 暗色模式样式 */
|
||||
[data-theme="dark"] .theme-toggle {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.floating-buttons {
|
||||
bottom: 30px;
|
||||
right: 15px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加图片渐显效果 */
|
||||
.app-icon img {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.app-icon img.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 保存滚动位置和来源页面
|
||||
window.addEventListener('beforeunload', () => {
|
||||
sessionStorage.setItem('categoryScrollPosition', window.scrollY);
|
||||
// 保存来源页面的路径
|
||||
if (document.referrer) {
|
||||
sessionStorage.setItem('categoryReferer', document.referrer);
|
||||
}
|
||||
});
|
||||
|
||||
// 恢复滚动位置
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 检查是否是从应用详情页返回
|
||||
if (document.referrer.includes('/app/')) {
|
||||
const scrollPosition = sessionStorage.getItem('categoryScrollPosition');
|
||||
if (scrollPosition) {
|
||||
window.scrollTo(0, parseInt(scrollPosition));
|
||||
sessionStorage.removeItem('categoryScrollPosition');
|
||||
}
|
||||
}
|
||||
|
||||
// 优化图片懒加载
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
// 预加载图片
|
||||
const tempImage = new Image();
|
||||
tempImage.onload = () => {
|
||||
img.src = tempImage.src;
|
||||
img.classList.add('loaded');
|
||||
};
|
||||
tempImage.src = img.dataset.src;
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '100px 0px', // 增加预加载距离
|
||||
threshold: 0.01
|
||||
});
|
||||
|
||||
// 批量处理图片
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
if (images.length > 0) {
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
}
|
||||
});
|
||||
|
||||
// 修改返回链接的处理
|
||||
document.querySelector('.back-link').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.history.back();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user