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

add center

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-19 15:24:36 +07:00
parent 3f8b8ba432
commit 2599be3f53
6 changed files with 81 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/main.css
+6 -1
View File
@@ -25,7 +25,7 @@ body {
.content-block { .content-block {
margin-top: 70px; margin-top: 70px;
padding: 10px; padding: 10px;
background-color: #333333; /* background-color: #553333; */
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
@@ -33,4 +33,9 @@ body {
width: 700px; width: 700px;
margin: 70px auto 0 auto; margin: 70px auto 0 auto;
} }
.center-middle-block-custom {
display: grid;
place-items: center;
}
} }
src/components/GamesPage.vue
+3 -1
View File
@@ -5,7 +5,9 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
<template> <template>
<HeaderMenu :add-logout="true" active="games" /> <HeaderMenu :add-logout="true" active="games" />
Игры <div class="center-block-custom content-block">
Игры
</div>
</template> </template>
<style scoped></style> <style scoped></style>
src/components/LoginPage.vue
+59 -53
View File
@@ -52,65 +52,67 @@ async function signup() {
</script> </script>
<template> <template>
<n-card style="margin-bottom: 16px" class="sign-card"> <div class="center-block-custom content-block center-middle-block-custom height100">
<n-tabs type="line" animated> <n-card style="margin-bottom: 16px" class="sign-card">
<n-tabs type="line" animated>
<n-tab-pane name="signin" tab="Вход"> <n-tab-pane name="signin" tab="Вход">
<n-space vertical> <n-space vertical>
<div class="form-label">Почта</div> <div class="form-label">Почта</div>
<n-auto-complete v-model:value="email" :input-props="{ <n-auto-complete v-model:value="email" :input-props="{
autocomplete: 'disabled', autocomplete: 'disabled',
}" :options="options" placeholder="detective@mail.ru" clearable /> }" :options="options" placeholder="detective@mail.ru" clearable />
<div class="form-label">Пароль</div> <div class="form-label">Пароль</div>
<n-input v-model:value="password" type="password" placeholder="********" /> <n-input v-model:value="password" type="password" placeholder="********" />
<div class="form-button-wrapper"> <div class="form-button-wrapper">
<div class="form-label"> <div class="form-label">
<n-button @click="signin" :disabled="email.length == 0 || password.length == 0"> <n-button @click="signin" :disabled="email.length == 0 || password.length == 0">
<span v-if="!authStore.isLoading"> <span v-if="!authStore.isLoading">
Вход Вход
</span> </span>
<span v-else> <span v-else>
Подождите... Подождите...
</span> </span>
</n-button> </n-button>
</div>
</div> </div>
</div> </n-space>
</n-space> </n-tab-pane>
</n-tab-pane>
<n-tab-pane name="signup" tab="Регистрация"> <n-tab-pane name="signup" tab="Регистрация">
<n-space vertical> <n-space vertical>
<div class="form-label">Позывной</div> <div class="form-label">Позывной</div>
<n-input v-model:value="username" type="text" placeholder="Шерлок" /> <n-input v-model:value="username" type="text" placeholder="Шерлок" />
<div class="form-label">Почта</div> <div class="form-label">Почта</div>
<n-auto-complete v-model:value="email" :input-props="{ <n-auto-complete v-model:value="email" :input-props="{
autocomplete: 'disabled', autocomplete: 'disabled',
}" :options="options" placeholder="detective@mail.ru" clearable /> }" :options="options" placeholder="detective@mail.ru" clearable />
<div class="form-label">
<n-checkbox v-model:checked="approval">
Я согласен с
<a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br>
и
<a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a>
</n-checkbox>
</div>
<div class="form-button-wrapper">
<div class="form-label"> <div class="form-label">
<n-button @click="signup" :disabled="username.length == 0 || password.length == 0 || !approval"> <n-checkbox v-model:checked="approval">
<span v-if="!authStore.isLoading"> Я согласен с
Регистрация <a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br>
</span> и
<span v-else> <a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a>
Подождите... </n-checkbox>
</span>
</n-button>
</div> </div>
</div> <div class="form-button-wrapper">
</n-space> <div class="form-label">
</n-tab-pane> <n-button @click="signup" :disabled="username.length == 0 || password.length == 0 || !approval">
<span v-if="!authStore.isLoading">
Регистрация
</span>
<span v-else>
Подождите...
</span>
</n-button>
</div>
</div>
</n-space>
</n-tab-pane>
</n-tabs> </n-tabs>
</n-card> </n-card>
</div>
</template> </template>
<style scoped> <style scoped>
@@ -135,6 +137,10 @@ async function signup() {
color: #63e2b7; color: #63e2b7;
} }
.height100 {
height: 80vh;
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.sign-card { .sign-card {
width: 380px; width: 380px;
src/components/OfficePage.vue
+9 -7
View File
@@ -21,14 +21,16 @@ getPermissions()
<template> <template>
<HeaderMenu :add-logout="true" active="office" /> <HeaderMenu :add-logout="true" active="office" />
<p> <div class="center-block-custom content-block">
Доброго времени суток, {{ authStore.username }}. <p>
</p> Доброго времени суток, {{ authStore.username }}.
<!-- <p> </p>
{{ authStore.userRoles }} <!-- <p>
</p> {{ authStore.userRoles }}
</p>
{{ permissions }} --> {{ permissions }} -->
</div>
</template> </template>
<style scoped></style> <style scoped></style>
src/components/ScenariosPage.vue
+1 -1
View File
@@ -5,7 +5,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
<template> <template>
<HeaderMenu :add-logout="true" active="scenarios" /> <HeaderMenu :add-logout="true" active="scenarios" />
<div class="center-block-custom"> <div class="center-block-custom content-block">
Сценарии Сценарии
</div> </div>
</template> </template>
src/components/UsersPage.vue
+3 -1
View File
@@ -5,7 +5,9 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
<template> <template>
<HeaderMenu :add-logout="true" active="users" /> <HeaderMenu :add-logout="true" active="users" />
Пользователи <div class="center-block-custom content-block">
Пользователи
</div>
</template> </template>
<style scoped></style> <style scoped></style>