如果你的意思是说给注册/登录表单页面单独一个页面,来替代原来的悬浮窗样式了话,可以使用以下CSS
/* 调整 */
.LoginPage,
.RegisterPage {
position: fixed; /* 使用固定定位 */
top: 0; /* 顶部对齐 */
left: 0; /* 左侧对齐 */
height: 100vh; /* 高度设置为视口高度 */
width: 100vw; /* 宽度设置为视口宽度 */
display: flex; /* 使用flex布局 */
justify-content: center; /* 内容水平居中 */
align-items: center; /* 内容垂直居中 */
background-color: var(--control-bg-light); /* 设置背景颜色 */
z-index: 1000; /* 确保在最上层 */
}
/* 表单样式调整 */
.LoginForm,
.RegisterForm {
background: rgba(255, 255, 255, 0.9); /* 半透明背景 */
border-radius: 8px; /* 圆角 */
padding: 20px; /* 内边距 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
width: 100%; /* 父级宽度 */
max-width: 400px; /* 最大宽度设置 */
}
/* 输入框和按钮样式 */
.LoginForm input,
.RegisterForm input,
.LoginForm button,
.RegisterForm button {
width: 100%; /* 全宽 */
margin-bottom: 15px; /* 底部间距 */
}