feat: make award statistics panel collapsible
- Convert stats-section to collapsible details element - Add expand/collapse indicator (▶/▼) - Save screen space on mobile devices Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -819,11 +819,11 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Section B.5: Award Statistics -->
|
<!-- Section B.5: Award Statistics (Collapsible) -->
|
||||||
<section class="control-section stats-section">
|
<details class="control-section stats-section collapsible-section">
|
||||||
<div class="section-header">
|
<summary class="section-header">
|
||||||
<h2>📊 实时奖项统计</h2>
|
<h2>📊 实时奖项统计</h2>
|
||||||
</div>
|
</summary>
|
||||||
<div class="section-body">
|
<div class="section-body">
|
||||||
<div v-if="Object.keys(awardStats).length === 0" class="no-stats">
|
<div v-if="Object.keys(awardStats).length === 0" class="no-stats">
|
||||||
暂无投票数据
|
暂无投票数据
|
||||||
@@ -845,7 +845,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</details>
|
||||||
|
|
||||||
<!-- Section C: Global Controls -->
|
<!-- Section C: Global Controls -->
|
||||||
<section class="control-section global-section">
|
<section class="control-section global-section">
|
||||||
@@ -1346,6 +1346,31 @@ $admin-danger: #ef4444;
|
|||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Collapsible Section
|
||||||
|
.collapsible-section {
|
||||||
|
&.control-section {
|
||||||
|
summary.section-header {
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2::after {
|
||||||
|
content: ' ▶';
|
||||||
|
font-size: 0.7em;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[open] summary.section-header h2::after {
|
||||||
|
content: ' ▼';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.no-stats {
|
.no-stats {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|||||||
Reference in New Issue
Block a user