tore/dashbord-top-uslug-b2c-po-re-8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: шапка через kt-ai-pagehead-in, подписи графиков над столбцами

Browse Source
This commit is contained in:
tore 2026-09-04 09:17:05 +00:00
parent cdbbff83cf
commit bfbace0697
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -14,11 +14,11 @@
@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px 24px; }
@media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }
.chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 24px; overflow-x: auto; }
.chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 28px; overflow-x: auto; }
.bar { flex: 1; min-width: 20px; max-width: 28px; border-radius: 2px 2px 0 0; position: relative; cursor: pointer; }
.bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.bar:hover::after { opacity: 1; }
.bar-value { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); }
.bar-value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); }
.table-section { padding: 0 32px 32px; }
.table-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
@ -27,8 +27,10 @@
</head>
<body class="kt-ai-app">
<div class="kt-ai-pagehead">
<img src="./kt-logo.svg" alt="Казахтелеком" height="36">
<h1>Топ услуг B2C по регионам</h1>
<div class="kt-ai-wrap kt-ai-pagehead-in">
<img src="./kt-logo.svg" alt="Казахтелеком" height="36" style="display:block">
<h1 style="margin:0">Топ услуг B2C по регионам</h1>
</div>
</div>
<div class="kpi-strip">