mirror of
https://github.com/Nezumi-2711/astrbot_plugin_qq_group_daily_analysis.git
synced 2026-09-22 13:38:43 +00:00
fix(scrapbook): activity_chart 排版调整为横向,减小没有实质内容的 activity_chart 对排版的空间占用
This commit is contained in:
@@ -1,28 +1,34 @@
|
||||
{% for item in chart_data %}
|
||||
{% set color_var = 'var(--color-purple)' %}
|
||||
{% set width = '2%' %}
|
||||
<div class="chart-section-horizontal">
|
||||
{% for item in chart_data %}
|
||||
{% set bar_bg = 'var(--color-purple)' %}
|
||||
{% set bar_height = '4px' %}
|
||||
{% set bar_opacity = '1' %}
|
||||
|
||||
{% if item.count == 0 %}
|
||||
{% set color_var = 'var(--color-purple)' %}
|
||||
{% set width = '2%' %}
|
||||
{% elif item.percentage >= 70 %}
|
||||
{% set color_var = 'var(--accent-orange)' %}
|
||||
{% set width = item.percentage ~ '%' %}
|
||||
{% elif item.percentage >= 30 %}
|
||||
{% set color_var = 'var(--color-green)' %}
|
||||
{% set width = item.percentage ~ '%' %}
|
||||
{% else %}
|
||||
{% set color_var = 'var(--color-blue)' %}
|
||||
{% set width = item.percentage ~ '%' %}
|
||||
{% endif %}
|
||||
{% if item.count == 0 %}
|
||||
{% set bar_bg = 'var(--ink-secondary)' %}
|
||||
{% set bar_height = '4px' %}
|
||||
{% set bar_opacity = '0.2' %}
|
||||
{% elif item.percentage >= 70 %}
|
||||
{% set bar_bg = 'var(--accent-orange)' %}
|
||||
{% set bar_height = item.percentage ~ '%' %}
|
||||
{% elif item.percentage >= 30 %}
|
||||
{% set bar_bg = 'var(--color-green)' %}
|
||||
{% set bar_height = item.percentage ~ '%' %}
|
||||
{% else %}
|
||||
{% set bar_bg = 'var(--color-blue)' %}
|
||||
{% set bar_height = item.percentage ~ '%' %}
|
||||
{% endif %}
|
||||
|
||||
<div class="hand-chart-row">
|
||||
<div class="chart-label">{{ "%02d" | format(item.hour) }}:00</div>
|
||||
<div class="chart-bar-box">
|
||||
<div class="crayon-bar" style="width: {{ width }}; background: {{ color_var }};"></div>
|
||||
<div class="chart-column">
|
||||
{% if item.count > 0 %}
|
||||
<div class="chart-value-top">{{ item.count }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% set style_str = 'height: ' ~ bar_height ~ '; background: ' ~ bar_bg ~ '; opacity: ' ~ bar_opacity ~ ';
|
||||
border-bottom: none;' %}
|
||||
<div class="chart-bar-vertical" style="{{ style_str }}"></div>
|
||||
|
||||
<div class="chart-label-xaxis">{{ "%02d" | format(item.hour) }}</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left: 10px; font-size: 0.7rem; font-family: var(--font-hand); color: var(--ink-secondary); min-width: 30px;">
|
||||
{{ item.count }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -309,6 +309,57 @@
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4L4 0' stroke='rgba(0,0,0,0.1)' stroke-width='1'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ==================== Horizontal Chart Styles ==================== */
|
||||
.chart-section-horizontal {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
height: 220px;
|
||||
padding: 20px 10px 5px 10px;
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
border-bottom: 2px solid var(--ink-secondary);
|
||||
}
|
||||
|
||||
.chart-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
margin: 0 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-bar-vertical {
|
||||
width: 100%;
|
||||
border-radius: 5px 5px 0 0;
|
||||
min-height: 4px;
|
||||
position: relative;
|
||||
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.chart-label-xaxis {
|
||||
margin-top: 8px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-secondary);
|
||||
font-family: var(--font-hand);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chart-value-top {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
color: var(--ink-secondary);
|
||||
font-family: var(--font-hand);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ==================== 4. 活跃时段 ==================== */
|
||||
/* ==================== 4. 活跃时段 (新版) ==================== */
|
||||
.highlight-section {
|
||||
|
||||
Reference in New Issue
Block a user