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

完善日任务中心样式问题

Browse Source
This commit is contained in:
chenruiye
2025-05-28 18:00:34 +08:00
parent 031ac3f926
commit 05015811e7
8 changed files with 318 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
view/molistar/modules/taskCenter/css/index.css
View File

@@ -35,6 +35,36 @@ body {
text-transform: none;
}
.page_title_bg {
width: 100%;
position: fixed;
background: #fff;
z-index: 9;
text-align: center;
color: #313131;
font-size: 0.4266666667rem;
font-weight: 600;
transition: all 0.5s;
height: 0;
overflow: hidden;
padding-top: 0rem;
}
.page_title {
width: 100%;
position: fixed;
z-index: 9;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.4266666667rem;
color: #313131;
text-align: center;
font-style: normal;
text-transform: none;
overflow: hidden;
padding-top: 1.4666666667rem;
}
.top {
background-image: url("../images/header.png");
background-size: 100% 100%;
@@ -119,8 +149,8 @@ body {
.top .check_List .signDayList {
display: flex;
align-items: center;
gap: 0.1333333333rem;
margin-top: 0.2666666667rem;
justify-content: space-between;
}
.top .check_List .signDayList .signDay_box .reward_signed {
background: linear-gradient(180deg, #FFF8E2 26%, #FFECB0 100%) !important;

68
view/molistar/modules/taskCenter/css/index.scss
View File

@@ -45,6 +45,71 @@ body {
text-transform: none;
}
}
// .page_title{
// font-family: PingFang SC, PingFang SC;
// font-weight: 500;
// font-size: px2rem(32);
// color: #313131;
// text-align: center;
// font-style: normal;
// text-transform: none;
// position: fixed;
// left: 0;
// top: 0;
// width: 100%;
// padding-top: px2rem(110);
// z-index: 9;
// }
// .page_title_bg{
// width: 100%;
// z-index: 99;
// text-align: center;
// transition: all 0.5s;
// height: 0;
// overflow: hidden;
// background: #fff;
// font-family: PingFang SC, PingFang SC;
// font-weight: 500;
// font-size: px2rem(32);
// color: #313131;
// text-align: center;
// font-style: normal;
// text-transform: none;
// }
.page_title_bg {
width: 100%;
position: fixed;
// background: rgba(0, 0, 0, .8);
background: #fff;
z-index: 9;
text-align: center;
color: #313131;
font-size: px2rem(32);
font-weight: 600;
transition: all 0.5s;
height: 0;
overflow: hidden;
padding-top: px2rem(0);
}
.page_title {
width: 100%;
position: fixed;
z-index: 9;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(32);
color: #313131;
text-align: center;
font-style: normal;
text-transform: none;
overflow: hidden;
padding-top: px2rem(110);
}
.top {
background-image: url("../images/header.png");
@@ -139,9 +204,8 @@ body {
.signDayList {
display: flex;
align-items: center;
gap: px2rem(10);
margin-top: px2rem(20);
justify-content: space-between;
.signDay_box {
.reward_signed {
background: linear-gradient(180deg, #FFF8E2 26%, #FFECB0 100%) !important;

51
view/molistar/modules/taskCenter/css/mall.css
View File

@@ -26,7 +26,26 @@ body {
position: absolute;
left: 0.24rem;
}
.back p {
.page_title_bg {
width: 100%;
position: fixed;
background: #fff;
z-index: 9;
text-align: center;
color: #313131;
font-size: 0.4266666667rem;
font-weight: 600;
transition: all 0.5s;
height: 0;
overflow: hidden;
padding-top: 0rem;
}
.page_title {
width: 100%;
position: fixed;
z-index: 9;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.4266666667rem;
@@ -34,13 +53,14 @@ body {
text-align: center;
font-style: normal;
text-transform: none;
overflow: hidden;
padding-top: 1.4666666667rem;
}
.top {
background-image: url("../images/mall_top_bg.png");
background-size: 100% 100%;
width: 100%;
height: 6.9333333333rem;
padding-top: 2.4rem;
}
.top .info {
@@ -108,21 +128,22 @@ body {
width: 0.5866666667rem;
height: 0.5866666667rem;
}
.top .Exchange_list {
.Exchange_list {
margin: 0.3733333333rem 0.4rem 0;
}
.top .Exchange_list .title {
.Exchange_list .title {
display: flex;
align-items: center;
margin-bottom: 0.3733333333rem;
}
.top .Exchange_list .title .xian {
.Exchange_list .title .xian {
width: 0.08rem;
height: 0.4rem;
background: linear-gradient(180deg, #E29030 0%, #FCC074 100%);
border-radius: 1.6533333333rem;
}
.top .Exchange_list .title .Exchange {
.Exchange_list .title .Exchange {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 0.4266666667rem;
@@ -133,32 +154,32 @@ body {
text-transform: none;
margin: 0 0.1866666667rem;
}
.top .Exchange_list .shops_list {
.Exchange_list .shops_list {
display: flex;
gap: 0.24rem;
flex-wrap: wrap;
}
.top .Exchange_list .shops_list .shop_box {
.Exchange_list .shops_list .shop_box {
background: #FFFFFF;
border-radius: 0.32rem;
padding: 0.2666666667rem 0.4rem;
box-sizing: border-box;
border: 0.0266666667rem solid #FFFFFF;
}
.top .Exchange_list .shops_list .shop_box .img {
.Exchange_list .shops_list .shop_box .img {
width: 3.6266666667rem;
height: 3.6266666667rem;
display: flex;
align-items: center;
justify-content: center;
}
.top .Exchange_list .shops_list .shop_box .img .pic {
.Exchange_list .shops_list .shop_box .img .pic {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.top .Exchange_list .shops_list .shop_box .shopName {
.Exchange_list .shops_list .shop_box .shopName {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.3733333333rem;
@@ -168,12 +189,12 @@ body {
font-style: normal;
text-transform: none;
}
.top .Exchange_list .shops_list .shop_box .num {
.Exchange_list .shops_list .shop_box .num {
display: flex;
align-items: center;
justify-content: center;
}
.top .Exchange_list .shops_list .shop_box .num .exchangeGoldBean {
.Exchange_list .shops_list .shop_box .num .exchangeGoldBean {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.3466666667rem;
@@ -182,12 +203,12 @@ body {
font-style: normal;
text-transform: none;
}
.top .Exchange_list .shops_list .shop_box .num img {
.Exchange_list .shops_list .shop_box .num img {
width: 0.48rem;
height: 0.48rem;
margin: 0 0.0266666667rem;
}
.top .Exchange_list .shops_list .shop_active {
.Exchange_list .shops_list .shop_active {
background: #FFF9EE;
border-radius: 0.32rem;
border: 0.0266666667rem solid #FF8C03;

214
view/molistar/modules/taskCenter/css/mall.scss
View File

@@ -35,22 +35,53 @@ body {
// top: px2rem(0);
}
p {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(32);
color: #313131;
text-align: center;
font-style: normal;
text-transform: none;
}
// p {
// font-family: PingFang SC, PingFang SC;
// font-weight: 500;
// font-size: px2rem(32);
// color: #313131;
// text-align: center;
// font-style: normal;
// text-transform: none;
// }
}
.page_title_bg {
width: 100%;
position: fixed;
// background: rgba(0, 0, 0, .8);
background: #fff;
z-index: 9;
text-align: center;
color: #313131;
font-size: px2rem(32);
font-weight: 600;
transition: all 0.5s;
height: 0;
overflow: hidden;
padding-top: px2rem(0);
}
.page_title {
width: 100%;
position: fixed;
z-index: 9;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(32);
color: #313131;
text-align: center;
font-style: normal;
text-transform: none;
overflow: hidden;
padding-top: px2rem(110);
}
.top {
background-image: url("../images/mall_top_bg.png");
background-size: 100% 100%;
// background-repeat: no-repeat;
width: 100%;
height: px2rem(520);
// height: px2rem(180);
padding-top: px2rem(180);
.info {
@@ -130,105 +161,106 @@ body {
}
}
.Exchange_list {
margin: px2rem(28) px2rem(30) 0;
}
.Exchange_list {
margin: px2rem(28) px2rem(30) 0;
.title {
display: flex;
align-items: center;
margin-bottom: px2rem(28);
.title {
display: flex;
align-items: center;
margin-bottom: px2rem(28);
.xian {
width: px2rem(6);
height: px2rem(30);
background: linear-gradient(180deg, #E29030 0%, #FCC074 100%);
border-radius: px2rem(124);
}
.Exchange {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(32);
color: #313131;
line-height: px2rem(44);
text-align: left;
font-style: normal;
text-transform: none;
margin: 0 px2rem(14);
}
.xian {
width: px2rem(6);
height: px2rem(30);
background: linear-gradient(180deg, #E29030 0%, #FCC074 100%);
border-radius: px2rem(124);
}
.shops_list {
display: flex;
gap: px2rem(18);
flex-wrap: wrap;
.Exchange {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(32);
color: #313131;
line-height: px2rem(44);
text-align: left;
font-style: normal;
text-transform: none;
margin: 0 px2rem(14);
}
}
.shop_box {
background: #FFFFFF;
border-radius: px2rem(24);
padding: px2rem(20) px2rem(30);
box-sizing: border-box;
border: px2rem(2) solid #FFFFFF;
.shops_list {
display: flex;
gap: px2rem(18);
flex-wrap: wrap;
.img{
width: px2rem(272);
height: px2rem(272);
display: flex;
align-items: center;
justify-content: center;
.pic {
width: auto; // 自适应宽度
height: auto; // 自适应高度
max-width: 100%; // 最大宽度不超过容器
max-height: 100%; // 最大高度不超过容器
}
.shop_box {
background: #FFFFFF;
border-radius: px2rem(24);
padding: px2rem(20) px2rem(30);
box-sizing: border-box;
border: px2rem(2) solid #FFFFFF;
.img{
width: px2rem(272);
height: px2rem(272);
display: flex;
align-items: center;
justify-content: center;
.pic {
width: auto; // 自适应宽度
height: auto; // 自适应高度
max-width: 100%; // 最大宽度不超过容器
max-height: 100%; // 最大高度不超过容器
}
}
.shopName {
.shopName {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(28);
color: #313131;
line-height: px2rem(40);
text-align: center;
font-style: normal;
text-transform: none;
}
.num {
display: flex;
align-items: center;
justify-content: center;
.exchangeGoldBean {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(28);
color: #313131;
line-height: px2rem(40);
text-align: center;
font-weight: 400;
font-size: px2rem(26);
color: #7B7B7D;
line-height: px2rem(36);
font-style: normal;
text-transform: none;
}
.num {
display: flex;
align-items: center;
justify-content: center;
.exchangeGoldBean {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(26);
color: #7B7B7D;
line-height: px2rem(36);
font-style: normal;
text-transform: none;
}
img {
width: px2rem(36);
height: px2rem(36);
margin: 0 px2rem(2);
}
img {
width: px2rem(36);
height: px2rem(36);
margin: 0 px2rem(2);
}
}
.shop_active {
background: #FFF9EE;
border-radius: px2rem(24);
border: px2rem(2) solid #FF8C03;
box-sizing: border-box;
}
}
.shop_active {
background: #FFF9EE;
border-radius: px2rem(24);
border: px2rem(2) solid #FF8C03;
box-sizing: border-box;
}
}
}
.foot_btn {

6
view/molistar/modules/taskCenter/index.html
View File

@@ -17,9 +17,13 @@
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/backB.png" alt="" />
<p class="page_title">Task Center</p>
<!-- <p class="page_title">Task Center</p> -->
</div>
<p class="page_title">Task Center</p>
<p class="page_title_bg">Task Center</p>
<div class="top">
<div class="info">
<div class="goldBean_info">

18
view/molistar/modules/taskCenter/js/index.js
View File

@@ -62,6 +62,7 @@ function translateFun() {
var langReplace = window.lang.replace;
var localLang = window.lang;
$('.page_title').html(langReplace(localLang.demoModule.page_title));
$('.page_title_bg').html(langReplace(localLang.demoModule.page_title));
$('.Mall').html(langReplace(localLang.demoModule.Mall));
$('.Sign_gifts').html(langReplace(localLang.demoModule.Sign_gifts));
$('.Sign_generous').html(langReplace(localLang.demoModule.Sign_generous));
@@ -88,7 +89,7 @@ function getCheckData() {
if (res.data.signStatus == 'SIGNED') {
$('.check_List .reward_info .reward_box img').attr('src', signDayData.signDayList[targetIndex].pic)
$('.check_List .reward_info .reward_box .num').text(`*${signDayData.signDayList[targetIndex].awardNum}`)
$('.check_List .reward_info .reward_box .num').text(`*${signDayData.signDayList[targetIndex].awardNum}${signDayData.signDayList[targetIndex].goldFlag ? '' : 'd'}`)
$('.check_List .reward_info .reward_txt').text(langReplace(localLang.demoModule.Reward_out))
$('.check_List .reward_info').show()
$('.Daily_list').css('margin-top', '4.2rem')
@@ -330,4 +331,17 @@ $('.signDayList').on('click', '.signDay_box', function () {
$('.Mall_box').click(function () {
window.location.href = `./mall.html`
return
})
})
window.addEventListener('scroll', function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log('页面下滑距顶部的距离:', scrollTop);
if (scrollTop >= 30) {
$('.page_title').hide();
$('.page_title_bg').css('padding-top', '1.46rem')
$('.page_title_bg').css('height', '1rem')
} else if (scrollTop < 30) {
$('.page_title_bg').css('height', '0')
$('.page_title_bg').css('padding-top', '0rem')
$('.page_title').show();
}
});

17
view/molistar/modules/taskCenter/js/mall.js
View File

@@ -82,7 +82,7 @@ function getData() {
$('.Exchange_btn').attr('shopName',res.data.shops[0].shopName+'*'+res.data.shops[0].awardNum)
}
$('.Exchange_list .shops_list .shop_box').remove()
// $('.Exchange_list .shops_list .shop_box').remove()
let str = '';
res.data.shops.forEach((item,index) => {
str+=`
@@ -163,4 +163,17 @@ $('.tip_btn').click(function () {
$('.top .info .right').click(function () {
window.location.href = `./pointsDetails.html`
return
})
})
window.addEventListener('scroll', function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log('页面下滑距顶部的距离:', scrollTop);
if (scrollTop >= 30) {
$('.page_title').hide();
$('.page_title_bg').css('padding-top', '1.46rem')
$('.page_title_bg').css('height', '1rem')
} else if (scrollTop < 30) {
$('.page_title_bg').css('height', '0')
$('.page_title_bg').css('padding-top', '0rem')
$('.page_title').show();
}
});

31
view/molistar/modules/taskCenter/mall.html
View File

@@ -17,9 +17,13 @@
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/backB.png" alt="" />
<p class="page_title">Mall</p>
<!-- <p class="page_title">Mall</p> -->
</div>
<p class="page_title">Mall</p>
<p class="page_title_bg">Mall</p>
<div class="top">
<div class="info">
<div class="left">
@@ -37,15 +41,33 @@
<img src="./images/arrow-left.png" alt="" class="arrow_left" />
</div>
</div>
</div>
<div class="Exchange_list">
<div class="Exchange_list">
<div class="title">
<div class="xian"></div>
<div class="Exchange">Exchange</div>
</div>
<div class="shops_list">
<div class="shop_box">
<img src="" alt="" class="pic" />
<img src="./images/coins.png" alt="" class="pic" />
<div class="shopName">shopName</div>
<div class="num">
<span class="exchangeGoldBean"></span>
<img src="./images/jindou.png" alt="" />
</div>
</div>
<div class="shop_box">
<img src="./images/coins.png" alt="" class="pic" />
<div class="shopName">shopName</div>
<div class="num">
<span class="exchangeGoldBean"></span>
<img src="./images/jindou.png" alt="" />
</div>
</div>
<div class="shop_box">
<img src="./images/coins.png" alt="" class="pic" />
<div class="shopName">shopName</div>
<div class="num">
<span class="exchangeGoldBean"></span>
@@ -54,8 +76,7 @@
</div>
</div>
</div>
</div>
<div style="height: 500px"></div>
<div style="height: 100px"></div>
<div class="foot_btn">
<div class="Exchange_btn Exchange"></div>
</div>