блокировка сроклла в формах регистрации и логина

src/views/LoginView.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useAuth } from '@/auth';
 
 const email = ref('');
@@ -90,6 +90,30 @@ const loading = ref(false);
 
 const { login } = useAuth();
 
+// Функция для блокировки прокрутки страницы
+const preventScroll = () => {
+  document.body.style.overflow = 'hidden';
+  document.body.style.position = 'fixed';
+  document.body.style.height = '100%';
+  document.body.style.width = '100%';
+};
+
+// Функция для восстановления прокрутки
+const enableScroll = () => {
+  document.body.style.overflow = '';
+  document.body.style.position = '';
+  document.body.style.height = '';
+  document.body.style.width = '';
+};
+
+onMounted(() => {
+  preventScroll(); // Блокируем прокрутку при монтировании компонента
+});
+
+onUnmounted(() => {
+  enableScroll(); // Восстанавливаем прокрутку при размонтировании компонента
+});
+
 const handleLogin = async () => {
   errorMessage.value = '';
   loading.value = true;
@@ -112,22 +136,32 @@ const handleLogin = async () => {
 
 <style scoped>
 .login-container {
-  min-height: 100vh;
+  position: fixed;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  top: 0;
-  height: 100vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  touch-action: none;
 }
 
 .auth-bg {
-  min-height: 100vh;
+  position: fixed;
-  height: 100vh;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 1rem;
+  padding: 0;
-  position: relative;
   overflow: hidden;
 }
 
@@ -172,26 +206,21 @@ const handleLogin = async () => {
 }
 
 .login-card {
-  width: 100%;
+  width: 90%;
-  max-width: 450px;
+  max-width: 400px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border-radius: 20px;
-  padding: 2rem 2rem;
+  padding: 1.5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: fadeUp 0.8s ease;
   text-align: center;
   position: relative;
   z-index: 10;
-  max-height: calc(100vh - 120px);
-  overflow-y: auto;
   margin: 0 auto;
-}
+  max-height: 90%;
-
+  display: flex;
-@keyframes fadeUp {
+  flex-direction: column;
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
 }
 
 .login-header {
@@ -211,12 +240,13 @@ const handleLogin = async () => {
 }
 
 .login-form {
-  text-align: left;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .form-group {
-  margin-bottom: 1rem;
+  margin-bottom: 0.8rem;
-  position: relative;
 }
 
 .form-group label {
@@ -235,7 +265,7 @@ const handleLogin = async () => {
 
 .form-group input {
   width: 100%;
-  padding: 1rem 1.2rem;
+  padding: 0.7rem 1rem;
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
@@ -257,8 +287,8 @@ const handleLogin = async () => {
 
 .action-button {
   width: 100%;
-  padding: 1rem;
+  padding: 0.8rem;
-  margin-top: 1rem;
+  margin-top: 0.8rem;
   background: linear-gradient(45deg, #00BFFF, #20B2AA);
   border: none;
   border-radius: 12px;

src/views/RegisterView.vue

@@ -110,7 +110,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useAuth } from '@/auth';
 
 const name = ref('');
@@ -122,6 +122,30 @@ const loading = ref(false);
 
 const { register } = useAuth();
 
+// Функция для блокировки прокрутки страницы
+const preventScroll = () => {
+  document.body.style.overflow = 'hidden';
+  document.body.style.position = 'fixed';
+  document.body.style.height = '100%';
+  document.body.style.width = '100%';
+};
+
+// Функция для восстановления прокрутки
+const enableScroll = () => {
+  document.body.style.overflow = '';
+  document.body.style.position = '';
+  document.body.style.height = '';
+  document.body.style.width = '';
+};
+
+onMounted(() => {
+  preventScroll(); // Блокируем прокрутку при монтировании компонента
+});
+
+onUnmounted(() => {
+  enableScroll(); // Восстанавливаем прокрутку при размонтировании компонента
+});
+
 const handleRegister = async () => {
   errorMessage.value = '';
   loading.value = true;
@@ -160,22 +184,32 @@ const handleRegister = async () => {
 
 <style scoped>
 .register-container {
-  min-height: 100vh;
+  position: fixed;
-  height: 100vh;
+  top: 0;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  touch-action: none;
 }
 
 .auth-bg {
-  min-height: 100vh;
+  position: fixed;
-  height: 100vh;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 1rem;
+  padding: 0;
-  position: relative;
   overflow: hidden;
 }
 
@@ -183,10 +217,10 @@ const handleRegister = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 800;
   letter-spacing: 1px;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
   flex-shrink: 0;
 }
 
@@ -220,50 +254,44 @@ const handleRegister = async () => {
 }
 
 .register-card {
-  width: 100%;
+  width: 90%;
-  max-width: 500px;
+  max-width: 400px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border-radius: 20px;
-  padding: 2rem 2rem;
+  padding: 1.5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: fadeUp 0.8s ease;
   text-align: center;
   position: relative;
   z-index: 10;
   margin: 0 auto;
-  max-height: calc(100vh - 120px);
+  max-height: 90%;
-  overflow-y: auto;
+  display: flex;
-}
+  flex-direction: column;
-
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
 }
 
 .register-header {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
-  color: white;
 }
 
 .register-header h2 {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
-  font-weight: 700;
+  margin-bottom: 0.3rem;
-  margin-bottom: 0.5rem;
 }
 
 .register-header p {
-  font-size: 1.1rem;
+  font-size: 0.9rem;
-  opacity: 0.9;
 }
 
 .register-form {
-  text-align: left;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .form-group {
-  margin-bottom: 0.9rem;
+  margin-bottom: 0.6rem;
   position: relative;
 }
 
@@ -363,7 +391,7 @@ const handleRegister = async () => {
 }
 
 .auth-footer {
-  margin-top: 2rem;
+  margin-top: 1rem;
   color: white;
   font-size: 0.95rem;
 }