blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复登录页面布局和全屏覆盖 - 恢复容器结构，优化背景层级，消除白边

Browse Source
This commit is contained in:
AIGC Developer
2025-10-21 17:35:42 +08:00
parent 23c62924bf
commit 9266d98de3
2 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demo/frontend/src/App.vue
View File

@@ -56,7 +56,7 @@ html, body {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: hidden; overflow: hidden; /* 完全隐藏滚动条 */
} }
body { body {
@@ -83,7 +83,7 @@ body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
min-height: 100vh; min-height: 100vh;
z-index: -2; z-index: -10; /* 确保在最底层 */
pointer-events: none; pointer-events: none;
background-attachment: fixed; background-attachment: fixed;
} }
@@ -106,16 +106,13 @@ main.with-navbar {
min-height: 100vh; min-height: 100vh;
} }
/* 登录页面特殊背景处理 - 参考Welcome页面样式 */ /* 登录页面特殊背景处理 */
#app[data-route="Login"] .fullscreen-background { #app[data-route="Login"] .fullscreen-background {
background: url('/images/backgrounds/login.png') center/cover no-repeat; background: url('/images/backgrounds/login.png') center/cover no-repeat;
background-attachment: fixed; background-attachment: fixed;
min-height: 100vh; background-size: cover;
position: fixed; background-position: center;
top: 0; background-repeat: no-repeat;
left: 0;
width: 100vw;
height: 100vh;
} }
/* ========== 页面特殊样式 ========== */ /* ========== 页面特殊样式 ========== */

25
demo/frontend/src/views/Login.vue
View File

@@ -1,9 +1,10 @@
<template> <template>
<!-- Logo --> <div class="login-page">
<div class="logo">Logo</div> <!-- Logo -->
<div class="logo">Logo</div>
<!-- 登录卡片 --> <!-- 登录卡片 -->
<div class="login-card"> <div class="login-card">
<!-- Logo图标 --> <!-- Logo图标 -->
<div class="card-logo"> <div class="card-logo">
<div class="logo-icon">Logo</div> <div class="logo-icon">Logo</div>
@@ -83,6 +84,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
@@ -201,7 +203,20 @@ const handleLogin = async () => {
</script> </script>
<style scoped> <style scoped>
/* 登录页面样式 - 背景由App.vue处理 */ .login-page {
min-height: 100vh;
width: 100vw;
height: 100vh;
background: transparent;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 0;
z-index: 1;
}
/* 左上角Logo */ /* 左上角Logo */
.logo { .logo {