111 lines
1.7 KiB
CSS
111 lines
1.7 KiB
CSS
/* 全局样式 */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body, #root {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||
sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* 响应式布局优化 */
|
||
|
||
/* 桌面端（> 768px） */
|
||
@media screen and (min-width: 769px) {
|
||
.ant-layout {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.ant-layout-sider {
|
||
overflow: auto;
|
||
height: 100vh;
|
||
position: sticky;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
/* 登录页面卡片 */
|
||
.login-card {
|
||
max-width: 480px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
/* 移动端（<= 768px） */
|
||
@media screen and (max-width: 768px) {
|
||
/* 隐藏桌面侧边栏 */
|
||
.ant-layout-sider {
|
||
display: none;
|
||
}
|
||
|
||
/* 登录页面优化 */
|
||
.login-card {
|
||
max-width: 100%;
|
||
margin: 10px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 调整表单元素 */
|
||
.ant-form-item-label {
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
.ant-input,
|
||
.ant-btn {
|
||
font-size: 16px; /* 防止iOS自动缩放 */
|
||
}
|
||
|
||
/* 标题调整 */
|
||
.ant-typography h2 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
/* 测试账户卡片 */
|
||
.ant-card-body {
|
||
padding: 12px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕（<= 480px） */
|
||
@media screen and (max-width: 480px) {
|
||
.login-card {
|
||
margin: 5px;
|
||
}
|
||
|
||
.ant-card-body {
|
||
padding: 16px;
|
||
}
|
||
|
||
.ant-typography h2 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.ant-space-vertical {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* 确保移动端菜单正常显示 */
|
||
.ant-drawer-body {
|
||
padding: 0;
|
||
}
|
||
|
||
/* 移动端头部按钮 */
|
||
.mobile-header-button {
|
||
position: fixed;
|
||
top: 16px;
|
||
left: 16px;
|
||
z-index: 1000;
|
||
}
|