*{ padding: 0; margin: 0; } body{ height: 100%; overflow: hidden; } .storeCheck{ height: calc(100vh); display: flex; flex-direction: column; // 进度条 .loading{ background: #fff; height: 100%; width: 100%; text-align: center; position: fixed; z-index: 10000; left:0; top:0; .ant-spin{ margin-top: 50%; } } // 工作区域 .checkWork{ flex-grow: 1; display: flex; flex-direction: column; overflow: auto; // 摄像头切,换预置位及打分统计 .checkWork-head{ position: relative; .checkWork-head-row{ &:first-child{ > div{ display: flex; align-items: center; width: 100%; > div{ &:last-child{ flex-grow: 1; } } } } > div{ width: 100%; padding: 5px 10px; display: flex; align-items: center; &:first-child{ border-bottom: 1px solid #eee; } > div{ width: 33.3%; padding: 3px 0; } .ant-dropdown-link{ width: 100%; display: block; text-align: right; color: #666666; } } } } .checkWork-body{ flex-grow: 1; display: flex; background: #f8f8f8; overflow: auto; .checkWork-body-tabs{ width: 26%; padding: 1px 0; overflow-y: scroll; box-shadow: 1px 1px 3px #eee; .tabs-items{ text-align: center; padding:8px 5px; position: relative; margin: 5px; background: #fff; .edit{ font-size: 14px; color: #ff0000; } .aicon{ color: #fff; position: absolute; font-size: 12px; left: -5px; top: -6px; background: #ff0000; padding: 3px; border-radius: 100%; } } .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; .remarks{ padding: 5px; } .photos{ span{ border: 1px solid #eee; } display: block; > div{ display: inline-block; } } > div{ display: flex; align-items: center; > div{ padding: 5px; &:first-child{ flex-grow: 1; } .anticon{ font-size: 30px; color: #666; margin-left: 15px; } .choose-bsy{ color: #13C2C2; } .choose-bhg{ color: #ff0000; } .choose-hg{ color: #00be00; } } } } } } .checkWork-button{ > div{ padding: 10px; text-align: center; font-size: 18px; background: #FAAD14; color: #fff; } } } } // 播放器 .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); } } // 拍照弹框 .pzPopus{ .pz-pinglun{ display: flex; align-items: center; .remarks{ flex-grow: 1; padding-right: 15px; } .icons{ border: 1px solid #aaa; padding: 10px; border-radius: 100%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; .aicon{ font-size: 30px; color: #999; } } } .imglist{ display: flex; align-items: center; flex-wrap: wrap; padding: 30px 0 20px; > div{ position: relative; padding: 3px; border: 1px solid #eee; border-radius: 5px; margin-right: 10px; img{ width: 45px; height: 45px; } .aicon{ color: #fff; position: absolute; font-size: 12px; right: -6px; top: -8px; background: #FF0000; padding: 2px; border-radius: 100%; } } } .f-btns{ padding: 10px 0; } }