新增 - 礼包中心

This commit is contained in:
2025-07-09 15:54:15 +08:00
parent 31dd56a36b
commit bb9899ed94
27 changed files with 3083 additions and 0 deletions

View File

@@ -0,0 +1,267 @@
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;
background: #FFFFFF;
}
.back .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;
line-height: 0.5866666667rem;
text-align: center;
font-style: normal;
text-transform: none;
}
.search_input {
margin: 2.4rem 0.4rem 0;
background: #F2F3F7;
border-radius: 0.4266666667rem;
padding: 0.1866666667rem 0.32rem;
display: flex;
align-items: center;
}
.search_input .search_input_box {
background: #F2F3F7;
margin: 0 0.1333333333rem;
width: 90%;
}
.search_input img {
width: 0.5333333333rem;
height: 0.5333333333rem;
}
.user_info {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.3733333333rem 0.4rem;
padding: 0.32rem 0;
border-bottom: 0.0266666667rem solid #F2F3F7;
}
.user_info .left {
display: flex;
align-items: center;
}
.user_info .left .avatar img {
width: 1.3333333333rem;
height: 1.3333333333rem;
border-radius: 50%;
}
.user_info .left .name {
margin: 0 0.2933333333rem;
}
.user_info .left .name .nick {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 0.4rem;
color: #313131;
line-height: 0.56rem;
font-style: normal;
text-transform: none;
}
.user_info .left .name .erbanNo {
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.08rem;
}
.user_info .right .Give_btn {
background: #FFE4E7;
border-radius: 0.4266666667rem;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.3466666667rem;
color: #EE5F7D;
line-height: 0.48rem;
text-align: center;
font-style: normal;
text-transform: none;
padding: 0.16rem 0.7466666667rem;
}
.trial_pop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
display: none;
}
.trial_pop .trial_pop_content {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 100%;
background: linear-gradient(180deg, #FFE5EE 0%, #FFFFFF 22%);
border-radius: 0.4266666667rem 0.4266666667rem 0px 0px;
padding: 0.3733333333rem 0 0.4rem;
}
.trial_pop .trial_pop_content .title {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.48rem;
color: #313131;
line-height: 0.6666666667rem;
text-align: center;
font-style: normal;
text-transform: none;
}
.trial_pop .trial_pop_content .avatar {
margin: 0.4rem auto 0;
text-align: center;
}
.trial_pop .trial_pop_content .avatar img {
width: 2.16rem;
height: 2.16rem;
border-radius: 50%;
}
.trial_pop .trial_pop_content .nick {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 0.4rem;
color: #313131;
line-height: 0.56rem;
text-align: center;
font-style: normal;
text-transform: none;
margin-top: 0.1333333333rem;
}
.trial_pop .trial_pop_content .erbanNo {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.3466666667rem;
color: #7B7B7D;
line-height: 0.48rem;
text-align: center;
font-style: normal;
text-transform: none;
margin-top: 0.0533333333rem;
}
.trial_pop .trial_pop_content .packName {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.3733333333rem;
color: #313131;
line-height: 0.5333333333rem;
text-align: center;
font-style: normal;
text-transform: none;
margin-top: 0.24rem;
}
.trial_pop .trial_pop_content .quantity_box {
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.2133333333rem;
}
.trial_pop .trial_pop_content .quantity_box .Giftpack_Quantity {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.3733333333rem;
color: #313131;
line-height: 0.5333333333rem;
text-align: center;
font-style: normal;
text-transform: none;
}
.trial_pop .trial_pop_content .quantity_box .num_box {
background: #EAEAEA;
border-radius: 0.1333333333rem;
display: flex;
align-items: center;
padding: 0.08rem 0.32rem;
margin: 0 0.1333333333rem;
}
.trial_pop .trial_pop_content .quantity_box .num_box .num {
width: 0.8266666667rem;
height: 0.6933333333rem;
background: #FFFFFF;
border-radius: 0.1066666667rem;
border: 0.0133333333rem solid #D6D6D6;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 0.3733333333rem;
color: #313131;
text-align: center;
font-style: normal;
text-transform: none;
margin: 0 0.24rem;
}
.trial_pop .trial_pop_content .quantity_box .num_box .jian {
width: 0.2533333333rem;
height: 0.0133333333rem;
}
.trial_pop .trial_pop_content .quantity_box .num_box .jia {
width: 0.2533333333rem;
height: 0.2533333333rem;
}
.trial_pop .trial_pop_content .Giftpacks_caution {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.32rem;
color: #7B7B7D;
line-height: 0.4533333333rem;
text-align: center;
font-style: normal;
text-transform: none;
margin: 0.32rem 0.4rem 0;
}
.trial_pop .trial_pop_content .option_btn {
display: flex;
align-items: center;
gap: 0.24rem;
margin: 0.2666666667rem 0.4rem 0;
}
.trial_pop .trial_pop_content .option_btn .btn {
background: #EBEBEB;
border-radius: 0.6666666667rem;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 0.3733333333rem;
color: #7B7B7D;
line-height: 0.5333333333rem;
padding: 0.2133333333rem;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.trial_pop .trial_pop_content .option_btn .Give_btn {
background: #EE5F7D;
color: #FFFFFF;
}

View File

@@ -0,0 +1,311 @@
@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;
.back_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;
line-height: px2rem(44);
text-align: center;
font-style: normal;
text-transform: none;
}
}
.search_input {
margin: px2rem(180) px2rem(30) 0;
background: #F2F3F7;
border-radius: px2rem(32);
padding: px2rem(14) px2rem(24);
display: flex;
align-items: center;
.search_input_box {
background: #F2F3F7;
margin: 0 px2rem(10);
width: 90%;
}
img {
width: px2rem(40);
height: px2rem(40);
}
}
.user_info {
display: flex;
align-items: center;
justify-content: space-between;
margin: px2rem(28) px2rem(30);
padding: px2rem(24) 0;
border-bottom: px2rem(2) solid #F2F3F7;
.left {
display: flex;
align-items: center;
.avatar {
img {
width: px2rem(100);
height: px2rem(100);
border-radius: 50%;
}
}
.name {
margin: 0 px2rem(22);
.nick {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(30);
color: #313131;
line-height: px2rem(42);
font-style: normal;
text-transform: none;
}
.erbanNo {
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;
margin-top: px2rem(6);
}
}
}
.right {
.Give_btn {
background: #FFE4E7;
border-radius: px2rem(32);
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(26);
color: #EE5F7D;
line-height: px2rem(36);
text-align: center;
font-style: normal;
text-transform: none;
padding: px2rem(12) px2rem(56);
}
}
}
.trial_pop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
display: none;
.trial_pop_content {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 100%;
// min-height: px2rem(766);
background: linear-gradient(180deg, #FFE5EE 0%, #FFFFFF 22%);
border-radius: px2rem(32) px2rem(32) 0px 0px;
padding: px2rem(28) 0 px2rem(30);
.title {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(36);
color: #313131;
line-height: px2rem(50);
text-align: center;
font-style: normal;
text-transform: none;
}
.avatar {
margin: px2rem(30) auto 0;
text-align: center;
img {
width: px2rem(162);
height: px2rem(162);
border-radius: 50%;
}
}
.nick {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(30);
color: #313131;
line-height: px2rem(42);
text-align: center;
font-style: normal;
text-transform: none;
margin-top: px2rem(10);
}
.erbanNo {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(26);
color: #7B7B7D;
line-height: px2rem(36);
text-align: center;
font-style: normal;
text-transform: none;
margin-top: px2rem(4);
}
.packName {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(28);
color: #313131;
line-height: px2rem(40);
text-align: center;
font-style: normal;
text-transform: none;
margin-top: px2rem(18);
}
.quantity_box {
display: flex;
align-items: center;
justify-content: center;
margin-top: px2rem(16);
.Giftpack_Quantity {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(28);
color: #313131;
line-height: px2rem(40);
text-align: center;
font-style: normal;
text-transform: none;
}
.num_box {
background: #EAEAEA;
border-radius: px2rem(10);
display: flex;
align-items: center;
padding: px2rem(6) px2rem(24);
margin: 0 px2rem(10);
.num {
width: px2rem(62);
height: px2rem(52);
background: #FFFFFF;
border-radius: px2rem(8);
border: px2rem(1) solid #D6D6D6;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(28);
color: #313131;
text-align: center;
font-style: normal;
text-transform: none;
margin: 0 px2rem(18);
}
.jian {
width: px2rem(19);
height: px2rem(1);
}
.jia {
width: px2rem(19);
height: px2rem(19);
}
}
}
.Giftpacks_caution {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #7B7B7D;
line-height: px2rem(34);
text-align: center;
font-style: normal;
text-transform: none;
margin: px2rem(24) px2rem(30) 0;
}
.option_btn {
display: flex;
align-items: center;
gap: px2rem(18);
margin: px2rem(20) px2rem(30) 0;
.btn {
background: #EBEBEB;
border-radius: px2rem(50);
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(28);
color: #7B7B7D;
line-height: px2rem(40);
padding: px2rem(16);
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.Give_btn {
background: #EE5F7D;
color: #FFFFFF;
}
}
}
}

View File

@@ -0,0 +1,406 @@
html,
body {
height: 100%;
background: #FFD2E2;
}
.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 .back_img {
width: 0.5866666667rem;
height: 0.5866666667rem;
position: absolute;
left: 0.24rem;
}
.back .right_box {
position: absolute;
right: 0.24rem;
}
.back .right_box img {
width: 0.5866666667rem;
height: 0.5866666667rem;
}
.back .right_box .records_img {
margin-right: 0.32rem;
}
.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;
}
.header {
background-image: url("../images/header.png");
background-size: 100% 100%;
width: 100%;
height: 6.9333333333rem;
position: relative;
}
.no_data {
position: absolute;
top: 4rem;
left: 0.4rem;
right: 0.4rem;
width: auto;
box-sizing: border-box;
display: none;
}
.no_data .img_box {
text-align: center;
}
.no_data .img_box img {
width: 2.7733333333rem;
height: 2.7733333333rem;
}
.no_data .txt {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.3733333333rem;
color: #AFB1B3;
line-height: 0.5333333333rem;
text-align: center;
font-style: normal;
text-transform: none;
margin-top: 0.2666666667rem;
}
.pack_list {
position: absolute;
top: 2.6666666667rem;
left: 0.4rem;
right: 0.4rem;
width: auto;
box-sizing: border-box;
}
.pack_list .pack_box:first-child {
margin-top: 0;
}
.pack_list .pack_box {
background: #FFFFFF;
border-radius: 0.32rem;
padding: 0 0.32rem 0.32rem;
margin-top: 0.5333333333rem;
}
.pack_list .pack_box .title {
text-align: center;
position: relative;
}
.pack_list .pack_box .title img {
width: 5.7333333333rem;
height: 0.88rem;
}
.pack_list .pack_box .title .txt {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.4266666667rem;
color: #6D1E2F;
line-height: 0.5866666667rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pack_list .pack_box .info {
display: flex;
margin-top: 0.24rem;
}
.pack_list .pack_box .info .left {
width: 2.1333333333rem;
height: 2.1333333333rem;
}
.pack_list .pack_box .info .left img {
width: 100%;
height: 100%;
object-fit: contain;
}
.pack_list .pack_box .info .right {
margin: 0 0.32rem;
}
.pack_list .pack_box .info .right .txt {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.32rem;
color: #7B7B7D;
line-height: 0.4533333333rem;
margin-top: 0.16rem;
}
.pack_list .pack_box .info .right .flex_box {
display: flex;
align-items: center;
}
.pack_list .pack_box .info .right .time_out {
background: #FFFFFF;
border-radius: 0.1333333333rem;
border: 0.0266666667rem solid #E3E2E5;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.3466666667rem;
color: #313131;
line-height: 0.48rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.0133333333rem 0.16rem;
margin: 0 0.1066666667rem;
}
.pack_list .pack_box .gift_list {
display: flex;
gap: 0.2133333333rem;
overflow-x: auto;
margin-top: 0.3466666667rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pack_list .pack_box .gift_list ::-webkit-scrollbar {
display: none;
}
.pack_list .pack_box .gift_list .gift_box {
display: flex;
flex-direction: column;
align-items: center;
}
.pack_list .pack_box .gift_list .gift_box .content_box {
background: linear-gradient(180deg, #F7DBDD 0%, #FBF5F4 100%);
border-radius: 0.2666666667rem;
padding: 0.24rem;
position: relative;
}
.pack_list .pack_box .gift_list .gift_box .content_box .tip {
background: linear-gradient(270deg, #E83F67 0%, #EA797F 100%);
border-radius: 0.2666666667rem;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.2933333333rem;
color: #FFFFFF;
line-height: 0.4rem;
position: absolute;
padding: 0.0533333333rem 0.2666666667rem;
right: 0;
top: 0;
}
.pack_list .pack_box .gift_list .gift_box .content_box .img_box {
width: 1.6533333333rem;
height: 1.6533333333rem;
}
.pack_list .pack_box .gift_list .gift_box .content_box .img_box img {
width: 100%;
height: 100%;
object-fit: contain;
}
.pack_list .pack_box .gift_list .gift_box .txt {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.3466666667rem;
color: #313131;
line-height: 0.48rem;
text-align: center;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 1.6533333333rem;
margin-top: 0.08rem;
}
.pack_list .pack_box .option_btn {
display: flex;
align-items: center;
gap: 0.2933333333rem;
margin-top: 0.2666666667rem;
}
.pack_list .pack_box .option_btn .btn {
background: #FF975F;
border-radius: 0.6666666667rem;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 0.3733333333rem;
color: #FFFFFF;
line-height: 0.5333333333rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.2133333333rem 0;
flex: 1;
}
.pack_list .pack_box .option_btn .Trial_btn {
background: #EE5F7D;
}
.trial_pop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
display: none;
}
.trial_pop .trial_pop_content {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 100%;
background: linear-gradient(180deg, #FFE5EE 0%, #FFFFFF 22%);
border-radius: 0.4266666667rem 0.4266666667rem 0px 0px;
padding: 0 0 0.4rem;
}
.trial_pop .trial_pop_content .title {
text-align: center;
position: relative;
}
.trial_pop .trial_pop_content .title img {
width: 5.7333333333rem;
height: 0.88rem;
}
.trial_pop .trial_pop_content .title .txt {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.4266666667rem;
color: #6D1E2F;
line-height: 0.5866666667rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.trial_pop .trial_pop_content .gift_img {
width: 2.6133333333rem;
height: 2.6133333333rem;
margin: 0.24rem auto 0;
}
.trial_pop .trial_pop_content .gift_img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.trial_pop .trial_pop_content .gift_list {
display: flex;
gap: 0.2133333333rem;
overflow-x: auto;
margin: 0.3466666667rem 0.4rem 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.trial_pop .trial_pop_content .gift_list ::-webkit-scrollbar {
display: none;
}
.trial_pop .trial_pop_content .gift_list .gift_box {
display: flex;
flex-direction: column;
align-items: center;
}
.trial_pop .trial_pop_content .gift_list .gift_box .content_box {
background: linear-gradient(180deg, #F7DBDD 0%, #FBF5F4 100%);
border-radius: 0.2666666667rem;
padding: 0.24rem;
position: relative;
}
.trial_pop .trial_pop_content .gift_list .gift_box .content_box .tip {
background: linear-gradient(270deg, #E83F67 0%, #EA797F 100%);
border-radius: 0.2666666667rem;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.2933333333rem;
color: #FFFFFF;
line-height: 0.4rem;
position: absolute;
padding: 0.0533333333rem 0.2666666667rem;
right: 0;
top: 0;
}
.trial_pop .trial_pop_content .gift_list .gift_box .content_box .img_box {
width: 1.6533333333rem;
height: 1.6533333333rem;
}
.trial_pop .trial_pop_content .gift_list .gift_box .content_box .img_box img {
width: 100%;
height: 100%;
object-fit: contain;
}
.trial_pop .trial_pop_content .gift_list .gift_box .txt {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.3466666667rem;
color: #313131;
line-height: 0.48rem;
text-align: center;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 1.6533333333rem;
margin-top: 0.08rem;
}
.trial_pop .trial_pop_content .contents_backpack {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.32rem;
color: #7B7B7D;
line-height: 0.4533333333rem;
text-align: center;
margin: 0.32rem 0.4rem;
}
.trial_pop .trial_pop_content .option_btn {
display: flex;
align-items: center;
gap: 0.24rem;
margin: 0.2666666667rem 0.4rem 0;
}
.trial_pop .trial_pop_content .option_btn .btn {
background: #EBEBEB;
border-radius: 0.6666666667rem;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 0.3733333333rem;
color: #7B7B7D;
line-height: 0.5333333333rem;
padding: 0.2133333333rem;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.trial_pop .trial_pop_content .option_btn .Use_btn {
background: #EE5F7D;
color: #FFFFFF;
}

View File

@@ -0,0 +1,473 @@
@charset "UTF-8";
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
// width: 100%;
height: 100%;
background: #FFD2E2;
}
.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;
.back_img {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
// top: px2rem(0);
}
.right_box {
position: absolute;
right: px2rem(18);
img {
width: px2rem(44);
height: px2rem(44);
}
.records_img {
margin-right: px2rem(24);
}
}
}
.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);
}
.header {
background-image: url("../images/header.png");
background-size: 100% 100%;
width: 100%;
height: px2rem(520);
position: relative;
}
.no_data {
position: absolute;
top: px2rem(300);
left: px2rem(30); // 设置左边距
right: px2rem(30); // 设置右边距
width: auto; // 宽度由 left & right 控制
box-sizing: border-box;
display: none;
.img_box {
text-align: center;
img {
width: px2rem(208);
height: px2rem(208);
}
}
.txt {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(28);
color: #AFB1B3;
line-height: px2rem(40);
text-align: center;
font-style: normal;
text-transform: none;
margin-top: px2rem(20);
}
}
.pack_list {
position: absolute;
top: px2rem(200);
left: px2rem(30); // 设置左边距
right: px2rem(30); // 设置右边距
width: auto; // 宽度由 left & right 控制
box-sizing: border-box;
.pack_box:first-child {
margin-top: 0;
}
.pack_box {
background: #FFFFFF;
border-radius: px2rem(24);
padding: 0 px2rem(24) px2rem(24);
margin-top: px2rem(40);
.title {
text-align: center;
position: relative;
img {
width: px2rem(430);
height: px2rem(66);
}
.txt {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(32);
color: #6D1E2F;
line-height: px2rem(44);
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.info {
display: flex;
// align-items: center;
margin-top: px2rem(18);
.left {
width: px2rem(160);
height: px2rem(160);
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.right {
margin: 0 px2rem(24);
.txt {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #7B7B7D;
line-height: px2rem(34);
margin-top: px2rem(12);
}
.flex_box {
display: flex;
align-items: center;
}
.time_out {
background: #FFFFFF;
border-radius: px2rem(10);
border: px2rem(2) solid #E3E2E5;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(26);
color: #313131;
line-height: px2rem(36);
display: flex;
align-items: center;
justify-content: center;
padding: px2rem(1) px2rem(12);
margin: 0 px2rem(8);
}
}
}
.gift_list {
display: flex;
gap: px2rem(16);
overflow-x: auto;
margin-top: px2rem(26);
::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
.gift_box {
display: flex;
flex-direction: column;
align-items: center;
.content_box {
background: linear-gradient(180deg, #F7DBDD 0%, #FBF5F4 100%);
border-radius: px2rem(20);
padding: px2rem(18);
position: relative;
.tip {
background: linear-gradient(270deg, #E83F67 0%, #EA797F 100%);
border-radius: px2rem(20);
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(22);
color: #FFFFFF;
line-height: px2rem(30);
position: absolute;
padding: px2rem(4) px2rem(20);
right: 0;
top: 0;
}
.img_box {
width: px2rem(124);
height: px2rem(124);
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.txt {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(26);
color: #313131;
line-height: px2rem(36);
text-align: center;
// 允许文字自动换行
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
// 可选:设置最大宽度以限制换行范围
max-width: px2rem(124);
margin-top: px2rem(6);
}
}
}
.option_btn {
display: flex;
align-items: center;
gap: px2rem(22);
margin-top: px2rem(20);
.btn {
background: #FF975F;
border-radius: px2rem(50);
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(28);
color: #FFFFFF;
line-height: px2rem(40);
display: flex;
align-items: center;
justify-content: center;
padding: px2rem(16) 0;
flex: 1;
}
.Trial_btn {
background: #EE5F7D;
}
}
}
}
.trial_pop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
display: none;
.trial_pop_content {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 100%;
// min-height: px2rem(766);
background: linear-gradient(180deg, #FFE5EE 0%, #FFFFFF 22%);
border-radius: px2rem(32) px2rem(32) 0px 0px;
padding: 0 0 px2rem(30);
.title {
text-align: center;
position: relative;
img {
width: px2rem(430);
height: px2rem(66);
}
.txt {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(32);
color: #6D1E2F;
line-height: px2rem(44);
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.gift_img {
width: px2rem(196);
height: px2rem(196);
margin: px2rem(18) auto 0;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.gift_list {
display: flex;
gap: px2rem(16);
overflow-x: auto;
margin: px2rem(26) px2rem(30) 0;
::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
.gift_box {
display: flex;
flex-direction: column;
align-items: center;
.content_box {
background: linear-gradient(180deg, #F7DBDD 0%, #FBF5F4 100%);
border-radius: px2rem(20);
padding: px2rem(18);
position: relative;
.tip {
background: linear-gradient(270deg, #E83F67 0%, #EA797F 100%);
border-radius: px2rem(20);
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(22);
color: #FFFFFF;
line-height: px2rem(30);
position: absolute;
padding: px2rem(4) px2rem(20);
right: 0;
top: 0;
}
.img_box {
width: px2rem(124);
height: px2rem(124);
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.txt {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(26);
color: #313131;
line-height: px2rem(36);
text-align: center;
// 允许文字自动换行
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
// 可选:设置最大宽度以限制换行范围
max-width: px2rem(124);
margin-top: px2rem(6);
}
}
}
.contents_backpack {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #7B7B7D;
line-height: px2rem(34);
text-align: center;
margin: px2rem(24) px2rem(30);
}
.option_btn {
display: flex;
align-items: center;
gap: px2rem(18);
margin: px2rem(20) px2rem(30) 0;
.btn {
background: #EBEBEB;
border-radius: px2rem(50);
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(28);
color: #7B7B7D;
line-height: px2rem(40);
padding: px2rem(16);
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.Use_btn {
background: #EE5F7D;
color: #FFFFFF;
}
}
}
}

View File

@@ -0,0 +1,233 @@
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;
background: #FFFFFF;
}
.back .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;
line-height: 0.5866666667rem;
text-align: center;
font-style: normal;
text-transform: none;
}
.tab_list {
margin: 2.3333333333rem 0 0;
display: flex;
position: fixed;
top: 0;
z-index: 10;
width: 100%;
box-sizing: border-box;
background: #FFFFFF;
padding: 0.1333333333rem 1.3333333333rem;
}
.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;
flex: 1;
}
.tab_list .activity {
color: #313131;
font-weight: 500;
position: relative;
}
.tab_list .activity::before {
content: "";
position: absolute;
bottom: -0.1333333333rem;
left: 45%;
width: 0.3466666667rem;
height: 0.1066666667rem;
background: #C859FF;
border-radius: 0.4266666667rem;
}
.content_list_received {
margin: 3.7333333333rem 0.4rem 0;
display: flex;
flex-wrap: wrap;
gap: 0.24rem;
}
.content_list_received .content_box_received {
position: relative;
}
.content_list_received .content_box_received .tip {
background: linear-gradient(270deg, #E83F67 0%, #EA797F 100%);
border-radius: 0.2666666667rem;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.2933333333rem;
color: #FFFFFF;
line-height: 0.4rem;
position: absolute;
padding: 0.0533333333rem 0.2666666667rem;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.content_list_received .content_box_received .img_box {
background: linear-gradient(180deg, #F7DBDD 0%, #FBF5F4 100%);
border-radius: 0.2666666667rem;
padding: 0.4rem 0.5866666667rem;
}
.content_list_received .content_box_received .img_box .img {
width: 3.3066666667rem;
height: 3.3066666667rem;
}
.content_list_received .content_box_received .img_box .img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.content_list_received .content_box_received .img_box .name {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.3466666667rem;
color: #313131;
line-height: 0.48rem;
text-align: center;
font-style: normal;
text-transform: none;
margin-top: 0.1333333333rem;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 3.3066666667rem;
}
.content_list_received .content_box_received .tip_info {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.32rem;
color: #7B7B7D;
line-height: 0.4533333333rem;
text-align: center;
font-style: normal;
text-transform: none;
margin-top: 0.24rem;
}
.content_list_received .content_box_received .tip_info img {
width: 0.5333333333rem;
height: 0.5333333333rem;
border-radius: 50%;
}
.content_list_gave {
margin: 3.7333333333rem 0 0;
display: none;
}
.content_list_gave .content_box_gave {
border-bottom: 0.0266666667rem solid #F2F3F7;
padding: 0.32rem 0;
margin: 0 0.4rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.content_list_gave .content_box_gave .left {
display: flex;
align-items: center;
}
.content_list_gave .content_box_gave .left .left_img {
width: 1.3333333333rem;
height: 1.3333333333rem;
}
.content_list_gave .content_box_gave .left .left_img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.content_list_gave .content_box_gave .left .info {
margin: 0 0.2666666667rem;
}
.content_list_gave .content_box_gave .left .info .name {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.4rem;
color: #313131;
line-height: 0.56rem;
font-style: normal;
text-transform: none;
}
.content_list_gave .content_box_gave .left .info .time {
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.08rem;
}
.content_list_gave .content_box_gave .right .packname {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.3466666667rem;
color: #313131;
line-height: 0.48rem;
font-style: normal;
text-transform: none;
}
.content_list_gave .content_box_gave .right .num {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 0.3466666667rem;
color: #313131;
line-height: 0.48rem;
font-style: normal;
text-transform: none;
margin-top: 0.08rem;
text-align: right;
}
.Rules_txt {
margin: 2.4rem 0.4rem 0;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 0.3733333333rem;
color: #313131;
line-height: 0.5333333333rem;
font-style: normal;
text-transform: none;
}
.arabic .tab_list {
padding: 0.1333333333rem 0.6666666667rem;
}
.arabic .content_list_gave .content_box_gave .right .num {
text-align: left;
}

View File

@@ -0,0 +1,272 @@
@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;
.back_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;
line-height: px2rem(44);
text-align: center;
font-style: normal;
text-transform: none;
}
}
.tab_list {
margin: px2rem(175) 0 0;
display: flex;
position: fixed;
top: 0;
z-index: 10;
width: 100%;
box-sizing: border-box;
background: #FFFFFF;
padding: px2rem(10) px2rem(100);
.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;
flex: 1;
}
.activity {
color: #313131;
font-weight: 500;
position: relative;
}
.activity::before {
content: "";
position: absolute;
bottom: px2rem(-10);
left: 45%;
// transform: translateY(-50%);
width: px2rem(26);
height: px2rem(8);
background: #C859FF;
border-radius: px2rem(32);
}
}
.content_list_received {
margin: px2rem(280) px2rem(30) 0;
display: flex;
flex-wrap: wrap;
gap: px2rem(18);
.content_box_received {
position: relative;
.tip {
background: linear-gradient(270deg, #E83F67 0%, #EA797F 100%);
border-radius: px2rem(20);
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(22);
color: #FFFFFF;
line-height: px2rem(30);
position: absolute;
padding: px2rem(4) px2rem(20);
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.img_box {
background: linear-gradient(180deg, #F7DBDD 0%, #FBF5F4 100%);
border-radius: px2rem(20);
padding: px2rem(30) px2rem(44);
.img {
width: px2rem(248);
height: px2rem(248);
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.name {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(26);
color: #313131;
line-height: px2rem(36);
text-align: center;
font-style: normal;
text-transform: none;
margin-top: px2rem(10);
// 允许文字自动换行
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
// 可选:设置最大宽度以限制换行范围
max-width: px2rem(248);
}
}
.tip_info {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #7B7B7D;
line-height: px2rem(34);
text-align: center;
font-style: normal;
text-transform: none;
margin-top: px2rem(18);
img {
width: px2rem(40);
height: px2rem(40);
border-radius: 50%;
}
}
}
}
.content_list_gave {
margin: px2rem(280) 0 0;
display: none;
.content_box_gave {
border-bottom: px2rem(2) solid #F2F3F7;
padding: px2rem(24) 0;
margin: 0 px2rem(30);
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.left_img {
width: px2rem(100);
height: px2rem(100);
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.info {
margin: 0 px2rem(20);
.name {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(30);
color: #313131;
line-height: px2rem(42);
font-style: normal;
text-transform: none;
}
.time {
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;
margin-top: px2rem(6);
}
}
}
.right {
.packname {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(26);
color: #313131;
line-height: px2rem(36);
font-style: normal;
text-transform: none;
}
.num {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(26);
color: #313131;
line-height: px2rem(36);
font-style: normal;
text-transform: none;
margin-top: px2rem(6);
text-align: right;
}
}
}
}
.Rules_txt {
margin: px2rem(180) px2rem(30) 0;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(28);
color: #313131;
line-height: px2rem(40);
font-style: normal;
text-transform: none;
}
.arabic{
.tab_list{
padding: px2rem(10) px2rem(50);
}
.content_list_gave .content_box_gave .right .num{
text-align: left;
}
}

View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title class="Give_Giftpack"></title>
<link rel="stylesheet" href="../../common/css/reset.css" />
<link rel="stylesheet" href="css/givePack.css?v=1.1" />
<link rel="stylesheet" href="../../common/css/animate.css" />
</head>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/backB.png" alt="" class="back_img" />
<p class="Give_Giftpack">Give Giftpack</p>
</div>
<div class="search_input">
<img src="./images/search.png" alt="">
<input type="text" placeholder="Please enter user ID to search" class="search_input_box"></input>
</div>
<div class="user_info">
<div class="left">
<div class="avatar">
<img src="" alt=""></img>
</div>
<div class="name">
<div class="nick"></div>
<div class="erbanNo"></div>
</div>
</div>
<div class="right">
<div class="Give_btn">Give</div>
</div>
</div>
<div class="trial_pop">
<div class="trial_pop_content">
<div class="Give_Giftpack title">Give Giftpack</div>
<div class="avatar">
<img src="" alt=""></img>
</div>
<div class="nick"></div>
<div class="erbanNo"></div>
<div class="packName"></div>
<div class="quantity_box">
<div class="Giftpack_Quantity"></div>
<div class="num_box">
<img src="./images/jian.png" alt="" class="jian subtraction_btn">
<div class="num useNum">0</div>
<img src="./images/jia.png" alt="" class="jia addition_btn">
</div>
</div>
<div class="Giftpacks_caution"></div>
<div class="option_btn">
<div class="btn Cancel_btn">Cancel</div>
<div class="btn Give_btn">Give</div>
</div>
</div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="./local/tr.js"></script>
<script src="../../common/local/langHandler.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./js/givePack.js?v=1.0"></script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 487 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 831 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 449 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title class="page_title"></title>
<link rel="stylesheet" href="../../common/css/reset.css" />
<link rel="stylesheet" href="css/index.css?v=1.1" />
<link rel="stylesheet" href="../../common/css/animate.css" />
</head>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/backB.png" alt="" class="back_img" />
<div class="right_box">
<img src="./images/records.png" alt="" class="records_img" />
<img src="./images/rlues.png" alt="" class="rlues_img" />
</div>
<!-- <p class="page_title">Task Center</p> -->
</div>
<p class="page_title">Giftpack Center</p>
<p class="page_title_bg">Giftpack Center</p>
<div class="header"></div>
<div class="pack_list"></div>
<div class="no_data">
<div class="img_box">
<img src="./images/kongzhuangtai.png" alt="" />
</div>
<div class="txt You_yet">You have not received any giftpacks yet</div>
<div class="txt Contact_them">
Contact customer service to learn about the latest ways to get them
</div>
</div>
<div class="trial_pop">
<div class="trial_pop_content">
<div class="title">
<img src="./images/title_bg.png" alt="" />
<p class="txt Newbie_Giftpack">Newbie Giftpack</p>
</div>
<div class="gift_img">
<img src="./images/header.png" alt="" />
</div>
<div class="gift_list"></div>
<div class="contents_backpack"></div>
<div class="option_btn">
<div class="btn Cancel_btn">Cancel</div>
<div class="btn Use_btn">Use</div>
</div>
</div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="./local/tr.js"></script>
<script src="../../common/local/langHandler.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./js/index.js?v=1.0"></script>

View File

@@ -0,0 +1,198 @@
let urlPrefix = getUrlPrefix()
let browser = checkVersion()
var urlDate = getQueryString()
let env = EnvCheck();
if (env == 'test') {
new VConsole();
}
// 封裝layer消息提醒框
let layerIndex
var langReplace;
var localLang;
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
layer.open({
type: 2,
shadeClose: false,
content,
success(e) {
layerIndex = $(e).attr('index')
}
})
}
const hideLoading = (index) => {
layer.close(index)
}
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
layer.open({
content,
time,
skin: 'msg'
})
}
// 初始化函數
$(function () {
getInfoFromClient();
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
setTimeout(function () {
// 頁面全屏
if (browser.app) {
if (browser.android) {
window.androidJsObj.initShowNav(false)
} else {
window.webkit.messageHandlers.initShowNav.postMessage(0)
}
};
// 頂部返回事件
$('.back .back_img').click(() => {
window.history.back();
})
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
langReplace = window.lang.replace;
localLang = window.lang;
translateFun();
$('.user_info').hide()
$('.useNum').text(useNum);
}, 100)
})
function translateFun() {
var langReplace = window.lang.replace;
var localLang = window.lang;
$('.Give_Giftpack').html(langReplace(localLang.demoModule.Give_Giftpack));
$('.Give_btn').html(langReplace(localLang.demoModule.Give_btn));
$('.Giftpack_Quantity').html(langReplace(localLang.demoModule.Giftpack_Quantity));
$('.Giftpacks_caution').html(langReplace(localLang.demoModule.Giftpacks_caution));
$('.Give_btn').html(langReplace(localLang.demoModule.Give_btn));
$('.Cancel_btn').html(langReplace(localLang.demoModule.Cancel_btn));
$('.search_input_box').attr('placeholder', langReplace(localLang.demoModule.Please_search));
}
var pageNo = 1;
var pageSize = 10;
var canNext = true;
var AgencyList = [];
var resPageLength;
var itemData = base64Decode(urlDate.itemData);
var userData ={};
var useNum = 1;
$('.search_input_box').on('keydown', function (e) {
// 判断是否按下的是 "Enter" 键(回车/搜索)
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault(); // 阻止默认行为(如表单提交)
handleSearch($(this)); // 调用搜索逻辑
}
});
// $('.search_input_box').on('blur', function () {
// handleSearch($(this)); // 调用搜索逻辑
// });
// 搜索处理函数
function handleSearch($inputElement) {
const erbanNo = $inputElement.val().trim();
if (erbanNo !== '') {
showLoading();
networkRequest({
type: "GET",
url: urlPrefix + "/web-user/search",
data: {
erbanNo
},
success: function (res) {
if (res.code == 200) {
if(res.data){
$('.user_info').show();
$('.user_info .left .avatar img').attr('src', res.data.avatar)
$('.user_info .left .name .nick').text(res.data.nick)
$('.user_info .left .name .erbanNo').text('ID:'+res.data.erbanNo)
userData = res.data;
}else{
$('.user_info').hide();
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex);
},
error: function (res) {
console.log(res, "报错啦");
hideLoading(layerIndex);
},
})
}
}
// 列表点击赠送
$('.user_info .right .Give_btn').click(function(){
$('.trial_pop .avatar img').attr('src',userData.avatar);
$('.trial_pop .nick').text(userData.nick);
$('.trial_pop .erbanNo').text('ID:'+userData.erbanNo);
$('.trial_pop .packName').text(itemData.packName);
$('.trial_pop').show();
bodyScroolFun(true);
})
$('.addition_btn').click(function () {
if(itemData.remainNum <= useNum){
return
}
useNum ++;
$('.useNum').text(useNum);
});
$('.subtraction_btn').click(function () {
if( useNum <= 1){
return
}
useNum --;
$('.useNum').text(useNum);
});
// 赠送礼包
$('.trial_pop .Give_btn').click(function () {
showLoading();
networkRequest({
type: "GET",
url: urlPrefix + "/packCenter/usePack",
data: {
// uid: pubInfo.uid,
// pub_uid:3203,
targetUid:userData.uid,
useNum,
userPackId:itemData.userPackId
},
success: function (res) {
if (res.code == 200) {
toastMsg(langReplace(localLang.demoModule.sent_package))
$('.trial_pop').hide();
bodyScroolFun(false);
itemData.remainNum = Number(itemData.remainNum) - Number(useNum)
if(itemData.remainNum == 0){
setTimeout(function () {
window.history.back();
}, 800)
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex);
},
error: function (res) {
console.log(res, "报错啦");
hideLoading(layerIndex);
},
})
});
// 取消
$('.trial_pop .Cancel_btn').click(function () {
$('.trial_pop').hide();
bodyScroolFun(false);
});
// 解码
function base64Decode(encoded) {
let decoded;
try {
decoded = decodeURIComponent(escape(atob(encoded)));
decoded = JSON.parse(decoded);
} catch (e) {
console.error('Base64 解码失败:', e);
return null;
}
return decoded;
}

View File

@@ -0,0 +1,307 @@
let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
new VConsole();
}
// 封裝layer消息提醒框
let layerIndex
var langReplace;
var localLang;
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
layer.open({
type: 2,
shadeClose: false,
content,
success(e) {
layerIndex = $(e).attr('index')
}
})
}
const hideLoading = (index) => {
layer.close(index)
}
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
layer.open({
content,
time,
skin: 'msg'
})
}
// 初始化函數
$(function () {
getInfoFromClient();
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
setTimeout(function () {
// 頁面全屏
if (browser.app) {
if (browser.android) {
window.androidJsObj.initShowNav(false)
} else {
window.webkit.messageHandlers.initShowNav.postMessage(0)
}
};
// 頂部返回事件
$('.back .back_img').click(() => {
if (browser.android) {
window.androidJsObj.closeWebView()
} else {
window.webkit.messageHandlers.closeWebView.postMessage(null)
}
})
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
langReplace = window.lang.replace;
localLang = window.lang;
translateFun();
getCheckData();
// getTaskList();
}, 100)
})
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));
$('.contents_backpack').html(langReplace(localLang.demoModule.contents_backpack));
$('.Cancel_btn').html(langReplace(localLang.demoModule.Cancel_btn));
$('.Use_btn').html(langReplace(localLang.demoModule.Use_btn));
$('.You_yet').html(langReplace(localLang.demoModule.You_yet));
$('.Contact_them').html(langReplace(localLang.demoModule.Contact_them));
}
var pageNo = 1;
var pageSize = 10;
var canNext = true;
var AgencyList = [];
var resPageLength;
function getCheckData() {
showLoading();
networkRequest({
type: "GET",
url: urlPrefix + "/packCenter/list",
data: {
pageNo,
pageSize
},
success: function (res) {
if (res.code == 200) {
resPageLength = res.data.length
if(resPageLength == 0 && pageNo == 1){
$('.no_data').show();
$('.pack_list').hide();
}
AgencyList = [...AgencyList, ...res.data]
let str = '';
$('.pack_list .pack_box').remove();
AgencyList.forEach((item, index) => {
let twoStr = ''
const $timeDiv = $('<div>').addClass('time_out').attr('id', `countdown-${index}`).text('加载中...');
item.rewardList.forEach((twoItem, twoIndex) => {
twoStr += `<div class="gift_box">
<div class="content_box">
<div class="tip">${twoItem.rewardNum}${twoItem.unit ? twoItem.unit : ''}</div>
<div class="img_box">
<img src="${twoItem.pic}" alt="">
</div>
</div>
<div class="txt">${twoItem.rewardName}</div>
</div>`
})
const $packBox = $(`<div class="pack_box">
<div class="title">
<img src="./images/title_bg.png" alt="">
<p class="txt Newbie_Giftpack">${item.packName}</p>
</div>
<div class="info">
<div class="left">
<img src="${item.imgUrl}" alt="">
</div>
<div class="right">
<div class="txt"> <span class="Number_Giftpacks">Number of Giftpacks:</span> ${item.packNum}</div>
<div class="txt"><span class="Number_Used">Number Used:</span>${item.useNum}</div>
<div class="txt flex_box">
<span class="Expiration_Countdown">Expiration Countdown</span>
</div>
</div>
</div>
<div class="gift_list">${twoStr}</div>
<div class="option_btn">
<div class="btn Give_btn" obj=${base64Encode(item)}>Give</div>
<div class="btn Trial_btn" obj=${base64Encode(item)}>Trial</div>
</div>
</div>`);
// 在 .flex_box 中 append 倒计时元素
$('.flex_box', $packBox).append($timeDiv);
// 添加整个 packBox 到页面
$('.pack_list').append($packBox);
// 启动倒计时
startCountdown($timeDiv, item.expireSeconds);
});
$('.pack_list').append(str)
$('.Expiration_Countdown').html(langReplace(localLang.demoModule.Expiration_Countdown));
$('.Number_Giftpacks').html(langReplace(localLang.demoModule.Number_Giftpacks));
$('.Number_Used').html(langReplace(localLang.demoModule.Number_Used));
$('.Give_btn').html(langReplace(localLang.demoModule.Give_btn));
$('.Trial_btn').html(langReplace(localLang.demoModule.Trial_btn));
} else {
toastMsg(res.message)
}
hideLoading(layerIndex);
},
error: function (res) {
console.log(res, "报错啦");
hideLoading(layerIndex);
},
})
}
// 列表选择点击使用
$(document).on('click', '.Trial_btn', function () {
const itemData = base64Decode($(this).attr('obj'));
$('.trial_pop .Newbie_Giftpack').text(itemData.packName)
$('.trial_pop .gift_img img').attr('src', itemData.imgUrl)
$('.trial_pop .gift_list .gift_box').remove();
let twoStr = ''
itemData.rewardList.forEach(item => {
twoStr += `<div class="gift_box">
<div class="content_box">
<div class="tip">${item.rewardNum}${item.unit ? item.unit : ''}</div>
<div class="img_box">
<img src="${item.pic}" alt="">
</div>
</div>
<div class="txt">${item.rewardName}</div>
</div>`
})
$('.trial_pop .gift_list').append(twoStr)
$('.trial_pop .Use_btn').attr('obj', base64Encode(itemData))
$('.trial_pop').show();
bodyScroolFun(true);
});
// 点击赠送
$(document).on('click', '.Give_btn', function () {
const itemData = base64Decode($(this).attr('obj'));
window.location.href = './givePack.html?itemData=' + base64Encode(itemData);
return
})
// 使用礼包
function operateUsePack(itemData) {
showLoading();
networkRequest({
type: "GET",
url: urlPrefix + "/packCenter/usePack",
data: {
// uid: pubInfo.uid,
// targetUid: pubInfo.uid,
// uid: 3203,
targetUid: pubInfo.uid,
useNum: 1,
userPackId: itemData.userPackId
},
success: function (res) {
if (res.code == 200) {
toastMsg(langReplace(localLang.demoModule.used_package))
$('.trial_pop').hide();
bodyScroolFun(false);
getDataAgain();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex);
},
error: function (res) {
console.log(res, "报错啦");
hideLoading(layerIndex);
},
})
}
// 使用礼包按钮
$('.trial_pop .Use_btn').click(function () {
const itemData = base64Decode($(this).attr('obj'));
operateUsePack(itemData)
});
// 取消使用礼包
$('.trial_pop .Cancel_btn').click(function () {
$('.trial_pop').hide();
bodyScroolFun(false);
});
// 使用记录
$('.back .right_box .records_img').click(function () {
window.location.href = './myRecord.html';
return
});
// 规则
$('.back .right_box .rlues_img').click(function () {
window.location.href = './rule.html';
return
});
// 倒计时
function startCountdown(element, leftTime) {
const update = () => {
if (leftTime > 0) {
const h = String(Math.floor(leftTime / 3600)).padStart(2, '0');
const m = String(Math.floor((leftTime % 3600) / 60)).padStart(2, '0');
const s = String(leftTime % 60).padStart(2, '0');
$(element).text(`${h}:${m}:${s}`);
leftTime--;
} else {
$(element).text('00:00:00');
clearInterval(timer);
}
};
update();
const timer = setInterval(update, 1000);
}
// 加码
function base64Encode(obj) {
const jsonStr = JSON.stringify(obj);
return btoa(unescape(encodeURIComponent(jsonStr)));
}
// 解码
function base64Decode(encoded) {
let decoded;
try {
decoded = decodeURIComponent(escape(atob(encoded)));
decoded = JSON.parse(decoded);
} catch (e) {
console.error('Base64 解码失败:', e);
return null;
}
return decoded;
}
function getDataAgain() {
pageNo = 1;
pageSize = 10;
canNext = true;
AgencyList = [];
resPageLength = 0;
getCheckData();
}
// 页面触底 分页加载
$(window).scroll(function () {
if ($(this).scrollTop() + $(this).height() >= $(document).height() - 5) {
if (canNext && resPageLength == pageSize) {
canNext = false
pageNo++;
getCheckData();
} else {
// toastMsg("No more~");
}
}
});
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();
}
});

View File

@@ -0,0 +1,197 @@
let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
new VConsole();
}
// 封裝layer消息提醒框
let layerIndex
var langReplace;
var localLang;
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
layer.open({
type: 2,
shadeClose: false,
content,
success(e) {
layerIndex = $(e).attr('index')
}
})
}
const hideLoading = (index) => {
layer.close(index)
}
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
layer.open({
content,
time,
skin: 'msg'
})
}
// 初始化函數
$(function () {
getInfoFromClient();
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
setTimeout(function () {
// 頁面全屏
if (browser.app) {
if (browser.android) {
window.androidJsObj.initShowNav(false)
} else {
window.webkit.messageHandlers.initShowNav.postMessage(0)
}
};
// 頂部返回事件
$('.back .back_img').click(() => {
window.history.back();
})
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
langReplace = window.lang.replace;
localLang = window.lang;
translateFun();
getData();
// getTaskList();
}, 100)
})
function translateFun() {
var langReplace = window.lang.replace;
var localLang = window.lang;
$('.My_Record').html(langReplace(localLang.demoModule.My_Record));
$('.I_Received').html(langReplace(localLang.demoModule.I_Received));
$('.I_Gave').html(langReplace(localLang.demoModule.I_Gave));
$('.I_Used').html(langReplace(localLang.demoModule.I_Used));
}
var pageNo = 1;
var pageSize = 10;
var canNext = true;
var AgencyList = [];
var resPageLength;
var getDataType = 1; //1:我收到的礼包 2:我发出的礼包 3:我使用的礼包
// 使用礼包
function getData() {
showLoading();
networkRequest({
type: "GET",
url: urlPrefix + "/packCenter/records",
data: {
pageNo,
pageSize,
recordType:getDataType
},
success: function (res) {
if (res.code == 200) {
resPageLength = res.data.length
AgencyList = [...AgencyList, ...res.data]
let str = '';
if (getDataType == 3) {
$('.content_list_received').hide()
$('.content_list_gave').show()
$('.content_list_gave .content_box_gave').remove();
AgencyList.forEach((item, index) => {
str += `
<div class="content_box_gave">
<div class="left">
<div class="left_img">
<img src="${item.imgUrl}" alt="">
</div>
<div class="info">
<div class="name">${langReplace(localLang.demoModule.Use_btn)} ${item.packName}</div>
<div class="time">${item.sendDate}</div>
</div>
</div>
</div>
`
});
$('.content_list_gave').append(str);
} else if (getDataType == 1) {
$('.content_list_gave').hide()
$('.content_list_received').show()
$('.content_list_received .content_box_received').remove();
AgencyList.forEach((item, index) => {
str += `
<div class="content_box_received">
<div class="tip">X${item.packNum}</div>
<div class="img_box">
<div class="img">
<img src="${item.imgUrl}" alt="" />
</div>
<div class="name">${item.packName}</div>
</div>
`
if (item.source == 1) {
str += `<div class="tip_info">${langReplace(localLang.demoModule.Giftpacks_System)}</div></div>`
} else {
str += `<div class="tip_info">
<img src="${item.avatar}" alt="" />
<span>${item.nick}</span>
</div>
</div>`
}
});
$('.content_list_received').append(str);
} else if (getDataType == 2) {
$('.content_list_received').hide()
$('.content_list_gave').show()
$('.content_list_gave .content_box_gave').remove();
AgencyList.forEach((item, index) => {
str += `
<div class="content_box_gave">
<div class="left">
<div class="left_img">
<img src="${item.imgUrl}" alt="">
</div>
<div class="info">
<div class="name">${item.nick} ${langReplace(localLang.demoModule.Give_btn)} ${item.targetNick}</div>
<div class="time">${item.sendDate}</div>
</div>
</div>
<div class="right">
<div class="packname">${item.packName}</div>
<div class="num">X${item.packNum}</div>
</div>
</div>
`
});
$('.content_list_gave').append(str);
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex);
},
error: function (res) {
console.log(res, "报错啦");
hideLoading(layerIndex);
},
})
}
$('.tab_list .tab_box').click(function () {
$(this).addClass('activity').siblings().removeClass('activity');
getDataType = $(this).attr('recordtype')
getDataAgain()
})
function getDataAgain() {
pageNo = 1;
pageSize = 10;
canNext = true;
AgencyList = [];
resPageLength = 0;
getData();
}
// 页面触底 分页加载
$(window).scroll(function () {
if ($(this).scrollTop() + $(this).height() >= $(document).height() - 5) {
if (canNext && resPageLength == pageSize) {
canNext = false
pageNo++;
getData()
} else {
// toastMsg("No more~");
}
}
});

View File

@@ -0,0 +1,31 @@
// 阿拉伯
langAr = {
// 模块
demoModule: {
page_title:'مركز حزم الهدايا',
Newbie_Giftpack:'حزمة هدايا لمستخدمين جدد',
Expiration_Countdown:'العد التنازلي لانتهاء الصلاحية',
Number_Giftpacks:'عدد إرسال هدايا:',
Number_Used:'العدد المستخدم:',
Trial_btn:'تجربة',
Give_btn:'يعطي إلى ',
contents_backpack:'سيتم وضع محتويات حزمة الهدايا في حقيبتك، يُرجى التحقق منها.',
Cancel_btn:'إلغاء',
Use_btn:'استخدام',
My_Record:'سجل حقيبة الهدايا الخاصة بي',
used_package:'لقد استخدمتَ الهدية بنجاح، اذهب إلى حقيبتك للتحقق منها.',
I_Received:'لقد استلمت',
I_Gave:'لقد أعطيت',
I_Used:'لقد استخدمت',
Giftpacks_System:'حزم الهدايا من النظام',
Give_Giftpack:'إهداء حزمة هدايا',
Giftpack_Quantity:'عدد إرسال هدايا:',
Giftpacks_caution:'لا يمكن سحب حزمة الهدية بعد إعطائها، يرجى التعامل معها بحذر',
sent_package:'لقد أرسلتَ الهدية بنجاح، أخبر أصدقاءك!',
You_yet:'لم تستلم أي حزم هدايا بعد',
Contact_them:'يرجى الاتصال بخدمة العملاء لمعرفة أحدث طريقة للحصول عليه',
Please_search:'الرجاء إدخال معرف المستخدم الخاص بك للبحث',
Rules:'القواعد',
Rules_txt:'1. توزيع باقات الهدايا: ستوزع المنصة مكافآت باقات الهدايا من وقت لآخر بناءً على نشاط المستخدم وأدائه السلوكي، إلخ. <br /> 2. كيفية التوزيع: يرجى التواصل مع خدمة العملاء لمعرفة طرق الحصول المحددة. <br /> 3. استخدام باقات الهدايا: بعد استلام باقة الهدايا، يمكنك اختيار استخدامها بنفسك أو إهداؤها للآخرين. <br /> 4. مدة صلاحية باقات الهدايا: لكل باقة تاريخ انتهاء صلاحية. يرجى استخدامها قبل تاريخ انتهاء الصلاحية، حيث ستنتهي صلاحيتها تلقائيًا بعد تاريخ انتهاء الصلاحية. <br /> 5. معالجة المخالفات: في حال ثبوت انتهاك المستخدم للقواعد (مثل الغش، أو التمرير غير العادل، إلخ)، يحق للمنصة سحب باقة الهدايا. <br /> 6. تعليمات أخرى: للمنصة الحق النهائي في تفسير هذا النشاط.',
}
}

View File

@@ -0,0 +1,31 @@
// 英文
langEn = {
// 模块
demoModule: {
page_title:'Giftpack Center',
Newbie_Giftpack:'Newbie Giftpack',
Expiration_Countdown:'Expiration Countdown',
Number_Giftpacks:'Number of Giftpacks:',
Number_Used:'Number Used:',
Trial_btn:'Trial',
Give_btn:'Give',
contents_backpack:'The contents of the gift pack will be put into your corresponding backpack, please check it~',
Cancel_btn:'Cancel',
Use_btn:'Use',
My_Record:'My Giftpack Record',
used_package:'You have successfully used the gift package, go to your bag to check it~',
I_Received:'I Received',
I_Gave:'I Gave',
I_Used:'I Used',
Giftpacks_System:'Giftpacks from the System',
Give_Giftpack:'Give Giftpack',
Giftpack_Quantity:'Giftpack Quantity:',
Giftpacks_caution:'Giftpacks cannot be withdrawn after being given, please operate with caution~',
sent_package:'You have successfully sent the gift package, go and notify your friends!',
You_yet:'You have not received any giftpacks yet',
Contact_them:'Contact customer service to learn about the latest ways to get them',
Please_search:'Please enter user ID to search',
Rules:'Rules',
Rules_txt:'1 Gift package distribution: The platform will distribute gift package rewards from time to time based on user activity, behavioral performance, etc. <br /> 2 How to distribute: Please contact customer service for specific acquisition methods. <br /> 3 Gift package use: After receiving the gift package, you can choose to use it yourself or give it to others. <br /> 4 Gift package validity period: Each gift package is marked with an expiration date. Please use it before the expiration date. It will automatically expire after the expiration date. <br /> 5 Violation handling: If a user is found to have violated the rules (such as cheating, malicious swiping, etc.), the platform has the right to withdraw the gift package. <br /> 6 Other instructions: The platform has the final right of interpretation of this activity.',
}
}

View File

@@ -0,0 +1,31 @@
// 英文
langTr = {
// 模块
demoModule: {
page_title:'Giftpack Merkezi',
Newbie_Giftpack:'Yeni Başlayanlar İçin Giftpack',
Expiration_Countdown:'Son Kullanma Tarihi Geri Sayımı',
Number_Giftpacks:'Hediye Paketi Sayısı:',
Number_Used:'Kullanılan Sayı:',
Trial_btn:'Deneme',
Give_btn:'Vermek',
contents_backpack:'Hediye paketinin içeriği ilgili sırt çantanıza konulacaktır, lütfen kontrol edin~',
Cancel_btn:'İptal',
Use_btn:'Kullan',
My_Record:'Hediye Paketi Kaydım',
used_package:'Hediye paketini başarıyla kullandınız, kontrol etmek için çantanıza gidin~',
I_Received:'Aldım',
I_Gave:'Verdim',
I_Used:'Kullandım',
Giftpacks_System:'Sistemdeki Hediye Paketleri',
Give_Giftpack:'Hediye Paketi Ver',
Giftpack_Quantity:'Hediye Paketi Miktarı:',
Giftpacks_caution:'Hediye paketleri verildikten sonra geri çekilemez, lütfen dikkatli olun~',
sent_package:'Hediye paketini başarıyla gönderdiniz, gidip arkadaşlarınıza bildirin!',
You_yet:'Henüz herhangi bir hediye paketi almadınız',
Contact_them:'Onları edinmenin en son yollarını öğrenmek için müşteri hizmetleriyle iletişime geçin',
Please_search:'Arama yapmak için lütfen kullanıcı kimliğinizi girin',
Rules:'Kurallar',
Rules_txt:'1 Hediye paketi dağıtımı: Platform, kullanıcı etkinliğine, davranışsal performansa vb. göre zaman zaman hediye paketi ödülleri dağıtacaktır. <br /> 2 Dağıtım nasıl yapılır: Lütfen belirli edinme yöntemleri için müşteri hizmetleriyle iletişime geçin. <br /> 3 Hediye paketi kullanımı: Hediye paketini aldıktan sonra, kendiniz kullanmayı veya başkalarına vermeyi seçebilirsiniz. <br /> 4 Hediye paketi geçerlilik süresi: Her hediye paketi bir son kullanma tarihiyle işaretlenmiştir. Lütfen son kullanma tarihinden önce kullanın. Son kullanma tarihinden sonra otomatik olarak sona erecektir. <br /> 5 İhlal yönetimi: Bir kullanıcının kuralları ihlal ettiği tespit edilirse (hile, kötü niyetli kaydırma vb. gibi), platform hediye paketini geri çekme hakkına sahiptir. <br /> 6 Diğer talimatlar: Platform, bu etkinliğin nihai yorumlama hakkına sahiptir.',
}
}

View File

@@ -0,0 +1,31 @@
// 中文
langZh = {
// 模塊
demoModule: {
page_title:'禮包中心',
Newbie_Giftpack:'新手禮包',
Expiration_Countdown:'到期倒數',
Number_Giftpacks:'禮包數量:',
Number_Used:'已使用數量:',
Trial_btn:'使用',
Give_btn:'赠送',
contents_backpack:'禮包內容將放入您對應的背包中,請注意查收~',
Cancel_btn:'取消',
Use_btn:'使用',
My_Record:'我的禮包記錄',
used_package:'您已成功使用禮包,請前往您的背包查看~',
I_Received:'我收到的',
I_Gave:'我贈送的',
I_Used:'我使用的',
Giftpacks_System:'系統贈送的',
Give_Giftpack:'赠送禮包',
Giftpack_Quantity:'禮包數量:',
Giftpacks_caution:'禮包贈送後不可提取,請謹慎操作~',
sent_package:'您已成功發送禮包,快去通知您的朋友吧!',
You_yet:'您尚未收到任何禮包',
Contact_them:'聯絡客服了解最新領取方式',
Please_search:'請輸入用戶ID進行搜尋',
Rules:'規則',
Rules_txt:'1 禮包發放:平台將根據用戶活躍度、行為表現等情況,不定期發放禮包獎勵。 <br /> 2 發放方式:具體取得方式請聯絡客服。 <br /> 3 禮包使用:收到禮包後,您可以選擇自己使用或贈送他人。 <br /> 4 禮包效期:每個禮包均標註有效期,請在效期前使用,超過效期將自動失效。 <br /> 5 違規處理:如發現用戶違反規則(如作弊、惡意刷單等),平台有權收回該禮包。 <br /> 6 其他說明:平台對本次活動擁有最終解釋權。',
}
}

View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title class="My_Record"></title>
<link rel="stylesheet" href="../../common/css/reset.css" />
<link rel="stylesheet" href="css/myRecord.css?v=1.1" />
<link rel="stylesheet" href="../../common/css/animate.css" />
</head>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/backB.png" alt="" class="back_img" />
<p class="My_Record">My Giftpack Record</p>
</div>
<div class="tab_list">
<div class="tab_box activity I_Received" recordType="1">I Received</div>
<div class="tab_box I_Gave" recordType="2">I Gave</div>
<div class="tab_box I_Used" recordType="3">I Used</div>
</div>
<div class="content_list_received"></div>
<div class="content_list_gave">
<div class="content_box_gave">
<div class="left">
<div class="left_img">
<img src="./images/header.png" alt="">
</div>
<div class="info">
<div class="name">Teeery Giftpacks Lin</div>
<div class="time">2025-05-10 11:45</div>
</div>
</div>
<div class="right">
<div class="packname">Newbie Giftpack</div>
<div class="num">X1</div>
</div>
</div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="./local/tr.js"></script>
<script src="../../common/local/langHandler.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./js/myRecord.js?v=1.0"></script>

View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title class="page_title"></title>
<link rel="stylesheet" href="../../common/css/reset.css" />
<link rel="stylesheet" href="css/myRecord.css?v=1.1" />
<link rel="stylesheet" href="../../common/css/animate.css" />
</head>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/backB.png" alt="" class="back_img" />
<p class="page_title">Rules</p>
</div>
<div class="Rules_txt"></div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="./local/tr.js"></script>
<script src="../../common/local/langHandler.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script>
let browser = checkVersion()
var langReplace;
var localLang;
// 初始化函數
$(function () {
getInfoFromClient();
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
setTimeout(function () {
// 頁面全屏
if (browser.app) {
if (browser.android) {
window.androidJsObj.initShowNav(false)
} else {
window.webkit.messageHandlers.initShowNav.postMessage(0)
}
};
// 頂部返回事件
$('.back .back_img').click(() => {
window.history.back();
})
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
langReplace = window.lang.replace;
localLang = window.lang;
translateFun();
}, 100)
})
function translateFun() {
var langReplace = window.lang.replace;
var localLang = window.lang;
$('.page_title').text(langReplace(localLang.demoModule.Rules));
$('.Rules_txt').html(langReplace(localLang.demoModule.Rules_txt));
}
</script>