178 lines
4.3 KiB
CSS
178 lines
4.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-bg: #f4f7f9;
|
|
--color-sidebar-bg: #001529;
|
|
--color-sidebar-text: #a6adb4;
|
|
--color-sidebar-active: #ffffff;
|
|
--color-sidebar-active-bg: #1890ff;
|
|
--color-surface: #ffffff;
|
|
--color-border: #e8e8e8;
|
|
--color-primary: #1890ff;
|
|
--color-danger: #f5222d;
|
|
--color-warning: #faad14;
|
|
--color-success: #52c41a;
|
|
--color-text-main: #262626;
|
|
--color-text-sec: #8c8c8c;
|
|
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
font-size: 16px; /* 基础字号 */
|
|
}
|
|
body {
|
|
@apply bg-bg text-text-main font-sans;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow-x: hidden; /* 防止横向滚动 */
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
#root {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/* 响应式字体优化 */
|
|
h1, .ant-typography h1 { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; }
|
|
h2, .ant-typography h2 { font-size: clamp(1.25rem, 2vw, 1.75rem) !important; }
|
|
h3, .ant-typography h3 { font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important; }
|
|
h4, .ant-typography h4 { font-size: clamp(1rem, 1.5vw, 1.25rem) !important; }
|
|
|
|
/* 统计卡片字体自适应 */
|
|
.ant-statistic-content {
|
|
font-size: clamp(1.2rem, 2vw, 1.8rem) !important;
|
|
}
|
|
.ant-statistic-title {
|
|
color: #000 !important;
|
|
opacity: 1;
|
|
font-weight: 800;
|
|
font-size: clamp(0.8rem, 1.2vw, 1rem) !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.ant-statistic-content-suffix {
|
|
font-size: clamp(0.7rem, 1vw, 0.9rem) !important;
|
|
}
|
|
|
|
/* 全局滚动条优化 */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
|
|
.ant-typography{
|
|
color: #0837A8 !important;
|
|
}
|
|
.ant-card-head-title{
|
|
color: #0837A8;
|
|
font-weight: 700 !important;
|
|
font-size: clamp(14px, 0.85vw, 16px) !important;
|
|
}
|
|
.ant-layout-header{
|
|
line-height:40px !important;
|
|
}
|
|
|
|
.ant-card-head-title>span {
|
|
color: #0837A8 !important;
|
|
font-weight: 700 !important;
|
|
font-size: clamp(14px, 0.85vw, 16px) !important;
|
|
}
|
|
.ant-card-head{
|
|
min-height:36px !important; /* 进一步减小头部高度 */
|
|
padding: 0 12px !important;
|
|
}
|
|
.ant-card-body{
|
|
padding: 8px 12px !important; /* 进一步减小内边距 */
|
|
}
|
|
.ant-form-item {
|
|
margin-bottom: 8px !important; /* 减小表单项间距 */
|
|
}
|
|
.ant-row {
|
|
margin-left: -4px !important;
|
|
margin-right: -4px !important;
|
|
}
|
|
.ant-col {
|
|
padding-left: 4px !important;
|
|
padding-right: 4px !important;
|
|
}
|
|
.ant-select-selector,.ant-input,.ant-picker,.ant-input-affix-wrapper{
|
|
border-radius:4px !important; /* 更小的圆角看起来更紧凑 */
|
|
}
|
|
.ant-btn{
|
|
/*height: 32px !important;*/
|
|
padding: 4px 12px !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
.ant-table-thead > tr > th,
|
|
.ant-table-tbody > tr > td {
|
|
padding: 2px 4px !important; /* 减小表格边距 */
|
|
}
|
|
|
|
.table-row-highlight > td {
|
|
background-color: #e6f4ff !important;
|
|
}
|
|
|
|
.table-row-highlight .ant-table-cell-fix-left,
|
|
.table-row-highlight .ant-table-cell-fix-right {
|
|
background-color: #e6f4ff !important;
|
|
}
|
|
|
|
.ant-modal-content{
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
|
|
.ant-table-body {
|
|
overflow: auto !important; /* 超出高度时显示滚动条 */
|
|
}
|
|
|
|
/* 选中行高亮 */
|
|
.compact-table .table-active-row {
|
|
background-color: #e6f7ff !important;
|
|
}
|
|
.compact-table tbody tr:hover {
|
|
background-color: #f0f7ff !important;
|
|
}
|
|
|
|
.recharts-responsive-container>div{
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes sunRotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes cloudFloat {
|
|
from { transform: translateX(-2px); }
|
|
to { transform: translateX(2px); }
|
|
}
|
|
@keyframes rainDrop {
|
|
0% { transform: translateY(0); opacity: 1; }
|
|
100% { transform: translateY(12px); opacity: 0.4; }
|
|
}
|
|
|