新视频品台对接,回放功能

This commit is contained in:
zhangqinbin
2023-06-20 10:33:32 +08:00
parent 716767cebc
commit de5ba50edb
36 changed files with 865 additions and 65 deletions

View File

@ -0,0 +1,194 @@
.p_top {
width: 100%;
height: 48px;
background: #292b36;
padding: 14px 21px 0 21px;
font-size: 14px;
color: #ffffff;
letter-spacing: 0;
box-sizing: border-box;
display: flex;
justify-content: space-between;
position: relative;
}
.p_container {
overflow: hidden;
position: relative;
height: 95%;
width: 100%;
background: #000;
// text-align: center;
}
.p_bottom_container {
position: relative;
width: 100%;
}
.p_bottom {
width: 100%;
top:-48px;
height: 48px;
background: #292b36;
padding: 14px 21px 0 21px;
font-size: 14px;
color: #ffffff;
letter-spacing: 0;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.scale .dot-container {
display: inline-block;
height: 16px;
width: 60px;
position: relative;
background: #fff;
height: 2px;
margin: 7px 10px;
line-height: 16px;
vertical-align: middle;
}
.dot-container-dot {
display: inline-block;
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 100%;
top: -3.5px;
left: 0;
}
.current-time {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-top: 12px;
z-index: 99;
background: #06070b;
border-radius: 12px;
height: 24px;
line-height: 24px;
font-size: 14px;
color: #ffffff;
letter-spacing: 0;
text-align: center;
width: 176.5px;
}
.canvas-container {
position: absolute;
top: -48px;
opacity: 0.8;
background: #292b36;
width: 100%;
z-index: 100;
height: 48px;
}
.ico {
min-width: 22px;
min-height: 22px;
margin-right: 4px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
}
.ico2 {
min-width: 3px;
min-height: 3px;
margin-right: 3px;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
}
.ico-guanbi {
background-image: url("./RoomDetail/assessts/gb.png");
}
.ico-huifang {
background-image: url("./RoomDetail/assessts/hf.png");
}
.ico-jia {
background-image: url("./RoomDetail/assessts/j.png");
}
.ico-jian {
background-image: url("./RoomDetail/assessts/ja.png");
}
.ico-jietu {
background-image: url("./RoomDetail/assessts/jie.png");
}
.ico-jietu-d {
background-image: url("./RoomDetail/assessts/jie_d.png");
}
.ico-luxiang {
background-image: url("./RoomDetail/assessts/lx.png");
}
.ico-luxiang-d {
background-image: url("./RoomDetail/assessts/lx_d.png");
}
.ico-luxiang_a {
background-image: url("./RoomDetail/assessts/luxiang_a.png");
background-repeat: no-repeat;
}
.ico-quanping {
background-image: url("./RoomDetail/assessts/qp.png");
}
.ico-yulan {
background-image: url("./RoomDetail/assessts/yl.png");
}
.ico-zhankai {
background-image: url("./RoomDetail/assessts/zk.png");
}
.ico-dian {
background-image: url("./RoomDetail/assessts/dian.png");
}
.ico-yy {
background-image: url("./RoomDetail/assessts/yy.png");
}
.ico-yy_s {
background-image: url("./RoomDetail/assessts/yy_s.png");
}
.ico-yy_a {
background-image: url("./RoomDetail/assessts/yy_a.png");
}
.iconPlay {
width: 120px;
height: 120px;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.speed {
background: rgba(255, 255, 255, 0.1);
display: inline-block;
font-size: 14px;
padding: 2px 8px;
border-radius: 10px;
color: #fff;
margin-right: 8px;
border: #ccc 1px solid;
}
.recordTime {
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%);
top: 63px;
z-index: 9999;
color: #fff;
opacity: 0.9;
background: #292b36;
border-radius: 4px;
border-radius: 100px;
width: 81px;
height: 25px;
line-height: 25px;
font-size: 12px;
}
.msgt {
font-size: 12px;
color: #606266;
}