moliparty/peko-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小时榜样式调整

Browse Source
This commit is contained in:
qf
2023-05-27 00:24:27 +08:00
parent 76054c7254
commit 00f31ed8de
6 changed files with 232 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
view/peko/modules/room_rank/css/hourRank.css
View File

@@ -182,6 +182,10 @@ body {
height: 0.9066666667rem;
margin-top: 0.2666666667rem;
}
.wrap .rank_wrap .top_three_wrap .item2 {
left: 50%;
transform: translateX(-50%);
}
.wrap .rank_wrap .desc {
display: flex;
margin-top: 0.5333333333rem;

371
view/peko/modules/room_rank/css/hourRank.scss
View File

@@ -1,24 +1,24 @@
@function px2rem($px, $rem:75) {
@function px2rem($px, $rem: 75) {
@return $px / $rem+rem;
}
@font-face{
@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');
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
}
@font-face{
@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');
url('../../../common/fonts/PingFang\ Medium.ttf') format('truetype'),
url('../../../common/fonts/PingFang\ Medium.ttf') format('svg');
}
@font-face{
@font-face {
font-family: 'din';
src: url('../../../common/fonts/DINCond-Medium.ttf');
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
@@ -26,14 +26,14 @@
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
}
body{
body {
width: 100%;
// font-family: 'pingfang-bold';
// background-color: #fff;
}
.wrap{
.tab_wrap{
.wrap {
.tab_wrap {
position: fixed;
top: 0;
left: 0;
@@ -41,7 +41,8 @@ body{
width: 100%;
height: px2rem(106, );
background: url('../images/single/top.png') no-repeat 0 0/100% 100%;
.tab_contain{
.tab_contain {
position: relative;
display: flex;
justify-content: center;
@@ -51,7 +52,8 @@ body{
padding-top: px2rem(16, );
// box-sizing: border-box;
margin-bottom: px2rem(8, );
p{
p {
position: relative;
height: px2rem(50, );
line-height: px2rem(50, );
@@ -61,9 +63,11 @@ body{
font-weight: bold;
color: #fff;
text-align: center;
&.active{
&.active {
font-size: px2rem(36, );
&::after{
&::after {
content: '';
position: absolute;
left: 50%;
@@ -76,7 +80,8 @@ body{
}
}
}
.rule_icon{
.rule_icon {
position: absolute;
right: px2rem(30, );
width: px2rem(40, );
@@ -84,11 +89,13 @@ body{
}
}
}
.rank_wrap{
.rank_wrap {
position: relative;
overflow: auto;
margin-top: px2rem(106, );
.time_wrap{
.time_wrap {
position: absolute;
top: px2rem(440, );
left: px2rem(0, );
@@ -97,185 +104,223 @@ body{
width: 100%;
padding: 0 px2rem(30, );
box-sizing: border-box;
p{
p {
font-size: px2rem(20, );
font-weight: bold;
color: #B95CFF;
height: px2rem(28, );
line-height: px2rem(28, );
span{
span {
font-weight: bold;
}
}
}
.top_three_wrap{
.top_three_wrap {
position: relative;
width: 100%;
height: px2rem(434, );
#hour_top_bg {
position: absolute;
top: 0;
left: 0;
}
// background: url('../images/single/topthree-bg.png') no-repeat 0 0/100% 100%;
// margin-top: px2rem(160, );
// padding-top: px2rem(54, );
box-sizing: border-box;
.top_three_item{
position: absolute;
width: px2rem(216, );
text-align: center;
color: #fff;
&:first-child{
left: 50%;
transform: translateX(-50%);
}
&:nth-child(2){
left: px2rem(40, );
}
&:nth-child(2), &:nth-child(3){
.avatar{
width: px2rem(176, );
height: px2rem(168, );
margin-top: px2rem(92, );
p{
background-image: url('../images/single/second.png');
}
img{
top: px2rem(-160, );
width: px2rem(132, );
height: px2rem(132, );
}
}
}
&:nth-child(3){
right: px2rem(40, );
.avatar{
width: px2rem(160, );
p{
background-image: url('../images/single/third.png');
}
}
}
.avatar{
width: px2rem(216, );
height: px2rem(210, );
margin: px2rem(0, ) auto px2rem(8, );
p{
position: relative;
z-index: 99;
width: 100%;
height: 100%;
background: url('../images/single/first.png') no-repeat 0 0/100% 100%;
}
img{
position: relative;
top: px2rem(-188, );
width: px2rem(160, );
height: px2rem(160, );
border-radius: 50%;
}
}
.nick{
height: px2rem(40, );
line-height: px2rem(40, );
font-size: px2rem(28, );
font-weight: bold;
color: #333;
}
.num{
font-size: px2rem(20, );
color: #ccc;
span{
display: inline-block;
font-family: 'din';
font-size: px2rem(24, );
font-weight: bold;
color: #B95CFF;
margin-top: px2rem(2, );
margin-bottom: px2rem(6, );
}
img{
width: px2rem(56, );
height: px2rem(68, );
margin-top: px2rem(20, );
}
.top_three_item {
position: absolute;
width: px2rem(216, );
text-align: center;
color: #fff;
&:first-child {
left: 50%;
transform: translateX(-50%);
}
&:nth-child(2) {
left: px2rem(40, );
}
&:nth-child(2),
&:nth-child(3) {
.avatar {
width: px2rem(176, );
height: px2rem(168, );
margin-top: px2rem(92, );
p {
background-image: url('../images/single/second.png');
}
img {
top: px2rem(-160, );
width: px2rem(132, );
height: px2rem(132, );
}
}
}
&:nth-child(3) {
right: px2rem(40, );
.avatar {
width: px2rem(160, );
p {
background-image: url('../images/single/third.png');
}
}
}
.avatar {
width: px2rem(216, );
height: px2rem(210, );
margin: px2rem(0, ) auto px2rem(8, );
p {
position: relative;
z-index: 99;
width: 100%;
height: 100%;
background: url('../images/single/first.png') no-repeat 0 0/100% 100%;
}
img {
position: relative;
top: px2rem(-188, );
width: px2rem(160, );
height: px2rem(160, );
border-radius: 50%;
}
}
.nick {
height: px2rem(40, );
line-height: px2rem(40, );
font-size: px2rem(28, );
font-weight: bold;
color: #333;
}
.num {
font-size: px2rem(20, );
color: #ccc;
span {
display: inline-block;
font-family: 'din';
font-size: px2rem(24, );
font-weight: bold;
color: #B95CFF;
margin-top: px2rem(2, );
margin-bottom: px2rem(6, );
}
img {
width: px2rem(56, );
height: px2rem(68, );
margin-top: px2rem(20, );
}
}
}
.item2 {
left: 50%;
transform: translateX(-50%);
}
}
.desc{
.desc {
display: flex;
margin-top: px2rem(40, );
margin-bottom: px2rem(24, );
p{
p {
font-size: px2rem(20, );
font-weight: bold;
color: #999;
&:first-child{
&:first-child {
margin-left: px2rem(30, );
}
&:nth-child(2){
&:nth-child(2) {
flex: 1;
margin-left: px2rem(70, );
}
&:last-child{
&:last-child {
margin-right: px2rem(40, );
}
}
}
ul{
// height: px2rem(280, );
// overflow: auto;
// margin-top: px2rem(34, );
margin-bottom: px2rem(150, );
li{
display: flex;
align-items: center;
margin-bottom: px2rem(32, );
.index{
width: px2rem(20, );
text-align: center;
font-size: px2rem(32, );
font-weight: bold;
color: #999;
margin-left: px2rem(40, );
margin-right: px2rem(56, );
}
.others_avatar{
width: px2rem(88, );
height: px2rem(88, );
margin-right: px2rem(24, );
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.others_nick{
flex: 1;
font-size: px2rem(28, );
font-weight: bold;
color: #333;
}
.others_num{
font-size: px2rem(24, );
color: #CCCCCC;
text-align: right;
margin-right: px2rem(40, );
span{
font-family: 'din';
font-size: px2rem(32, );
font-weight: bold;
color: #B95CFF;
}
}
ul {
// height: px2rem(280, );
// overflow: auto;
// margin-top: px2rem(34, );
margin-bottom: px2rem(150, );
li {
display: flex;
align-items: center;
margin-bottom: px2rem(32, );
.index {
width: px2rem(20, );
text-align: center;
font-size: px2rem(32, );
font-weight: bold;
color: #999;
margin-left: px2rem(40, );
margin-right: px2rem(56, );
}
.others_avatar {
width: px2rem(88, );
height: px2rem(88, );
margin-right: px2rem(24, );
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.others_nick {
flex: 1;
font-size: px2rem(28, );
font-weight: bold;
color: #333;
}
.others_num {
font-size: px2rem(24, );
color: #CCCCCC;
text-align: right;
margin-right: px2rem(40, );
span {
font-family: 'din';
font-size: px2rem(32, );
font-weight: bold;
color: #B95CFF;
}
}
}
}
}
.mine{
.mine {
position: fixed;
left: 0;
bottom: 0;
@@ -286,7 +331,8 @@ body{
height: px2rem(128, );
background-color: #fff;
box-shadow: 0 px2rem(-2, ) px2rem(8, ) #F4F4F4;
.mine_index{
.mine_index {
width: px2rem(72, );
text-align: center;
font-size: px2rem(24, );
@@ -294,24 +340,28 @@ body{
color: #999;
margin-left: px2rem(20, );
}
.mine_avatar{
.mine_avatar {
width: px2rem(88, );
height: px2rem(88, );
border-radius: 50%;
margin: 0 px2rem(24, );
}
.mine_nick{
.mine_nick {
flex: 1;
font-size: px2rem(28, );
font-weight: bold;
color: #333;
}
.mine_num{
.mine_num {
text-align: right;
font-size: px2rem(24, );
color: #ccc;
margin-right: px2rem(40, );
p{
p {
font-family: 'din';
font-size: px2rem(32, );
font-weight: bold;
@@ -322,7 +372,6 @@ body{
}
}
::-webkit-scrollbar{
::-webkit-scrollbar {
display: none;
}
}

4
view/peko/modules/room_rank/css/hourRank1.css
View File

@@ -182,6 +182,10 @@ body {
height: 0.9066666667rem;
margin-top: 0.2666666667rem;
}
.wrap .rank_wrap .top_three_wrap .item2 {
left: 50%;
transform: translateX(-50%);
}
.wrap .rank_wrap .desc {
display: flex;
margin-top: 0.5333333333rem;

4
view/peko/modules/room_rank/css/hourRank1.scss
View File

@@ -203,6 +203,10 @@ body{
}
}
}
.item2 {
left: 50%;
transform: translateX(-50%);
}
}
.desc{

13
view/peko/modules/room_rank/hourRank.html
View File

@@ -20,7 +20,7 @@
<img src="./images/single/rule-icon.png" alt="" class="rule_icon">
</div>
</div>
<div class="rank_wrap">
<div class="time_wrap">
<!-- <p id="time_wrap_p1"><span class="h"></span>点小时榜</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
@@ -31,6 +31,7 @@
<div class="top_three_wrap">
<img id="hour_top_bg" src="" alt="">
</div>
<div class="desc">
@@ -60,11 +61,11 @@
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/en.js"></script>
<script src="./local/ar.js"></script>
<script src="./local/id.js"></script>
<script src="./local/tr.js"></script>
<script src="../../common/local/langHandler.js"></script>
<script src="./local/en.js"></script>
<script src="./local/ar.js"></script>
<script src="./local/id.js"></script>
<script src="./local/tr.js"></script>
<script src="../../common/local/langHandler.js"></script>
<script src="./js/hourRank.js"></script>
</body>

5
view/peko/modules/room_rank/js/hourRank.js
View File

@@ -95,10 +95,10 @@ const renderLastHourThree = () => {
const langReplace = window.lang.replace;
const localLang = window.lang;
let noAvatar1 = langReplace(localLang.demoModule.noAvatar1)
let noAvatar2 = langReplace(localLang.demoModule.noAvatar2)
let hour_top_bg = langReplace(localLang.demoModule.hour_top_bg)
let noAvatar3 = langReplace(localLang.demoModule.noAvatar3)
str += `
<div class="top_three_item">
<div class="top_three_item item${index}">
<div class="avatar" data-uid=${item.uid}>
<p></p>
<img src="${item.avatar ? item.avatar : noAvatar1}" alt="">
@@ -229,6 +229,7 @@ $(function () {
initLocalLang();
translateFun();
getHourList()
renderLastHourThree()
}, 50)