wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish daily sales mobile calendar
All checks were successful
CD Pipeline / deploy (push) Successful in 56s
Details

Browse Source
This commit is contained in:
OoO
2026-05-12 21:39:13 +08:00
parent dce2b4f0b7
commit b9ffecbc83
2 changed files with 200 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
templates/daily_sales.html
View File

@@ -208,6 +208,49 @@
{% endfor %}
{% endfor %}
</div>
<div class="daily-calendar-mobile-list" aria-label="手機版業績日期清單">
{% set mobile_days = namespace(count=0) %}
{% for week in calendar_data.weeks %}
{% for day in week %}
{% if day.has_data and day.is_current_month %}
{% set mobile_days.count = mobile_days.count + 1 %}
<a
class="daily-mobile-day {% if day.date == selected_date and not is_month_view %}is-selected{% endif %}"
href="/daily_sales?date={{ day.date }}"
aria-label="{{ day.date }} 業績 {{ '{:,.0f}'.format(day.revenue) }}">
<span class="daily-mobile-day__date">
<strong>{{ day.day }}</strong>
<span>{{ day.weekday }}{% if day.is_holiday %} · {{ day.holiday_name }}{% endif %}</span>
</span>
<span class="daily-mobile-day__trend dod-{{ day.dod_direction }}">
{% if day.dod_direction == 'up' %}<i class="fas fa-arrow-up" aria-hidden="true"></i>
{% elif day.dod_direction == 'down' %}<i class="fas fa-arrow-down" aria-hidden="true"></i>
{% endif %}
{{ day.dod_percent }}%
</span>
<span class="daily-mobile-day__metric">
<span>業績</span>
<strong>${{ '{:,.0f}'.format(day.revenue) }}</strong>
</span>
<span class="daily-mobile-day__metric">
<span>毛利</span>
<strong>${{ '{:,.0f}'.format(day.profit) }}</strong>
<em>{{ '{:.1f}%'.format(day.margin_rate) }}</em>
</span>
<span class="daily-mobile-day__chips">
<span>SKU {{ '{:,.0f}'.format(day.sku_count) }}</span>
<span>客單 ${{ '{:,.0f}'.format(day.avg_price) }}</span>
<span>銷量 {{ '{:,.0f}'.format(day.qty) }}</span>
</span>
</a>
{% endif %}
{% endfor %}
{% endfor %}
{% if mobile_days.count == 0 %}
<div class="daily-mobile-empty">本月尚無可檢視的業績日期。</div>
{% endif %}
</div>
</section>
{% endif %}

157
web/static/css/page-daily-sales.css
View File

@@ -395,6 +395,143 @@
white-space: nowrap;
}
.daily-calendar-mobile-list {
display: none;
}
.daily-mobile-day,
.daily-mobile-empty {
color: var(--momo-text-strong);
background: var(--momo-surface);
border: 1px solid var(--momo-border-subtle);
border-radius: 8px;
}
.daily-mobile-day {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
padding: 12px;
text-decoration: none;
}
.daily-mobile-day:hover {
color: var(--momo-text-strong);
border-color: var(--momo-page-accent);
background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-surface));
}
.daily-mobile-day.is-selected {
border-color: var(--momo-page-accent);
box-shadow: inset 0 0 0 1px var(--momo-page-accent);
}
.daily-mobile-day__date {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.daily-mobile-day__date strong {
color: var(--momo-text-strong);
font-family: var(--momo-font-display);
font-size: 1.25rem;
font-weight: 800;
line-height: 1;
}
.daily-mobile-day__date span {
overflow: hidden;
color: var(--momo-text-muted);
font-size: 0.76rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.daily-mobile-day__trend {
display: inline-flex;
align-items: center;
justify-self: end;
gap: 4px;
padding: 3px 7px;
border-radius: 6px;
font-family: var(--momo-font-mono, ui-monospace, monospace);
font-size: 0.72rem;
font-weight: 800;
}
.daily-mobile-day__trend.dod-up {
color: var(--momo-surface);
background: var(--momo-tag-rust);
}
.daily-mobile-day__trend.dod-down {
color: var(--momo-surface);
background: var(--momo-tag-olive);
}
.daily-mobile-day__trend.dod-flat {
color: var(--momo-text-strong);
background: color-mix(in srgb, var(--momo-text-muted) 24%, var(--momo-surface));
border: 1px solid var(--momo-border-subtle);
}
.daily-mobile-day__metric {
display: grid;
gap: 2px;
min-width: 0;
padding-top: 2px;
}
.daily-mobile-day__metric span,
.daily-mobile-day__metric em {
color: var(--momo-text-muted);
font-size: 0.68rem;
font-style: normal;
font-weight: 700;
}
.daily-mobile-day__metric strong {
overflow: hidden;
color: var(--momo-text-strong);
font-family: var(--momo-font-mono, ui-monospace, monospace);
font-size: 0.95rem;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.daily-mobile-day__chips {
display: flex;
grid-column: 1 / -1;
flex-wrap: wrap;
gap: 5px;
}
.daily-mobile-day__chips span {
max-width: 100%;
padding: 3px 6px;
overflow: hidden;
color: var(--momo-text-muted);
background: color-mix(in srgb, var(--momo-text-strong) 4%, var(--momo-surface));
border: 1px solid var(--momo-border-subtle);
border-radius: 4px;
font-family: var(--momo-font-mono, ui-monospace, monospace);
font-size: 0.66rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.daily-mobile-empty {
padding: 14px;
color: var(--momo-text-muted);
font-size: 0.82rem;
text-align: center;
}
@media (max-width: 1024px) {
.cal-day { min-height: 124px; padding: 8px; }
.cal-day__num { font-size: 1rem; }
@@ -431,6 +568,26 @@
}
}
@media (max-width: 767px) {
.daily-calendar {
overflow-x: hidden;
}
.daily-calendar__grid {
display: none;
}
.daily-calendar-mobile-list {
display: grid;
gap: 8px;
}
.daily-calendar::after {
content: none;
display: none;
}
}
/* ---------- Mode Banner ---------- */
.daily-mode-banner {
display: flex;