.box { width: 100%; height: 715px; // overflow-y: auto; color: #fff; display: flex; flex-direction: column; background-image: linear-gradient(#003B6E, #000D21); position: relative; } .titlebox { width: 100%; height: 48px; background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); display: flex; align-items: center; .title { width: 100%; height: 32px; background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); display: flex; justify-content: center; div { width: 120px; height: 32px; text-align: center; line-height: 32px; font-family: sybold; font-size: 16px; position: relative; cursor: pointer; margin: 0 18px; .border { position: absolute; bottom: -7px; left: -18px; width: 120px; height: 4px; } } .selected { background: linear-gradient(90deg, rgba(35, 153, 255, 0.57) 0%, #25b7d4 50%, rgba(35, 153, 255, 0.57) 100%); .border { background: linear-gradient(90deg, rgba(35, 217, 255, 0) 0%, #25b7d4 50%, rgba(35, 217, 255, 0) 100%); } } } } .details { width: 100%; height: 45px; line-height: 45px; box-sizing: border-box; padding: 0 12px; } .content { flex: 1; overflow: hidden; .imgbox { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; img { max-width: 100%; max-height: 100%; } } .vediobox { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; video { max-width: 100%; max-height: 100%; } } } .disposebox { width: 100%; height: 95px; box-sizing: border-box; padding: 5px 12px; display: flex; flex-direction: column; .title { display: flex; justify-content: space-between; } .disposeContent { display: flex; align-items: center; textarea { width: 100%; height: 40px; color: #C4E2FC; border: 1px solid #91CCFF; background-color: #172c45; } span{ display: inline-block; width: 100%; height: 40px; line-height: 40px; } } .disposeTime {} } .ant-modal-close { color: #fff; } // 适配125% @media screen and (max-height: 750px) { .box { width: 100%; height: 650px; color: #fff; display: flex; flex-direction: column; background-image: linear-gradient(#003B6E, #000D21); position: relative; } .content { .imgbox { .bigimg { // min-width: 1149px; flex: 1; box-sizing: border-box; padding-left: 13px; display: flex; justify-content: center; img { max-width: 100%; max-height: 100%; } } } } } // 适配150% @media screen and (max-height: 600px) { .box { width: 100%; height: 480px; color: #fff; display: flex; flex-direction: column; background-image: linear-gradient(#003B6E, #000D21); position: relative; } .content { .imgbox { .bigimg { // min-width: 1149px; flex: 1; box-sizing: border-box; padding-left: 13px; display: flex; justify-content: center; img { max-width: 100%; max-height: 100%; } } } } } ::-webkit-input-placeholder { /* WebKit browsers */ color: #345d85; } //滚动条样式 ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background-image: linear-gradient(#2495f8, #1c73c2, #0a3d6a, #061d3c); } ::-webkit-scrollbar-track { background-color: #061d3c; }