js代码
$(function () {
$li=$('<li></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代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蘑菇视频</title>
<meta name="description" content="国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。">
<meta name="keywords" content="弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid">
<link rel="shortcut icon" href="images/favicon.ico">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="topcontainer"><!-- 头部开始 -->
<div class="topbar"><!-- topbar部分开始 -->
<div class="topmain wrapper-min clearFix">
<div class="topnav fl"><!-- 头部左侧导航开始 -->
<ul>
<li class="home">
<a href="#" class="t-links" id="zhu">主站</a>
</li>
<li>
<a href="#" class="t-links">番剧</a>
</li>
<li>
<a href="#" class="t-links">游戏中心</a>
</li>
<li>
<a href="#" class="t-links">直播</a>
</li>
<li>
<a href="#" class="t-links">会员购</a>
</li>
<li>
<a href="#" class="t-links">漫画</a>
</li>
<li>
<a href="#" class="t-links">赛事</a>
</li>
<li>
<a href="#" class="t-links">下载APP</a>
</li>
</ul>
</div><!-- 头部左侧导航结束 -->
<div class="search fl"><!-- 右侧搜索框部分开始 -->
<form class="searchform">
<input class="search-box" type="text" name="" placeholder="开学（x）继续睡觉（√）" />
<button class="submit fl"></button>
</form>
</div><!-- 右侧搜索框部分结束 -->
<div class="topright fr">
<ul>
<li>
<a href="#" class="t-links">大会员</a>
</li>
<li>
<a href="#" class="t-links">消息</a>
</li>
<li>
<a href="#" class="t-links">动态</a>
</li>
<li>
<a href="#" class="t-links">收藏</a>
</li>
<li>
<a href="#" class="t-links">历史记录</a>
</li>
<li>
<a href="#" class="t-links">创作中心</a>
</li>
<li class="post">
<a href="#">投稿</a>
</li>
</ul>
</div>
</div>
</div><!-- topbar部分结束 -->
</div><!-- 头部结束 -->
<div class="main-container">
<div class="main wrapper"><!-- 页面主体部分开始 -->
<div class="nav"><!-- 主导航部分开始 -->
<ul class="clearFix">
<li class="nav-item home">
<a class="nav-link" href="#">
<div class="nav-name">主页</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">500</span>
</div>
<div class="nav-name">动画</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>MAD·AMV</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>MMD·3D</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>短片·手书·配音</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>综合</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">60</span>
</div>
<div class="nav-name">番剧</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>连载动画</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>完结动画</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>资讯</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>官方延伸</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>新番时间表</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>番剧索引</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">46</span>
</div>
<div class="nav-name">国创</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>国产动画</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>国产原创相关</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>布袋戏</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>资讯</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>新番时间表</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>国产动画索引</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">898</span>
</div>
<div class="nav-name">音乐</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>原创音乐</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>翻唱</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>VOCALOID·UTAU</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>演奏</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>三次元音乐</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>OP/ED/OST</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>音乐选集</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">120</span>
</div>
<div class="nav-name">舞蹈</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>宅舞</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>三次元舞蹈</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>舞蹈教程</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">999+</span>
</div>
<div class="nav-name">游戏</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>单机游戏</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>电子游戏</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>手机游戏</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>网络游戏</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>桌游棋牌</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>GMV</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>音游</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>Mugen</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">699</span>
</div>
<div class="nav-name">科技</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>纪录片</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>趣味科普人文</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>野生技术协会</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>演讲·公开课</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>星海</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>数码</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>机械</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">999+</span>
</div>
<div class="nav-name">生活</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>搞笑</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>日常</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>美食圈</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>动物圈</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>手工</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>绘画</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>运动</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>其他</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">51</span>
</div>
<div class="nav-name">鬼畜</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>鬼畜调教</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>音MAD</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>人力VOCALOID</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>教程演示</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">294</span>
</div>
<div class="nav-name">时尚</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>美妆</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>服饰</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>健身</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>资讯</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">62</span>
</div>
<div class="nav-name">广告</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">903</span>
</div>
<div class="nav-name">娱乐</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>综艺</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>明星</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>Korea相关</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="num-wrap">
<span class="num">339</span>
</div>
<div class="nav-name">影视</div>
</a>
<ul class="sub-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>电影</span>
<i class="arrow"></i>
</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="#">
<span>电视剧</span>
<i class="arrow"></i>
</a>
</li>
</ul>
</li>
<li class="nav-item side-nav nav-square">
<a class="side-link" href="#">
<i class="square"></i>
<span>广场</span>
</a>
<div class="sub-nav square-wrap">
<ul>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="icon icon-activity"></i>
<span>活动中心</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="icon icon-game"></i>
<span>游戏中心</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="icon icon-news"></i>
<span>新闻中心</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="icon icon-hy"></i>
<span>画友</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="icon icon-mango"></i>
<span>芒果TV</span>
</a>
</li>
</ul>
<div class="square-field">
<div class="square-pmt-item">
<a href="#" target="_blank" title="bilibili 活动">
<div class="lazy-img">
<img alt="" src="images/480w_168h.webp">
</div>
</a>
</div>
<div class="square-pmt-item">
<a href="#" target="_blank" title="话题列表">
<div class="lazy-img">
<img alt="" src="images/480w_168h02.webp">
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item side-nav nav-square">
<a class="side-link" href="#">
<i class="live"></i>
<span>直播</span>
</a>
<div class="sub-nav nav-live">
<ul class="fl">
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>推荐主播</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>生活娱乐</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>绘画专区</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>唱见舞见</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>御宅文化</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>单机联机</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>网络游戏</span>
</a>
</li>
<li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>电子竞技</span>
</a>
</li><li class="sub-nav-item">
<a href="" class="sub-nav-link">
<i class="arrow"></i>
<span>手游直播</span>
</a>
</li>
</ul>
<div class="live-field fl">
<a target="_blank" href="#" class="pic">
<img src="images/wh2.b3a4614.png" alt="有文画">
</a>
<a target="_blank" href="//vc.bilibili.com" class="pic">
<img src="images/sp2.61d42f1.png" alt="小视频">
</a>
</div>
<div class="square-field"></div>
</div>
</li>
<li class="nav-item side-nav nav-square">
<a class="side-link" href="#">
<i class="blackroom"></i>
<span>小黑屋</span>
</a>
</li>
</ul>
<div class="gif-menu nav-gif">
<a href="#" target="_blank" title="熊猫" class="random-p">
<img src="images/gif.gif" alt="">
</a>
</div>
</div><!-- 主导航部分结束 -->
<div class="topbox clearFix"><!-- 顶部轮播图部分开始 -->
<div class="slidebox banner fl">
<ul class="img clearFix">
<li>
<a href="#">
<img src="images/01.webp" alt="">
</a>
<a class="slide-title" href="#">更新活动介绍！</a>
</li>
<li>
<a href="#">
<img src="images/02.webp" alt="">
</a>
<a class="slide-title" href="#">《碧蓝航线》全新活动开启</a>
</li>
<li>
<a href="#">
<img src="images/03.webp" alt="">
</a>
<a class="slide-title" href="#">夏天到了，变可爱魔法~</a>
</li>
<li>
<a href="#">
<img src="images/04.webp" alt="">
</a>
<a class="slide-title" href="#">收膝盖时间到~</a>
</li>
<li>
<a href="#">
<img src="images/05.webp" alt="">
</a>
<a class="slide-title" href="#">上影节特辑2！还有抽奖哦！</a>
</li>
</ul>
<a class="more-text">更多 ></a>
<ul class="num">
</ul>
</div>
<div class="r-topbox fl">
<ul class="r-t-list clearFix">
<li>
<a href="#" title="【第9回东方NICO童祭】暁Records / 秘封俱乐部【东方PV】">
<div class="lasy-img">
<img src="images/r-t-list01.webp" alt="【第9回东方NICO童祭】暁Records / 秘封俱乐部【东方PV】">
</div>
<div class="card-mark">
<p class="title">【第9回东方NICO童祭】暁Records / 秘封俱乐部【东方PV】</p>
<p class="author">up主：伊吹小秋</p>
<p class="play">播放：3.2万</p>
</div>
</a>
<div class="later-icon"></div>
</li>
<li>
<a href="#" title="【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？">
<div class="lasy-img">
<img src="images/r-t-list02.webp" alt="【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？">
</div>
<div class="card-mark">
<p class="title">【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？</p>
<p class="author">up主：尕丶天堂</p>
<p class="play">播放：9.4万</p>
</div>
</a>
<div class="later-icon"></div>
</li>
<li>
<a href="#" title="【凹凸世界手书】MAD HEAD LOVE【安雷】">
<div class="lasy-img">
<img src="images/r-t-list03.webp" alt="【凹凸世界手书】MAD HEAD LOVE【安雷】">
</div>
<div class="card-mark">
<p class="title">【凹凸世界手书】MAD HEAD LOVE【安雷】</p>
<p class="author">up主：濑见驰</p>
<p class="play">播放：2.5万</p>
</div>
</a>
<div class="later-icon"></div>
</li>
<li>
<a href="#" title="【嘉瑞】妄想感傷代償連盟">
<div class="lasy-img">
<img src="images/r-t-list04.webp" alt="【嘉瑞】妄想感傷代償連盟">
</div>
<div class="card-mark">
<p class="title">【嘉瑞】妄想感傷代償連盟</p>
<p class="author">up主：灼熱射線</p>
<p class="play">播放：8752</p>
</div>
</a>
<div class="later-icon"></div>
</li>
<li>
<a href="#" title="【碧蓝航线MMD/60帧】新来的 来给提督跳个桃园恋歌">
<div class="lasy-img">
<img src="images/r-t-list05.webp" alt="【碧蓝航线MMD/60帧】新来的 来给提督跳个桃园恋歌">
</div>
<div class="card-mark">
<p class="title">【碧蓝航线MMD/60帧】新来的 来给提督跳个桃园恋歌</p>
<p class="author">up主：菌冷</p>
<p class="play">播放：5.8万</p>
</div>
</a>
<div class="later-icon"></div>
</li>
<li>
<a href="#" title="【兄贵】埃罗芒♂啊老师ED">
<div class="lasy-img">
<img src="images/r-t-list06.webp" alt="【兄贵】埃罗芒♂啊老师ED">
</div>
<div class="card-mark">
<p class="title">【兄贵】埃罗芒♂啊老师ED</p>
<p class="author">up主：工口咖啡师</p>
<p class="play">播放：12.7万</p>
</div>
</a>
<div class="later-icon"></div>
</li>
</ul>
</div>
</div><!-- 顶部轮播图部分结束 -->
<div class="popular clearFix"><!-- 推广部分开始 -->
<div class="l-con"><!-- 推广左边部分开始 -->
<div class="headline clearFix">
<i class="icon icon_t icon-promote"></i><span class="name">推广</span>
<a href="#" target="_blank" class="fire">来来来！跟着BDF学地理看风景啦</a>
</div>
<div class="pro-list"><!-- 推广列表部分开始 -->
<div class="pro-item">
<a href="#">
<div class="pic">
<div class="lasy-img">
<img src="images/pro-list01.webp" alt="【天谕/全职业萝莉】和萝莉一起玩耍才是正经事">
</div>
<div class="mask-video"></div>
<span class="dur">04:59</span>
<img src="images/cm_1.b0dd15f.png" class="gg-pic">
<div class="later-icon"></div>
</div>
<p title="【天谕/全职业萝莉】和萝莉一起玩耍才是正经事" class="t">【天谕/全职业萝莉】和萝莉一起玩耍才是正经事</p>
</a>
</div>
<div class="pro-item">
<a href="#">
<div class="pic">
<div class="lasy-img">
<img src="images/pro-list02.webp" alt="进去随便跑跑就能让人心旷神怡的赛车游戏，风景美不胜收">
</div>
<div class="mask-video"></div>
<span class="dur">04:00</span>
<div class="later-icon"></div>
</div>
<p title="进去随便跑跑就能让人心旷神怡的赛车游戏，风景美不胜收" class="t">进去随便跑跑就能让人心旷神怡的赛车游戏，风景美不胜收</p>
</a>
</div>
<div class="pro-item">
<a href="#">
<div class="pic">
<div class="lasy-img">
<img src="images/pro-list03.webp" alt="【芜湖大司马单曲】你若成皮">
</div>
<div class="mask-video"></div>
<span class="dur">03:14</span>
<div class="later-icon"></div>
</div>
<p title="【芜湖大司马单曲】你若成皮" class="t">【芜湖大司马单曲】你若成皮</p>
</a>
</div>
<div class="pro-item">
<a href="#">
<div class="pic">
<div class="lasy-img">
<img src="images/pro-list04.webp" alt="【第9回东方NICO童祭】暁Records / 秘封俱乐部【东方PV】">
</div>
<div class="mask-video"></div>
<span class="dur">04:19</span>
<div class="later-icon"></div>
</div>
<p title="【第9回东方NICO童祭】暁Records / 秘封俱乐部【东方PV】" class="t">【第9回东方NICO童祭】暁Records / 秘封俱乐部【东方PV】</p>
</a>
</div>
</div><!-- 推广列表部分结束 -->
</div><!-- 推广左边部分结束 -->
<div class="r-con"><!-- 推广右边部分开始 -->
<div class="online">
<a href="#" title="在线观看：966409">观看列表</a>
</div>
<div class="adpos">
<a href="">
<div class="lasy-img">
<img src="images/pro-list05.webp" alt="八周年生日祭，献上游戏福利">
</div>
</a>
</div>
</div><!-- 推广右边部分结束 -->
</div><!-- 推广部分结束 -->
<div id="live" class="zone-wrap clearFix"><!-- 直播部分开始 -->
<div class="live-con clearFix">
<div class="gg-floor"><!-- 直播顶部广告开始 -->
<a href="#">
<img src="images/ad-banner01.webp">
</a>
</div><!-- 直播顶部广告结束 -->
<div class="l-con"><!-- 直播左侧部分开始 -->
<div class="zone-title"><!-- 标题区域开始 -->
<div class="headline clearFix">
<i class="icon icon_t icon-live"></i>
<a href="#" class="name">正在直播</a>
<p class="online">当前共有<span>4544</span>个在线直播</p>
<a href="#" class="link-more">更多
<i class="icon"></i>
</a>
<div class="read-push">
<i class="icon icon_read"></i>
<span class="info">
换一换
</span>
</div>
</div>
</div><!-- 标题区域结束 -->
<div class="list-box"><!-- 直播列表部分开始 -->
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="唱歌唱歌！( ω｀)" src="images/live-list01.webp">
</div>
<span class="type">唱见舞见</span>
<div class="mask">
<div class="lazy-img face">
<img alt="" src="images/live-avatar01.webp">
</div>
<span class="onair">
<i></i>Live
</span>
</div>
</div>
<p title="唱歌唱歌！( ω｀)" class="t">唱歌唱歌！( ω｀)</p>
<p class="num">
<span class="auther">
<i class="icon"></i>sakamakiryoryo
</span>
<span class="online">
<i class="icon"></i>1.0万
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【坂本】射豹" src="images/live-list02.webp">
</div>
<span class="type">单机联机</span>
<div class="mask">
<div class="lazy-img face">
<img alt="" src="images/live-avatar02.webp">
</div>
<span class="onair">
<i></i>Live
</span>
</div>
</div>
<p title="【坂本】射豹" class="t">【坂本】射豹</p>
<p class="num">
<span class="auther">
<i class="icon"></i>坂本叔
</span>
<span class="online">
<i class="icon"></i>2.8万
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="自定义时间！【绝地求生大逃杀】" src="images/live-list03.webp">
</div>
<span class="type">单机联机</span>
<div class="mask">
<div class="lazy-img face">
<img alt="" src="images/live-avatar03.webp">
</div>
<span class="onair">
<i></i>Live
</span>
</div>
</div>
<p title="自定义时间！【绝地求生大逃杀】" class="t">自定义时间！【绝地求生大逃杀】</p>
<p class="num">
<span class="auther">
<i class="icon"></i>铃花
</span>
<span class="online">
<i class="icon"></i>249
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="我也算个声优暖吧" src="images/live-list04.webp">
</div>
<span class="type">电子竞技</span>
<div class="mask">
<div class="lazy-img face">
<img alt="" src="images/live-avatar04.webp">
</div>
<span class="onair">
<i></i>Live
</span>
</div>
</div>
<p title="我也算个声优暖吧" class="t">我也算个声优暖吧</p>
<p class="num">
<span class="auther">
<i class="icon"></i>苏暖小污婆
</span>
<span class="online">
<i class="icon"></i>1.4万
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="突然出现 ヽ(`Д´)ﾉ" src="images/live-list05.webp">
</div>
<span class="type">唱见舞见</span>
<div class="mask">
<div class="lazy-img face">
<img alt="" src="images/live-avatar05.webp">
</div>
<span class="onair">
<i></i>Live
</span>
</div>
</div>
<p title="突然出现 ヽ(`Д´)ﾉ" class="t">突然出现 ヽ(`Д´)ﾉ</p>
<p class="num">
<span class="auther">
<i class="icon"></i>wuli浅浅
</span>
<span class="online">
<i class="icon"></i>1197
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="赛季末的最后咸鱼挣扎" src="images/live-list06.webp">
</div>
<span class="type">生活娱乐</span>
<div class="mask">
<div class="lazy-img face">
<img alt="" src="images/live-avatar06.webp">
</div>
<span class="onair">
<i></i>Live
</span>
</div>
</div>
<p title="赛季末的最后咸鱼挣扎" class="t">赛季末的最后咸鱼挣扎</p>
<p class="num">
<span class="auther">
<i class="icon"></i>良太也想要
</span>
<span class="online">
<i class="icon"></i>1904
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="守望先锋B站最强安娜" src="images/live-list07.webp">
</div>
<span class="type">网络游戏</span>
<div class="mask">
<div class="lazy-img face">
<img alt="" src="images/live-avatar07.webp">
</div>
<span class="onair">
<i></i>Live
</span>
</div>
</div>
<p title="守望先锋B站最强安娜" class="t">守望先锋B站最强安娜</p>
<p class="num">
<span class="auther">
<i class="icon"></i>瞬间爆炸型LowSing
</span>
<span class="online">
<i class="icon"></i>3685
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="超aSMr日语娇吟=99壁咚/10超级咚❤圣地巡游" src="images/live-list08.webp">
</div>
<span class="type">网络游戏</span>
<div class="mask">
<div class="lazy-img face">
<img alt="" src="images/live-avatar08.gif">
</div>
<span class="onair">
<i></i>Live
</span>
</div>
</div>
<p title="超aSMr日语娇吟=99壁咚/10超级咚❤圣地巡游" class="t">超aSMr日语娇吟=99壁咚/10超级咚❤圣地巡游</p>
<p class="num">
<span class="auther">
<i class="icon"></i>遥か～
</span>
<span class="online">
<i class="icon"></i>486
</span>
</p>
</a>
</div>
</div><!-- 直播列表部分结束 -->
</div><!-- 直播左侧部分结束 -->
<div class="r-con"><!-- 直播右侧部分开始 -->
<div class="tabs">
<div class="bili-tab-item on">直播排行</div>
<div class="bili-tab-item">关注的主播</div>
<div class="bili-tab-item">为你推荐</div>
</div>
<div class="tab-box"><!-- 选项卡盒子开始 -->
<div class="tab-con">
<div class="tab-item rank on"><!-- 直播排行开始 -->
<div class="r-item">
<span class="number">1</span>
<a href="#" class="preview">
<div class="lazy-img">
<img alt="" src="images/live-rank01.webp">
</div>
</a>
<a href="#">
<div class="r-i">
<p class="r-i-t">
<span class="u-name">淳色</span> <span class="u-online">
<i></i> <em>6.1万</em>
</span>
</p>
<div title="【荣耀一吹】牙不疼了，嘴巴交流" class="r-i-st">【荣耀一吹】牙不疼了，嘴巴交流</div>
</div>
</a>
</div>
<div class="r-item">
<span class="number">2</span>
<a href="#" class="preview">
<div class="lazy-img">
<img alt="" src="images/live-rank02.webp">
</div>
</a>
<a href="#">
<div class="r-i">
<p class="r-i-t">
<span class="u-name">坂本叔</span> <span class="u-online">
<i></i> <em>2.8万</em>
</span>
</p>
<div title="【坂本】射豹" class="r-i-st">【坂本】射豹</div>
</div>
</a>
</div>
<div class="r-item">
<span class="number">3</span>
<a href="#" class="preview">
<div class="lazy-img">
<img alt="" src="images/live-rank03.gif">
</div>
</a>
<a href="#">
<div class="r-i">
<p class="r-i-t">
<span class="u-name">心暖西瓜君</span> <span class="u-online">
<i></i> <em>2.6万</em>
</span>
</p>
<div title="心暖：B站气人主播，最后一天带皮直播" class="r-i-st">心暖：B站气人主播，最后一天带皮直播</div>
</div>
</a>
</div>
<div class="r-item">
<span class="number">4</span>
<a href="#" class="preview">
<div class="lazy-img">
<img alt="" src="images/live-rank04.webp">
</div>
</a>
<a href="#">
<div class="r-i">
<p class="r-i-t">
<span class="u-name">黑桐谷歌</span> <span class="u-online">
<i></i> <em>2.0万</em>
</span>
</p>
<div title="地平线 黎明时分 hard一周目" class="r-i-st">地平线 黎明时分 hard一周目</div>
</div>
</a>
</div>
<div class="r-item">
<span class="number">5</span>
<a href="#" class="preview">
<div class="lazy-img">
<img alt="" src="images/live-rank05.webp">
</div>
</a>
<a href="#">
<div class="r-i">
<p class="r-i-t">
<span class="u-name">神奇陆夫人</span> <span class="u-online">
<i></i> <em>2.3万</em>
</span>
</p>
<div title="英雄萨姆" class="r-i-st">英雄萨姆</div>
</div>
</a>
</div>
<div class="r-item">
<span class="number">6</span>
<a href="#" class="preview">
<div class="lazy-img">
<img alt="" src="images/live-rank06.webp">
</div>
</a>
<a href="#">
<div class="r-i">
<p class="r-i-t">
<span class="u-name">两仪滚</span> <span class="u-online">
<i></i> <em>1.8万</em>
</span>
</p>
<div title="【滚】狼人杀" class="r-i-st">【滚】狼人杀</div>
</div>
</a>
</div>
</div><!-- 直播排行结束 -->
<div class="tab-item">
<div class="load-state">
<span class="empty">没有数据(-_-#)</span>
</div>
</div>
<div class="tab-item tuijian"><!-- 为你推荐部分开始 -->
<div class="slider-box">
<div class="carousel-module slider">
<div class="panel">
<ul class="pic" style="width: 300%; margin-left: 0;">
<li class="scrollx on">
<a href="#">
<div class="lazy-img">
<img alt="" src="images/live-slide01.webp">
</div>
</a>
</li>
<li class="scrollx off">
<a href="#">
<div class="lazy-img">
<img alt="" src="images/live-slide02.webp">
</div>
</a>
</li>
<li class="scrollx off">
<a href="#">
<div class="lazy-img">
<img alt="" src="images/live-slide03.webp">
</div>
</a>
</li>
</ul>
<ul class="title">
<a href="#" class="on">最新活动上线，神秘组织出现？</a>
<a href="#" class="">直播12个挑战节目，就等你啦</a>
<a href="#" class="">拍摄小视频 领取b坷垃</a>
</ul>
<ul class="trig">
<span class="on"></span>
<span class=""></span>
<span class=""></span>
</ul>
</div>
</div>
</div>
<div class="anchor clearFix">
<a href="#" class="pic fl">
<img src="images/wh.e47004e.png" alt="有文画">
</a>
<a href="#" class="pic fr">
<img src="images/sp.b4bc4ee.png" alt="小视频">
</a>
</div>
</div><!-- 为你推荐部分结束 -->
</div>
</div><!-- 选项卡盒子结束 -->
</div><!-- 直播右侧部分结束 -->
</div>
</div><!-- 直播部分结束 -->
<div id="douga" class="zone-wrap clearFix"><!-- 动画部分开始 -->
<div class="l-con"><!-- 动画左侧部分开始 -->
<div class="zone-title"><!-- 标题区域开始 -->
<div class="headline clearFix">
<i class="icon icon_t icon-douga"></i>
<a href="#" class="name">动画</a>
<a href="#" class="link-more">更多
<i class="icon"></i>
</a>
<div class="read-push">
<i class="icon icon_read"></i>
<span class="info">
换一换
</span>
</div>
</div>
</div><!-- 标题区域结束 -->
<div class="tab-content">
<div class="list-box active"><!-- 动画列表部分开始 -->
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】" src="images/dh-list01.webp">
</div>
<div class="mask-video"></div>
<span class="dur">07:27</span>
<div class="later-icon"></div>
</div>
<p title="【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】" class="t">【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】</p>
<p class="num">
<span class="play">
<i class="icon"></i>7.2万
</span>
<span class="danmu">
<i class="icon"></i>2272
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集" src="images/dh-list02.webp">
</div>
<div class="mask-video"></div>
<span class="dur">17:54</span>
<div class="later-icon"></div>
</div>
<p title="那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集" class="t">那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集</p>
<p class="num">
<span class="play">
<i class="icon"></i>16.2万
</span>
<span class="danmu">
<i class="icon"></i>5738
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记" src="images/dh-list03.webp">
</div>
<div class="mask-video"></div>
<span class="dur">11:59</span>
<div class="later-icon"></div>
</div>
<p title="【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记" class="t">【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记</p>
<p class="num">
<span class="play">
<i class="icon"></i>73.3万
</span>
<span class="danmu">
<i class="icon"></i>7358
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]" src="images/dh-list04.webp">
</div>
<div class="mask-video"></div>
<span class="dur">10:16</span>
<div class="later-icon"></div>
</div>
<p title="[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]" class="t">[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]</p>
<p class="num">
<span class="play">
<i class="icon"></i>3.8万
</span>
<span class="danmu">
<i class="icon"></i>640
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="听说你们想要毒哥的腰。OK。【极乐净土】" src="images/dh-list05.webp">
</div>
<div class="mask-video"></div>
<span class="dur">03:39</span>
<div class="later-icon"></div>
</div>
<p title="听说你们想要毒哥的腰。OK。【极乐净土】" class="t">听说你们想要毒哥的腰。OK。【极乐净土】</p>
<p class="num">
<span class="play">
<i class="icon"></i>1975
</span>
<span class="danmu">
<i class="icon"></i>66
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【冰上的尤里】勇利决赛自由滑" src="images/dh-list06.webp">
</div>
<div class="mask-video"></div>
<span class="dur">08:48</span>
<div class="later-icon"></div>
</div>
<p title="【冰上的尤里】勇利决赛自由滑" class="t">【冰上的尤里】勇利决赛自由滑</p>
<p class="num">
<span class="play">
<i class="icon"></i>2511
</span>
<span class="danmu">
<i class="icon"></i>17
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【APH】奥利弗！现在从你房间里出来！" src="images/dh-list07.webp">
</div>
<div class="mask-video"></div>
<span class="dur">00:31</span>
<div class="later-icon"></div>
</div>
<p title="【APH】奥利弗！现在从你房间里出来！" class="t">【APH】奥利弗！现在从你房间里出来！</p>
<p class="num">
<span class="play">
<i class="icon"></i>1.4万
</span>
<span class="danmu">
<i class="icon"></i>89
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【新弹丸论破v3】在vocaloid曲中选择的印象曲集" src="images/dh-list08.webp">
</div>
<div class="mask-video"></div>
<span class="dur">28:38</span>
<div class="later-icon"></div>
</div>
<p title="【新弹丸论破v3】在vocaloid曲中选择的印象曲集" class="t">【新弹丸论破v3】在vocaloid曲中选择的印象曲集</p>
<p class="num">
<span class="play">
<i class="icon"></i>1402
</span>
<span class="danmu">
<i class="icon"></i>465
</span>
</p>
</a>
</div>
</div><!-- 动画列表部分结束 -->
</div>
</div><!-- 动画左侧部分结束 -->
<div class="r-con"><!-- 动画右侧部分开始 -->
<div class="rank-head clearFix">
<h3>排行</h3>
<div class="tabs clearFix">
<div class="bili-tab-item on">全部</div>
<div class="bili-tab-item">原创</div>
</div>
<div class="bili-dropdown rank-dropdown">
<span class="selected">三日</span>
<i class="icon icon-arrow-down"></i>
<ul class="dropdown-list">
<li class="dropdown-item" style="display: none;">三日</li>
<li class="dropdown-item">一周</li>
</ul>
</div>
</div>
<div class="rank-list-wrap clearFix"><!-- 选项卡盒子开始 -->
<ul class="rank-list hot-list">
<li class="rank-item show-detail first highlight">
<i class="ri-num">1</i>
<a href="#" title="【个人向】入宅10年，细数这些年换过的二次元老婆 播放:186378 38:16" class="ri-info-wrap clearfix">
<div class="lazy-img ri-preview">
<img alt="【个人向】入宅10年，细数这些年换过的二次元老婆" src="images/dh-rank01.webp">
</div>
<div class="ri-detail">
<p class="ri-title">【个人向】入宅10年，细数这些年换过的二次元老婆</p>
<p class="ri-point">综合评分：30.0万</p>
</div>
<div class="later-icon"></div>
</a>
</li>
<li class="rank-item highlight">
<i class="ri-num">2</i>
<a href="#" title="[Top10]十大最佳动作/奇幻/爱情/后宫动漫 播放:87109 4:23" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">[Top10]十大最佳动作/奇幻/爱情/后宫动漫</p>
<p class="ri-point">综合评分：19.2万</p>
</div>
</a>
</li>
<li class="rank-item highlight">
<i class="ri-num">3</i>
<a href="#" title="【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？ 播放:101854 5:40" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？</p>
<p class="ri-point">综合评分：18.5万</p>
</div>
</a>
</li>
<li class="rank-item">
<i class="ri-num">4</i>
<a href="#" title="千军易得，一将难求！且看五位御姐上将军帅酷拉风的一骑当千！~求各位看官老板打赏~老板大发财~~ 播放:76989 3:29" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">千军易得，一将难求！且看五位御姐上将军帅酷拉风的一骑当千！~求各位看官老板打赏~老板大发财~~</p>
<p class="ri-point">综合评分：16.0万</p>
</div>
</a>
</li>
<li class="rank-item">
<i class="ri-num">5</i>
<a href="#" title="【桃园恋歌x崩坏3】泳装芽衣/琪亚娜/德丽莎三人联合放毒 播放:66340 3:47" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">【桃园恋歌x崩坏3】泳装芽衣/琪亚娜/德丽莎三人联合放毒</p>
<p class="ri-point">综合评分：12.4万</p>
</div>
</a>
</li>
<li class="rank-item">
<i class="ri-num">6</i>
<a href="#" title="【废柴君】盘点动画中超污的糟糕台词！ 还有这种操作？ 播放:87291 10:16" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">【废柴君】盘点动画中超污的糟糕台词！ 还有这种操作？</p>
<p class="ri-point">综合评分：12.0万</p>
</div>
</a>
</li>
<li class="rank-item">
<i class="ri-num">7</i>
<a href="#" target="_blank" title="喜欢色色的图，但并不色情啊！《黄漫老师》完结吐槽 播放:63723 8:35" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">喜欢色色的图，但并不色情啊！《黄漫老师》完结吐槽</p>
<p class="ri-point">综合评分：11.8万</p>
</div>
</a>
</li>
</ul>
<ul class="rank-list origin-list">
<li class="rank-item show-detail first highlight">
<i class="ri-num">1</i>
<a href="#" title="【个人向】入宅10年，细数这些年换过的二次元老婆 播放:192109 38:16" class="ri-info-wrap clearfix">
<div class="lazy-img ri-preview">
<img alt="【个人向】入宅10年，细数这些年换过的二次元老婆" src="images/dh-rank01.webp">
</div>
<div class="ri-detail">
<p class="ri-title">【个人向】入宅10年，细数这些年换过的二次元老婆</p>
<p class="ri-point">综合评分：30.6万</p>
</div>
<div class="later-icon"></div>
</a>
</li>
<li class="rank-item highlight"><i class="ri-num">2</i>
<a href="#" title="【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？ 播放:104546 5:40" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">【宅语异闻录】从圈地自萌到大众二次元，脱宅离我们有多远？</p>
<p class="ri-point">综合评分：18.9万</p>
</div>
</a>
</li>
<li class="rank-item highlight">
<i class="ri-num">3</i>
<a href="#" target="_blank" title="千军易得，一将难求！且看五位御姐上将军帅酷拉风的一骑当千！~求各位看官老板打赏~老板大发财~~ 播放:78131 3:29" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">千军易得，一将难求！且看五位御姐上将军帅酷拉风的一骑当千！~求各位看官老板打赏~老板大发财~~</p>
<p class="ri-point">综合评分：16.2万</p>
</div>
</a>
</li>
<li class="rank-item">
<i class="ri-num">4</i>
<a href="#" title="【桃园恋歌x崩坏3】泳装芽衣/琪亚娜/德丽莎三人联合放毒 播放:68150 3:47" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">【桃园恋歌x崩坏3】泳装芽衣/琪亚娜/德丽莎三人联合放毒</p>
<p class="ri-point">综合评分：12.8万</p>
</div>
</a>
</li>
<li class="rank-item">
<i class="ri-num">5</i>
<a href="#" target="_blank" title="【碧蓝航线MMD/60帧】新来的 来给提督跳个桃园恋歌 播放:71468 3:55" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">【碧蓝航线MMD/60帧】新来的 来给提督跳个桃园恋歌</p>
<p class="ri-point">综合评分：12.4万</p>
</div>
</a>
</li>
<li class="rank-item">
<i class="ri-num">6</i>
<a href="#" target="_blank" title="【废柴君】盘点动画中超污的糟糕台词！ 还有这种操作？ 播放:90073 10:16" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">【废柴君】盘点动画中超污的糟糕台词！ 还有这种操作？</p> <p class="ri-point">综合评分：12.3万</p>
</div>
</a>
</li>
<li class="rank-item">
<i class="ri-num">7</i>
<a href="#" target="_blank" title="喜欢色色的图，但并不色情啊！《黄漫老师》完结吐槽 播放:64500 8:35" class="ri-info-wrap clearfix">
<div class="ri-detail">
<p class="ri-title">喜欢色色的图，但并不色情啊！《黄漫老师》完结吐槽</p>
<p class="ri-point">综合评分：11.9万</p>
</div>
</a>
</li>
</ul>
</div><!-- 选项卡盒子结束 -->
<a href="#" class="more-link">查看更多
<i class="icon icon-arrow-r"></i>
</a>
</div><!-- 动画右侧部分结束 -->
</div><!-- 动画部分结束 -->
<div id="bangumi" class="zone-wrap clearFix"><!-- 番剧部分开始 -->
<div class="l-con">
<div class="headline clearFix">
<i class="icon icon_t icon-bangumi"></i>
<a href="#" class="name">番剧</a>
<div class="bili-tab">
<div class="bili-tab-item on">最新</div>
<div class="bili-tab-item">一</div>
<div class="bili-tab-item">二</div>
<div class="bili-tab-item">三</div>
<div class="bili-tab-item">四</div>
<div class="bili-tab-item">五</div>
<div class="bili-tab-item">六</div>
<div class="bili-tab-item">日</div>
</div>
<a href="#" class="c-clink">新番时间表
<i class="icon"></i>
</a>
</div>
<div class="timing-box-con">
<div class="timing-box custom-scrollbar clearFix active">
<div class="card-timing-module clearfix card-timing">
<a href="#" title="覆面系 NOISE" class="pic">
<div class="lazy-img">
<img alt="覆面系 NOISE" src="images/bangumi01.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="覆面系 NOISE" class="t">覆面系 NOISE</a>
<p class="update on">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="偶像大师灰姑娘剧场" class="pic">
<div class="lazy-img">
<img alt="偶像大师灰姑娘剧场" src="images/bangumi02.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="偶像大师灰姑娘剧场" class="t">偶像大师灰姑娘剧场</a>
<p class="update on">
<span>更新至
<a href="#">13-2话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="少年阿贝 GO!GO!小芝麻 第二季" class="pic">
<div class="lazy-img">
<img alt="少年阿贝GO!GO!小芝麻 第二季" src="images/bangumi03.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="少年阿贝 GO!GO!小芝麻 第二季" class="t">少年阿贝 GO!GO!小芝麻 第二季</a>
<p class="update on">
<span>更新至
<a href="#">11话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" target="_blank" title="美妙天堂 偶像时间" class="pic">
<div class="lazy-img">
<img alt="美妙天堂 偶像时间" src="images/bangumi04.webp">
</div>
</a>
<div class="r-text">
<a href="#" target="_blank" title="美妙天堂 偶像时间" class="t">美妙天堂 偶像时间</a>
<p class="update on">
<span>更新至
<a href="#" target="_blank">13话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="飙速宅男 新世代" class="pic">
<div class="lazy-img">
<img alt="飙速宅男 新世代" src="images/bangumi05.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="飙速宅男 新世代" class="t">飙速宅男 新世代</a>
<p class="update ">
<span>更新至
<a href="#">25话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="从零开始的魔法书" class="pic">
<div class="lazy-img">
<img alt="从零开始的魔法书" src="images/bangumi06.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="从零开始的魔法书" class="t">从零开始的魔法书</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="智龙迷城X" class="pic">
<div class="lazy-img">
<img alt="智龙迷城X" src="images/bangumi07.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="智龙迷城X" class="t">智龙迷城X</a>
<p class="update ">
<span>更新至
<a href="#">51话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="世界黑暗图鉴" class="pic">
<div class="lazy-img">
<img alt="世界黑暗图鉴" src="images/bangumi08.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="世界黑暗图鉴" class="t">世界黑暗图鉴</a>
<p class="update ">
<span>更新至
<a href="#">13话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="小魔女学园 TV版" class="pic">
<div class="lazy-img">
<img alt="小魔女学园 TV版" src="images/bangumi09.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="小魔女学园 TV版" class="t">小魔女学园 TV版</a>
<p class="update ">
<span>更新至
<a href="#">25话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="ID-0" class="pic">
<div class="lazy-img">
<img alt="ID-0" src="images/bangumi10.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="ID-0" class="t">ID-0</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="爱丽丝与藏六" class="pic">
<div class="lazy-img">
<img alt="爱丽丝与藏六" src="images/bangumi11.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="爱丽丝与藏六" class="t">爱丽丝与藏六</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="甜甜私房猫 第三季 中配版" class="pic">
<div class="lazy-img">
<img alt="甜甜私房猫 第三季 中配版" src="images/bangumi12.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="甜甜私房猫 第三季 中配版" class="t">甜甜私房猫 第三季 中配版</a>
<p class="update ">
<span>更新至
<a href="#">23话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="甜甜私房猫 第三季" class="pic">
<div class="lazy-img">
<img alt="甜甜私房猫 第三季" src="images/bangumi12.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="甜甜私房猫 第三季" class="t">甜甜私房猫 第三季</a>
<p class="update ">
<span>更新至
<a href="#">38话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="梦王国与沉睡的100王子 短篇动画" class="pic">
<div class="lazy-img">
<img alt="梦王国与沉睡的100王子 短篇动画" src="images/bangumi13.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="梦王国与沉睡的100王子 短篇动画" class="t">梦王国与沉睡的100王子 短篇动画</a>
<p class="update ">
<span>更新至
<a href="#">4话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="埃罗芒阿老师" class="pic">
<div class="lazy-img">
<img alt="埃罗芒阿老师" src="images/bangumi14.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="埃罗芒阿老师" class="t">埃罗芒阿老师</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="阿童木起源" class="pic">
<div class="lazy-img">
<img alt="阿童木起源" src="images/bangumi15.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="阿童木起源" class="t">
阿童木起源</a>
<p class="update ">
<span>更新至
<a href="#">10话</a>
</span>
</p>
</div>
</div>
</div>
<div class="timing-box custom-scrollbar clearFix ">
<div class="card-timing-module clearfix card-timing">
<a href="#" title="从零开始的魔法书" class="pic">
<div class="lazy-img">
<img alt="从零开始的魔法书" src="images/bangumi06.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="从零开始的魔法书" class="t">从零开始的魔法书</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="怪怪守护神" class="pic">
<div class="lazy-img">
<img alt="怪怪守护神" src="images/bangumi16.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="怪怪守护神" class="t">怪怪守护神</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="小魔女学园 TV版" class="pic">
<div class="lazy-img">
<img alt="小魔女学园 TV版" src="images/bangumi09.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="小魔女学园 TV版" class="t">小魔女学园 TV版</a>
<p class="update ">
<span>更新至
<a href="#">25话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="世界黑暗图鉴" class="pic">
<div class="lazy-img">
<img alt="世界黑暗图鉴" src="images/bangumi08.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="世界黑暗图鉴" class="t">世界黑暗图鉴</a>
<p class="update ">
<span>更新至
<a href="#">13话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="笑面推销员" class="pic">
<div class="lazy-img">
<img alt="笑面推销员" src="images/bangumi17.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="笑面推销员" class="t">笑面推销员</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="ID-0" class="pic">
<div class="lazy-img">
<img alt="ID-0" src="images/bangumi10.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="ID-0" class="t">ID-0</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="智龙迷城X" class="pic">
<div class="lazy-img">
<img alt="智龙迷城X" src="images/bangumi07.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="智龙迷城X" class="t">智龙迷城X</a>
<p class="update ">
<span>更新至
<a href="#">51话</a>
</span>
</p>
</div>
</div>
</div>
<div class="timing-box custom-scrollbar clearFix ">
<div class="card-timing-module clearfix card-timing">
<a href="#" title="机甲少女 FRAME ARMS GIRL" class="pic">
<div class="lazy-img">
<img alt="机甲少女 FRAME ARMS GIRL" src="images/bangumi18.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="机甲少女 FRAME ARMS GIRL" class="t">
机甲少女 FRAME ARMS GIRL</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="覆面系 NOISE" class="pic">
<div class="lazy-img">
<img alt="覆面系 NOISE" src="images/bangumi01.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="覆面系 NOISE" class="t">覆面系 NOISE</a>
<p class="update on">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="飙速宅男 新世代" class="pic">
<div class="lazy-img">
<img alt="飙速宅男 新世代" src="images/bangumi05.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="飙速宅男 新世代" class="t">飙速宅男 新世代</a>
<p class="update ">
<span>更新至
<a href="#">25话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="高校星歌剧 第二季" class="pic">
<div class="lazy-img">
<img alt="高校星歌剧 第二季" src="images/bangumi19.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="高校星歌剧 第二季" class="t">高校星歌剧 第二季</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="偶像大师灰姑娘剧场" class="pic">
<div class="lazy-img">
<img alt="偶像大师灰姑娘剧场" src="images/bangumi02.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="偶像大师灰姑娘剧场" class="t">偶像大师灰姑娘剧场</a>
<p class="update on">
<span>更新至
<a href="#">13-2话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" target="_blank" title="美妙天堂 偶像时间" class="pic">
<div class="lazy-img">
<img alt="美妙天堂 偶像时间" src="images/bangumi04.webp">
</div>
</a>
<div class="r-text">
<a href="#" target="_blank" title="美妙天堂 偶像时间" class="t">美妙天堂 偶像时间</a>
<p class="update on">
<span>更新至
<a href="#" target="_blank">13话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="少年阿贝 GO!GO!小芝麻 第二季" class="pic">
<div class="lazy-img">
<img alt="少年阿贝GO!GO!小芝麻 第二季" src="images/bangumi03.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="少年阿贝 GO!GO!小芝麻 第二季" class="t">少年阿贝 GO!GO!小芝麻 第二季</a>
<p class="update on">
<span>更新至
<a href="#">11话</a>
</span>
</p>
</div>
</div>
</div>
<div class="timing-box custom-scrollbar clearFix ">
<div class="card-timing-module clearfix card-timing">
<a href="#" title="博人传 火影忍者新时代" class="pic">
<div class="lazy-img">
<img alt="博人传 火影忍者新时代" src="images/bangumi20.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="博人传 火影忍者新时代" class="t">
博人传 火影忍者新时代</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="夏目友人帐 陆" class="pic">
<div class="lazy-img">
<img alt="夏目友人帐 陆" src="images/bangumi21.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="夏目友人帐 陆" class="t">夏目友人帐 陆</a>
<p class="update">
<span>更新至
<a href="#">11话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="王室教师海涅" class="pic">
<div class="lazy-img">
<img alt="王室教师海涅" src="images/bangumi22.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="王室教师海涅" class="t">王室教师海涅</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="Room Mate" class="pic">
<div class="lazy-img">
<img alt="Room Mate" src="images/bangumi23.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="Room Mate" class="t">Room Mate</a>
<p class="update ">
<span>更新至
<a href="#">11话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="不要输！！恶之军团！" class="pic">
<div class="lazy-img">
<img alt="不要输！！恶之军团！" src="images/bangumi24.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="不要输！！恶之军团！" class="t">不要输！！恶之军团！</a>
<p class="update">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
</div>
<div class="timing-box custom-scrollbar clearFix ">
<div class="card-timing-module clearfix card-timing">
<a href="#" title="月色真美" class="pic">
<div class="lazy-img">
<img alt="月色真美" src="images/bangumi25.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="月色真美" class="t">
月色真美</a>
<p class="update ">
<span>更新至
<a href="#">11话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="樱花任务" class="pic">
<div class="lazy-img">
<img alt="樱花任务" src="images/bangumi26.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="樱花任务" class="t">樱花任务</a>
<p class="update">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="心灵的声音" class="pic">
<div class="lazy-img">
<img alt="心灵的声音" src="images/bangumi27.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="心灵的声音" class="t">心灵的声音</a>
<p class="update ">
<span>更新至
<a href="#">78话</a>
</span>
</p>
</div>
</div>
</div>
<div class="timing-box custom-scrollbar clearFix ">
<div class="card-timing-module clearfix card-timing">
<a href="#" title="恋爱暴君" class="pic">
<div class="lazy-img">
<img alt="恋爱暴君" src="images/bangumi28.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="恋爱暴君" class="t">
恋爱暴君</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="时钟机关之星" class="pic">
<div class="lazy-img">
<img alt="时钟机关之星" src="images/bangumi29.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="时钟机关之星" class="t">时钟机关之星</a>
<p class="update">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="雏子的笔记" class="pic">
<div class="lazy-img">
<img alt="雏子的笔记" src="images/bangumi30.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="雏子的笔记" class="t">雏子的笔记</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="青春歌舞伎" class="pic">
<div class="lazy-img">
<img alt="青春歌舞伎" src="images/bangumi31.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="青春歌舞伎" class="t">青春歌舞伎</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="快盗天使 BREAK" class="pic">
<div class="lazy-img">
<img alt="快盗天使 BREAK" src="images/bangumi32.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="快盗天使 BREAK" class="t">快盗天使 BREAK</a>
<p class="update">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
</div>
<div class="timing-box custom-scrollbar clearFix ">
<div class="card-timing-module clearfix card-timing">
<a href="#" title="忍者少女千鸟～伊势・金崎篇～" class="pic">
<div class="lazy-img">
<img alt="忍者少女千鸟～伊势・金崎篇～" src="images/bangumi33.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="忍者少女千鸟～伊势・金崎篇～" class="t">
忍者少女千鸟～伊势・金崎篇～</a>
<p class="update ">
<span>更新至
<a href="#">38话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="暖暖日记 2nd" class="pic">
<div class="lazy-img">
<img alt="暖暖日记 2nd" src="images/bangumi34.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="暖暖日记 2nd" class="t">暖暖日记 2nd</a>
<p class="update ">
<span>更新至
<a href="#">63话</a>
</span>
</p>
</div>
</div>
</div>
<div class="timing-box custom-scrollbar clearFix ">
<div class="card-timing-module clearfix card-timing">
<a href="#" title="埃罗芒阿老师" class="pic">
<div class="lazy-img">
<img alt="埃罗芒阿老师" src="images/bangumi14.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="埃罗芒阿老师" class="t">埃罗芒阿老师</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="Re:CREATORS" class="pic">
<div class="lazy-img">
<img alt="Re:CREATORS" src="images/bangumi35.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="Re:CREATORS" class="t">Re:CREATORS</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="進擊的巨人 第二季（僅台灣地區）" class="pic">
<div class="lazy-img">
<img alt="進擊的巨人 第二季（僅台灣地區）" src="images/bangumi36.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="進擊的巨人 第二季（僅台灣地區）" class="t">進擊的巨人 第二季（僅台灣地區）</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="爱丽丝与藏六" class="pic">
<div class="lazy-img">
<img alt="爱丽丝与藏六" src="images/bangumi11.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="爱丽丝与藏六" class="t">爱丽丝与藏六</a>
<p class="update ">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="阿童木起源" class="pic">
<div class="lazy-img">
<img alt="阿童木起源" src="images/bangumi15.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="阿童木起源" class="t">
阿童木起源</a>
<p class="update ">
<span>更新至
<a href="#">10话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="甜甜私房猫 第三季" class="pic">
<div class="lazy-img">
<img alt="甜甜私房猫 第三季" src="images/bangumi12.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="甜甜私房猫 第三季" class="t">甜甜私房猫 第三季</a>
<p class="update ">
<span>更新至
<a href="#">38话</a>
</span>
</p>
</div>
</div>
<div class="card-timing-module clearfix card-timing">
<a href="#" title="World Fool News 2E" class="pic">
<div class="lazy-img">
<img alt="World Fool News 2E" src="images/bangumi37.webp">
</div>
</a>
<div class="r-text">
<a href="#" title="World Fool News 2E" class="t">World Fool News 2E</a>
<p class="update on">
<span>更新至
<a href="#">12话</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="r-con">
<div class="rank-head clearFix">
<h3>排行</h3>
<div class="bili-dropdown rank-dropdown">
<span class="selected">三日</span>
<i class="icon icon-arrow-down"></i>
<ul class="dropdown-list">
<li class="dropdown-item" style="display: none;">三日</li>
<li class="dropdown-item">一周</li>
</ul>
</div>
</div>
<div class="rank-list-wrap clearFix"><!-- 选项卡盒子开始 -->
<ul class="bangumi-rank-list rank-list">
<li class="rank-item highlight">
<i class="ri-num">1</i>
<a href="#" title="埃罗芒阿老师 播放:41579640" class="ri-info-wrap">
<p class="ri-title">埃罗芒阿老师</p>
<span class="ri-total">全12话</span>
</a>
</li>
<li class="rank-item highlight">
<i class="ri-num">2</i>
<a href="#" title="Re:CREATORS 播放:19354372" class="ri-info-wrap">
<p class="ri-title">Re:CREATORS</p>
<span class="ri-total">更新至第12话</span>
</a>
</li>
<li class="rank-item highlight">
<i class="ri-num">3</i>
<a href="#" title="从零开始的魔法书 播放:17347446" class="ri-info-wrap">
<p class="ri-title">从零开始的魔法书</p>
<span class="ri-total">全12话</span>
</a>
</li>
<li class="rank-item">
<i class="ri-num">4</i>
<a href="#" title="小魔女学园 TV版 播放:9037830" class="ri-info-wrap">
<p class="ri-title">小魔女学园 TV版</p>
<span class="ri-total">全25话</span>
</a>
</li>
<li class="rank-item">
<i class="ri-num">5</i>
<a href="#" title="恋爱暴君 播放:14897598" class="ri-info-wrap">
<p class="ri-title">恋爱暴君</p>
<span class="ri-total">全12话</span>
</a>
</li>
<li class="rank-item">
<i class="ri-num">6</i>
<a href="#" title="博人传 火影忍者新时代 播放:22780292" class="ri-info-wrap">
<p class="ri-title">博人传 火影忍者新时代</p>
<span class="ri-total">更新至第12话</span>
</a>
</li>
<li class="rank-item">
<i class="ri-num">7</i>
<a href="#" title="爱丽丝与藏六 播放:4627034" class="ri-info-wrap">
<p class="ri-title">爱丽丝与藏六</p>
<span class="ri-total">全12话</span>
</a>
</li>
<li class="rank-item">
<i class="ri-num">8</i>
<a href="#" title="夏目友人帐 陆 播放:13540225" class="ri-info-wrap">
<p class="ri-title">夏目友人帐 陆</p>
<span class="ri-total">全11话</span>
</a>
</li>
<li class="rank-item">
<i class="ri-num">9</i>
<a href="#" title="小林家的龙女仆 播放:59611438" class="ri-info-wrap">
<p class="ri-title">小林家的龙女仆</p>
<span class="ri-total">全13话</span>
</a>
</li>
<li class="rank-item">
<i class="ri-num">10</i>
<a href="#" title="世界黑暗图鉴 播放:4316399" class="ri-info-wrap">
<p class="ri-title">世界黑暗图鉴</p>
<span class="ri-total">全13话</span>
</a>
</li>
</ul>
</div><!-- 选项卡盒子结束 -->
<a href="#" class="more-link">查看更多
<i class="icon icon-arrow-r"></i>
</a>
</div>
</div><!-- 番剧部分结束 -->
<div id="bangumi_news" class="clearFix"><!-- 番剧动态部分开始 -->
<div class="l-con"><!-- 番剧动态左侧部分开始 -->
<div class="zone-title"><!-- 标题区域开始 -->
<div class="headline clearFix">
<a href="#" class="name">番剧动态</a>
<a href="#" class="link-more">更多
<i class="icon"></i>
</a>
<div class="read-push">
<i class="icon icon_read"></i>
<span class="info">
换一换
</span>
</div>
</div>
</div><!-- 标题区域结束 -->
<div class="tab-content">
<div class="list-box active"><!-- 番剧动态列表1部分开始 -->
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】" src="images/dh-list01.webp">
</div>
<div class="mask-video"></div>
<span class="dur">07:27</span>
<div class="later-icon"></div>
</div>
<p title="【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】" class="t">【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】</p>
<p class="num">
<span class="play">
<i class="icon"></i>7.2万
</span>
<span class="danmu">
<i class="icon"></i>2272
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集" src="images/dh-list02.webp">
</div>
<div class="mask-video"></div>
<span class="dur">17:54</span>
<div class="later-icon"></div>
</div>
<p title="那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集" class="t">那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集</p>
<p class="num">
<span class="play">
<i class="icon"></i>16.2万
</span>
<span class="danmu">
<i class="icon"></i>5738
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记" src="images/dh-list03.webp">
</div>
<div class="mask-video"></div>
<span class="dur">11:59</span>
<div class="later-icon"></div>
</div>
<p title="【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记" class="t">【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记</p>
<p class="num">
<span class="play">
<i class="icon"></i>73.3万
</span>
<span class="danmu">
<i class="icon"></i>7358
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]" src="images/dh-list04.webp">
</div>
<div class="mask-video"></div>
<span class="dur">10:16</span>
<div class="later-icon"></div>
</div>
<p title="[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]" class="t">[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]</p>
<p class="num">
<span class="play">
<i class="icon"></i>3.8万
</span>
<span class="danmu">
<i class="icon"></i>640
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="听说你们想要毒哥的腰。OK。【极乐净土】" src="images/dh-list05.webp">
</div>
<div class="mask-video"></div>
<span class="dur">03:39</span>
<div class="later-icon"></div>
</div>
<p title="听说你们想要毒哥的腰。OK。【极乐净土】" class="t">听说你们想要毒哥的腰。OK。【极乐净土】</p>
<p class="num">
<span class="play">
<i class="icon"></i>1975
</span>
<span class="danmu">
<i class="icon"></i>66
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【冰上的尤里】勇利决赛自由滑" src="images/dh-list06.webp">
</div>
<div class="mask-video"></div>
<span class="dur">08:48</span>
<div class="later-icon"></div>
</div>
<p title="【冰上的尤里】勇利决赛自由滑" class="t">【冰上的尤里】勇利决赛自由滑</p>
<p class="num">
<span class="play">
<i class="icon"></i>2511
</span>
<span class="danmu">
<i class="icon"></i>17
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【APH】奥利弗！现在从你房间里出来！" src="images/dh-list07.webp">
</div>
<div class="mask-video"></div>
<span class="dur">00:31</span>
<div class="later-icon"></div>
</div>
<p title="【APH】奥利弗！现在从你房间里出来！" class="t">【APH】奥利弗！现在从你房间里出来！</p>
<p class="num">
<span class="play">
<i class="icon"></i>1.4万
</span>
<span class="danmu">
<i class="icon"></i>89
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【新弹丸论破v3】在vocaloid曲中选择的印象曲集" src="images/dh-list08.webp">
</div>
<div class="mask-video"></div>
<span class="dur">28:38</span>
<div class="later-icon"></div>
</div>
<p title="【新弹丸论破v3】在vocaloid曲中选择的印象曲集" class="t">【新弹丸论破v3】在vocaloid曲中选择的印象曲集</p>
<p class="num">
<span class="play">
<i class="icon"></i>1402
</span>
<span class="danmu">
<i class="icon"></i>465
</span>
</p>
</a>
</div>
</div><!-- 番剧动态列表1部分结束 -->
<div class="list-box"><!-- 番剧动态列表2部分开始 -->
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】" src="images/dh-list2-01.webp">
</div>
<div class="mask-video"></div>
<span class="dur">07:27</span>
<div class="later-icon"></div>
</div>
<p title="【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】" class="t">【笑抽】日漫角色飙中文是什么感觉？（不是空耳）【盘点向】</p>
<p class="num">
<span class="play">
<i class="icon"></i>7.2万
</span>
<span class="danmu">
<i class="icon"></i>2272
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集" src="images/dh-list2-02.webp">
</div>
<div class="mask-video"></div>
<span class="dur">17:54</span>
<div class="later-icon"></div>
</div>
<p title="那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集" class="t">那年那兔催泪弹【重置版】那年那兔那些事儿催泪合集</p>
<p class="num">
<span class="play">
<i class="icon"></i>16.2万
</span>
<span class="danmu">
<i class="icon"></i>5738
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记" src="images/dh-list2-03.webp">
</div>
<div class="mask-video"></div>
<span class="dur">11:59</span>
<div class="later-icon"></div>
</div>
<p title="【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记" class="t">【诚实吐槽】唐僧用飘柔，悟空会焗油，十分钟带你看完这部另类版西游记</p>
<p class="num">
<span class="play">
<i class="icon"></i>73.3万
</span>
<span class="danmu">
<i class="icon"></i>7358
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]" src="images/dh-list2-04.webp">
</div>
<div class="mask-video"></div>
<span class="dur">10:16</span>
<div class="later-icon"></div>
</div>
<p title="[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]" class="t">[Top10]十大有隐藏力量/能力的动漫男主角 [PART 1ᴴᴰ]</p>
<p class="num">
<span class="play">
<i class="icon"></i>3.8万
</span>
<span class="danmu">
<i class="icon"></i>640
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="听说你们想要毒哥的腰。OK。【极乐净土】" src="images/dh-list2-05.webp">
</div>
<div class="mask-video"></div>
<span class="dur">03:39</span>
<div class="later-icon"></div>
</div>
<p title="听说你们想要毒哥的腰。OK。【极乐净土】" class="t">听说你们想要毒哥的腰。OK。【极乐净土】</p>
<p class="num">
<span class="play">
<i class="icon"></i>1975
</span>
<span class="danmu">
<i class="icon"></i>66
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【冰上的尤里】勇利决赛自由滑" src="images/dh-list2-06.webp">
</div>
<div class="mask-video"></div>
<span class="dur">08:48</span>
<div class="later-icon"></div>
</div>
<p title="【冰上的尤里】勇利决赛自由滑" class="t">【冰上的尤里】勇利决赛自由滑</p>
<p class="num">
<span class="play">
<i class="icon"></i>2511
</span>
<span class="danmu">
<i class="icon"></i>17
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【APH】奥利弗！现在从你房间里出来！" src="images/dh-list2-07.webp">
</div>
<div class="mask-video"></div>
<span class="dur">00:31</span>
<div class="later-icon"></div>
</div>
<p title="【APH】奥利弗！现在从你房间里出来！" class="t">【APH】奥利弗！现在从你房间里出来！</p>
<p class="num">
<span class="play">
<i class="icon"></i>1.4万
</span>
<span class="danmu">
<i class="icon"></i>89
</span>
</p>
</a>
</div>
<div class="list-item">
<a href="#">
<div class="pic">
<div class="lazy-img">
<img alt="【新弹丸论破v3】在vocaloid曲中选择的印象曲集" src="images/dh-list2-08.webp">
</div>
<div class="mask-video"></div>
<span class="dur">28:38</span>
<div class="later-icon"></div>
</div>
<p title="【新弹丸论破v3】在vocaloid曲中选择的印象曲集" class="t">【新弹丸论破v3】在vocaloid曲中选择的印象曲集</p>
<p class="num">
<span class="play">
<i class="icon"></i>1402
</span>
<span class="danmu">
<i class="icon"></i>465
</span>
</p>
</a>
</div>
</div><!-- 番剧动态列表2部分结束 -->
</div>
</div><!-- 番剧动态左侧部分结束 -->
<div class="r-con"><!-- 番剧动态右侧部分开始 -->
<div class="rank-head clearFix">
<h3>特别推荐</h3>
</div>
<div class="slider-box">
<div class="carousel-module slider">
<div class="panel">
<ul class="pic" style="width: 200%; margin-left: 0;">
<li class="scrollx on">
<a href="#">
<div class="lazy-img">
<img alt="" src="images/bangumi-r01.webp">
</div>
</a>
</li>
<li class="scrollx off">
<a href="#">
<div class="lazy-img">
<img alt="" src="images/bangumi-r02.webp">
</div>
</a>
</li>
</ul>
<ul class="title">
<a href="#" class="on">相信的心就是大家的魔法。</a>
<a href="#" class="">下周没有纱雾看我要死了</a>
</ul>
<ul class="trig">
<span class="on"></span>
<span class=""></span>
</ul>
</div>
</div>
</div>
</div><!-- 番剧动态右侧部分结束 -->
</div><!-- 番剧动态部分结束 -->
</div><!-- 页面主体部分结束 -->
<div class="footer"><!-- 页脚部分开始 -->
<div class="footer-wrap">
<div class="footer-cnt clearFix">
<ul class="boston-postcards clearFix">
<li>
<div class="tips">蘑菇视频</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/blackboard/aboutUs.html">关于我们</a>
</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/blackboard/friends-links.html">友情链接</a>
</div>
<div class="cards">
<a target="_blank" href="//bmall.bilibili.com/#!/">哔哩哔哩周边</a>
</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/blackboard/contact.html">联系我们</a>
</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/blackboard/join.html">加入我们</a>
</div>
<div class="cards">
<a target="_blank" href="https://account.bilibili.com/site/ident.html">官方认证</a>
</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/blackboard/join.html">加入我们</a>
</div>
<div class="cards">
<a target="_blank" href="https://account.bilibili.com/site/ident.html">官方认证</a>
</div>
</li>
<li>
<div class="tips">传送门</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/blackboard/help.html">帮助中心</a>
</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/video/av120040/">高级弹幕</a>
</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/event">活动专题页</a>
</div>
<div class="cards">
<a target="_blank" href="//www.bilibili.com/blackboard/copyright.html">侵权申诉</a>
</div>
<div class="cards">
<a target="_blank" href="https://account.bilibili.com/answer/addq">分院帽计划</a>
</div>
<div class="cards">
<a target="_blank" href="//activity.bilibili.com/">活动中心</a>
</div>
<div class="cards">
<a target="_blank" href="http://link.acg.tv">用户反馈论坛</a>
</div>
<div class="cards">
<a target="_blank" href="http://h.bilibili.com/wallpaper?action=list">壁纸站</a>
</div>
<div class="cards">
<a target="_blank" href="http://www.bilibili.com/html/cele.html">名人堂</a>
</div>
</li>
<li>
<div class="block right">
<a target="_blank" href="//app.bilibili.com/">
<div class="phone">
<div class="pic"></div>
<em>手机端下载</em>
<div class="qrcode-box-wrp">
<div class="qrcode-box qrcode-app">
<div class="qrcode-box-arrow">
</div>
</div>
</div>
</div>
</a>
<a target="_blank" href="http://weibo.com/bilibiliweb">
<div class="weibo">
<div class="pic"></div>
<em>新浪微博</em>
<div class="qrcode-box-wrp">
<div class="qrcode-box qrcode-weibo">
<div class="qrcode-box-arrow"></div>
</div>
</div>
</div>
</a>
<a id="weixin">
<div class="weixin">
<div class="pic"></div>
<em>官方微信</em>
<div class="qrcode-box-wrp bigvip-qrcode">
<div class="qrcode-box qrcode-weixin">
<div class="qrcode-box-arrow"></div>
</div>
</div>
</div>
</a>
</div>
</li>
</ul>
<div class="partner">
<div class="block left" style="padding-top: 0px;">
<div class="partner-banner"></div>
</div>
<div class="block left" style="margin: 0px 68px 0 115px;line-height:24px;float: none;">
<p>广播电视节目制作经营许可证：<span>（沪）字第1248号</span> | 网络文化经营许可证：<span>沪网文[2013]0480-056号</span> | 信息网络传播视听节目许可证：<span>0910417</span> | 互联网ICP备案：<span>沪ICP备13002172号-3</span> 沪ICP证：<span>沪B2-20100043</span> | 违法不良信息举报邮箱：help@bilibili.com | 违法不良信息举报电话：4000233233转3</p>
<p>网上有害信息举报专区：
<a href="http://www.12377.cn/?spm=a2hww.20023042.0.0" target="_blank">
<img src="images/12377.png" width="16" height="16" style="vertical-align: sub;"> 中国互联网违法和不良信息举报中心</a> |<a href="http://www.shjbzx.cn" target="_blank"><i class="icons-footer icons-footer-report"></i><span>上海互联网举报中心</span></a> |<a href="http://jb.ccm.gov.cn/" target="_blank">12318 全国文化市场举报网站</a>
</p>
<p>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011502001911" target="_blank"><img src="images/beiantubiao.png" style="margin-right:5px;">沪公网安备 31011502001911号</a>
</p>
</div>
</div>
</div>
</div>
</div><!-- 页脚部分结束 -->
</div>
<script type="text/javascript" src="../../js学习/jquery-3.7.1.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
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;
}
扫一扫
7550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
