diff --git a/view/yinmeng/modules/ranks/css/index.css b/view/yinmeng/modules/ranks/css/index.css new file mode 100644 index 0000000..14ab13c --- /dev/null +++ b/view/yinmeng/modules/ranks/css/index.css @@ -0,0 +1,1263 @@ +.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; +} + +html, +body { + width: 100%; + min-height: 100%; +} + +.header { + width: 10rem; + height: 12.48rem; + background: url(../images/header1.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto; + box-sizing: border-box; + padding-top: 1.46667rem; + position: relative; +} + +.header .title { + width: 100%; + position: relative; + height: 0.58667rem; + margin: 0rem auto 0.29333rem; + text-align: center; +} + +.header .title img { + width: 0.48rem; + height: 0.48rem; + position: absolute; + left: 0.42667rem; + top: 0.05333rem; +} + +.header .title span { + color: #2B2D33; + font-size: 0.42667rem; + font-weight: 500; +} + +.header .tab { + width: 100%; + height: 1.17333rem; + line-height: 1.17333rem; + display: flex; + justify-content: space-between; + box-sizing: border-box; + padding: 0 0.58667rem; +} + +.header .tab div { + width: 1.28rem; + height: 100%; + position: relative; + text-align: center; + color: rgba(43, 45, 51, 0.5); + font-size: 0.42667rem; + font-weight: 600; +} + +.header .tab div span { + width: 0.34667rem; + height: 0.08rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0.24rem; + background: none; + border-radius: 0.08rem; +} + +.header .tab .active1 { + color: #2B2D33; +} + +.header .tab .active1 span { + background: #FF5391; +} + +.header .tab .active2 { + color: #2B2D33; +} + +.header .tab .active2 span { + background: #A34DFF; +} + +.header .tab .active3 { + color: #2B2D33; +} + +.header .tab .active3 span { + background: #5C68F2; +} + +.header .tab .active4 { + color: #2B2D33; +} + +.header .tab .active4 span { + background: #B3610B; +} + +.header .timeTab { + width: 6.18667rem; + height: 0.74667rem; + line-height: 0.74667rem; + display: flex; + justify-content: space-between; + margin: 0 auto 2.02667rem; +} + +.header .timeTab div { + width: 1.70667rem; + height: 100%; + text-align: center; + color: rgba(255, 255, 255, 0.9); + font-size: 0.37333rem; + font-weight: 400; + border-radius: 0.74667rem; +} + +.header .timeTab .divBg1 { + background: rgba(252, 179, 206, 0.8); +} + +.header .timeTab .divBg2 { + background: rgba(210, 172, 252, 0.8); +} + +.header .timeTab .divBg3 { + background: rgba(172, 202, 252, 0.8); +} + +.header .timeTab .active1 { + color: #ff5391; + background: #fff; +} + +.header .timeTab .active2 { + background: #fff; +} + +.header .timeTab .active3 { + background: #fff; +} + +.header .timeTab .active4 { + background: #fff; +} + +.header .timeTab .active { + display: none; +} + +.header .timeTab2 { + width: 8.42667rem; +} + +.header .timeTab2 .active { + display: block; +} + +.header .listLast { + width: 2.10667rem; + height: 0.64rem; + line-height: 0.64rem; + text-align: center; + background: rgba(255, 255, 255, 0.4); + border-top-right-radius: 0; + border-top-left-radius: 0.64rem; + border-bottom-left-radius: 0.64rem; + border-bottom-right-radius: 0rem; + border: 0.01333rem solid #FFFFFF; + backdrop-filter: blur(4px); + position: absolute; + right: 0; + top: 4.48rem; + vertical-align: middle; + z-index: 2; +} + +.header .listLast span { + font-size: 0.29333rem; + font-weight: 500; +} + +.header .listLast .sp1 { + color: #FF5391; +} + +.header .listLast .sp2 { + color: #A34DFF; +} + +.header .listLast .sp3 { + color: #5C68F2; +} + +.header .topBox { + width: 10rem; + height: 6.18667rem; + position: relative; + margin: 0 auto; +} + +.header .topBox .no1 { + width: 2.88rem; + height: 2.82667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 4.96rem; +} + +.header .topBox .no1 .icon_gh { + display: none; + width: 1.22667rem; + height: 1.22667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -1.77333rem; + z-index: 2; + border-radius: 50%; +} + +.header .topBox .no1 .svga { + position: absolute; + width: 0.26667rem; + height: 0.24rem; + left: 50%; + transform: translateX(-50%); + top: 1.94667rem; + z-index: 3; +} + +.header .topBox .no1 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.header .topBox .no1 .zl { + width: 0.74667rem; + height: 0.74667rem; + position: absolute; + border-radius: 50%; + top: 1.81333rem; + right: 0.32rem; + border: 0.02667rem solid #fff; + z-index: 3; + display: none; +} + +.header .topBox .no1 .tx { + width: 2.08rem; + height: 2.08rem; + position: absolute; + top: 0.37333rem; + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; +} + +.header .topBox .no1 p { + width: 100%; + color: #2B2D33; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + left: 0; + bottom: -0.53333rem; + vertical-align: middle; + text-align: center; +} + +.header .topBox .no1 p span { + display: inline-block; + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + vertical-align: middle; +} + +.header .topBox .no1 p span img { + display: block; + width: 0.21333rem; + height: 0.21333rem; + margin: 0.08rem auto; +} + +.header .topBox .no1 p .boy { + background: #6BB3FF; +} + +.header .topBox .no1 p .girl { + background: #FF80CC; +} + +.header .topBox .no1 .icon { + width: 1.94667rem; + height: 0.48rem; + display: flex; + justify-content: space-between; + position: absolute; + bottom: -0.98667rem; + left: 50%; + transform: translateX(-50%); +} + +.header .topBox .no1 .icon img { + display: inline-block; + width: 0.96rem; + height: 0.48rem; +} + +.header .topBox .no1 i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: -1.46667rem; + color: #696D7A; + font-size: 0.29333rem; + font-weight: 500; +} + +.header .topBox .no2 { + width: 2.34667rem; + height: 2.26667rem; + position: absolute; + left: 0.8rem; + bottom: 4.53333rem; +} + +.header .topBox .no2 .icon_gh { + display: none; + width: 1.22667rem; + height: 1.22667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -1.8rem; + z-index: 2; + border-radius: 50%; +} + +.header .topBox .no2 .zl { + width: 0.53333rem; + height: 0.53333rem; + position: absolute; + border-radius: 50%; + top: 1.52rem; + right: 0.32rem; + border: 0.02667rem solid #fff; + z-index: 3; + display: none; +} + +.header .topBox .no2 .svga { + position: absolute; + width: 0.26667rem; + height: 0.24rem; + left: 50%; + transform: translateX(-50%); + top: 1.54667rem; + z-index: 3; +} + +.header .topBox .no2 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.header .topBox .no2 .tx { + width: 1.70667rem; + height: 1.70667rem; + position: absolute; + top: 0.29333rem; + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; +} + +.header .topBox .no2 p { + width: 120%; + color: #2B2D33; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.53333rem; + vertical-align: middle; + white-space: nowrap; + text-align: center; +} + +.header .topBox .no2 p span { + display: inline-block; + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + vertical-align: middle; +} + +.header .topBox .no2 p span img { + display: block; + width: 0.21333rem; + height: 0.21333rem; + margin: 0.08rem auto; +} + +.header .topBox .no2 p .boy { + background: #6BB3FF; +} + +.header .topBox .no2 p .girl { + background: #FF80CC; +} + +.header .topBox .no2 .icon { + width: 1.94667rem; + height: 0.48rem; + display: flex; + justify-content: space-between; + position: absolute; + bottom: -1.04rem; + left: 50%; + transform: translateX(-57%); +} + +.header .topBox .no2 .icon img { + display: inline-block; + width: 0.96rem; + height: 0.48rem; +} + +.header .topBox .no2 i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: -1.46667rem; + color: #696D7A; + font-size: 0.29333rem; + font-weight: 500; +} + +.header .topBox .no3 { + width: 2.34667rem; + height: 2.26667rem; + position: absolute; + right: 0.8rem; + bottom: 4.53333rem; +} + +.header .topBox .no3 .icon_gh { + display: none; + width: 1.22667rem; + height: 1.22667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -1.8rem; + z-index: 2; + border-radius: 50%; +} + +.header .topBox .no3 .zl { + width: 0.53333rem; + height: 0.53333rem; + position: absolute; + border-radius: 50%; + top: 1.52rem; + right: 0.32rem; + border: 0.02667rem solid #fff; + z-index: 3; + display: none; +} + +.header .topBox .no3 .svga { + position: absolute; + width: 0.26667rem; + height: 0.24rem; + left: 50%; + transform: translateX(-50%); + top: 1.54667rem; + z-index: 3; +} + +.header .topBox .no3 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.header .topBox .no3 .tx { + width: 1.70667rem; + height: 1.70667rem; + position: absolute; + top: 0.29333rem; + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; +} + +.header .topBox .no3 p { + width: 120%; + color: #2B2D33; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-45%); + bottom: -0.53333rem; + vertical-align: middle; + white-space: nowrap; + text-align: center; +} + +.header .topBox .no3 p span { + display: inline-block; + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + vertical-align: middle; +} + +.header .topBox .no3 p span img { + display: block; + width: 0.21333rem; + height: 0.21333rem; + margin: 0.08rem auto; +} + +.header .topBox .no3 p .boy { + background: #6BB3FF; +} + +.header .topBox .no3 p .girl { + background: #FF80CC; +} + +.header .topBox .no3 .icon { + width: 1.94667rem; + height: 0.48rem; + display: flex; + justify-content: space-between; + position: absolute; + bottom: -1.04rem; + left: 50%; + transform: translateX(-45%); +} + +.header .topBox .no3 .icon img { + display: inline-block; + width: 0.96rem; + height: 0.48rem; +} + +.header .topBox .no3 i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: -1.46667rem; + color: #696D7A; + font-size: 0.29333rem; + font-weight: 500; +} + +.header .topBox1 { + background: url(../images/topList1.png) no-repeat; + background-size: 100% 100%; +} + +.header .topBox2 { + background: url(../images/topList2.png) no-repeat; + background-size: 100% 100%; +} + +.header .topBox3 { + background: url(../images/topList3.png) no-repeat; + background-size: 100% 100%; +} + +.header .topBox4 { + margin-top: 2.8rem; + background: url(../images/topList4.png) no-repeat; + background-size: 100% 100%; +} + +.header2 { + background: url(../images/header2.png) no-repeat; + background-size: 100% 100%; +} + +.header3 { + background: url(../images/header3.png) no-repeat; + background-size: 100% 100%; +} + +.header4 { + background: url(../images/header4.png) no-repeat; + background-size: 100% 100%; +} + +.list { + width: 10rem; + margin: -1.65rem auto 1.8rem; + height: 9rem; + border-radius: 0.53333rem 0.53333rem 0px 0px; + position: relative; + z-index: 2; + background: #fff; + overflow-y: scroll; + box-sizing: border-box; + padding-top: 0.64rem; +} + +.list::-webkit-scrollbar { + display: none; +} + +.list li { + width: 10rem; + height: 1.28rem; + margin: 0 auto 0.58667rem; + overflow: hidden; + position: relative; +} + +.list li .svga { + width: 0.26667rem; + height: 0.24rem; + position: absolute; + left: 1.45rem; + top: 0.82667rem; +} + +.list li .num { + width: 0.85333rem; + text-align: center; + color: #2B2D33; + font-size: 0.48rem; + font-weight: 600; + height: 100%; + line-height: 1.28rem; + float: left; + margin-right: 0.13333rem; +} + +.list li .tx { + width: 1.28rem; + height: 1.28rem; + border-radius: 50%; + margin-right: 0.21333rem; + float: left; +} + +.list li .nameBox { + float: left; +} + +.list li .nameBox p { + color: #2B2D33; + font-size: 0.4rem; + font-weight: 600; + vertical-align: middle; + margin-top: 0.10667rem; +} + +.list li .nameBox p span { + display: inline-block; + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; +} + +.list li .nameBox p span img { + display: block; + width: 0.21333rem; + height: 0.21333rem; + margin: 0.08rem auto; +} + +.list li .nameBox p .boy { + background: #6BB3FF; +} + +.list li .nameBox p .girl { + background: #FF80CC; +} + +.list li .nameBox .icon { + width: 1.94667rem; + height: 0.48rem; + display: flex; + justify-content: space-between; +} + +.list li .nameBox .icon img { + display: block; + width: 0.96rem; + height: 0.48rem; +} + +.list li .score { + float: right; + text-align: right; + margin-right: 0.46667rem; +} + +.list li .score b { + color: #FFDA24; + font-size: 0.42667rem; + font-weight: 600; + display: block; + margin-top: 0.10667rem; + display: block; + margin-bottom: 0.1rem; +} + +.list li .score i { + font-style: normal; + color: #696D7A; + font-size: 0.29333rem; +} + +.list li .right { + width: 1.54667rem; + height: 100%; + float: right; + position: relative; + margin-right: 0.1rem; + display: none; +} + +.list li .right img { + width: 0.53333rem; + height: 0.53333rem; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; +} + +.list li .right .nick { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #696D7A; + font-size: 0.26667rem; + text-align: center; + margin-top: 0.66667rem; + margin-bottom: 0.06667rem; +} + +.list li .right p { + width: 100%; + text-align: center; + color: #A2A7B8; + font-size: 0.24rem; +} + +.list li .icon_gh { + display: none; + width: 1.22667rem; + height: 1.22667rem; + position: absolute; + right: 0.64rem; + top: 0rem; + border-radius: 50%; +} + +.my { + position: fixed; + width: 100%; + height: 1.81333rem; + line-height: 1.81333rem; + left: 0; + bottom: 0; + background: url(../images/my.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + padding: 0 0.42667rem; +} + +.my .num { + width: 0.88rem; + text-align: center; + color: #696D7A; + font-size: 0.29333rem; + font-weight: 400; + margin-right: 0.24rem; + float: left; +} + +.my .tx { + display: block; + float: left; + width: 1.06667rem; + height: 1.06667rem; + border-radius: 50%; + margin-right: 0.21333rem; + margin-top: 0.34667rem; +} + +.my p { + width: 3rem; + float: left; + color: #2B2D33; + font-size: 0.34667rem; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.my .score { + float: right; + color: #696D7A; + font-size: 0.29333rem; + font-weight: 400; +} + +.my .score b { + color: #FFDA24; + font-size: 0.42667rem; + font-weight: 600; +} + +.my .score i { + font-style: normal; +} + +.lastTopThree { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 9; + display: none; +} + +.lastTopThree .lastTopThree_in { + width: 8.93333rem; + height: 7.41333rem; + background: url(../images/lastTopThree_in.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.lastTopThree .lastTopThree_in .box { + position: relative; + width: 8.29333rem; + height: 4.90667rem; + background: #fff; + border-radius: 0.42667rem; + left: 50%; + transform: translateX(-50%); + top: 1.97333rem; +} + +.lastTopThree .lastTopThree_in .box .no1 { + width: 2.50667rem; + height: 2.45333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 1.81333rem; +} + +.lastTopThree .lastTopThree_in .box .no1 .icon_gh { + display: none; + width: 0.58667rem; + height: 0.58667rem; + position: absolute; + right: 0.26667rem; + top: 1.70667rem; + z-index: 2; + border-radius: 50%; +} + +.lastTopThree .lastTopThree_in .box .no1 .svga { + position: absolute; + width: 0.26667rem; + height: 0.24rem; + left: 50%; + transform: translateX(-50%); + top: 1.65rem; + z-index: 3; +} + +.lastTopThree .lastTopThree_in .box .no1 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.lastTopThree .lastTopThree_in .box .no1 .tx { + width: 1.86667rem; + height: 1.86667rem; + position: absolute; + top: 0.37333rem; + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; +} + +.lastTopThree .lastTopThree_in .box .no1 p { + width: 100%; + color: #2B2D33; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + left: 0; + bottom: -0.53333rem; + vertical-align: middle; + text-align: center; +} + +.lastTopThree .lastTopThree_in .box .no1 p span { + display: inline-block; + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + vertical-align: middle; +} + +.lastTopThree .lastTopThree_in .box .no1 p span img { + display: block; + width: 0.21333rem; + height: 0.21333rem; + margin: 0.08rem auto; +} + +.lastTopThree .lastTopThree_in .box .no1 p .boy { + background: #6BB3FF; +} + +.lastTopThree .lastTopThree_in .box .no1 p .girl { + background: #FF80CC; +} + +.lastTopThree .lastTopThree_in .box .no1 .icon { + width: 1.94667rem; + height: 0.48rem; + display: flex; + justify-content: space-between; + position: absolute; + bottom: -0.98667rem; + left: 50%; + transform: translateX(-50%); +} + +.lastTopThree .lastTopThree_in .box .no1 .icon img { + display: inline-block; + width: 0.96rem; + height: 0.48rem; +} + +.lastTopThree .lastTopThree_in .box .no1 i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: -1.46667rem; + color: #696D7A; + font-size: 0.29333rem; + font-weight: 500; +} + +.lastTopThree .lastTopThree_in .box .no2 { + width: 1.97333rem; + height: 1.89333rem; + position: absolute; + left: 0.48rem; + bottom: 1.84rem; +} + +.lastTopThree .lastTopThree_in .box .no2 .icon_gh { + display: none; + width: 0.48rem; + height: 0.48rem; + position: absolute; + right: 0.21333rem; + top: 1.30667rem; + z-index: 2; + border-radius: 50%; +} + +.lastTopThree .lastTopThree_in .box .no2 .svga { + position: absolute; + width: 0.26667rem; + height: 0.24rem; + left: 50%; + transform: translateX(-50%); + top: 1.3rem; + z-index: 3; +} + +.lastTopThree .lastTopThree_in .box .no2 .zl { + width: 0.74667rem; + height: 0.74667rem; + position: absolute; + border-radius: 50%; + top: 1.81333rem; + right: 0.32rem; + border: 0.02667rem solid #fff; + z-index: 3; + display: none; +} + +.lastTopThree .lastTopThree_in .box .no2 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.lastTopThree .lastTopThree_in .box .no2 .tx { + width: 1.49333rem; + height: 1.49333rem; + position: absolute; + top: 0.29333rem; + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; +} + +.lastTopThree .lastTopThree_in .box .no2 p { + width: 120%; + color: #2B2D33; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.53333rem; + vertical-align: middle; + white-space: nowrap; + text-align: center; +} + +.lastTopThree .lastTopThree_in .box .no2 p span { + display: inline-block; + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + vertical-align: middle; +} + +.lastTopThree .lastTopThree_in .box .no2 p span img { + display: block; + width: 0.21333rem; + height: 0.21333rem; + margin: 0.08rem auto; +} + +.lastTopThree .lastTopThree_in .box .no2 p .boy { + background: #6BB3FF; +} + +.lastTopThree .lastTopThree_in .box .no2 p .girl { + background: #FF80CC; +} + +.lastTopThree .lastTopThree_in .box .no2 .icon { + width: 1.94667rem; + height: 0.48rem; + display: flex; + justify-content: space-between; + position: absolute; + bottom: -1.04rem; + left: 50%; + transform: translateX(-57%); +} + +.lastTopThree .lastTopThree_in .box .no2 .icon img { + display: inline-block; + width: 0.96rem; + height: 0.48rem; +} + +.lastTopThree .lastTopThree_in .box .no2 i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: -1.46667rem; + color: #696D7A; + font-size: 0.29333rem; + font-weight: 500; +} + +.lastTopThree .lastTopThree_in .box .no3 { + width: 1.97333rem; + height: 1.89333rem; + position: absolute; + right: 0.48rem; + bottom: 1.84rem; +} + +.lastTopThree .lastTopThree_in .box .no3 .icon_gh { + display: none; + width: 0.48rem; + height: 0.48rem; + position: absolute; + right: 0.21333rem; + top: 1.30667rem; + z-index: 2; + border-radius: 50%; +} + +.lastTopThree .lastTopThree_in .box .no3 .svga { + position: absolute; + width: 0.26667rem; + height: 0.24rem; + left: 50%; + transform: translateX(-50%); + top: 1.3rem; + z-index: 3; +} + +.lastTopThree .lastTopThree_in .box .no3 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.lastTopThree .lastTopThree_in .box .no3 .tx { + width: 1.49333rem; + height: 1.49333rem; + position: absolute; + top: 0.29333rem; + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; +} + +.lastTopThree .lastTopThree_in .box .no3 p { + width: 120%; + color: #2B2D33; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.53333rem; + vertical-align: middle; + white-space: nowrap; + text-align: center; +} + +.lastTopThree .lastTopThree_in .box .no3 p span { + display: inline-block; + width: 0.37333rem; + height: 0.37333rem; + border-radius: 50%; + vertical-align: middle; +} + +.lastTopThree .lastTopThree_in .box .no3 p span img { + display: block; + width: 0.21333rem; + height: 0.21333rem; + margin: 0.08rem auto; +} + +.lastTopThree .lastTopThree_in .box .no3 p .boy { + background: #6BB3FF; +} + +.lastTopThree .lastTopThree_in .box .no3 p .girl { + background: #FF80CC; +} + +.lastTopThree .lastTopThree_in .box .no3 .icon { + width: 1.94667rem; + height: 0.48rem; + display: flex; + justify-content: space-between; + position: absolute; + bottom: -1.04rem; + left: 50%; + transform: translateX(-57%); +} + +.lastTopThree .lastTopThree_in .box .no3 .icon img { + display: inline-block; + width: 0.96rem; + height: 0.48rem; +} + +.lastTopThree .lastTopThree_in .box .no3 i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: -1.46667rem; + color: #696D7A; + font-size: 0.29333rem; + font-weight: 500; +} diff --git a/view/yinmeng/modules/ranks/css/index.scss b/view/yinmeng/modules/ranks/css/index.scss new file mode 100644 index 0000000..41cdeaf --- /dev/null +++ b/view/yinmeng/modules/ranks/css/index.scss @@ -0,0 +1,1274 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +.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; +} + +html, +body { + width: 100%; + min-height: 100%; +} + +.header { + width: px2rem(750); + height: px2rem(936); + background: url(../images/header1.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto; + box-sizing: border-box; + padding-top: px2rem(110); + position: relative; + + .title { + width: 100%; + position: relative; + height: px2rem(44); + margin: px2rem(0) auto px2rem(22); + text-align: center; + + img { + width: px2rem(36); + height: px2rem(36); + position: absolute; + left: px2rem(32); + top: px2rem(4); + } + + span { + color: #2B2D33; + font-size: px2rem(32); + font-weight: 500; + } + } + + .tab { + width: 100%; + height: px2rem(88); + line-height: px2rem(88); + display: flex; + justify-content: space-between; + box-sizing: border-box; + padding: 0 px2rem(44); + + div { + width: px2rem(96); + height: 100%; + position: relative; + text-align: center; + color: rgba(43, 45, 51, 0.5); + font-size: px2rem(32); + font-weight: 600; + + span { + width: px2rem(26); + height: px2rem(6); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(18); + background: none; + border-radius: px2rem(6); + } + } + + .active1 { + color: #2B2D33; + + span { + background: #FF5391; + } + } + + .active2 { + color: #2B2D33; + + span { + background: #A34DFF; + } + } + + .active3 { + color: #2B2D33; + + span { + background: #5C68F2; + } + } + + .active4 { + color: #2B2D33; + + span { + background: #B3610B; + } + } + } + + .timeTab { + width: px2rem(464); + height: px2rem(56); + line-height: px2rem(56); + display: flex; + justify-content: space-between; + margin: 0 auto px2rem(152); + + div { + width: px2rem(128); + height: 100%; + text-align: center; + color: rgba(255, 255, 255, 0.9); + font-size: px2rem(28); + font-weight: 400; + border-radius: px2rem(56); + + } + + .divBg1 { + background: rgba(252, 179, 206, 0.8); + } + + .divBg2 { + background: rgba(210, 172, 252, 0.8); + } + + .divBg3 { + background: rgba(172, 202, 252, 0.8); + } + + .active1 { + color: rgb(255, 83, 145); + background: #fff; + } + + .active2 { + background: #fff; + } + + .active3 { + background: #fff; + } + + .active4 { + background: #fff; + } + + .active { + display: none; + } + } + + .timeTab2 { + width: px2rem(632); + + .active { + display: block; + } + } + + .listLast { + width: px2rem(158); + height: px2rem(48); + line-height: px2rem(48); + text-align: center; + background: rgba(255, 255, 255, 0.4); + border-top-right-radius: 0; + border-top-left-radius: px2rem(48); + border-bottom-left-radius: px2rem(48); + border-bottom-right-radius: px2rem(0); + border: px2rem(1) solid #FFFFFF; + backdrop-filter: blur(4px); + position: absolute; + right: 0; + top: px2rem(336); + vertical-align: middle; + z-index: 2; + + span { + font-size: px2rem(22); + font-weight: 500; + } + + .sp1 { + color: #FF5391; + } + + .sp2 { + color: #A34DFF; + } + + .sp3 { + color: #5C68F2; + } + } + + .topBox { + width: px2rem(750); + height: px2rem(464); + position: relative; + margin: 0 auto; + + .no1 { + width: px2rem(216); + height: px2rem(212); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(372); + + .icon_gh { + display: none; + width: px2rem(92); + height: px2rem(92); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-133); + z-index: 2; + border-radius: 50%; + } + + .svga { + position: absolute; + width: px2rem(20); + height: px2rem(18); + left: 50%; + transform: translateX(-50%); + top: px2rem(146); + z-index: 3; + } + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .zl { + width: px2rem(56); + height: px2rem(56); + position: absolute; + border-radius: 50%; + top: px2rem(136); + right: px2rem(24); + border: px2rem(2) solid #fff; + z-index: 3; + display: none; + } + + .tx { + width: px2rem(156); + height: px2rem(156); + position: absolute; + top: px2rem(28); + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; + } + + p { + width: 100%; + color: #2B2D33; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + left: 0; + bottom: px2rem(-40); + // white-space: nowrap; //不换行 + // overflow: hidden; //超出隐藏 + // text-overflow: ellipsis; //超出文本省略号 + vertical-align: middle; + text-align: center; + + span { + display: inline-block; + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + vertical-align: middle; + + img { + display: block; + width: px2rem(16); + height: px2rem(16); + margin: px2rem(6) auto; + } + } + + .boy { + background: #6BB3FF; + } + + .girl { + background: #FF80CC; + } + } + + .icon { + width: px2rem(146); + height: px2rem(36); + display: flex; + justify-content: space-between; + position: absolute; + bottom: px2rem(-74); + left: 50%; + transform: translateX(-50%); + + img { + display: inline-block; + width: px2rem(72); + height: px2rem(36); + } + } + + i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: px2rem(-110); + color: #696D7A; + font-size: px2rem(22); + font-weight: 500; + } + } + + .no2 { + width: px2rem(176); + height: px2rem(170); + position: absolute; + left: px2rem(60); + bottom: px2rem(340); + + .icon_gh { + display: none; + width: px2rem(92); + height: px2rem(92); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-135); + z-index: 2; + border-radius: 50%; + } + + .zl { + width: px2rem(40); + height: px2rem(40); + position: absolute; + border-radius: 50%; + top: px2rem(114); + right: px2rem(24); + border: px2rem(2) solid #fff; + z-index: 3; + display: none; + } + + .svga { + position: absolute; + width: px2rem(20); + height: px2rem(18); + left: 50%; + transform: translateX(-50%); + top: px2rem(116); + z-index: 3; + } + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(128); + height: px2rem(128); + position: absolute; + top: px2rem(22); + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; + } + + p { + width: 120%; + color: #2B2D33; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-40); + vertical-align: middle; + white-space: nowrap; + text-align: center; + + span { + display: inline-block; + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + vertical-align: middle; + + img { + display: block; + width: px2rem(16); + height: px2rem(16); + margin: px2rem(6) auto; + } + } + + .boy { + background: #6BB3FF; + } + + .girl { + background: #FF80CC; + } + } + + .icon { + width: px2rem(146); + height: px2rem(36); + display: flex; + justify-content: space-between; + position: absolute; + bottom: px2rem(-78); + left: 50%; + transform: translateX(-57%); + + img { + display: inline-block; + width: px2rem(72); + height: px2rem(36); + } + } + + i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: px2rem(-110); + color: #696D7A; + font-size: px2rem(22); + font-weight: 500; + } + } + + .no3 { + width: px2rem(176); + height: px2rem(170); + position: absolute; + right: px2rem(60); + bottom: px2rem(340); + + .icon_gh { + display: none; + width: px2rem(92); + height: px2rem(92); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-135); + z-index: 2; + border-radius: 50%; + } + + .zl { + width: px2rem(40); + height: px2rem(40); + position: absolute; + border-radius: 50%; + top: px2rem(114); + right: px2rem(24); + border: px2rem(2) solid #fff; + z-index: 3; + display: none; + } + + .svga { + position: absolute; + width: px2rem(20); + height: px2rem(18); + left: 50%; + transform: translateX(-50%); + top: px2rem(116); + z-index: 3; + } + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(128); + height: px2rem(128); + position: absolute; + top: px2rem(22); + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; + } + + p { + width: 120%; + color: #2B2D33; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-45%); + bottom: px2rem(-40); + vertical-align: middle; + white-space: nowrap; + text-align: center; + + span { + display: inline-block; + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + vertical-align: middle; + + img { + display: block; + width: px2rem(16); + height: px2rem(16); + margin: px2rem(6) auto; + } + } + + .boy { + background: #6BB3FF; + } + + .girl { + background: #FF80CC; + } + } + + .icon { + width: px2rem(146); + height: px2rem(36); + display: flex; + justify-content: space-between; + position: absolute; + bottom: px2rem(-78); + left: 50%; + transform: translateX(-45%); + + img { + display: inline-block; + width: px2rem(72); + height: px2rem(36); + } + } + + i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: px2rem(-110); + color: #696D7A; + font-size: px2rem(22); + font-weight: 500; + } + } + } + + .topBox1 { + background: url(../images/topList1.png) no-repeat; + background-size: 100% 100%; + } + + .topBox2 { + background: url(../images/topList2.png) no-repeat; + background-size: 100% 100%; + } + + .topBox3 { + background: url(../images/topList3.png) no-repeat; + background-size: 100% 100%; + } + + .topBox4 { + margin-top: 2.8rem; + background: url(../images/topList4.png) no-repeat; + background-size: 100% 100%; + } +} + +.header2 { + background: url(../images/header2.png) no-repeat; + background-size: 100% 100%; +} + +.header3 { + background: url(../images/header3.png) no-repeat; + background-size: 100% 100%; +} + +.header4 { + background: url(../images/header4.png) no-repeat; + background-size: 100% 100%; +} + +.list { + width: px2rem(750); + margin: -1.65rem auto 1.8rem; + height: 9rem; + border-radius: px2rem(40) px2rem(40) 0px 0px; + position: relative; + z-index: 2; + background: #fff; + overflow-y: scroll; + box-sizing: border-box; + padding-top: px2rem(48); + + &::-webkit-scrollbar { + display: none; + } + + li { + width: px2rem(750); + height: px2rem(96); + margin: 0 auto px2rem(44); + overflow: hidden; + position: relative; + + .svga { + width: px2rem(20); + height: px2rem(18); + position: absolute; + left: 1.45rem; + top: px2rem(62); + } + + .num { + width: px2rem(64); + text-align: center; + color: #2B2D33; + font-size: px2rem(36); + font-weight: 600; + height: 100%; + line-height: px2rem(96); + float: left; + margin-right: px2rem(10); + } + + .tx { + width: px2rem(96); + height: px2rem(96); + border-radius: 50%; + margin-right: px2rem(16); + float: left; + } + + .nameBox { + float: left; + + p { + color: #2B2D33; + font-size: px2rem(30); + font-weight: 600; + vertical-align: middle; + margin-top: px2rem(8); + + span { + display: inline-block; + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + // vertical-align: middle; + + img { + display: block; + width: px2rem(16); + height: px2rem(16); + margin: px2rem(6) auto; + } + } + + .boy { + background: #6BB3FF; + } + + .girl { + background: #FF80CC; + } + } + + .icon { + width: px2rem(146); + height: px2rem(36); + display: flex; + justify-content: space-between; + + img { + display: block; + width: px2rem(72); + height: px2rem(36); + } + } + } + + .score { + float: right; + text-align: right; + margin-right: px2rem(35); + // display: none; + + b { + color: #FFDA24; + font-size: px2rem(32); + font-weight: 600; + display: block; + margin-top: px2rem(8); + display: block; + margin-bottom: 0.1rem; + } + + i { + font-style: normal; + color: #696D7A; + font-size: px2rem(22); + } + } + + .right { + width: px2rem(116); + height: 100%; + float: right; + position: relative; + margin-right: 0.1rem; + display: none; + + img { + width: px2rem(40); + height: px2rem(40); + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + .nick { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #696D7A; + font-size: px2rem(20); + text-align: center; + margin-top: px2rem(50); + margin-bottom: px2rem(5); + } + + p { + width: 100%; + text-align: center; + color: #A2A7B8; + font-size: px2rem(18); + } + } + + .icon_gh { + display: none; + width: px2rem(92); + height: px2rem(92); + position: absolute; + right: px2rem(48); + top: px2rem(0); + border-radius: 50%; + } + } +} + +.my { + position: fixed; + width: 100%; + height: px2rem(136); + line-height: px2rem(136); + left: 0; + bottom: 0; + background: url(../images/my.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + padding: 0 px2rem(32); + + .num { + width: px2rem(66); + text-align: center; + color: #696D7A; + font-size: px2rem(22); + font-weight: 400; + margin-right: px2rem(18); + float: left; + } + + .tx { + display: block; + float: left; + width: px2rem(80); + height: px2rem(80); + border-radius: 50%; + margin-right: px2rem(16); + margin-top: px2rem(26); + } + + p { + width: 3rem; + float: left; + color: #2B2D33; + font-size: px2rem(26); + font-weight: 600; + white-space: nowrap; //不换行 + overflow: hidden; //超出隐藏 + text-overflow: ellipsis; //超出文本省略号 + } + + .score { + float: right; + color: #696D7A; + font-size: px2rem(22); + font-weight: 400; + + b { + color: #FFDA24; + font-size: px2rem(32); + font-weight: 600; + } + + i { + font-style: normal; + } + } +} + +.lastTopThree { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .6); + z-index: 9; + display: none; + + .lastTopThree_in { + width: px2rem(670); + height: px2rem(556); + background: url(../images/lastTopThree_in.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .box { + position: relative; + width: px2rem(622); + height: px2rem(368); + background: #fff; + border-radius: px2rem(32); + left: 50%; + transform: translateX(-50%); + top: px2rem(148); + + .no1 { + width: px2rem(188); + height: px2rem(184); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(136); + + .icon_gh { + display: none; + width: px2rem(44); + height: px2rem(44); + position: absolute; + right: px2rem(20); + top: px2rem(128); + z-index: 2; + border-radius: 50%; + } + + .svga { + position: absolute; + width: px2rem(20); + height: px2rem(18); + left: 50%; + transform: translateX(-50%); + top: 1.65rem; + z-index: 3; + } + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(140); + height: px2rem(140); + position: absolute; + top: px2rem(28); + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; + } + + p { + width: 100%; + color: #2B2D33; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + left: 0; + bottom: px2rem(-40); + // white-space: nowrap; //不换行 + // overflow: hidden; //超出隐藏 + // text-overflow: ellipsis; //超出文本省略号 + vertical-align: middle; + text-align: center; + + span { + display: inline-block; + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + vertical-align: middle; + + img { + display: block; + width: px2rem(16); + height: px2rem(16); + margin: px2rem(6) auto; + } + } + + .boy { + background: #6BB3FF; + } + + .girl { + background: #FF80CC; + } + } + + .icon { + width: px2rem(146); + height: px2rem(36); + display: flex; + justify-content: space-between; + position: absolute; + bottom: px2rem(-74); + left: 50%; + transform: translateX(-50%); + + img { + display: inline-block; + width: px2rem(72); + height: px2rem(36); + } + } + + i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: px2rem(-110); + color: #696D7A; + font-size: px2rem(22); + font-weight: 500; + } + } + + .no2 { + width: px2rem(148); + height: px2rem(142); + position: absolute; + left: px2rem(36); + bottom: px2rem(138); + + .icon_gh { + display: none; + width: px2rem(36); + height: px2rem(36); + position: absolute; + right: px2rem(16); + top: px2rem(98); + z-index: 2; + border-radius: 50%; + } + + .svga { + position: absolute; + width: px2rem(20); + height: px2rem(18); + left: 50%; + transform: translateX(-50%); + top: 1.3rem; + z-index: 3; + } + + .zl { + width: px2rem(56); + height: px2rem(56); + position: absolute; + border-radius: 50%; + top: px2rem(136); + right: px2rem(24); + border: px2rem(2) solid #fff; + z-index: 3; + display: none; + } + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(112); + height: px2rem(112); + position: absolute; + top: px2rem(22); + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; + } + + p { + width: 120%; + color: #2B2D33; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-40); + vertical-align: middle; + white-space: nowrap; + text-align: center; + span { + display: inline-block; + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + vertical-align: middle; + + img { + display: block; + width: px2rem(16); + height: px2rem(16); + margin: px2rem(6) auto; + } + } + + .boy { + background: #6BB3FF; + } + + .girl { + background: #FF80CC; + } + } + + .icon { + width: px2rem(146); + height: px2rem(36); + display: flex; + justify-content: space-between; + position: absolute; + bottom: px2rem(-78); + left: 50%; + transform: translateX(-57%); + + img { + display: inline-block; + width: px2rem(72); + height: px2rem(36); + } + } + + i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: px2rem(-110); + color: #696D7A; + font-size: px2rem(22); + font-weight: 500; + } + } + + .no3 { + width: px2rem(148); + height: px2rem(142); + position: absolute; + right: px2rem(36); + bottom: px2rem(138); + + .icon_gh { + display: none; + width: px2rem(36); + height: px2rem(36); + position: absolute; + right: px2rem(16); + top: px2rem(98); + z-index: 2; + border-radius: 50%; + } + + .svga { + position: absolute; + width: px2rem(20); + height: px2rem(18); + left: 50%; + transform: translateX(-50%); + top: 1.3rem; + z-index: 3; + } + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(112); + height: px2rem(112); + position: absolute; + top: px2rem(22); + left: 50%; + transform: translateX(-50%); + z-index: 1; + border-radius: 50%; + } + + p { + width: 120%; + color: #2B2D33; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-40); + vertical-align: middle; + white-space: nowrap; + text-align: center; + span { + display: inline-block; + width: px2rem(28); + height: px2rem(28); + border-radius: 50%; + vertical-align: middle; + + img { + display: block; + width: px2rem(16); + height: px2rem(16); + margin: px2rem(6) auto; + } + } + + .boy { + background: #6BB3FF; + } + + .girl { + background: #FF80CC; + } + } + + .icon { + width: px2rem(146); + height: px2rem(36); + display: flex; + justify-content: space-between; + position: absolute; + bottom: px2rem(-78); + left: 50%; + transform: translateX(-57%); + + img { + display: inline-block; + width: px2rem(72); + height: px2rem(36); + } + } + + i { + font-style: normal; + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: px2rem(-110); + color: #696D7A; + font-size: px2rem(22); + font-weight: 500; + } + } + } + } +} \ No newline at end of file diff --git a/view/yinmeng/modules/ranks/images/back.png b/view/yinmeng/modules/ranks/images/back.png new file mode 100644 index 0000000..554b5ce Binary files /dev/null and b/view/yinmeng/modules/ranks/images/back.png differ diff --git a/view/yinmeng/modules/ranks/images/boy.png b/view/yinmeng/modules/ranks/images/boy.png new file mode 100644 index 0000000..611b5d4 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/boy.png differ diff --git a/view/yinmeng/modules/ranks/images/girl.png b/view/yinmeng/modules/ranks/images/girl.png new file mode 100644 index 0000000..8dce996 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/girl.png differ diff --git a/view/yinmeng/modules/ranks/images/header1.png b/view/yinmeng/modules/ranks/images/header1.png new file mode 100644 index 0000000..a02b036 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/header1.png differ diff --git a/view/yinmeng/modules/ranks/images/header2.png b/view/yinmeng/modules/ranks/images/header2.png new file mode 100644 index 0000000..40766f2 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/header2.png differ diff --git a/view/yinmeng/modules/ranks/images/header3.png b/view/yinmeng/modules/ranks/images/header3.png new file mode 100644 index 0000000..1c374cd Binary files /dev/null and b/view/yinmeng/modules/ranks/images/header3.png differ diff --git a/view/yinmeng/modules/ranks/images/header4.png b/view/yinmeng/modules/ranks/images/header4.png new file mode 100644 index 0000000..66bf4a3 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/header4.png differ diff --git a/view/yinmeng/modules/ranks/images/icon1.png b/view/yinmeng/modules/ranks/images/icon1.png new file mode 100644 index 0000000..a143f11 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/icon1.png differ diff --git a/view/yinmeng/modules/ranks/images/icon2.png b/view/yinmeng/modules/ranks/images/icon2.png new file mode 100644 index 0000000..c0679a0 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/icon2.png differ diff --git a/view/yinmeng/modules/ranks/images/lastTopThree_in.png b/view/yinmeng/modules/ranks/images/lastTopThree_in.png new file mode 100644 index 0000000..632a18f Binary files /dev/null and b/view/yinmeng/modules/ranks/images/lastTopThree_in.png differ diff --git a/view/yinmeng/modules/ranks/images/listLast.png b/view/yinmeng/modules/ranks/images/listLast.png new file mode 100644 index 0000000..4269556 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/listLast.png differ diff --git a/view/yinmeng/modules/ranks/images/live.svga b/view/yinmeng/modules/ranks/images/live.svga new file mode 100644 index 0000000..2ef770c Binary files /dev/null and b/view/yinmeng/modules/ranks/images/live.svga differ diff --git a/view/yinmeng/modules/ranks/images/logo.png b/view/yinmeng/modules/ranks/images/logo.png new file mode 100644 index 0000000..6b8d2dc Binary files /dev/null and b/view/yinmeng/modules/ranks/images/logo.png differ diff --git a/view/yinmeng/modules/ranks/images/my.png b/view/yinmeng/modules/ranks/images/my.png new file mode 100644 index 0000000..f1b2b51 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/my.png differ diff --git a/view/yinmeng/modules/ranks/images/no1.png b/view/yinmeng/modules/ranks/images/no1.png new file mode 100644 index 0000000..411c88b Binary files /dev/null and b/view/yinmeng/modules/ranks/images/no1.png differ diff --git a/view/yinmeng/modules/ranks/images/no2.png b/view/yinmeng/modules/ranks/images/no2.png new file mode 100644 index 0000000..567a2c6 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/no2.png differ diff --git a/view/yinmeng/modules/ranks/images/no3.png b/view/yinmeng/modules/ranks/images/no3.png new file mode 100644 index 0000000..c127653 Binary files /dev/null and b/view/yinmeng/modules/ranks/images/no3.png differ diff --git a/view/yinmeng/modules/ranks/images/topList1.png b/view/yinmeng/modules/ranks/images/topList1.png new file mode 100644 index 0000000..a30acbc Binary files /dev/null and b/view/yinmeng/modules/ranks/images/topList1.png differ diff --git a/view/yinmeng/modules/ranks/images/topList2.png b/view/yinmeng/modules/ranks/images/topList2.png new file mode 100644 index 0000000..50b8ccf Binary files /dev/null and b/view/yinmeng/modules/ranks/images/topList2.png differ diff --git a/view/yinmeng/modules/ranks/images/topList3.png b/view/yinmeng/modules/ranks/images/topList3.png new file mode 100644 index 0000000..381188e Binary files /dev/null and b/view/yinmeng/modules/ranks/images/topList3.png differ diff --git a/view/yinmeng/modules/ranks/images/topList4.png b/view/yinmeng/modules/ranks/images/topList4.png new file mode 100644 index 0000000..0b1600d Binary files /dev/null and b/view/yinmeng/modules/ranks/images/topList4.png differ diff --git a/view/yinmeng/modules/ranks/index.html b/view/yinmeng/modules/ranks/index.html new file mode 100644 index 0000000..323b000 --- /dev/null +++ b/view/yinmeng/modules/ranks/index.html @@ -0,0 +1,177 @@ + + + + + + + 荣耀榜 + + + + + + +
+ +
+ + 荣耀榜 +
+ +
+
爱意榜
+
魅力榜
+
房间榜
+
公会榜
+
+ +
+
小时榜
+
日榜
+
周榜
+
月榜
+
+ +
+ 上期TOP3 > +
+ +
+
+ + + +
+

+ +

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

+ +

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

+ +

+
+ + +
+ + +
+
+
+ + + +
+
未上榜
+ +

+
0 爱意值
+
+ +
+
+
+
+ + +
+

+ +

+
+ + +
+ +
+
+ + +
+

+ +

+
+ + +
+ +
+
+ + +
+

+ +

+
+ + +
+ +
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/view/yinmeng/modules/ranks/js/index.js b/view/yinmeng/modules/ranks/js/index.js new file mode 100644 index 0000000..efb183f --- /dev/null +++ b/view/yinmeng/modules/ranks/js/index.js @@ -0,0 +1,410 @@ +let urlPrefix = getUrlPrefix() +let browser = checkVersion() +let env = EnvCheck(); +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 datetype = 1;//时间类型 1 日 2 周 3 总 4 半小时 5 月 6 小时 +var type = 2;//榜单类型 1 收礼榜 2 送礼榜 3 房间榜 +// 初始化函数 +$(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) + } + }) + getRank(type, datetype); + }, 100) +}) +// 获取榜单接口 +function getRank (type, datetype) { + $('.list li').remove(); + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/allrank/geth5', + data: { type, datetype, uid: pubInfo.uid }, + success (res) { + if (res.code === 200) { + var top3 = res.data.rankVoList.slice(0, 3); + var notTop3 = res.data.rankVoList.slice(3); + var arrAll = res.data.rankVoList; + // 处理前三 + if (top3.length < 3) { + let arr = new Array(3 - top3.length).fill({ + avatar: './images/logo.png', + nick: '虚位以待', + totalNum: "", + gender: '', + }) + top3.push(...arr) + } + top3.forEach((res, i) => { + if (res.nick == '虚位以待') { + $(`.header .topBox .no${i + 1} p span img`).hide(); + $(`.header .topBox .no${i + 1} .icon`).hide(); + $(`.header .topBox .no${i + 1} i`).hide(); + $(`.header .topBox .no${i + 1} .zl`).hide(); + } else { + $(`.header .topBox .no${i + 1} p span img`).show(); + $(`.header .topBox .no${i + 1} .icon`).show(); + $(`.header .topBox .no${i + 1} i`).show(); + $(`.header .topBox .no${i + 1} .zl`).show(); + } + $(`.header .topBox .no${i + 1} .ts`).attr('uid', res.uid); + $(`.header .topBox .no${i + 1} .ts`).attr('inRoomUid', res.inRoomUid); + $(`.header .topBox .no${i + 1} .ts`).attr('inMic', res.inMic); + $(`.header .topBox .no${i + 1} .tx`).attr('src', res.avatar); + $(`.header .topBox .no${i + 1} p`).html(`${res.nick.length > 6 ? `${res.nick.slice(0, 6)}...` : res.nick}`); + $(`.header .topBox .no${i + 1} .icon .icon1`).attr('src', res.experUrl); + $(`.header .topBox .no${i + 1} .icon .icon2`).attr('src', res.charmUrl); + if (i >= 1) { + $(`.header .topBox .no${i + 1} i`).text(`距上一名${unitProcessing((top3[i - 1].totalNum - res.totalNum), 10000, 1, 'W')}`); + } + if (res.inMic) { + $(`.header .topBox .no${i + 1} .svga`).show(); + } else { + $(`.header .topBox .no${i + 1} .svga`).hide(); + } + }) + // 处理非前三 + var str = ''; + notTop3.forEach((res, i) => { + str += ` +
  • +
    ${res.seqNo}
    + +
    +
    +

    ${res.nick.length > 7 ? `${res.nick.slice(0, 7)}...` : res.nick} + +

    +
    + + +
    +
    +
    + ${unitProcessing((arrAll[0 + 2].totalNum - res.totalNum), 10000, 1, 'W')}
    + 距上一名 +
    +
    • ` + }) + $('.list').append(str); + // 处理自己榜单 + $('.my .num').text(res.data.me.seqNo ? res.data.me.seqNo : '未上榜'); + $('.my .tx').attr('src', res.data.me.avatar); + $('.my .p').text(res.data.me.nick); + $('.my .score b').text(unitProcessing(res.data.me.totalNum, 10000, 1, 'W')); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('网络错误，请退出重进') + } + }) +} +// 获取上期榜单接口 +function getlastTop (type, datetype) { + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/allrank/last/top3', + data: { type, datetype, uid: pubInfo.uid }, + success (res) { + if (res.code === 200) { + var top3 = res.data.rankVoList.slice(0, 3); + // 处理前三 + if (top3.length < 3) { + let arr = new Array(3 - top3.length).fill({ + avatar: './images/logo.png', + nick: '虚位以待', + totalNum: "", + gender: '', + assist: { + avatar: './images/logo.png' + } + }) + top3.push(...arr) + } + top3.forEach((res, i) => { + console.log(res.nick); + if (res.nick == '虚位以待') { + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon`).hide(); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} i`).hide(); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .zl`).hide(); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} p span`).hide(); + console.log('123'); + } else { + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} p span img`).show(); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon`).show(); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} i`).show(); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .zl`).show(); + } + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .ts`).attr('uid', res.uid); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .ts`).attr('inRoomUid', res.inRoomUid); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .tx`).attr('src', res.avatar); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon_gh`).attr('src', res.assist.avatar); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} p`).html(`${res.nick.length > 6 ? `${res.nick.slice(0, 6)}...` : res.nick}`); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon .icon1`).attr('src', res.experUrl); + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon .icon2`).attr('src', res.charmUrl); + + if (res.inMic) { + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .svga`).show(); + } else { + $(`.lastTopThree .lastTopThree_in .box .no${i + 1} .svga`).hide(); + } + }) + $('.lastTopThree').show(); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('网络错误，请退出重进') + } + }) +} +// 获取工会榜单接口 +function clanListRank () { + $('.list li').remove(); + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/clan/listRank', + success (res) { + if (res.code === 200) { + // 处理前三 + var top3 = res.data.slice(0, 3); + if (top3.length < 3) { + let arr = new Array(3 - top3.length).fill({ + avatar: './images/logo.png', + name: '虚位以待', + }) + top3.push(...arr); + } + top3.forEach((res, i) => { + $(`.header .topBox .no${i + 1} .ts`).attr('uid', res.uid); + $(`.header .topBox .no${i + 1} .ts`).attr('inRoomUid', res.inRoomUid); + $(`.header .topBox .no${i + 1} .ts`).attr('inMic', res.inMic); + $(`.header .topBox .no${i + 1} .tx`).attr('src', res.avatar); + $(`.header .topBox .no${i + 1} .icon_gh`).attr('src', res.levelIcon); + $(`.header .topBox .no${i + 1} p`).html(`${res.name.length > 6 ? `${res.name.slice(0, 6)}...` : res.name}`); + $(`.header .topBox .no${i + 1} .icon .icon1`).attr('src', res.experUrl); + $(`.header .topBox .no${i + 1} .icon .icon2`).attr('src', res.charmUrl); + if (i >= 1) { + $(`.header .topBox .no${i + 1} i`).text(`距上一名${unitProcessing((top3[i - 1].totalNum - res.totalNum), 10000, 1, 'W')}`); + } + if (res.inMic) { + $(`.header .topBox .no${i + 1} .svga`).show(); + } else { + $(`.header .topBox .no${i + 1} .svga`).hide(); + } + }) + // 处理非前三 + var notTop3 = res.data.slice(3); + var str = ''; + notTop3.forEach((res, i) => { + str += ` +
  • +
    ${i + 4}
    + +
    +
    +

    ${res.name.length > 7 ? `${res.name.slice(0, 7)}...` : res.name} + +

    +
    + +
    • ` + }) + $('.list').append(str); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('网络错误，请退出重进') + } + }) +} +// 榜单切换按钮 +$('.header .tab div').click(function () { + var i = $(this).index() + 1; + listType = i; + $('.header .timeTab div').css('color', 'rgba(255, 255, 255, 0.9)'); + $('.header .tab div').removeClass('active1').removeClass('active2').removeClass('active3').removeClass('active4'); + $('.header .tab div').eq(i - 1).addClass(`active${i}`); + $('.header .timeTab div').removeClass('divBg1').removeClass('divBg2').removeClass('divBg3') + $('.header .timeTab div').removeClass('active1').removeClass('active2').removeClass('active3').removeClass('active4') + $('.header .timeTab div').addClass(`divBg${i}`); + $('.header').removeClass('header2').removeClass('header3').removeClass('header4'); + $('.header .listLast span').removeClass('sp1').removeClass('sp2').removeClass('sp3'); + $('.header .listLast span').addClass(`sp${i}`) + $('.header').addClass(`header${i}`); + $('.header .topBox').removeClass('topBox1').removeClass('topBox2').removeClass('topBox3').removeClass('topBox4'); + $('.header .topBox').addClass(`topBox${i}`); + $('.header .listLast').show(); + $('.my').show(); + $('.list li .right').hide(); + $('.header .topBox .no .zl').hide(); + $('.list li .icon_gh').hide(); + $('.list li .score').show(); + $('.list li .nameBox .icon').show(); + $('.list li .nameBox p span').show(); + $('.header .topBox .no .icon_gh').hide(); + $('.header .topBox .no .svga').show() + $('.header .topBox .no .icon').show() + $('.header .topBox .no p span').show() + $('.header .topBox .no i').show() + if (i == 1) { + $('.my .score i').text('爱意值'); + type = 2; + datetype = 1; + getRank(type, datetype); + } else if (i == 2) { + $('.my .score i').text('魅力值'); + $('.list li .right').show(); + $('.header .topBox .no .zl').show(); + type = 1; + datetype = 1; + getRank(type, datetype); + } + if (i == 3) { + $('.list li .right').show(); + $('.header .topBox .no .zl').show(); + $('.header .timeTab').addClass('timeTab2'); + $('.header .timeTab').show(); + $('.header .timeTab div').eq(0).addClass(`active${i}`); + $('.header .timeTab div').eq(0).css('color', `${listType == 1 ? '#FF5391' : listType == 2 ? '#A34DFF' : listType == 3 ? '#5C68F2' : ''}`).siblings().css('color', 'rgba(255, 255, 255, 0.9)') + $('.my .score i').text('房间值'); + $('.header .topBox .no p span').hide(); + type = 3; + datetype = 6; + getRank(type, datetype); + } else if (i == 4) { + $('.header .listLast').hide(); + $('.header .timeTab').hide(); + $('.header .timeTab div').eq(1).addClass(`active${i}`); + $('.my').hide(); + $('.list li .icon_gh').show(); + $('.list li .score').hide(); + $('.list li .nameBox .icon').hide(); + $('.list li .nameBox p span').hide(); + $('.header .topBox .no .icon_gh').show(); + $('.header .topBox .no .svga').hide() + $('.header .topBox .no .icon').hide() + $('.header .topBox .no p span').hide() + $('.header .topBox .no i').hide() + clanListRank(); + } else { + $('.header .timeTab').show(); + $('.header .timeTab').removeClass('timeTab2'); + $('.header .timeTab div').eq(1).addClass(`active${i}`); + $('.header .timeTab div').eq(1).css('color', `${listType == 1 ? '#FF5391' : listType == 2 ? '#A34DFF' : listType == 3 ? '#5C68F2' : ''}`).siblings().css('color', 'rgba(255, 255, 255, 0.9)') + } + return false; +}) +// 时间周期榜单切换 +$('.header .timeTab div').click(function () { + var i = $(this).index() + 1; + console.log(i); + $('.header .timeTab div').removeClass('active1').removeClass('active2').removeClass('active3').removeClass('active4') + $('.header .timeTab div').eq(i - 1).addClass(`active${i}`); + $(this).css('color', `${listType == 1 ? '#FF5391' : listType == 2 ? '#A34DFF' : listType == 3 ? '#5C68F2' : ''}`).siblings().css('color', 'rgba(255, 255, 255, 0.9)') + if (i == 1) { + datetype = 6; + } else if (i == 2) { + datetype = 1; + } else if (i == 3) { + datetype = 2; + } else if (i == 4) { + datetype = 5; + }; + getRank(type, datetype); +}) +// 关闭上期前三 +$('.lastTopThree').click(function () { + $('.lastTopThree').hide(); +}) +// 打开上期前三 +$('.header .listLast').click(function () { + if (listType == 3 || listType == 2) { + $('.lastTopThree .lastTopThree_in .box .no .icon_gh').show(); + } else { + $('.lastTopThree .lastTopThree_in .box .no .icon_gh').hide(); + } + getlastTop(type, datetype); +}) +// 点击前三按钮 +$('.header .topBox .no .ts').on('click', function () { + var uid = $(this).attr('uid'); + var inRoomUid = $(this).attr('inRoomUid'); + var inMic = $(this).attr('inMic'); + if (listType == 4) { + return + } + if (inMic == true) { + if (browser.ios) { + window.webkit.messageHandlers.openRoom.postMessage(inRoomUid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === 'object') { + window.androidJsObj.openRoom(inRoomUid); + } + } + console.log('房间', uid, inRoomUid, inMic); + } else { + if (browser.ios) { + window.webkit.messageHandlers.openPersonPage.postMessage(uid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === 'object') { + window.androidJsObj.openPersonPage(uid); + } + } + console.log('信息页', uid, inRoomUid, inMic); + } + +})