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

我的等级页面更换图片样式

Browse Source
This commit is contained in:
chenruiye
2025-06-11 14:28:51 +08:00
parent 3c9cf236ee
commit 51f4cae686
13 changed files with 127 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
view/eparty/modules/levelNew/css/index.css
View File

@@ -3,11 +3,9 @@ body {
width: 100%;
background: #0F0900;
}
html .page1 .back,
body .page1 .back {
width: 10rem;
height: 6.96rem;
position: fixed;
left: 50%;
transform: translateX(-50%);
@@ -17,17 +15,15 @@ body .page1 .back {
background: url(../images/top.png) no-repeat;
background-size: 100% 100%;
}
html .page1 .back .backIcon,
body .page1 .back .backIcon {
width: 0.58667rem;
height: 0.58667rem;
width: 0.5866666667rem;
height: 0.5866666667rem;
position: absolute;
left: 0.4rem;
top: 1.46667rem;
top: 1.4666666667rem;
z-index: 2;
}
html .page1 .back .tab,
body .page1 .back .tab {
width: 80%;
@@ -40,95 +36,69 @@ body .page1 .back .tab {
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.5);
font-size: 0.45333rem;
font-size: 0.4533333333rem;
font-weight: 400;
z-index: 2;
}
html .page1 .back .tab div,
body .page1 .back .tab div {
width: 50%;
text-align: center;
}
html .page1 .back .tab .act,
body .page1 .back .tab .act {
color: #fff;
font-weight: 500;
}
html .page1 .back .myInfo,
body .page1 .back .myInfo {
width: 9.02667rem;
height: 4.57333rem;
width: 9.0266666667rem;
height: 4.5733333333rem;
background: url(../images/myInfoBg.png) no-repeat;
background-size: 100% 100%;
margin: 2.4rem auto;
margin: 2.4rem auto 0;
position: relative;
}
html .page1 .back .myInfo .rewards,
body .page1 .back .myInfo .rewards {
width: 1.78667rem;
height: 0.64rem;
line-height: 0.64rem;
text-align: center;
color: #FCD19D;
font-size: 0.34667rem;
position: absolute;
top: 0.93333rem;
right: 0.12rem;
background: #764F12;
border-radius: 0.64rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
html .page1 .back .myInfo .tx,
body .page1 .back .myInfo .tx {
width: 1.68rem;
height: 1.68rem;
width: 2.0533333333rem;
height: 2.0533333333rem;
border-radius: 50%;
position: absolute;
top: 0.72rem;
left: 0.56rem;
top: 0.1066666667rem;
left: 0rem;
}
html .page1 .back .myInfo .top,
body .page1 .back .myInfo .top {
position: absolute;
top: 0.90667rem;
top: 0.9066666667rem;
left: 2.48rem;
height: 0.66667rem;
line-height: 0.66667rem;
height: 0.6666666667rem;
line-height: 0.6666666667rem;
width: 3rem;
}
html .page1 .back .myInfo .top .level,
body .page1 .back .myInfo .top .level {
color: #613B00;
color: #240061;
font-size: 0.48rem;
font-weight: 600;
display: inline-block;
}
html .page1 .back .myInfo .top .levelIcon,
body .page1 .back .myInfo .top .levelIcon {
display: inline-block;
width: 1.30667rem;
height: 0.66667rem;
width: 1.3066666667rem;
height: 0.6666666667rem;
}
html .page1 .back .myInfo .bootom,
body .page1 .back .myInfo .bootom {
position: absolute;
left: 2.48rem;
font-size: 0.34667rem;
color: #613B00;
font-size: 0.3466666667rem;
color: #240061;
font-weight: 500;
top: 1.70667rem;
top: 1.7066666667rem;
}
html .page1 .back .myInfo .lineBox,
body .page1 .back .myInfo .lineBox {
width: 7.92rem;
@@ -140,7 +110,6 @@ body .page1 .back .myInfo .lineBox {
left: 50%;
transform: translateX(-50%);
}
html .page1 .back .myInfo .lineBox .line,
body .page1 .back .myInfo .lineBox .line {
width: 0%;
@@ -148,183 +117,174 @@ body .page1 .back .myInfo .lineBox .line {
position: absolute;
top: 0;
left: 0;
background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
background: linear-gradient(90deg, #961EFF 0%, #BB6CFF 100%);
border-radius: 0.16rem;
}
html .page1 .back .myInfo .lineBox .thisLevel,
body .page1 .back .myInfo .lineBox .thisLevel {
color: #613B00;
color: #240061;
font-size: 0.32rem;
font-weight: 500;
position: absolute;
left: 0;
top: -0.50667rem;
top: -0.5066666667rem;
}
html .page1 .back .myInfo .lineBox .thisLevel b,
body .page1 .back .myInfo .lineBox .thisLevel b {
font-size: 0.32rem;
font-weight: 500;
}
html .page1 .back .myInfo .lineBox .nextLevel,
body .page1 .back .myInfo .lineBox .nextLevel {
color: #613B00;
color: #240061;
font-size: 0.32rem;
font-weight: 500;
position: absolute;
right: 0;
top: -0.50667rem;
top: -0.5066666667rem;
}
html .page1 .back .myInfo .lineBox .nextLevel b,
body .page1 .back .myInfo .lineBox .nextLevel b {
font-size: 0.32rem;
font-weight: 500;
}
html .page1 .back .myInfo p,
body .page1 .back .myInfo p {
text-align: center;
color: #613B00;
color: #240061;
font-size: 0.32rem;
font-weight: 5.33333rem;
font-weight: 5.3333333333rem;
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.44rem;
}
html .page1 .back .rewards,
body .page1 .back .rewards {
background: linear-gradient(270deg, #5F08B6 1%, #9900FF 100%);
font-family: PingFang SC, PingFang SC;
font-weight: normal;
font-size: 0.3466666667rem;
color: #FFFFFF;
line-height: 0.48rem;
text-align: center;
font-style: normal;
text-transform: none;
padding: 0.16rem 2.9333333333rem;
margin: 0.1866666667rem 1.28rem;
border-radius: 0.4266666667rem;
}
html .page1 .rule,
body .page1 .rule {
width: 100%;
margin-top: 7.3rem;
margin-top: 8.5rem;
}
html .page1 .rule .ruleText,
body .page1 .rule .ruleText {
width: 9.2rem;
padding: 0.98667rem 0.32rem 0.42667rem;
padding: 0.9866666667rem 0.32rem 0.4266666667rem;
position: relative;
background: linear-gradient(180deg, #432405 0%, #201201 100%);
border: 0.01333rem solid #C98853;
border-radius: 0.26667rem;
margin: 0 auto 0.50667rem;
background: linear-gradient(180deg, #220543 0%, #0C0120 100%);
border: 0.0133333333rem solid #8253C9;
border-radius: 0.2666666667rem;
margin: 0 auto 0.5066666667rem;
box-sizing: border-box;
}
html .page1 .rule .ruleText .title,
body .page1 .rule .ruleText .title {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
padding: 0rem 0.45333rem;
padding: 0rem 0.4533333333rem;
text-align: center;
color: #3E2000;
height: 0.69333rem;
height: 0.6933333333rem;
line-height: 0.64rem;
background: linear-gradient(270deg, #FFB761 0%, #FFE8CC 47%, #FFB761 100%);
background: linear-gradient(270deg, #9B61FF 0%, #E1CCFF 47%, #A561FF 100%);
border-top-left-radius: 0rem;
border-top-right-radius: 0rem;
border-bottom-left-radius: 0.26667rem;
border-bottom-right-radius: 0.26667rem;
font-size: 0.37333rem;
border-bottom-left-radius: 0.2666666667rem;
border-bottom-right-radius: 0.2666666667rem;
font-size: 0.3733333333rem;
font-weight: 500;
white-space: nowrap;
}
html .page1 .rule .ruleText p,
body .page1 .rule .ruleText p {
color: #FCD19D;
color: #D2B8FF;
font-weight: 400;
font-size: 0.34667rem;
font-size: 0.3466666667rem;
line-height: 0.48rem;
}
html .page1 .rule .ruleText img,
body .page1 .rule .ruleText img {
display: block;
margin: 0.37333rem auto 0rem;
margin: 0.3733333333rem auto 0rem;
width: 8.56rem;
}
html .page1 .rule .ruleText .img2,
body .page1 .rule .ruleText .img2 {
width: 7.14667rem;
margin: 0.37333rem 0 0 0;
width: 7.1466666667rem;
margin: 0.3733333333rem 0 0 0;
}
html .page2 .back,
body .page2 .back {
background: url(../images/top2.png) no-repeat;
background-size: 100% 100%;
}
html .page2 .back .myInfo,
body .page2 .back .myInfo {
background: url(../images/myInfoBg2.png) no-repeat;
background-size: 100% 100%;
}
html .page2 .back .myInfo .rewards,
body .page2 .back .myInfo .rewards {
display: none;
}
html .page2 .back .myInfo .top .level,
body .page2 .back .myInfo .top .level {
color: #571E6D;
color: #61001B;
}
html .page2 .back .myInfo .bootom,
body .page2 .back .myInfo .bootom {
color: #571E6D;
color: #61001B;
}
html .page2 .back .myInfo .lineBox .line,
body .page2 .back .myInfo .lineBox .line {
background: linear-gradient(90deg, #A964FF 0%, #CC99FF 98%);
background: linear-gradient(90deg, #FF1E57 0%, #FF6C8C 100%);
}
html .page2 .back .myInfo .lineBox .thisLevel,
body .page2 .back .myInfo .lineBox .thisLevel {
color: #571E6D;
color: #61001B;
}
html .page2 .back .myInfo .lineBox .nextLevel,
body .page2 .back .myInfo .lineBox .nextLevel {
color: #571E6D;
color: #61001B;
}
html .page2 .back .myInfo p,
body .page2 .back .myInfo p {
color: #571E6D;
color: #61001B;
}
html .page2 .back .rewards,
body .page2 .back .rewards {
display: none;
}
html .page2 .rule2,
body .page2 .rule2 {
display: none;
}
html .page2 .rule2 .ruleText,
body .page2 .rule2 .ruleText {
background: linear-gradient(180deg, #220543 0%, #160120 100%);
border: 0.01333rem solid #7E53C9;
background: linear-gradient(180deg, #430517 0%, #200101 100%);
border: 0.0133333333rem solid #C95353;
}
html .page2 .rule2 .ruleText .title,
body .page2 .rule2 .ruleText .title {
background: linear-gradient(270deg, #D0B1FF 3%, #F8F4FF 47%, #D0B1FF 100%);
background: linear-gradient(270deg, #FFB1CA 3%, #FFF4F8 48%, #FFB1C2 100%);
}
html .page2 .rule2 .ruleText p,
body .page2 .rule2 .ruleText p {
color: #E7B8FF;
color: #FFB8CA;
}
.rule2 {
display: none;
}
}

94
view/eparty/modules/levelNew/css/index.scss
View File

@@ -10,7 +10,7 @@ body {
.page1 {
.back {
width: px2rem(750);
height: px2rem(522);
// height: px2rem(522);
position: fixed;
left: 50%;
transform: translateX(-50%);
@@ -60,32 +60,18 @@ body {
height: px2rem(343);
background: url(../images/myInfoBg.png) no-repeat;
background-size: 100% 100%;
margin: px2rem(180) auto;
margin: px2rem(180) auto 0;
position: relative;
.rewards {
width: px2rem(134);
height: px2rem(48);
line-height: px2rem(48);
text-align: center;
color: #FCD19D;
font-size: px2rem(26);
position: absolute;
top: px2rem(70);
right: px2rem(9);
background: #764F12;
border-radius: px2rem(48);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tx {
width: px2rem(126);
height: px2rem(126);
width: px2rem(154);
height: px2rem(154);
border-radius: 50%;
position: absolute;
top: px2rem(54);
left: px2rem(42);
top: px2rem(8);
left: px2rem(0);
}
.top {
@@ -97,7 +83,7 @@ body {
width: 3rem;
.level {
color: #613B00;
color: #240061;
font-size: px2rem(36);
font-weight: 600;
display: inline-block;
@@ -114,7 +100,7 @@ body {
position: absolute;
left: px2rem(186);
font-size: px2rem(26);
color: #613B00;
color: #240061;
font-weight: 500;
top: px2rem(128);
}
@@ -135,12 +121,12 @@ body {
position: absolute;
top: 0;
left: 0;
background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
background: linear-gradient( 90deg, #961EFF 0%, #BB6CFF 100%);
border-radius: px2rem(12);
}
.thisLevel {
color: #613B00;
color: #240061;
font-size: px2rem(24);
font-weight: 500;
position: absolute;
@@ -154,7 +140,7 @@ body {
}
.nextLevel {
color: #613B00;
color: #240061;
font-size: px2rem(24);
font-weight: 500;
position: absolute;
@@ -170,7 +156,7 @@ body {
p {
text-align: center;
color: #613B00;
color: #240061;
font-size: px2rem(24);
font-weight: px2rem(400);
width: 100%;
@@ -180,19 +166,34 @@ body {
top: px2rem(258);
}
}
.rewards {
background: linear-gradient(270deg, #5F08B6 1%, #9900FF 100%);
font-family: PingFang SC, PingFang SC;
font-weight: normal;
font-size: px2rem(26);
color: #FFFFFF;
line-height: px2rem(36);
text-align: center;
font-style: normal;
text-transform: none;
padding: px2rem(12) px2rem(220);
margin: px2rem(14) px2rem(96);
border-radius: px2rem(32);
}
}
.rule {
width: 100%;
margin-top: 7.3rem;
margin-top: 8.5rem;
// display: none;
.ruleText {
width: px2rem(690);
padding: px2rem(74) px2rem(24) px2rem(32);
position: relative;
background: linear-gradient(180deg, #432405 0%, #201201 100%);
border: px2rem(1) solid #C98853;
background: linear-gradient( 180deg, #220543 0%, #0C0120 100%);
border: px2rem(1) solid #8253C9;
border-radius: px2rem(20);
margin: 0 auto px2rem(38);
box-sizing: border-box;
@@ -207,7 +208,7 @@ body {
color: #3E2000;
height: px2rem(52);
line-height: px2rem(48);
background: linear-gradient(270deg, #FFB761 0%, #FFE8CC 47%, #FFB761 100%);
background: linear-gradient( 270deg, #9B61FF 0%, #E1CCFF 47%, #A561FF 100%);
border-top-left-radius: px2rem(0);
border-top-right-radius: px2rem(0);
border-bottom-left-radius: px2rem(20);
@@ -218,7 +219,7 @@ body {
}
p {
color: #FCD19D;
color: #D2B8FF;
font-weight: 400;
font-size: px2rem(26);
line-height: px2rem(36);
@@ -246,56 +247,59 @@ body {
.myInfo {
background: url(../images/myInfoBg2.png) no-repeat;
background-size: 100% 100%;
.rewards{
display: none;
}
.tx {}
.top {
.level {
color: #571E6D;
color: #61001B;
}
}
.bootom {
color: #571E6D;
color: #61001B;
}
.lineBox {
.line {
background: linear-gradient(90deg, #A964FF 0%, #CC99FF 98%);
background: linear-gradient( 90deg, #FF1E57 0%, #FF6C8C 100%);
}
.thisLevel {
color: #571E6D;
color: #61001B;
}
.nextLevel {
color: #571E6D;
color: #61001B;
}
}
p {
color: #571E6D;
color: #61001B;
}
}
.rewards {
display: none;
}
}
.rule2 {
display: none;
.ruleText {
background: linear-gradient(180deg, #220543 0%, #160120 100%);
border: px2rem(1) solid #7E53C9;
background: linear-gradient( 180deg, #430517 0%, #200101 100%);
border: px2rem(1) solid #C95353;
.title {
background: linear-gradient(270deg, #D0B1FF 3%, #F8F4FF 47%, #D0B1FF 100%);
background: linear-gradient( 270deg, #FFB1CA 3%, #FFF4F8 48%, #FFB1C2 100%);
}
p {
color: #E7B8FF;
color: #FFB8CA;
}
}
}

BIN
view/eparty/modules/levelNew/images/img3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
view/eparty/modules/levelNew/images/leve1-ar.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
view/eparty/modules/levelNew/images/leve1-zh.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
view/eparty/modules/levelNew/images/leve1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
view/eparty/modules/levelNew/images/leve2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
view/eparty/modules/levelNew/images/myInfoBg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
view/eparty/modules/levelNew/images/myInfoBg2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
view/eparty/modules/levelNew/images/top.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
view/eparty/modules/levelNew/images/top2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

5
view/eparty/modules/levelNew/index.html
View File

@@ -19,7 +19,7 @@
</div>
<!-- 自己信息 -->
<div class="myInfo">
<div class="rewards">Rewards</div>
<img src="./images/null.png" alt="" class="tx">
<div class="top">
<div class="level">LV.<b>0</b></div>
@@ -33,12 +33,13 @@
</div>
<p><b class="text5"></b><strong>0</strong></p>
</div>
<div class="rewards">Rewards</div>
</div>
<!-- 内容部分 -->
<div class="rule rule1 text6">
</div>
<div class="rule rule2 text7">
<div class="rule rule2 text7" style="margin-top: 7.2rem;">
</div>
</body>

2
view/eparty/modules/levelNew/js/index.js
View File

@@ -72,7 +72,7 @@ function translateFun() {
$('.rewards').html(langReplace(localLang.demoModule.rewards));
}
// 跳转奖励页面
$('.myInfo .rewards').click(function () {
$('.rewards').click(function () {
window.location.href = './rewards.html'
})
// 配置接口