.box { width: 100%; // min-height: 715px; // overflow-y: auto; color: #fff; display: flex; flex-direction: column; background-image: linear-gradient(#003B6E, #000D21); position: relative; border: 1px solid #6d9cc7; box-shadow: 0 0 8px 0 #fff } .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; position: relative; .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%); } } } .close { position: absolute; right: 18px; top: 18px; cursor: pointer; i { font-size: 18px; } } } .details { width: 100%; height: 45px; line-height: 45px; box-sizing: border-box; padding: 0 12px; } .typecheckbox { box-sizing: border-box; padding: 0 12px; margin-bottom: 6px; label { color: #fff; } } .content { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 550px; .imgbox { flex: 1; box-sizing: border-box; padding: 0 12px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; // margin-bottom: 12px; flex-direction: column; iframe { flex: 1; } #canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } img { height: 550px; width: auto; } } .vediobox { width: 100%; height: 100%; min-height: 550px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 12px; video { height: 550px; width: auto; } } } .disposebox { width: 100%; // height: 95px; box-sizing: border-box; padding: 5px 12px; display: flex; flex-direction: column; .title { display: flex; justify-content: space-between; position: relative; .btn { display: flex; align-items: center; span { margin: 0 4px; display: inline-block; // border: 1px solid red; } span:first-child(1) { margin-right: 12px; } } } .disposeContent { display: flex; align-items: center; textarea { width: 100%; height: 45px; color: #C4E2FC; border: 1px solid #91CCFF; background-color: #172c45; margin-bottom: 12px; } 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; } } // 适配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; } } ::-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; }