|
|
@@ -40,23 +40,50 @@
|
|
|
{% if timeline_data %}
|
|
|
<div class="space-y-5">
|
|
|
{% for item in timeline_data %}
|
|
|
- <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
|
|
+ <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden" data-subject="{{ item.subject.id }}">
|
|
|
<div class="px-5 py-3.5 flex items-center gap-3 border-b border-gray-50">
|
|
|
<span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color:{{ item.subject.color }};box-shadow:0 0 0 3px {{ item.subject.color }}20"></span>
|
|
|
<span class="font-bold text-gray-800 text-sm">{{ item.subject.name }}</span>
|
|
|
- <span class="text-xs text-gray-400 ml-auto">{{ item.images|length }} 张错题</span>
|
|
|
+ <span class="text-xs text-gray-400 ml-auto" id="count-{{ item.subject.id }}">加载中...</span>
|
|
|
<a href="/subject/{{ item.subject.id }}?date={{ current_date }}" class="text-xs text-primary hover:underline ml-2 flex items-center gap-1"><i class="fa-solid fa-arrow-right"></i>进入科目</a>
|
|
|
</div>
|
|
|
- <div class="p-4 grid grid-cols-5 gap-3">
|
|
|
- {% for img in item.images %}
|
|
|
- <div class="group relative aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 cursor-pointer" onclick="openLightbox('/static/uploads/{{ img.filename }}','{{ img.original_name }}',lb{{ item.subject.id }},{{ loop.index0 }})">
|
|
|
- <img src="/static/uploads/{{ img.filename }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
|
|
|
- <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition"></div>
|
|
|
- <div class="absolute bottom-1.5 left-1.5 right-1.5">
|
|
|
- <p class="text-[10px] text-white/80 truncate px-1 py-0.5 bg-black/30 rounded">{{ img.original_name }}</p>
|
|
|
+ {% set txt_list = [] %}
|
|
|
+ {% set img_list = [] %}
|
|
|
+ {% for img in item.images %}{% if img.filename %}{% set x = img_list.append(img) %}{% else %}{% set x = txt_list.append(img) %}{% endif %}{% endfor %}
|
|
|
+ <div class="p-4">
|
|
|
+ {% if img_list %}
|
|
|
+ <div class="grid grid-cols-5 gap-3 mb-3">
|
|
|
+ {% for img in img_list %}
|
|
|
+ <div class="group relative aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 cursor-pointer" onclick="openLightbox('/static/uploads/{{ img.filename }}','{{ img.original_name }}',lbImg{{ item.subject.id }},{{ loop.index0 }})">
|
|
|
+ <img src="/static/uploads/{{ img.filename }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
|
|
|
+ <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition"></div>
|
|
|
+ <div class="absolute bottom-1.5 left-1.5 right-1.5">
|
|
|
+ <p class="text-[10px] text-white/80 truncate px-1 py-0.5 bg-black/30 rounded">{{ img.original_name }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ {% endfor %}
|
|
|
</div>
|
|
|
- {% endfor %}
|
|
|
+ {% endif %}
|
|
|
+ {% if txt_list %}
|
|
|
+ <div class="border-t border-gray-50 pt-3 mt-1">
|
|
|
+ <div class="text-xs text-gray-400 mb-2 flex items-center gap-1"><i class="fa-solid fa-keyboard"></i>{{ txt_list|length }} 条文字记录</div>
|
|
|
+ <div class="grid grid-cols-5 gap-3">
|
|
|
+ {% for txt in txt_list %}
|
|
|
+ <div class="rounded-xl overflow-hidden bg-violet-50 border border-violet-100 cursor-pointer hover:shadow-sm transition" onclick="toggleTimelineAnswer(this)">
|
|
|
+ <div class="p-3">
|
|
|
+ <p class="text-xs font-medium text-gray-700 line-clamp-2 leading-relaxed">{{ txt.question[:40] }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="timeline-answer hidden px-3 pb-3">
|
|
|
+ <p class="text-[11px] text-gray-500 leading-relaxed">{{ txt.answer }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {% endfor %}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {% endif %}
|
|
|
+ </div>
|
|
|
+ <div class="px-5 py-2 bg-gray-50 border-t border-gray-50 flex items-center gap-3">
|
|
|
+ <span class="text-xs text-gray-400">{{ img_list|length }} 张错题{% if txt_list %} · {{ txt_list|length }} 条文字{% endif %}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
@@ -73,9 +100,23 @@
|
|
|
{% block extra_js %}
|
|
|
<script>
|
|
|
{% for item in timeline_data %}
|
|
|
-const lb{{ item.subject.id }} = [
|
|
|
- {% for img in item.images %}" /static/uploads/{{ img.filename }}",{% endfor %}
|
|
|
+const lbImg{{ item.subject.id }} = [
|
|
|
+ {% for img in item.images %}{% if img.filename %}" /static/uploads/{{ img.filename }}",{% endif %}
|
|
|
+ {% endfor %}
|
|
|
];
|
|
|
{% endfor %}
|
|
|
+document.querySelectorAll('[id^="count-"]').forEach(function(el) {
|
|
|
+ var id = el.id.replace('count-', '');
|
|
|
+ var items = document.querySelectorAll('#timeline-subject-' + id + ' .timeline-entry');
|
|
|
+ var imgCount = document.querySelectorAll('#timeline-subject-' + id + ' .img-entry').length;
|
|
|
+ var txtCount = document.querySelectorAll('#timeline-subject-' + id + ' .txt-entry').length;
|
|
|
+ if (txtCount > 0 && imgCount > 0) el.textContent = imgCount + ' 张错题 · ' + txtCount + ' 条文字';
|
|
|
+ else if (txtCount > 0) el.textContent = txtCount + ' 条文字';
|
|
|
+ else el.textContent = imgCount + ' 张错题';
|
|
|
+});
|
|
|
+function toggleTimelineAnswer(el) {
|
|
|
+ var answer = el.querySelector('.timeline-answer');
|
|
|
+ if (answer) answer.classList.toggle('hidden');
|
|
|
+}
|
|
|
</script>
|
|
|
{% endblock %}
|
