From 87029698607c3f93bec3d027c0e438460dcf89d2 Mon Sep 17 00:00:00 2001 From: chenruiye <862859104@qq.com> Date: Wed, 28 May 2025 15:17:35 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=97=A5=E4=BB=BB=E5=8A=A1?= =?UTF-8?q?=E4=B8=AD=E5=BF=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molistar/modules/taskCenter/css/index.css | 49 ++++-- .../modules/taskCenter/css/index.scss | 101 ++++++++---- view/molistar/modules/taskCenter/css/mall.css | 74 ++++++++- .../molistar/modules/taskCenter/css/mall.scss | 82 +++++++++- .../modules/taskCenter/css/pointsDetails.css | 120 ++++++++++++++ .../modules/taskCenter/css/pointsDetails.scss | 142 ++++++++++++++++ view/molistar/modules/taskCenter/index.html | 5 +- view/molistar/modules/taskCenter/js/index.js | 86 +++++----- view/molistar/modules/taskCenter/js/mall.js | 66 +++++++- .../modules/taskCenter/js/pointsDetails.js | 154 ++++++++++++++++++ view/molistar/modules/taskCenter/local/ar.js | 33 ++-- view/molistar/modules/taskCenter/local/en.js | 33 ++-- view/molistar/modules/taskCenter/local/tr.js | 32 ++-- view/molistar/modules/taskCenter/local/zh.js | 33 ++-- view/molistar/modules/taskCenter/mall.html | 11 +- .../modules/taskCenter/pointsDetails.html | 57 +++++++ 16 files changed, 938 insertions(+), 140 deletions(-) create mode 100644 view/molistar/modules/taskCenter/css/pointsDetails.css create mode 100644 view/molistar/modules/taskCenter/css/pointsDetails.scss create mode 100644 view/molistar/modules/taskCenter/js/pointsDetails.js create mode 100644 view/molistar/modules/taskCenter/pointsDetails.html diff --git a/view/molistar/modules/taskCenter/css/index.css b/view/molistar/modules/taskCenter/css/index.css index 6c52bde5..2f9872a6 100644 --- a/view/molistar/modules/taskCenter/css/index.css +++ b/view/molistar/modules/taskCenter/css/index.css @@ -44,7 +44,7 @@ body { .top .info { display: flex; align-items: center; - padding-top: 2.4rem; + padding-top: 2.6666666667rem; margin: 0 0.4rem; } .top .info .goldBean_info { @@ -127,10 +127,10 @@ body { } .top .check_List .signDayList .signDay_box .reward_active { background: linear-gradient(180deg, #FFF8E2 26%, #FFECB0 100%) !important; - border: 0.0266666667rem solid #FFD555; + border: 0.0266666667rem solid #FFD555 !important; } .top .check_List .signDayList .signDay_box .reward_unsigned_active { - border: 0.0266666667rem solid #DCDCDC; + border: 0.0266666667rem solid #DCDCDC !important; } .top .check_List .signDayList .signDay_box .img_box { background: #F2F3F7; @@ -138,11 +138,21 @@ body { width: 1.12rem; height: 1.68rem; text-align: center; + border: 0.0266666667rem solid transparent; } -.top .check_List .signDayList .signDay_box .img_box img { +.top .check_List .signDayList .signDay_box .img_box .img { width: 0.7466666667rem; height: 0.7466666667rem; - margin-top: 0.1066666667rem; + margin: 0.1066666667rem auto 0; + display: flex; + align-items: center; + justify-content: center; +} +.top .check_List .signDayList .signDay_box .img_box img { + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; } .top .check_List .signDayList .signDay_box .img_box .reward_name { font-family: PingFang SC, PingFang SC; @@ -183,9 +193,18 @@ body { align-items: center; justify-content: center; } -.top .check_List .reward_info .reward_box img { +.top .check_List .reward_info .reward_box .img { width: 0.7466666667rem; height: 0.7466666667rem; + display: flex; + align-items: center; + justify-content: center; +} +.top .check_List .reward_info .reward_box .img img { + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; } .top .check_List .reward_info .reward_box .num { font-family: PingFang SC, PingFang SC; @@ -209,7 +228,11 @@ body { text-transform: none; margin: 0 0.1866666667rem; } -.top .check_List .Sign_btn { +.top .check_btn { + display: none; + margin: 0.8533333333rem 0.72rem 0; +} +.top .Sign_btn { background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); border-radius: 0.6666666667rem; font-family: PingFang SC, PingFang SC; @@ -226,13 +249,14 @@ body { padding: 0.2133333333rem; margin: 0.2666666667rem 0 0; } -.top .check_List .sign_btn_active { +.top .sign_btn_active { background: #F2F3F7; color: #AFB1B3; } .Daily_list { margin: 4rem 0.32rem; + padding-bottom: 1.3333333333rem; } .Daily_list .top_box { display: flex; @@ -281,7 +305,6 @@ body { font-size: 0.3466666667rem; color: #313131; line-height: 0.48rem; - text-align: left; font-style: normal; text-transform: none; } @@ -321,9 +344,15 @@ body { display: flex; align-items: center; justify-content: center; - padding: 0.1066666667rem 0.3733333333rem; + padding: 0.1066666667rem 0; + min-width: 1.9466666667rem; } .Daily_list .task_List .task_box .right .Receive_btn_RECEIVED { background: #F2F3F7; color: #AFB1B3; +} + +.arabic .Daily_list .task_List .task_box .right { + margin-left: 0; + margin-right: auto; } \ No newline at end of file diff --git a/view/molistar/modules/taskCenter/css/index.scss b/view/molistar/modules/taskCenter/css/index.scss index 2669139e..b15a693f 100644 --- a/view/molistar/modules/taskCenter/css/index.scss +++ b/view/molistar/modules/taskCenter/css/index.scss @@ -55,7 +55,7 @@ body { .info { display: flex; align-items: center; - padding-top: px2rem(180); + padding-top: px2rem(200); margin: 0 px2rem(30); .goldBean_info { @@ -150,11 +150,11 @@ body { .reward_active { background: linear-gradient(180deg, #FFF8E2 26%, #FFECB0 100%) !important; - border: px2rem(2) solid #FFD555; + border: px2rem(2) solid #FFD555 !important; } .reward_unsigned_active { - border: px2rem(2) solid #DCDCDC; + border: px2rem(2) solid #DCDCDC !important; } .img_box { @@ -164,11 +164,23 @@ body { width: px2rem(84); height: px2rem(126); text-align: center; + border: px2rem(2) solid transparent; - img { + .img { width: px2rem(56); height: px2rem(56); - margin-top: px2rem(8); + margin: px2rem(8) auto 0; + display: flex; + align-items: center; + justify-content: center; + } + + img { + width: auto; // 自适应宽度 + height: auto; // 自适应高度 + max-width: 100%; // 最大宽度不超过容器 + max-height: 100%; // 最大高度不超过容器 + } .reward_name { @@ -198,13 +210,15 @@ body { } .reward_info { - display: none; + display: none; margin-top: px2rem(20); - .flex_box{ + + .flex_box { display: flex; align-items: center; justify-content: center; } + .reward_box { background: linear-gradient(180deg, #FFF8E2 26%, #FFECB0 100%); border-radius: px2rem(16); @@ -214,10 +228,19 @@ body { align-items: center; justify-content: center; - img { + .img { width: px2rem(56); height: px2rem(56); // border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + img{ + width: auto; + height: auto; + max-width: 100%; // 最大宽度不超过容器 + max-height: 100%; // 最大高度不超过容器 + } } .num { @@ -247,33 +270,41 @@ body { } - .Sign_btn { - background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); - border-radius: px2rem(50); - font-family: PingFang SC, PingFang SC; - font-weight: 600; - font-size: px2rem(28); - color: #FFFFFF; - text-align: center; - font-style: normal; - text-transform: none; - line-height: px2rem(40); - display: flex; - align-items: center; - justify-content: center; - padding: px2rem(16); - margin: px2rem(20) 0 0; - } - .sign_btn_active { - background: #F2F3F7; - color: #AFB1B3; - } + } + + .check_btn { + display: none; + margin: px2rem(64) px2rem(54) 0; + } + + .Sign_btn { + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border-radius: px2rem(50); + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(28); + color: #FFFFFF; + text-align: center; + font-style: normal; + text-transform: none; + line-height: px2rem(40); + display: flex; + align-items: center; + justify-content: center; + padding: px2rem(16); + margin: px2rem(20) 0 0; + } + + .sign_btn_active { + background: #F2F3F7; + color: #AFB1B3; } } .Daily_list { margin: px2rem(300) px2rem(24); + padding-bottom: px2rem(100); .top_box { display: flex; @@ -327,7 +358,7 @@ body { font-size: px2rem(26); color: #313131; line-height: px2rem(36); - text-align: left; + // text-align: left; font-style: normal; text-transform: none; } @@ -373,7 +404,8 @@ body { display: flex; align-items: center; justify-content: center; - padding: px2rem(8) px2rem(28); + padding: px2rem(8) 0; + min-width: px2rem(146); } .Receive_btn_RECEIVED { @@ -383,4 +415,11 @@ body { } } } +} + +.arabic { + .Daily_list .task_List .task_box .right { + margin-left: 0; + margin-right: auto; + } } \ No newline at end of file diff --git a/view/molistar/modules/taskCenter/css/mall.css b/view/molistar/modules/taskCenter/css/mall.css index c834f210..0077211b 100644 --- a/view/molistar/modules/taskCenter/css/mall.css +++ b/view/molistar/modules/taskCenter/css/mall.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; html, body { height: 100%; @@ -144,9 +145,18 @@ body { box-sizing: border-box; border: 0.0266666667rem solid #FFFFFF; } -.top .Exchange_list .shops_list .shop_box .pic { +.top .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 { + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; } .top .Exchange_list .shops_list .shop_box .shopName { font-family: PingFang SC, PingFang SC; @@ -205,4 +215,66 @@ body { font-style: normal; text-transform: none; padding: 0.2666666667rem; +} + +.popup_tip { + display: none; + /* 初始状态下隐藏弹窗 */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9999; + /* 确保弹窗在最顶层 */ +} +.popup_tip .popup_content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 6.6666666667rem; + padding: 0.3733333333rem 0.6133333333rem; + background: #FFFFFF; + border-radius: 0.4266666667rem; +} +.popup_tip .popup_content .title { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: 0.4rem; + color: #313131; + line-height: 0.56rem; + text-align: center; + font-style: normal; + text-transform: none; +} +.popup_tip .popup_content .content { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: 0.3466666667rem; + color: #313131; + line-height: 0.48rem; + text-align: center; + font-style: normal; + text-transform: none; + margin-top: 0.32rem; +} +.popup_tip .popup_content .tip_btn { + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border-radius: 0.6666666667rem; + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.3733333333rem; + color: #FFFFFF; + line-height: 0.5333333333rem; + text-align: center; + font-style: normal; + text-transform: none; + padding: 0.2666666667rem; + margin-top: 0.4rem; +} + +.arabic .top .info .right .arrow_left { + transform: rotate(180deg); } \ No newline at end of file diff --git a/view/molistar/modules/taskCenter/css/mall.scss b/view/molistar/modules/taskCenter/css/mall.scss index 57f97352..d24188b2 100644 --- a/view/molistar/modules/taskCenter/css/mall.scss +++ b/view/molistar/modules/taskCenter/css/mall.scss @@ -169,10 +169,21 @@ body { padding: px2rem(20) px2rem(30); box-sizing: border-box; border: px2rem(2) solid #FFFFFF; - .pic { + + .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 { font-family: PingFang SC, PingFang SC; @@ -242,4 +253,73 @@ body { text-transform: none; padding: px2rem(20); +} + +.popup_tip { + display: none; + /* 初始状态下隐藏弹窗 */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9999; + + // padding: 0 px2rem(50); + // box-sizing: border-box; + /* 确保弹窗在最顶层 */ + .popup_content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: px2rem(500); + padding: px2rem(28) px2rem(46); + background: #FFFFFF; + border-radius: px2rem(32); + + .title { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: px2rem(30); + color: #313131; + line-height: px2rem(42); + text-align: center; + font-style: normal; + text-transform: none; + } + + .content { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: px2rem(26); + color: #313131; + line-height: px2rem(36); + text-align: center; + font-style: normal; + text-transform: none; + margin-top: px2rem(24); + } + + .tip_btn { + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border-radius: px2rem(50); + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(28); + color: #FFFFFF; + line-height: px2rem(40); + text-align: center; + font-style: normal; + text-transform: none; + padding: px2rem(20); + margin-top: px2rem(30); + } + } +} +.arabic{ + .top .info .right .arrow_left{ + transform: rotate(180deg); + } } \ No newline at end of file diff --git a/view/molistar/modules/taskCenter/css/pointsDetails.css b/view/molistar/modules/taskCenter/css/pointsDetails.css new file mode 100644 index 00000000..f1d4d318 --- /dev/null +++ b/view/molistar/modules/taskCenter/css/pointsDetails.css @@ -0,0 +1,120 @@ +html, +body { + height: 100%; + background: #FFFFFF; +} + +.back { + width: 100%; + height: 0.5866666667rem; + line-height: 0.5866666667rem; + position: fixed; + left: 0; + top: 0; + padding-top: 1.4666666667rem; + padding-bottom: 0.2933333333rem; + text-align: center; + color: #FFFFFF; + font-size: 0.5066666667rem; + font-weight: bold; + z-index: 10; +} +.back img { + width: 0.5866666667rem; + height: 0.5866666667rem; + position: absolute; + left: 0.24rem; +} +.back p { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: 0.4266666667rem; + color: #313131; + text-align: center; + font-style: normal; + text-transform: none; +} + +.tab_list { + display: flex; + align-items: center; + justify-content: center; + gap: 1.3333333333rem; + padding-top: 2.6666666667rem; + position: fixed; + top: 0; + width: 100%; + background: #FFFFFF; +} +.tab_list .tab_box { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: 0.4266666667rem; + color: #AFB1B3; + line-height: 0.5866666667rem; + text-align: center; + font-style: normal; + text-transform: none; +} +.tab_list .tab_active { + color: #313131; + position: relative; +} +.tab_list .tab_active::after { + content: ""; + display: block; + width: 0.3466666667rem; + height: 0.1066666667rem; + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border-radius: 13.44rem; + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +.data_list { + margin: 3.7333333333rem 0.4266666667rem 0; +} +.data_list .data_box { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 0.32rem; + margin-top: 0.32rem; + border-bottom: 0.0133333333rem solid #E4E4E4; +} +.data_list .data_box .left .title { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.4266666667rem; + color: #313131; + line-height: 0.5866666667rem; + text-align: left; + font-style: normal; + text-transform: none; +} +.data_list .data_box .left .createTime { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: 0.3466666667rem; + color: #7B7B7D; + line-height: 0.48rem; + font-style: normal; + text-transform: none; + margin-top: 0.2133333333rem; +} +.data_list .data_box .right .operateBean { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.5333333333rem; + color: #313131; + line-height: 0.7466666667rem; + text-align: right; + font-style: normal; + text-transform: none; +} +.data_list .data_box .right img { + width: 0.6666666667rem; + height: 0.6666666667rem; + margin: 0 0.0533333333rem; +} \ No newline at end of file diff --git a/view/molistar/modules/taskCenter/css/pointsDetails.scss b/view/molistar/modules/taskCenter/css/pointsDetails.scss new file mode 100644 index 00000000..5497d3b9 --- /dev/null +++ b/view/molistar/modules/taskCenter/css/pointsDetails.scss @@ -0,0 +1,142 @@ +@charset "UTF-8"; + +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + // width: 100%; + height: 100%; + background: #FFFFFF; +} + +.back { + width: 100%; + height: px2rem(44); + line-height: px2rem(44); + position: fixed; + left: 0; + top: 0; + padding-top: px2rem(110); + padding-bottom: px2rem(22); + text-align: center; + color: #FFFFFF; + font-size: px2rem(38); + font-weight: bold; + z-index: 10; + // background: #FFFFFF; + + img { + width: px2rem(44); + height: px2rem(44); + position: absolute; + left: px2rem(18); + // 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; + } +} + +.tab_list { + display: flex; + align-items: center; + justify-content: center; + gap: px2rem(100); + padding-top: px2rem(200); + position: fixed; + top: 0; + width: 100%; + background: #FFFFFF; + .tab_box { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: px2rem(32); + color: #AFB1B3; + line-height: px2rem(44); + text-align: center; + font-style: normal; + text-transform: none; + } + + .tab_active { + color: #313131; + position: relative; + + &::after { + content: ''; + display: block; + width: px2rem(26); + height: px2rem(8); + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border-radius: px2rem(1008); + position: absolute; + left: 50%; + transform: translateX(-50%); + } + } + +} + +.data_list { + margin: px2rem(280) px2rem(32) 0; + .data_box { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: px2rem(24); + margin-top: px2rem(24); + border-bottom: px2rem(1) solid #E4E4E4; + .left { + .title { + 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; + } + + .createTime { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: px2rem(26); + color: #7B7B7D; + line-height: px2rem(36); + // text-align: left; + font-style: normal; + text-transform: none; + margin-top: px2rem(16); + } + } + + .right { + .operateBean { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(40); + color: #313131; + line-height: px2rem(56); + text-align: right; + font-style: normal; + text-transform: none; + } + img{ + width: px2rem(50); + height: px2rem(50); + margin: 0 px2rem(4); + } + } + + } +} \ No newline at end of file diff --git a/view/molistar/modules/taskCenter/index.html b/view/molistar/modules/taskCenter/index.html index d0562a30..b8403b56 100644 --- a/view/molistar/modules/taskCenter/index.html +++ b/view/molistar/modules/taskCenter/index.html @@ -40,7 +40,7 @@