html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
color: #c5c6cc;
}
body {
width: 100%;
background: url('../img/background.jpg') fixed center top no-repeat;
background-size: 100% 100%;
}
.body {
min-width: 1349px;
width: 80%;
margin: 0 auto;
}
.head-background {
width: 100%;
height: 47px;
background: url('../img/top.png');
}
.head p {
font-size: 20px;
color: white;
text-indent: 32px;
line-height: 47px;
}
.left,
.center,
.right {
float: left;
}
.left {
padding-right: 16px;
border-right: 1px solid #626262;
}
.midle {
padding: 16px 0 5px 0;
}
.select {
position: relative;
width: 207px;
height: 58px;
border: 1px solid #eee;
cursor: pointer;
box-sizing: border-box;
padding-left: 43px;
line-height: 58px;
border-radius: 4px;
margin-bottom: 11px;
}
.select .select_ul {
/*height: 200px;
overflow: hidden;
overflow-y: auto;*/
list-style: none;
display: none;
position: absolute;
top: 58px;
left: -1px;
width: 205px;
min-width: 134px;
border: 1px solid #D4D4D4;
border-top: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background: #3d4153;
z-index: 100;
}
/*::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #F5F5F5;
}
*/
.select .select_ul .li {
line-height: 40px;
padding-left: 40px;
}
.select .select_ul .li:hover {
background: #2d303d;
}
#noborder {
border: none;
}
.select:after {
content: "";
position: absolute;
top: 43%;
right: 20px;
border-top: 15px solid #c5c6cc;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
.center {
padding-left: 15px;
width: calc(100% - 610px);
}
.video {
width: 100%;
}
.echarsbox {
position: relative;
margin-top: 11px;
}
#main {
width: 100%;
height: 350px;
max-height: 300px;
position: absolute;
top: 0px;
overflow: hidden;
}
#line {
border: 1px solid #7b8c93;
height: 200px;
position: absolute;
top: 40px;
}
#linebox {
width: 81.5%;
height: 200px;
/*background: red;*/
position: absolute;
top: 0px;
left: 9.5%;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 5px;
height: 16px;
background-color: #898b94;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #898b94;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #fff;
}
.right-box {
width: 348px;
margin-left: 10px;
background: url('./../img/body-1.png') no-repeat 100% 100%;
}
.right-box-top {
width: 348px;
height: 60px;
background: url('./../img/body-2.png') no-repeat 100% 100%;
border-bottom: 1px solid #292b37;
}
.right-box-top p {
color: #fff;
font-size: 15px;
font-weight: 500;
text-align: center;
line-height: 30px;
}
.right-box-top-times {
text-align: center;
}
.right-box-top-times span {
font-size: 12px;
color: white;
margin-right: 18px;
}
.right-box-top-times span:nth-child(3) {
margin-right: 0px;
}
.right-box-bottom {
padding: 13px 25px;
overflow: auto;
height: 659px;
}
.header-text {
color: white;
font-weight: 600;
}
.right-box-bottom-header {
line-height: 31.5px;
font-size: 12px;
}
.header-left {
width: 40%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-middle {
display: inline-block;
vertical-align: middle;
width: 40%;
padding-left: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-right {
vertical-align: middle;
display: inline-block;
width: 15%
}
.progress {
width: 100%;
height: 5px;
border-radius: 8px;
background: #94959b;
}
.progressline {
height: 100%;
border-radius: 8px;
background: #8b51a8;
}
.progressbox p {
line-height: 14px;
}
.lineinfo {
position: absolute;
width: 345px;
height: 166px;
top: 10px;
box-sizing: border-box;
left: -156px;
}
.lineinfotop {
position: absolute;
top: 0px;
overflow: hidden;
margin-top: 10px;
margin-left: 20px;
}
.lineinfobackground {
border-radius: 9px;
position: absolute;
width: 345px;
height: 183px;
background: black;
opacity: 0.5;
}
.green,
.red {
display: inline-block;
width: 30px;
height: 10px;
border-radius: 10px;
}
.green {
background: #6ab581;
}
.red {
background: #df5a5a;
}
.greenBox,
.redBox,
.lineBox {
float: left;
margin-right: 5px;
}
.signline {
position: relative;
}
.signline span {
height: 1px;
position: absolute;
top: 8px;
display: inline-block;
width: 30px;
background: #50abfd;
}
.signline div {
border-radius: 50%;
height: 10px;
display: inline-block;
width: 10px;
border: 1px solid #50abfd;
background: #fff;
position: absolute;
top: 3px;
left: 10px;
z-index: 200;
}
.ssl {
margin-left: 32px;
}
#programUl {
max-height: 300px;
overflow: auto;
}
#sslnum {
float: right;
margin-left: 30px;
}
#now {
position: absolute;
top: 27px;
left: 20px;
}
.lineinfobotom {
top: 44px;
position: absolute;
left: 20px;
}
.lineinfobotom-right {
float: left;
margin-left: 20px;
}
.lineinfobotom-left {
border-right: 1px solid #626262;
width: 159px;
float: left;
}
.lineinfobotom-left div,
.lineinfobotom-right div {
font-size: 12px;
line-height: 22px;
}
.lineinfobotom-p {
font-size: 14px;
line-height: 22px;
color: white;
}
.column {
cursor: pointer;
position: relative;
}
.act .selectAct {
position: absolute;
width: 3px;
top: 3px;
left: -6px;
bottom: 3px;
background-color: #df5a5a;
}
#channelUl{
border-top: 1px solid #eee;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
border-radius: 4px;
}
#channelUl .li{
border-bottom: 1px solid #eee;
line-height: 58px;
text-align: center;
cursor: pointer;
}
#channelUl .actSelect{
background-color: rgba(0, 0, 0, .3);
}