From 1dbc6ed10458201d22e7f47a7da36f75f0ebf257 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Tue, 02 Jun 2026 13:35:58 +0800
Subject: [PATCH] ``` feat(layout): 添加退出登录功能

---
 src/styles/login.scss |   95 +++++++++++++++++++++++++++++++++++++----------
 1 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/src/styles/login.scss b/src/styles/login.scss
index e616f24..f2e6f61 100644
--- a/src/styles/login.scss
+++ b/src/styles/login.scss
@@ -2,6 +2,7 @@
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
 }
 
 .login-container {
@@ -9,24 +10,29 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-image: url("/images/pro-bg.png");
   background-size: cover;
   background-position: center;
+  min-width: 320px;
+  min-height: 480px;
 }
 
 .login-weaper {
   display: flex;
-  width: 800px;
+  width: 90%;
+  max-width: 800px;
+  min-width: 320px;
   box-shadow: -4px 5px 20px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   overflow: hidden;
+  margin: 20px;
 }
 
 .login-left,
 .login-border {
-  min-height: 450px;
+  min-height: 400px;
   display: flex;
   align-items: center;
 }
@@ -45,24 +51,24 @@
 
 .login-time {
   position: absolute;
-  top: 30px;
-  left: 30px;
+  top: 20px;
+  left: 20px;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 300;
-  font-size: 16px;
+  font-size: clamp(12px, 2vw, 16px);
 }
 
 .login-left .img {
-  width: 120px;
-  margin-bottom: 20px;
+  width: clamp(80px, 25vw, 120px);
+  margin-bottom: 15px;
 }
 
 .login-left .title {
   text-align: center;
   color: #fff;
   font-weight: 400;
-  letter-spacing: 3px;
-  font-size: 22px;
+  letter-spacing: 2px;
+  font-size: clamp(16px, 4vw, 22px);
   margin: 0;
 }
 
@@ -71,7 +77,7 @@
   border-bottom-right-radius: 8px;
   background-color: #fff;
   width: 55%;
-  padding: 40px 30px;
+  padding: 30px;
   box-sizing: border-box;
 }
 
@@ -83,16 +89,16 @@
   color: #333;
   margin-bottom: 8px;
   font-weight: 500;
-  font-size: 20px;
+  font-size: clamp(16px, 4vw, 20px);
   text-align: center;
   letter-spacing: 2px;
 }
 
 .login-title-child {
   color: #999;
-  margin-bottom: 30px;
+  margin-bottom: 25px;
   font-weight: 300;
-  font-size: 12px;
+  font-size: clamp(10px, 2.5vw, 12px);
   text-align: center;
   letter-spacing: 1px;
 }
@@ -101,16 +107,19 @@
   margin: 0;
 
   .el-form-item {
-    margin-bottom: 20px;
+    margin-bottom: 18px;
   }
 
   .el-input {
+    width: 100%;
+
     input {
-      padding: 12px 15px;
+      padding: clamp(10px, 3vw, 12px) clamp(12px, 3vw, 15px);
       border: 1px solid #e4e7ed;
       border-radius: 6px;
-      font-size: 14px;
+      font-size: clamp(12px, 3vw, 14px);
       transition: border-color 0.3s;
+      box-sizing: border-box;
       
       &:focus {
         border-color: #409eff;
@@ -121,7 +130,7 @@
     .el-input__prefix {
       i {
         color: #909399;
-        font-size: 16px;
+        font-size: clamp(14px, 3vw, 16px);
       }
     }
 
@@ -136,11 +145,11 @@
 
 .login-submit {
   width: 100%;
-  height: 42px;
+  height: clamp(36px, 8vw, 42px);
   background: linear-gradient(135deg, #409eff 0%, #67b8ff 100%);
   border: none;
   border-radius: 6px;
-  font-size: 16px;
+  font-size: clamp(14px, 3vw, 16px);
   letter-spacing: 2px;
   color: #fff;
   cursor: pointer;
@@ -154,4 +163,48 @@
   &:active {
     opacity: 0.8;
   }
+}
+
+@media screen and (max-width: 640px) {
+  .login-weaper {
+    flex-direction: column;
+    width: 95%;
+  }
+
+  .login-left,
+  .login-border {
+    width: 100%;
+    min-height: auto;
+    border-radius: 0;
+  }
+
+  .login-left {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    padding: 25px 20px;
+  }
+
+  .login-border {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    padding: 25px 20px;
+  }
+
+  .login-time {
+    position: static;
+    margin-bottom: 15px;
+    text-align: center;
+  }
+}
+
+@media screen and (max-height: 500px) {
+  .login-weaper {
+    transform: scale(0.9);
+  }
+}
+
+@media screen and (max-height: 450px) {
+  .login-weaper {
+    transform: scale(0.85);
+  }
 }
\ No newline at end of file

--
Gitblit v1.9.3