html {
|
height: 100%;
|
width: 100%;
|
}
|
|
body {
|
height: 100%;
|
width: 100%;
|
padding: 0px;
|
margin: 0px;
|
background-color: #000000;
|
overflow: hidden;
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
|
}
|
|
/* 标题 */
|
.title {
|
|
min-height: 10px;
|
width: 95%;
|
margin: auto;
|
font-size: 15px;
|
display: flex;
|
align-items: center;
|
color: #8FFFFF;
|
flex-direction: row;
|
justify-content: space-between;
|
}
|
|
.title div {
|
letter-spacing: 2px;
|
}
|
|
/* 时间轴 */
|
.tmline {
|
height: 50%;
|
width: 100%;
|
}
|
|
/* 前一页 , 后一页 */
|
.prepage,
|
.nextpage {
|
height: 15%;
|
width: 5%;
|
display: flex;
|
justify-content: center;
|
}
|
|
/* 前一页 后一页 下面的图片 */
|
.prepage,
|
.nextpage div img {
|
margin-top: 10px;
|
}
|
|
/* 统一播放按钮 */
|
/*.vd {
|
height: 15%;
|
width: 20%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: row;
|
}*/
|
|
/* 前一页，时间轴，后一页，播放位置 */
|
.prepage,
|
.line,
|
.nextpage,
|
.vd {
|
min-height: 100px;
|
position: relative;
|
float: left;
|
z-index: 10;
|
}
|
|
/* 播放 */
|
.messageVd {
|
flex-grow: 1;
|
height: 100%;
|
}
|
|
.messageVd img {
|
cursor: pointer;
|
margin-left: 40%;
|
margin-top: 20px;
|
}
|
|
|
/* 整体时间轴 */
|
.line {
|
width: 90%;
|
height: 15%;
|
overflow: hidden;
|
}
|
|
/* 轴线，线上图片 */
|
.timeZline {
|
width: 100%;
|
height: 50%;
|
transition: all 1s ease-in-out;
|
}
|
|
/* 轴线时间 */
|
.mmessage {
|
width: 100%;
|
height: 10%;
|
font-size: 12px;
|
transition: all 1s ease-in-out;
|
}
|
|
/* 时间线 */
|
.eline {
|
position: absolute;
|
top: 20px;
|
height: 2px;
|
border: solid 1px #0872BC;
|
border-radius: 5px;
|
background-color: #1C262B;
|
}
|
|
/* 时间轴上的图片点 */
|
.point {
|
position: absolute;
|
top: 13px;
|
width: 11px;
|
height: 22px;
|
z-index: 9;
|
}
|
|
/* 时间点上的图片 */
|
.point img {
|
cursor: e-resize;
|
transition: all 2s ease-in-out;
|
}
|
|
/* 时间轴下面的文字 */
|
.pmessage {
|
position: absolute;
|
top: 35px;
|
color: #FFFFFF;
|
}
|
|
|
.border {
|
margin: 6px;
|
height: calc(100% - 14px );
|
width: calc(100% - 14px );
|
border: solid 1px #4075B4;
|
}
|
|
.content {
|
height: 100%;
|
width: 100%;
|
}
|
|
.FourBorder {
|
position: absolute;
|
margin: -2px;
|
height: calc(100% - 10px );
|
width: calc(100% - 10px );
|
z-index: -1;
|
}
|
|
.topleft {
|
position: absolute;
|
left: 0;
|
top: 0;
|
height: 20px;
|
width: 20px;
|
border-top: solid 2px #0EFCFF;
|
border-left: solid 2px #0EFCFF;
|
}
|
|
.topright {
|
position: absolute;
|
right: 0;
|
top: 0;
|
height: 20px;
|
width: 20px;
|
border-top: solid 2px #0EFCFF;
|
border-right: solid 2px #0EFCFF;
|
}
|
|
.bottomleft {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
height: 20px;
|
width: 20px;
|
border-bottom: solid 2px #0EFCFF;
|
border-left: solid 2px #0EFCFF;
|
}
|
|
.bottomright {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
height: 20px;
|
width: 20px;
|
border-bottom: solid 2px #0EFCFF;
|
border-right: solid 2px #0EFCFF;
|
}
|
