js代码
$(function () {
$li=$('')
$('.num').append($li)
$('.num').append($li)
$('.num').append($li)
$('.num').append($li)
$('.num').append($li)
//第一个轮播图
$('.banner .num li:first').addClass('on');
var cout=0;
function f() {
s=setInterval(function () {
let index=cout*(-440)
$('.banner .num>li').siblings().removeClass('on').end().eq(cout).addClass('on');
$('.img').animate({left:''+index+'px'})
cout++
if (cout==5)
cout=0
},1000)
}
f()
$('.banner .num>li').click(function () {
clearInterval(s)
$(this).siblings().removeClass('on').end().addClass('on'); // 切换圆点样式
/*切换轮播图*/
cout = $(this).index();
// $('.banner .img').css({left:-440*cout,transition:'all 0.75s ease'});
$('.img').animate({left:''+cout*(-440)+'px'})
})
$('.banner').mouseover(function () {
clearInterval(s)
}).mouseout(function () {
f()
})
//直播排行 关注主播 为你推荐
$('.r-con>.tabs>.bili-tab-item').click(function () {
$(this).siblings().removeClass('on').end().addClass('on');
let index=$(this).index()
if (index==0){
$('.load-state,.tuijian').css({display:'none'})
$('.rank').css({display:'block'})
}else if (index==1){
$('.rank,.tuijian').css({display:'none'})
$('.load-state').css({display:'block'})
}else if (index==2){
$('.rank,.load-state').css({display:'none'})
$('.tuijian').css({display:'block'})
}
})
//为你推荐轮播图
var cout1 = 0;
function f1() {
let s1 = setInterval(function () {
let index = cout1 * (-260);
$('.trig span').siblings().removeClass('on').end().eq(cout1).addClass('on');
$('.panel>.pic').css({ left: '' + index + 'px' });
cout1++;
if (cout1 === 3) {
cout1 = 0;
}
}, 1000);
return s1;
}
let intervalId = f1();
$('.trig span').click(function () {
clearInterval(intervalId);
$(this).siblings().removeClass('on').end().addClass('on');
cout1 = $(this).index();
$('.panel>.pic').css({ left: '' + cout1 * (-260) + 'px' });
});
$('.tab-box').mouseover(function () {
clearInterval(intervalId);
}).mouseout(function () {
intervalId = f1();
});
//悬浮切换全部和原创
$('.bili-tab-item').mouseover(function () {
$(this).siblings().removeClass('on').end().addClass('on');
let index = $(this).index();
if (index==0){
$('.hot-list').css({display:'block'})
$('.original-list').css({display:'none'})
}else if (index==1){
$('.hot-list').css({display:'none'})
$('.original-list').css({display:'block'})
}
})
//番剧
$('.bili-tab-item').mouseover(function () {
let index=$(this).index()
$('.timing-box-con>div').removeClass('active').eq(index).addClass('active')
})
})
html代码
蘑菇视频
直播排行
关注的主播
为你推荐
排行
全部
原创
三日
- 一周
-
1
【个人向】入宅10年，细数这些年换过的二次元老婆
综合评分：30.0万
-
2
[Top10]十大最佳动作/奇幻/爱情/后宫动漫
综合评分：19.2万
-
3
【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？
综合评分：18.5万
-
4
千军易得，一将难求！且看五位御姐上将军帅酷拉风的一骑当千！~求各位看官老板打赏~老板大发财~~
综合评分：16.0万
-
5
【桃园恋歌x崩坏3】泳装芽衣/琪亚娜/德丽莎三人联合放毒
综合评分：12.4万
-
6
【废柴君】盘点动画中超污的糟糕台词！ 还有这种操作？
综合评分：12.0万
-
7
喜欢色色的图，但并不色情啊！《黄漫老师》完结吐槽
综合评分：11.8万
-
1
【个人向】入宅10年，细数这些年换过的二次元老婆
综合评分：30.6万
- 2
【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？
综合评分：18.9万
-
3
千军易得，一将难求！且看五位御姐上将军帅酷拉风的一骑当千！~求各位看官老板打赏~老板大发财~~
综合评分：16.2万
-
4
【桃园恋歌x崩坏3】泳装芽衣/琪亚娜/德丽莎三人联合放毒
综合评分：12.8万
-
5
【碧蓝航线MMD/60帧】新来的 来给提督跳个桃园恋歌
综合评分：12.4万
-
6
【废柴君】盘点动画中超污的糟糕台词！ 还有这种操作？
综合评分：12.3万
-
7
喜欢色色的图，但并不色情啊！《黄漫老师》完结吐槽
综合评分：11.9万
查看更多
甜甜私房猫 第三季 中配版
更新至
23话
梦王国与沉睡的100王子 短篇动画
更新至
4话
忍者少女千鸟～伊势・金崎篇～
更新至
38话
Re:CREATORS
更新至
12话
進擊的巨人 第二季（僅台灣地區）
更新至
12话
特别推荐
-
蘑菇视频
-
传送门
-
广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文[2013]0480-056号 | 信息网络传播视听节目许可证：0910417 | 互联网ICP备案：沪ICP备13002172号-3 沪ICP证：沪B2-20100043 | 违法不良信息举报邮箱：[email protected] | 违法不良信息举报电话：4000233233转3
网上有害信息举报专区：
中国互联网违法和不良信息举报中心 |上海互联网举报中心 |12318 全国文化市场举报网站
![[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]](images/dh-list04.webp)
![[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]](images/dh-list2-04.webp)
沪公网安备 31011502001911号css代码
@charset "UTF-8";
.topcontainer {
width: 100%;
height: 170px;
background: url(../images/banner.webp) no-repeat center;
}
.topbar {
width: 100%;
height: 42px;
top: 0;
left: 0;
position: relative;
z-index: 10000;
color: #222;
}
.topbar li {
float: left;
text-align: center;
line-height: 42px;
position: relative;
font-size: 14px;
}
.topbar li a {
color: #fff;
display: block;
height: 42px;
padding: 0 11px;
}
.topbar li.home a {
width: 50px;
height: 42px;
padding: 0 0 0 20px;
}
.topbar li.home {
margin-left: -10px;
background: url(../images/icons.d895b84.png) no-repeat -845px -74px;
}
.s-line {
display: inline-block;
border-left: 1px solid #fff;
height: 12px;
margin-top: 16px;
vertical-align: middle;
}
.topright ul li.login {
margin-right: 10px;
}
.topright ul li.login a {
padding: 0 10px;
}
.topright .post a {
cursor: pointer;
position: relative;
color: #fff;
font-size: 14px;
display: block;
width: 100px;
height: 36px;
line-height: 36px;
text-align: center;
background: #fb7299;
border-radius: 2px;
margin: 5px 2px 0 5px;
}
.topcenter {
position: relative;
height: 170px;
margin-top: -42px;
}
.logo {
position: absolute;
width: 220px;
height: 105px;
left: 24px;
top: 55px;
background: url(../images/logo.webp) no-repeat left center;
z-index: 100;
}
/*头部右侧搜索框*/
.search {
margin-top: 5px;
width: 268px;
height: 32px;
font-size: 12px;
z-index: 10;
}
.searchform {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.88);
display: block;
height: 32px;
border-radius: 4px;
transition: .2s background-color;
}
.searchform:hover {
background-color: #fff;
}
input.search-box {
float: left;
width: 200px;
color: #222;
font-size: 12px;
overflow: hidden;
outline: none;
height: 32px;
line-height: 32px;
padding: 0 12px;
border: 0;
box-shadow: none;
background-color: transparent;
}
.link-rank {
position: absolute;
left: 2px;
top: 2px;
height: 32px;
line-height: 32px;
background-color: rgba(255, 255, 255, 0.88);
border-radius: 4px;
width: 68px;
transition: .2s background-color;
}
.link-rank:hover {
background-color: #fff;
}
.link-rank span {
padding-left: 26px;
color: #f25d8e;
display: inline-block;
background: url(../images/icons.d895b84.png) -659px -655px no-repeat;
}
button.submit {
display: block;
width: 44px;
min-width: 0;
cursor: pointer;
height: 32px;
background: url(../images/icons.d895b84.png) -653px -720px;
margin: 0;
padding: 0;
border: 0;
}
button.submit:hover {
background-position: -718px -720px;
}
/*主体内容部分*/
/*主导航部分*/
.nav {
position: relative;
width: 980px;
height: 50px;
margin: 0 auto;
padding: 6px 0;
z-index: 99;
}
.nav li {
float: left;
display: block;
position: relative;
margin-right: -1px;
}
.nav .nav-link {
width: 48px;
text-align: center;
display: block;
}
.num-wrap {
position: absolute;
top: 8px;
left: 0;
height: 14px;
width: 100%;
text-align: center;
}
.num-wrap .num {
display: inline-block;
vertical-align: top;
font-size: 12px;
color: #fff;
background-color: #ffafc9;
border-radius: 4px;
height: 12px;
line-height: 12px;
min-width: 18px;
padding: 1px 3px;
}
.nav-name {
position: relative;
top: 15px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
color: #222;
font-size: 14px;
height: 40px;
padding-top: 8px;
}
.nav .home .nav-link {
width: auto;
background: url(../images/icons.d895b84.png) -658px -1170px no-repeat;
}
/*二级导航*/
.sub-nav {
display: none;
position: absolute;
left: 0;
top: 48px;
z-index: 300;
overflow: hidden;
background: #fff;
border-top: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
border-radius: 0 0 4px 4px;
}
.nav-item:hover>.sub-nav {
display: block;
}
.sub-nav .sub-nav-item {
position: relative;
font-size: 12px;
line-height: 20px;
min-width: 120px;
height: auto;
overflow: hidden;
text-align: left;
transition: all .2s;
}
.sub-nav-link {
display: block;
padding: 5px 15px 5px 25px;
margin-right: 10px;
background: url(../images/icons2.324edea.png) no-repeat 12px -1613px;
white-space: nowrap;
transition: all 0.2s;
overflow: hidden;
position: relative;
left: 0;
color: #222;
}
.sub-nav-link span {
position: relative;
}
.sub-nav-link .arrow {
background: url(../images/icons2.324edea.png) no-repeat 0 -1581px;
width: 15px;
height: 18px;
display: block;
position: absolute;
left: 200px;
top: 4px;
transition: all 0.2s;
opacity: 0;
}
.sub-nav-item:hover {
background-color: #E5E9EF;
}
.sub-nav-item:hover a {
left: 5px;
}
.sub-nav-item:hover>.sub-nav-link .arrow {
opacity: 1;
}
/*导航最后三项*/
.nav-item.side-nav {
margin: 0 16px 0 10px;
line-height: 50px;
height: 50px;
position: relative;
}
.side-link {
display: inline-block;
position: relative;
overflow: hidden;
}
.side-link i {
display: block;
float: left;
width: 22px;
height: 50px;
background: url(../images/icons.d895b84.png) no-repeat;
}
.side-link i.square {
background-position: -664px -904px;
}
.side-link i.live {
background-position: -664px -518px;
}
.side-link i.blackroom {
background-position: -727px -519px;
}
.side-nav .side-link span {
display: block;
float: left;
color: #222;
height: 50px;
line-height: 50px;
margin: 0;
font-size: 16px;
}
.side-nav .square-wrap {
padding-top: 20px;
padding-bottom: 20px;
white-space: nowrap;
width: 387px;
height: 188px;
}
.nav-item.side-nav .square-wrap ul {
width: 107px;
margin-top: -6px;
overflow: hidden;
}
.nav-item.side-nav .square-wrap ul .sub-nav-item:first-child {
margin-top: 0;
}
.square-wrap .sub-nav-link {
background: none;
padding: 2px 10px 2px 18px;
}
.square-wrap .icon {
width: 16px;
height: 13px;
margin-right: 4px;
margin-top: 4px;
vertical-align: top;
}
.icon {
display: inline-block;
background-image: url(../images/icons.d895b84.png);
}
.square-wrap .square-field {
position: absolute;
top: 20px;
right: 0;
display: block;
width: 240px;
height: 188px;
padding: 0 20px 0 19px;
border-left: 1px solid #e5e9ef;
}
.square-field .square-pmt-item {
margin-top: 20px;
}
.square-field .square-pmt-item:first-child {
margin-top: 0;
}
.square-wrap .square-field a {
color: #222;
line-height: normal;
display: block;
}
.square-wrap .square-field img {
width: 240px;
height: 84px;
border-radius: 4px;
}
/*广场部分列表图标*/
.square-wrap .icon-activity {
background-position: -280px -1179px;
}
.square-wrap .icon-game {
background-position: -279px -1241px;
}
.square-wrap .icon-news {
background-position: -344px -1178px;
}
.square-wrap .icon-hy {
background-position: -280px -1370px;
}
.square-wrap .icon-mango {
background-position: -280px -1433px;
}
/*直播部分*/
.nav-item .nav-live {
width: 350px;
padding: 10px 0;
}
.nav-live ul .sub-nav-item {
min-width: 100px;
float: none;
}
.nav-item .nav-live ul .sub-nav-item {
min-width: 100px;
}
.nav-item .nav-live .live-field {
padding-left: 20px;
width: 210px;
height: 250px;
border-left: 1px solid #e5e9ef;
margin: 10px 0;
}
.nav-live .live-field .pic {
display: inline-block;
margin-bottom: 20px;
}
.nav-gif {
position: absolute;
right: 0;
top: 0;
height: 50px;
padding: 6px 0;
}
.topbox {
padding-bottom: 40px;
}
/*轮播图部分*/
.banner {
margin: 0px auto;
width: 440px;
height: 220px;
overflow: hidden;
position: relative;
border-radius: 4px;
}
.banner .img {
width: 5000px;
position: absolute;
left: 0px;
top: 0;
}
.banner .img li {
float: left;
position: relative;
}
.banner .num {
position: absolute;
z-index: 20;
bottom: 6px;
right: 20px;
}
.banner .num li {
float: left;
width: 18px;
height: 18px;
margin-right: 5px;
background-image: url(../images/icons.d895b84.png);
background-position: -855px -790px;
background-color: transparent;
transition: none;
}
.banner .num li.on {
background-image: url(../images/icons.d895b84.png);
background-position: -855px -727px;
}
.banner .num li:hover {
background-position: -919px -790px;
}
/*轮播图上隐藏的更多按钮*/
a.more-text {
position: absolute;
right: 15px;
bottom: 35px;
color: #fff;
background: rgba(0, 0, 0, .64);
width: 50px;
height: 24px;
font-size: 12px;
line-height: 24px;
text-align: center;
border-radius: 4px;
opacity: 0;
transition: all .2s linear;
z-index: 20;
cursor: pointer;
}
.banner:hover .more-text {
opacity: 1;
}
a.more-text:hover {
text-shadow: 0 0 2px #fff;
}
/*轮播图标题*/
.slide-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
line-height: 35px;
font-size: 14px;
padding-left: 10px;
opacity: 1;
color: #fff;
transition: all .3s;
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .5));
}
/*轮播图右侧推荐列表*/
.r-topbox {
width: 540px;
height: 220px;
}
.r-t-list li {
float: left;
margin: 0 0 20px 20px;
width: 160px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 4px;
background: #fff;
border-radius: 4px;
}
.lasy-img {
width: 100%;
height: 100%;
display: inline-block;
}
.lasy-img img {
width: 100%;
height: 100%;
}
/*列表遮罩效果*/
.card-mark {
position: absolute;
left: 0;
top: 68px;
width: 150px;
font-size: 12px;
height: 20px;
line-height: 20px;
padding: 10px 5px;
overflow: hidden;
background: #000;
background: linear-gradient(transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .2) 35%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .9));
}
.card-mark p.title {
color: #fff;
height: 40px;
overflow: hidden;
margin-bottom: 5px;
}
.card-mark .author,
.card-mark .play {
opacity: 0;
color: #99a2aa;
height: 20px;
line-height: 20px;
overflow: hidden;
transition: all .6s;
}
.r-t-list li:hover .card-mark {
top: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.r-t-list li:hover .card-mark .author,
.r-t-list li:hover .card-mark .play {
opacity: 1;
}
.later-icon {
position: absolute;
right: 6px;
bottom: 4px;
display: none;
width: 22px;
height: 22px;
cursor: pointer;
background-image: url(../images/watchlater-1.9f7609f.png);
}
.r-t-list li:hover .later-icon {
display: block;
}
/*推广部分*/
.popular {
padding-bottom: 30px;
}
/*推广左边部分*/
.l-con {
width: 720px;
float: left;
}
.headline {
padding: 0 0 15px;
}
.headline .icon_t.icon-promote {
background-position: -141px -75px;
}
.headline .icon_t {
width: 40px;
height: 40px;
margin-right: 10px;
vertical-align: middle;
float: left;
margin-top: -10px;
}
.headline .name {
font-size: 24px!important;
line-height: 24px;
font-weight: 400;
margin-right: 20px;
float: left;
}
.headline .name:hover {
color: #00a1d6;
}
#live .headline .fire {
margin-top: 7px;
margin-left: 10px;
padding-right: 10px;
color: #6d757a;
float: left;
font-size: 12px;
}
/*推广列表部分*/
.pro-list {
height: 168px;
overflow: hidden;
}
.pro-item {
float: left;
margin: 0 20px 20px 0;
}
.pro-item .pic {
position: relative;
width: 160px;
height: 100px;
display: block;
overflow: hidden;
text-align: center;
border-radius: 4px;
}
.pic .mask-video {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
}
.pro-item:hover .mask-video {
opacity: 1;
}
.pic .dur {
opacity: 0;
position: absolute;
bottom: 2px;
left: 6px;
color: #fff;
height: 12px;
line-height: 12px;
padding: 0 5px 1px 0;
transition: all 0.3s;
}
.pro-item:hover .dur {
opacity: 1;
}
.pic .gg-pic {
position: absolute;
right: 0;
top: 0;
}
.pro-item:hover .later-icon {
display: block;
}
/*列表标题*/
.pro-item .t {
padding-top: 8px;
height: 40px;
width: 160px;
line-height: 20px;
transition: all 0.2s linear;
color: #222;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-align: left;
}
.pro-item:hover .t {
color: #00a1d6;
}
/*推广列表右边部分*/
.r-con {
width: 260px;
float: left;
}
.r-con .online {
position: relative;
height: 34px;
line-height: 34px;
padding: 0 10px;
border-radius: 4px;
text-align: center;
background: #e5e9ef;
white-space: nowrap;
}
.online a {
color: #6d757a;
}
.online em {
display: inline-block;
border-left: 1px solid #b8c0cc;
height: 10px;
line-height: 10px;
margin: 12px 15px 0;
vertical-align: top;
}
.adpos {
margin-top: 10px;
border-radius: 4px;
overflow: hidden;
width: 260px;
height: 150px;
position: relative;
}
/*直播部分*/
.zone-wrap {
padding-bottom: 30px;
}
.gg-floor {
width: 980px;
max-height: 80px;
position: relative;
overflow: hidden;
border-radius: 5px;
margin: 0 auto 20px;
}
/*直播标题部分*/
.zone-title {
padding-right: 20px;
}
.zone-title .headline {
padding: 0 0 15px;
}
.headline .icon_t.icon-live {
background-position: -141px -652px;
}
.zone-title .headline .icon_t {
width: 40px;
height: 40px;
margin-right: 10px;
vertical-align: middle;
float: left;
margin-top: -10px;
}
.zone-title .headline .name {
font-size: 24px!important;
line-height: 24px;
font-weight: 400;
margin-right: 20px;
float: left;
color: #222;
}
.headline .online {
float: left;
margin-top: 8px;
color: #99a2aa;
}
.zone-title .headline .online span {
color: #00a1d6;
}
.zone-title .headline .fire {
margin-top: 8px;
margin-left: 40px;
padding-right: 10px;
color: #6d757a;
float: left;
}
.zone-title .headline .fire .pmt-icon {
display: inline-block;
vertical-align: top;
background-position: -665px -1113px;
width: 14px;
height: 14px;
margin-top: 1px;
}
.zone-title .headline .link-more {
float: right;
width: 52px;
height: 22px;
line-height: 22px;
background-color: #fff;
border: 1px solid #ccd0d7;
color: #555;
border-radius: 4px;
text-align: center;
margin: 0 0 0 10px;
transition: all .2s;
}
.zone-title .headline .link-more i {
display: inline-block;
background-position: -478px -218px;
width: 6px;
height: 12px;
margin: -2px 0 0;
vertical-align: middle;
transition: all .2s;
}
.headline .read-push {
float: right;
cursor: pointer;
background-color: #fff;
border: 1px solid #ccd0d7;
border-radius: 4px;
height: 22px;
padding: 0 10px;
transition: all .2s;
}
.read-push .icon_read {
display: inline-block;
width: 12px;
height: 13px;
vertical-align: top;
transition: all .5s;
margin-top: 5px;
background-position: -475px -89px;
}
.read-push .info {
display: inline-block;
vertical-align: top;
line-height: 22px;
margin-left: 5px;
}
b {
font-weight: bold;
}
.read-push:hover .icon_read {
transform: rotateZ(180deg);
}
.read-push:hover {
background-color: #CCD0D7;
}
/*直播列表部分*/
.list-box {
height: 336px;
overflow: hidden;
}
.list-item {
float: left;
margin: 0 20px 20px 0;
position: relative;
overflow: hidden;
}
.list-item .pic {
position: relative;
width: 160px;
height: 100px;
display: block;
overflow: hidden;
text-align: center;
border-radius: 4px;
}
.pic .type {
opacity: 1;
position: absolute;
bottom: 0;
right: 0;
color: #fff;
height: 12px;
line-height: 12px;
background: rgba(0, 0, 0, .5);
padding: 3px 5px;
border-radius: 4px 0 0;
transition: opacity .3s;
}
/*遮罩部分*/
.pic .mask {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
border-radius: 4px;
transition: opacity .3s;
}
.lazy-img img {
display: block;
width: 100%;
height: 100%;
}
.list-item:hover .mask {
opacity: 1;
}
.pic .mask .face,
.pic .mask .face img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.pic .mask .face {
position: absolute;
top: 26px;
left: 24px;
}
.pic .mask .onair {
position: absolute;
left: 88px;
top: 40%;
height: 20px;
line-height: 20px;
width: 48px;
border-radius: 20px;
background-color: #00a1d6;
color: #fff;
}
.mask .onair i {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 3px;
background-color: #fff;
margin: -1px 4px 0 0;
vertical-align: middle;
}
.list-item .t {
padding-top: 8px;
height: 40px;
width: 160px;
line-height: 20px;
transition: all 0.2s linear;
color: #222;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-align: left;
}
.list-item:hover .t {
color: #00a1d6;
}
/*下方作者和播放数统计*/
.list-item .num {
position: absolute;
width: 100%;
bottom: 0;
height: 20px;
line-height: 20px;
color: #99a2aa;
background-color: #fff;
transition: all .3s;
font-size: 0;
}
.num .auther {
white-space: nowrap;
text-overflow: ellipsis;
}
.num span {
line-height: 12px;
height: 14px;
display: inline-block;
width: 50%;
overflow: hidden;
font-size: 12px;
vertical-align: bottom;
}
.num .auther .icon {
background-position: -282px -154px;
}
.num i {
display: inline-block;
width: 12px;
height: 12px;
vertical-align: top;
margin-right: 5px;
}
.num .online .icon {
margin-left: 5px;
background: url(../images/live-eye.11838cd.png);
background-position: 0 0;
}
.list-item:hover .num {
bottom: -20px;
}
/*直播右侧部分*/
.tabs {
overflow: hidden;
}
.bili-tab-item:first-child {
margin-left: 0;
}
.bili-tab-item {
float: left;
position: relative;
height: 20px;
line-height: 20px;
cursor: pointer;
padding: 1px 0 2px;
border-bottom: 1px solid transparent;
margin-left: 12px;
transition: .2s;
transition-property: border, color;
}
.bili-tab-item.on {
background-color: transparent;
border-color: #00a1d6;
color: #00a1d6;
}
/*选中选项卡边框带小三角形*/
.bili-tab-item.on:before {
display: block;
}
.bili-tab-item:before {
content: "";
display: none;
position: absolute;
left: 50%;
margin-left: -3px;
bottom: 0;
width: 0;
height: 0;
border: 3px dashed #00a1d6;
border-bottom-style: solid;
border-top: 0;
border-left-color: transparent;
border-right-color: transparent;
}
/*直播排行*/
.tab-box {
margin-top: 20px;
overflow: hidden;
}
.tab-con {
width: 300%;
}
.tab-box .tab-con .tab-item {
width: 260px;
float: left;
}
.tab-con {
margin-left: 0;
transition: all 0.2s;
}
.tab-item.rank .r-item {
padding-left: 25px;
}
.tab-con .tab-item .r-item {
overflow: hidden;
position: relative;
margin: 0 0 14px;
}
.tab-con .tab-item .r-item:first-child .number,
.tab-box .tab-con .tab-item .r-item:nth-child(2) .number,
.tab-box .tab-con .tab-item .r-item:nth-child(3) .number {
background-color: #f25d8e;
}
.tab-con .tab-item .r-item .number {
position: absolute;
color: #fff;
height: 18px;
line-height: 18px;
top: 0;
left: 0;
font-size: 12px;
min-width: 12px;
text-align: center;
background-color: #b8c0cc;
z-index: 20;
border-radius: 4px;
padding: 0 3px;
font-weight: bolder;
float: left;
margin-right: 6px;
}
.r-item .preview {
display: block;
float: left;
position: relative;
margin-right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.r-item .preview img {
width: 40px;
height: 40px;
}
.tab-item.rank .r-item .r-i {
width: 180px;
}
.tab-item .r-item .r-i {
float: left;
width: 205px;
}
.r-item .r-i-t {
line-height: 16px;
overflow: hidden;
}
.r-item .r-i-t .u-name {
max-width: 135px;
float: left;
color: #222;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.r-item .r-i:hover .u-name {
color: #00a1d6;
}
.r-item .r-i-t .u-online {
max-width: 60px;
float: right;
color: #99a2aa;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.r-item .r-i-t .u-online i {
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-top: -2px;
background: url(../images/live-eye.11838cd.png) no-repeat;
}
em {
font-style: normal;
font-weight: 400;
}
.r-item .r-i-st {
margin-top: 4px;
color: #99a2aa;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 190px;
}
/*关注的主播*/
.load-state {
text-align: center;
padding: 10px 0;
color: #99a2aa;
height: 100%;
display: table;
width: 100%;
}
.load-state span {
vertical-align: middle;
display: table-cell;
}
.load-state span.empty:before {
background-position: center -598px;
}
.load-state span:before {
text-align: center;
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background-image: url(../images/empty-icon.c07d839.png);
background-repeat: no-repeat;
margin-right: 5px;
margin-top: -3px;
}
/*为你推荐部分轮播图*/
.tuijian {
border-radius: 4px;
overflow: hidden;
}
.tab-con .tab-item {
width: 260px;
float: left;
}
.tuijian .slider-box {
height: 248px;
}
.carousel-module,
.carousel-module .panel {
position: relative;
width: 100%;
height: 100%;
}
.slider .panel {
border-radius: 4px;
}
.carousel-module .panel {
overflow: hidden;
}
.carousel-module .panel {
position: relative;
width: 100%;
height: 100%;
}
.carousel-module .panel .pic {
z-index: 1;
position: relative;
transition: all .3s;
}
.carousel-module .panel .scrollx {
float: left;
}
.tuijian .slider .title {
height: 51px;
line-height: 30px;
font-size: 12px;
}
.carousel-module .panel .title {
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
font-size: 14px;
}
.tuijian .slider .title a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.carousel-module .panel .title a {
position: absolute;
width: 100%;
color: #fff;
text-decoration: none;
padding-left: 10px;
opacity: 0;
z-index: -1;
transition: all 0.3s;
}
.carousel-module .panel .title a.on {
opacity: 1;
z-index: 1;
}
/*轮播图下方按钮*/
.tuijian .slider .panel .trig {
bottom: 0;
right: 0;
width: 100%;
text-align: center;
padding: 5px 0;
background: rgba(0, 0, 0, 0.4);
}
.carousel-module .panel .trig {
position: absolute;
z-index: 3;
bottom: 6px;
right: 20px;
}
.carousel-module .panel .trig span {
height: 6px;
}
.carousel-module .panel .trig span {
display: inline-block;
width: 10px;
margin-left: 8px;
border-radius: 10px;
background: #fff;
cursor: pointer;
transition: all 0.3s;
}
.carousel-module .panel .trig span.on {
width: 30px;
background: #f45d8f;
}
/*小轮播图下方图片*/
.tab-con .tuijian .anchor .pic {
margin-top: 20px;
display: inline-block;
}
/*动画部分*/
#douga .l-con .tabs {
float: left;
margin: 0 10px 0 0;
}
.headline .icon_t.icon-douga {
background-position: -141px -908px;
}
.zone-title .headline .fire {
margin-top: 2px;
margin-left: 30px;
padding-right: 10px;
color: #6d757a;
float: left;
max-width: 214px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*鼠标滑过显示遮罩*/
.list-item:hover .mask-video,
.list-item:hover .dur {
opacity: 1;
}
.list-item:hover .later-icon {
display: block;
}
.lazy-img {
width: 100%;
height: 100%;
display: inline-block;
}
.list-item .pic img {
margin: 0 auto;
outline: 0;
}
.num .play .icon {
background-position: -282px -90px;
}
.num .danmu .icon {
background-position: -282px -218px;
}
/*动画左侧选项卡部分*/
.tab-content {
position: relative;
}
.tab-content .list-box {
position: absolute;
left: 0;
top: 0;
display: none;
}
.tab-content .list-box.active {
display: block;
}
/*动画右侧部分*/
.rank-head h3 {
float: left;
font-size: 18px;
font-weight: 400;
}
.rank-head .tabs {
float: left;
margin-left: 10px;
}
.rank-head .rank-dropdown {
float: right;
}
.bili-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
background-color: #fff;
cursor: default;
padding: 0 7px;
height: 22px;
line-height: 22px;
border: 1px solid #ccd0d7;
border-radius: 4px;
}
.bili-dropdown .selected {
display: inline-block;
vertical-align: top;
}
.icon-arrow-down {
background-position: -475px -157px;
display: inline-block;
vertical-align: middle;
width: 12px;
height: 6px;
margin-left: 5px;
margin-top: -1px;
}
.dropdown-list {
position: absolute;
width: 100%;
background: #fff;
border: 1px solid #ccd0d7;
border-top: 0;
left: -1px;
top: 22px;
z-index: 10;
display: none;
border-radius: 0 0 4px 4px;
}
.dropdown-list .dropdown-item {
cursor: pointer;
margin: 0;
padding: 3px 7px;
}
.r-con {
overflow: hidden;
}
.rank-list-wrap {
width: 200%;
zoom: 1;
transition: all .2s linear;
}
.rank-list-wrap .rank-list {
padding-bottom: 15px;
min-height: 278px;
padding-top: 20px;
position: relative;
width: 50%;
float: left;
}
.rank-list .rank-item {
position: relative;
padding-left: 25px;
margin-top: 20px;
overflow: hidden;
}
.rank-list .rank-item.first {
margin-top: 0;
}
.rank-list .rank-item.highlight .ri-num {
background: #f25d8e;
}
.rank-list .rank-item .ri-num {
position: absolute;
color: #fff;
height: 18px;
line-height: 18px;
top: 0;
left: 0;
font-size: 12px;
min-width: 12px;
text-align: center;
background-color: #b8c0cc;
border-radius: 4px;
padding: 0 3px;
font-weight: bolder;
font-style: normal;
}
.rank-item .ri-info-wrap {
position: relative;
display: block;
cursor: pointer;
}
.rank-item.show-detail .ri-info-wrap {
height: 50px;
}
.rank-list .rank-item.show-detail .ri-preview {
display: block;
}
.rank-list .rank-item .ri-preview {
margin-right: 5px;
width: 80px;
height: 50px;
float: left;
display: none;
border-radius: 4px;
overflow: hidden;
}
.rank-item .ri-detail {
float: left;
}
.rank-item.show-detail .ri-detail .ri-title {
height: 36px;
line-height: 18px;
margin-top: -3px;
width: 150px;
padding: 0;
}
.ri-detail .ri-point {
line-height: 12px;
color: #99a2aa;
height: 12px;
margin-top: 5px;
display: none;
overflow: hidden;
}
.rank-item.show-detail .ri-point {
display: block;
}
.rank-item .ri-info-wrap .later-icon {
right: 160px;
z-index: 100;
}
.rank-item:hover .ri-info-wrap .later-icon {
display: block;
}
.rank-item:hover .ri-detail .ri-title {
color: #00a1d6;
}
.rank-item .ri-detail .ri-title {
line-height: 18px;
height: 18px;
overflow: hidden;
color: #222;
}
/*查看更多按钮*/
.r-con .more-link {
display: block;
height: 24px;
line-height: 24px;
background-color: #e5e9ef;
text-align: center;
border: 1px solid #e0e6ed;
color: #222;
border-radius: 4px;
transition: 0.2s;
}
.r-con .more-link:hover {
background-color: #D1D5DC;
}
/*番剧部分*/
#bangumi {
margin-top: 30px;
}
.headline .icon_t.icon-bangumi {
background-position: -141px -140px;
}
.headline {
position: relative;
}
#bangumi .headline {
padding-bottom: 0;
}
#bangumi .headline .bili-tab {
float: left;
width: 470px;
height: 30px;
}
#bangumi .bili-tab .bili-tab-item {
width: 48px;
text-align: center;
margin: 0;
padding: 2px 4px 7px;
}
.bili-tab .bili-tab-item {
float: left;
position: relative;
height: 20px;
line-height: 20px;
font-size: 18px;
cursor: pointer;
padding: 1px 0 2px;
border-bottom: 1px solid #E5E9EF;
margin-left: 12px;
transition: .2s;
transition-property: border, color;
}
.headline .bili-tab .bili-tab-item.on {
border-color: #00a1d6;
}
.headline .c-clink {
position: absolute;
right: 20px;
top: -7px;
border: 1px solid #f25d8e;
width: 104px;
height: 34px;
line-height: 34px;
text-align: center;
color: #f25d8e;
font-size: 14px;
border-radius: 4px;
transition: .1s;
}
.headline .c-clink .icon {
display: inline-block;
vertical-align: middle;
background-position: -478px -281px;
width: 6px;
height: 12px;
margin: -2px 0 0 5px;
}
.headline .c-clink:hover {
background-color: #f25d8e;
color: #fff;
}
.headline .c-clink:hover .icon {
background-position: -541px -218px;
}
/*左侧时间表*/
.timing-box {
position: relative;
margin: 26px 20px 40px 0;
height: 398px;
overflow-y: auto;
padding: 0;
}
.card-timing:first-child,
.card-timing:nth-child(2),
.card-timing:nth-child(3) {
padding-top: 0;
}
.card-timing {
float: left;
width: 180px;
padding: 36px 46px 0 0;
}
.card-timing-module .pic {
width: 72px;
height: 72px;
margin-right: 12px;
display: block;
float: left;
position: relative;
overflow: hidden;
border-radius: 4px;
}
.card-timing-module .pic img {
width: 72px;
height: 72px;
}
.card-timing-module .r-text {
float: left;
width: 96px;
height: 72px;
position: relative;
}
.card-timing-module .r-text .update {
position: absolute;
bottom: 0;
text-align: left;
margin-top: 2px;
color: #aaa;
left: 0;
white-space: nowrap;
line-height: 18px;
}
.card-timing-module .r-text .update a {
color: #fff;
border-radius: 9px;
display: inline-block;
vertical-align: top;
text-align: center;
padding: 0 4px;
height: 18px;
line-height: 18px;
min-width: 28px;
max-width: 82px;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 5px;
background: #b8c0cc;
}
.card-timing-module .r-text .update.on a {
background: #ff8eb3;
}
.card-timing-module .r-text .t:hover {
color: #00a1d6;
}
.bangumi-rank-list .rank-item {
position: relative;
padding-left: 25px;
margin-top: 20px;
overflow: hidden;
}
.bangumi-rank-list .rank-item:first-child {
margin-top: 0;
}
.bangumi-rank-list .rank-item .ri-num {
position: absolute;
color: #fff;
height: 18px;
line-height: 18px;
top: 0;
left: 0;
font-size: 12px;
min-width: 12px;
text-align: center;
background-color: #b8c0cc;
border-radius: 4px;
padding: 0 3px;
font-weight: bolder;
font-style: normal;
}
.bangumi-rank-list .rank-item.highlight .ri-num {
background: #f25d8e;
}
.bangumi-rank-list .rank-item .ri-info-wrap {
cursor: pointer;
}
.bangumi-rank-list .rank-item .ri-title {
white-space: nowrap;
text-overflow: ellipsis;
max-width: 144px;
line-height: 18px;
vertical-align: top;
color: #222;
display: inline-block;
overflow: hidden;
}
.bangumi-rank-list .rank-item .ri-total {
display: inline-block;
vertical-align: top;
color: #99a2aa;
margin-left: 10px;
}
/*番剧部分左侧选项卡*/
.timing-box-con {
position: relative;
}
.timing-box.custom-scrollbar {
position: absolute;
left: 0;
top: 0;
display: none;
}
.timing-box.custom-scrollbar.active {
display: block;
}
/*番剧动态部分*/
/*右侧轮播图*/
#bangumi_news .r-con .rank-head {
margin-bottom: 14px;
}
#bangumi_news .carousel-module .title {
font-size: 12px;
line-height: 40px;
height: 35px;
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .5));
}
#bangumi_news {
padding-bottom: 50px;
}
#bangumi_news .zone-title .name {
font-size: 18px !important;
}
#bangumi_news .zone-title .name:hover {
color: #00a1d6;
}
/*页脚部分*/
.footer {
width: 100%;
padding-top: 20px;
color: #99a2aa;
text-align: center;
font-size: 12px;
}
.footer-wrap {
background-color: #f6f9fa;
padding-top: 40px;
padding-bottom: 40px;
}
.footer-cnt {
width: 980px;
margin: 0 auto;
}
.boston-postcards {
list-style: none;
margin: 0 auto;
float: left;
margin-bottom: 30px;
}
.boston-postcards li {
float: left;
text-align: left;
list-style: none;
width: 300px;
height: 112px;
padding-right: 25px;
padding-left: 24px;
line-height: 1;
border-left: solid 1px #e5e9ef;
font-size: 14px;
}
.boston-postcards li:first-child {
border-left: 0;
padding-left: 0!important;
}
.boston-postcards li:last-child {
width: 280px;
padding-right: 0;
}
.boston-postcards li .tips {
margin-bottom: 22px;
}
.boston-postcards li .cards {
float: left;
width: 100px;
position: relative;
margin-bottom: 16px;
}
.cards a:hover {
color: #00a1d6;
}
/*合作伙伴*/
.footer .partner {
padding: 0;
text-align: left;
margin: 0 auto;
height: 80px;
}
.partner .left {
float: left;
line-height: 24px;
}
.partner .partner-banner {
background: url(../images/partner.png) no-repeat;
width: 100px;
height: 80px;
}
.footer p,
.footer span {
margin: 0;
padding: 0;
}
/*右侧二维码部分*/
.block.right .phone .pic {
background: url(../images/icons.d895b84.png) no-repeat -1024px -194px;
}
.block.right .phone .pic:hover {
background-position: -1090px -194px;
}
.block.right .weibo .pic:hover {
background-position: -1090px -322px;
}
.block.right .weibo .pic {
background: url(../images/icons.d895b84.png) no-repeat -1024px -322px;
}
.block.right .weixin .pic {
color: #222;
background: url(../images/icons.d895b84.png) no-repeat -1024px -66px;
}
.footer .block.right .pic {
position: relative;
margin-left: 11px;
width: 60px;
height: 60px;
}
.footer .right {
float: left;
}
.footer a {
outline: none;
text-decoration: none;
cursor: pointer;
}
.block.right div {
position: relative;
width: 82px;
height: 80px;
float: left;
}
.block.right em {
position: absolute;
width: 82px;
line-height: 14px;
float: left;
bottom: 0;
left: 0;
text-align: center;
font-weight: normal;
}
.block.right .qrcode-box-wrp {
width: 130px;
height: 130px;
background: #fff;
margin-top: -146px;
right: -23px;
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.2s;
z-index: 100000;
}
.footer .block.right a>div:hover>.qrcode-box-wrp {
visibility: visible;
opacity: 1;
}
.footer .block.right a>div:hover em {
color: #00a1d6;
}
.block.right .qrcode-box.qrcode-app {
width: 128px;
height: 128px;
border: 1px solid #e5e9ef;
}
.block.right .qrcode-box.qrcode-weibo {
width: 128px;
height: 128px;
border: 1px solid #e5e9ef;
}
/*手机APP二维码*/
.block.right .qrcode-box.qrcode-app {
background: url(../images/qrcode-app.png) center center no-repeat;
}
.block.right .qrcode-box .qrcode-box-arrow {
width: 130px;
height: 141px;
background: url(../images/qrcode-box-arrow.png) bottom center no-repeat;
}
/*微博二维码*/
.block.right .qrcode-box.qrcode-weibo {
background: url(../images/qrcode-weibo.png) center center no-repeat;
}
/*官方微信二维码*/
.block.right .bigvip-qrcode {
width: 260px;
height: 150px;
margin-top: -166px;
}
.block.right .bigvip-qrcode .qrcode-box {
width: 258px;
height: 148px;
border: 1px solid #e5e9ef;
}
.block.right .bigvip-qrcode .qrcode-box .qrcode-box-arrow {
margin-left: 128px;
margin-top: 20px;
}
.block.right .qrcode-box.qrcode-weixin {
background: url(../images/qrcode-weixin.gif) center center no-repeat;
}
.footer .icons-footer-report {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin-right: 3px;
background: url(../images/icons.d895b84.png) no-repeat;
background-position: -1367px -89px;
}
.partner .left a,
.footer .partner .right a {
color: #99a2aa;
}
.footer a img {
border: none;
}
.footer img {
border: none;
vertical-align: middle;
}
/*页面右侧固定导航栏*/
.elevator-module {
position: fixed;
left: 50%;
top: 232px;
margin-left: 590px;
transition: top 0.3s;
}
.elevator-module.editstate {
z-index: 10001;
}
@media screen and (max-width: 1400px) {
.elevator-module {
margin-left: 500px;
}
}
/*右侧固定导航栏隐藏背景图*/
.elevator-module .nav-bg {
opacity: 0;
top: -15px;
right: 0;
height: 100%;
padding-bottom: 20px;
width: 60px;
position: absolute;
background: hsla(0, 0%, 100%, 0.8);
border-radius: 4px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.elevator-module .nav-bg .tips-img {
position: absolute;
width: 117px;
height: 333px;
background: url(../images/tab2233.6556ae0.png);
left: 12px;
top: 14px;
}
.elevator-module .nav-list {
position: relative;
background-color: #f6f9fa;
border: 1px solid #e5e9ef;
overflow: hidden;
border-radius: 4px;
}
.elevator-module .nav-list .item {
width: 48px;
height: 32px;
line-height: 32px;
text-align: center;
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.elevator-module .nav-list .item.on,
.elevator-module .nav-list .item:hover {
background-color: #00a1d6;
color: #fff
}
/*排序*/
.elevator-module .nav-list .customize {
height: 38px;
line-height: 20px;
padding: 8px 0;
border-top: 1px solid #e5e9ef
}
.elevator-module .nav-list .customize:hover {
color: #fff
}
.elevator-module .nav-list .customize:hover .icon {
background-position: -727px -151px
}
.elevator-module .nav-list .customize .icon {
display: block;
margin: 0 auto 4px;
background-position: -663px -151px;
height: 18px;
width: 18px
}
.elevator-module .sep-line {
position: relative;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
height: 9px;
width: 30px;
margin: 0 auto;
}
/*返回顶部*/
.elevator-module .back-top {
position: relative;
display: block;
cursor: pointer;
height: 48px;
background-position: -648px -72px;
background-color: #f6f9fa;
border: 1px solid #e5e9ef;
overflow: hidden;
border-radius: 4px;
}
.elevator-module .back-top:hover {
background-color: #00a1d6;
background-position: -714px -72px;
border-color: #00a1d6
}
/*APP下载*/
.elevator-module .app-download {
position: relative;
width: 50px;
height: 70px;
}
.elevator-module .app-download .app-icon {
position: absolute;
left: -15px;
width: 80px;
height: 80px;
background-image: url(../images/app-download.4e2e397.png);
}
.elevator-module .app-download .app-tips-icon {
display: none;
position: absolute;
left: -110px;
top: -20px;
width: 106px;
height: 44px;
background-image: url(../images/app-download-tips.38d6c39.png);
}
/*全页面遮罩，点击右侧固定导航栏 排序 按钮时显示*/
.elevator-mask {
position: fixed;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 10000;
top: 0;
left: 0;
}
评论记录：
回复评论：