182 lines
3.4 KiB
CSS
182 lines
3.4 KiB
CSS
body,
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
float: left;
|
|
}
|
|
#dataOverview{
|
|
background: #FEFEFE;
|
|
width: 98%;
|
|
margin-left: 1%;
|
|
float: left;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,.1);
|
|
padding-bottom: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
#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: 60%;
|
|
background: white;
|
|
width: 98%;
|
|
margin-left: 1%;
|
|
float: left;
|
|
margin-top: 1%;
|
|
border-radius: 5px;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,.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; /* 设置滑块悬停时的颜色 */
|
|
}
|
|
|
|
#station{
|
|
background: #FEFEFE;
|
|
width: 94%;
|
|
margin-left: 1%;
|
|
float: left;
|
|
margin-bottom: 1%;
|
|
border-radius: 5px;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,.1);
|
|
padding: 10px 34px;
|
|
}
|
|
#station>div{
|
|
float: left;
|
|
border: 1px solid #E4E4E4;
|
|
border-radius: 3px;
|
|
padding: 5px 30px;
|
|
color: #999999;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
#station>div:hover{
|
|
color: #409EFF;
|
|
}
|
|
.stationClick{
|
|
background-color: #409EFF;
|
|
color: #ffffff !important;
|
|
} |