#cloudPlatform { width: 100%; height: 36%; } /*云平台按钮start*/ .cloudPlatform-Btn { width: 90%; margin: 0 5%; height: 15%; display: flex; align-items: center; justify-content: center; } .cloudPlatform-Btn:nth-of-type(2) { justify-content: space-evenly; } .cloudPlatform-Btn:nth-of-type(4), .cloudPlatform-Btn:nth-of-type(5) { justify-content: space-between; height: 23%; } .ptz-operation { flex-direction: column; justify-content: space-around !important; height: 100%; } #up { width: 40px; height: 40px; background: url(../../../img/video/topBtn.png) no-repeat 0 0/100% 100%; background-size: 100% 100%; border-style: none; cursor: pointer; } #left { width: 40px; height: 40px; background: url(../../../img/video/leftBtn.png) no-repeat 0 0/100% 100%; border-style: none; background-size: 100% 100%; cursor: pointer; } #right { width: 40px; height: 40px; background: url(../../../img/video/rightBtn.png) no-repeat 0 0/100% 100%; border-style: none; background-size: 100% 100%; cursor: pointer; } #down { width: 40px; height: 40px; background: url(../../../img/video/bottomBtn.png) no-repeat 0 0/100% 100%; background-size: 100% 100%; border-style: none; cursor: pointer; } #videoLocal { width: 40px; height: 40px; background: url(../../../img/video/videoLocal.png) no-repeat 0 0/100% 100%; border-style: none; background-size: 100% 100%; cursor: pointer; } #photoLocal { width: 40px; height: 40px; background: url(../../../img/video/photoRemote.png) no-repeat 0 0/100% 100%; border-style: none; background-size: 100% 100%; cursor: pointer; } #farFocus { width: 40px; height: 40px; background: url(../../../img/video/farFocus.png) no-repeat 0 0/100% 100%; border-style: none; background-size: 100% 100%; cursor: pointer; } #nearFocus { width: 40px; height: 40px; background: url(../../../img/video/nearFocus.png) no-repeat 0 0/100% 100%; border-style: none; background-size: 100% 100%; cursor: pointer; } #amplify { width: 40px; height: 40px; background: url(../../../img/video/amplify.png) no-repeat 0 0/100% 100%; border-style: none; background-size: 100% 100%; cursor: pointer; } #shrink { width: 40px; height: 40px; background: url(../../../img/video/shrink.png) no-repeat 0 0/100% 100%; border-style: none; background-size: 100% 100%; cursor: pointer; } /*云平台按钮end*/ #ball { height: 100%; width: 100%; } /*球机视频框外层*/ #balla { width: 98.5%; height: 98.5%; margin-left: 0.5%; margin-top: 0.5%; float: left; } /*球机视频框*/ .ballsplit { width: 96.9%; height: 99%; margin-left: 5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow-y: hidden; overflow-x: hidden; margin: 0.3%; } /*移动视频框*/ .alivesplit { width: 96.9%; height: 99%; margin-left: 5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow-y: hidden; overflow-x: hidden; margin: 0.3%; } /*视频框样式*/ .ball-content { background-color: #000000; float: left; } /*视频框点击*/ .selectedContent { border: 1px solid red; box-shadow: inset 0 1px 2px #4999d6; background-color: #000000; float: left; }