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); }