body, html { width: 100%; height: 100%; margin: 0; padding: 0; float: left; } #dataOverview{ background: #FEFEFE; width: 98%; margin-left: 1%; float: left; } #dataOverview{ height: 30%; } #dataOverviewTitle>div:nth-child(1){ margin-top: 15px; margin-bottom: 15px; margin-left: 35px; font-weight: 600; } #dataOverviewTitle>div:nth-child(1)>span{ border-left: 6px solid #409EFF; padding-left: 5px; } .dataOverview{ height: 65%; width: 97%; display: flex; margin-left: 2%; } .dataOverviewTop{ height: 100%; flex: 1; margin: 0% 1%; background-color: #FFFFFF; cursor: pointer; border-left: 4px solid #FB6260; /* box-shadow: 1px 1px 1px 1px #eee; */ } .top{ height: 45%; width: 80%; display: flex; margin-left: 6%; justify-content: space-between; align-items: center; } .bottom{ height: 50%;width: 100%;margin-left: 6%;font-size: 28px;font-weight: bold; } .h50{ margin-top: 1%; height: 45%; width: 100%; text-indent: 15px; } .h50bg{ height: 70%; background: white; width: 98%; margin-left: 1%; float: left; margin-top: 1%; } .title>div:nth-child(1){ margin-top: 15px; margin-bottom: 15px; margin-left: 35px; font-weight: 600; } .title>div:nth-child(1)>span{ border-left: 6px solid #409EFF; padding-left: 5px; } .title>div:nth-child(1)>b{ font-size: 12px; color: gray; font-weight: 400; } .titleEcharts{ height: 85%; width: 100%; display: flex; } table{ width: 100%; height: 40%; margin: 0.5% 0 0 0; } table thead tr:nth-child(1){ background-color: #F2F2F2; } th,td{ text-align: center; } #personnelTable thead th { font-weight: normal; color: #666666; padding: 10px 10px; position: sticky; top: 0; background-color: #f8f8f8; /* 为避免滚动时出现闪烁,可以设置背景色与页面其他部分一致 */ z-index: 1; /* 提升层级,防止被其他元素覆盖 */ } #personnelTable tbody td { padding: 10px 10px; color: #546371; } /* Firefox滚动条样式 */ * { scrollbar-width: thin; /* 或者auto, none */ scrollbar-color: #888 #f1f1f1; } /* 整体滚动条样式 */ #personnelRate::-webkit-scrollbar { width: 2px !important;/* 设置滚动条的宽度 */ } /* 滚动条轨道样式 */ #personnelRate::-webkit-scrollbar-track { background-color: rgba(0,0,0,.1); /* 设置轨道背景颜色 */ } /* 滚动条滑块样式 */ #personnelRate::-webkit-scrollbar-thumb { background-color: darkgrey; /* 设置滑块颜色 */ border-radius: 4px; /* 设置滑块圆角 */ } /* 当鼠标悬停在滑块上时的样式 */ #personnelRate::-webkit-scrollbar-thumb:hover { background-color: grey; /* 设置滑块悬停时的颜色 */ }