完成vip页面逻辑和展示，还差多语言
This commit is contained in:
chenruiye
@@ -30,6 +30,12 @@ body {
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.header .swiper {
|
||||
padding-top: 2.9333333333rem;
|
||||
@@ -75,6 +81,9 @@ body {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 8rem;
|
||||
}
|
||||
.content .permission .top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -118,3 +127,337 @@ body {
|
||||
text-transform: none;
|
||||
padding-bottom: 0.3466666667rem;
|
||||
}
|
||||
.content .exclusive_discounts {
|
||||
margin-top: 0.64rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.content .exclusive_discounts .top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.content .exclusive_discounts .top img {
|
||||
width: 1.1466666667rem;
|
||||
height: 0.4266666667rem;
|
||||
}
|
||||
.content .exclusive_discounts .top .title_name {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFE3AF;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin: 0 0.32rem;
|
||||
}
|
||||
.content .exclusive_discounts .top .title_name .num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
line-height: 0.1333333333rem;
|
||||
}
|
||||
.content .exclusive_discounts .box_warp {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0.32rem;
|
||||
grid-template-rows: auto;
|
||||
padding: 0 0.4533333333rem;
|
||||
}
|
||||
.content .exclusive_discounts .box_warp .content_box {
|
||||
text-align: center;
|
||||
margin-top: 0.6933333333rem;
|
||||
}
|
||||
.content .exclusive_discounts .box_warp .content_box img {
|
||||
width: 1.12rem;
|
||||
height: 1.12rem;
|
||||
}
|
||||
.content .exclusive_discounts .box_warp .content_box .name {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: 0.1066666667rem;
|
||||
}
|
||||
.content .exclusive_discounts .box_warp .noactive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.selectAccount {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
}
|
||||
.selectAccount .selectAccount_in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 8.6666666667rem;
|
||||
background: #170D00;
|
||||
border-radius: 0.5333333333rem 0.5333333333rem 0px 0px;
|
||||
}
|
||||
.selectAccount .selectAccount_in .name {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
position: relative;
|
||||
padding-top: 0.5333333333rem;
|
||||
}
|
||||
.selectAccount .selectAccount_in .name img {
|
||||
width: 0.5866666667rem;
|
||||
height: 0.5866666667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0.48rem;
|
||||
}
|
||||
.selectAccount .selectAccount_in .descPic {
|
||||
padding: 0.4266666667rem;
|
||||
}
|
||||
.selectAccount .selectAccount_in .descPic img {
|
||||
width: 100%;
|
||||
height: 4.1866666667rem;
|
||||
}
|
||||
.selectAccount .selectAccount_in .authIntro {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFE3AF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding: 0 0.4266666667rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.bottom_renew {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 990;
|
||||
padding: 0 0.4266666667rem 0.6933333333rem;
|
||||
background: #150C00;
|
||||
}
|
||||
.bottom_renew .renew_bg {
|
||||
position: relative;
|
||||
}
|
||||
.bottom_renew .wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
right: 2%;
|
||||
top: 0.0666666667rem;
|
||||
padding: 0 0.4266666667rem;
|
||||
}
|
||||
.bottom_renew .wrap .left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bottom_renew .wrap .left img {
|
||||
width: 0.5333333333rem;
|
||||
height: 0.5333333333rem;
|
||||
}
|
||||
.bottom_renew .wrap .left .buyAmount {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.4rem;
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-left: 0.1066666667rem;
|
||||
}
|
||||
.bottom_renew .wrap .renew_btn {
|
||||
background: url(../images/renew_btn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 3.8933333333rem;
|
||||
height: 1.2533333333rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0.4266666667rem;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #633000;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.bottom_renew .wrap_txt {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.4rem;
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
right: 2%;
|
||||
top: 50%;
|
||||
bottom: 0;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.payPopup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
}
|
||||
.payPopup .payPopup_warp {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 5.8666666667rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.4266666667rem 0.4266666667rem 0px 0px;
|
||||
}
|
||||
.payPopup .payPopup_warp .title {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #313131;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: 0.32rem;
|
||||
}
|
||||
.payPopup .payPopup_warp .buyAmount {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1.1466666667rem;
|
||||
}
|
||||
.payPopup .payPopup_warp .buyAmount .num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.7466666667rem;
|
||||
color: #313131;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-right: 0.1066666667rem;
|
||||
}
|
||||
.payPopup .payPopup_warp .buyAmount img {
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem;
|
||||
}
|
||||
.payPopup .payPopup_warp .pay_btn {
|
||||
background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
|
||||
border-radius: 0.4266666667rem;
|
||||
font-family: PingFang TC, PingFang TC;
|
||||
font-weight: 500;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.2666666667rem 2.6666666667rem;
|
||||
margin: 1.12rem 0.4rem 0;
|
||||
}
|
||||
|
||||
.custom-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
.custom-dialog.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.custom-dialog .dialog-content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.2133333333rem;
|
||||
width: 6.6666666667rem;
|
||||
max-width: 90%;
|
||||
padding: 0.32rem;
|
||||
box-shadow: 0 0.1066666667rem 0.2133333333rem rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.custom-dialog .dialog-header {
|
||||
margin-bottom: 0.2133333333rem;
|
||||
text-align: center;
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
.custom-dialog .dialog-header .dialog-title {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #313131;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.custom-dialog .dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.6666666667rem;
|
||||
}
|
||||
.custom-dialog .dialog-footer .dialog-btn {
|
||||
background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
|
||||
border: none;
|
||||
border-radius: 0.4266666667rem;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding: 0.16rem 0.5333333333rem;
|
||||
margin-left: 0.2133333333rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
width: 2.9333333333rem;
|
||||
}
|
||||
.custom-dialog .dialog-footer .dialog-btn:hover {
|
||||
background: linear-gradient(270deg, #FCC074 0%, #E29030 100%);
|
||||
}
|
||||
.custom-dialog .dialog-footer .dialog-cancel {
|
||||
background: #E0E0E0;
|
||||
color: #333333;
|
||||
}
|
||||
.custom-dialog .dialog-footer .dialog-cancel:hover {
|
||||
background: #BDBDBD;
|
||||
}
|
||||
@@ -37,16 +37,13 @@ body {
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: px2rem(600);
|
||||
// .swiper {
|
||||
// height: px2rem(200);
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
|
||||
// .swiper-wrapper {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
.swiper {
|
||||
padding-top: px2rem(220);
|
||||
}
|
||||
@@ -106,6 +103,8 @@ body {
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: px2rem(600);
|
||||
|
||||
.permission {
|
||||
.top {
|
||||
display: flex;
|
||||
@@ -136,6 +135,7 @@ body {
|
||||
grid-gap: px2rem(24);
|
||||
grid-template-rows: auto;
|
||||
padding: 0 px2rem(34);
|
||||
|
||||
.content_box {
|
||||
// width: px2rem(332);
|
||||
// height: px2rem(240);
|
||||
@@ -159,4 +159,383 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exclusive_discounts {
|
||||
margin-top: px2rem(48);
|
||||
padding-bottom: px2rem(300);
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: px2rem(86);
|
||||
height: px2rem(32);
|
||||
}
|
||||
|
||||
.title_name {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFE3AF;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin: 0 px2rem(24);
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
line-height: px2rem(10);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.box_warp {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: px2rem(24);
|
||||
grid-template-rows: auto;
|
||||
padding: 0 px2rem(34);
|
||||
|
||||
.content_box {
|
||||
text-align: center;
|
||||
margin-top: px2rem(52);
|
||||
|
||||
img {
|
||||
width: px2rem(84);
|
||||
height: px2rem(84);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: px2rem(8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.noactive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectAccount {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
|
||||
.selectAccount_in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: px2rem(650);
|
||||
background: #170D00;
|
||||
border-radius: px2rem(40) px2rem(40) 0px 0px;
|
||||
|
||||
.name {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
position: relative;
|
||||
padding-top: px2rem(40);
|
||||
|
||||
img {
|
||||
width: px2rem(44);
|
||||
height: px2rem(44);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
top: px2rem(36);
|
||||
}
|
||||
}
|
||||
|
||||
.descPic {
|
||||
padding: px2rem(32);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: px2rem(314);
|
||||
}
|
||||
}
|
||||
|
||||
.authIntro {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFE3AF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding: 0 px2rem(32);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_renew {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
// top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 990;
|
||||
padding: 0 px2rem(32) px2rem(52);
|
||||
background: #150C00;
|
||||
|
||||
.renew_bg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
right: 2%;
|
||||
top: px2rem(5);
|
||||
padding: 0 px2rem(32);
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: px2rem(40);
|
||||
height: px2rem(40);
|
||||
}
|
||||
|
||||
.buyAmount {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(30);
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-left: px2rem(8);
|
||||
}
|
||||
}
|
||||
|
||||
.renew_btn {
|
||||
background: url(../images/renew_btn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: px2rem(292);
|
||||
height: px2rem(94);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: px2rem(32);
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #633000;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap_txt {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(30);
|
||||
color: #FFE3AF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
right: 2%;
|
||||
top: 50%;
|
||||
bottom: 0;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.payPopup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
|
||||
.payPopup_warp {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: px2rem(440);
|
||||
background: #FFFFFF;
|
||||
border-radius: px2rem(32) px2rem(32) 0px 0px;
|
||||
|
||||
// padding:0 px2rem(30);
|
||||
.title {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #313131;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: px2rem(24);
|
||||
}
|
||||
|
||||
.buyAmount {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: px2rem(86);
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(56);
|
||||
color: #313131;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-right: px2rem(8);
|
||||
}
|
||||
|
||||
img {
|
||||
width: px2rem(62);
|
||||
height: px2rem(62);
|
||||
}
|
||||
}
|
||||
|
||||
.pay_btn {
|
||||
background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
|
||||
border-radius: px2rem(32);
|
||||
font-family: PingFang TC, PingFang TC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(32);
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(20) px2rem(200);
|
||||
margin: px2rem(84) px2rem(30) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义对话框样式
|
||||
.custom-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background: #FFFFFF;
|
||||
border-radius: px2rem(16);
|
||||
width: px2rem(500);
|
||||
max-width: 90%;
|
||||
padding: px2rem(24);
|
||||
box-shadow: 0 px2rem(8) px2rem(16) rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
margin-bottom: px2rem(16);
|
||||
text-align: center;
|
||||
margin-top: px2rem(20);
|
||||
.dialog-title {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #313131;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: px2rem(50);
|
||||
|
||||
.dialog-btn {
|
||||
background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
|
||||
border: none;
|
||||
border-radius: px2rem(32);
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: px2rem(32);
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding: px2rem(12) px2rem(40);
|
||||
margin-left: px2rem(16);
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
width: px2rem(220);
|
||||
&:hover {
|
||||
background: linear-gradient(270deg, #FCC074 0%, #E29030 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-cancel {
|
||||
background: #E0E0E0;
|
||||
color: #333333;
|
||||
|
||||
&:hover {
|
||||
background: #BDBDBD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
view/molistar/modules/vip_Center/images/conis2.png
Normal file
BIN
view/molistar/modules/vip_Center/images/conis2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
view/molistar/modules/vip_Center/images/renew.png
Normal file
BIN
view/molistar/modules/vip_Center/images/renew.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
view/molistar/modules/vip_Center/images/renew_btn.png
Normal file
BIN
view/molistar/modules/vip_Center/images/renew_btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
@@ -8,7 +8,6 @@
|
||||
<link rel="stylesheet" href="../../common/css/animate.css" />
|
||||
<link rel="stylesheet" href="./css/index.css?v=1.1" />
|
||||
<link rel="stylesheet" href="./css/swiper-bundle.min.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -19,16 +18,15 @@
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
</div>
|
||||
<div class="swiper-wrapper"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="permission">
|
||||
<div class="top">
|
||||
<img src="./images/left.png" alt="">
|
||||
<img src="./images/left.png" alt="" />
|
||||
<p class="title_name">Identification</p>
|
||||
<img src="./images/right.png" alt="">
|
||||
<img src="./images/right.png" alt="" />
|
||||
</div>
|
||||
<div class="box_warp">
|
||||
<!-- <div class="content_box">
|
||||
@@ -38,7 +36,66 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exclusive_discounts"></div>
|
||||
<div class="exclusive_discounts">
|
||||
<div class="top">
|
||||
<img src="./images/left.png" alt="" />
|
||||
<div class="title_name">
|
||||
Exclusive Privileges
|
||||
<p class="num">19/19</p>
|
||||
</div>
|
||||
<img src="./images/right.png" alt="" />
|
||||
</div>
|
||||
<div class="box_warp"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<div class="selectAccount">
|
||||
<div class="selectAccount_in">
|
||||
<div class="name">
|
||||
Privileges
|
||||
<img src="./images/travel/back.png" alt="" />
|
||||
</div>
|
||||
<div class="descPic">
|
||||
<img src="" alt="" />
|
||||
</div>
|
||||
<div class="authIntro"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 续费按钮 -->
|
||||
<div class="bottom_renew">
|
||||
<img src="./images/renew.png" alt="" class="renew_bg" />
|
||||
<div class="wrap">
|
||||
<div class="left">
|
||||
<img src="./images/conis2.png" alt="" />
|
||||
<span class="buyAmount">buyAmount</span>
|
||||
</div>
|
||||
<div class="renew_btn">Renew</div>
|
||||
</div>
|
||||
<div class="wrap_txt">VIP7 is only through activity</div>
|
||||
</div>
|
||||
<!-- 购买弹窗 -->
|
||||
<div class="payPopup">
|
||||
<div class="payPopup_warp">
|
||||
<div class="title">pay</div>
|
||||
<div class="buyAmount">
|
||||
<span class="num">35000</span>
|
||||
<img src="./images/conis.png" alt="" />
|
||||
</div>
|
||||
<div class="pay_btn">Confirm payment</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 自定义对话框 -->
|
||||
<div class="custom-dialog">
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-header">
|
||||
<span class="dialog-title">Custom Dialog</span>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button class="dialog-btn dialog-cancel">Cancel</button>
|
||||
<button class="dialog-btn dialog-confirm">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -57,4 +114,3 @@
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/index.js?v=1.0"></script>
|
||||
<script src="./js/swiper-bundle.min.js"></script>
|
||||
|
||||
|
||||
@@ -53,12 +53,13 @@ $(function () {
|
||||
langReplace = window.lang.replace;
|
||||
localLang = window.lang;
|
||||
renderImgOption();
|
||||
swiperFun()
|
||||
// swiperFun()
|
||||
}, 100)
|
||||
|
||||
})
|
||||
var vipInfos;
|
||||
var mySwiper;
|
||||
var vipAuthInfos;
|
||||
function renderImgOption() {
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
@@ -67,6 +68,7 @@ function renderImgOption() {
|
||||
|
||||
if (res.code == 200) {
|
||||
vipInfos = res.data.vipInfos
|
||||
vipAuthInfos = res.data.vipAuthInfos
|
||||
const swiperWrapper = $('.swiper-wrapper');
|
||||
swiperWrapper.empty()
|
||||
|
||||
@@ -89,34 +91,21 @@ function renderImgOption() {
|
||||
`;
|
||||
swiperWrapper.append(slideHtml);
|
||||
});
|
||||
|
||||
// 重新初始化 Swiper
|
||||
if (mySwiper) {
|
||||
mySwiper.destroy();
|
||||
}
|
||||
renderPermission(0)
|
||||
swiperFun();
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
// networkRequest({
|
||||
// type: 'get',
|
||||
// url: urlPrefix + '/user/get',
|
||||
// success(res) {
|
||||
|
||||
|
||||
// },
|
||||
// })
|
||||
}
|
||||
// 禮物輪播
|
||||
function swiperFun() {
|
||||
mySwiper = new Swiper('.swiper', {
|
||||
// direction: "vertical",
|
||||
// loop: true,
|
||||
// autoplay: {
|
||||
// delay: 3500,//
|
||||
// disableOnInteraction: false
|
||||
// }
|
||||
slidesPerView: 'auto', // 自动计算每页显示的幻灯片数量
|
||||
spaceBetween: -40, // 幻灯片之间的间距（负值表示重叠）
|
||||
centeredSlides: true, // 中心化幻灯片
|
||||
@@ -129,19 +118,137 @@ function swiperFun() {
|
||||
}
|
||||
}
|
||||
})
|
||||
// 跳转最高vip等级
|
||||
const vip = vipInfos.map((item, index) => ({ item, index }))
|
||||
.filter(({ item }) => item.remainSeconds)
|
||||
.map(({ index }) => index);
|
||||
mySwiper.slideTo(vip[vip.length - 1], 1000);
|
||||
}
|
||||
function renderPermission(index){
|
||||
$('.box_warp').empty()
|
||||
vipIdentification[index].forEach((item, index) => {
|
||||
function renderPermission(actIndex) {
|
||||
// 权益渲染
|
||||
$('.permission .box_warp').empty()
|
||||
vipIdentification[actIndex].forEach((item, index) => {
|
||||
var str = `
|
||||
<div class="content_box">
|
||||
<img src="${item.img}" alt="">
|
||||
<p>${item.name}</p>
|
||||
</div>
|
||||
`
|
||||
$('.box_warp').append(str);
|
||||
$('.permission .box_warp').append(str);
|
||||
})
|
||||
// 专有权列表渲染
|
||||
$('.exclusive_discounts .title_name .num').text(`(${vipInfos[actIndex].ownAuthTypes.length}/${vipAuthInfos.length})`)
|
||||
|
||||
$('.exclusive_discounts .box_warp').empty()
|
||||
vipAuthInfos.forEach((item, index) => {
|
||||
var str = `
|
||||
<div class="content_box" obj='${JSON.stringify(item)}'>
|
||||
<img src="${item.authIcon}" alt="">
|
||||
<p class="name">${item.authName}</p>
|
||||
</div>
|
||||
`
|
||||
var $contentBox = $(str);
|
||||
if (!vipInfos[actIndex].ownAuthTypes.includes(item.authType)) {
|
||||
$contentBox.addClass('noactive')
|
||||
}
|
||||
$('.exclusive_discounts .box_warp').append($contentBox);
|
||||
})
|
||||
// 购买弹窗
|
||||
if (vipInfos[actIndex].buyAmount != 0) {
|
||||
$('.payPopup .payPopup_warp .buyAmount .num').text(vipInfos[actIndex].buyAmount)
|
||||
$('.bottom_renew .wrap .left .buyAmount').text(`${vipInfos[actIndex].buyAmount}/30`)
|
||||
$('.payPopup .payPopup_warp .pay_btn').attr('vipLevel', vipInfos[actIndex].vipLevel)
|
||||
$('.bottom_renew .wrap').show()
|
||||
$('.bottom_renew .wrap_txt').hide()
|
||||
} else {
|
||||
$('.bottom_renew .wrap_txt').text(`${vipInfos[actIndex].vipName} is only through activity`)
|
||||
$('.bottom_renew .wrap').hide()
|
||||
$('.bottom_renew .wrap_txt').show()
|
||||
}
|
||||
}
|
||||
// 点击购买
|
||||
$('.payPopup .payPopup_warp .pay_btn').click(function () {
|
||||
let vipLevel = $(this).attr('vipLevel')
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: "post",
|
||||
url: urlPrefix + "/vip/openWithDiamond",
|
||||
contentType: 'application/json;charset=UTF-8',
|
||||
data: {
|
||||
// roomUid:pubInfo.uid,
|
||||
roomUid:3838,
|
||||
vipLevel
|
||||
},
|
||||
success: function (res) {
|
||||
$('.payPopup').hide()
|
||||
if (res.code == 200) {
|
||||
} else {
|
||||
// toastMsg(res.message);
|
||||
$('.custom-dialog .dialog-content .dialog-title').text(res.message)
|
||||
$('.custom-dialog').addClass('visible');
|
||||
}
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
error: function (res) {
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
});
|
||||
})
|
||||
// 点击对话框外部关闭对话框
|
||||
$('.custom-dialog').on('click', function (event) {
|
||||
if ($(event.target).is('.custom-dialog')) {
|
||||
$('.custom-dialog').removeClass('visible');
|
||||
}
|
||||
});
|
||||
// 确认按钮的触发事件
|
||||
$('.custom-dialog .dialog-confirm').on('click', function () {
|
||||
// 执行确认操作
|
||||
$('.custom-dialog').removeClass('visible');
|
||||
if(browser.app){
|
||||
if(browser.android){
|
||||
// window.androidJsObj.openChargePage()
|
||||
tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
|
||||
}else if(browser.ios){
|
||||
window.webkit.messageHandlers.openChargePage.postMessage(null)
|
||||
}
|
||||
}else{
|
||||
toastMsg('请在app内打开')
|
||||
}
|
||||
});
|
||||
// 取消按钮的触发事件
|
||||
$('.custom-dialog .dialog-cancel').on('click', function () {
|
||||
// 执行确认操作
|
||||
$('.custom-dialog').removeClass('visible');
|
||||
});
|
||||
|
||||
// 点击详情弹窗
|
||||
$('.exclusive_discounts .box_warp').on('click', '.content_box', function () {
|
||||
let obj = JSON.parse($(this).attr("obj"))
|
||||
$('.selectAccount .selectAccount_in .descPic img').attr('src', obj.descPic)
|
||||
$('.selectAccount .selectAccount_in .authIntro').text(obj.authIntro)
|
||||
$('.selectAccount').show()
|
||||
})
|
||||
// 关闭详情弹窗
|
||||
$('.selectAccount').click(function () {
|
||||
$('.selectAccount').hide()
|
||||
})
|
||||
$('.selectAccount .selectAccount_in .name img').click(function () {
|
||||
$('.selectAccount').hide()
|
||||
})
|
||||
// 购买弹窗
|
||||
$('.bottom_renew .wrap .renew_btn').on('click', function () {
|
||||
$('.payPopup').show()
|
||||
})
|
||||
$('.payPopup').click(function () {
|
||||
$('.payPopup').hide()
|
||||
})
|
||||
$('.payPopup .payPopup_warp').on('click', function () {
|
||||
return false;
|
||||
})
|
||||
//
|
||||
$('.selectAccount .selectAccount_in').on('click', function () {
|
||||
return false;
|
||||
})
|
||||
var vipOption = [
|
||||
{ img: './images/vip1_bg.png' },
|
||||
{ img: './images/vip2_bg.png' },
|
||||
|
||||
Reference in New Issue
Block a user