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/LoginPage.vue
+1 -5
View File
@@ -52,7 +52,7 @@ async function signup() {
</script>
<template>
<div class="center-block-custom content-block center-middle-block-custom height100">
<div class="center-block-custom content-block center-middle-block-custom height80">
<n-card style="margin-bottom: 16px" class="sign-card">
<n-tabs type="line" animated>
@@ -137,10 +137,6 @@ async function signup() {
color: #63e2b7;
}
.height100 {
height: 80vh;
}
@media (min-width: 1024px) {
.sign-card {
width: 380px;
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>