*{ padding: 0; margin: 0; } body{ height: 100%; overflow: hidden; } .storeCheck{ height: calc(100vh); display: flex; flex-direction: column; // 工作区域 .checkWork{ flex-grow: 1; display: flex; flex-direction: column; overflow: auto; // 摄像头切,换预置位及打分统计 .checkWork-head{ position: relative; .checkWork-head-row{ display: flex; align-items: center; border-bottom: 1px solid #eee; &:first-child{ > div{ display: flex; align-items: center; > div{ &:last-child{ flex-grow: 1; } } } } > div{ width: 50%; padding: 5px 10px; &:first-child{ border-right: 1px solid #eee; } > div{ padding: 3px 0; } } } } .checkWork-body{ flex-grow: 1; display: flex; background: #f8f8f8; overflow: auto; .checkWork-body-tabs{ width: 26%; padding: 1px 0; overflow-y: scroll; background: #fff; box-shadow: 1px 1px 3px #eee; .tabs-items{ text-align: center; padding:8px 5px; border-bottom: 1px solid #f8f8f8; } .tabs-items.active{ background: #91D5FF; } } .checkWork-body-tabCons{ width: 74%; padding: 5px; overflow-y: scroll; .tabCons-items{ background: #fff; padding: 5px; margin-bottom: 10px; border-radius: 5px; box-shadow: 1px 1px 3px #eee; > div{ display: flex; align-items: center; > div{ padding: 5px; &:first-child{ flex-grow: 1; } } } } } } } } // 播放器 .videoPlay{ position: relative; height: 240px; .control-yt,.control-yt-close{ position: absolute; right: 15px; top: 15px; z-index: 100000; width: 32px; height: 32px; background: url(../static/icons/kz-mini.png) no-repeat center center; background-size: contain; } .control-yt-close{ background: url(../static/icons/close.png) no-repeat center center; background-size: contain; } .ytBtns{ position: absolute; width: 40px; height: 40px; z-index: 10000; opacity: 50%; } .yt-left{ left: 20%; top: 100px; background: url(../static/icons/left.png) no-repeat center center; background-size: contain; } .yt-right{ right: 20%; top: 100px; background: url(../static/icons/right.png) no-repeat center center; background-size: contain; } .yt-top{ left: 50%; top: 20px; margin-left: -20px; background: url(../static/icons/up.png) no-repeat center center; background-size: contain; } .yt-bottom{ left: 50%; bottom: 20px; margin-left: -20px; background: url(../static/icons/down.png) no-repeat center center; background-size: contain; } .prism-player .prism-controlbar{ background: rgba(0, 0, 0, 0.5); } }