diff --git a/room/css/index.css b/room/css/index.css
index 964d6c6..25f2645 100644
--- a/room/css/index.css
+++ b/room/css/index.css
@@ -15,9 +15,20 @@
.body-lang1 .hot-box {
background: url(../images/hot-box2-en.png?v=20220801) no-repeat;
}
+.body-lang1 .hot-box2 {
+ background: url(../images/interac-box-en.png?v=20220801) no-repeat;
+}
.body-lang1 .rich-box {
background: url(../images/rich-box-en.png?v=20220801) no-repeat;
}
+.body-lang1 .list-floor-left,
+.body-lang1 .list-floor-left2 {
+ display: none;
+}
+.body-lang1 .list-floor-right,
+.body-lang1 .list-floor-right2 {
+ display: none;
+}
.body-lang1 .day-task-content-ul li {
min-height: 54px;
height: auto;
diff --git a/room/css/index.less b/room/css/index.less
index 8a37ca6..cbd76e2 100644
--- a/room/css/index.less
+++ b/room/css/index.less
@@ -16,10 +16,18 @@
.hot-box{
background: url(../images/hot-box2-en.png?v=20220801) no-repeat;
}
+ .hot-box2{
+ background: url(../images/interac-box-en.png?v=20220801) no-repeat;
+ }
.rich-box{
background: url(../images/rich-box-en.png?v=20220801) no-repeat;
}
-
+ .list-floor-left,.list-floor-left2{
+ display: none;
+ }
+ .list-floor-right,.list-floor-right2{
+ display: none;
+ }
.day-task-content-ul li{
min-height: 54px;
height: auto;
diff --git a/room/css/room.css b/room/css/room.css
index e952993..3daa86f 100644
--- a/room/css/room.css
+++ b/room/css/room.css
@@ -184,6 +184,19 @@ html * {
float: left;
position: relative;
}
+.hot-box2 {
+ position: relative;
+ width: 174px;
+ height: 86px;
+ background: url(../images/interac-box.png?v=20220801) no-repeat;
+ margin: 0 auto;
+ margin-top: 10px;
+ color: #55E4D8;
+ font-size: 18px;
+ font-weight: 700;
+ text-align: center;
+ line-height: 120px;
+}
.hot-box {
position: relative;
width: 174px;
@@ -197,6 +210,18 @@ html * {
text-align: center;
line-height: 120px;
}
+.hot-list-box2 {
+ display: none;
+ width: 240px;
+ height: 634px;
+ background: linear-gradient(to bottom, #FFF4FA, #FFF8FB, #FFFFFF);
+ border-radius: 8px;
+ z-index: 50;
+ position: absolute;
+ top: -118px;
+ left: 206px;
+ box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.3);
+}
.hot-list-box {
display: none;
width: 240px;
@@ -274,12 +299,14 @@ html * {
top: 261px;
left: -5px;
}
-.list-floor-left {
+.list-floor-left,
+.list-floor-left2 {
position: absolute;
left: 52px;
top: 18px;
}
-.list-floor-right {
+.list-floor-right,
+.list-floor-right2 {
position: absolute;
right: 52px;
top: 18px;
@@ -1276,18 +1303,31 @@ input::-webkit-input-placeholder {
font-size: 18px;
text-shadow: none;
}
-.hot-list-ul {
+.hot-list-box-top2 {
+ height: 50px;
+ width: 240px;
+ text-align: center;
+ line-height: 50px;
+ color: #55E4D8;
+ font-weight: 700;
+ font-size: 18px;
+ text-shadow: none;
+}
+.hot-list-ul,
+.hot-list-ul2 {
width: 240px;
height: 578px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
-.hot-list-ul li {
+.hot-list-ul li,
+.hot-list-ul2 li {
height: 62px;
width: 210px;
margin: 0 auto;
}
-.hot-list-ul .hot-list-li-box1 {
+.hot-list-ul .hot-list-li-box1,
+.hot-list-ul2 .hot-list-li-box1 {
width: 30px;
height: 62px;
line-height: 62px;
@@ -1297,13 +1337,15 @@ input::-webkit-input-placeholder {
text-shadow: none;
color: #939199;
}
-.hot-list-ul .hot-list-li-box2 {
+.hot-list-ul .hot-list-li-box2,
+.hot-list-ul2 .hot-list-li-box2 {
width: 180px;
height: 62px;
position: relative;
float: left;
}
-.hot-list-ul .hot-list-li-box2 .rich-list-face {
+.hot-list-ul .hot-list-li-box2 .rich-list-face,
+.hot-list-ul2 .hot-list-li-box2 .rich-list-face {
width: 44px;
height: 44px;
border-radius: 50%;
@@ -1311,13 +1353,15 @@ input::-webkit-input-placeholder {
top: 8px;
left: 4px;
}
-.hot-list-ul .hot-list-li-box2 .rich-list-king {
+.hot-list-ul .hot-list-li-box2 .rich-list-king,
+.hot-list-ul2 .hot-list-li-box2 .rich-list-king {
position: absolute;
left: 3px;
z-index: 2;
top: 6px;
}
-.hot-list-ul .hot-list-li-box2 .hot-list-p1 {
+.hot-list-ul .hot-list-li-box2 .hot-list-p1,
+.hot-list-ul2 .hot-list-li-box2 .hot-list-p1 {
font-size: 14px;
text-indent: 55px;
font-weight: 400;
@@ -1330,7 +1374,8 @@ input::-webkit-input-placeholder {
white-space: nowrap;
overflow: hidden;
}
-.hot-list-ul .hot-list-li-box2 .hot-list-p2 {
+.hot-list-ul .hot-list-li-box2 .hot-list-p2,
+.hot-list-ul2 .hot-list-li-box2 .hot-list-p2 {
font-size: 14px;
text-indent: 55px;
font-weight: 400;
@@ -1348,6 +1393,15 @@ input::-webkit-input-placeholder {
.hot-list-ul::-webkit-scrollbar-thumb {
background: #E53985 !important;
}
+.hot-list-ul2::-webkit-scrollbar {
+ width: 3px !important;
+}
+.hot-list-ul2::-webkit-scrollbar-track {
+ background: #FFF4FA !important;
+}
+.hot-list-ul2::-webkit-scrollbar-thumb {
+ background: #E53985 !important;
+}
.online-list-box {
position: relative;
width: 400px;
diff --git a/room/css/room.less b/room/css/room.less
index 2602424..7087f81 100644
--- a/room/css/room.less
+++ b/room/css/room.less
@@ -206,6 +206,20 @@ html{
position: relative;
}
+.hot-box2{
+ position: relative;
+ width: 174px;
+ height: 86px;
+ background: url(../images/interac-box.png?v=20220801)no-repeat;
+ margin: 0 auto;
+ margin-top: 10px;
+ color: #55E4D8;
+ font-size: 18px;
+ font-weight: 700;
+ text-align: center;
+ line-height: 120px;
+ // text-shadow: 1px 2px 2px #D38167;
+}
.hot-box{
position: relative;
width: 174px;
@@ -220,6 +234,18 @@ html{
line-height: 120px;
// text-shadow: 1px 2px 2px #D38167;
}
+.hot-list-box2{
+ display: none;
+ width: 240px;
+ height: 634px;
+ background: linear-gradient(to bottom, #FFF4FA, #FFF8FB, #FFFFFF);
+ border-radius: 8px;
+ z-index: 50;
+ position: absolute;
+ top: -118px;
+ left: 206px;
+ box-shadow: 2px 0px 20px rgba(0,0,0,0.3);
+}
.hot-list-box{
display: none;
width: 240px;
@@ -298,12 +324,12 @@ html{
top: 261px;
left: -5px;
}
-.list-floor-left{
+.list-floor-left,.list-floor-left2{
position: absolute;
left: 52px;
top: 18px;
}
-.list-floor-right{
+.list-floor-right,.list-floor-right2{
position: absolute;
right: 52px;
top: 18px;
@@ -1337,7 +1363,17 @@ input::-webkit-input-placeholder{
font-size: 18px;
text-shadow: none;
}
-.hot-list-ul{
+.hot-list-box-top2{
+ height: 50px;
+ width: 240px;
+ text-align: center;
+ line-height: 50px;
+ color: #55E4D8;
+ font-weight: 700;
+ font-size: 18px;
+ text-shadow: none;
+}
+.hot-list-ul,.hot-list-ul2{
width: 240px;
height: 578px;
overflow-y: scroll;
@@ -1411,6 +1447,15 @@ input::-webkit-input-placeholder{
.hot-list-ul::-webkit-scrollbar-thumb{
background: #E53985 !important;
}
+.hot-list-ul2::-webkit-scrollbar{
+ width: 3px !important;
+}
+.hot-list-ul2::-webkit-scrollbar-track{
+ background: #FFF4FA !important;
+}
+.hot-list-ul2::-webkit-scrollbar-thumb{
+ background: #E53985 !important;
+}
.online-list-box{
position: relative;
width: 400px;
diff --git a/room/images/img_v2_8a377a9b-33a9-4a48-a83c-5a9f2e525e9g.png b/room/images/interac-box-en.png
similarity index 100%
rename from room/images/img_v2_8a377a9b-33a9-4a48-a83c-5a9f2e525e9g.png
rename to room/images/interac-box-en.png
diff --git a/room/images/img_v2_c3010ac4-9e01-4e06-b0a1-4cbe62f6ff8g.png b/room/images/interac-box.png
similarity index 100%
rename from room/images/img_v2_c3010ac4-9e01-4e06-b0a1-4cbe62f6ff8g.png
rename to room/images/interac-box.png
diff --git a/room/lib/roomLang.js b/room/lib/roomLang.js
index 237abcd..fb2200a 100644
--- a/room/lib/roomLang.js
+++ b/room/lib/roomLang.js
@@ -52,6 +52,7 @@ var langList=[
room48:'receive',
room49:'home',
room50:'he',
+ room51:'Interactive Rank',
msg1:"Already paid, will enter the live room soon",
msg2:"Please enter the content to send",
msg3:"Followed",
@@ -186,6 +187,7 @@ var langList=[
room48:'收到',
room49:'主頁',
room50:'他',
+ room51:'互動榜',
msg1:'已付費，即將進入直播間',
msg2:'請輸入要發送的內容',
msg3:'關注成功',
diff --git a/room/liveRoom.html b/room/liveRoom.html
index d63e5d7..dc2cb61 100644
--- a/room/liveRoom.html
+++ b/room/liveRoom.html
@@ -20,8 +20,8 @@
<link rel="stylesheet" href="../css/base.css?v=2023053101">
<link rel="stylesheet" href="../css/layer.css">
<link rel="stylesheet" href="../css/swiper.min.css">
- <link rel="stylesheet" href="css/index.css?v=2023060101">
- <link rel="stylesheet" href="css/room.css?v=2023053101">
+ <link rel="stylesheet" href="css/index.css?v=2023060601">
+ <link rel="stylesheet" href="css/room.css?v=2023060601">
<link rel="stylesheet" href="../css/login.css?v=2023053101">
<script src="../lib/flv.js"></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
@@ -155,15 +155,15 @@
</ul>
</div>
</div>
- <div style="display: none;" class="hot-box2">
+ <div class="hot-box2">
<span></span>
- <div class="hot-list-box">
+ <div class="hot-list-box2">
<div style="top: 168px;" class="rich-list-box-jiao"></div>
- <img class="list-floor-left" src="images/list-floor.png" alt="">
- <img class="list-floor-right" src="images/list-floor.png" alt="">
- <div class="hot-list-box-top">人氣榜</div>
+ <img class="list-floor-left2" src="images/list-floor.png" alt="">
+ <img class="list-floor-right2" src="images/list-floor.png" alt="">
+ <div class="hot-list-box-top2">互動榜</div>
<ul class="hot-list-ul2">
- <!-- <li>
+ <li>
<div class="hot-list-li-box1">4</div>
<div class="hot-list-li-box2">
<img class="rich-list-king" src="images/r1.png" alt="">
@@ -173,7 +173,7 @@
<p class="hot-list-p1">Mlonghoursus</p>
<p class="hot-list-p2">123124</p>
</div>
- </li> -->
+ </li>
</ul>
</div>
</div>
@@ -629,6 +629,7 @@ $(function () {
$(".roomLang-txt23").text(langList[sessionStorage.lang].room23)
$(".guard-btn").text(langList[sessionStorage.lang].room24)
$(".hot-list-box-top").text(langList[sessionStorage.lang].room25)
+ $(".hot-list-box-top2").text(langList[sessionStorage.lang].room51)
$(".roomLang-txt26").text(langList[sessionStorage.lang].room26)
$(".roomLang-txt27").text(langList[sessionStorage.lang].room27)
$(".roomLang-txt28").text(langList[sessionStorage.lang].room28)
@@ -850,7 +851,7 @@ $(function () {
layer.closeAll()
})
$(".layer-gift-btn2").unbind("click").on("click",function(){
- window.open("https://www.footseen.com/footseen/phonepay/applepay.html?lang="+sessionStorage.lang+"&gofrom=web&cidStr="+sessionStorage.myCid+"&uid="+localStorage.uid+"&token="+localStorage.token+"&os=h5&appversion=7&osStr=h5")
+ window.open("../reg/index.html")
})
}else{
setTimeout(function(){
@@ -887,6 +888,7 @@ $(function () {
}
}
$(".hot-box >span").text(data.roomOtherInfo.popularNum)
+ $(".hot-box2 >span").text(data.roomOtherInfo.interacNum)
$(".rich-box >span").text(data.roomOtherInfo.charm)
$(".mc-tips div").text(data.roomBaseInfo.sign.replace("Firefly Live","Footseen"))
var html = [];
@@ -944,6 +946,7 @@ $(function () {
})
loginGo()
hotList()
+ popular()
richGuard(0)
giftList(1)
richMouse()
@@ -956,6 +959,7 @@ $(function () {
online()
richGuard(richType)
hotList()
+ popular()
},60000)
if(localStorage.uid!=undefined){
myDiamond()
@@ -1675,6 +1679,17 @@ $(function () {
$(".hot-list-box").fadeOut(150)
}, 350)
})
+ var tHot2 = null
+ $(".hot-box2").on("mouseover", function () {
+ clearInterval(tHot2)
+ $(".hot-list-box2").fadeIn(150)
+ $(".rich-list-box2").fadeOut(0)
+ })
+ $(".hot-box2").on("mouseout", function () {
+ tHot2 = setTimeout(function () {
+ $(".hot-list-box2").fadeOut(150)
+ }, 350)
+ })
}
function richGuard(e) {
$.ajax({
@@ -1746,6 +1761,65 @@ $(function () {
}
})
}
+ function hotList() {
+ $.ajax({
+ url: $ip + 'rank/popular/list',
+ data: {
+ pageID: localStorage.canvasCode,
+ },
+ success: function (data) {
+ //console.log("热门榜单", data)
+ var html = [];
+ for (var i = 0; i < data.rankList.length; i++) {
+ var list=data.rankList[i]
+ if(list.uid==sessionStorage.roomId)html += '<a href="javascript:;"><li>';
+ else html += '<a target="_blank" href="https://www.footseen.xyz/room/liveRoom.html?roomId='+list.uid+'"><li>';
+ html += '<div class="hot-list-li-box1">' + (i + 1) + '</div>';
+ html += '<div class="hot-list-li-box2">';
+ if (i < 3) html += '<img class="rich-list-king" src="images/r' + (i + 1) + '.png" alt="">';
+ html += '<img class="rich-list-face" src="https://zhibocdn.yabolive.net/comm' + list.face + '?x-oss-process=image/resize,w_44" alt="">';
+ html += '<p class="hot-list-p1">' + list.nickname + '</p>';
+ html += '<p class="hot-list-p2">' + list.score + '</p>';
+ html += '</div>';
+ html += '</li></a>';
+ }
+ $(".hot-list-ul").html(html)
+ $(".rich-list-face").on("error",function(){
+ $(this).attr("src","images/face.png")
+ })
+ }
+ })
+ }
+ function popular(){
+ $.ajax({
+ url:$ip+'rank/interac/list',
+ data:{
+ pageID: localStorage.canvasCode,
+
+ },
+ success:function(data){
+ // console.log('人氣榜单',data)
+ var html = [];
+ for (var i = 0; i < data.rankList.length; i++) {
+ var list=data.rankList[i]
+ if(list.uid==sessionStorage.roomId)html += '<a href="javascript:;"><li>';
+ else html += '<a target="_blank" href="https://www.footseen.xyz/room/liveRoom.html?roomId='+list.uid+'"><li>';
+ html += '<div class="hot-list-li-box1">' + (i + 1) + '</div>';
+ html += '<div class="hot-list-li-box2">';
+ if (i < 3) html += '<img class="rich-list-king" src="images/r' + (i + 1) + '.png" alt="">';
+ html += '<img class="rich-list-face" src="https://zhibocdn.yabolive.net/comm' + list.face + '?x-oss-process=image/resize,w_44" alt="">';
+ html += '<p class="hot-list-p1">' + list.nickname + '</p>';
+ html += '<p class="hot-list-p2">' + list.score + '</p>';
+ html += '</div>';
+ html += '</li></a>';
+ }
+ $(".hot-list-ul2").html(html)
+ $(".rich-list-face").on("error",function(){
+ $(this).attr("src","images/face.png")
+ })
+ }
+ })
+ }
function backPack(){
$.ajax({
@@ -3419,6 +3493,7 @@ $(function () {
if(obj.cid == 4700){
var list=JSON.parse(obj.content)
if(list.content.popularNum>0)$(".hot-box >span").text(list.content.popularNum)
+ if(list.content.interacNum>0)$(".hot-box2 >span").text(list.content.interacNum)
}
//主播直播状态
if (obj.cid == 4300){