dsrptlab/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine roadmap gantt layout and copy

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-10 17:06:47 +07:00
parent ac6e06f4c5
commit 90058a82d3
1 changed files with 52 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/app.vue
View File

@@ -166,9 +166,9 @@
:nodes="flowNodes"
:edges="flowEdges"
:fit-view-on-init="true"
:nodes-draggable="false"
:nodes-draggable="true"
:nodes-connectable="false"
:elements-selectable="false"
:elements-selectable="true"
:zoom-on-scroll="false"
:zoom-on-pinch="false"
:pan-on-drag="false"
@@ -334,53 +334,45 @@
<section id="roadmap" class="slide">
<div class="slide-top"><span class="slide-num">10</span><span class="slide-label">Roadmap</span></div>
<div class="slide-head">
<h2 class="slide-title">Пилот за 2 месяца, затем смета и приемка</h2>
<h2 class="slide-title">6 месяцев, 3 этапа</h2>
<p class="slide-preamble">
Первые два месяца уходит на запуск пилота: этапы работ, декомпозиция объема и подбор исполнителей.
Затем доводим ресурсную ведомость и смету, а в конце выстраиваем приемку с инспекторами.
М1–М2 — готовим и запускаем пилот: фиксируем этапы работ, разбираем объем на сроки и выбираем исполнителей.
М3–М4 — отрабатываем ресурсную ведомость и смету на данных пилота, уточняем объемы и цены.
М5–М6 — выстраиваем приемку с инспекторами, закрепляем регламенты и готовим масштабирование.
</p>
</div>
<div class="slide-main">
<div class="glass-panel rounded-3xl border border-base-300 p-6">
<div class="grid gap-4 text-sm">
<div class="grid grid-cols-[160px_repeat(6,minmax(0,1fr))] gap-2 text-xs text-neutral/50">
<div class="grid grid-cols-[260px_repeat(6,minmax(0,1fr))] gap-2 text-xs text-neutral/50">
<div>Этап</div>
<div>М1</div>
<div>М2</div>
<div>М3</div>
<div>М4</div>
<div>М5</div>
<div>М6</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="grid grid-cols-[160px_repeat(6,minmax(0,1fr))] items-center gap-2">
<div class="text-neutral/70">Пилот: этапы, объем, исполнители</div>
<div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М1</div>
<div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М2</div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="grid grid-cols-[260px_1fr] items-center gap-4">
<div class="text-neutral/70">Подготовка и запуск пилота</div>
<div class="gantt-track">
<div class="gantt-bar" style="left: 0%; width: 33.333%;"></div>
</div>
</div>
<div class="grid grid-cols-[160px_repeat(6,minmax(0,1fr))] items-center gap-2">
<div class="grid grid-cols-[260px_1fr] items-center gap-4">
<div class="text-neutral/70">Ресурсная ведомость и смета</div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М3</div>
<div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М4</div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="gantt-track">
<div class="gantt-bar" style="left: 33.333%; width: 33.333%;"></div>
</div>
</div>
<div class="grid grid-cols-[160px_repeat(6,minmax(0,1fr))] items-center gap-2">
<div class="grid grid-cols-[260px_1fr] items-center gap-4">
<div class="text-neutral/70">Приемка и инспекторы</div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-base-300/70 py-2"></div>
<div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М5</div>
<div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М6</div>
<div class="gantt-track">
<div class="gantt-bar" style="left: 66.666%; width: 33.333%;"></div>
</div>
</div>
</div>
</div>
@@ -469,7 +461,7 @@ const flowNodes = ref([
{
id: '5',
type: 'step',
position: { x: 720, y: 220 },
position: { x: 960, y: 40 },
data: {
step: '05',
title: 'Эскроу и запуск',
@@ -479,7 +471,7 @@ const flowNodes = ref([
{
id: '6',
type: 'step',
position: { x: 480, y: 220 },
position: { x: 1200, y: 40 },
data: {
step: '06',
title: 'Фиксация прогресса',
@@ -489,7 +481,7 @@ const flowNodes = ref([
{
id: '7',
type: 'step',
position: { x: 240, y: 220 },
position: { x: 1440, y: 40 },
data: {
step: '07',
title: 'Приемка и расчет',
@@ -502,9 +494,9 @@ const flowEdges = ref([
{ id: 'e1-2', source: '1', target: '2', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
{ id: 'e2-3', source: '2', target: '3', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
{ id: 'e3-4', source: '3', target: '4', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
{ id: 'e4-5', source: '4', target: '5', sourceHandle: 'source-b', targetHandle: 'target-t', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
{ id: 'e5-6', source: '5', target: '6', sourceHandle: 'source-l', targetHandle: 'target-r', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
{ id: 'e6-7', source: '6', target: '7', sourceHandle: 'source-l', targetHandle: 'target-r', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed }
{ id: 'e4-5', source: '4', target: '5', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
{ id: 'e5-6', source: '5', target: '6', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
{ id: 'e6-7', source: '6', target: '7', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed }
])
onMounted(() => {
@@ -562,7 +554,7 @@ html {
.flow-wrapper {
width: 100%;
height: 420px;
height: 280px;
overflow: hidden;
}
@@ -695,6 +687,25 @@ html {
-webkit-backdrop-filter: blur(24px) saturate(1.15);
}
.gantt-track {
position: relative;
height: 18px;
border-radius: 999px;
background:
linear-gradient(to right, rgba(20, 20, 20, 0.1) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%,
rgba(20, 20, 20, 0.06);
overflow: hidden;
}
.gantt-bar {
position: absolute;
top: 2px;
height: 14px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(67, 56, 118, 0.9), rgba(102, 126, 234, 0.85));
box-shadow: 0 6px 14px rgba(67, 56, 118, 0.25);
}
.glass-card {
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.45);