.warningbox { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; .title { box-sizing: border-box; padding: 0 20PX; width: 100%; height: 48px; margin: 16px 0; } .search { box-sizing: border-box; padding: 0 36px; width: 100%; height: 32px; // margin-bottom: 18px; form { width: 100%; height: 32px; display: flex; justify-content: space-around; .searchParams { width: 22%; } .btn { width: 5%; } nz-select { color: rgba(145, 204, 255, 0.95); ; } nz-date-picker { background-color: rgba(0, 0, 0, 0); width: 145%; } } } .warningnumber { position: absolute; left: 23px; top: -60px; .num { font-size: 50px; text-shadow: 0px 0px 6px #8df; color: white; font-weight: 600; } .today { font-size: 18px; font-family: titlefont; color: #D0EAFF; } } .listbox { flex: 1; overflow-y: auto; box-sizing: border-box; padding: 20px 47px 20px 39px; .listitem { width: 100%; height: 78px; display: flex; align-items: center; border: 1px solid rgba(54, 162, 255, 0.478); color: #91CCFF; margin-bottom: 12px; background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%); box-sizing: border-box; padding-left: 20px; div { font-size: 15px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; button { font-size: 15px; background-color: #013064; border: 1px solid #4c8ac8; color: #91CCFF; } } .propsm { display: inline-block; width: 38px; height: 20px; line-height: 20px; font-size: 12px; color: #fff; border-radius: 2px; text-align: center; margin-left: 8px; } .propsm1 { background: #2399FF; } .propsm2 { background: #FF9963; } } .listitemhead { height: 40px; line-height: 40px; background: rgba(35, 153, 255, 0.22); border: 1px solid rgba(35, 217, 255, 0.4); color: #23D9FF; } } }