/* 1v1 视频电话模式 */ .template-1v1 { width: 750rpx; height: 500rpx; position: relative; } .template-1v1 .pusher-container { width: 300rpx; height: 300rpx; position: absolute; right: 0rpx; top: 0rpx; z-index: 999999999; } .full_btn { position: absolute; right: -300rpx; top: 200rpx; transform: rotate(90deg); } /* .template-1v1 .pusher-container.fullscreen{ width: 100vw; height: 100vh; top: 0; right: 0; } */ /* .template-1v1 .loading { position: absolute; top: 40vh; left: 50vw; transform: translate(-50%, 0); width: 300rpx; height: 250rpx; border-radius: 12rpx; background: rgba(0,0,0,0.6); color: white; padding: 40rpx; display: flex; flex-direction: column; } */ .template-1v1 .loading-img { height: 200rpx; display: flex; justify-content: center; align-items: center; animation: rotate 2s linear infinite; } .template-1v1 .rotate-img { width: 160rpx; height: 160rpx; } .template-1v1 .loading-text { width: 100%; padding-top: 40rpx; text-align: center; } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .template-1v1 .player-container:nth-child(1) { width: 100%; height: 100%; } .template-1v1 .handle-btns { position: absolute; z-index: 3; bottom: 15vh; width: 100vw; display: flex; flex-direction: row; justify-content: space-around; } .template-1v1 .bottom-btns { position: absolute; z-index: 3; bottom: 3vh; width: 100vw; display: flex; flex-direction: row; justify-content: space-around; } /* .template-1v1 image { width: 4vh; height: 4vh; } */ .template-1v1 .btn-normal { width: 8vh; height: 8vh; box-sizing: border-box; display: flex; background: white; justify-content: center; align-items: center; border-radius: 50%; } .template-1v1 .btn-hangup .btn-image, .template-1v1 .btn-normal .btn-image { width: 4vh; height: 4vh; } .template-1v1 .btn-hangup { width: 8vh; height: 8vh; background: #f75c45; box-sizing: border-box; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .modol { width: 455rpx; height: 400rpx; margin: 50rpx auto; /* border: 1px solid red; */ position: relative; background-color: rgba(0, 0, 0, 0.3); z-index: 100; } .modol1 { width: 455rpx; height: 400rpx; margin: 30vh 150rpx; /* border: 1px solid red; */ position: relative; background-color: rgba(0, 0, 0, 0.3); z-index: 100; transform: rotate(90deg); } .lm { width: 455rpx; height: 400rpx; position: absolute; top: 0rpx; left: 0rpx; } .t1 { position: absolute; top: 150rpx; left: 100rpx; color: #000; font-size: 28rpx; font-weight: 900; } .t2 { position: absolute; top: 180rpx; left: 140rpx; color: #999999; font-size: 25rpx; font-weight: 900; } .t3 { color: #eb3f33; } .t4 { height: 60rpx; border-radius: 40rpx; font-size: 29rpx; font-weight: 600; color: #fff; background: #d7301d; text-align: center; position: absolute; top: 230rpx; left: 70rpx; line-height: 60rpx; } .t5 { height: 60rpx; border-radius: 40rpx; font-size: 29rpx; font-weight: 600; color: #666666; background: #e0e1e3; text-align: center; position: absolute; top: 300rpx; left: 70rpx; line-height: 60rpx; } /* .lm1 { width: 455rpx; height: 400rpx; position: absolute; top: 500rpx; right: 150rpx; transform:rotate(90deg); } .t11 { top: 170rpx; left: 250rpx; color: #000; font-size: 28rpx; font-weight: 900; transform:rotate(90deg); } .t21 { position: absolute; top: 210rpx; left: 300rpx; color: #999999; font-size: 25rpx; font-weight: 900; transform:rotate(90deg); } .t31 { color: #eb3f33; } .t41 { height: 67rpx; border-radius: 40rpx; font-size: 29rpx; font-weight: 600; color: #fff; background: #d7301d; text-align: center; position: absolute; top: 270rpx; left: 230rpx; line-height: 67rpx; transform:rotate(90deg); } .t51 { height: 67rpx; border-radius: 40rpx; font-size: 29rpx; font-weight: 600; color: #666666; background: #e0e1e3; text-align: center; position: absolute; top: 350rpx; left: 230rpx; line-height: 67rpx; transform:rotate(90deg); } */