| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- * {
- box-sizing: border-box;
- }
- html,
- body {
- margin: 0;
- padding: 0;
- font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
- background: #f3f4f6;
- }
- .web-app {
- display: flex;
- min-height: 100vh;
- }
- /* 业务布局外壳:顶部导航 + 主体(侧边栏 + 内容区) */
- .app-shell {
- display: grid;
- grid-template-rows: 56px 1fr;
- width: 100%;
- height: 100vh;
- overflow: hidden;
- }
- .app-body {
- display: grid;
- grid-template-columns: 208px 1fr;
- min-height: 0;
- overflow: hidden;
- }
- .app-body.no-sidebar {
- grid-template-columns: 0 1fr;
- }
- .app-body.no-sidebar > .sidebar {
- display: none;
- }
- .layout-app .content {
- flex: 1;
- min-width: 0;
- overflow-y: auto;
- background: #f2f5fa;
- padding: 18px 24px 32px;
- }
- /* blank 布局(登录页):避免作为 flex item 收缩到内容宽度,
- 否则页面只占视口一部分、右侧露出背景空白 */
- .layout-blank {
- display: block;
- width: 100%;
- }
- .demo-table {
- width: 100%;
- border-collapse: collapse;
- margin-top: 12px;
- }
- .demo-table th,
- .demo-table td {
- border: 1px solid #e5e7eb;
- padding: 10px 12px;
- text-align: left;
- }
- .demo-table th {
- background: #f9fafb;
- }
- .demo-table .ok {
- color: #15803d;
- }
|