VIP页面修改

This commit is contained in:
2025-08-06 11:30:32 +08:00
parent 226b7d5855
commit 21617edd46
74 changed files with 191 additions and 139 deletions

View File

@@ -1,7 +1,7 @@
html, html,
body { body {
width: 100%; width: 100%;
background: #150C00; background: #231800;
} }
.back { .back {
@@ -29,21 +29,23 @@ body {
background: url(../images/bg.png) no-repeat; background: url(../images/bg.png) no-repeat;
background-size: cover; background-size: cover;
width: 100%; width: 100%;
height: 8rem; height: 10.4rem;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
background-color: #231800;
} }
.header .swiper { .header .swiper {
padding-top: 2.9333333333rem; padding-top: 2.2666666667rem;
} }
.header .swiper-slide { .header .swiper-slide {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
} }
.header .swiper-slide-next .img_card, .header .swiper-slide-next .img_card,
.header .swiper-slide-prev .img_card { .header .swiper-slide-prev .img_card {
@@ -52,42 +54,53 @@ body {
} }
.header .swiper-slide-next .img_card img, .header .swiper-slide-next .img_card img,
.header .swiper-slide-prev .img_card img { .header .swiper-slide-prev .img_card img {
height: 3.3066666667rem; height: 5.9466666667rem;
}
.header .swiper-slide-next .img_card .icon,
.header .swiper-slide-prev .img_card .icon {
width: 4rem;
height: 4rem;
} }
.header .img_card { .header .img_card {
width: 8.5333333333rem; width: 7.4133333333rem;
height: 3.6266666667rem; height: 6.7466666667rem;
position: relative; position: relative;
} }
.header .img_card .icon { .header .img_card .icon {
width: 3.4666666667rem; width: 4.6933333333rem;
height: 3.4666666667rem; height: 4.6933333333rem;
position: absolute; position: absolute;
right: 0.2666666667rem; left: 50%;
top: -0.4rem; top: 45%;
transform: translate(-50%, -50%);
} }
.header .img_card .remainSeconds { .header .remainSeconds {
position: absolute; margin-top: 0.1066666667rem;
bottom: 0.8rem;
left: 0.4rem;
} }
.header .img_card .remainSeconds p { .header .remainSeconds p {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 0.32rem; font-size: 0.32rem;
color: #4D143A; color: #371300;
text-align: left; line-height: 0.4533333333rem;
text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
} }
.content { .content {
margin-top: 8rem; margin-top: 10.4rem;
}
.content .permission {
background: url(../images/permission_bg.png) no-repeat;
background-size: cover;
background-color: #231800;
} }
.content .permission .top { .content .permission .top {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: 1.1733333333rem;
} }
.content .permission .top img { .content .permission .top img {
width: 1.1466666667rem; width: 1.1466666667rem;
@@ -106,16 +119,17 @@ body {
} }
.content .permission .box_warp { .content .permission .box_warp {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);
grid-gap: 0.32rem; grid-gap: 0.16rem;
grid-template-rows: auto; grid-template-rows: auto;
padding: 0 0.4533333333rem; padding: 0 0.4rem;
} }
.content .permission .box_warp .content_box { .content .permission .box_warp .content_box {
background: linear-gradient(180deg, #402600 6%, #060300 96%); background-image: url("../images/content_bg.png");
border: 1px solid; background-size: 100% 100%;
border-image: linear-gradient(136deg, rgb(255, 202, 77), rgb(255, 255, 255), rgb(134, 94, 0)) 1 1; width: 2.96rem;
border-radius: 0.4266666667rem; height: 3.4666666667rem;
margin-top: 0.0533333333rem;
} }
.content .permission .box_warp .content_box p { .content .permission .box_warp .content_box p {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
@@ -125,7 +139,7 @@ body {
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
padding-bottom: 0.3466666667rem; margin-top: 0.32rem;
} }
.content .exclusive_discounts { .content .exclusive_discounts {
margin-top: 0.64rem; margin-top: 0.64rem;
@@ -244,7 +258,6 @@ body {
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
padding: 0 0.4266666667rem; padding: 0 0.4266666667rem;
opacity: 0.6;
} }
.bottom_renew { .bottom_renew {
@@ -254,7 +267,7 @@ body {
right: 0; right: 0;
z-index: 990; z-index: 990;
padding: 0 0.4266666667rem 0.6933333333rem; padding: 0 0.4266666667rem 0.6933333333rem;
background: #150C00; background: #231800;
} }
.bottom_renew .renew_bg { .bottom_renew .renew_bg {
position: relative; position: relative;
@@ -285,7 +298,7 @@ body {
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-left: 0.1066666667rem; margin: 0 0.1066666667rem;
} }
.bottom_renew .wrap .renew_btn { .bottom_renew .wrap .renew_btn {
background: url(../images/renew_btn.png) no-repeat; background: url(../images/renew_btn.png) no-repeat;
@@ -388,7 +401,8 @@ body {
margin: 1.12rem 0.4rem 0; margin: 1.12rem 0.4rem 0;
} }
.custom-dialog, .shop-dialog { .custom-dialog,
.shop-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@@ -403,11 +417,13 @@ body {
opacity: 0; opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease;
} }
.custom-dialog.visible, .shop-dialog.visible { .custom-dialog.visible,
.shop-dialog.visible {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.custom-dialog .dialog-content, .shop-dialog .dialog-content { .custom-dialog .dialog-content,
.shop-dialog .dialog-content {
background: #FFFFFF; background: #FFFFFF;
border-radius: 0.2133333333rem; border-radius: 0.2133333333rem;
width: 6.5333333333rem; width: 6.5333333333rem;
@@ -416,12 +432,14 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.custom-dialog .dialog-header, .shop-dialog .dialog-header { .custom-dialog .dialog-header,
.shop-dialog .dialog-header {
margin-bottom: 0.2133333333rem; margin-bottom: 0.2133333333rem;
text-align: center; text-align: center;
margin-top: 0.2666666667rem; margin-top: 0.2666666667rem;
} }
.custom-dialog .dialog-header .dialog-title, .shop-dialog .dialog-header .dialog-title { .custom-dialog .dialog-header .dialog-title,
.shop-dialog .dialog-header .dialog-title {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 0.3733333333rem; font-size: 0.3733333333rem;
@@ -430,12 +448,14 @@ body {
text-transform: none; text-transform: none;
line-height: 0.5333333333rem; line-height: 0.5333333333rem;
} }
.custom-dialog .dialog-footer, .shop-dialog .dialog-footer { .custom-dialog .dialog-footer,
.shop-dialog .dialog-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 0.6666666667rem; margin-top: 0.6666666667rem;
} }
.custom-dialog .dialog-footer .dialog-btn, .shop-dialog .dialog-footer .dialog-btn { .custom-dialog .dialog-footer .dialog-btn,
.shop-dialog .dialog-footer .dialog-btn {
background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
border: none; border: none;
border-radius: 0.4266666667rem; border-radius: 0.4266666667rem;
@@ -451,21 +471,16 @@ body {
transition: background 0.3s ease; transition: background 0.3s ease;
width: 2.9333333333rem; width: 2.9333333333rem;
} }
.custom-dialog .dialog-footer .dialog-btn:hover, .shop-dialog .dialog-footer .dialog-btn:hover { .custom-dialog .dialog-footer .dialog-btn:hover,
.shop-dialog .dialog-footer .dialog-btn:hover {
background: linear-gradient(270deg, #FCC074 0%, #E29030 100%); background: linear-gradient(270deg, #FCC074 0%, #E29030 100%);
} }
.custom-dialog .dialog-footer .dialog-cancel, .shop-dialog .dialog-footer .dialog-cancel { .custom-dialog .dialog-footer .dialog-cancel,
.shop-dialog .dialog-footer .dialog-cancel {
background: #E0E0E0; background: #E0E0E0;
color: #333333; color: #333333;
} }
.custom-dialog .dialog-footer .dialog-cancel:hover, .shop-dialog .dialog-footer .dialog-cancel:hover { .custom-dialog .dialog-footer .dialog-cancel:hover,
.shop-dialog .dialog-footer .dialog-cancel:hover {
background: #BDBDBD; background: #BDBDBD;
}
.img_bg {
background: url(../images/img_bg.png);
background-size: 100% 100%;
width: 100%;
height: 22.1333333333rem;
margin-bottom: 0.6666666667rem;
} }

View File

@@ -5,7 +5,7 @@
html, html,
body { body {
width: 100%; width: 100%;
background: #150C00; background: #231800;
// padding: px2rem(26); // padding: px2rem(26);
} }
@@ -33,19 +33,18 @@ body {
.header { .header {
background: url(../images/bg.png) no-repeat; background: url(../images/bg.png) no-repeat;
// background-size: 100% 100%;
background-size: cover; background-size: cover;
width: 100%; width: 100%;
height: px2rem(600); height: px2rem(780);
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
background-color: #231800;
.swiper { .swiper {
padding-top: px2rem(220); padding-top: px2rem(170);
} }
.swiper-slide { .swiper-slide {
@@ -53,9 +52,9 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
} }
.swiper-slide-active {}
.swiper-slide-next, .swiper-slide-next,
.swiper-slide-prev { .swiper-slide-prev {
@@ -65,52 +64,62 @@ body {
align-items: center; align-items: center;
img { img {
height: px2rem(248); height: px2rem(446);
} }
.icon {
width: px2rem(300);
height: px2rem(300);
}
} }
} }
.img_card { .img_card {
width: px2rem(640); width: px2rem(556);
height: px2rem(272); height: px2rem(506);
position: relative; position: relative;
.icon { .icon {
width: px2rem(260); width: px2rem(352);
height: px2rem(260); height: px2rem(352);
position: absolute; position: absolute;
right: px2rem(20); left: 50%;
top: px2rem(-30); top: 45%;
transform: translate(-50%, -50%);
} }
.remainSeconds {
position: absolute;
bottom: px2rem(60);
left: px2rem(30);
p { }
font-family: PingFang SC, PingFang SC;
font-weight: 500; .remainSeconds {
font-size: px2rem(24); margin-top: px2rem(8);
color: #4D143A;
text-align: left; p {
font-style: normal; font-family: PingFang SC, PingFang SC;
text-transform: none; font-weight: 500;
} font-size: px2rem(24);
color: #371300;
line-height: px2rem(34);
text-align: center;
font-style: normal;
text-transform: none;
} }
} }
} }
.content { .content {
margin-top: px2rem(600); margin-top: px2rem(780);
.permission { .permission {
background: url(../images/permission_bg.png) no-repeat;
background-size: cover;
background-color: #231800;
.top { .top {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: px2rem(88);
img { img {
width: px2rem(86); width: px2rem(86);
height: px2rem(32); height: px2rem(32);
@@ -131,20 +140,17 @@ body {
.box_warp { .box_warp {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);
grid-gap: px2rem(24); grid-gap: px2rem(12);
grid-template-rows: auto; grid-template-rows: auto;
padding: 0 px2rem(34); padding: 0 px2rem(30);
.content_box { .content_box {
// width: px2rem(332); background-image: url('../images/content_bg.png');
// height: px2rem(240); background-size: 100% 100%;
background: linear-gradient(180deg, #402600 6%, #060300 96%); width: px2rem(222);
border: 1px solid; height: px2rem(260);
border-image: linear-gradient(136deg, rgba(255, 201.51765704154968, 76.72566533088684, 1), rgba(255, 255, 255, 1), rgba(133.57143580913544, 93.50000962615013, 0, 1)) 1 1; margin-top: px2rem(4);
border-radius: px2rem(32);
// flex: 1;
p { p {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
@@ -154,7 +160,8 @@ body {
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
padding-bottom: px2rem(26); // padding-bottom: px2rem(26);
margin-top: px2rem(24);
} }
} }
} }
@@ -293,7 +300,6 @@ body {
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
padding: 0 px2rem(32); padding: 0 px2rem(32);
opacity: 0.6;
} }
} }
} }
@@ -306,7 +312,7 @@ body {
right: 0; right: 0;
z-index: 990; z-index: 990;
padding: 0 px2rem(32) px2rem(52); padding: 0 px2rem(32) px2rem(52);
background: #150C00; background: #231800;
.renew_bg { .renew_bg {
position: relative; position: relative;
@@ -339,7 +345,7 @@ body {
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-left: px2rem(8); margin: 0 px2rem(8);
} }
} }
@@ -455,7 +461,8 @@ body {
} }
// 自定义对话框样式 // 自定义对话框样式
.custom-dialog,.shop-dialog { .custom-dialog,
.shop-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@@ -493,6 +500,7 @@ body {
margin-bottom: px2rem(16); margin-bottom: px2rem(16);
text-align: center; text-align: center;
margin-top: px2rem(20); margin-top: px2rem(20);
.dialog-title { .dialog-title {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
@@ -525,6 +533,7 @@ body {
cursor: pointer; cursor: pointer;
transition: background 0.3s ease; transition: background 0.3s ease;
width: px2rem(220); width: px2rem(220);
&:hover { &:hover {
background: linear-gradient(270deg, #FCC074 0%, #E29030 100%); background: linear-gradient(270deg, #FCC074 0%, #E29030 100%);
} }
@@ -539,13 +548,4 @@ body {
} }
} }
} }
}
.img_bg{
background: url(../images/img_bg.png);
background-size: 100% 100%;
width: 100%;
height: px2rem(1660);
margin-bottom: px2rem(50);
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -16,10 +16,7 @@
<img src="./images/travel/back.png" alt="" /> <img src="./images/travel/back.png" alt="" />
<p class="titles VIP_Center">vip中心</p> <p class="titles VIP_Center">vip中心</p>
</div> </div>
<div class="header">
<div class="img_bg"></div>
<!-- <div class="header">
<div class="swiper"> <div class="swiper">
<div class="swiper-wrapper"></div> <div class="swiper-wrapper"></div>
</div> </div>
@@ -32,6 +29,10 @@
<img src="./images/right.png" alt="" /> <img src="./images/right.png" alt="" />
</div> </div>
<div class="box_warp"> <div class="box_warp">
<!-- <div class="content_box">
<img src="./images/vip1_headimg.png.png" alt="">
<p>Exclusive headwear</p>
</div> -->
</div> </div>
</div> </div>
@@ -40,19 +41,19 @@
<img src="./images/left.png" alt="" /> <img src="./images/left.png" alt="" />
<div class="title_name"> <div class="title_name">
<span class="Exclusive_Privileges">Exclusive Privileges</span> <span class="Exclusive_Privileges">Exclusive Privileges</span>
<p class="num">5/5</p> <p class="num">19/19</p>
</div> </div>
<img src="./images/right.png" alt="" /> <img src="./images/right.png" alt="" />
</div> </div>
<div class="box_warp"></div> <div class="box_warp"></div>
</div> </div>
</div> --> </div>
<!-- 弹窗 --> <!-- 弹窗 -->
<!-- <div class="selectAccount"> <div class="selectAccount">
<div class="selectAccount_in"> <div class="selectAccount_in">
<div class="name"> <div class="name">
Privileges <span>Privileges</span>
<img src="./images/travel/back.png" alt="" /> <img src="./images/travel/back.png" alt="" />
</div> </div>
<div class="descPic"> <div class="descPic">
@@ -60,9 +61,9 @@
</div> </div>
<div class="authIntro"></div> <div class="authIntro"></div>
</div> </div>
</div> --> </div>
<!-- 续费按钮 --> <!-- 续费按钮 -->
<!-- <div class="bottom_renew"> <div class="bottom_renew">
<img src="./images/renew.png" alt="" class="renew_bg" /> <img src="./images/renew.png" alt="" class="renew_bg" />
<div class="wrap"> <div class="wrap">
<div class="left"> <div class="left">
@@ -72,9 +73,9 @@
<div class="renew_btn Renew">Renew</div> <div class="renew_btn Renew">Renew</div>
</div> </div>
<div class="wrap_txt">VIP7 is only through activity</div> <div class="wrap_txt">VIP7 is only through activity</div>
</div> --> </div>
<!-- 购买弹窗 --> <!-- 购买弹窗 -->
<!-- <div class="payPopup"> <div class="payPopup">
<div class="payPopup_warp"> <div class="payPopup_warp">
<div class="title Pay">pay</div> <div class="title Pay">pay</div>
<div class="buyAmount"> <div class="buyAmount">
@@ -83,9 +84,9 @@
</div> </div>
<div class="pay_btn Confirm_Purchase">Confirm payment</div> <div class="pay_btn Confirm_Purchase">Confirm payment</div>
</div> </div>
</div> --> </div>
<!-- 自定义对话框 --> <!-- 自定义对话框 -->
<!-- <div class="custom-dialog"> <div class="custom-dialog">
<div class="dialog-content"> <div class="dialog-content">
<div class="dialog-header"> <div class="dialog-header">
<span class="dialog-title">Custom Dialog</span> <span class="dialog-title">Custom Dialog</span>
@@ -95,10 +96,10 @@
<button class="dialog-btn dialog-confirm Confirm">Confirm</button> <button class="dialog-btn dialog-confirm Confirm">Confirm</button>
</div> </div>
</div> </div>
</div> --> </div>
<!-- 自定义对话框 --> <!-- 自定义对话框 -->
<!-- <div class="shop-dialog"> <div class="shop-dialog">
<div class="dialog-content"> <div class="dialog-content">
<div class="dialog-header"> <div class="dialog-header">
<span class="dialog-title">Custom Dialog</span> <span class="dialog-title">Custom Dialog</span>
@@ -108,7 +109,7 @@
<button class="dialog-btn dialog-confirm Confirm">Confirm</button> <button class="dialog-btn dialog-confirm Confirm">Confirm</button>
</div> </div>
</div> </div>
</div> --> </div>
</body> </body>
</html> </html>
@@ -123,6 +124,7 @@
<script src="./local/zh.js"></script> <script src="./local/zh.js"></script>
<script src="./local/ar.js"></script> <script src="./local/ar.js"></script>
<script src="./local/tr.js"></script> <script src="./local/tr.js"></script>
<script src="./local/br.js"></script>
<script src="../../common/local/langHandler.js"></script> <script src="../../common/local/langHandler.js"></script>
<script src="../../common/js/svga.min.js"></script> <script src="../../common/js/svga.min.js"></script>
<script src="./js/index.js?v=1.0"></script> <script src="./js/index.js?v=1.0"></script>

View File

@@ -52,7 +52,7 @@ $(function () {
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言 fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
langReplace = window.lang.replace; langReplace = window.lang.replace;
localLang = window.lang; localLang = window.lang;
// renderImgOption(); renderImgOption();
// swiperFun() // swiperFun()
translateFun(); translateFun();
}, 100) }, 100)
@@ -97,10 +97,10 @@ function renderImgOption() {
<div class="img_card"> <div class="img_card">
<img src="${vipOption[index].img}" alt=""> <img src="${vipOption[index].img}" alt="">
<img src="${item.vipIcon}" alt="" class="icon"> <img src="${item.vipIcon}" alt="" class="icon">
<div class="remainSeconds"> </div>
<div class="remainSeconds">
<p>${item.remainSeconds ? langReplace(localLang.demoModule.Due_on)+':'+ dueDate : langReplace(localLang.demoModule.Not_obtained)}</p> <p>${item.remainSeconds ? langReplace(localLang.demoModule.Due_on)+':'+ dueDate : langReplace(localLang.demoModule.Not_obtained)}</p>
</div> </div>
</div>
</div> </div>
`; `;
swiperWrapper.append(slideHtml); swiperWrapper.append(slideHtml);
@@ -121,7 +121,7 @@ function renderImgOption() {
function swiperFun() { function swiperFun() {
mySwiper = new Swiper('.swiper', { mySwiper = new Swiper('.swiper', {
slidesPerView: 'auto', // 自动计算每页显示的幻灯片数量 slidesPerView: 'auto', // 自动计算每页显示的幻灯片数量
spaceBetween: -40, // 幻灯片之间的间距(负值表示重叠) spaceBetween: -90, // 幻灯片之间的间距(负值表示重叠)
centeredSlides: true, // 中心化幻灯片 centeredSlides: true, // 中心化幻灯片
on: { on: {
slideChange: function () { slideChange: function () {
@@ -152,9 +152,10 @@ function renderPermission(actIndex) {
$('.permission .box_warp').append(str); $('.permission .box_warp').append(str);
}) })
// 专有权列表渲染 // 专有权列表渲染
$('.exclusive_discounts .title_name .num').text(`(${vipInfos[actIndex].ownAuthTypes.length}/${vipAuthInfos.length})`) // $('.exclusive_discounts .title_name .num').text(`(${vipInfos[actIndex].ownAuthTypes.length}/${vipAuthInfos.length})`)
$('.exclusive_discounts .box_warp').empty() $('.exclusive_discounts .box_warp').empty()
let actIndexNum = vipAuthInfos.length
vipAuthInfos.forEach((item, index) => { vipAuthInfos.forEach((item, index) => {
var str = ` var str = `
<div class="content_box" obj='${JSON.stringify(item)}'> <div class="content_box" obj='${JSON.stringify(item)}'>
@@ -165,13 +166,16 @@ function renderPermission(actIndex) {
var $contentBox = $(str); var $contentBox = $(str);
if (!vipInfos[actIndex].ownAuthTypes.includes(item.authType)) { if (!vipInfos[actIndex].ownAuthTypes.includes(item.authType)) {
$contentBox.addClass('noactive') $contentBox.addClass('noactive')
actIndexNum -= 1;
} }
$('.exclusive_discounts .title_name .num').text(`(${actIndexNum}/${vipAuthInfos.length})`)
$('.exclusive_discounts .box_warp').append($contentBox); $('.exclusive_discounts .box_warp').append($contentBox);
}) })
// 购买弹窗 // 购买弹窗
if (vipInfos[actIndex].buyAmount != 0) { if (vipInfos[actIndex].buyAmount != 0) {
$('.payPopup .payPopup_warp .buyAmount .num').text(vipInfos[actIndex].buyAmount) $('.payPopup .payPopup_warp .buyAmount .num').text(vipInfos[actIndex].buyAmount)
$('.bottom_renew .wrap .left .buyAmount').text(`${vipInfos[actIndex].buyAmount}/30`) $('.bottom_renew .wrap .left .buyAmount').text(`${vipInfos[actIndex].buyAmount} / 30${langReplace(localLang.demoModule.Days)}`)
$('.payPopup .payPopup_warp .pay_btn').attr('vipLevel', vipInfos[actIndex].vipLevel) $('.payPopup .payPopup_warp .pay_btn').attr('vipLevel', vipInfos[actIndex].vipLevel)
$('.bottom_renew .wrap').show() $('.bottom_renew .wrap').show()
$('.bottom_renew .wrap_txt').hide() $('.bottom_renew .wrap_txt').hide()
@@ -189,10 +193,9 @@ $('.payPopup .payPopup_warp .pay_btn').click(function () {
networkRequest({ networkRequest({
type: "post", type: "post",
url: urlPrefix + "/vip/openWithDiamond", url: urlPrefix + "/vip/openWithDiamond",
contentType: 'application/json;charset=UTF-8',
data: { data: {
// roomUid:pubInfo.uid, roomUid:pubInfo.uid,
roomUid:3203, // roomUid:3203,
vipLevel vipLevel
}, },
success: function (res) { success: function (res) {
@@ -243,6 +246,7 @@ $('.exclusive_discounts .box_warp').on('click', '.content_box', function () {
let obj = JSON.parse($(this).attr("obj")) let obj = JSON.parse($(this).attr("obj"))
$('.selectAccount .selectAccount_in .descPic img').attr('src', obj.descPic) $('.selectAccount .selectAccount_in .descPic img').attr('src', obj.descPic)
$('.selectAccount .selectAccount_in .authIntro').text(obj.authIntro) $('.selectAccount .selectAccount_in .authIntro').text(obj.authIntro)
$('.selectAccount .selectAccount_in .name span').text(obj.authName)
$('.selectAccount').show() $('.selectAccount').show()
}) })
// 关闭详情弹窗 // 关闭详情弹窗
@@ -306,63 +310,65 @@ var vipIdentification = [
[ [
{ img: './images/vip1_headimg.png', name: 'Only_Headdress' }, { img: './images/vip1_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip1_identity.png', name: 'Only_Nameplate' }, { img: './images/vip1_identity.png', name: 'Only_Nameplate' },
// { img: './images/vip1_card.png', name: 'Room_Card' },
], ],
[ [
{ img: './images/vip2_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip2_identity.png', name: 'Only_Nameplate' }, { img: './images/vip2_identity.png', name: 'Only_Nameplate' },
{ img: './images/vip2_card.png', name: 'Room_Card' }, { img: './images/vip2_card.png', name: 'Room_Card' },
{ img: './images/vip2_headimg.png', name: 'Only_Headdress' },
], ],
[ [
{ img: './images/vip3_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip3_identity.png', name: 'Only_Nameplate' }, { img: './images/vip3_identity.png', name: 'Only_Nameplate' },
{ img: './images/vip3_card.png', name: 'Room_Card' }, { img: './images/vip3_card.png', name: 'Room_Card' },
{ img: './images/vip3_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip3_txk.png', name: 'Mic_Effect' }, { img: './images/vip3_txk.png', name: 'Mic_Effect' },
], ],
[ [
{ img: './images/vip4_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip4_identity.png', name: 'Only_Nameplate' }, { img: './images/vip4_identity.png', name: 'Only_Nameplate' },
{ img: './images/vip4_card.png', name: 'Room_Card' }, { img: './images/vip4_card.png', name: 'Room_Card' },
{ img: './images/vip4_jctx.png', name: 'Entry_Animation' },
{ img: './images/vip4_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip4_txk.png', name: 'Mic_Effect' }, { img: './images/vip4_txk.png', name: 'Mic_Effect' },
{ img: './images/vip4_qp.png', name: 'Bubble_Effect' }, { img: './images/vip4_qp.png', name: 'Bubble_Effect' },
], ],
[ [
{ img: './images/vip5_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip5_identity.png', name: 'Only_Nameplate' }, { img: './images/vip5_identity.png', name: 'Only_Nameplate' },
{ img: './images/vip5_card.png', name: 'Room_Card' }, { img: './images/vip5_card.png', name: 'Room_Card' },
{ img: './images/vip5_jctx.png', name: 'Entry_Animation' },
{ img: './images/vip5_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip5_txk.png', name: 'Mic_Effect' }, { img: './images/vip5_txk.png', name: 'Mic_Effect' },
{ img: './images/vip5_qp.png', name: 'Bubble_Effect' }, { img: './images/vip5_qp.png', name: 'Bubble_Effect' },
{ img: './images/vip5_jctx.png', name: 'Entry_Animation' },
], ],
[ [
{ img: './images/vip6_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip6_identity.png', name: 'Only_Nameplate' }, { img: './images/vip6_identity.png', name: 'Only_Nameplate' },
{ img: './images/vip6_card.png', name: 'Room_Card' }, { img: './images/vip6_card.png', name: 'Room_Card' },
{ img: './images/vip6_jctx.png', name: 'Entry_Animation' },
{ img: './images/vip6_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip6_txk.png', name: 'Mic_Effect' }, { img: './images/vip6_txk.png', name: 'Mic_Effect' },
{ img: './images/vip6_qp.png', name: 'Bubble_Effect' }, { img: './images/vip6_qp.png', name: 'Bubble_Effect' },
{ img: './images/vip6_jctx.png', name: 'Entry_Animation' },
], ],
[ [
{ img: './images/vip7_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip7_identity.png', name: 'Only_Nameplate' }, { img: './images/vip7_identity.png', name: 'Only_Nameplate' },
{ img: './images/vip7_card.png', name: 'Room_Card' }, { img: './images/vip7_card.png', name: 'Room_Card' },
{ img: './images/vip7_jctx.png', name: 'Entry_Animation' },
{ img: './images/vip7_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip7_txk.png', name: 'Mic_Effect' }, { img: './images/vip7_txk.png', name: 'Mic_Effect' },
{ img: './images/vip7_qp.png', name: 'Bubble_Effect' }, { img: './images/vip7_qp.png', name: 'Bubble_Effect' },
{ img: './images/vip7_jctx.png', name: 'Entry_Animation' },
], ],
[ [
{ img: './images/vip8_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip8_identity.png', name: 'Only_Nameplate' }, { img: './images/vip8_identity.png', name: 'Only_Nameplate' },
{ img: './images/vip8_card.png', name: 'Room_Card' }, { img: './images/vip8_card.png', name: 'Room_Card' },
{ img: './images/vip8_jctx.png', name: 'Entry_Animation' },
{ img: './images/vip8_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip8_txk.png', name: 'Mic_Effect' }, { img: './images/vip8_txk.png', name: 'Mic_Effect' },
{ img: './images/vip8_qp.png', name: 'Bubble_Effect' }, { img: './images/vip8_qp.png', name: 'Bubble_Effect' },
{ img: './images/vip8_jctx.png', name: 'Entry_Animation' },
], ],
[ [
{ img: './images/vip9_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip9_identity.png', name: 'Only_Nameplate' }, { img: './images/vip9_identity.png', name: 'Only_Nameplate' },
{ img: './images/vip9_card.png', name: 'Room_Card' }, { img: './images/vip9_card.png', name: 'Room_Card' },
{ img: './images/vip9_jctx.png', name: 'Entry_Animation' },
{ img: './images/vip9_headimg.png', name: 'Only_Headdress' },
{ img: './images/vip9_txk.png', name: 'Mic_Effect' }, { img: './images/vip9_txk.png', name: 'Mic_Effect' },
{ img: './images/vip9_qp.png', name: 'Bubble_Effect' }, { img: './images/vip9_qp.png', name: 'Bubble_Effect' },
{ img: './images/vip9_jctx.png', name: 'Entry_Animation' },
], ],
] ]

View File

@@ -22,6 +22,7 @@ langAr = {
}, },
Confirm_Purchase:'تأكيد الشراء', Confirm_Purchase:'تأكيد الشراء',
VIP_Center:'مركز كبار الشخصيات', VIP_Center:'مركز كبار الشخصيات',
Days:'أيام',
} }

View File

@@ -0,0 +1,25 @@
langBr = {
demoModule: {
Only_Headdress: 'Apenas Adorno de Cabeça',
Only_Nameplate: 'Apenas Placa de Identificação',
Room_Card: 'Cartão da Sala',
Mic_Effect: 'Efeito de Microfone',
Bubble_Effect: 'Efeito de Bolha',
Entry_Animation: 'Animação de Entrada',
Renew: 'Renovar',
Pay: 'Pagar',
Cancel: 'Cancelar',
Confirm: 'Confirmar',
Exclusive_Privileges: 'Privilégios Exclusivos',
Identification: 'Identificação',
Not_obtained: 'VIP não obtido',
Due_on: 'Vence em',
is_activity: 'disponível apenas através de atividade',
You_currently: function(num1, num2) {
return `Você está atualmente no nível ${num1}, deseja realmente adquirir o nível superior ${num2}?`
},
Confirm_Purchase: 'Confirmar Compra',
VIP_Center: 'Central VIP',
Days: 'Dias',
},
}

View File

@@ -20,6 +20,7 @@ langEn = {
}, },
Confirm_Purchase:'Confirm Purchase', Confirm_Purchase:'Confirm Purchase',
VIP_Center:'VIP Center', VIP_Center:'VIP Center',
Days:'Days',
}, },
} }

View File

@@ -20,6 +20,7 @@ langTr = {
}, },
Confirm_Purchase:'Satın Alımı Onayla', Confirm_Purchase:'Satın Alımı Onayla',
VIP_Center:'VIP Merkezi', VIP_Center:'VIP Merkezi',
Days:'Günler',
} }

View File

@@ -22,6 +22,7 @@ langZh = {
}, },
Confirm_Purchase:'確認購買', Confirm_Purchase:'確認購買',
VIP_Center:'VIP中心', VIP_Center:'VIP中心',
Days:'天數',
} }
} }