diff --git a/view/peko/modules/roomRank/css/index.css b/view/peko/modules/roomRank/css/index.css new file mode 100644 index 0000000..e5182cd --- /dev/null +++ b/view/peko/modules/roomRank/css/index.css @@ -0,0 +1,544 @@ +html, +body { + width: 100%; + background: linear-gradient(0deg, #020B27 0%, #1D181B 99%); + backdrop-filter: blur(0px); + overflow: hidden; +} + +.back { + position: fixed; + top: 0.26667rem; + left: 0.32rem; + z-index: 99; + width: 0.82667rem; + height: 0.82667rem; +} + +.back img { + width: 100%; + height: 100%; +} + +.back p { + color: #fff; + font-size: 0.42667rem; + position: absolute; + width: 9rem; + left: 0; + top: 0; + height: 100%; + text-align: center; + line-height: 0.82667rem; +} + +.largestBox { + width: 10rem; + min-height: 15.38667rem; + background: url(../images/bg.png) no-repeat; + background-size: 10rem 15.38667rem; + margin: 0 auto; + position: relative; + box-sizing: border-box; + padding: 1.2rem 0 0 0; +} + +.largestBox .title { + width: 7.06667rem; + height: 1.14667rem; + position: absolute; + top: -0.14667rem; + left: 50%; + transform: translateX(-50%); +} + +.largestBox .tab { + width: 3.65333rem; + height: 0.53333rem; + line-height: 0.53333rem; + display: flex; + justify-content: space-between; + margin: 0 auto 0; +} + +.largestBox .tab div { + position: relative; + color: rgba(255, 255, 255, 0.7); + font-size: 0.37333rem; + font-weight: 600; +} + +.largestBox .tab div span { + background: none; + width: 0.32rem; + height: 0.08rem; + border-radius: 0.08rem; + position: absolute; + bottom: -0.10667rem; + left: 50%; + transform: translateX(-50%); +} + +.largestBox .tab .tabColor1 { + color: #fff; + font-size: 0.37333rem; +} + +.largestBox .tab .tabColor1 span { + background: #FA7814; +} + +.largestBox .tab .tabColor2 { + color: #fff; +} + +.largestBox .tab .tabColor2 span { + background: #A34DFF; +} + +.largestBox .dayTab { + width: 3.33333rem; + height: 0.61333rem; + margin: 0.34667rem auto 0; + display: flex; + justify-content: space-between; +} + +.largestBox .dayTab div { + width: 1.33333rem; + height: 0.61333rem; + line-height: 0.61333rem; + border-radius: 0.61333rem; + text-align: center; + color: rgba(255, 255, 255, 0.7); + background: rgba(210, 172, 252, 0.4); + font-size: 0.32rem; + font-weight: 500; +} + +.largestBox .dayTab .dayTabColor1 { + background: #fff; + color: #FA7814; +} + +.largestBox .dayTab .dayTabColor2 { + background: #fff; + color: #A34DFF; +} + +.largestBox .top3 { + width: 8.8rem; + height: 0.01333rem; + margin: 3.04rem auto 0; + position: relative; +} + +.largestBox .top3 .no1 { + width: 3.17333rem; + height: 2.88rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -2.88rem; +} + +.largestBox .top3 .no1 .box { + width: 100%; + height: 100%; + position: absolute; +} + +.largestBox .top3 .no1 .box .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.largestBox .top3 .no1 .box .tx { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 50%; + top: 0.58667rem; + transform: translateX(-50%); + border-radius: 50%; +} + +.largestBox .top3 .no1 .box p { + width: 100%; + position: absolute; + left: 0; + bottom: -0.56rem; + text-align: center; +} + +.largestBox .top3 .no1 .box p span { + vertical-align: middle; + color: #E6ECF5; + font-size: 0.37333rem; +} + +.largestBox .top3 .no1 .box p .sp { + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + display: inline-block; +} + +.largestBox .top3 .no1 .box p .sp img { + display: inline-block; + width: 0.21333rem; + height: 0.21333rem; + border-radius: 50%; + margin: 0.06667rem auto 0; +} + +.largestBox .top3 .no1 .box p .boy { + background: #6BB3FF; +} + +.largestBox .top3 .no1 .box p .woman { + background: #FF80CC; +} + +.largestBox .top3 .no1 .box .icon { + width: 100%; + height: 0.48rem; + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: -1.12rem; + padding: 0 0.6rem; +} + +.largestBox .top3 .no1 .box .icon img { + display: block; + width: 0.96rem; + height: 0.48rem; +} + +.largestBox .top3 .no1 .box .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + left: 0; + bottom: -1.53333rem; +} + +.largestBox .top3 .no2 { + width: 2.66667rem; + height: 2.37333rem; + position: absolute; + left: 0; + top: -2.4rem; +} + +.largestBox .top3 .no2 .box { + width: 100%; + height: 100%; + position: absolute; +} + +.largestBox .top3 .no2 .box .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.largestBox .top3 .no2 .box .tx { + width: 1.70667rem; + height: 1.70667rem; + position: absolute; + left: 50%; + top: 0.45333rem; + transform: translateX(-50%); + border-radius: 50%; +} + +.largestBox .top3 .no2 .box p { + width: 100%; + position: absolute; + left: 0; + bottom: -0.56rem; + text-align: center; +} + +.largestBox .top3 .no2 .box p span { + vertical-align: middle; + color: #E6ECF5; + font-size: 0.37333rem; +} + +.largestBox .top3 .no2 .box p .sp { + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + display: inline-block; +} + +.largestBox .top3 .no2 .box p .sp img { + display: inline-block; + width: 0.21333rem; + height: 0.21333rem; + border-radius: 50%; + margin: 0.06667rem auto 0; +} + +.largestBox .top3 .no2 .box p .boy { + background: #6BB3FF; +} + +.largestBox .top3 .no2 .box p .woman { + background: #FF80CC; +} + +.largestBox .top3 .no2 .box .icon { + width: 100%; + height: 0.48rem; + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: -1.12rem; + padding: 0 0.33333rem; +} + +.largestBox .top3 .no2 .box .icon img { + display: block; + width: 0.96rem; + height: 0.48rem; +} + +.largestBox .top3 .no2 .box .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + left: 0; + bottom: -1.53333rem; +} + +.largestBox .top3 .no3 { + width: 2.66667rem; + height: 2.37333rem; + position: absolute; + right: 0; + top: -2.4rem; +} + +.largestBox .top3 .no3 .box { + width: 100%; + height: 100%; + position: absolute; +} + +.largestBox .top3 .no3 .box .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.largestBox .top3 .no3 .box .tx { + width: 1.70667rem; + height: 1.70667rem; + position: absolute; + left: 50%; + top: 0.45333rem; + transform: translateX(-50%); + border-radius: 50%; +} + +.largestBox .top3 .no3 .box p { + width: 100%; + position: absolute; + left: 0; + bottom: -0.56rem; + text-align: center; +} + +.largestBox .top3 .no3 .box p span { + vertical-align: middle; + color: #E6ECF5; + font-size: 0.37333rem; +} + +.largestBox .top3 .no3 .box p .sp { + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + display: inline-block; +} + +.largestBox .top3 .no3 .box p .sp img { + display: inline-block; + width: 0.21333rem; + height: 0.21333rem; + border-radius: 50%; + margin: 0.06667rem auto 0; +} + +.largestBox .top3 .no3 .box p .boy { + background: #6BB3FF; +} + +.largestBox .top3 .no3 .box p .woman { + background: #FF80CC; +} + +.largestBox .top3 .no3 .box .icon { + width: 100%; + height: 0.48rem; + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: -1.12rem; + padding: 0 0.33333rem; +} + +.largestBox .top3 .no3 .box .icon img { + display: block; + width: 0.96rem; + height: 0.48rem; +} + +.largestBox .top3 .no3 .box .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + left: 0; + bottom: -1.53333rem; +} + +.largestBox ul { + width: 9.57333rem; + height: 7.70667rem; + margin: 1.81333rem auto 0; + background: rgba(255, 167, 141, 0.16); + border-radius: 0.42667rem 0.42667rem 0px 0px; + border: 0.02667rem solid rgba(255, 217, 115, 0.5); + backdrop-filter: blur(7px); + border-bottom: none; + box-sizing: border-box; + padding: 0.21333rem 0 1.86667rem; + overflow-y: scroll; +} + +.largestBox ul::-webkit-scrollbar { + display: none; +} + +.largestBox ul li { + width: 100%; + height: 1.92rem; + box-sizing: border-box; + padding: 0 0.33333rem; + overflow: hidden; +} + +.largestBox ul li .num { + width: 0.53333rem; + height: 100%; + line-height: 1.92rem; + text-align: center; + color: #E6ECF5; + font-size: 0.42667rem; + font-weight: 500; + float: left; + margin-right: 0.16rem; +} + +.largestBox ul li .tx { + display: block; + float: left; + width: 1.28rem; + height: 1.28rem; + border-radius: 1.28rem; + margin-top: 0.32rem; + margin-right: 0.21333rem; +} + +.largestBox ul li .userInfo { + width: 2.8rem; + float: left; +} + +.largestBox ul li .userInfo p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: 0.4rem; + margin-bottom: 0.10667rem; + color: #E6ECF5; + font-size: 0.37333rem; + font-weight: 500; +} + +.largestBox ul li .userInfo img { + display: inline-block; + width: 0.96rem; + height: 0.48rem; + margin-right: 0.10667rem; +} + +.largestBox ul li .score { + float: right; + text-align: right; +} + +.largestBox ul li .score p { + color: #E6ECF5; + font-size: 0.37333rem; + font-weight: 600; + margin-top: 0.48rem; + margin-bottom: 0.06667rem; +} + +.largestBox ul li .score span { + color: #B1B5BD; + font-size: 0.29333rem; + font-weight: 400; + display: block; +} + +.layui-m-layershade { + background-color: transparent !important; +} + +.layui-m-layer2 .layui-m-layerchild { + width: 3rem !important; + height: 3rem !important; + border: none !important; + box-shadow: none !important; + color: #fff !important; + background: rgba(0, 0, 0, 0.6) !important; +} + +.layui-m-layer2 .layui-m-layercont { + text-align: center !important; + padding: 0 !important; + line-height: 0 !important; + margin-top: 0.8rem !important; +} diff --git a/view/peko/modules/roomRank/css/index.scss b/view/peko/modules/roomRank/css/index.scss new file mode 100644 index 0000000..fdb4a71 --- /dev/null +++ b/view/peko/modules/roomRank/css/index.scss @@ -0,0 +1,553 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + background: linear-gradient(0deg, #020B27 0%, #1D181B 99%); + backdrop-filter: blur(0px); + // background: #0B1836; + overflow: hidden; +} + +.back { + position: fixed; + top: px2rem(20); + left: px2rem(24); + z-index: 99; + width: px2rem(62); + height: px2rem(62); + + img { + width: 100%; + height: 100%; + } + + p { + color: #fff; + font-size: px2rem(32); + position: absolute; + width: 9rem; + left: 0; + top: 0; + height: 100%; + text-align: center; + line-height: px2rem(62); + } +} + +.largestBox { + width: px2rem(750); + min-height: px2rem(1154); + background: url(../images/bg.png) no-repeat; + background-size: px2rem(750) px2rem(1154); + margin: 0 auto; + position: relative; + box-sizing: border-box; + padding: px2rem(90) 0 0 0; + + .title { + width: px2rem(530); + height: px2rem(86); + position: absolute; + top: px2rem(-11); + left: 50%; + transform: translateX(-50%); + } + + .tab { + width: px2rem(274); + height: px2rem(40); + line-height: px2rem(40); + display: flex; + justify-content: space-between; + margin: 0 auto 0; + + div { + position: relative; + color: rgba(255, 255, 255, .7); + font-size: px2rem(28); + font-weight: 600; + + span { + background: none; + width: px2rem(24); + height: px2rem(6); + border-radius: px2rem(6); + position: absolute; + bottom: px2rem(-8); + left: 50%; + transform: translateX(-50%); + } + } + + .tabColor1 { + color: #fff; + font-size: px2rem(28); + + span { + background: #FA7814; + } + } + + .tabColor2 { + color: #fff; + + span { + background: #A34DFF; + } + } + } + + .dayTab { + // width: px2rem(400); + width: px2rem(250); + height: px2rem(46); + margin: px2rem(26) auto 0; + display: flex; + justify-content: space-between; + + div { + width: px2rem(100); + height: px2rem(46); + line-height: px2rem(46); + border-radius: px2rem(46); + text-align: center; + color: rgba(255, 255, 255, .7); + background: rgba(210, 172, 252, .4); + font-size: px2rem(24); + font-weight: 500; + } + + .dayTabColor1 { + background: #fff; + color: #FA7814; + } + + .dayTabColor2 { + background: #fff; + color: #A34DFF; + } + } + + .top3 { + width: px2rem(660); + height: px2rem(1); + margin: px2rem(228) auto 0; + position: relative; + + .no1 { + width: px2rem(238); + height: px2rem(216); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(-216); + + .box { + width: 100%; + height: 100%; + position: absolute; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 50%; + top: px2rem(44); + // top: px2rem(34); + transform: translateX(-50%); + border-radius: 50%; + } + + p { + width: 100%; + position: absolute; + left: 0; + bottom: px2rem(-42); + text-align: center; + + span { + vertical-align: middle; + color: #E6ECF5; + font-size: px2rem(28); + } + + .sp { + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + display: inline-block; + + img { + display: inline-block; + width: px2rem(16); + height: px2rem(16); + border-radius: 50%; + margin: px2rem(5) auto 0; + } + } + + .boy { + background: #6BB3FF; + } + + .woman { + background: #FF80CC; + } + + } + + .icon { + width: 100%; + height: px2rem(36); + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: px2rem(-84); + padding: 0 px2rem(45); + + img { + display: block; + width: px2rem(72); + height: px2rem(36); + } + } + + .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + left: 0; + bottom: px2rem(-115); + } + } + } + + .no2 { + width: px2rem(200); + height: px2rem(178); + position: absolute; + left: 0; + top: px2rem(-180); + + .box { + width: 100%; + height: 100%; + position: absolute; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(128); + height: px2rem(128); + position: absolute; + left: 50%; + top: px2rem(34); + transform: translateX(-50%); + border-radius: 50%; + } + + p { + width: 100%; + position: absolute; + left: 0; + bottom: px2rem(-42); + text-align: center; + + span { + vertical-align: middle; + color: #E6ECF5; + font-size: px2rem(28); + } + + .sp { + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + display: inline-block; + + img { + display: inline-block; + width: px2rem(16); + height: px2rem(16); + border-radius: 50%; + margin: px2rem(5) auto 0; + } + } + + .boy { + background: #6BB3FF; + } + + .woman { + background: #FF80CC; + } + + } + + .icon { + width: 100%; + height: px2rem(36); + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: px2rem(-84); + padding: 0 px2rem(25); + + img { + display: block; + width: px2rem(72); + height: px2rem(36); + } + } + + .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + left: 0; + bottom: px2rem(-115); + } + } + } + + .no3 { + width: px2rem(200); + height: px2rem(178); + position: absolute; + right: 0; + top: px2rem(-180); + + .box { + width: 100%; + height: 100%; + position: absolute; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(128); + height: px2rem(128); + position: absolute; + left: 50%; + top: px2rem(34); + transform: translateX(-50%); + border-radius: 50%; + } + + p { + width: 100%; + position: absolute; + left: 0; + bottom: px2rem(-42); + text-align: center; + + span { + vertical-align: middle; + color: #E6ECF5; + font-size: px2rem(28); + } + + .sp { + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + display: inline-block; + + img { + display: inline-block; + width: px2rem(16); + height: px2rem(16); + border-radius: 50%; + margin: px2rem(5) auto 0; + } + } + + .boy { + background: #6BB3FF; + } + + .woman { + background: #FF80CC; + } + + } + + .icon { + width: 100%; + height: px2rem(36); + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: px2rem(-84); + padding: 0 px2rem(25); + + img { + display: block; + width: px2rem(72); + height: px2rem(36); + } + } + + .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + left: 0; + bottom: px2rem(-115); + } + } + } + } + + ul { + width: px2rem(718); + height: px2rem(578); + margin: px2rem(136) auto 0; + background: rgba(255, 167, 141, 0.16); + border-radius: px2rem(32) px2rem(32) 0px 0px; + border: px2rem(2) solid rgba(255, 217, 115, 0.5); + backdrop-filter: blur(7px); + border-bottom: none; + box-sizing: border-box; + padding: px2rem(16) 0 px2rem(140); + overflow-y: scroll; + &::-webkit-scrollbar{ + display: none; + } + + li { + width: 100%; + height: px2rem(144); + box-sizing: border-box; + padding: 0 px2rem(25); + overflow: hidden; + + .num { + width: px2rem(40); + height: 100%; + line-height: px2rem(144); + text-align: center; + color: #E6ECF5; + font-size: px2rem(32); + font-weight: 500; + float: left; + margin-right: px2rem(12); + } + + .tx { + display: block; + float: left; + width: px2rem(96); + height: px2rem(96); + border-radius: px2rem(96); + margin-top: px2rem(24); + margin-right: px2rem(16); + } + + .userInfo { + width: px2rem(210); + float: left; + + p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: px2rem(30); + margin-bottom: px2rem(8); + color: #E6ECF5; + font-size: px2rem(28); + font-weight: 500; + } + + img { + display: inline-block; + width: px2rem(72); + height: px2rem(36); + margin-right: px2rem(8); + } + } + + .score { + float: right; + text-align: right; + + p { + color: #E6ECF5; + font-size: px2rem(28); + font-weight: 600; + margin-top: px2rem(36); + margin-bottom: px2rem(5); + } + + span { + color: #B1B5BD; + font-size: px2rem(22); + font-weight: 400; + display: block; + } + } + } + } +} + +.layui-m-layershade { + background-color: rgba(0, 0, 0, .0) !important; +} + +.layui-m-layer2 .layui-m-layerchild { + width: 3rem !important; + height: 3rem !important; + border: none !important; + box-shadow: none !important; + color: #fff !important; + background: rgba(0, 0, 0, .6) !important; +} + +.layui-m-layer2 .layui-m-layercont { + text-align: center !important; + padding: 0 !important; + line-height: 0 !important; + margin-top: 0.8rem !important; +} \ No newline at end of file diff --git a/view/peko/modules/roomRank/images/bg.png b/view/peko/modules/roomRank/images/bg.png new file mode 100644 index 0000000..956bac8 Binary files /dev/null and b/view/peko/modules/roomRank/images/bg.png differ diff --git a/view/peko/modules/roomRank/images/boy.png b/view/peko/modules/roomRank/images/boy.png new file mode 100644 index 0000000..290a144 Binary files /dev/null and b/view/peko/modules/roomRank/images/boy.png differ diff --git a/view/peko/modules/roomRank/images/icon1.png b/view/peko/modules/roomRank/images/icon1.png new file mode 100644 index 0000000..b02ae52 Binary files /dev/null and b/view/peko/modules/roomRank/images/icon1.png differ diff --git a/view/peko/modules/roomRank/images/icon2.png b/view/peko/modules/roomRank/images/icon2.png new file mode 100644 index 0000000..79f2ac8 Binary files /dev/null and b/view/peko/modules/roomRank/images/icon2.png differ diff --git a/view/peko/modules/roomRank/images/logo.png b/view/peko/modules/roomRank/images/logo.png new file mode 100644 index 0000000..4c661e5 Binary files /dev/null and b/view/peko/modules/roomRank/images/logo.png differ diff --git a/view/peko/modules/roomRank/images/no1.png b/view/peko/modules/roomRank/images/no1.png new file mode 100644 index 0000000..c537076 Binary files /dev/null and b/view/peko/modules/roomRank/images/no1.png differ diff --git a/view/peko/modules/roomRank/images/no2.png b/view/peko/modules/roomRank/images/no2.png new file mode 100644 index 0000000..03173ba Binary files /dev/null and b/view/peko/modules/roomRank/images/no2.png differ diff --git a/view/peko/modules/roomRank/images/no3.png b/view/peko/modules/roomRank/images/no3.png new file mode 100644 index 0000000..550c860 Binary files /dev/null and b/view/peko/modules/roomRank/images/no3.png differ diff --git a/view/peko/modules/roomRank/images/title.png b/view/peko/modules/roomRank/images/title.png new file mode 100644 index 0000000..d4c308c Binary files /dev/null and b/view/peko/modules/roomRank/images/title.png differ diff --git a/view/peko/modules/roomRank/images/woman.png b/view/peko/modules/roomRank/images/woman.png new file mode 100644 index 0000000..a913018 Binary files /dev/null and b/view/peko/modules/roomRank/images/woman.png differ diff --git a/view/peko/modules/roomRank/index.html b/view/peko/modules/roomRank/index.html new file mode 100644 index 0000000..8b288da --- /dev/null +++ b/view/peko/modules/roomRank/index.html @@ -0,0 +1,110 @@ + + + + + + + 房间榜 + + + + + + + +
+ + + +
+
+ 爱意榜 + +
+
+ 魅力榜 + +
+
+ +
+
日榜
+
周榜
+
月榜
+
+ +
+
+
+ + +

+ 我是很长的... + +

+
+ + +
+
10000
+
+
+
+
+ + +

+ + +

+
+ + +
+
+
+
+
+
+ + +

+ + +

+
+ + +
+
+
+
+
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/view/peko/modules/roomRank/js/index.js b/view/peko/modules/roomRank/js/index.js new file mode 100644 index 0000000..7f20fd1 --- /dev/null +++ b/view/peko/modules/roomRank/js/index.js @@ -0,0 +1,215 @@ +let urlPrefix = getUrlPrefix() +let browser = checkVersion() +let env = EnvCheck(); +var urlData = getQueryString(); +if (env == 'test') { + new VConsole(); +} +// 封装layer消息提醒框 +let layerIndex +const showLoading = (content = '加载中...') => { + layer.open({ + type: 2, + shadeClose: false, + content, + success (e) { + layerIndex = $(e).attr('index') + } + }) +} +const hideLoading = (index) => { + layer.close(index) +} +const toastMsg = (content = '操作完成', time = 2) => { + layer.open({ + content, + time, + skin: 'msg' + }) +} +var listType = 1; +var experImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_exper_'; +var charmImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_charm_'; +var typeWealth = 'day';//财富榜类型day 日 week 周 month 月 total 总 +// 初始化函数 +$(function () { + getInfoFromClient() + setTimeout(function () { + // 页面全屏 + if (browser.app) { + if (browser.android) { + window.androidJsObj.initShowNav(false) + } else { + window.webkit.messageHandlers.initShowNav.postMessage(0) + } + }; + // 顶部返回事件 + $('.back').click(() => { + if (browser.android) { + window.androidJsObj.closeWebView() + } else { + window.webkit.messageHandlers.closeWebView.postMessage(null) + } + }) + getRankingsWealth(); + }, 100) +}) +// 榜单切换 +$('.largestBox .tab div').click(function () { + var i = $(this).index() + 1; + listType = i; + $('.largestBox .tab div').removeClass('tabColor1').removeClass('tabColor2') + $(this).addClass(`tabColor${listType}`); + $('.largestBox .dayTab div').removeClass('dayTabColor1').removeClass('dayTabColor2'); + $('.largestBox .dayTab div').eq(0).addClass(`dayTabColor${listType}`); + typeWealth = 'day'; + if (listType == 1) { + getRankingsWealth(); + } else { + getReciveRankingsWealth(); + } +}) +// 日榜切换 +$('.largestBox .dayTab div').click(function () { + var i = $(this).index() + 1; + $(this).addClass(`dayTabColor${listType}`).siblings().removeClass('dayTabColor1').removeClass('dayTabColor2'); + if (i == 1) { + typeWealth = 'day';//财富榜类型day 日 week 周 month 月 total 总 + } else if (i == 2) { + typeWealth = 'week'; + } else if (i == 3) { + typeWealth = 'month'; + } + if (listType == 1) { + getRankingsWealth(); + } else { + getReciveRankingsWealth(); + } +}) +// 爱意榜接口 +function getRankingsWealth () { + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/room/rankings', + data: { + roomUid: urlData.roomUid, + type: typeWealth, + page: 1, + pageSize: 30, + }, + success (res) { + if (res.code === 200) { + listDomFun(res, 1); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('网络错误，请退出重进') + } + }) +} +// 魅力榜接口 +function getReciveRankingsWealth () { + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/room/recive/rankings', + data: { + roomUid: urlData.roomUid, + type: typeWealth, + page: 1, + pageSize: 30, + }, + success (res) { + if (res.code === 200) { + listDomFun(res, 2); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('网络错误，请退出重进') + } + }) +} +// 渲染样式 +function listDomFun (res, num) { + $('.largestBox ul li').remove(); + // 处理前三 + var top3 = res.data.rankings.slice(0, 3); + if (top3.length < 3) { + let arr = new Array(3 - top3.length).fill({ + avatar: './images/logo.png', + nick: '虚位以待', + goldAmount: '', + }) + top3.push(...arr); + } + top3.forEach((res, i) => { + if (res.avatar == './images/logo.png') { + $(`.largestBox .top3 .no${i + 1} .box p .sp`).hide(); + $(`.largestBox .top3 .no${i + 1} .box .icon`).hide(); + } else { + $(`.largestBox .top3 .no${i + 1} .box p .sp`).show(); + $(`.largestBox .top3 .no${i + 1} .box .icon`).show(); + } + $(`.largestBox .top3 .no${i + 1} .box .tx`).attr('src', res.avatar); + $(`.largestBox .top3 .no${i + 1} .box .ts`).attr('uid', res.uid); + $(`.largestBox .top3 .no${i + 1} .box p .sp1`).text(res.nick.length > 6 ? res.nick.slice(0, 6) + '...' : res.nick); + $(`.largestBox .top3 .no${i + 1} .box p .sp`).removeClass('boy').removeClass('woman') + $(`.largestBox .top3 .no${i + 1} .box p .sp`).addClass(`${res.gender == 1 ? 'boy' : 'woman'}`); + $(`.largestBox .top3 .no${i + 1} .box p .sp img`).attr('src', res.gender == 1 ? './images/boy.png' : './images/woman.png'); + $(`.largestBox .top3 .no${i + 1} .box .icon .icon1`).attr('src', experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`) + $(`.largestBox .top3 .no${i + 1} .box .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`) + $(`.largestBox .top3 .no${i + 1} .box .score`).text(unitProcessing(res.goldAmount, 10000, 1, 'W')); + }) + // 处理非前三 + var notTop3 = res.data.rankings.slice(3); + var str = ''; + notTop3.forEach((res, i) => { + str += ` +
  • +
    ${i + 4}
    + +
    +

    ${res.nick}

    + + +
    +
    +

    ${unitProcessing(res.goldAmount, 10000, 1, 'W')}

    + ${num == 1 ? '爱意值' : '魅力值'} +
    +
    • + ` + }) + $('.largestBox ul').append(str); +} +// 点击前三跳转房间 +$('.largestBox').on('click', '.top3 .no .box .ts', function () { + var uid = $(this).attr('uid'); + if (browser.ios) { + window.webkit.messageHandlers.openPersonPage.postMessage(uid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === 'object') { + window.androidJsObj.openPersonPage(uid); + } + } +}) +// 点击非前三跳转房间 +$('.largestBox').on('click', 'ul li .tx', function () { + var uid = $(this).attr('uid'); + if (browser.ios) { + window.webkit.messageHandlers.openPersonPage.postMessage(uid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === 'object') { + window.androidJsObj.openPersonPage(uid); + } + } +}) \ No newline at end of file diff --git a/view/peko/modules/room_rank/css/index.css b/view/peko/modules/room_rank/css/index.css index 6759dc0..e5182cd 100644 --- a/view/peko/modules/room_rank/css/index.css +++ b/view/peko/modules/room_rank/css/index.css @@ -1,229 +1,544 @@ -@font-face { - font-family: "pingfang-bold"; - src: url("../../../common/fonts/PingFang Bold.ttf"); - src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg"); -} -@font-face { - font-family: "pingfang-medium"; - src: url("../../../common/fonts/PingFang Medium.ttf"); - src: url("../../../common/fonts/PingFang Medium.ttf") format("woff"), url("../../../common/fonts/PingFang Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang Medium.ttf") format("svg"); -} +html, body { width: 100%; - font-family: "pingfang-bold"; - background-color: #7A83F5; -} - -.wrap { - display: none; -} -.wrap .tab_wrap { - position: fixed; - top: 0; - left: 0; - z-index: 99; - width: 100%; - height: 2.6666666667rem; - background: url("../images/top.png") no-repeat 0 0/100% 100%; + background: linear-gradient(0deg, #020B27 0%, #1D181B 99%); + backdrop-filter: blur(0px); overflow: hidden; } -.wrap .tab_wrap .tab_contain { + +.back { + position: fixed; + top: 0.26667rem; + left: 0.32rem; + z-index: 99; + width: 0.82667rem; + height: 0.82667rem; +} + +.back img { + width: 100%; + height: 100%; +} + +.back p { + color: #fff; + font-size: 0.42667rem; + position: absolute; + width: 9rem; + left: 0; + top: 0; + height: 100%; + text-align: center; + line-height: 0.82667rem; +} + +.largestBox { + width: 10rem; + min-height: 15.38667rem; + background: url(../images/bg.png) no-repeat; + background-size: 10rem 15.38667rem; + margin: 0 auto; + position: relative; + box-sizing: border-box; + padding: 1.2rem 0 0 0; +} + +.largestBox .title { + width: 7.06667rem; + height: 1.14667rem; + position: absolute; + top: -0.14667rem; + left: 50%; + transform: translateX(-50%); +} + +.largestBox .tab { + width: 3.65333rem; + height: 0.53333rem; + line-height: 0.53333rem; display: flex; justify-content: space-between; - align-items: center; - width: 8.5333333333rem; - height: 0.96rem; - margin: 0.6666666667rem auto 0.3466666667rem; - background-color: #9785FA; - border-radius: 0.5333333333rem; - color: rgba(255, 255, 255, 0.6); - font-size: 0.4rem; + margin: 0 auto 0; } -.wrap .tab_wrap .tab_contain p { - width: 4.16rem; - height: 0.8533333333rem; - line-height: 0.8533333333rem; - margin: 0 0.0533333333rem; - text-align: center; - font-weight: bold; -} -.wrap .tab_wrap .tab_contain p.active { - background-color: #fff; - color: #7898F3; - border-radius: 0.5333333333rem; -} -.wrap .tab_wrap .rank_type { - display: flex; - margin-left: 0.8rem; -} -.wrap .tab_wrap .rank_type p { + +.largestBox .tab div { position: relative; - margin-right: 0.4266666667rem; - color: rgba(255, 255, 255, 0.6); + color: rgba(255, 255, 255, 0.7); + font-size: 0.37333rem; + font-weight: 600; +} + +.largestBox .tab div span { + background: none; + width: 0.32rem; + height: 0.08rem; + border-radius: 0.08rem; + position: absolute; + bottom: -0.10667rem; + left: 50%; + transform: translateX(-50%); +} + +.largestBox .tab .tabColor1 { + color: #fff; + font-size: 0.37333rem; +} + +.largestBox .tab .tabColor1 span { + background: #FA7814; +} + +.largestBox .tab .tabColor2 { + color: #fff; +} + +.largestBox .tab .tabColor2 span { + background: #A34DFF; +} + +.largestBox .dayTab { + width: 3.33333rem; + height: 0.61333rem; + margin: 0.34667rem auto 0; + display: flex; + justify-content: space-between; +} + +.largestBox .dayTab div { + width: 1.33333rem; + height: 0.61333rem; + line-height: 0.61333rem; + border-radius: 0.61333rem; + text-align: center; + color: rgba(255, 255, 255, 0.7); + background: rgba(210, 172, 252, 0.4); font-size: 0.32rem; + font-weight: 500; } -.wrap .tab_wrap .rank_type p.active { - color: white; + +.largestBox .dayTab .dayTabColor1 { + background: #fff; + color: #FA7814; } -.wrap .tab_wrap .rank_type p.active::after { - content: ""; - position: absolute; - bottom: -0.2133333333rem; - left: 50%; - transform: translateX(-50%); - width: 0.2666666667rem; - height: 0.1066666667rem; - border-radius: 0.0533333333rem; - background-color: #fff; + +.largestBox .dayTab .dayTabColor2 { + background: #fff; + color: #A34DFF; } -.wrap .tab_wrap .rank_type p:last-child { - display: none; -} -.wrap .rank_wrap { - overflow: auto; -} -.wrap .rank_wrap .top_three_wrap { + +.largestBox .top3 { + width: 8.8rem; + height: 0.01333rem; + margin: 3.04rem auto 0; position: relative; - width: 100%; - height: 5.3333333333rem; - background: url("../images/topthree-bg.png") no-repeat 0 0/100% 100%; - margin-top: 2.6666666667rem; } -.wrap .rank_wrap .top_three_wrap .top_three_item { + +.largestBox .top3 .no1 { + width: 3.17333rem; + height: 2.88rem; position: absolute; left: 50%; transform: translateX(-50%); - width: 2.32rem; - text-align: center; - color: #fff; + top: -2.88rem; } -.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2), .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) { - left: 0.8rem; - transform: translateX(0); -} -.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar { - width: 1.8933333333rem; - height: 2.1866666667rem; - margin-top: 1.4933333333rem; -} -.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar p, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p { - background-image: url("../images/second.png"); -} -.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar img, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar img { - top: -1.76rem; - width: 1.5466666667rem; - height: 1.5466666667rem; -} -.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) { - left: 6.88rem; -} -.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p { - background-image: url("../images/third.png"); -} -.wrap .rank_wrap .top_three_wrap .top_three_item .avatar { - width: 2.32rem; - height: 2.6666666667rem; - margin: 0.4533333333rem auto 0.2rem; -} -.wrap .rank_wrap .top_three_wrap .top_three_item .avatar p { - position: relative; - z-index: 99; + +.largestBox .top3 .no1 .box { width: 100%; height: 100%; - background: url("../images/first.png") no-repeat 0 0/100% 100%; + position: absolute; } -.wrap .rank_wrap .top_three_wrap .top_three_item .avatar img { - position: relative; - top: -2.1333333333rem; - width: 1.92rem; + +.largestBox .top3 .no1 .box .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.largestBox .top3 .no1 .box .tx { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 50%; + top: 0.58667rem; + transform: translateX(-50%); + border-radius: 50%; +} + +.largestBox .top3 .no1 .box p { + width: 100%; + position: absolute; + left: 0; + bottom: -0.56rem; + text-align: center; +} + +.largestBox .top3 .no1 .box p span { + vertical-align: middle; + color: #E6ECF5; + font-size: 0.37333rem; +} + +.largestBox .top3 .no1 .box p .sp { + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + display: inline-block; +} + +.largestBox .top3 .no1 .box p .sp img { + display: inline-block; + width: 0.21333rem; + height: 0.21333rem; + border-radius: 50%; + margin: 0.06667rem auto 0; +} + +.largestBox .top3 .no1 .box p .boy { + background: #6BB3FF; +} + +.largestBox .top3 .no1 .box p .woman { + background: #FF80CC; +} + +.largestBox .top3 .no1 .box .icon { + width: 100%; + height: 0.48rem; + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: -1.12rem; + padding: 0 0.6rem; +} + +.largestBox .top3 .no1 .box .icon img { + display: block; + width: 0.96rem; + height: 0.48rem; +} + +.largestBox .top3 .no1 .box .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + left: 0; + bottom: -1.53333rem; +} + +.largestBox .top3 .no2 { + width: 2.66667rem; + height: 2.37333rem; + position: absolute; + left: 0; + top: -2.4rem; +} + +.largestBox .top3 .no2 .box { + width: 100%; + height: 100%; + position: absolute; +} + +.largestBox .top3 .no2 .box .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.largestBox .top3 .no2 .box .tx { + width: 1.70667rem; + height: 1.70667rem; + position: absolute; + left: 50%; + top: 0.45333rem; + transform: translateX(-50%); + border-radius: 50%; +} + +.largestBox .top3 .no2 .box p { + width: 100%; + position: absolute; + left: 0; + bottom: -0.56rem; + text-align: center; +} + +.largestBox .top3 .no2 .box p span { + vertical-align: middle; + color: #E6ECF5; + font-size: 0.37333rem; +} + +.largestBox .top3 .no2 .box p .sp { + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + display: inline-block; +} + +.largestBox .top3 .no2 .box p .sp img { + display: inline-block; + width: 0.21333rem; + height: 0.21333rem; + border-radius: 50%; + margin: 0.06667rem auto 0; +} + +.largestBox .top3 .no2 .box p .boy { + background: #6BB3FF; +} + +.largestBox .top3 .no2 .box p .woman { + background: #FF80CC; +} + +.largestBox .top3 .no2 .box .icon { + width: 100%; + height: 0.48rem; + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: -1.12rem; + padding: 0 0.33333rem; +} + +.largestBox .top3 .no2 .box .icon img { + display: block; + width: 0.96rem; + height: 0.48rem; +} + +.largestBox .top3 .no2 .box .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + left: 0; + bottom: -1.53333rem; +} + +.largestBox .top3 .no3 { + width: 2.66667rem; + height: 2.37333rem; + position: absolute; + right: 0; + top: -2.4rem; +} + +.largestBox .top3 .no3 .box { + width: 100%; + height: 100%; + position: absolute; +} + +.largestBox .top3 .no3 .box .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.largestBox .top3 .no3 .box .tx { + width: 1.70667rem; + height: 1.70667rem; + position: absolute; + left: 50%; + top: 0.45333rem; + transform: translateX(-50%); + border-radius: 50%; +} + +.largestBox .top3 .no3 .box p { + width: 100%; + position: absolute; + left: 0; + bottom: -0.56rem; + text-align: center; +} + +.largestBox .top3 .no3 .box p span { + vertical-align: middle; + color: #E6ECF5; + font-size: 0.37333rem; +} + +.largestBox .top3 .no3 .box p .sp { + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + display: inline-block; +} + +.largestBox .top3 .no3 .box p .sp img { + display: inline-block; + width: 0.21333rem; + height: 0.21333rem; + border-radius: 50%; + margin: 0.06667rem auto 0; +} + +.largestBox .top3 .no3 .box p .boy { + background: #6BB3FF; +} + +.largestBox .top3 .no3 .box p .woman { + background: #FF80CC; +} + +.largestBox .top3 .no3 .box .icon { + width: 100%; + height: 0.48rem; + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: -1.12rem; + padding: 0 0.33333rem; +} + +.largestBox .top3 .no3 .box .icon img { + display: block; + width: 0.96rem; + height: 0.48rem; +} + +.largestBox .top3 .no3 .box .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + left: 0; + bottom: -1.53333rem; +} + +.largestBox ul { + width: 9.57333rem; + height: 7.70667rem; + margin: 1.81333rem auto 0; + background: rgba(255, 167, 141, 0.16); + border-radius: 0.42667rem 0.42667rem 0px 0px; + border: 0.02667rem solid rgba(255, 217, 115, 0.5); + backdrop-filter: blur(7px); + border-bottom: none; + box-sizing: border-box; + padding: 0.21333rem 0 1.86667rem; + overflow-y: scroll; +} + +.largestBox ul::-webkit-scrollbar { + display: none; +} + +.largestBox ul li { + width: 100%; height: 1.92rem; - border-radius: 50%; + box-sizing: border-box; + padding: 0 0.33333rem; + overflow: hidden; } -.wrap .rank_wrap .top_three_wrap .top_three_item .nick { - display: flex; - justify-content: center; - align-items: center; - font-size: 0.3733333333rem; - white-space: nowrap; -} -.wrap .rank_wrap .top_three_wrap .top_three_item .nick img { - width: 0.4rem; - width: 0.4rem; - margin-left: 0.0533333333rem; -} -.wrap .rank_wrap .top_three_wrap .top_three_item .erbanNo { - font-size: 0.2666666667rem; - color: rgba(255, 255, 255, 0.6); - margin: 0.1066666667rem 0 0.1066666667rem; -} -.wrap .rank_wrap .top_three_wrap .top_three_item .num { - font-size: 0.3733333333rem; - color: #F8FF7B; - padding-top: 0.05rem; -} -.wrap .rank_wrap ul { - height: 3.7333333333rem; - padding-top: 0.4533333333rem; - background: linear-gradient(180deg, #8C6FFA 0%, #7A83F5 100%); -} -.wrap .rank_wrap ul li { - display: flex; - align-items: center; - padding-bottom: 0.4266666667rem; - background: #7A83F5; -} -.wrap .rank_wrap ul li:nth-child(1) { - background: transparent; -} -.wrap .rank_wrap ul li:nth-child(2) { - background: transparent; -} -.wrap .rank_wrap ul li .index { - width: 0.4rem; - text-align: center; - font-size: 0.48rem; - font-weight: bold; - color: #fff; - margin: 0 0.5333333333rem; -} -.wrap .rank_wrap ul li .others_avatar { - width: 1.3333333333rem; - height: 1.3333333333rem; - margin-right: 0.4266666667rem; -} -.wrap .rank_wrap ul li .others_avatar img { - width: 100%; + +.largestBox ul li .num { + width: 0.53333rem; height: 100%; - border-radius: 50%; -} -.wrap .rank_wrap ul li .info_wrap { - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-around; - height: 0.9333333333rem; -} -.wrap .rank_wrap ul li .info_wrap .others_nick { - color: #fff; - font-size: 0.3733333333rem; -} -.wrap .rank_wrap ul li .info_wrap .others_nick img { - width: 0.4rem; - height: 0.4rem; - vertical-align: bottom; -} -.wrap .rank_wrap ul li .info_wrap .others_erbanNo { - color: rgba(255, 255, 255, 0.6); -} -.wrap .rank_wrap ul li .others_num { - color: #F8FF7B; - font-size: 0.3733333333rem; - font-weight: bold; - margin-right: 0.6666666667rem; + line-height: 1.92rem; + text-align: center; + color: #E6ECF5; + font-size: 0.42667rem; + font-weight: 500; + float: left; + margin-right: 0.16rem; } -::-webkit-scrollbar { - display: none; +.largestBox ul li .tx { + display: block; + float: left; + width: 1.28rem; + height: 1.28rem; + border-radius: 1.28rem; + margin-top: 0.32rem; + margin-right: 0.21333rem; } -/*# sourceMappingURL=index.css.map */ +.largestBox ul li .userInfo { + width: 2.8rem; + float: left; +} + +.largestBox ul li .userInfo p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: 0.4rem; + margin-bottom: 0.10667rem; + color: #E6ECF5; + font-size: 0.37333rem; + font-weight: 500; +} + +.largestBox ul li .userInfo img { + display: inline-block; + width: 0.96rem; + height: 0.48rem; + margin-right: 0.10667rem; +} + +.largestBox ul li .score { + float: right; + text-align: right; +} + +.largestBox ul li .score p { + color: #E6ECF5; + font-size: 0.37333rem; + font-weight: 600; + margin-top: 0.48rem; + margin-bottom: 0.06667rem; +} + +.largestBox ul li .score span { + color: #B1B5BD; + font-size: 0.29333rem; + font-weight: 400; + display: block; +} + +.layui-m-layershade { + background-color: transparent !important; +} + +.layui-m-layer2 .layui-m-layerchild { + width: 3rem !important; + height: 3rem !important; + border: none !important; + box-shadow: none !important; + color: #fff !important; + background: rgba(0, 0, 0, 0.6) !important; +} + +.layui-m-layer2 .layui-m-layercont { + text-align: center !important; + padding: 0 !important; + line-height: 0 !important; + margin-top: 0.8rem !important; +} diff --git a/view/peko/modules/room_rank/css/index.scss b/view/peko/modules/room_rank/css/index.scss index d263d1e..fdb4a71 100644 --- a/view/peko/modules/room_rank/css/index.scss +++ b/view/peko/modules/room_rank/css/index.scss @@ -1,277 +1,553 @@ -@function px2rem($px, $rem: 75) { - @return $px / $rem+rem; -} - -@font-face { - font-family: 'pingfang-bold'; - src: url('../../../common/fonts/PingFang\ Bold.ttf'); - src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'), - url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'), - url('../../../common/fonts/PingFang\ Bold.ttf') format('svg'); -} - -@font-face { - font-family: 'pingfang-medium'; - src: url('../../../common/fonts/PingFang\ Medium.ttf'); - src: url('../../../common/fonts/PingFang\ Medium.ttf') format('woff'), - url('../../../common/fonts/PingFang\ Medium.ttf') format('truetype'), - url('../../../common/fonts/PingFang\ Medium.ttf') format('svg'); +@function px2rem($px) { + @return $px / 75+rem; } +html, body { width: 100%; - font-family: 'pingfang-bold'; - background-color: #7A83F5; + background: linear-gradient(0deg, #020B27 0%, #1D181B 99%); + backdrop-filter: blur(0px); + // background: #0B1836; + overflow: hidden; } -.wrap { - display: none; +.back { + position: fixed; + top: px2rem(20); + left: px2rem(24); + z-index: 99; + width: px2rem(62); + height: px2rem(62); - .tab_wrap { - position: fixed; - top: 0; - left: 0; - z-index: 99; + img { width: 100%; - height: px2rem(200, ); - background: url('../images/top.png') no-repeat 0 0/100% 100%; - overflow: hidden; - - .tab_contain { - display: flex; - justify-content: space-between; - align-items: center; - width: px2rem(640, ); - height: px2rem(72, ); - margin: px2rem(50, ) auto px2rem(26, ); - background-color: #9785FA; - border-radius: px2rem(40, ); - color: rgba($color: #fff, $alpha: .6); - font-size: px2rem(30, ); - - p { - width: px2rem(312, ); - height: px2rem(64, ); - line-height: px2rem(64, ); - margin: 0 px2rem(4, ); - text-align: center; - font-weight: bold; - - &.active { - background-color: #fff; - color: #7898F3; - border-radius: px2rem(40, ); - } - } - } - - .rank_type { - display: flex; - margin-left: px2rem(60, ); - - p { - position: relative; - margin-right: px2rem(32, ); - color: rgba($color: #fff, $alpha: .6); - font-size: px2rem(24, ); - - &.active { - color: rgba($color: #fff, $alpha: 1); - - &::after { - content: ''; - position: absolute; - bottom: px2rem(-16, ); - left: 50%; - transform: translateX(-50%); - width: px2rem(20, ); - height: px2rem(8, ); - border-radius: px2rem(4, ); - background-color: #fff; - } - } - - &:last-child { - display: none; - } - } - } + height: 100%; } - .rank_wrap { - overflow: auto; + p { + color: #fff; + font-size: px2rem(32); + position: absolute; + width: 9rem; + left: 0; + top: 0; + height: 100%; + text-align: center; + line-height: px2rem(62); + } +} - .top_three_wrap { +.largestBox { + width: px2rem(750); + min-height: px2rem(1154); + background: url(../images/bg.png) no-repeat; + background-size: px2rem(750) px2rem(1154); + margin: 0 auto; + position: relative; + box-sizing: border-box; + padding: px2rem(90) 0 0 0; + + .title { + width: px2rem(530); + height: px2rem(86); + position: absolute; + top: px2rem(-11); + left: 50%; + transform: translateX(-50%); + } + + .tab { + width: px2rem(274); + height: px2rem(40); + line-height: px2rem(40); + display: flex; + justify-content: space-between; + margin: 0 auto 0; + + div { position: relative; - width: 100%; - height: px2rem(400, ); - background: url('../images/topthree-bg.png') no-repeat 0 0/100% 100%; - margin-top: px2rem(200, ); + color: rgba(255, 255, 255, .7); + font-size: px2rem(28); + font-weight: 600; - .top_three_item { + span { + background: none; + width: px2rem(24); + height: px2rem(6); + border-radius: px2rem(6); position: absolute; + bottom: px2rem(-8); left: 50%; transform: translateX(-50%); - width: px2rem(174, ); - text-align: center; - color: #fff; + } + } - &:nth-child(2), - &:nth-child(3) { - left: px2rem(60, ); - transform: translateX(0); + .tabColor1 { + color: #fff; + font-size: px2rem(28); - .avatar { - width: px2rem(142, ); - height: px2rem(164, ); - margin-top: px2rem(112, ); + span { + background: #FA7814; + } + } - p { - background-image: url('../images/second.png'); - } + .tabColor2 { + color: #fff; + + span { + background: #A34DFF; + } + } + } + + .dayTab { + // width: px2rem(400); + width: px2rem(250); + height: px2rem(46); + margin: px2rem(26) auto 0; + display: flex; + justify-content: space-between; + + div { + width: px2rem(100); + height: px2rem(46); + line-height: px2rem(46); + border-radius: px2rem(46); + text-align: center; + color: rgba(255, 255, 255, .7); + background: rgba(210, 172, 252, .4); + font-size: px2rem(24); + font-weight: 500; + } + + .dayTabColor1 { + background: #fff; + color: #FA7814; + } + + .dayTabColor2 { + background: #fff; + color: #A34DFF; + } + } + + .top3 { + width: px2rem(660); + height: px2rem(1); + margin: px2rem(228) auto 0; + position: relative; + + .no1 { + width: px2rem(238); + height: px2rem(216); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(-216); + + .box { + width: 100%; + height: 100%; + position: absolute; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 50%; + top: px2rem(44); + // top: px2rem(34); + transform: translateX(-50%); + border-radius: 50%; + } + + p { + width: 100%; + position: absolute; + left: 0; + bottom: px2rem(-42); + text-align: center; + + span { + vertical-align: middle; + color: #E6ECF5; + font-size: px2rem(28); + } + + .sp { + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + display: inline-block; img { - top: px2rem(-132, ); - width: px2rem(116, ); - height: px2rem(116, ); + display: inline-block; + width: px2rem(16); + height: px2rem(16); + border-radius: 50%; + margin: px2rem(5) auto 0; } } - } - &:nth-child(3) { - left: px2rem(516, ); - - .avatar { - p { - background-image: url('../images/third.png'); - } - } - } - - .avatar { - width: px2rem(174, ); - height: px2rem(200, ); - margin: px2rem(34, ) auto 0.2rem; - - p { - position: relative; - z-index: 99; - width: 100%; - height: 100%; - background: url('../images/first.png') no-repeat 0 0/100% 100%; + .boy { + background: #6BB3FF; } - img { - position: relative; - top: px2rem(-160, ); - width: px2rem(144, ); - height: px2rem(144, ); - border-radius: 50%; + .woman { + background: #FF80CC; } + } - .nick { + .icon { + width: 100%; + height: px2rem(36); + position: absolute; + left: 0; display: flex; - justify-content: center; - align-items: center; - font-size: px2rem(28, ); - white-space: nowrap; + justify-content: space-between; + box-sizing: border-box; + bottom: px2rem(-84); + padding: 0 px2rem(45); img { - width: px2rem(30, ); - width: px2rem(30, ); - margin-left: px2rem(4, ); + display: block; + width: px2rem(72); + height: px2rem(36); } } - .erbanNo { - font-size: px2rem(20, ); - color: rgba($color: #fff, $alpha: .6); - margin: px2rem(8, ) 0 px2rem(8, ); - } - - .num { - font-size: px2rem(28, ); - color: #F8FF7B; - padding-top: 0.05rem; + .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + left: 0; + bottom: px2rem(-115); } } } - ul { - height: px2rem(280, ); - // overflow: auto; - padding-top: px2rem(34, ); - background: linear-gradient(180deg, #8C6FFA 0%, #7A83F5 100%); + .no2 { + width: px2rem(200); + height: px2rem(178); + position: absolute; + left: 0; + top: px2rem(-180); - li { - display: flex; - align-items: center; - padding-bottom: px2rem(32, ); - background: #7A83F5; + .box { + width: 100%; + height: 100%; + position: absolute; - &:nth-child(1){ - background: transparent; - } - &:nth-child(2){ - background: transparent; + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; } - .index { - width: px2rem(30, ); + .tx { + width: px2rem(128); + height: px2rem(128); + position: absolute; + left: 50%; + top: px2rem(34); + transform: translateX(-50%); + border-radius: 50%; + } + + p { + width: 100%; + position: absolute; + left: 0; + bottom: px2rem(-42); text-align: center; - font-size: px2rem(36, ); - font-weight: bold; - color: #fff; - margin: 0 px2rem(40, ); - } - .others_avatar { - width: px2rem(100, ); - height: px2rem(100, ); - margin-right: px2rem(32, ); - - img { - width: 100%; - height: 100%; - border-radius: 50%; + span { + vertical-align: middle; + color: #E6ECF5; + font-size: px2rem(28); } - } - .info_wrap { - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-around; - height: px2rem(70, ); - - .others_nick { - color: #fff; - font-size: px2rem(28, ); + .sp { + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + display: inline-block; img { - width: px2rem(30, ); - height: px2rem(30, ); - vertical-align: bottom; + display: inline-block; + width: px2rem(16); + height: px2rem(16); + border-radius: 50%; + margin: px2rem(5) auto 0; } } - .others_erbanNo { - color: rgba($color: #fff, $alpha: .6); + .boy { + background: #6BB3FF; + } + + .woman { + background: #FF80CC; + } + + } + + .icon { + width: 100%; + height: px2rem(36); + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: px2rem(-84); + padding: 0 px2rem(25); + + img { + display: block; + width: px2rem(72); + height: px2rem(36); } } - .others_num { - color: #F8FF7B; - font-size: px2rem(28, ); - font-weight: bold; - margin-right: px2rem(50, ); + .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + left: 0; + bottom: px2rem(-115); + } + } + } + + .no3 { + width: px2rem(200); + height: px2rem(178); + position: absolute; + right: 0; + top: px2rem(-180); + + .box { + width: 100%; + height: 100%; + position: absolute; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(128); + height: px2rem(128); + position: absolute; + left: 50%; + top: px2rem(34); + transform: translateX(-50%); + border-radius: 50%; + } + + p { + width: 100%; + position: absolute; + left: 0; + bottom: px2rem(-42); + text-align: center; + + span { + vertical-align: middle; + color: #E6ECF5; + font-size: px2rem(28); + } + + .sp { + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + display: inline-block; + + img { + display: inline-block; + width: px2rem(16); + height: px2rem(16); + border-radius: 50%; + margin: px2rem(5) auto 0; + } + } + + .boy { + background: #6BB3FF; + } + + .woman { + background: #FF80CC; + } + + } + + .icon { + width: 100%; + height: px2rem(36); + position: absolute; + left: 0; + display: flex; + justify-content: space-between; + box-sizing: border-box; + bottom: px2rem(-84); + padding: 0 px2rem(25); + + img { + display: block; + width: px2rem(72); + height: px2rem(36); + } + } + + .score { + width: 100%; + text-align: center; + color: #FFDA24; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + left: 0; + bottom: px2rem(-115); + } + } + } + } + + ul { + width: px2rem(718); + height: px2rem(578); + margin: px2rem(136) auto 0; + background: rgba(255, 167, 141, 0.16); + border-radius: px2rem(32) px2rem(32) 0px 0px; + border: px2rem(2) solid rgba(255, 217, 115, 0.5); + backdrop-filter: blur(7px); + border-bottom: none; + box-sizing: border-box; + padding: px2rem(16) 0 px2rem(140); + overflow-y: scroll; + &::-webkit-scrollbar{ + display: none; + } + + li { + width: 100%; + height: px2rem(144); + box-sizing: border-box; + padding: 0 px2rem(25); + overflow: hidden; + + .num { + width: px2rem(40); + height: 100%; + line-height: px2rem(144); + text-align: center; + color: #E6ECF5; + font-size: px2rem(32); + font-weight: 500; + float: left; + margin-right: px2rem(12); + } + + .tx { + display: block; + float: left; + width: px2rem(96); + height: px2rem(96); + border-radius: px2rem(96); + margin-top: px2rem(24); + margin-right: px2rem(16); + } + + .userInfo { + width: px2rem(210); + float: left; + + p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: px2rem(30); + margin-bottom: px2rem(8); + color: #E6ECF5; + font-size: px2rem(28); + font-weight: 500; + } + + img { + display: inline-block; + width: px2rem(72); + height: px2rem(36); + margin-right: px2rem(8); + } + } + + .score { + float: right; + text-align: right; + + p { + color: #E6ECF5; + font-size: px2rem(28); + font-weight: 600; + margin-top: px2rem(36); + margin-bottom: px2rem(5); + } + + span { + color: #B1B5BD; + font-size: px2rem(22); + font-weight: 400; + display: block; } } } } } -::-webkit-scrollbar { - display: none; +.layui-m-layershade { + background-color: rgba(0, 0, 0, .0) !important; +} + +.layui-m-layer2 .layui-m-layerchild { + width: 3rem !important; + height: 3rem !important; + border: none !important; + box-shadow: none !important; + color: #fff !important; + background: rgba(0, 0, 0, .6) !important; +} + +.layui-m-layer2 .layui-m-layercont { + text-align: center !important; + padding: 0 !important; + line-height: 0 !important; + margin-top: 0.8rem !important; } \ No newline at end of file diff --git a/view/peko/modules/room_rank/images/bg.png b/view/peko/modules/room_rank/images/bg.png new file mode 100644 index 0000000..956bac8 Binary files /dev/null and b/view/peko/modules/room_rank/images/bg.png differ diff --git a/view/peko/modules/room_rank/images/boy.png b/view/peko/modules/room_rank/images/boy.png new file mode 100644 index 0000000..290a144 Binary files /dev/null and b/view/peko/modules/room_rank/images/boy.png differ diff --git a/view/peko/modules/room_rank/images/icon1.png b/view/peko/modules/room_rank/images/icon1.png new file mode 100644 index 0000000..b02ae52 Binary files /dev/null and b/view/peko/modules/room_rank/images/icon1.png differ diff --git a/view/peko/modules/room_rank/images/icon2.png b/view/peko/modules/room_rank/images/icon2.png new file mode 100644 index 0000000..79f2ac8 Binary files /dev/null and b/view/peko/modules/room_rank/images/icon2.png differ diff --git a/view/peko/modules/room_rank/images/logo copy.png b/view/peko/modules/room_rank/images/logo copy.png new file mode 100644 index 0000000..4c661e5 Binary files /dev/null and b/view/peko/modules/room_rank/images/logo copy.png differ diff --git a/view/peko/modules/room_rank/images/no1.png b/view/peko/modules/room_rank/images/no1.png new file mode 100644 index 0000000..c537076 Binary files /dev/null and b/view/peko/modules/room_rank/images/no1.png differ diff --git a/view/peko/modules/room_rank/images/no2.png b/view/peko/modules/room_rank/images/no2.png new file mode 100644 index 0000000..03173ba Binary files /dev/null and b/view/peko/modules/room_rank/images/no2.png differ diff --git a/view/peko/modules/room_rank/images/no3.png b/view/peko/modules/room_rank/images/no3.png new file mode 100644 index 0000000..550c860 Binary files /dev/null and b/view/peko/modules/room_rank/images/no3.png differ diff --git a/view/peko/modules/room_rank/images/title.png b/view/peko/modules/room_rank/images/title.png new file mode 100644 index 0000000..d4c308c Binary files /dev/null and b/view/peko/modules/room_rank/images/title.png differ diff --git a/view/peko/modules/room_rank/images/woman.png b/view/peko/modules/room_rank/images/woman.png new file mode 100644 index 0000000..a913018 Binary files /dev/null and b/view/peko/modules/room_rank/images/woman.png differ diff --git a/view/peko/modules/room_rank/index.html b/view/peko/modules/room_rank/index.html index b99aa74..8b288da 100644 --- a/view/peko/modules/room_rank/index.html +++ b/view/peko/modules/room_rank/index.html @@ -1,39 +1,110 @@ + - - 房间榜单 - + + 房间榜 - + - -
    -
    -
    -

    爱意榜

    -

    魅力榜

    -
    -
    -

    日榜

    -

    周榜

    -

    总榜

    -
    -
    - -
    -
    - -
    -
    - - - - - - + + + +
    + + + +
    +
    + 爱意榜 + +
    +
    + 魅力榜 + +
    +
    + +
    +
    日榜
    +
    周榜
    +
    月榜
    +
    + +
    +
    +
    + + +

    + 我是很长的... + +

    +
    + + +
    +
    10000
    +
    +
    +
    +
    + + +

    + + +

    +
    + + +
    +
    +
    +
    +
    +
    + + +

    + + +

    +
    + + +
    +
    +
    +
    +
    + + +
    - \ No newline at end of file + + + + + + + + + + \ No newline at end of file diff --git a/view/peko/modules/room_rank/js/index.js b/view/peko/modules/room_rank/js/index.js index 46c0c9e..7f20fd1 100644 --- a/view/peko/modules/room_rank/js/index.js +++ b/view/peko/modules/room_rank/js/index.js @@ -1,15 +1,18 @@ let urlPrefix = getUrlPrefix() let browser = checkVersion() -let queryObj = getQueryString() -if (EnvCheck() === 'test') new VConsole +let env = EnvCheck(); +var urlData = getQueryString(); +if (env == 'test') { + new VConsole(); +} // 封装layer消息提醒框 let layerIndex -const showLoading = () => { +const showLoading = (content = '加载中...') => { layer.open({ type: 2, shadeClose: false, - content: '加載中...', - success(e) { + content, + success (e) { layerIndex = $(e).attr('index') } }) @@ -24,588 +27,189 @@ const toastMsg = (content = '操作完成', time = 2) => { skin: 'msg' }) } - -let showReceiveRankTotal //是否展示总榜 -let showMonthList -// 获取后台配置信息 -const getShowInfo = () => { - networkRequest({ - type: 'GET', - url: urlPrefix + '/room/rankings/showInfo', - data: { - roomUid: queryObj.roomUid - }, - success(res) { - if (res.code === 200) { - showReceiveRankTotal = res.data.showReceiveRankTotal - showMonthList = res.data.showMonthList - if (res.data.showMonthList) { - $('title').text('主播榜'); - // $('.wrap .tab_wrap').hide(); - // $('.wrap .rank_wrap .top_three_wrap').css("margin-top", "0"); - // $('.wrap .rank_wrap ul').css("height", "6.4rem"); - $('.wrap .tab_wrap .rank_type p:last-child').text('月榜'); - $('.wrap .tab_wrap .tab_contain p').eq(0).text('贡献榜') - $('.wrap .tab_wrap .rank_type p:last-child').show(); - getList('day') - $('.wrap').show() - } else { - $('.wrap').show() - if (showReceiveRankTotal) { - $('.rank_type p').eq(2).show() - } else { - $('.rank_type p').eq(2).hide() - } - getList('day') - } - - } else { - toastMsg(res.message) - } - }, - error(err) { - toastMsg('網絡錯誤') - } - }) -} - -let page = 1 -let pageSize = 10 -let rankList = [] -let isLock = true -let dayListNext = true -let weekListNext = true -let monthListNext = true -let totalListNext = true -let dayCharmListNext = true -let weekCharmListNext = true -let monthCharmListNext = true -let totalCharmListNext = true - -// 获取财富榜数据 -const getList = (type, page = 1) => { - console.log('贡献榜'); - console.log(type); - networkRequest({ - type: 'GET', - url: urlPrefix + '/room/rankings', - data: { - type, - page, - pageSize, - roomUid: queryObj.roomUid - }, - success(res) { - if (res.code === 200) { - if (res.data.rankings.length === pageSize) { - // 能够继续请求下一页 - if (type == 'day') { - dayListNext = true - } else if (type == 'week') { - weekListNext = true - } else if (type == 'month') { - monthListNext = true - } else { - totalListNext = true - } - } else { - if (type == 'day') { - dayListNext = false - } else if (type == 'week') { - weekListNext = false - } else if (type == 'month') { - monthListNext = false - } else { - totalListNext = false - } - } - rankList.push(...res.data.rankings) - if (showMonthList) { - if (type == 'day') { - sessionStorage.setItem('dayList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('dayList')) - } else if (type == 'week') { - sessionStorage.setItem('weekList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('weekList')) - } else if (type == 'month') { - sessionStorage.setItem('monthList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('monthList')) - } - } else { - if (type == 'day') { - sessionStorage.setItem('dayList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('dayList')) - } else if (type == 'week') { - sessionStorage.setItem('weekList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('weekList')) - } else if (type == 'total') { - sessionStorage.setItem('totalList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('totalList')) - } - } - isLock = true - } else { - toastMsg(res.message) - } - }, - error(err) { - toastMsg('網絡錯誤') - } - }) -} - -// 获取魅力榜数据 -const getCharmList = (type, page = 1) => { - console.log('魅力榜'); - console.log(type); - networkRequest({ - type: 'GET', - url: urlPrefix + '/room/recive/rankings', - data: { - type, - page, - pageSize, - roomUid: queryObj.roomUid - }, - success(res) { - if (res.code === 200) { - if (res.data.rankings.length === pageSize) { - // 能够继续请求下一页 - if (type == 'day') { - dayCharmListNext = true - } else if (type == 'week') { - weekCharmListNext = true - } else if (type == 'month') { - monthCharmListNext = true - } else { - totalCharmListNext = true - } - } else { - if (type == 'day') { - dayCharmListNext = false - } else if (type == 'week') { - weekCharmListNext = false - } else if (type == 'month') { - monthCharmListNext = false - } else { - totalCharmListNext = false - } - } - rankList.push(...res.data.rankings) - if (showMonthList) { - if (type == 'day') { - sessionStorage.setItem('dayCharmList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('dayCharmList')) - } else if (type == 'week') { - sessionStorage.setItem('weekCharmList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('weekCharmList')) - } else if (type == 'month') { - sessionStorage.setItem('monthCharmList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('monthCharmList')) - } - } else { - if (type == 'day') { - sessionStorage.setItem('dayCharmList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('dayCharmList')) - } else if (type == 'week') { - sessionStorage.setItem('weekCharmList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('weekCharmList')) - } else if (type == 'total') { - sessionStorage.setItem('totalCharmList', JSON.stringify(rankList)) - renderList(sessionStorage.getItem('totalCharmList')) - } - } - - // renderList() - isLock = true - } else { - toastMsg(res.message) - } - }, - error(err) { - toastMsg('網絡錯誤') - } - }) -} - -const renderList = (List) => { - let list = JSON.parse(List) - rankList = list - let topThreeArr = list.slice(0, 3) - if (list.length < 3) { - let len = 3 - list.length - let arr = new Array(len).fill({ - nick: '', - erbanNo: '', - goldAmount: '', - gender: '' - }) - topThreeArr.push(...arr) - } - let topThreeStr = '' - topThreeArr.map((item, index) => { - let tostr, goldAmount - if (item.goldAmount) { - tostr = item.goldAmount.toString() - } - if (tostr) { - if (tostr.length >= 5) { - goldAmount = (item.goldAmount / 10000).toFixed(2) + 'w' - } else { - goldAmount = item.goldAmount - } - } - - topThreeStr += ` -
    -
    -

    - -
    -
    - ${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick} - -
    -
    ${item.erbanNo ? 'ID:' + item.erbanNo : ''}
    -
    ${goldAmount ? goldAmount : ''}
    -
    - ` - }) - $('.top_three_wrap').html(topThreeStr) - - - // 渲染非前3 - let othersArr = list.slice(3) - let others = '' - othersArr.map((item, index) => { - let tostr = item.goldAmount.toString() - let goldAmount - if (tostr.length >= 5) { - goldAmount = (item.goldAmount / 10000).toFixed(2) + 'w' - } else { - goldAmount = item.goldAmount - } - others += ` -
  • -
    ${index + 4}
    -
    -
    -
    - ${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick} - -
    -
    ID:${item.erbanNo}
    -
    -
    ${goldAmount}
    -
    • - ` - }) - $('ul').html(others) -} - +var listType = 1; +var experImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_exper_'; +var charmImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_charm_'; +var typeWealth = 'day';//财富榜类型day 日 week 周 month 月 total 总 +// 初始化函数 $(function () { getInfoFromClient() - setTimeout(() => { - getShowInfo() - // getList( 'day' ) - }, 50) - - // tab切换 - let currentTabIndex = 0 - $('.tab_contain').on('click', 'p', function () { - let index = $(this).index() - if (currentTabIndex == index) return; - currentTabIndex = index - $(this).addClass('active').siblings('p').removeClass('active') - rankList = [] - $('.rank_wrap').scrollTop(0) - page = 1 - if (index) { - // 魅力榜单 - $('.rank_type p').eq(2).hide() - $('.rank_type p').eq(currentCharmRankType).addClass('active').siblings('p').removeClass('active') - if (showMonthList) { - $('.wrap .tab_wrap .rank_type p:last-child').show(); - if (currentCharmRankType == 0) { - if (sessionStorage.getItem('dayCharmList')) { - renderList(sessionStorage.getItem('dayCharmList')) - } else { - getCharmList('day') - } - } else if (currentCharmRankType == 1) { - if (sessionStorage.getItem('weekCharmList')) { - renderList(sessionStorage.getItem('weekCharmList')) - } else { - getCharmList('week') - } - } else if (currentCharmRankType == 2) { - if (sessionStorage.getItem('monthCharmList')) { - renderList(sessionStorage.getItem('monthCharmList')) - } else { - getCharmList('month') - } - } + setTimeout(function () { + // 页面全屏 + if (browser.app) { + if (browser.android) { + window.androidJsObj.initShowNav(false) } else { - if (currentCharmRankType == 0) { - if (sessionStorage.getItem('dayCharmList')) { - renderList(sessionStorage.getItem('dayCharmList')) - } else { - getCharmList('day') - } - } else if (currentCharmRankType == 1) { - if (sessionStorage.getItem('weekCharmList')) { - renderList(sessionStorage.getItem('weekCharmList')) - } else { - getCharmList('week') - } - } else if (currentCharmRankType == 2) { - if (sessionStorage.getItem('totalCharmList')) { - renderList(sessionStorage.getItem('totalCharmList')) - } else { - getCharmList('total') - } - } + window.webkit.messageHandlers.initShowNav.postMessage(0) } - } else { - // 贡献榜&爱意榜 - if (showReceiveRankTotal) { - $('.rank_type p').eq(2).show() - } - if (showMonthList) { - $('.wrap .tab_wrap .rank_type p:last-child').show(); - $('.rank_type p').eq(currentRankType).addClass('active').siblings('p').removeClass('active') - if (currentRankType == 0) { - if (sessionStorage.getItem('dayList')) { - renderList(sessionStorage.getItem('dayList')) - } else { - getList('day') - } - } else if (currentRankType == 1) { - if (sessionStorage.getItem('weekList')) { - renderList(sessionStorage.getItem('weekList')) - } else { - getList('week') - } - } else if (currentRankType == 2) { - if (sessionStorage.getItem('monthList')) { - renderList(sessionStorage.getItem('monthList')) - } else { - getList('month') - } - } + }; + // 顶部返回事件 + $('.back').click(() => { + if (browser.android) { + window.androidJsObj.closeWebView() } else { - $('.rank_type p').eq(currentRankType).addClass('active').siblings('p').removeClass('active') - if (currentRankType == 0) { - if (sessionStorage.getItem('dayList')) { - renderList(sessionStorage.getItem('dayList')) - } else { - getList('day') - } - } else if (currentRankType == 1) { - if (sessionStorage.getItem('weekList')) { - renderList(sessionStorage.getItem('weekList')) - } else { - getList('week') - } - } else if (currentRankType == 2) { - if (sessionStorage.getItem('totalList')) { - renderList(sessionStorage.getItem('totalList')) - } else { - getList('total') - } - } - } - } - }) - - // 日榜周榜总榜切换 - let currentRankType = 0 - let currentCharmRankType = 0 - $('.rank_type').on('click', 'p', function () { - $('.rank_wrap').scrollTop(0) - page = 1 - if (currentTabIndex) { - // 魅力榜 - let index = $(this).index() - if (currentCharmRankType == index) return; - currentCharmRankType = index - $(this).addClass('active').siblings('p').removeClass('active') - rankList = [] - - if (showMonthList) { - if (index == 0) { - if (sessionStorage.getItem('dayCharmList')) { - renderList(sessionStorage.getItem('dayCharmList')) - } else { - getCharmList('day') - } - - } else if (index == 1) { - if (sessionStorage.getItem('weekCharmList')) { - renderList(sessionStorage.getItem('weekCharmList')) - } else { - getCharmList('week') - } - } else if (index == 2) { - if (sessionStorage.getItem('monthCharmList')) { - renderList(sessionStorage.getItem('monthCharmList')) - } else { - getCharmList('month') - } - } - } else { - if (index == 0) { - if (sessionStorage.getItem('dayCharmList')) { - renderList(sessionStorage.getItem('dayCharmList')) - } else { - getCharmList('day') - } - - } else if (index == 1) { - if (sessionStorage.getItem('weekCharmList')) { - renderList(sessionStorage.getItem('weekCharmList')) - } else { - getCharmList('week') - } - } else if (index == 2) { - if (sessionStorage.getItem('totalCharmList')) { - renderList(sessionStorage.getItem('totalCharmList')) - } else { - getCharmList('total') - } - } - } - } else { - // 财富榜 - let index = $(this).index() - if (currentRankType == index) return; - currentRankType = index - $(this).addClass('active').siblings('p').removeClass('active') - rankList = [] - if (showMonthList) { - if (index == 0) { - if (sessionStorage.getItem('dayList')) { - renderList(sessionStorage.getItem('dayList')) - } else { - getList('day') - } - - } else if (index == 1) { - if (sessionStorage.getItem('weekList')) { - renderList(sessionStorage.getItem('weekList')) - } else { - getList('week') - } - } else if (index == 2) { - if (sessionStorage.getItem('monthList')) { - renderList(sessionStorage.getItem('monthList')) - } else { - getList('month') - } - } - } else { - if (index == 0) { - if (sessionStorage.getItem('dayList')) { - renderList(sessionStorage.getItem('dayList')) - } else { - getList('day') - } - - } else if (index == 1) { - if (sessionStorage.getItem('weekList')) { - renderList(sessionStorage.getItem('weekList')) - } else { - getList('week') - } - } else if (index == 2) { - if (sessionStorage.getItem('totalList')) { - renderList(sessionStorage.getItem('totalList')) - } else { - getList('total') - } - } - } - } - }) - - // 监听滚动 - $('.rank_wrap').scroll(function () { - let scrollTop = $(this).scrollTop() - let scrollHeight = $('.rank_wrap')[0].scrollHeight - let ulHeight = $(this).innerHeight() - if (scrollTop + ulHeight + 100 >= scrollHeight) { - if (isLock) { - // 请求下一页 - // if (canNext) { - if (showMonthList) { - if (currentTabIndex) { - if (currentCharmRankType == 0) { - if (!dayCharmListNext) return - getCharmList('day', ++page) - } else if (currentCharmRankType == 1) { - if (!weekCharmListNext) return - getCharmList('week', ++page) - } else if (currentCharmRankType == 2) { - if (!monthCharmListNext) return - getCharmList('month', ++page) - } - } else { - if (currentRankType == 0) { - if (!dayListNext) return - getList('day', ++page) - } else if (currentRankType == 1) { - if (!weekListNext) return - getList('week', ++page) - } else if (currentRankType == 2) { - if (!monthListNext) return - getList('month', ++page) - } - } - } else { - if (currentTabIndex) { - if (currentCharmRankType == 0) { - if (!dayCharmListNext) return - getCharmList('day', ++page) - } else if (currentCharmRankType == 1) { - if (!weekCharmListNext) return - getCharmList('week', ++page) - } else if (currentCharmRankType == 2) { - if (!totalCharmListNext) return - getCharmList('total', ++page) - } - } else { - if (currentRankType == 0) { - if (!dayListNext) return - getList('day', ++page) - } else if (currentRankType == 1) { - if (!weekListNext) return - getList('week', ++page) - } else if (currentRankType == 2) { - if (!totalListNext) return - getList('total', ++page) - } - } - } - isLock = false - // } - } - } - }) - - //跳转个人主页 - function openPerson(document, dom) { - $(document).on('click', dom, function () { - let erbanUid = $(this).data('uid') - if (!browser.app) return - if (browser.ios) { - window.webkit.messageHandlers.openPersonPage.postMessage(erbanUid); - } else if (browser.android) { - if (androidJsObj && typeof androidJsObj === 'object') { - window.androidJsObj.openPersonPage(erbanUid); - } + window.webkit.messageHandlers.closeWebView.postMessage(null) } }) + getRankingsWealth(); + }, 100) +}) +// 榜单切换 +$('.largestBox .tab div').click(function () { + var i = $(this).index() + 1; + listType = i; + $('.largestBox .tab div').removeClass('tabColor1').removeClass('tabColor2') + $(this).addClass(`tabColor${listType}`); + $('.largestBox .dayTab div').removeClass('dayTabColor1').removeClass('dayTabColor2'); + $('.largestBox .dayTab div').eq(0).addClass(`dayTabColor${listType}`); + typeWealth = 'day'; + if (listType == 1) { + getRankingsWealth(); + } else { + getReciveRankingsWealth(); + } +}) +// 日榜切换 +$('.largestBox .dayTab div').click(function () { + var i = $(this).index() + 1; + $(this).addClass(`dayTabColor${listType}`).siblings().removeClass('dayTabColor1').removeClass('dayTabColor2'); + if (i == 1) { + typeWealth = 'day';//财富榜类型day 日 week 周 month 月 total 总 + } else if (i == 2) { + typeWealth = 'week'; + } else if (i == 3) { + typeWealth = 'month'; + } + if (listType == 1) { + getRankingsWealth(); + } else { + getReciveRankingsWealth(); + } +}) +// 爱意榜接口 +function getRankingsWealth () { + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/room/rankings', + data: { + roomUid: urlData.roomUid, + type: typeWealth, + page: 1, + pageSize: 30, + }, + success (res) { + if (res.code === 200) { + listDomFun(res, 1); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('网络错误，请退出重进') + } + }) +} +// 魅力榜接口 +function getReciveRankingsWealth () { + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/room/recive/rankings', + data: { + roomUid: urlData.roomUid, + type: typeWealth, + page: 1, + pageSize: 30, + }, + success (res) { + if (res.code === 200) { + listDomFun(res, 2); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('网络错误，请退出重进') + } + }) +} +// 渲染样式 +function listDomFun (res, num) { + $('.largestBox ul li').remove(); + // 处理前三 + var top3 = res.data.rankings.slice(0, 3); + if (top3.length < 3) { + let arr = new Array(3 - top3.length).fill({ + avatar: './images/logo.png', + nick: '虚位以待', + goldAmount: '', + }) + top3.push(...arr); + } + top3.forEach((res, i) => { + if (res.avatar == './images/logo.png') { + $(`.largestBox .top3 .no${i + 1} .box p .sp`).hide(); + $(`.largestBox .top3 .no${i + 1} .box .icon`).hide(); + } else { + $(`.largestBox .top3 .no${i + 1} .box p .sp`).show(); + $(`.largestBox .top3 .no${i + 1} .box .icon`).show(); + } + $(`.largestBox .top3 .no${i + 1} .box .tx`).attr('src', res.avatar); + $(`.largestBox .top3 .no${i + 1} .box .ts`).attr('uid', res.uid); + $(`.largestBox .top3 .no${i + 1} .box p .sp1`).text(res.nick.length > 6 ? res.nick.slice(0, 6) + '...' : res.nick); + $(`.largestBox .top3 .no${i + 1} .box p .sp`).removeClass('boy').removeClass('woman') + $(`.largestBox .top3 .no${i + 1} .box p .sp`).addClass(`${res.gender == 1 ? 'boy' : 'woman'}`); + $(`.largestBox .top3 .no${i + 1} .box p .sp img`).attr('src', res.gender == 1 ? './images/boy.png' : './images/woman.png'); + $(`.largestBox .top3 .no${i + 1} .box .icon .icon1`).attr('src', experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`) + $(`.largestBox .top3 .no${i + 1} .box .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`) + $(`.largestBox .top3 .no${i + 1} .box .score`).text(unitProcessing(res.goldAmount, 10000, 1, 'W')); + }) + // 处理非前三 + var notTop3 = res.data.rankings.slice(3); + var str = ''; + notTop3.forEach((res, i) => { + str += ` +
  • +
    ${i + 4}
    + +
    +

    ${res.nick}

    + + +
    +
    +

    ${unitProcessing(res.goldAmount, 10000, 1, 'W')}

    + ${num == 1 ? '爱意值' : '魅力值'} +
    +
    • + ` + }) + $('.largestBox ul').append(str); +} +// 点击前三跳转房间 +$('.largestBox').on('click', '.top3 .no .box .ts', function () { + var uid = $(this).attr('uid'); + if (browser.ios) { + window.webkit.messageHandlers.openPersonPage.postMessage(uid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === 'object') { + window.androidJsObj.openPersonPage(uid); + } + } +}) +// 点击非前三跳转房间 +$('.largestBox').on('click', 'ul li .tx', function () { + var uid = $(this).attr('uid'); + if (browser.ios) { + window.webkit.messageHandlers.openPersonPage.postMessage(uid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === 'object') { + window.androidJsObj.openPersonPage(uid); + } } - openPerson('.top_three_wrap', '.avatar') - openPerson('ul', '.others_avatar') }) \ No newline at end of file