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

修复阿拉伯bug

Browse Source
This commit is contained in:
dragon
2024-04-22 19:27:43 +08:00
parent 66311a9666
commit b698efceff
10 changed files with 307 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
view/molistar/modules/fans_club/css/fans_rank.css
View File

@@ -264,3 +264,7 @@ body {
::-webkit-scrollbar {
display: none;
}
.arabic .top .back {
transform: rotate(180deg);
}

119
view/molistar/modules/fans_club/css/fans_rank.scss
View File

@@ -28,8 +28,8 @@
body{
// font-family: 'pingfang-medium';
width: px2rem(750, );
// height: px2rem(832, );
width: px2rem(750);
// height: px2rem(832);
height: 100vh;
background: #FEF3FC url('../images/bg.png') no-repeat 0 0/100% 100%;
}
@@ -41,10 +41,10 @@ body{
z-index: 999;
display: flex;
align-items: center;
width: px2rem(750, );
height: px2rem(88, );
margin: px2rem(22, ) 0;
padding: 0 px2rem(18, );
width: px2rem(750);
height: px2rem(88);
margin: px2rem(22) 0;
padding: 0 px2rem(18);
box-sizing: border-box;
.back{
display: flex;
@@ -52,11 +52,11 @@ body{
justify-content: center;
position: fixed;
z-index: 999;
width: px2rem(50, );
height: px2rem(50, );
width: px2rem(50);
height: px2rem(50);
img{
width: px2rem(16, );
height: px2rem(24, );
width: px2rem(16);
height: px2rem(24);
}
}
.title{
@@ -65,7 +65,7 @@ body{
transform: translateX(-50%);
z-index: 999;
// font-family: 'pingfang-bold';
font-size: px2rem(32, );
font-size: px2rem(32);
font-weight: bold;
color: #333;
}
@@ -74,10 +74,10 @@ body{
.active_num{
display: none;
position: fixed;
top: px2rem(108, );
left: px2rem(30, );
top: px2rem(108);
left: px2rem(30);
z-index: 999;
font-size: px2rem(20, );
font-size: px2rem(20);
color: #999;
}
@@ -86,16 +86,16 @@ body{
position: fixed;
left: 50%;
transform: translateX(-50%);
top: px2rem(152, );
top: px2rem(152);
z-index: 999;
width: px2rem(690, );
width: px2rem(690);
// height: 100%;
height: 100vh;
overflow-y: auto;
border: px2rem(2, ) solid #fff;
border: px2rem(2) solid #fff;
border-bottom: none;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
padding: px2rem(0, ) px2rem(20, ) px2rem(130, );
border-radius: px2rem(16) px2rem(16) 0 0;
padding: px2rem(0) px2rem(20) px2rem(130);
box-sizing: border-box;
&::after{
content: '';
@@ -105,61 +105,61 @@ body{
right: 0;
bottom: 0;
z-index: -1;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
border-radius: px2rem(16) px2rem(16) 0 0;
backdrop-filter: blur(px2rem(20));
-webkit-backdrop-filter: blur(px2rem(20));
}
li{
display: flex;
align-items: center;
margin-bottom: px2rem(40, );
margin-bottom: px2rem(40);
&:first-child{
margin-top: px2rem(30, );
margin-top: px2rem(30);
}
&:last-child{
margin-bottom: px2rem(180, );
margin-bottom: px2rem(180);
}
.index{
width: px2rem(60, );
width: px2rem(60);
text-align: center;
// font-family: 'pingfang-bold';
font-size: px2rem(32, );
font-size: px2rem(32);
font-weight: bold;
color: #666;
}
.avatar{
width: px2rem(88, );
height: px2rem(88, );
width: px2rem(88);
height: px2rem(88);
border-radius: 50%;
margin-left: px2rem(30, );
margin-right: px2rem(20, );
margin-left: px2rem(30);
margin-right: px2rem(20);
}
.info{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: px2rem(88, );
height: px2rem(88);
.nick{
font-size: px2rem(28, );
font-size: px2rem(28);
color: #333;
}
.icon{
width: px2rem(100, );
height: px2rem(28, );
margin-top: px2rem(8, );
width: px2rem(100);
height: px2rem(28);
margin-top: px2rem(8);
}
}
.num{
text-align: right;
font-size: px2rem(24, );
font-size: px2rem(24);
color: #999999;
p{
font-family: 'din';
font-size: px2rem(32, );
font-size: px2rem(32);
font-weight: bold;
color: #F5587B;
margin-top: px2rem(4, );
margin-top: px2rem(4);
}
}
}
@@ -172,42 +172,42 @@ body{
z-index: 9999;
display: flex;
align-items: center;
width: px2rem(750, );
height: px2rem(128, );
width: px2rem(750);
height: px2rem(128);
background-color: #fff;
.mine_avatar{
width: px2rem(80, );
height: px2rem(80, );
width: px2rem(80);
height: px2rem(80);
border-radius: 50%;
margin-left: px2rem(40, );
margin-right: px2rem(20, );
margin-left: px2rem(40);
margin-right: px2rem(20);
}
.mine_nick{
flex: 1;
// font-family: 'pingfang-bold';
font-size: px2rem(28, );
font-size: px2rem(28);
font-weight: bold;
color: #333;
}
.mine_status{
.join_btn{
display: none;
width: px2rem(176, );
height: px2rem(46, );
margin-right: px2rem(30, );
width: px2rem(176);
height: px2rem(46);
margin-right: px2rem(30);
}
.mine_num{
display: none;
text-align: right;
font-size: px2rem(24, );
font-size: px2rem(24);
color: #999999;
margin-right: px2rem(52, );
margin-right: px2rem(52);
p{
font-family: 'din';
font-size: px2rem(32, );
font-size: px2rem(32);
font-weight: bold;
color: #F5587B;
margin-top: px2rem(4, );
margin-top: px2rem(4);
}
}
}
@@ -219,11 +219,11 @@ body{
transform: translateX(-50%);
z-index: 999;
display: none;
width: px2rem(690, );
border: px2rem(2, ) solid #fff;
width: px2rem(690);
border: px2rem(2) solid #fff;
border-bottom: none;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
margin: px2rem(152, ) auto 0;
border-radius: px2rem(16) px2rem(16) 0 0;
margin: px2rem(152) auto 0;
&::after{
content: '';
position: absolute;
@@ -232,7 +232,7 @@ body{
bottom: 0;
right: 0;
z-index: -1;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
border-radius: px2rem(16) px2rem(16) 0 0;
backdrop-filter: blur(px2rem(20));
-webkit-backdrop-filter: blur(px2rem(20));
}
@@ -251,11 +251,16 @@ body{
p{
color: #666;
font-size: px2rem(26);
margin-top: px2rem(20, );
margin-top: px2rem(20);
}
}
}
::-webkit-scrollbar{
display: none;
}
.arabic {
.top .back {
transform: rotate(180deg);
}
}

4
view/molistar/modules/fans_club/css/myfans.css
View File

@@ -200,3 +200,7 @@ body {
::-webkit-scrollbar {
display: none;
}
.arabic .top .back {
transform: rotate(180deg);
}

83
view/molistar/modules/fans_club/css/myfans.scss
View File

@@ -28,8 +28,8 @@
body{
// font-family: 'pingfang-medium';
width: px2rem(750, );
// height: px2rem(832, );
width: px2rem(750);
// height: px2rem(832);
height: 100vh;
background: #FEF3FC url('../images/bg.png') no-repeat 0 0/100% 100%;
}
@@ -41,10 +41,10 @@ body{
z-index: 999;
display: flex;
align-items: center;
width: px2rem(750, );
height: px2rem(88, );
margin: px2rem(22, ) 0;
padding: 0 px2rem(18, );
width: px2rem(750);
height: px2rem(88);
margin: px2rem(22) 0;
padding: 0 px2rem(18);
box-sizing: border-box;
.back{
display: flex;
@@ -52,11 +52,11 @@ body{
justify-content: center;
position: fixed;
z-index: 999;
width: px2rem(50, );
height: px2rem(50, );
width: px2rem(50);
height: px2rem(50);
img{
width: px2rem(16, );
height: px2rem(24, );
width: px2rem(16);
height: px2rem(24);
}
}
.title{
@@ -65,7 +65,7 @@ body{
transform: translateX(-50%);
z-index: 999;
// font-family: 'pingfang-bold';
font-size: px2rem(32, );
font-size: px2rem(32);
font-weight: bold;
color: #333;
}
@@ -76,16 +76,16 @@ body{
position: fixed;
left: 50%;
transform: translateX(-50%);
top: px2rem(130, );
top: px2rem(130);
z-index: 999;
width: px2rem(690, );
width: px2rem(690);
// height: 100%;
height: 100vh;
overflow-y: auto;
border: px2rem(2, ) solid #fff;
border: px2rem(2) solid #fff;
border-bottom: none;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
padding: px2rem(0, ) px2rem(20, ) px2rem(130, );
border-radius: px2rem(16) px2rem(16) 0 0;
padding: px2rem(0) px2rem(20) px2rem(130);
box-sizing: border-box;
&::after{
content: '';
@@ -95,58 +95,58 @@ body{
right: 0;
bottom: 0;
z-index: -1;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
border-radius: px2rem(16) px2rem(16) 0 0;
backdrop-filter: blur(px2rem(20));
-webkit-backdrop-filter: blur(px2rem(20));
}
li{
display: flex;
align-items: center;
margin-bottom: px2rem(40, );
margin-bottom: px2rem(40);
&:first-child{
margin-top: px2rem(30, );
margin-top: px2rem(30);
}
.index{
width: px2rem(60, );
width: px2rem(60);
text-align: center;
// font-family: 'pingfang-bold';
font-size: px2rem(32, );
font-size: px2rem(32);
font-weight: bold;
color: #666;
}
.avatar{
width: px2rem(88, );
height: px2rem(88, );
width: px2rem(88);
height: px2rem(88);
border-radius: 50%;
margin-left: px2rem(30, );
margin-right: px2rem(20, );
margin-left: px2rem(30);
margin-right: px2rem(20);
}
.info{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: px2rem(88, );
height: px2rem(88);
.nick{
font-size: px2rem(28, );
font-size: px2rem(28);
color: #333;
}
.icon{
width: px2rem(100, );
height: px2rem(28, );
margin-top: px2rem(8, );
width: px2rem(100);
height: px2rem(28);
margin-top: px2rem(8);
}
}
.num{
text-align: right;
font-size: px2rem(24, );
font-size: px2rem(24);
color: #999999;
p{
font-family: 'din';
font-size: px2rem(32, );
font-size: px2rem(32);
font-weight: bold;
color: #F5587B;
margin-top: px2rem(4, );
margin-top: px2rem(4);
}
}
}
@@ -158,11 +158,11 @@ body{
transform: translateX(-50%);
z-index: 999;
display: none;
width: px2rem(690, );
border: px2rem(2, ) solid #fff;
width: px2rem(690);
border: px2rem(2) solid #fff;
border-bottom: none;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
margin: px2rem(152, ) auto 0;
border-radius: px2rem(16) px2rem(16) 0 0;
margin: px2rem(152) auto 0;
&::after{
content: '';
position: absolute;
@@ -171,7 +171,7 @@ body{
bottom: 0;
right: 0;
z-index: -1;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
border-radius: px2rem(16) px2rem(16) 0 0;
backdrop-filter: blur(px2rem(20));
-webkit-backdrop-filter: blur(px2rem(20));
}
@@ -190,11 +190,16 @@ body{
p{
color: #666;
font-size: px2rem(26);
margin-top: px2rem(20, );
margin-top: px2rem(20);
}
}
}
::-webkit-scrollbar{
display: none;
}
.arabic {
.top .back {
transform: rotate(180deg);
}
}

4
view/molistar/modules/fans_club/css/nameplate.css
View File

@@ -134,3 +134,7 @@ body {
width: 100%;
height: 100%;
}
.arabic .top .back {
transform: rotate(180deg);
}

73
view/molistar/modules/fans_club/css/nameplate.scss
View File

@@ -22,9 +22,9 @@ body{
z-index: 999;
display: flex;
align-items: center;
width: px2rem(750, );
height: px2rem(88, );
padding-top: px2rem(88, );
width: px2rem(750);
height: px2rem(88);
padding-top: px2rem(88);
// box-sizing: border-box;
.back{
display: flex;
@@ -32,12 +32,12 @@ body{
justify-content: center;
position: fixed;
z-index: 999;
width: px2rem(50, );
height: px2rem(50, );
margin-left: px2rem(20, );
width: px2rem(50);
height: px2rem(50);
margin-left: px2rem(20);
img{
width: px2rem(16, );
height: px2rem(24, );
width: px2rem(16);
height: px2rem(24);
}
}
.title{
@@ -46,7 +46,7 @@ body{
transform: translateX(-50%);
z-index: 999;
// font-family: 'pingfang-bold';
font-size: px2rem(36, );
font-size: px2rem(36);
font-weight: bold;
color: #333;
}
@@ -55,27 +55,27 @@ body{
.max{
.record{
position: fixed;
top: px2rem(340, );
top: px2rem(340);
right: 0;
width: px2rem(46, );
height: px2rem(158, );
width: px2rem(46);
height: px2rem(158);
img{
width: 100%;
height: 100%;
}
}
.header{
width: px2rem(750, );
height: px2rem(550, );
width: px2rem(750);
height: px2rem(550);
img{
width: 100%;
height: 100%;
}
}
.desc{
width: px2rem(690, );
height: px2rem(248, );
margin: px2rem(-60, ) auto px2rem(40, );
width: px2rem(690);
height: px2rem(248);
margin: px2rem(-60) auto px2rem(40);
img{
width: 100%;
height: 100%;
@@ -85,47 +85,52 @@ body{
display: flex;
flex-direction: column;
align-items: center;
width: px2rem(690, );
height: px2rem(698, );
width: px2rem(690);
height: px2rem(698);
background: url('../images/main.png') no-repeat 0 0/100% 100%;
margin: 0 auto px2rem(50, );
margin: 0 auto px2rem(50);
.nameplate{
width: px2rem(300, );
height: px2rem(86, );
margin-top: px2rem(190, );
width: px2rem(300);
height: px2rem(86);
margin-top: px2rem(190);
img{
width: 100%;
height: 100%;
}
}
.ipt{
font-size: px2rem(28, );
font-size: px2rem(28);
color: #873931;
margin-top: px2rem(106, );
margin-top: px2rem(106);
span{
font-weight: bold;
}
input{
width: px2rem(370, );
height: px2rem(58, );
border: px2rem(4, ) solid #D6DEFF;
border-radius: px2rem(16, );
width: px2rem(370);
height: px2rem(58);
border: px2rem(4) solid #D6DEFF;
border-radius: px2rem(16);
outline: none;
caret-color: #873931;
color: #999;
padding: 0 px2rem(10, );
padding: 0 px2rem(10);
box-sizing: border-box;
margin-left: px2rem(10, );
margin-left: px2rem(10);
}
}
.apply_btn{
width: px2rem(370, );
height: px2rem(100, );
margin: px2rem(90, ) auto 0;
width: px2rem(370);
height: px2rem(100);
margin: px2rem(90) auto 0;
img{
width: 100%;
height: 100%;
}
}
}
}
.arabic {
.top .back {
transform: rotate(180deg);
}
}

8
view/molistar/modules/fans_club/css/record.css
View File

@@ -140,3 +140,11 @@
::-webkit-scrollbar {
display: none;
}
.arabic .nameplate-desc-wrap {
margin-right: 0.2rem;
}
.arabic .top .back {
transform: rotate(180deg);
}

196
view/molistar/modules/fans_club/css/record.scss
View File

@@ -1,137 +1,165 @@
@function px2rem($px, $rem:75) {
@return $px / $rem+rem;
@function px2rem($px) {
@return $px / 75+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-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');
}
.top{
.top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
align-items: center;
width: px2rem(750, );
height: px2rem(88, );
padding-top: px2rem(88, );
width: px2rem(750);
height: px2rem(88);
padding-top: px2rem(88);
// box-sizing: border-box;
background-color: #fff;
.back{
.back {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 999;
width: px2rem(50, );
height: px2rem(50, );
margin-left: px2rem(20, );
img{
width: px2rem(16, );
height: px2rem(24, );
width: px2rem(50);
height: px2rem(50);
margin-left: px2rem(20);
img {
width: px2rem(16);
height: px2rem(24);
}
}
.title{
.title {
position: fixed;
left: 50%;
transform: translateX(-50%);
z-index: 999;
// font-family: 'pingfang-bold';
font-size: px2rem(36, );
font-size: px2rem(36);
font-weight: bold;
color: #333;
}
}
.max{
.max {
display: none;
// font-family: 'pingfang-bold';
padding: 0 px2rem(30);
margin-top: px2rem(176, );
margin-top: px2rem(176);
overflow-y: auto;
li{
li {
display: flex;
align-items: center;
margin-bottom: px2rem(32);
&:first-child {
margin-top: px2rem(14);
}
.nameplate-style {
width: px2rem(128);
height: px2rem(112);
background-color: #F4F4F4;
border-radius: px2rem(16);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: px2rem(32, );
&:first-child{
margin-top: px2rem(14, );
img {
width: px2rem(112);
height: px2rem(32);
}
.nameplate-style{
width: px2rem(128);
height: px2rem(112);
background-color: #F4F4F4;
border-radius: px2rem(16);
display: flex;
justify-content: center;
align-items: center;
img{
width: px2rem(112);
height: px2rem(32);
}
}
.nameplate-desc-wrap {
flex: 1;
display: flex;
flex-direction: column;
margin-left: px2rem(8);
.nameplate-desc {
font-size: px2rem(28);
color: #333333;
margin-bottom: px2rem(10);
}
.nameplate-desc-wrap{
flex: 1;
display: flex;
flex-direction: column;
margin-left: px2rem(8);
.nameplate-desc{
font-size: px2rem(28);
color: #333333;
margin-bottom: px2rem(10);
}
p{
span{
font-size: px2rem(20);
color: #CCCCCC;
}
}
p {
span {
font-size: px2rem(20);
color: #CCCCCC;
}
}
.isPass{
width: px2rem(200);
text-align: right;
p{
// font-family: 'pingfang-bold';
font-size: px2rem(30);
font-weight: bold;
color: #999;
&.not-pass{
color: #FB486A;
}
&.in-review{
color: #999;
}
}
.result{
font-size: px2rem(20);
color: #CCCCCC;
margin-top: px2rem(8);
}
}
.isPass {
width: px2rem(200);
text-align: right;
p {
// font-family: 'pingfang-bold';
font-size: px2rem(30);
font-weight: bold;
color: #999;
&.not-pass {
color: #FB486A;
}
&.in-review {
color: #999;
}
}
.result {
font-size: px2rem(20);
color: #CCCCCC;
margin-top: px2rem(8);
}
}
}
}
.no-record-wrap{
.no-record-wrap {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
img{
width: px2rem(374);
height: px2rem(390);
margin-bottom: px2rem(-100);
img {
width: px2rem(374);
height: px2rem(390);
margin-bottom: px2rem(-100);
}
span{
color: #666;
font-size: px2rem(32);
span {
color: #666;
font-size: px2rem(32);
}
}
::-webkit-scrollbar{
::-webkit-scrollbar {
display: none;
}
.arabic {
.nameplate-desc-wrap {
margin-right: 0.2rem;
}
.top .back {
transform: rotate(180deg);
}
}

4
view/molistar/modules/fans_club/css/rule.css
View File

@@ -99,3 +99,7 @@ body {
color: #333333;
line-height: 0.37333rem;
}
.arabic .top .back {
transform: rotate(180deg);
}

47
view/molistar/modules/fans_club/css/rule.scss
View File

@@ -20,7 +20,7 @@
body{
// font-family: 'pingfang-bold';
width: px2rem(750, );
width: px2rem(750);
height: 100vh;
background: #FEF3FC url('../images/bg.png') no-repeat 0 0/100% 100%;
}
@@ -32,10 +32,10 @@ body{
z-index: 999;
display: flex;
align-items: center;
width: px2rem(750, );
height: px2rem(88, );
margin: px2rem(22, ) 0;
padding: 0 px2rem(18, );
width: px2rem(750);
height: px2rem(88);
margin: px2rem(22) 0;
padding: 0 px2rem(18);
box-sizing: border-box;
.back{
display: flex;
@@ -43,11 +43,11 @@ body{
justify-content: center;
position: fixed;
z-index: 999;
width: px2rem(50, );
height: px2rem(50, );
width: px2rem(50);
height: px2rem(50);
img{
width: px2rem(16, );
height: px2rem(24, );
width: px2rem(16);
height: px2rem(24);
}
}
.title{
@@ -56,7 +56,7 @@ body{
transform: translateX(-50%);
z-index: 999;
// font-family: 'pingfang-bold';
font-size: px2rem(32, );
font-size: px2rem(32);
font-weight: bold;
color: #333;
}
@@ -66,14 +66,14 @@ body{
position: fixed;
left: 50%;
transform: translateX(-50%);
top: px2rem(130, );
top: px2rem(130);
z-index: 999;
width: px2rem(690, );
width: px2rem(690);
height: 100vh;
border: px2rem(2, ) solid #fff;
border: px2rem(2) solid #fff;
border-bottom: none;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
padding: px2rem(24, ) px2rem(20, ) 0;
border-radius: px2rem(16) px2rem(16) 0 0;
padding: px2rem(24) px2rem(20) 0;
box-sizing: border-box;
&::after{
content: '';
@@ -82,24 +82,29 @@ body{
left: 0;
bottom: 0;
right: 0;
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
border-radius: px2rem(16) px2rem(16) 0 0;
z-index: -1;
backdrop-filter: blur(px2rem(20));
-webkit-backdrop-filter: blur(px2rem(20));
}
.item{
margin-bottom: px2rem(24, );
margin-bottom: px2rem(24);
.qusetion{
font-size: px2rem(24, );
font-size: px2rem(24);
font-weight: bold;
color: #FE3478;
margin-bottom: px2rem(16, );
margin-bottom: px2rem(16);
}
.answer{
// font-family: 'pingfang-medium';
font-size: px2rem(20, );
font-size: px2rem(20);
color: #333333;
line-height: px2rem(28, );
line-height: px2rem(28);
}
}
}
.arabic {
.top .back {
transform: rotate(180deg);
}
}