* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow-y: hidden; } body { background: #121e39; } .nav { width: 100%; display: flex; justify-content: center; padding-top: 5px; } .nav .logo-img { width: 308px; height: 57px; position: absolute; left: 50px; } .nav-title { position: absolute; text-align: center; color: white; font-size: 36px; } .org-name { position: absolute; top: 65px; text-align: center; color: white; font-size: 24px; } .title-line { width: 100%; overflow: hidden; position: absolute; top: 70px; } .date-display { position: absolute; right: 50px; top: 40px; font-size: 20px; color: #ffffff; } .main { position: absolute; display: flex; flex-direction: column; top: 130px; bottom: 0; width: 100%; } .task-order { display: flex; /* flex: 1; */ overflow: hidden; height: 54.5%; } .order-analysis { display: flex; flex: 1; } .chart-container { flex: 1; background: rgba(23,49,96,0.7); margin: 0 15px 15px; border-radius: 5px; /* height: 96.5%; */ overflow: hidden; } .chart-container-left { margin: 0 7px 15px 15px; } .chart-container-right { margin: 0 15px 15px 7px; } .chart-title-img { background: #0a3849; height: 60px; display: flex; justify-content: space-between; align-items: center; border-radius: 5px 5px 0 0; } .chart-title-img img:first-child { width: 40px; height: 40px; } .icon-title { color: #fefffe; flex: 2; display: inline-block; line-height: 35px; padding-left: 5px; font-size: 36px; } .icon-img { float: right; padding-right: 15px; } .projects-name { display: flex; justify-content: center; flex-direction:column; height: 92%; } .orders-organization { text-align: center; margin-top: 25px; } .orders-organization .organization-title { text-align: center; padding: 0 30px; height: 30px; line-height: 30px; color: #fff; font-size: 16px; display: inline-block; border: 1px solid #32fffa; border-radius: 5px; background: #16456b; } /*表格*/ .table { color: #ffffff; width: 100%; padding: 10px; /*height: 100%;*/ } th,td { text-align: center; font-size: 24px; height: 38px; } .table thead tr{ background: #157490; } .table tbody tr:nth-child(odd){ background: rgba(25,177,201,0.2); } .table tbody tr:nth-child(even){ background: rgba(10,56,73,0.58); } .table-task-name, .table-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-task-name { max-width: 90px; } .table-project-name { max-width: 310px; }