modified: main_dc/BB/bbvue/src/App.vue

modified:   main_dc/BB/bbvue/src/views/Login.vue
css rule for center vertical and with login form

main_dc/BB/bbvue/src/App.vue

@@ -269,7 +269,7 @@ body {
 
 /* Page Styles */
 .page {
-  max-width: 800px;
+  width: 100%;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;

main_dc/BB/bbvue/src/views/Login.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="page">
+  <div class="page login-page">
+    <div class="login-container">
       <h1>🔐 Вход в систему</h1>
       <p>Войдите в свой личный кабинет</p>
 
@@ -31,6 +32,7 @@
 
       <button class="btn btn-secondary" @click="$router.push('/')">← На главную</button>
     </div>
+  </div>
 </template>
 
 <script>
@@ -48,7 +50,10 @@ export default {
       credentials: {
         email: '',
         password: ''
-      }
+      },
+      hasInteracted: false,
+      isContentVisible: false,
+      autoShowTimeout: null
     }
   },
   computed: {
@@ -109,29 +114,6 @@ export default {
           notification.parentNode.removeChild(notification)
         }
       }, 3000)
-    }
-  },
-  beforeUnmount() {
-    // Убираем обработчики при размонтировании
-    window.removeEventListener('scroll', this.handleFirstInteraction)
-    window.removeEventListener('click', this.handleFirstInteraction)
-    window.removeEventListener('touchstart', this.handleFirstInteraction)
-    clearTimeout(this.autoShowTimeout)
-  },
-  // Добавляем проверку при монтировании компонента
-  mounted() {
-    // Если пользователь уже авторизован, показываем уведомление
-    if (this.authStore.isAuthenticated) {
-      this.showAlreadyLoggedInNotification()
-    }
-    window.addEventListener('scroll', this.handleFirstInteraction, { passive: true, once: true })
-    window.addEventListener('click', this.handleFirstInteraction, { once: true })
-    window.addEventListener('touchstart', this.handleFirstInteraction, { once: true })
-    this.autoShowTimeout = setTimeout(() => {
-      if (!this.hasInteracted) {
-        this.showContent()
-      }
-    }, 3000)
     },
     showAlreadyLoggedInNotification() {
       const notification = document.createElement('div')
@@ -158,17 +140,58 @@ export default {
         }
       }, 3000)
     }
+  },
+  beforeUnmount() {
+    // Убираем обработчики при размонтировании
+    window.removeEventListener('scroll', this.handleFirstInteraction)
+    window.removeEventListener('click', this.handleFirstInteraction)
+    window.removeEventListener('touchstart', this.handleFirstInteraction)
+    clearTimeout(this.autoShowTimeout)
+  },
+  // Добавляем проверку при монтировании компонента
+  mounted() {
+    // Если пользователь уже авторизован, показываем уведомление
+    if (this.authStore.isAuthenticated) {
+      this.showAlreadyLoggedInNotification()
+    }
+    window.addEventListener('scroll', this.handleFirstInteraction, { passive: true, once: true })
+    window.addEventListener('click', this.handleFirstInteraction, { once: true })
+    window.addEventListener('touchstart', this.handleFirstInteraction, { once: true })
+    this.autoShowTimeout = setTimeout(() => {
+      if (!this.hasInteracted) {
+        this.showContent()
+      }
+    }, 3000)
+  }
 }
 </script>
 
 <style scoped>
+
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2rem;
+  margin: 0;
+}
+
+.login-container {
+  width: fit-content;
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+}
+
 .login-form {
-  max-width: 300px;
+  width: 100%;
   margin: 2rem auto;
 }
 
 .form-group {
   margin-bottom: 1rem;
+  width: 100%;
 }
 
 .form-input {
@@ -178,6 +201,7 @@ export default {
   border-radius: 6px;
   font-size: 1rem;
   transition: border-color 0.3s;
+  box-sizing: border-box;
 }
 
 .form-input:focus {
@@ -197,6 +221,7 @@ export default {
   padding: 12px;
   font-size: 1rem;
   margin-top: 1rem;
+  box-sizing: border-box;
 }
 
 .btn-primary:hover:not(:disabled) {
@@ -211,6 +236,7 @@ export default {
 .login-links {
   margin-top: 1.5rem;
   text-align: center;
+  width: 100%;
 }
 
 .link {
@@ -230,5 +256,33 @@ export default {
   margin-top: 1rem;
   border-left: 4px solid #c33;
   text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.btn-secondary {
+  margin-top: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Стили для заголовков и текста */
+.login-container h1 {
+  color: #2e8b57;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
+  width: 100%;
+}
+
+.login-container p {
+  font-size: 1.1rem;
+  margin-bottom: 1.5rem;
+  color: #666;
+  width: 100%;
+}
+
+.register-link {
+  width: 100%;
+  margin-bottom: 1rem;
 }
 </style>