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
package.json
+1 -1
View File
@@ -4,7 +4,7 @@
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
src/api/generated/crabs/evening_detective_server/client.ts
+3 -1
View File
@@ -52,5 +52,7 @@ export function createHttpHandler(
}
export function getURL(): string {
return "http://localhost:8090"
const url = import.meta.env.VITE_API_URL || "http://localhost:8090"
// console.log(url)
return url
}
src/assets/main.css
+17 -2
View File
@@ -2,7 +2,8 @@
body {
overflow: hidden;
background-color: black;
color: #eeeeee;
background-color: #111111;
scrollbar-width: none;
}
@@ -24,18 +25,32 @@ body {
.content-block {
margin-top: 70px;
padding: 10px;
padding: 0 20px;
/* background-color: #553333; */
}
.height80 {
height: 80vh;
}
@media (min-width: 1024px) {
.center-block-custom {
width: 700px;
margin: 70px auto 0 auto;
}
.center-block-custom-big {
width: 1200px;
margin: 70px auto 0 auto;
}
.center-middle-block-custom {
display: grid;
place-items: center;
}
.content-block {
margin-top: 70px;
padding: 0;
}
}
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>
src/views/HomeView.vue
+16 -14
View File
@@ -14,20 +14,22 @@ const keyColorClass = computed(() => {
</script>
<template>
<HeaderMenu :add-login="true" :is-found-key="isFoundKey"/>
<div class="center-block-custom content-block">
<h1 class="font-text">
Вечерний детектив
</h1>
<h3 class="font-text">
Дело №0
</h3>
<p class="content-text">
Поиграем?
<Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey">
<Key24Regular />
</Icon>
</p>
<HeaderMenu :add-login="true" :is-found-key="isFoundKey" />
<div class="center-block-custom content-block center-middle-block-custom height80">
<div>
<h1 class="font-text">
Вечерний детектив
</h1>
<h3 class="font-text">
Дело №0
</h3>
<p class="content-text">
Поиграем?
<Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey">
<Key24Regular />
</Icon>
</p>
</div>
</div>
</template>