系统退出显示问题

src/main/resources/views/layouts/v4/baseLayout.html

@@ -412,6 +412,8 @@
             .v4-header {
                 background-color: rgb(0, 109, 185);
                 box-shadow: 0 2px 10px rgba(0, 109, 185, 0.3);
+                box-sizing: border-box;
+                padding: 0 16px;
                 height: 64px;
                 display: flex;
                 align-items: center;
@@ -431,6 +433,8 @@
                 padding: 10px;
                 width: 250px;
                 justify-content: center;
+                box-sizing: border-box;
+                flex-shrink: 0;
             }
 
             .v4-logo {
@@ -440,9 +444,10 @@
 
             .v4-nav {
                 display: flex;
-                gap: 40px;
+                gap: clamp(12px, 2vw, 40px);
                 align-items: center;
                 height: 100%;
+                min-width: 0;
             }
 
             .v4-nav-item {
@@ -479,9 +484,9 @@
             .v4-user-section {
                 display: flex;
                 align-items: center;
-                gap: 24px;
+                gap: 12px;
                 height: 100%;
-                max-width: 310px;
+                margin-left: 16px;
                 flex-shrink: 0;
             }
 
@@ -534,6 +539,7 @@
                 gap: 12px;
                 padding: 0 12px;
                 height: 100%;
+                min-width: 0;
                 border-radius: 0;
                 cursor: pointer;
                 transition: background-color 0.2s;
@@ -587,6 +593,9 @@
                 font-weight: 500;
                 color: #ffffff;
                 white-space: nowrap;
+                max-width: 180px;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
 
             .v4-logout {
@@ -594,12 +603,14 @@
                 cursor: pointer;
                 padding: 0 14px;
                 height: 100%;
+                flex-shrink: 0;
                 border-radius: 0;
                 transition: all 0.2s ease;
                 display: flex;
                 align-items: center;
                 gap: 6px;
                 white-space: nowrap;
+                text-decoration: none;
             }
 
             .v4-logout:hover {
@@ -615,19 +626,62 @@
                 display: flex;
                 align-items: center;
                 height: 100%;
+                min-width: 0;
+                flex: 1;
+            }
+
+            @media (max-width: 1440px) {
+                .v4-logo-container {
+                    width: 210px;
+                }
+
+                .v4-nav {
+                    gap: 16px;
+                }
+
+                .v4-nav-item {
+                    padding: 0 10px;
+                }
+
+                .v4-user-section {
+                    gap: 8px;
+                    margin-left: 8px;
+                }
+
+                .v4-user-name {
+                    max-width: 140px;
+                }
+
+                .v4-voice-menu,
+                .v4-logout {
+                    padding-left: 10px;
+                    padding-right: 10px;
+                }
+            }
+
+            @media (max-width: 1280px) {
+                .v4-user-info {
+                    display: none;
+                }
             }
 
             @media (max-width: 1024px) {
                 .v4-nav {
-                    gap: 24px;
+                    gap: 12px;
                 }
 
-                .v4-user-info {
+                .v4-logo-container {
-                    display: none;
+                    width: 180px;
+                }
+
+                .v4-nav-item {
+                    padding: 0 6px;
+                    column-gap: 6px;
+                    font-size: 14px;
                 }
 
                 .v4-user-section {
-                    gap: 16px;
+                    gap: 6px;
                 }
             }