clear

src/assets/main.css

@@ -1,24 +1,36 @@
 @import './base.css';
 
+body {
+  overflow: hidden;
+  background-color: black;
+  scrollbar-width: none;
+}
+
 @font-face {
   font-family: font_old_typer;
   src: url('@/assets/fonts/a_OldTyper.ttf');
 }
 
-#app {
+.center-message {
-  max-width: 1280px;
+  display: flex;
-  margin: 40px auto;
+  justify-content: center;
-  padding: 2rem;
+  /* горизонтальное центрирование */
-  font-weight: normal;
+  align-items: center;
+  /* вертикальное центрирование */
+  height: calc(100dvh - 100px);
+  text-align: center;
+  /* центрирование текста */
+}
+
+.content-block {
+  margin-top: 70px;
+  padding: 10px;
+  background-color: #333333;
 }
 
 @media (min-width: 1024px) {
-  body {
+  .center-block-custom {
-    display: flex;
+    width: 700px;
-    place-items: center;
+    margin: 70px auto 0 auto;
-  }
-
-  #app {
-    padding: 0 2rem;
   }
 }

src/components/GamesPage.vue

@@ -3,7 +3,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 </script>
 
 <template>
-    <HeaderMenu :add-logout="true" active="games"/>
+    <HeaderMenu :add-logout="true" active="games" />
 
     Игры
 </template>

src/components/LoginPage.vue

@@ -1,3 +1,56 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { NCard, NTabs, NTabPane, NCheckbox, NButton, NSpace, NInput, NAutoComplete, useMessage } from 'naive-ui'
+import { useAuthStore } from '@/stores/auth';
+import { useRouter } from 'vue-router';
+
+const authStore = useAuthStore();
+
+const router = useRouter()
+
+const message = useMessage()
+
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const approval = ref(false)
+
+
+const options = computed(() => {
+  return ['@mail.ru', '@yandex.ru', '@gmail.com'].map((suffix) => {
+    const prefix = email.value.split('@')[0]
+    return {
+      label: prefix + suffix,
+      value: prefix + suffix
+    }
+  })
+})
+
+async function signin() {
+  const res = await authStore.login(email.value, password.value)
+
+  if (!res && authStore.error != null) {
+    message.error(authStore.error)
+    return
+  }
+
+  router.push('/office')
+}
+
+async function signup() {
+  if (!approval.value) {
+    return
+  }
+  const res = await authStore.signup(username.value, email.value)
+  if (!res && authStore.error != null) {
+    message.error(authStore.error)
+    return
+  }
+  message.info("Пароль отправлен на почту")
+}
+</script>
+
 <template>
   <n-card style="margin-bottom: 16px" class="sign-card">
     <n-tabs type="line" animated>
@@ -60,59 +113,6 @@
   </n-card>
 </template>
 
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import { NCard, NTabs, NTabPane, NCheckbox, NButton, NSpace, NInput, NAutoComplete, useMessage } from 'naive-ui'
-import { useAuthStore } from '@/stores/auth';
-import { useRouter } from 'vue-router';
-
-const authStore = useAuthStore();
-
-const router = useRouter()
-
-const message = useMessage()
-
-const username = ref('')
-const email = ref('')
-const password = ref('')
-const approval = ref(false)
-
-
-const options = computed(() => {
-  return ['@mail.ru', '@yandex.ru', '@gmail.com'].map((suffix) => {
-    const prefix = email.value.split('@')[0]
-    return {
-      label: prefix + suffix,
-      value: prefix + suffix
-    }
-  })
-})
-
-async function signin() {
-  const res = await authStore.login(email.value, password.value)
-
-  if (!res && authStore.error != null) {
-    message.error(authStore.error)
-    return
-  }
-
-  router.push('/office')
-}
-
-async function signup() {
-  if (!approval.value) {
-    return
-  }
-  const res = await authStore.signup(username.value, email.value)
-  if (!res && authStore.error != null) {
-    message.error(authStore.error)
-    return
-  }
-  message.info("Пароль отправлен на почту")
-}
-</script>
-
 <style scoped>
 .sign-card {
   background-color: rgb(29, 29, 29);

src/components/OfficePage.vue

@@ -19,7 +19,7 @@ getPermissions()
 </script>
 
 <template>
-    <HeaderMenu :add-logout="true" active="office"/>
+    <HeaderMenu :add-logout="true" active="office" />
 
     <p>
         Доброго времени суток, {{ authStore.username }}.

src/components/ScenariosPage.vue

@@ -3,9 +3,11 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 </script>
 
 <template>
-    <HeaderMenu :add-logout="true" active="scenarios"/>
+    <HeaderMenu :add-logout="true" active="scenarios" />
 
-    Сценарии
+    <div class="center-block-custom">
+        Сценарии
+    </div>
 </template>
 
 <style scoped></style>

src/components/UsersPage.vue

@@ -3,7 +3,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 </script>
 
 <template>
-    <HeaderMenu :add-logout="true" active="users"/>
+    <HeaderMenu :add-logout="true" active="users" />
 
     Пользователи
 </template>

src/views/GamesView.vue

@@ -3,7 +3,7 @@ import GamesPage from '@/components/GamesPage.vue';
 </script>
 
 <template>
-  <main>
+  <GamesPage />
-    <GamesPage />
-  </main>
 </template>
+
+<style lang="css"></style>

src/views/HomeView.vue

@@ -15,7 +15,7 @@ const keyColorClass = computed(() => {
 
 <template>
   <HeaderMenu :add-login="true" :is-found-key="isFoundKey"/>
-  <main>
+  <div class="center-block-custom content-block">
     <h1 class="font-text">
       Вечерний детектив
     </h1>
@@ -28,7 +28,7 @@ const keyColorClass = computed(() => {
         <Key24Regular />
       </Icon>
     </p>
-  </main>
+  </div>
 </template>
 
 <style lang="css">
@@ -40,6 +40,7 @@ const keyColorClass = computed(() => {
   position: relative;
   top: 100px;
   right: 0px;
+  float: right;
 }
 
 .key-icon {
@@ -55,13 +56,13 @@ const keyColorClass = computed(() => {
 @media (min-width: 1024px) {
   .font-text {
     position: relative;
-    left: -150px;
+    left: -50px;
   }
 
   .content-text {
     position: relative;
     top: 100px;
-    right: -350px;
+    right: -50px;
   }
 }
 </style>

src/views/LoginView.vue

@@ -3,7 +3,7 @@ import LoginPage from '@/components/LoginPage.vue';
 </script>
 
 <template>
-  <main>
+  <LoginPage />
-    <LoginPage />
-  </main>
 </template>
+
+<style lang="css"></style>

src/views/OfficeView.vue

@@ -3,7 +3,7 @@ import OfficePage from '@/components/OfficePage.vue';
 </script>
 
 <template>
-  <main>
+  <OfficePage />
-    <OfficePage />
-  </main>
 </template>
+
+<style lang="css"></style>

src/views/ScenariosView.vue

@@ -3,7 +3,7 @@ import ScenariosPage from '@/components/ScenariosPage.vue';
 </script>
 
 <template>
-  <main>
+  <ScenariosPage />
-    <ScenariosPage />
-  </main>
 </template>
+
+<style lang="css"></style>

src/views/UsersView.vue

@@ -3,7 +3,7 @@ import UsersPage from '@/components/UsersPage.vue';
 </script>
 
 <template>
-  <main>
+  <UsersPage />
-    <UsersPage />
-  </main>
 </template>
+
+<style lang="css"></style>