body { background-color: #141518; } .plv-watch-pc { width: 1180px; margin: auto; padding-top: 50px; background-color: #141518 } .plv-pc-menu__container { width: 1180px; margin: auto; background: #fff; } /* 适配不同屏幕尺寸 */ @media (min-width: 1366px) { .plv-watch-pc { width: 1247px; } .plv-pc-menu__container { width: 1247px; } } @media (min-width: 1440px) { .plv-watch-pc { width: 1350px; } .plv-pc-menu__container { width: 1350px; } } @media (min-width: 1600px) { .plv-watch-pc { width: 1430px; } .plv-pc-menu__container { width: 1430px; } } @media (min-width: 1920px) { .plv-watch-pc { width: 1680px; } .plv-pc-menu__container { width: 1680px; } } .plv-watch-pc__top { position: relative; } .plv-watch-pc__top .pv-ppt-controller { width: 76.2%; z-index: 99; } /* 保持比例撑起高度 9:16=高:宽=56.25% */ .plv-watch-pc__screen__height { position: relative; height: 0; padding-top: 56.25%; } .plv-watch-pc__screen__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* 主屏(左侧) */ .plv-watch-pc__screen-main { width: 76.2%; } /* 辅屏(右侧) */ .plv-watch-pc__screen-sub { position: absolute; left: 76.2%; right: 0; top: 0; } /* 侧栏聊天室 */ .plv-watch-pc__side { position: absolute; left: 76.2%; right: 0; top: 0; bottom: 0; } .plv-watch-pc__chat { position: absolute; left: 0; top: 0; padding-top: 56.25%; width: 100%; height: 100%; } /* 普通直播,没有辅屏 */ .plv-watch-pc--alone .plv-watch-pc__chat { padding-top: 0; } /* 聊天室样式覆写 */ .plv-watch-pc .plv-skin--dark .polyv-chat-room { background-color: #202127; } .plv-watch-pc .plv-skin--dark .polyv-cr-navbar { background-color: #3e3e4e; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-cr-navbar>li { color: #adadc0; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-cr-navbar>li.polyv-crn-active { color: #fff; border-bottom: 0 } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-cr-navbar>li.polyv-crn-active>span:first-child { border-bottom: 3px solid #fff; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-cr-navbar>li>span:first-child { display: inline-block; line-height: 35px; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-cr-navbar>li>span { display: inline-block; line-height: 35px; } .plv-watch-pc .plv-skin--dark .polyv-chat-room>.polyv-cr-body { background-color: #202127; } .plv-watch-pc .plv-skin--dark .polyv-chat-input { background-color: #3e3e4e; } .plv-watch-pc .plv-skin--dark .tab-chat-content::-webkit-scrollbar { width: 6px; } .plv-watch-pc .plv-skin--dark .tab-chat-content::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #46464f; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-msg-content { background: #2b2c35; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-emotion-wrap { background: #202127; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-emotion-wrap:after { border-color: #202127 transparent transparent; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-chat-input textarea { background: #2e2e36; padding: 4px; color: #fff; margin-bottom: 5px; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-btn-info { background: #2b2c35; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-chat-input .polyv-icon-emotion { background: url('../img/emotion.png'); background-size: 18px 18px; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-chat-input .polyv-icon-flower { background: url('../img/flower.png'); background-size: 18px 18px; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-chat-input .polyv-icon-like { background: url('../img/like.png'); background-size: 18px 18px; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-chat-input .polyv-pc-only-teacher { color: #fff; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-chat-input-top { padding-bottom: 5px; } .plv-watch-pc .plv-skin--dark .polyv-chat-room>.polyv-cr-body .polyv-set-nickname.show { background: #3e3e4e } .plv-watch-pc .plv-skin--dark .polyv-chat-room>.polyv-cr-body .polyv-set-nickname input { background: #212121; border: 0; } .plv-watch-pc .plv-skin--dark .polyv-chat-room>.polyv-cr-body .polyv-set-nickname .polyv-btn { background: #3e3e4e; color: #888; } .plv-watch-pc .plv-skin--dark .polyv-chat-room>.polyv-cr-body .polyv-set-nickname .polyv-btn-info { background: #2b2c35; color: #fff; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-chat-list>.polyv-msg { color: #adadc0; } .plv-watch-pc .plv-skin--dark .polyv-chat-room .polyv-fr>span { color: #adadc0; } /* 全屏样式处理 */ .plv-watch-pc__top--fullscreen .plv-watch-pc__screen-main { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 88; } .plv-watch-pc__top--fullscreen .plv-watch-pc__screen-main .plv-watch-pc__screen__height { position: static; } .plv-watch-pc__top--fullscreen .plv-watch-pc__side { display: none; } .plv-watch-pc__top--fullscreen .plv-watch-pc__screen-sub { position: static; } .plv-watch-pc .plv-watch-pc__top--fullscreen .pv-ppt-controller { width: 100%; } /* 频道信息 */ .plv-watch-pc__info { display: none; padding: 30px 0; color: #fff; font-size: 0; } .plv-watch-pc__info__logo { width: 50px; margin-right: 10px; } .plv-watch-pc__info__desc { display: inline-block; vertical-align: top; } .plv-watch-pc__info__desc__name { margin-bottom: 8px; line-height: 24px; font-size: 18px; } .plv-watch-pc__info__desc__publisher-ico { display: inline-block; width: 18px; height: 18px; vertical-align: middle; background: url(../img/person.png) no-repeat; background-size: 18px 18px; margin-right: 4px; } .plv-watch-pc__info__desc__publisher, .plv-watch-pc__info__desc__view { font-size: 14px; vertical-align: middle; } .plv-watch-pc__info__desc__publisher::after { content: '|'; margin: 0 16px; } /* IE*/ .plv-watch-pc .ply-liveppt-container > object { width: 100%; height: 100%; } /*PC 菜单栏 */ .plv-pc-menu { background: #fff; margin: auto; } .plv-pc-menu__tab { border-bottom: 1px solid #ededef; } .plv-pc-menu__tab>li { padding: 0 15px; display: inline-block; height: 80px; line-height: 80px; font-size: 18px; color: #aaa; border-bottom: 2px solid transparent; cursor: pointer; } .plv-pc-menu__tab>li.active { color: #333; border-bottom: 2px solid #2196f3; } .plv-pc-menu__content { padding: 40px 0; min-height: 200px; } .plv-pc-menu__content>div { display: none; } .plv-pc-menu__content>div.active{ display: block; }