body{ background: #fff; } .videoList::-webkit-scrollbar-track { background-color: #F5F5F5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.52); } /*定义滚动条高宽及背景*/ .videoList::-webkit-scrollbar { width: 6px; background-color: rgba(0, 0, 0, 0.84); } /*定义滚动条*/ .videoList::-webkit-scrollbar-thumb { background-color: #888585; border-radius: 10px; } .videoBody{ width: 100%; background: #262626; overflow: hidden; } .videoBody .videoCenter{ width: 1200px; background: #000; margin: 0 auto; overflow: hidden; } .videoBody .videoCenter .videoPlay{ width: 900px; float: left; height: 560px; } .videoBody .videoCenter .videoPlay #videoDe{ width:900px; max-height: 506px; } .videoList{ padding: 20px; width: 300px; float: right; box-sizing: border-box; color: #fff; height: 558px; overflow-y: auto; } .videoList li img{ width: 90px; height: 90px; display: inline-block; float: left; clear: both; overflow: hidden; } .videoList ul { margin-top: 20px; } .videoList li { cursor: pointer; overflow: hidden; clear: both; margin-bottom: 15px; } .videoList li.active .txt h4,.videoList li.active .txt p{ color:#0289df; } .videoList li .txt{ float: right; width: 140px; padding: 14px; color: #fff; padding-left: 0 } .videoList h3{ font-weight: normal; color: #fff; font-size: 24px; padding-bottom:10px; } .videoList li .txt h4{ font-size: 16px; font-weight: normal; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; } .videoList li .txt p{ font-size: 14px; margin-top: 10px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp:2; } .share{ clear: both; height: 50px; line-height: 50px; padding-left: 28px; position: relative; z-index: 10; } .share div{ float: left; } .share ul{ position: absolute; left: 140px; height: 40px; width:140px; transition: all .2s ease-in-out; background: #fff; display: flex; display: -webkit-flex; justify-content: space-around; border-radius: 4px; padding: 0 15px; z-index: -1; opacity: 0; } .share ul::before{ content: ''; position: absolute; width: 10px; color: #fff; height: 10px; background: #fff; display: inline-block; transform: rotate(45deg); left: -5px; top: 18px; z-index:-1; } .share ul.active{ left: 110px; opacity: 1; z-index: 30; transition: all .3s ease-in } .share ul.active::before{ z-index: 30; } .share ul li{ cursor: pointer; width: 30px; height: 30px; margin-top: 5px; } .share ul .qqHy{ background: url(../../img/indedImg/qq_no.png)no-repeat; background-size:100% 100%; } .share ul .qqHy:hover{ background: url(../../img/indedImg/qq_yes.png)no-repeat; background-size:100% 100%; } .share ul .qqKj:hover{ background: url(../../img/indedImg/kj_yes.png)no-repeat; background-size:100% 100%; } .share ul .qqKj{ background: url(../../img/indedImg/kj_no.png)no-repeat; background-size:100% 100%; } .share ul .xlWb:hover{ background: url(../../img/indedImg/xl_yes.png)no-repeat; background-size:100% 100%; } .share ul .xlWb{ background: url(../../img/indedImg/xl_no.png)no-repeat; background-size:100% 100%; } .pub_fix { z-index: 9999; } .share div>img{ width: 24px; height: 24px; display: inline-block; margin-right: 10px; vertical-align: middle; margin-top: -3px; } .share span{ display: inline-block; line-break: 50px; color: #999999; cursor: pointer; } .share span:hover{ color: #fff; } .videoBody h2{ width: 1200px; font-weight: normal; font-size:30px; color: #ffffff; margin: 20px auto 40px; } .summary{ width: 1200px; margin: 58px auto 100px; } .summary h4{ font-size: 30px; color: #333333; margin-bottom:28px; font-weight: normal } .summary p{ font-size: 24px; color: #666666; text-align: justify; margin-bottom: 20px; } footer{ display: block; }