#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; } /*全屏操作按钮 */ #videoControlBtn { width: 184px; height: 224px; position: absolute; top: 68%; left: 88%; z-index: 99999999999999; flex-direction: column; pointer-events: auto; } #videoControlBtn button { width: 32px; height: 32px; margin: 0; background-size: 100% 100%; border-style: none; cursor: pointer; z-index: 99999999999999; } #videoControlBtn>div:nth-of-type(1) { width: 100%; height: 184px; background: url(../../../img/video/video_oper_btn/back.png) no-repeat 0 0/100% 100%; justify-content: space-between; } #videoControlBtn>div:nth-of-type(1)>div { width: 30%; height: 100%; justify-content: center; } #videoControlBtn>div:nth-of-type(2) { width: 100%; height: 40px; } #videoControlBtn #left { background: url(../../../img/video/video_oper_btn/leftBtn.png) no-repeat 0 0/100% 100%; } #videoControlBtn #right { background: url(../../../img/video/video_oper_btn/rightBtn.png) no-repeat 0 0/100% 100%; } #videoControlBtn #up { background: url(../../../img/video/video_oper_btn/topBtn.png) no-repeat 0 0/100% 100%; } #videoControlBtn #down { background: url(../../../img/video/video_oper_btn/bottomBtn.png) no-repeat 0 0/100% 100%; } #videoControlBtn #amplify { background: url(../../../img/video/video_oper_btn/amplify.png) no-repeat 0 0/100% 100%; } #videoControlBtn #shrink { background: url(../../../img/video/video_oper_btn/shrink.png) no-repeat 0 0/100% 100%; } /** * 全屏样式 */ .layui-table-init { background-color: transparent !important; } .layui-btn+.layui-btn { margin: 0 0 0 10px; } .layui-table-cell { padding: 6px 10px !important; } #custom-context-menu { position: fixed; display: none; min-width: 200px; background-color: white; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 2147483647; /* 最大z-index值 */ overflow: hidden; /* 新增以下属性 */ pointer-events: auto !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .context-menu-item { padding: 10px 16px; cursor: pointer; color: #333; font-size: 14px; transition: all 0.2s; /* 新增以下属性 */ pointer-events: auto !important; touch-action: manipulation; } .context-menu-item:hover { background-color: #f0f0f0; } .context-menu-divider { height: 1px; background-color: #eee; margin: 4px 0; }