.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; position: relative; } .warningnumber { position: absolute; right: 80px; top: 9px; display: flex; align-items: center; img { width: 32px; } .today { font-size: 18px; font-family: titlefont; color: #D0EAFF; margin-left: 8px; margin-right: 16px; } .num { font-size: 20px; text-shadow: 0px 0px 6px #8df; color: white; font-weight: 600; } } .search { box-sizing: border-box; padding: 0 36px; width: 100%; height: 32px; // margin-bottom: 18px; form { width: 100%; height: 32px; display: flex; justify-content: flex-start; .searchParams, .btn { margin: 0 3px; } .searchParams { // flex: 2.9; width: 150px; } .searchParamsLong{ width: 250px; } .btn { // flex: 1; } nz-select { color: rgba(145, 204, 255, 0.95); } nz-time-picker { background-color: rgba(0, 0, 0, 0); width: 100%; } } } .listbox { flex: 1; overflow-y: auto; box-sizing: border-box; padding: 20px 47px 20px 39px; .listitem { width: 100%; height: 78px; line-height: 78px; 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-right: 60px; div { font-size: 15px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; button { font-size: 15px; background-color: #013064; border: 1px solid #4c8ac8; color: #91CCFF; } } .imgbox{ span{ img{ width: 30%; height: 80%; } } } } .dispositioned { color: #23D9FF; } } } // 适配125% @media screen and (max-height: 750px) { .warningbox { .title { box-sizing: border-box; padding: 0 16PX; height: 42px; margin: 12px 0; position: relative; } .warningnumber { right: 70px; top: 9px; img { width: 32px; } .today { font-size: 16px; margin-left: 5px; margin-right: 13px; } .num { font-size: 18px; } } .search { padding: 0 32px; height: 32px; form { height: 32px; .searchParams, .btn { margin: 0 3px; } } } .listbox { flex: 1; overflow-y: auto; box-sizing: border-box; padding: 16px 35px 16px 36px; .listitem { height: 40px; line-height: 40px; margin-bottom: 8px; padding-right: 36px; div { font-size: 12px; button { font-size: 12px; } } } } } } // 适配150% @media screen and (max-height: 600px) { .warningbox { .title { box-sizing: border-box; padding: 0 12PX; height: 38px; margin: 6px 0; position: relative; } .warningnumber { right: 70px; top: 6px; img { width: 32px; } .today { font-size: 15px; margin-left: 5px; margin-right: 13px; } .num { font-size: 16px; } } .search { padding: 0 32px; height: 32px; form { height: 32px; .searchParams, .btn { margin: 0 3px; } } } .listbox { flex: 1; overflow-y: auto; box-sizing: border-box; padding: 16px 35px 16px 36px; .listitem { height: 36px; line-height: 36px; margin-bottom: 5px; padding-right: 22px; div { font-size: 10px; button { font-size: 10px; } } } } } }