body { background: white; } .projectName { line-height: 2.5rem; padding-left: 0.67rem; background: #eaeaea; font-size: 1rem; color: #5a5a5a; } .project-panel { position: fixed; z-index: 10000; top: 0rem; right: 1.5rem; width: 50vw; max-height: 100vh; background: #FFF; box-shadow: 0px 0px 1px rgba(0,0, 0, 0.3); } .project-panel li { box-sizing: border-box; line-height: 3rem; padding-left: 0.67rem; width: 100%; } .project-panel li.active { background: #eaeaea; } .item { display: flex; height: 55px; align-items: center; border-bottom: 1px solid #e5e5e5; padding: 0 0.7rem; justify-content: space-between; width: 100%; overflow: hidden; box-sizing: border-box; } .item .name { font-size: 1.25rem; white-space: nowrap; ; text-overflow: ellipsis; overflow: hidden; } .item .status, .safe-content { white-space: nowrap; } .safe-content, .time { color: rgba(0, 0, 0, 0.7) } .item .days { font-size: 1.2rem; line-height: 1.2rem; } .item .icon-con { width: 3rem; height: 3rem; display: flex; border-radius: 50%; justify-content: center; align-items: center; margin-right: 1rem; font-size: 1.25rem; flex-shrink: 0; } .pr .icon-con { background: #E9BE2B; } .item>div:nth-child(1) { display: flex; align-items: center; width: 40vw; width: calc(100% - 8rem); } .pr>div:nth-child(1) img { width: 2rem; } .item>div:nth-child(2) { font-size: 0.9rem; text-align: right; width: 8rem; } .messager .icon-con { width: 3rem; height: 3rem; display: flex; border-radius: 50%; justify-content: center; align-items: center; position: relative; } .messager .icon-con img { width: 1.6rem; } .messager .icon-con .badge { min-width: 12px; height: 12px; line-height: 12px; text-align: center; padding: 1px; color: #FFFFFF; font-size: 8px; border-radius: 7px; position: absolute; left: 2rem; top: 0rem; background: #ff0000; display: none; } .repair-keeper .icon-con { background: #ffb400; } .inspect-keeper .icon-con { background: #00b7ee; } .report-keeper .icon-con { background: #fa759e; } .alarm-keeper .icon-con { background: #ff6363; } .oper-ticket-assistantor .icon-con { background: #03b679; } .work-ticket-assistantor .icon-con { background: #b23bf0; } .bee .icon-con { background: #eeeeee; }