<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta content="telephone=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<title></title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/layer.css">
<link rel="stylesheet" href="css/neck.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body style="background: #F4F5F8">
<div class="neck-nav">
<div class="neck-nav-content">
<a href="pc.html"><img class="logo" src="images/logo.png" alt=""></a>
<div class="nav-login-big-box">
<!-- <div style="display: none;" class=nav-login-btn>登入/註冊</div>
<div style="display: none;" class="nav-login">
<img class="nav-login-face" src="" alt="">
<div class="nav-login-more">
<div class="nav-login-more-jiao"></div>
<div class="nav-login-more-top">
<img class="login-more-top-face" src="" alt="">
<p class="login-more-top-p1">主播暱稱預留</p>
<p class="login-more-top-p2">ID:246524</p>
</div>
<div class="login-more-content-box">
<div data-type="1">用戶中心</div>
<div data-type="2">儲值中心</div>
<div data-type="3">我的追蹤</div>
<div data-type="4">登出</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
<div class="side-nav">
<div class="side-right-box"></div>
<div class="side-nav-top-box">
<div data-type="1" class="side-nav-sort side-nav-sort-click"><img class="side-icon" src="images/front/icon1-click.png" alt=""><span>主頁</span><img class="side-nav-bg" src="images/front/nav-bg.png" alt=""></div>
<div data-type="2" class="side-nav-sort"><img class="side-icon" src="images/front/icon2.png" alt=""><span>直播</span><img class="side-nav-bg" src="images/front/nav-bg.png" alt=""></div>
<div data-type="3" class="side-nav-sort"><img class="side-icon" src="images/front/icon3.png" alt=""><span>追蹤</span><img class="side-nav-bg" src="images/front/nav-bg.png" alt=""></div>
<div data-type="4" class="side-nav-sort"><img class="side-icon" src="images/front/icon4.png" alt=""><span>影片</span><img class="side-nav-bg" src="images/front/nav-bg.png" alt=""></div>
<div data-type="5" class="side-nav-sort"><img class="side-icon" src="images/front/icon5.png" alt=""><span>圖文</span><img class="side-nav-bg" src="images/front/nav-bg.png" alt=""></div>
<div data-type="6" class="side-nav-sort"><img class="side-icon" src="images/front/icon6.png" alt=""><span>約會</span><img class="side-nav-bg" src="images/front/nav-bg.png" alt=""></div>
</div>
<div class="tag-big-box">
<div class="tag-title"><img src="images/front/tag-title.png" alt=""></div>
<ul class="side-tag-ul">
<!-- <li>
<h2 class="tag-span1">美腿</h2>
<span class="tag-span2">(253)</span>
</li> -->
</ul>
</div>
</div>
<div class="m-box">
<div style="height: 60px;"></div>
<div class="mc-list-box">
<h2 class="box-title"><img src="images/front/category1.png" alt=""><span>在線美女</span></h2>
<ul class="live-box-ul clearfix">
<!-- <li>
<div class="live-top-box">
<img class="live-icon" src="images/front/live.png" alt="美女直播">
<div class="live-top-shadow"></div>
</div>
<div class="live-name-box">迪麗熱巴</div>
</li> -->
</ul>
</div>
<div class="video-list-box">
<h2 class="box-title">
<img src="images/front/category2.png" alt=""><span>影片</span>
<div class="video-more-btn">
篩選<img src="images/front/more-btn.png" alt="">
</div>
<div class="video-more-layer">
<p style="padding-top: 15px;" class="more-layer-title">時長</p>
<ul class="more-layer-btn-ul more-layer-btn-ul1 clearfix">
<li data-type="-1" class="more-click">不限長度</li>
<li data-type="1" >小於2分鐘</li>
<li data-type="2" >2-5分鐘</li>
<li data-type="3" >5-15分鐘</li>
</ul>
<p class="more-layer-title">綜合</p>
<ul class="more-layer-btn-ul more-layer-btn-ul2 clearfix">
<li data-type="-1" class="more-click">綜合排序</li>
<li data-type="1">受歡迎程度</li>
<li data-type="2">點讚數量</li>
<li data-type="3">回復數量</li>
<li data-type="4">最新發佈</li>
<li data-type="5">最早發佈</li>
</ul>
<!-- <p class="more-layer-title">露水</p>
<ul class="more-layer-btn-ul more-layer-btn-ul3 clearfix">
<li class="more-click">不限露水</li>
<li>只看要露水</li>
<li>只看免露水</li>
</ul> -->
<p class="more-layer-title">時間</p>
<ul class="more-layer-btn-ul more-layer-btn-ul3 clearfix">
<li data-type="-1" class="more-click">不限時間</li>
<li data-type="1">一周內</li>
<li data-type="2">一月內</li>
<li data-type="3">三月內</li>
<li data-type="4">一年內</li>
</ul>
<div class="layer-more-btn1">重置</div>
<div class="layer-more-btn2">確定</div>
</div>
</h2>
<ul class="video-box-ul clearfix">
<!-- <li>
<div class="video-top-box">
<div class="video-top-shadow"></div>
<span class="video-time">45:03</span>
</div>
<div class="video-name-box">
<img class="video-face" src="https://zhibocdn.yabolive.net/comm/stscli/prod/883221/1648095196207/498F890F-33A1-4EE9-9854-9D39A6905E85.jpeg?x-oss-process=image/resize,w_40" alt="">
<p class="video-title">圖文詳情圖文詳情</p>
<div class="video-tag-box">
<div>#黑絲</div>
<div>#黑絲</div>
<div>#黑絲</div>
<div>#黑絲</div>
<div>#黑絲</div>
</div>
</div>
</li> -->
</ul>
</div>
<div style="display: none;" class="images-list-box">
<h2 class="box-title"><img style="margin-top: -26px;" src="images/front/category3.png" alt=""><span>圖文</span></h2>
<ul class="images-box-ul clearfix">
<!-- <li>
<div class="video-top-box">
<div class="video-top-shadow"></div>
</div>
<div class="video-name-box">
<img class="video-face" src="https://zhibocdn.yabolive.net/comm/stscli/prod/883221/1648095196207/498F890F-33A1-4EE9-9854-9D39A6905E85.jpeg?x-oss-process=image/resize,w_40" alt="">
<p class="video-title">圖文詳情圖文詳情</p>
<div class="video-tag-box">
<div>#黑絲</div>
<div>#黑絲</div>
<div>#黑絲</div>
<div>#黑絲</div>
<div>#黑絲</div>
</div>
</div>
</li> -->
</ul>
</div>
<div style="display:none" class="like-box">
<h2 style="border-bottom: 1px solid #AAAAAA;" class="box-title"><span>我的追蹤</span></h2>
<ul class="like-ul">
<!-- <li style="background: url(https://zhibocdn.yabolive.net/comm/user/img/11128395/8b87365397474fe3be3b912456958d41.jpg?x-oss-process=image/resize,w_368) no-repeat;background-size: cover;">
<img class="live" src="images/front/live.png" alt="">
<div class="like-shadow"></div>
<p class="like-li-name">主播暱稱預留</p>
</li> -->
</ul>
</div>
<div style="height: 60px;"></div>
<div class="login-content">
<div class="layer-login">
<img class="close" src="images/close.png" alt="">
<div style="display: none;" class="login-box1">
<div class="login-title">登入</div>
<div class="phone-login-btn"></div>
<div class="google-login-btn"></div>
<div class="more-login"><img src="images/more-login.png" alt=""></div>
<div class="more-login-box">
<div class="more-login-icon"><img src="images/login-icon2.png" alt=""></div>
<div class="more-login-icon"><img src="images/login-icon3.png" alt=""></div>
<div class="more-login-icon"><img src="images/login-icon4.png" alt=""></div>
</div>
</div>
<div style="display: none;" class="login-box2">
<div class="login-title">登入</div>
<div data-type="1" class="login-input-area">
<p class="login-area-p1">國家地區</p>
<p class="login-area-p2"><span>台灣</span> <img src="images/arrow.png" alt=""></p>
</div>
<ul class="login-input-ul"></ul>
<div class="login-input-phone">
<span class="login-input-phone-span">+886</span>
<input class="login-input1" maxlength="15" placeholder="請輸入手機號碼" type="number">
</div>
<div class="login-submit-btn">登入</div>
<div class="more-login"><img src="images/more-login.png" alt=""></div>
<div class="more-login-box">
<div class="more-login-icon"><img src="images/login-icon1.png" alt=""></div>
<div class="more-login-icon"><img src="images/login-icon2.png" alt=""></div>
<div class="more-login-icon"><img src="images/login-icon3.png" alt=""></div>
<div class="more-login-icon"><img src="images/login-icon4.png" alt=""></div>
</div>
</div>
<div style="display: none;" class="login-box3">
<div style="padding-top: 110px;" class="login-title">登入</div>
<div class="login-input-area">
<p class="login-area-p1">國家地區</p>
<p class="login-area-p2"><span>台灣</span> <img src="images/arrow.png" alt=""></p>
</div>
<div class="login-input-phone">
<span class="login-input-phone-span">+886</span>
<input class="login-input1" oninput="value=value.replace(/[^\d]/g,'')" maxlength="15" placeholder="請輸入手機號碼" type="text">
</div>
<div class="login-input-password">
<span class="login-input-phone-span">密碼</span>
<input class="login-input2" maxlength="15" placeholder="請輸入您的密碼" type="password">
</div>
<span class="login-no-password">忘記密碼</span>
<div class="login-submit-btn">登入</div>
<div style="margin-top: 35px;" class="more-login"><img src="images/more-login.png" alt=""></div>
<div class="more-login-box">
<div class="more-login-icon"><img src="images/login-icon1.png" alt=""></div>
<div class="more-login-icon"><img src="images/login-icon2.png" alt=""></div>
<div class="more-login-icon"><img src="images/login-icon3.png" alt=""></div>
<div class="more-login-icon"><img src="images/login-icon4.png" alt=""></div>
</div>
</div>
<div style="display: none;" class="login-box4">
<div style="padding-top: 110px;" class="login-title">重置密碼</div>
<div class="login-input-area">
<p class="login-area-p1">國家地區</p>
<p class="login-area-p2"><span>香港</span> <img src="images/arrow.png" alt=""></p>
</div>
<div class="login-input-phone">
<span class="login-input-phone-span">+886</span>
<input class="login-input1" oninput="value=value.replace(/[^\d]/g,'')" maxlength="16" placeholder="請輸入手機號碼" type="text">
</div>
<div class="login-code-box">
<input placeholder="請輸入驗證碼" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6" class="login-code-input" type="text">
<div class="login-code-btn">獲取驗證碼</div>
</div>
<div class="login-new-password1">
<input placeholder="請設置6-16位新密碼" maxlength="16" class="login-new-password-input" type="password">
</div>
<div class="login-new-password2">
<input placeholder="請再次輸入新密碼" maxlength="16" class="login-new-password-input" type="password">
</div>
<div class="login-submit-btn2">確定</div>
<div class="login-back">返回登入</div>
</div>
</div>
<div style="display: none;" class="layer-register">
<div class="layer-register-left">
<div style="padding-top: 70px;" class="login-title">註冊</div>
<div class="login-input-area">
<p class="login-area-p1">國家地區</p>
<p class="login-area-p2"><span>香港</span> <img src="images/arrow.png" alt=""></p>
</div>
<div class="login-input-phone">
<span class="login-input-phone-span">+886</span>
<input class="login-input1" oninput="value=value.replace(/[^\d]/g,'')" maxlength="16" placeholder="請輸入手機號碼" type="text">
</div>
<div class="login-code-box">
<input placeholder="請輸入驗證碼" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6" class="login-code-input" type="text">
<div class="login-code-btn">獲取驗證碼</div>
</div>
<div class="login-new-password1">
<input placeholder="請設置6-16位密碼" maxlength="16" class="login-new-password-input" type="password">
</div>
<div class="login-submit-btn2">創建免費賬戶</div>
<p class="login-register-tips">已有賬號，<span>立即登錄</span></p>
</div>
<div class="layer-register-right"></div>
</div>
</div>
</div>
</body>
<script src="lib/jquery-3.1.1.min.js"></script>
<script src="layer-v3.1.0/layer/layer.js"></script>
<script src="lib/fingerprint2.js"></script>
<script src="lib/default.js?v='20220407'"></script>
<script src="lib/login.js"></script>
<script>
$(function(){
// 手机号：11222222222
// 密码：qwe123
loginGo()
var scrollOk=true;
var pageNumber=1
var typeNum=1
var tagNum=''
var timeNum=-1
var sortNum=-1
var dayNum=-1
var canvasCode=-1
var fp = new Fingerprint2();
fp.get(function(result, components) {
localStorage.canvasCode=result
liveList(1)
getTags()
getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
});
$(window).on("scroll",function(){
if($(document).height()-$(document).scrollTop()-$(window).height()<=20){
if(scrollOk==false)return;
scrollOk=false
pageNumber+=1
getTopics(pageNumber,typeNum,tagNum,timeNum,sortNum,dayNum)
}
})
$(".layer-more-btn1").on("click",function(){
timeNum=-1
sortNum=-1
dayNum=-1
$(".more-layer-btn-ul li").removeClass("more-click")
$(".more-layer-btn-ul1 li").eq(0).addClass("more-click")
$(".more-layer-btn-ul2 li").eq(0).addClass("more-click")
$(".more-layer-btn-ul3 li").eq(0).addClass("more-click")
})
$(".layer-more-btn2").on("click",function(){
$(".video-more-layer").fadeOut(350)
$(".video-more-btn").removeClass("video-more-btn-all")
getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
var scrollOk=true;
var pageNumber=1
})
$(".more-layer-btn-ul1 li").on("click",function(){
var _self=$(this)
$(".more-layer-btn-ul1 li").removeClass("more-click")
_self.addClass("more-click")
timeNum=_self.attr("data-type")
})
$(".more-layer-btn-ul2 li").on("click",function(){
var _self=$(this)
$(".more-layer-btn-ul2 li").removeClass("more-click")
_self.addClass("more-click")
sortNum=_self.attr("data-type")
})
$(".more-layer-btn-ul3 li").on("click",function(){
var _self=$(this)
$(".more-layer-btn-ul3 li").removeClass("more-click")
_self.addClass("more-click")
dayNum=_self.attr("data-type")
})
$(".video-more-btn").on("click",function(){
if($(".video-more-btn").hasClass("video-more-btn-all")){
$(".video-more-layer").fadeOut(350)
$(".video-more-btn").removeClass("video-more-btn-all")
}else{
$(".video-more-layer").fadeIn(350)
$(".video-more-btn").addClass("video-more-btn-all")
}
})
$(".side-nav-sort").on("click",function(){
var _self=$(this);
for(var i=0;i<6;i++){
$(".side-icon").eq(i).attr("src","images/front/icon"+(i+1)+".png")
}
_self.children(".side-icon").attr("src",'images/front/icon'+_self.attr("data-type")+'-click.png')
$(".side-nav-sort").removeClass("side-nav-sort-click")
_self.addClass("side-nav-sort-click")
if(_self.attr("data-type")==1){
$(".images-list-box").hide()
$(".like-box").hide()
$(".mc-list-box").show()
$(".video-list-box").show()
pageNumber=1
typeNum=1
tagNum=''
timeNum=-1
sortNum=-1
dayNum=-1
$(".tag-big-box").show()
$(".side-tag-ul li").removeClass("tag-click")
liveList(1)
getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
}
else if(_self.attr("data-type")==2){
$(".images-list-box").hide()
$(".video-list-box").hide()
$(".mc-list-box").show()
$(".tag-big-box").hide()
$(".like-box").hide()
liveList(1)
}
else if(_self.attr("data-type")==3){
$(".tag-big-box").hide()
$(".mc-list-box").hide()
$(".video-list-box").hide()
$(".like-box").show()
likeList()
}
else if(_self.attr("data-type")==4){
typeNum=1
tagNum=''
$(".tag-big-box").show()
$(".side-tag-ul li").removeClass("tag-click")
$(".mc-list-box").hide()
$(".images-list-box").hide()
$(".like-box").hide()
$(".video-list-box").show()
getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
}
else if(_self.attr("data-type")==5){
typeNum=2
tagNum=''
$(".tag-big-box").show()
$(".side-tag-ul li").removeClass("tag-click")
$(".mc-list-box").hide()
$(".video-list-box").hide()
$(".like-box").hide()
$(".images-list-box").show()
getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
}
else if(_self.attr("data-type")==6){
}
})
function likeList(){
$.ajax({
url:$ip2+'room/queryUserLikeList',
data:{
uid:localStorage.uid,
token:localStorage.token,
pageNum:1,
pageSize:99,
pass:true,
pageID:localStorage.canvasCode
},
success:function(data){
console.log('拉取關注列表',data)
var html=[];
for(var i=0;i<data.rooms.length;i++){
var list=data.rooms[i]
if(list.liveState!=1)continue;
html+='<a href="room/liveRoom.html?roomId='+list.uid+'"><li style="background: url(https://zhibocdn.yabolive.net/comm'+list.face+'?x-oss-process=image/resize,w_368) no-repeat;background-size: cover;">';
html+='<img class="live" src="images/front/live.png" alt="">';
html+='<div class="like-shadow"></div>';
html+='<p class="like-li-name">'+list.nickname+'</p>';
html+='</li></a>';
}
$(".like-ul").html(html);
}
})
}
function liveList(e){
$.ajax({
url:$ip2+'frontPage/queryLiveUsers',
data:{
pageNum:e,
pageSize:100,
pass:true,
pageID:localStorage.canvasCode
},
success:function(data){
console.log('直播列表',data)
var html=[];
for(var i=0;i<data.roomList.length;i++){
var list=data.roomList[i]
html+='<li>';
html+='<a href="room/liveRoom.html?roomId='+list.roomId+'"><div style="background: url(https://zhibocdn.yabolive.net/comm'+list.face.split('?')[0]+'?x-oss-process=image/resize,w_368) no-repeat;background-size: cover;" class="live-top-box">';
html+='<img class="live-icon" src="images/front/live.png" alt="美女直播">';
html+='<div class="live-top-shadow"></div>';
html+='</div>';
html+='<div class="live-name-box">'+list.nickname+'</div></a>';
html+='</li>';
}
$(".live-box-ul").html(html);
}
})
}
function getTags(){
$.ajax({
url:$ip2+'frontPage/queryTags',
data:{
pageID:localStorage.canvasCode,
pass:true,
},
success:function(data){
console.log('获取标签列表',data);
var html=[];
for(var i=0;i<data.tagList.length;i++){
var list=data.tagList[i]
html+='<li data-type="'+list.tagId+'">';
html+='<h2 class="tag-span1">'+list.tagName+'</h2>';
html+='<span class="tag-span2">('+list.videoTotal+')</span>';
html+='</li>';
}
$(".side-tag-ul").html(html);
$(".side-tag-ul li").unbind("click").on("click",function(){
var _self=$(this);
if(_self.hasClass("tag-click")){
_self.removeClass('tag-click')
tagNum=''
}else{
$(".side-tag-ul li").removeClass("tag-click")
_self.addClass("tag-click")
tagNum=_self.attr("data-type")
}
$(".mc-list-box").hide()
pageNumber=1
getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
})
}
})
}
function getTopics(e,typeNum,tagNum,timeNum,sortNum,dayNum){
$.ajax({
url:$ip2+'frontPage/queryTopics',
data:{
pageID:localStorage.canvasCode,
pass:true,
pageNum:e,
type:typeNum,
pageSize:12,
language:2,
tag:tagNum,
duration:timeNum,
sort:sortNum,
period:dayNum
},
success:function(data){
console.log('获取帖子',data)
if(data.dataList.length==0){
scrollOk=false;
}else{
scrollOk=true;
}
var html=[];
if(typeNum==1){
for(var i=0;i<data.dataList.length;i++){
var list=data.dataList[i];
var videoList=JSON.parse(list.content)
html+='<a href="room/videoRoom.html?topicId='+list.topicId+'&tag='+tagNum+'">'
html+='<li>';
html+='<div style="background: url(https://zhibocdn.yabolive.net/comm'+videoList.videos[0].cover.split('?')[0]+'?x-oss-process=video/snapshot,t_0,f_jpg,w_342,h_0,m_fast,f_jpg)no-repeat;background-size: cover;" class="video-top-box">';
html+='<div class="video-top-shadow"></div>';
html+='<span class="video-time">'+add0(Math.floor(videoList.videos[0].duration/1000/60))+':'+add0(Math.floor(videoList.videos[0].duration/1000)%60)+'</span>';
html+='</div>';
html+='<div class="video-name-box">';
html+='<img class="video-face" src="https://zhibocdn.yabolive.net/comm'+list.face+'?x-oss-process=image/resize,w_40" alt="">';
html+='<p class="video-title">'+videoList.title+'</p>';
html+='<div class="video-tag-box">';
for(var j=0;j<list.tags.length;j++){
html+='<div data-type="'+list.tags[j].tagId+'" class="tag">#'+list.tags[j].tagName+'</div>';
}
html+='</div>';
html+='</div>';
html+='</li>';
html+='</a>'
}
if(e==1)$(".video-box-ul").html(html);
else $(".video-box-ul").append(html);
}
if(typeNum==2){
for(var i=0;i<data.dataList.length;i++){
var list=data.dataList[i];
var imgList=JSON.parse(list.content)
console.log(imgList)
if(imgList.images==undefined)continue;
html+='<a href="room/imagesRoom.html?topicId='+list.topicId+'&tag='+tagNum+'">'
html+='<li>';
html+='<div style="background: url(https://zhibocdn.yabolive.net/comm'+imgList.images[0].url.split('?')[0]+'?x-oss-process=image/resize,w_342" class="video-top-box">';
html+='<div class="video-top-shadow"></div>';
html+='</div>';
html+='<div class="video-name-box">';
html+='<img class="video-face" src="https://zhibocdn.yabolive.net/comm'+list.face+'?x-oss-process=image/resize,w_40" alt="">';
html+='<p class="video-title">'+imgList.title+'</p>';
html+='<div class="video-tag-box">';
for(var j=0;j<list.tags.length;j++){
html+='<div data-type="'+list.tags[j].tagId+'" class="tag">#'+list.tags[j].tagName+'</div>';
}
html+='</div>';
html+='</div>';
html+='</li>';
html+='</a>'
}
if(e==1) $(".images-box-ul").html(html);
else $(".images-box-ul").append(html);
}
}
})
}
})
</script>
</html>