<style lang="less" scoped>
.video-play-container {
width: 100%;
height: 100vh;
font-size: 14px;
color: #666;
background: #eceef1;
padding: 20px;
display: flex;
text-align: left;
box-sizing: boder-box;
position: relative;
.download-dialog {
position: absolute;
width: 300px;
padding: 20px;
// height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
background: #f0f0f0;
border-radius: 5px;
.download-close {
position: absolute;
right: 10px;
top: 10px;
}
}
p {
margin: 0;
}
.video-tree-box {
width: 260px;
height: 100%;
background: #fff;
p {
height: 45px;
line-height: 45px;
padding-left: 20px;
border-bottom: 1px solid #ddd;
color: #445160;
font-weight: 700;
}
/deep/ .el-input__inner {
height: 36px;
line-height: 36px;
}
/deep/ .el-input__icon {
line-height: 36px;
}
.tree-select-content {
padding: 15px;
height: calc(100% - 250px);
border-bottom: 1px solid #ddd;
.tree-select {
margin-top: 10px;
width: 100%;
height: calc(100% - 50px);
overflow: auto;
::v-deep .el-tree-node > .el-tree-node__children {
overflow: visible;
}
}
.online-icon {
color: #0fe1f4;
margin-right: 3px;
}
.offline-icon {
color: #ff4f4f;
margin-right: 3px;
}
/deep/ .el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
/deep/ .el-tree-node__content>label.el-checkbox {
margin-right: 3px;
}
}
.tree-query {
padding: 20px;
}
.custom-query {
padding: 10px 20px;
margin-top: 15px;
}
}
.video-play-box {
flex: 1;
height: 100%;
border-left: 1px solid #ddd;
video::-internal-media-controls-overflow-button {
display: none !important;
}
video::-webkit-media-controls-overflow-button {
display: none !important;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
.change-video-number {
height: 45px;
line-height: 45px;
padding-left: 20px;
background: #fff;
.single {
display: inline-block;
padding: 0 20px;
height: 32px;
line-height: 32px;
border: 1px solid #e9ebee;
cursor: pointer;
&:first-child {
border-right: 0;
border-radius: 5px 0 0 5px;
}
&:last-child {
border-left: 0;
border-radius: 0 5px 5px 0;
}
}
.active {
color: #1c79f4;
border-color: #1c79f4;
&:first-child {
border-right: 1px solid #1c79f4;
}
&:last-child {
border-left: 1px solid #1c79f4;
}
}
}
.video-container {
height: calc(100% - 45px);
background: #1c2834;
display: flex;
flex-wrap: wrap;
.play-icon {
width: 130px;
height: 84px;
}
.no-play-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
&:hover .custom-cover {
display: block;
}
}
.custom-close {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
cursor: pointer;
font-size: 20px;
}
.custom-download {
color: #fff;
cursor: pointer;
font-size: 24px;
// font-weight: bold;
}
.custom-cover {
position: absolute;
background: transparent;
bottom: 32px;
right: 162px;
display: inline-block;
width: 30px;
height: 30px;
display: none;
}
.more {
width: 50%;
height: 50%;
border: 1px solid rgba(0, 0, 0, .3);
}
}
}
}
</style>
