.details_mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 10000000000; } .close-model { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } .details_title { height: 50px; line-height: 50px; color: #333; font-size: 15px; text-align: center; border-bottom: 1px solid #ddd; } .details_table { height: calc(100vh - 406px); overflow-y: auto; } .goods-list-box { width: 100%; height: calc(100vh - 406px); } .details_box { position: absolute; right: 0; width: 40%; min-width: 550px; background: #fff; height: calc(100vh - 65px); bottom: 0; } .in { animation: alertShow .4s ease-out; } .on { animation: alertClose .4s ease-out; } @keyframes alertShow { 0% { right: -30%; } 100% { right: 0; } } @keyframes alertClose { 0% { right: 0; } 100% { right: -30%; } } .details-info { box-sizing: border-box; padding: 15px; font-size: 15px; color: #333; overflow-y: auto; max-height: 366px; } .details-info::-webkit-scrollbar { width: 5px; } .details-info::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1); } .details-info::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px #eee; border-radius: 0; } .info_list { display: flex; justify-content: space-between; margin-bottom: 10px; } .info_list > :nth-child(1) { /* width: 80px;*/ } .info_list > :nth-child(2) { flex: 1; text-align: right; line-height: 20px; } .actuallyPaid { text-align: right; }