1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
| html,
| 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 {
| height: 20%;
| min-height: 10px;
| width: 95%;
| margin: auto;
| font-size: 18px;
| 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: 20px;
| }
|
| /* 统一播放按钮 */
| .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: 65%;
| height: 15%;
| overflow: hidden;
| }
|
| /* 轴线，线上图片 */
| .timeZline {
| width: 100%;
| height: 50%;
| transition: all 1s ease-in-out;
| }
|
| /* 轴线时间 */
| .mmessage {
| width: 100%;
| height: 10%;
| font-size: 15px;
| transition: all 1s ease-in-out;
| }
|
| /* 时间线 */
| .eline {
| position: absolute;
| top: 30px;
| /*width: 200px;*/
| height: 2px;
| border: solid 1px #0872BC;
| border-radius: 5px;
| background-color: #1C262B;
| }
|
| /* 时间轴上的图片点 */
| .point {
| position: absolute;
| top: 23px;
| width: 11px;
| height: 22px;
| z-index: 9;
| }
|
| /* 时间点上的图片 */
| .point img {
| cursor: e-resize;
| transition: all 2s ease-in-out;
| }
|
| /* 时间轴下面的文字 */
| .pmessage {
| position: absolute;
| top: 45px;
| color: #FFFFFF;
| }
|
|
