新增 - 礼包中心
267
view/molistar/modules/packCenter/css/givePack.css
Normal 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;
|
||||
}
|
311
view/molistar/modules/packCenter/css/givePack.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
406
view/molistar/modules/packCenter/css/index.css
Normal 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;
|
||||
}
|
473
view/molistar/modules/packCenter/css/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
233
view/molistar/modules/packCenter/css/myRecord.css
Normal 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;
|
||||
}
|
272
view/molistar/modules/packCenter/css/myRecord.scss
Normal 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;
|
||||
}
|
||||
}
|
83
view/molistar/modules/packCenter/givePack.html
Normal 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>
|
BIN
view/molistar/modules/packCenter/images/header.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
view/molistar/modules/packCenter/images/jia.png
Normal file
After Width: | Height: | Size: 220 B |
BIN
view/molistar/modules/packCenter/images/jian.png
Normal file
After Width: | Height: | Size: 94 B |
BIN
view/molistar/modules/packCenter/images/kongzhuangtai.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
view/molistar/modules/packCenter/images/records.png
Normal file
After Width: | Height: | Size: 487 B |
BIN
view/molistar/modules/packCenter/images/rlues.png
Normal file
After Width: | Height: | Size: 831 B |
BIN
view/molistar/modules/packCenter/images/search.png
Normal file
After Width: | Height: | Size: 449 B |
BIN
view/molistar/modules/packCenter/images/title_bg.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
view/molistar/modules/packCenter/images/travel/back.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
view/molistar/modules/packCenter/images/travel/backB.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
78
view/molistar/modules/packCenter/index.html
Normal 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>
|
198
view/molistar/modules/packCenter/js/givePack.js
Normal 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;
|
||||
}
|
307
view/molistar/modules/packCenter/js/index.js
Normal 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();
|
||||
}
|
||||
});
|
197
view/molistar/modules/packCenter/js/myRecord.js
Normal 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~");
|
||||
}
|
||||
}
|
||||
});
|
31
view/molistar/modules/packCenter/local/ar.js
Normal 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. تعليمات أخرى: للمنصة الحق النهائي في تفسير هذا النشاط.',
|
||||
}
|
||||
}
|
31
view/molistar/modules/packCenter/local/en.js
Normal 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.',
|
||||
}
|
||||
}
|
31
view/molistar/modules/packCenter/local/tr.js
Normal 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.',
|
||||
}
|
||||
}
|
31
view/molistar/modules/packCenter/local/zh.js
Normal 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 其他說明:平台對本次活動擁有最終解釋權。',
|
||||
}
|
||||
}
|
61
view/molistar/modules/packCenter/myRecord.html
Normal 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>
|
73
view/molistar/modules/packCenter/rule.html
Normal 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>
|