The_evening_detective/evening_detective_frontend
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update scenarios

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-19 17:07:22 +07:00
parent 2599be3f53
commit a97993c70b
6 changed files with 160 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ScenariosPage.vue
+122 -3
View File
@@ -5,9 +5,128 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
<template>
<HeaderMenu :add-logout="true" active="scenarios" />
<div class="center-block-custom content-block">
Сценарии
<div class="center-block-custom-big content-block">
<div class="scenarios-container">
<div class="scenario-block">
<div class="scenario-image-block scenario-image-plus">+</div>
<p class="scenario-title">Создать новый сценарий</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
</div>
</div>
</template>
<style scoped></style>
<style scoped>
.scenarios-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
overflow-y: auto;
padding: 40px 0;
height: calc(100vh - 70px);
}
.scenario-block {
margin: 10px;
width: 250px;
cursor: pointer;
/* background-color: #553333; */
}
.scenario-block:hover {
color: #63e2b7;
}
.scenario-image-block {
width: 250px;
height: 250px;
border-radius: 10px;
}
.scenario-image-block:hover {
color: #63e2b7;
border: 2px solid #63e2b7;
}
.scenario-image-plus {
font-size: 120px;
display: flex;
justify-content: center;
align-items: center;
background-color: #333333;
}
.scenario-image {
background-image: url('https://avatars.mds.yandex.net/i?id=6afaa986a0a8ca7c47697195bc71a531_l-4510207-images-thumbs&n=13');
background-size: cover;
background-position: center;
}
.scenario-title {
padding: 5px 0;
}
</style>