新增pc充值
This commit is contained in:
dragon
403
view/molistar/activity/act-nameplate/css/index.css
Normal file
403
view/molistar/activity/act-nameplate/css/index.css
Normal file
@@ -0,0 +1,403 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
|
||||
}
|
||||
|
||||
.max {
|
||||
width: 10rem;
|
||||
height: 40.96rem;
|
||||
background: url("../images/max.png") no-repeat;
|
||||
background-size: cover;
|
||||
font-family: 'pingfang-bold';
|
||||
}
|
||||
|
||||
.max .record {
|
||||
position: absolute;
|
||||
top: 3.52rem;
|
||||
right: 0;
|
||||
width: 1.06667rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
|
||||
.max .record img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .btn {
|
||||
position: absolute;
|
||||
top: 19.6rem;
|
||||
left: 1.68rem;
|
||||
width: 2.53333rem;
|
||||
height: 1.01333rem;
|
||||
}
|
||||
|
||||
.max .btn.basics-receive {
|
||||
left: 5.84rem;
|
||||
}
|
||||
|
||||
.max .btn.advance-send {
|
||||
top: 28.34667rem;
|
||||
}
|
||||
|
||||
.max .btn.advance-receive {
|
||||
top: 28.34667rem;
|
||||
left: 5.84rem;
|
||||
}
|
||||
|
||||
.max .btn img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .shade-mask, .max .shade-mask-delay, .max .shade-mask-new {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content, .max .shade-mask .shade-content-delay, .max .shade-mask .shade-content-new, .max .shade-mask-delay .shade-content, .max .shade-mask-delay .shade-content-delay, .max .shade-mask-delay .shade-content-new, .max .shade-mask-new .shade-content, .max .shade-mask-new .shade-content-delay, .max .shade-mask-new .shade-content-new {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 9.28rem;
|
||||
height: 8.18667rem;
|
||||
background: url("../images/select-bg.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content .top, .max .shade-mask .shade-content-delay .top, .max .shade-mask .shade-content-new .top, .max .shade-mask-delay .shade-content .top, .max .shade-mask-delay .shade-content-delay .top, .max .shade-mask-delay .shade-content-new .top, .max .shade-mask-new .shade-content .top, .max .shade-mask-new .shade-content-delay .top, .max .shade-mask-new .shade-content-new .top {
|
||||
position: absolute;
|
||||
top: -0.8rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8.81333rem;
|
||||
height: 1.14667rem;
|
||||
line-height: 1.14667rem;
|
||||
background: url("../images/top-bg.png") no-repeat 0 0/100% 100%;
|
||||
text-align: center;
|
||||
color: #8525C9;
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content ul.select-ul, .max .shade-mask .shade-content-delay ul.select-ul, .max .shade-mask .shade-content-new ul.select-ul, .max .shade-mask-delay .shade-content ul.select-ul, .max .shade-mask-delay .shade-content-delay ul.select-ul, .max .shade-mask-delay .shade-content-new ul.select-ul, .max .shade-mask-new .shade-content ul.select-ul, .max .shade-mask-new .shade-content-delay ul.select-ul, .max .shade-mask-new .shade-content-new ul.select-ul {
|
||||
white-space: nowrap;
|
||||
width: 8rem;
|
||||
max-height: 5.92rem;
|
||||
margin: 1.94667rem auto 0;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content ul.select-ul li, .max .shade-mask .shade-content-delay ul.select-ul li, .max .shade-mask .shade-content-new ul.select-ul li, .max .shade-mask-delay .shade-content ul.select-ul li, .max .shade-mask-delay .shade-content-delay ul.select-ul li, .max .shade-mask-delay .shade-content-new ul.select-ul li, .max .shade-mask-new .shade-content ul.select-ul li, .max .shade-mask-new .shade-content-delay ul.select-ul li, .max .shade-mask-new .shade-content-new ul.select-ul li {
|
||||
position: relative;
|
||||
width: 3.46667rem;
|
||||
height: 2.66667rem;
|
||||
background-color: #D575F0;
|
||||
border-radius: 0.26667rem;
|
||||
display: inline-block;
|
||||
margin: 0 0.24rem;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content ul.select-ul li p, .max .shade-mask .shade-content-delay ul.select-ul li p, .max .shade-mask .shade-content-new ul.select-ul li p, .max .shade-mask-delay .shade-content ul.select-ul li p, .max .shade-mask-delay .shade-content-delay ul.select-ul li p, .max .shade-mask-delay .shade-content-new ul.select-ul li p, .max .shade-mask-new .shade-content ul.select-ul li p, .max .shade-mask-new .shade-content-delay ul.select-ul li p, .max .shade-mask-new .shade-content-new ul.select-ul li p {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 0.45333rem;
|
||||
line-height: 0.45333rem;
|
||||
border-radius: 0.16rem 0.05333rem;
|
||||
background-color: #FF729C;
|
||||
color: white;
|
||||
font-size: 0.24rem;
|
||||
font-weight: bold;
|
||||
padding: 0.02667rem 0.21333rem;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content ul.select-ul li .nameplate, .max .shade-mask .shade-content-delay ul.select-ul li .nameplate, .max .shade-mask .shade-content-new ul.select-ul li .nameplate, .max .shade-mask-delay .shade-content ul.select-ul li .nameplate, .max .shade-mask-delay .shade-content-delay ul.select-ul li .nameplate, .max .shade-mask-delay .shade-content-new ul.select-ul li .nameplate, .max .shade-mask-new .shade-content ul.select-ul li .nameplate, .max .shade-mask-new .shade-content-delay ul.select-ul li .nameplate, .max .shade-mask-new .shade-content-new ul.select-ul li .nameplate {
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2.74667rem;
|
||||
height: 0.69333rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content ul.select-ul li .nameplate img, .max .shade-mask .shade-content-delay ul.select-ul li .nameplate img, .max .shade-mask .shade-content-new ul.select-ul li .nameplate img, .max .shade-mask-delay .shade-content ul.select-ul li .nameplate img, .max .shade-mask-delay .shade-content-delay ul.select-ul li .nameplate img, .max .shade-mask-delay .shade-content-new ul.select-ul li .nameplate img, .max .shade-mask-new .shade-content ul.select-ul li .nameplate img, .max .shade-mask-new .shade-content-delay ul.select-ul li .nameplate img, .max .shade-mask-new .shade-content-new ul.select-ul li .nameplate img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2.74667rem;
|
||||
height: 0.69333rem;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content ul.select-ul li .nameplate span, .max .shade-mask .shade-content-delay ul.select-ul li .nameplate span, .max .shade-mask .shade-content-new ul.select-ul li .nameplate span, .max .shade-mask-delay .shade-content ul.select-ul li .nameplate span, .max .shade-mask-delay .shade-content-delay ul.select-ul li .nameplate span, .max .shade-mask-delay .shade-content-new ul.select-ul li .nameplate span, .max .shade-mask-new .shade-content ul.select-ul li .nameplate span, .max .shade-mask-new .shade-content-delay ul.select-ul li .nameplate span, .max .shade-mask-new .shade-content-new ul.select-ul li .nameplate span {
|
||||
position: absolute;
|
||||
top: 0.21333rem;
|
||||
left: 1.06667rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content ul.select-ul li .delay-btn, .max .shade-mask .shade-content-delay ul.select-ul li .delay-btn, .max .shade-mask .shade-content-new ul.select-ul li .delay-btn, .max .shade-mask-delay .shade-content ul.select-ul li .delay-btn, .max .shade-mask-delay .shade-content-delay ul.select-ul li .delay-btn, .max .shade-mask-delay .shade-content-new ul.select-ul li .delay-btn, .max .shade-mask-new .shade-content ul.select-ul li .delay-btn, .max .shade-mask-new .shade-content-delay ul.select-ul li .delay-btn, .max .shade-mask-new .shade-content-new ul.select-ul li .delay-btn {
|
||||
position: absolute;
|
||||
left: -0.05333rem;
|
||||
bottom: -0.05333rem;
|
||||
width: 3.6rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content ul.select-ul li .delay-btn img, .max .shade-mask .shade-content-delay ul.select-ul li .delay-btn img, .max .shade-mask .shade-content-new ul.select-ul li .delay-btn img, .max .shade-mask-delay .shade-content ul.select-ul li .delay-btn img, .max .shade-mask-delay .shade-content-delay ul.select-ul li .delay-btn img, .max .shade-mask-delay .shade-content-new ul.select-ul li .delay-btn img, .max .shade-mask-new .shade-content ul.select-ul li .delay-btn img, .max .shade-mask-new .shade-content-delay ul.select-ul li .delay-btn img, .max .shade-mask-new .shade-content-new ul.select-ul li .delay-btn img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content .apply-btn, .max .shade-mask .shade-content-delay .apply-btn, .max .shade-mask .shade-content-new .apply-btn, .max .shade-mask-delay .shade-content .apply-btn, .max .shade-mask-delay .shade-content-delay .apply-btn, .max .shade-mask-delay .shade-content-new .apply-btn, .max .shade-mask-new .shade-content .apply-btn, .max .shade-mask-new .shade-content-delay .apply-btn, .max .shade-mask-new .shade-content-new .apply-btn {
|
||||
width: 4.90667rem;
|
||||
height: 1.2rem;
|
||||
background: url("../images/apply-new.png") no-repeat 0 0/100% 100%;
|
||||
margin: 0.64rem auto 0;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content .close, .max .shade-mask .shade-content-delay .close, .max .shade-mask .shade-content-new .close, .max .shade-mask-delay .shade-content .close, .max .shade-mask-delay .shade-content-delay .close, .max .shade-mask-delay .shade-content-new .close, .max .shade-mask-new .shade-content .close, .max .shade-mask-new .shade-content-delay .close, .max .shade-mask-new .shade-content-new .close {
|
||||
position: absolute;
|
||||
bottom: -1.33333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
}
|
||||
|
||||
.max .shade-mask .shade-content .close img, .max .shade-mask .shade-content-delay .close img, .max .shade-mask .shade-content-new .close img, .max .shade-mask-delay .shade-content .close img, .max .shade-mask-delay .shade-content-delay .close img, .max .shade-mask-delay .shade-content-new .close img, .max .shade-mask-new .shade-content .close img, .max .shade-mask-new .shade-content-delay .close img, .max .shade-mask-new .shade-content-new .close img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay {
|
||||
color: #AD0ED8;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .nameplate-style {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .nameplate-style div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 4.8rem;
|
||||
height: 1.01333rem;
|
||||
background: #D575F0;
|
||||
border-radius: 0.26667rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .nameplate-style div p {
|
||||
width: 2.74667rem;
|
||||
height: 0.68rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .nameplate-style div p img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .nameplate-style div p span {
|
||||
position: relative;
|
||||
top: -0.56rem;
|
||||
left: 0.32rem;
|
||||
color: white;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .delay-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -0.48rem;
|
||||
margin-top: 0.64rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .delay-time div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .delay-time div .decrease, .max .shade-mask-delay .shade-content-delay .delay-time div .increase {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .delay-time div p {
|
||||
width: 2.13333rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
background: #D575F0;
|
||||
border-radius: 0.4rem;
|
||||
margin: 0 0.26667rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.max .shade-mask-delay .shade-content-delay .apply-btn {
|
||||
width: 4.90667rem;
|
||||
height: 1.2rem;
|
||||
background: url("../images/confirm.png") no-repeat 0 0/100% 100%;
|
||||
margin: 0.85333rem auto 0;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new {
|
||||
height: 10.98667rem;
|
||||
background-image: url("../images/new-bg.png");
|
||||
color: #AD0ED8;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .nameplate-style {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.68rem 0 0;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .nameplate-style span {
|
||||
margin-top: 0.26667rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .nameplate-style ul.apply-new-ul {
|
||||
max-height: 3.68rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .nameplate-style ul.apply-new-ul li {
|
||||
width: 4.8rem;
|
||||
height: 1.01333rem;
|
||||
background: #D575F0;
|
||||
border-radius: 0.26667rem;
|
||||
margin-bottom: 0.13333rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 0.04rem solid transparent;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .nameplate-style ul.apply-new-ul li.active {
|
||||
border: 0.04rem solid #9842F3;
|
||||
background: #EEAFFF;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .nameplate-style ul.apply-new-ul li div {
|
||||
width: 2.74667rem;
|
||||
height: 0.68rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .nameplate-style ul.apply-new-ul li div img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .nameplate-style ul.apply-new-ul li div span.nameplate-desc {
|
||||
position: relative;
|
||||
top: -0.56rem;
|
||||
left: 0.32rem;
|
||||
color: white;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .new-nameplate-desc-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.66667rem auto;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .new-nameplate-desc-wrap input {
|
||||
width: 4.8rem;
|
||||
background: #E37CFF;
|
||||
outline: none;
|
||||
border-bottom: 0.02667rem solid #D575F0;
|
||||
caret-color: #D9B8F4;
|
||||
color: white;
|
||||
font-size: 0.34667rem;
|
||||
padding-bottom: 0.05333rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .new-nameplate-desc-wrap input::placeholder {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .delay-time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: -0.48rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .delay-time div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .delay-time div .decrease, .max .shade-mask-new .shade-content-new .delay-time div .increase {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .delay-time div p {
|
||||
width: 2.13333rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
background: #D575F0;
|
||||
border-radius: 0.4rem;
|
||||
margin: 0 0.26667rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.max .shade-mask-new .shade-content-new .apply-btn {
|
||||
width: 4.90667rem;
|
||||
height: 1.2rem;
|
||||
background: url("../images/confirm.png") no-repeat 0 0/100% 100%;
|
||||
margin: 0.61333rem auto 0;
|
||||
}
|
||||
|
||||
.max .godiamond,
|
||||
.max .gocrystal {
|
||||
position: fixed;
|
||||
width: 2.26667rem;
|
||||
height: 2.24rem;
|
||||
top: 8rem;
|
||||
right: 0.24rem;
|
||||
background: url("../images/godiamond.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.max .gocrystal {
|
||||
top: 10.66667rem;
|
||||
background: url("../images/gocrystal.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
378
view/molistar/activity/act-nameplate/css/index.scss
Normal file
378
view/molistar/activity/act-nameplate/css/index.scss
Normal file
@@ -0,0 +1,378 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-medium';
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
// @import '../../../common/css/flex.scss';
|
||||
.max {
|
||||
width: px2rem(750);
|
||||
height: px2rem(3072);
|
||||
background: url('../images/max.png') no-repeat;
|
||||
background-size: cover;
|
||||
font-family: 'pingfang-bold';
|
||||
|
||||
.record{
|
||||
position: absolute;
|
||||
top: px2rem(264);
|
||||
right: 0;
|
||||
width: px2rem(80);
|
||||
height: px2rem(180);
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
position: absolute;
|
||||
top: px2rem(1470);
|
||||
left: px2rem(126);
|
||||
width: px2rem(190);
|
||||
height: px2rem(76);
|
||||
&.basics-receive{
|
||||
left: px2rem(438);
|
||||
}
|
||||
&.advance-send{
|
||||
top: px2rem(2126);
|
||||
}
|
||||
&.advance-receive{
|
||||
top: px2rem(2126);
|
||||
left: px2rem(438);
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.shade-mask, .shade-mask-delay, .shade-mask-new{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($color: #000000, $alpha: .4);
|
||||
.shade-content, .shade-content-delay, .shade-content-new{
|
||||
position: absolute;
|
||||
// top: px2rem(180);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(696);
|
||||
height: px2rem(614, );
|
||||
background: url('../images/select-bg.png') no-repeat 0 0/100% 100%;
|
||||
// background-color: #FFF1F5;
|
||||
// border-radius: 0 0 px2rem(24) px2rem(24);
|
||||
.top{
|
||||
position: absolute;
|
||||
top: px2rem(-60);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: px2rem(661);
|
||||
height: px2rem(86);
|
||||
line-height: px2rem(86);
|
||||
background: url('../images/top-bg.png') no-repeat 0 0/100% 100%;
|
||||
text-align: center;
|
||||
color: #8525C9;
|
||||
font-size: px2rem(36);
|
||||
font-weight: bold;
|
||||
}
|
||||
ul.select-ul{
|
||||
white-space: nowrap;
|
||||
width: px2rem(600);
|
||||
max-height: px2rem(444);
|
||||
margin: px2rem(146, ) auto 0;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
li{
|
||||
position: relative;
|
||||
width: px2rem(260);
|
||||
height: px2rem(200);
|
||||
background-color: #D575F0;
|
||||
border-radius: px2rem(20);
|
||||
display: inline-block;
|
||||
margin: 0 px2rem(18, );
|
||||
p{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: px2rem(34);
|
||||
line-height: px2rem(34);
|
||||
border-radius: px2rem(12) px2rem(4);
|
||||
background-color: #FF729C;
|
||||
color: white;
|
||||
font-size: px2rem(18);
|
||||
font-weight: bold;
|
||||
padding: px2rem(2) px2rem(16);
|
||||
}
|
||||
.nameplate{
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: px2rem(206);
|
||||
height: px2rem(52);
|
||||
text-align: center;
|
||||
img{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(206);
|
||||
height: px2rem(52);
|
||||
}
|
||||
span{
|
||||
position: absolute;
|
||||
top: px2rem(16);
|
||||
left: px2rem(80);
|
||||
color: white;
|
||||
}
|
||||
|
||||
}
|
||||
.delay-btn{
|
||||
position: absolute;
|
||||
left: px2rem(-4, );
|
||||
bottom: px2rem(-4, );
|
||||
width: px2rem(270);
|
||||
height: px2rem(60);
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.apply-btn{
|
||||
width: px2rem(368);
|
||||
height: px2rem(90);
|
||||
background: url('../images/apply-new.png') no-repeat 0 0/100% 100%;
|
||||
margin: px2rem(48) auto 0;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
bottom: px2rem(-100, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shade-mask-delay{
|
||||
.shade-content-delay{
|
||||
color: #AD0ED8;
|
||||
font-size: px2rem(30);
|
||||
.nameplate-style{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: px2rem(150) 0 0;
|
||||
|
||||
div{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: px2rem(360);
|
||||
height: px2rem(76);
|
||||
background: #D575F0;
|
||||
border-radius: px2rem(20);
|
||||
position: relative;
|
||||
p{
|
||||
width: px2rem(206);
|
||||
height: px2rem(51);
|
||||
text-align: center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
span{
|
||||
position: relative;
|
||||
top: px2rem(-42);
|
||||
left: px2rem(24);
|
||||
color: white;
|
||||
font-size: px2rem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.delay-time{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: px2rem(-36, );
|
||||
margin-top: px2rem(48, );
|
||||
div{
|
||||
display: flex;
|
||||
.decrease, .increase{
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
}
|
||||
p{
|
||||
width: px2rem(160);
|
||||
height: px2rem(60);
|
||||
line-height: px2rem(60);
|
||||
background: #D575F0;
|
||||
border-radius: px2rem(30);
|
||||
margin: 0 px2rem(20);
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: px2rem(36, );
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.apply-btn{
|
||||
width: px2rem(368);
|
||||
height: px2rem(90);
|
||||
background: url('../images/confirm.png') no-repeat 0 0/100% 100%;
|
||||
margin: px2rem(64) auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shade-mask-new{
|
||||
.shade-content-new{
|
||||
height: px2rem(824, );
|
||||
background-image: url('../images/new-bg.png');
|
||||
color: #AD0ED8;
|
||||
font-size: px2rem(30);
|
||||
.nameplate-style{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// padding: 0 px2rem(40);
|
||||
margin: px2rem(126) 0 0;
|
||||
span{
|
||||
margin-top: px2rem(20);
|
||||
}
|
||||
ul.apply-new-ul{
|
||||
max-height: px2rem(276);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
li{
|
||||
width: px2rem(360);
|
||||
height: px2rem(76);
|
||||
background: #D575F0;
|
||||
border-radius: px2rem(20);
|
||||
margin-bottom: px2rem(10);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: px2rem(3) solid transparent;
|
||||
&.active{
|
||||
border: px2rem(3) solid #9842F3;
|
||||
background: #EEAFFF;
|
||||
}
|
||||
div{
|
||||
width: px2rem(206);
|
||||
height: px2rem(51);
|
||||
text-align: center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
span.nameplate-desc{
|
||||
position: relative;
|
||||
top: px2rem(-42);
|
||||
left: px2rem(24);
|
||||
color: white;
|
||||
font-size: px2rem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.new-nameplate-desc-wrap{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: px2rem(50) auto;
|
||||
input{
|
||||
width: px2rem(360);
|
||||
background: #E37CFF;
|
||||
outline: none;
|
||||
border-bottom: px2rem(2) solid #D575F0;
|
||||
caret-color: #D9B8F4;
|
||||
color: white;
|
||||
font-size: px2rem(26, );
|
||||
padding-bottom: px2rem(4, );
|
||||
&::placeholder{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.delay-time{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: px2rem(-36, );
|
||||
div{
|
||||
display: flex;
|
||||
.decrease, .increase{
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
}
|
||||
p{
|
||||
width: px2rem(160);
|
||||
height: px2rem(60);
|
||||
line-height: px2rem(60);
|
||||
background: #D575F0;
|
||||
border-radius: px2rem(30);
|
||||
margin: 0 px2rem(20);
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: px2rem(36, );
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.apply-btn{
|
||||
width: px2rem(368);
|
||||
height: px2rem(90);
|
||||
background: url('../images/confirm.png') no-repeat 0 0/100% 100%;
|
||||
margin: px2rem(46) auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.godiamond,
|
||||
.gocrystal {
|
||||
position: fixed;
|
||||
width: px2rem(170);
|
||||
height: px2rem(168);
|
||||
top: px2rem(600);
|
||||
right: px2rem(18);
|
||||
background: url('../images/godiamond.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.gocrystal {
|
||||
top: px2rem(800);
|
||||
background: url('../images/gocrystal.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
261
view/molistar/activity/act-nameplate/css/nobleHighRank.css
Normal file
261
view/molistar/activity/act-nameplate/css/nobleHighRank.css
Normal file
@@ -0,0 +1,261 @@
|
||||
body,
|
||||
html {
|
||||
width: 100%;
|
||||
background: #201009;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 10rem;
|
||||
height: 11.37333rem;
|
||||
background: url(../images/noble/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header .applicationRecord {
|
||||
width: 0.74667rem;
|
||||
height: 2.13333rem;
|
||||
background: url(../images/noble/applicationRecord.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2.81333rem;
|
||||
}
|
||||
|
||||
.header .applicationRecord a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header .content {
|
||||
width: 8.8rem;
|
||||
height: 1.86667rem;
|
||||
background: linear-gradient(0deg, #EEB380 15%, #FBE3C7 93%);
|
||||
border-radius: 0.10667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 6.96rem;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header .content b {
|
||||
color: #5C3009;
|
||||
font-weight: bold;
|
||||
margin: 0.45333rem 0 0.25333rem;
|
||||
font-size: 0.4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header .content p {
|
||||
color: #5C3009;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 8.8rem;
|
||||
margin: -2rem auto 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.list li {
|
||||
width: 8.8rem;
|
||||
height: 7.29333rem;
|
||||
margin-bottom: 1.08rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.list li img {
|
||||
width: 3.92rem;
|
||||
height: 1.05333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 2.29333rem;
|
||||
}
|
||||
|
||||
.list li .input_box {
|
||||
width: 6.13333rem;
|
||||
height: 0.85333rem;
|
||||
line-height: 0.85333rem;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 2.05333rem;
|
||||
}
|
||||
|
||||
.list li .input_box span {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
font-size: 0.34667rem;
|
||||
}
|
||||
|
||||
.list li .input_box input {
|
||||
background: #58504B;
|
||||
border-radius: 0.10667rem;
|
||||
padding: 0rem 0.13333rem;
|
||||
box-sizing: border-box;
|
||||
width: 4.26667rem;
|
||||
height: 0.85333rem;
|
||||
color: #fff;
|
||||
font-size: 0.34667rem;
|
||||
}
|
||||
|
||||
.list li .but {
|
||||
width: 4.4rem;
|
||||
height: 0.96rem;
|
||||
background: linear-gradient(0deg, #504C47 0%, #847A72 100%);
|
||||
border-radius: 0.96rem;
|
||||
line-height: 0.96rem;
|
||||
text-align: center;
|
||||
color: #D3CBC3;
|
||||
font-size: 0.4rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0.62667rem;
|
||||
}
|
||||
|
||||
.list li .but_active {
|
||||
background: linear-gradient(0deg, #EDB17C 0%, #FCE7CE 100%);
|
||||
color: #5C3009;
|
||||
}
|
||||
|
||||
.list li:nth-child(1) {
|
||||
background: url(../images/noble/g_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.list li:nth-child(2) {
|
||||
background: url(../images/noble/q_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.list li:nth-child(3) {
|
||||
background: url(../images/noble/d_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.list li:nth-child(4) {
|
||||
background: url(../images/noble/s_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #9B928D;
|
||||
font-size: 0.34667rem;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
|
||||
}
|
||||
|
||||
.max {
|
||||
font-family: 'pingfang-medium';
|
||||
padding: 0.4rem 0.4rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.max li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.26667rem;
|
||||
background: #2E2B2A;
|
||||
margin-bottom: 0.32rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-style {
|
||||
width: 3.57333rem;
|
||||
height: 1.28rem;
|
||||
background: url(../images/noble/minpai_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 0.13333rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.max li .nameplate-style img {
|
||||
width: 3.04rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.10667rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap .nameplate-desc {
|
||||
font-size: 0.4rem;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 0.05333rem;
|
||||
margin-bottom: 0.21333rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap p span {
|
||||
font-size: 0.26667rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.max li .isPass {
|
||||
width: 2.66667rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.max li .isPass p {
|
||||
font-family: 'pingfang-bold';
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.max li .isPass p.not-pass {
|
||||
color: #FB486A;
|
||||
}
|
||||
|
||||
.max li .isPass .result {
|
||||
font-size: 0.26667rem;
|
||||
color: #999999;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.no-record-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.no-record-wrap img {
|
||||
width: 4.98667rem;
|
||||
height: 5.2rem;
|
||||
margin-bottom: -1.33333rem;
|
||||
}
|
||||
|
||||
.no-record-wrap span {
|
||||
color: #666;
|
||||
font-size: 0.42667rem;
|
||||
}
|
||||
272
view/molistar/activity/act-nameplate/css/nobleHighRank.scss
Normal file
272
view/molistar/activity/act-nameplate/css/nobleHighRank.scss
Normal file
@@ -0,0 +1,272 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
width: 100%;
|
||||
background: #201009;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: px2rem(750, );
|
||||
height: px2rem(853, );
|
||||
background: url(../images/noble/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
.applicationRecord {
|
||||
width: px2rem(56, );
|
||||
height: px2rem(160, );
|
||||
background: url(../images/noble/applicationRecord.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: px2rem(211, );
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: px2rem(660, );
|
||||
height: px2rem(140, );
|
||||
background: linear-gradient(0deg, #EEB380 15%, #FBE3C7 93%);
|
||||
border-radius: px2rem(8, );
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: px2rem(522, );
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
|
||||
b {
|
||||
color: #5C3009;
|
||||
font-weight: bold;
|
||||
margin: px2rem(34, ) 0 px2rem(19, );
|
||||
font-size: px2rem(30, );
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #5C3009;
|
||||
font-size: px2rem(28, );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: px2rem(660, );
|
||||
margin: -2rem auto 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
li {
|
||||
width: px2rem(660, );
|
||||
height: px2rem(547, );
|
||||
margin-bottom: px2rem(81, );
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: px2rem(294, );
|
||||
height: px2rem(79, );
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(172, );
|
||||
}
|
||||
|
||||
.input_box {
|
||||
width: px2rem(460, );
|
||||
height: px2rem(64, );
|
||||
line-height: px2rem(64, );
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(154, );
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
font-size: px2rem(26, );
|
||||
}
|
||||
|
||||
input {
|
||||
background: #58504B;
|
||||
border-radius: px2rem(8, );
|
||||
padding: px2rem(0, ) px2rem(10, );
|
||||
box-sizing: border-box;
|
||||
width: px2rem(320, );
|
||||
height: px2rem(64, );
|
||||
color: #fff;
|
||||
font-size: px2rem(26, );
|
||||
}
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(330, );
|
||||
height: px2rem(72, );
|
||||
background: linear-gradient(0deg, #504C47 0%, #847A72 100%);
|
||||
border-radius: px2rem(72, );
|
||||
line-height: px2rem(72, );
|
||||
text-align: center;
|
||||
color: #D3CBC3;
|
||||
font-size: px2rem(30, );
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(47, );
|
||||
}
|
||||
|
||||
.but_active {
|
||||
background: linear-gradient(0deg, #EDB17C 0%, #FCE7CE 100%);
|
||||
color: #5C3009;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(1) {
|
||||
background: url(../images/noble/g_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
li:nth-child(2) {
|
||||
background: url(../images/noble/q_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
li:nth-child(3) {
|
||||
background: url(../images/noble/d_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
li:nth-child(4) {
|
||||
background: url(../images/noble/s_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #9B928D;
|
||||
font-size: px2rem(26, );
|
||||
}
|
||||
|
||||
// ==================================================================申请记录==========================================================
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
.max {
|
||||
font-family: 'pingfang-medium';
|
||||
padding: px2rem(30, ) px2rem(30);
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: px2rem(30) px2rem(20, );
|
||||
background: #2E2B2A;
|
||||
margin-bottom: px2rem(24, );
|
||||
border-radius: px2rem(30, );
|
||||
|
||||
.nameplate-style {
|
||||
width: px2rem(268);
|
||||
height: px2rem(96);
|
||||
background: url(../images/noble/minpai_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: px2rem(10);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: px2rem(228);
|
||||
height: px2rem(60);
|
||||
}
|
||||
}
|
||||
|
||||
.nameplate-desc-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: px2rem(8);
|
||||
|
||||
.nameplate-desc {
|
||||
font-size: px2rem(30);
|
||||
color: #FFFFFF;
|
||||
margin-bottom: px2rem(4);
|
||||
margin-bottom: px2rem(16, );
|
||||
}
|
||||
|
||||
p {
|
||||
span {
|
||||
font-size: px2rem(20);
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isPass {
|
||||
width: px2rem(200);
|
||||
text-align: right;
|
||||
|
||||
p {
|
||||
font-family: 'pingfang-bold';
|
||||
font-size: px2rem(30);
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
|
||||
&.not-pass {
|
||||
color: #FB486A;
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
font-size: px2rem(20);
|
||||
color: #999999;
|
||||
margin-top: px2rem(15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-record-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
|
||||
img {
|
||||
width: px2rem(374);
|
||||
height: px2rem(390);
|
||||
margin-bottom: px2rem(-100);
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-size: px2rem(32);
|
||||
}
|
||||
}
|
||||
99
view/molistar/activity/act-nameplate/css/record.css
Normal file
99
view/molistar/activity/act-nameplate/css/record.css
Normal file
@@ -0,0 +1,99 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
|
||||
}
|
||||
|
||||
.max {
|
||||
font-family: 'pingfang-medium';
|
||||
padding: 0 0.4rem;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.max li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 0.01333rem solid #F2E7FF;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
|
||||
.max li .nameplate-style {
|
||||
width: 2.93333rem;
|
||||
height: 0.88rem;
|
||||
background-color: #F2E7FF;
|
||||
border-radius: 0.13333rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.max li .nameplate-style img {
|
||||
width: 2.74667rem;
|
||||
height: 0.68rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.10667rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap .nameplate-desc {
|
||||
font-size: 0.4rem;
|
||||
color: #333333;
|
||||
margin-bottom: 0.05333rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap p span {
|
||||
font-size: 0.26667rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.max li .isPass {
|
||||
width: 2.66667rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.max li .isPass p {
|
||||
font-family: 'pingfang-bold';
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
color: #9842F3;
|
||||
}
|
||||
|
||||
.max li .isPass p.not-pass {
|
||||
color: #E84C46;
|
||||
}
|
||||
|
||||
.max li .isPass .result {
|
||||
font-size: 0.26667rem;
|
||||
color: #999999;
|
||||
margin-top: 0.10667rem;
|
||||
}
|
||||
|
||||
.no-record-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.no-record-wrap img {
|
||||
width: 4.98667rem;
|
||||
height: 5.2rem;
|
||||
margin-bottom: -1.33333rem;
|
||||
}
|
||||
|
||||
.no-record-wrap span {
|
||||
color: #666;
|
||||
font-size: 0.42667rem;
|
||||
}
|
||||
96
view/molistar/activity/act-nameplate/css/record.scss
Normal file
96
view/molistar/activity/act-nameplate/css/record.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-medium';
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
.max{
|
||||
font-family: 'pingfang-medium';
|
||||
padding: 0 px2rem(30);
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: px2rem(1) solid #F2E7FF;
|
||||
padding: px2rem(30) 0;
|
||||
.nameplate-style{
|
||||
width: px2rem(220);
|
||||
height: px2rem(66);
|
||||
background-color: #F2E7FF;
|
||||
border-radius: px2rem(10);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
width: px2rem(206);
|
||||
height: px2rem(51);
|
||||
}
|
||||
}
|
||||
.nameplate-desc-wrap{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: px2rem(8);
|
||||
.nameplate-desc{
|
||||
font-size: px2rem(30);
|
||||
color: #333333;
|
||||
margin-bottom: px2rem(4);
|
||||
}
|
||||
p{
|
||||
span{
|
||||
font-size: px2rem(20);
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.isPass{
|
||||
width: px2rem(200);
|
||||
text-align: right;
|
||||
p{
|
||||
font-family: 'pingfang-bold';
|
||||
font-size: px2rem(30);
|
||||
font-weight: bold;
|
||||
color: #9842F3;
|
||||
&.not-pass{
|
||||
color: #E84C46;
|
||||
}
|
||||
}
|
||||
.result{
|
||||
font-size: px2rem(20);
|
||||
color: #999999;
|
||||
margin-top: px2rem(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-record-wrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
img{
|
||||
width: px2rem(374);
|
||||
height: px2rem(390);
|
||||
margin-bottom: px2rem(-100);
|
||||
}
|
||||
span{
|
||||
color: #666;
|
||||
font-size: px2rem(32);
|
||||
}
|
||||
}
|
||||
BIN
view/molistar/activity/act-nameplate/images/apply-btn-basics.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/apply-btn-basics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
view/molistar/activity/act-nameplate/images/apply-new.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/apply-new.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
view/molistar/activity/act-nameplate/images/close.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
view/molistar/activity/act-nameplate/images/confirm.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/confirm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
view/molistar/activity/act-nameplate/images/decrease.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/decrease.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1014 B |
BIN
view/molistar/activity/act-nameplate/images/default.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
view/molistar/activity/act-nameplate/images/default1.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/default1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
view/molistar/activity/act-nameplate/images/delay-bg.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/delay-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
view/molistar/activity/act-nameplate/images/delay-btn.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/delay-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
view/molistar/activity/act-nameplate/images/disabled-btn.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/disabled-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
view/molistar/activity/act-nameplate/images/gocrystal.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/gocrystal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
view/molistar/activity/act-nameplate/images/godiamond.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/godiamond.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
view/molistar/activity/act-nameplate/images/increase.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/increase.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
view/molistar/activity/act-nameplate/images/max.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/max.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
BIN
view/molistar/activity/act-nameplate/images/new-bg.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/new-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
view/molistar/activity/act-nameplate/images/noble/d_bg.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/noble/d_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
view/molistar/activity/act-nameplate/images/noble/g_bg.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/noble/g_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
view/molistar/activity/act-nameplate/images/noble/header.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/noble/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
view/molistar/activity/act-nameplate/images/noble/minpai_bg.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/noble/minpai_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 B |
BIN
view/molistar/activity/act-nameplate/images/noble/q_bg.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/noble/q_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
view/molistar/activity/act-nameplate/images/noble/s_bg.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/noble/s_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
view/molistar/activity/act-nameplate/images/select-bg.png
Normal file
BIN
view/molistar/activity/act-nameplate/images/select-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
120
view/molistar/activity/act-nameplate/index.html
Normal file
120
view/molistar/activity/act-nameplate/index.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?cfa5923c8195139cef029b2f20be2aba";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
|
||||
<title>精美铭牌送不停</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css?v=10">
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="max">
|
||||
<div class="record">
|
||||
<!-- <img src="./images/record.png" alt=""> -->
|
||||
</div>
|
||||
|
||||
<div class="btn basics-send"><img src="./images/disabled-btn.png" alt=""></div>
|
||||
<div class="btn basics-receive"><img src="./images/disabled-btn.png" alt=""></div>
|
||||
<div class="btn advance-send"><img src="./images/disabled-btn.png" alt=""></div>
|
||||
<div class="btn advance-receive"><img src="./images/disabled-btn.png" alt=""></div>
|
||||
|
||||
<!-- 选择弹窗 -->
|
||||
<div class="shade-mask">
|
||||
<div class="shade-content">
|
||||
<!-- <div class="top">请选择</div> -->
|
||||
<ul class="select-ul">
|
||||
<!-- <li data-apply-day="70" data-nameplate-id="159" data-type="1">
|
||||
<p>剩余7天</p>
|
||||
<div class="nameplate">
|
||||
<img src="http://image.uat.zhongjialx.com/FqVz-oYR2lzqfzIlZNM3BrA016cX?imageslim" alt="">
|
||||
<span>piko看看</span>
|
||||
</div>
|
||||
<div class="delay-btn">
|
||||
<img src="./images/delay-btn.png" alt="">
|
||||
</div>
|
||||
</li> -->
|
||||
</ul>
|
||||
<div class="apply-btn"></div>
|
||||
<div class="close"><img src="./images/close.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 延期弹窗 -->
|
||||
<div class="shade-mask-delay">
|
||||
<div class="shade-content-delay">
|
||||
<!-- <div class="top">延期期限</div> -->
|
||||
<div class="nameplate-style">
|
||||
<span>铭牌样式：</span>
|
||||
<div>
|
||||
<p>
|
||||
<img alt="">
|
||||
<span></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delay-time">
|
||||
<span>申请时长：</span>
|
||||
<div>
|
||||
<img src="./images/decrease.png" alt="" class="decrease">
|
||||
<p><span></span>天</p>
|
||||
<img src="./images/increase.png" alt="" class="increase">
|
||||
</div>
|
||||
</div>
|
||||
<div class="apply-btn"></div>
|
||||
<div class="close"><img src="./images/close.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请新铭牌弹窗 -->
|
||||
<div class="shade-mask-new">
|
||||
<div class="shade-content-new">
|
||||
<!-- <div class="top">申请新铭牌</div> -->
|
||||
<div class="nameplate-style">
|
||||
<span>铭牌样式：</span>
|
||||
<ul class="apply-new-ul">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new-nameplate-desc-wrap">
|
||||
<span>铭牌文字：</span>
|
||||
<input type="text" class="new-nameplate-desc" placeholder="请输入4个字" maxlength="4">
|
||||
</div>
|
||||
<div class="delay-time">
|
||||
<span>申请时长：</span>
|
||||
<div>
|
||||
<img src="./images/decrease.png" alt="" class="decrease">
|
||||
<p><span></span>天</p>
|
||||
<img src="./images/increase.png" alt="" class="increase">
|
||||
</div>
|
||||
</div>
|
||||
<div class="apply-btn"></div>
|
||||
<div class="close"><img src="./images/close.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="./js/public.js?v=10"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
92
view/molistar/activity/act-nameplate/js/nobleHighRank.js
Normal file
92
view/molistar/activity/act-nameplate/js/nobleHighRank.js
Normal file
@@ -0,0 +1,92 @@
|
||||
|
||||
let urlPrefix = getUrlPrefix();
|
||||
var browser = checkVersion();
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
setTimeout(() => {
|
||||
getVipNameplateList();
|
||||
}, 50)
|
||||
})
|
||||
// 获取名牌列表
|
||||
function getVipNameplateList () {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/vip/getVipNameplateList',
|
||||
success (res) {
|
||||
if (res.code == 200) {
|
||||
res.data.forEach((res, index) => {
|
||||
$(`.list .li${index + 1} img`).attr('src', res.icon);
|
||||
$(`.list .li${index + 1} .but${index + 1}`).attr('isCouldApply', res.isCouldApply);
|
||||
$(`.list .li${index + 1} .but${index + 1}`).attr('nameplateId', res.nameplateId);
|
||||
if (res.isCouldApply) {
|
||||
$(`.list .li${index + 1} .but${index + 1}`).addClass('but_active');
|
||||
} else {
|
||||
$(`.list .li${index + 1} .but${index + 1}`).removeClass('but_active');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 申请按钮
|
||||
$('.list li .but').click(function () {
|
||||
var loca = $(this).attr('iscouldapply');
|
||||
var val = $(this).siblings('.input_box').find('input').val();
|
||||
var data = {
|
||||
nameplateId: $(this).attr('nameplateId'),
|
||||
text: val
|
||||
}
|
||||
console.log(data);
|
||||
if (val == '') {
|
||||
toastMsg('请输入铭牌文案');
|
||||
} else {
|
||||
if (loca == 'true') {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/vip/vipMpApply',
|
||||
data: data,
|
||||
success (res) {
|
||||
if (res.code == 200) {
|
||||
hideLoading(layerIndex);
|
||||
$('.list li .input_box input').val('');
|
||||
getVipNameplateList();
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('暂不可申请');
|
||||
}
|
||||
}
|
||||
})
|
||||
118
view/molistar/activity/act-nameplate/js/nobleHighRank_record.js
Normal file
118
view/molistar/activity/act-nameplate/js/nobleHighRank_record.js
Normal file
@@ -0,0 +1,118 @@
|
||||
let urlPrefix = getUrlPrefix();
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
|
||||
let recordList = []
|
||||
let pageNumber = 1
|
||||
let pageSize = 20
|
||||
let canNext
|
||||
let isLock = true
|
||||
// 获取用户申请记录
|
||||
const getUserApplyRecord = () => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/vip/vipMpApplyRecordList',
|
||||
data: {
|
||||
type : 7,
|
||||
pageNumber,
|
||||
pageSize
|
||||
},
|
||||
success (res) {
|
||||
hideLoading(layerIndex)
|
||||
if (res.code === 200) {
|
||||
if (!res.data.length) {
|
||||
$('.max').hide()
|
||||
} else {
|
||||
$('.no-record-wrap').hide()
|
||||
}
|
||||
|
||||
if (res.data.length === pageSize) {
|
||||
// 能够继续请求下一页
|
||||
canNext = true
|
||||
} else {
|
||||
canNext = false
|
||||
}
|
||||
recordList.push(...res.data)
|
||||
renderRecord()
|
||||
isLock = true
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error () {
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 渲染申请记录
|
||||
const renderRecord = () => {
|
||||
let str = '';
|
||||
recordList.map(item => {
|
||||
str += `
|
||||
<li>
|
||||
<div class="nameplate-style"><img src="${item.iconPic}" alt=""></div>
|
||||
<div class="nameplate-desc-wrap">
|
||||
<span class="nameplate-desc">${item.text}</span>
|
||||
<p>
|
||||
<!-- <span>${item.applyType === 1 ? '申请' : '延长'}${item.applyDay}天</span> -->
|
||||
<span>${dateFormat(item.createTime, "yyyy-MM-dd")}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="isPass">
|
||||
<p class='${item.auditType === 1 ? 'not-pass' : ''}'>${item.auditType === 0 ? '申请中' : (item.auditType === 1 ? '不通过' : '已通过')}</p>
|
||||
${item.remark ? (item.remark.length > 8 ? `<p class="result">${item.remark.slice(0, 8) + '...'}</p>` : `<p class="result">${item.remark}</p>`) : ''
|
||||
}
|
||||
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.max').html(str)
|
||||
}
|
||||
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
setTimeout(() => {
|
||||
getUserApplyRecord()
|
||||
}, 50)
|
||||
|
||||
// 监听滚动
|
||||
$('ul').scroll(function () {
|
||||
let scrollTop = $(this).scrollTop()
|
||||
let scrollHeight = $('ul')[0].scrollHeight
|
||||
let ulHeight = $(this).innerHeight()
|
||||
if (scrollTop + ulHeight + 100 >= scrollHeight) {
|
||||
if (isLock) {
|
||||
// 请求下一页
|
||||
if (canNext) {
|
||||
getUserApplyRecord(pageNumber++)
|
||||
isLock = false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
415
view/molistar/activity/act-nameplate/js/public.js
Normal file
415
view/molistar/activity/act-nameplate/js/public.js
Normal file
@@ -0,0 +1,415 @@
|
||||
|
||||
let urlPrefix = getUrlPrefix();
|
||||
var browser = checkVersion();
|
||||
var info = {};
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
// 封裝layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
|
||||
let delayLock = false, newApplyLock = false
|
||||
|
||||
let btnStatus = []
|
||||
// 獲取用戶銘牌狀態
|
||||
const getUserNameplateInfo = () => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/nameplate/userNameplateInfo',
|
||||
data: {
|
||||
uid: pubInfo.uid
|
||||
},
|
||||
success(res){
|
||||
hideLoading(layerIndex);
|
||||
if(res.code === 200){
|
||||
btnStatus = res.data
|
||||
renderBtnStatus()
|
||||
}else{
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(){
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染首頁按鈕狀態
|
||||
const renderBtnStatus = () => {
|
||||
btnStatus.map( (item,index) => {
|
||||
if(index > 1){
|
||||
// 進階款式
|
||||
$('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
|
||||
if(item > 0){
|
||||
$('.btn').eq(index).on('click', () => {
|
||||
getUserNameplateList(index+1)
|
||||
})
|
||||
}
|
||||
}else{
|
||||
// 基礎款式
|
||||
$('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
|
||||
if(item > 0){
|
||||
$('.btn').eq(index).on('click', () => {
|
||||
getUserNameplateList(index+1)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let userNameplateList = []
|
||||
// 獲取用戶已有銘牌列錶
|
||||
const getUserNameplateList = (type) => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/nameplate/pickUserNameplate',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
type
|
||||
},
|
||||
success(res){
|
||||
hideLoading(layerIndex)
|
||||
if(res.code === 200){
|
||||
if(!res.data.length){
|
||||
getNewNameplateList(type)
|
||||
}else{
|
||||
userNameplateList = res.data
|
||||
renderNameplateList()
|
||||
}
|
||||
}else{
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(){
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染銘牌列錶(選擇彈窗)
|
||||
const renderNameplateList = () => {
|
||||
let str = ''
|
||||
userNameplateList.map( item => {
|
||||
str += `
|
||||
<li data-apply-day=${item.applyDay} data-nameplate-id=${item.nameplateId} data-type=${item.type} data-text=${item.fixedWord}>
|
||||
<p>剩余${item.expireDays}天</p>
|
||||
<div class="nameplate">
|
||||
<img src="${item.nameplateImage}" alt="">
|
||||
<span>${item.word}</span>
|
||||
</div>
|
||||
<div class="delay-btn">
|
||||
<img src="./images/delay-btn.png" alt="">
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.select-ul').html(str)
|
||||
|
||||
$('.shade-mask').show().siblings('.shade-mask-delay, .shade-mask-new').hide()
|
||||
$('body').css('overflow', 'hidden')
|
||||
}
|
||||
|
||||
|
||||
let newNameplateList = []
|
||||
// 獲取新銘牌列錶
|
||||
const getNewNameplateList = (type) => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/nameplate/getNameplateList',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
type
|
||||
},
|
||||
success(res){
|
||||
hideLoading(layerIndex)
|
||||
if(res.code === 200){
|
||||
if(!res.data.length){
|
||||
toastMsg('暫時沒有銘牌可申請')
|
||||
return
|
||||
}
|
||||
newNameplateList = res.data
|
||||
renderNewNameplateList()
|
||||
}else{
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(){
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let newNameplateId //只有一個可選時，默認選中
|
||||
// 渲染申請新銘牌彈窗
|
||||
const renderNewNameplateList = () => {
|
||||
let str = '';
|
||||
newNameplateList.map( item => {
|
||||
str += `
|
||||
<li data-apply-day=${item.applyDay} data-nameplate-id=${item.id} data-type=${item.type}>
|
||||
<div>
|
||||
<img src="${item.iconPic}" alt="">
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.apply-new-ul').html(str)
|
||||
if(newNameplateList.length === 1){
|
||||
let onlyLi = $('.apply-new-ul').find('li').eq(0);
|
||||
newNameplateId = onlyLi.data('nameplateId');
|
||||
onlyLi.addClass('active')
|
||||
}
|
||||
$('.shade-mask-new .delay-time div p span').html(newNameplateList[0].applyDay)
|
||||
$('.shade-mask-new').show().siblings('.shade-mask, .shade-mask-delay').hide()
|
||||
$('body').css('overflow', 'hidden')
|
||||
}
|
||||
|
||||
// 確認延長期限
|
||||
const delayNamaplateConfirm = (params) => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/nameplate/applyUserNameplate',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
type: params.type,
|
||||
nameplateId: params.nameplateId,
|
||||
applyDay: params.applyDay,
|
||||
applyType: params.applyType,
|
||||
text: params.text
|
||||
},
|
||||
success(res){
|
||||
hideLoading(layerIndex)
|
||||
if(res.code === 200){
|
||||
toastMsg('申請成功')
|
||||
$('.shade-mask-delay').hide()
|
||||
$('body').css('overflow', 'auto')
|
||||
delayLock = false
|
||||
setTimeout(()=>{
|
||||
location.reload()
|
||||
}, 500)
|
||||
}else{
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(){
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 確認申請新銘牌
|
||||
const applyNewNamaplateConfirm = (params) => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/nameplate/applyUserNameplate',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
type: params.type,
|
||||
nameplateId: params.nameplateId,
|
||||
applyDay: params.applyDay,
|
||||
applyType: params.applyType,
|
||||
text: params.text
|
||||
},
|
||||
success(res){
|
||||
hideLoading(layerIndex)
|
||||
if(res.code === 200){
|
||||
toastMsg('申請成功')
|
||||
$('.shade-mask-new').hide()
|
||||
$('body').css('overflow', 'auto')
|
||||
newApplyLock = false
|
||||
setTimeout(()=>{
|
||||
location.reload()
|
||||
}, 500)
|
||||
}else{
|
||||
newApplyLock = false
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(){
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤,請退出重進')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
setTimeout( () => {
|
||||
getUserNameplateInfo()
|
||||
}, 50)
|
||||
|
||||
if (browser.app) {
|
||||
_hmt.push(['_trackEvent', 'client', 'click', "act_nameplate"]);
|
||||
}
|
||||
|
||||
// 點擊申請記錄按鈕
|
||||
$('.record').on('click', function(){
|
||||
window.location.href = './record.html'
|
||||
})
|
||||
|
||||
// 關閉彈窗
|
||||
$('.shade-mask .close').on('click', () => {
|
||||
$('.shade-mask').hide()
|
||||
$('body').css('overflow', 'auto')
|
||||
})
|
||||
$('.shade-mask-delay .close').on('click', () => {
|
||||
$('.shade-mask-delay').hide()
|
||||
$('body').css('overflow', 'auto')
|
||||
})
|
||||
$('.shade-mask-new .close').on('click', () => {
|
||||
$('.shade-mask-new').hide()
|
||||
$('body').css('overflow', 'auto')
|
||||
newNameplateId = ''
|
||||
$(this).find('input').val('')
|
||||
})
|
||||
|
||||
let maxApplyDay, nameplateId, type, text
|
||||
// 監聽 延長期限 按鈕點擊事件
|
||||
$('.select-ul').on('click', '.delay-btn', function() {
|
||||
let li = $(this).parent();
|
||||
let src = li.find('.nameplate img').attr('src');
|
||||
let desc = li.find('.nameplate span').html();
|
||||
maxApplyDay = li.data('applyDay');
|
||||
nameplateId = li.data('nameplateId');
|
||||
type = li.data('type');
|
||||
text = li.data('text');
|
||||
|
||||
$('.shade-mask-delay .nameplate-style img').attr('src', src);
|
||||
$('.shade-mask-delay .nameplate-style p span').html(desc);
|
||||
$('.shade-mask-delay .delay-time p span').html(maxApplyDay);
|
||||
|
||||
$('.shade-mask-delay').show().siblings('.shade-mask, .shade-mask-new').hide()
|
||||
})
|
||||
|
||||
// 延期彈窗 點擊減按鈕
|
||||
$('.shade-mask-delay').on('click', '.decrease', function(){
|
||||
let applyDay = parseInt( $(this).parent().find('span').html() );
|
||||
if(applyDay > 7){
|
||||
applyDay -= 7;
|
||||
}else{
|
||||
toastMsg('銘牌至少申請7天')
|
||||
}
|
||||
$('.shade-mask-delay .delay-time p span').html(applyDay);
|
||||
})
|
||||
//延期彈窗 點擊加按鈕
|
||||
$('.shade-mask-delay').on('click', '.increase', function(){
|
||||
let applyDay = parseInt( $(this).parent().find('span').html() );
|
||||
if(applyDay >= maxApplyDay){
|
||||
toastMsg('已達最大申請時長')
|
||||
}else{
|
||||
applyDay += 7;
|
||||
}
|
||||
$('.shade-mask-delay .delay-time p span').html(applyDay);
|
||||
})
|
||||
// 監聽申請延期確定按鈕點擊事件
|
||||
$('.shade-mask-delay').on('click', '.apply-btn', function(){
|
||||
// applyType 1申請新銘牌，2延長
|
||||
if(!delayLock){
|
||||
delayLock = true
|
||||
let params = {
|
||||
type,
|
||||
nameplateId,
|
||||
applyDay: parseInt( $(this).parent().find('.delay-time div p span').html() ),
|
||||
applyType: 2,
|
||||
text
|
||||
};
|
||||
delayNamaplateConfirm(params)
|
||||
}
|
||||
})
|
||||
|
||||
/************************* ******************************/
|
||||
|
||||
// 監聽 申請新銘牌 按鈕點擊事件
|
||||
$('.shade-mask').on('click', '.apply-btn', function(){
|
||||
let type = $(this).parent().find('.select-ul li').eq(0).data('type');
|
||||
getNewNameplateList(type)
|
||||
})
|
||||
|
||||
// 申請新銘牌彈窗 點擊減按鈕
|
||||
$('.shade-mask-new').on('click', '.decrease', function(){
|
||||
let applyDay = parseInt( $(this).parent().find('span').html() );
|
||||
if(applyDay > 7){
|
||||
applyDay -= 7;
|
||||
}else{
|
||||
toastMsg('銘牌至少申請7天')
|
||||
}
|
||||
$('.shade-mask-new .delay-time p span').html(applyDay);
|
||||
})
|
||||
// 申請新銘牌彈窗 點擊加按鈕
|
||||
$('.shade-mask-new').on('click', '.increase', function(){
|
||||
let applyDay = parseInt( $(this).parent().find('span').html() );
|
||||
let maxApplyDay = parseInt( $(this).parent().parent().parent().find('.apply-new-ul li').eq(0).data('applyDay') );
|
||||
if(applyDay >= maxApplyDay){
|
||||
toastMsg('已達最大申請時長')
|
||||
}else{
|
||||
applyDay += 7;
|
||||
}
|
||||
$('.shade-mask-new .delay-time p span').html(applyDay);
|
||||
})
|
||||
|
||||
// 申請新銘牌彈窗 點擊銘牌列錶事件
|
||||
$('.shade-mask-new').on('click', 'li', function(){
|
||||
$(this).addClass('active').siblings('li').removeClass('active');
|
||||
newNameplateId = $(this).data('nameplateId');
|
||||
})
|
||||
|
||||
// 申請新銘牌彈窗 確定申請 按鈕點擊事件
|
||||
$('.shade-mask-new').on('click', '.apply-btn', function(){
|
||||
let content = $(this).parent();
|
||||
let ipt = content.find('input.new-nameplate-desc').val()
|
||||
if(!newNameplateId){
|
||||
toastMsg('請選擇樣式');
|
||||
return
|
||||
}
|
||||
if(!ipt){
|
||||
toastMsg('請添加銘牌文字');
|
||||
return
|
||||
}else{
|
||||
if(ipt.length !== 4){
|
||||
toastMsg('請添加4個字的銘牌文字');
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// applyType 1申請新銘牌，2延長
|
||||
if(!newApplyLock){
|
||||
newApplyLock = true
|
||||
let params = {
|
||||
applyType: 1,
|
||||
nameplateId: newNameplateId,
|
||||
text: ipt,
|
||||
type: parseInt( content.find('ul.apply-new-ul li').eq(0).data('type') ),
|
||||
applyDay: parseInt( content.find('.delay-time div p span').html() )
|
||||
}
|
||||
applyNewNamaplateConfirm(params)
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
119
view/molistar/activity/act-nameplate/js/record.js
Normal file
119
view/molistar/activity/act-nameplate/js/record.js
Normal file
@@ -0,0 +1,119 @@
|
||||
let urlPrefix = getUrlPrefix();
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
|
||||
let recordList = []
|
||||
let pageNumber = 1
|
||||
let pageSize = 20
|
||||
let canNext
|
||||
let isLock = true
|
||||
// 获取用户申请记录
|
||||
const getUserApplyRecord = () => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/nameplate/getUserAuditRecord',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
pageNumber,
|
||||
pageSize
|
||||
},
|
||||
success(res){
|
||||
hideLoading(layerIndex)
|
||||
if(res.code === 200){
|
||||
if(!res.data.length){
|
||||
$('.max').hide()
|
||||
}else{
|
||||
$('.no-record-wrap').hide()
|
||||
}
|
||||
|
||||
if(res.data.length === pageSize){
|
||||
// 能够继续请求下一页
|
||||
canNext = true
|
||||
}else{
|
||||
canNext = false
|
||||
}
|
||||
recordList.push(...res.data)
|
||||
renderRecord()
|
||||
isLock = true
|
||||
}else{
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(){
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 渲染申请记录
|
||||
const renderRecord = () => {
|
||||
let str = '';
|
||||
recordList.map( item => {
|
||||
str += `
|
||||
<li>
|
||||
<div class="nameplate-style"><img src="${item.iconPic}" alt=""></div>
|
||||
<div class="nameplate-desc-wrap">
|
||||
<span class="nameplate-desc">${item.text}</span>
|
||||
<p>
|
||||
<span>${item.applyType === 1 ? '申请' : '延长'}${item.applyDay}天</span>
|
||||
<span>${dateFormat(item.createTime, "yyyy-MM-dd")}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="isPass">
|
||||
<p class='${item.auditType === 1 ? 'not-pass' : ''}'>${item.auditType === 0 ? '申请中' : (item.auditType === 1 ? '不通过' : '已通过')}</p>
|
||||
${
|
||||
item.remark ? (item.remark.length > 8 ? `<p class="result">${item.remark.slice(0, 8) + '...'}</p>` : `<p class="result">${item.remark}</p>`) : ''
|
||||
}
|
||||
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.max').html(str)
|
||||
}
|
||||
|
||||
$(function(){
|
||||
getInfoFromClient()
|
||||
setTimeout( () => {
|
||||
getUserApplyRecord()
|
||||
}, 50)
|
||||
|
||||
// 监听滚动
|
||||
$('ul').scroll(function(){
|
||||
let scrollTop = $(this).scrollTop()
|
||||
let scrollHeight = $('ul')[0].scrollHeight
|
||||
let ulHeight = $(this).innerHeight()
|
||||
if(scrollTop + ulHeight + 100 >= scrollHeight){
|
||||
if(isLock){
|
||||
// 请求下一页
|
||||
if(canNext){
|
||||
getUserApplyRecord(pageNumber++)
|
||||
isLock = false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
65
view/molistar/activity/act-nameplate/nobleHighRank.html
Normal file
65
view/molistar/activity/act-nameplate/nobleHighRank.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<title>定制贵族专属铭牌</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/nobleHighRank.css?v=1.1">
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="applicationRecord"><a href="./nobleHighRank_record.html"></a></div>
|
||||
<div class="content">
|
||||
<b>贵族可以支持铭牌内容自定义啦～</b>
|
||||
<p>(仅支持公爵以上贵族等级哦)</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class='list'>
|
||||
<li class="li1">
|
||||
<img src="" alt="">
|
||||
<div class="input_box">
|
||||
<span>铭牌文案：</span>
|
||||
<input type="text" maxlength='4' placeholder="请输入4汉字">
|
||||
</div>
|
||||
<div class="but but1">立即申请</div>
|
||||
</li>
|
||||
<li class="li2">
|
||||
<img src="" alt="">
|
||||
<div class="input_box">
|
||||
<span>铭牌文案：</span>
|
||||
<input type="text" maxlength='4' placeholder="请输入4汉字">
|
||||
</div>
|
||||
<div class="but but2">立即申请</div>
|
||||
</li>
|
||||
<li class="li3">
|
||||
<img src="" alt="">
|
||||
<div class="input_box">
|
||||
<span>铭牌文案：</span>
|
||||
<input type="text" maxlength='4' placeholder="请输入4汉字">
|
||||
</div>
|
||||
<div class="but but3">立即申请</div>
|
||||
</li>
|
||||
<li class="li4">
|
||||
<img src="" alt="">
|
||||
<div class="input_box">
|
||||
<span>铭牌文案：</span>
|
||||
<input type="text" maxlength='4' placeholder="请输入4汉字">
|
||||
</div>
|
||||
<div class="but but4">立即申请</div>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
<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="./js/nobleHighRank.js?v=1.0"></script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>申请记录</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/nobleHighRank.css">
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="max">
|
||||
|
||||
</ul>
|
||||
<div class="no-record-wrap">
|
||||
<img src="./images/default1.png" alt="">
|
||||
<span>暂无申请记录</span>
|
||||
</div>
|
||||
</body>
|
||||
<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="./js/nobleHighRank_record.js"></script>
|
||||
|
||||
</html>
|
||||
35
view/molistar/activity/act-nameplate/record.html
Normal file
35
view/molistar/activity/act-nameplate/record.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
|
||||
<title>申请记录</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/record.css">
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="max">
|
||||
|
||||
</ul>
|
||||
<div class="no-record-wrap">
|
||||
<img src="./images/default.png" alt="">
|
||||
<span>暂无申请记录</span>
|
||||
</div>
|
||||
<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="./js/record.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
398
view/molistar/modules/payPc/css/index.css
Normal file
398
view/molistar/modules/payPc/css/index.css
Normal file
@@ -0,0 +1,398 @@
|
||||
@charset "UTF-8";
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
background: #F3F5FA;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body .logingActive,
|
||||
html .logingActive {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50%;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: 0.48rem;
|
||||
text-align: center;
|
||||
border-radius: 0.1333333333rem;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
padding: 0 0.2rem;
|
||||
display: none;
|
||||
}
|
||||
body .wx_skip,
|
||||
html .wx_skip {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999999999;
|
||||
display: none;
|
||||
}
|
||||
body .wx_skip img,
|
||||
html .wx_skip img {
|
||||
width: 80%;
|
||||
height: 5.373333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
body .header,
|
||||
html .header {
|
||||
width: 19.2rem;
|
||||
height: 10rem;
|
||||
margin: 0 auto;
|
||||
background: url(../images/payBg.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
body .header .header_top,
|
||||
html .header .header_top {
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding-top: 1.38rem;
|
||||
padding-left: 2.4rem;
|
||||
}
|
||||
body .header .header_top img,
|
||||
html .header .header_top img {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
body .header .header_top b,
|
||||
html .header .header_top b {
|
||||
color: #ffffff;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
body .header .main,
|
||||
html .header .main {
|
||||
width: 14.4rem;
|
||||
height: 7.26rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.18rem 0.18rem 0.18rem 0.18rem;
|
||||
margin: 1rem auto 0;
|
||||
position: relative;
|
||||
}
|
||||
body .header .main .user,
|
||||
html .header .main .user {
|
||||
width: 4rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.4rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.12rem;
|
||||
display: inline-block;
|
||||
margin: 0.43rem 0 0 0.5rem;
|
||||
}
|
||||
body .header .main input::-webkit-input-placeholder,
|
||||
html .header .main input::-webkit-input-placeholder {
|
||||
/*WebKit browsers*/
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
body .header .main .area,
|
||||
html .header .main .area {
|
||||
position: absolute;
|
||||
right: 0.8rem;
|
||||
top: 0.6rem;
|
||||
display: flex;
|
||||
}
|
||||
body .header .main .area img,
|
||||
html .header .main .area img {
|
||||
width: 0.22rem;
|
||||
height: 0.22rem;
|
||||
}
|
||||
body .header .main .area b,
|
||||
html .header .main .area b {
|
||||
height: 0.22rem;
|
||||
font-size: 0.16rem;
|
||||
color: #1F1A4E;
|
||||
line-height: 0.22rem;
|
||||
}
|
||||
body .header .main .pay_method,
|
||||
html .header .main .pay_method {
|
||||
width: 12.8rem;
|
||||
margin: 0.5rem auto;
|
||||
/*禁止复制*/
|
||||
}
|
||||
body .header .main .pay_method p,
|
||||
html .header .main .pay_method p {
|
||||
font-size: 0.2rem;
|
||||
color: #1F1A4E;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
}
|
||||
body .header .main .pay_method .no_copy,
|
||||
html .header .main .pay_method .no_copy {
|
||||
-moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
body .header .main .pay_method .methodBox,
|
||||
html .header .main .pay_method .methodBox {
|
||||
width: 100%;
|
||||
height: 1.4rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
body .header .main .pay_method .methodBox::-webkit-scrollbar,
|
||||
html .header .main .pay_method .methodBox::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
width: 0;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods,
|
||||
html .header .main .pay_method .methodBox .methods {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods span,
|
||||
html .header .main .pay_method .methodBox .methods span {
|
||||
width: 1.84rem;
|
||||
height: 0.96rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.06rem;
|
||||
position: relative;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods span img,
|
||||
html .header .main .pay_method .methodBox .methods span img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.78rem;
|
||||
height: 0.78rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods span p,
|
||||
html .header .main .pay_method .methodBox .methods span p {
|
||||
color: #B3B3C3;
|
||||
font-size: 0.1rem;
|
||||
width: 100%;
|
||||
height: 0.2rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods .active,
|
||||
html .header .main .pay_method .methodBox .methods .active {
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods .active p,
|
||||
html .header .main .pay_method .methodBox .methods .active p {
|
||||
color: #9168FA;
|
||||
}
|
||||
body .header .main .pay_number,
|
||||
html .header .main .pay_number {
|
||||
width: 12.8rem;
|
||||
margin: 0 auto;
|
||||
/*禁止复制*/
|
||||
}
|
||||
body .header .main .pay_number p,
|
||||
html .header .main .pay_number p {
|
||||
font-size: 0.2rem;
|
||||
color: #1F1A4E;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
}
|
||||
body .header .main .pay_number .no_copy,
|
||||
html .header .main .pay_number .no_copy {
|
||||
-moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
body .header .main .pay_number .number,
|
||||
html .header .main .pay_number .number {
|
||||
width: 100%;
|
||||
height: 0.96rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
body .header .main .pay_number .number::-webkit-scrollbar,
|
||||
html .header .main .pay_number .number::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
width: 0;
|
||||
}
|
||||
body .header .main .pay_number .number span,
|
||||
html .header .main .pay_number .number span {
|
||||
display: block;
|
||||
min-width: 1.84rem;
|
||||
height: 0.96rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.08rem;
|
||||
position: relative;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
body .header .main .pay_number .number span b,
|
||||
html .header .main .pay_number .number span b {
|
||||
position: absolute;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body .header .main .pay_number .number span i,
|
||||
html .header .main .pay_number .number span i {
|
||||
position: absolute;
|
||||
color: #6D6B89;
|
||||
font-size: 0.13rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0.25rem;
|
||||
font-style: normal;
|
||||
}
|
||||
body .header .main .pay_number .number .active,
|
||||
html .header .main .pay_number .number .active {
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
body .header .main .but1,
|
||||
html .header .main .but1 {
|
||||
width: 4.74rem;
|
||||
height: 0.77rem;
|
||||
color: #B3B3C3;
|
||||
font-size: 0.24rem;
|
||||
border-radius: 0.1rem;
|
||||
line-height: 0.77rem;
|
||||
margin: 0.7rem 0 0 0.7rem;
|
||||
text-align: center;
|
||||
background: #E6E6F0;
|
||||
}
|
||||
body .header .main .but2,
|
||||
html .header .main .but2 {
|
||||
width: 4.74rem;
|
||||
height: 0.77rem;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.24rem;
|
||||
border-radius: 0.1rem;
|
||||
line-height: 0.77rem;
|
||||
margin: 0.7rem 0 0 0.7rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
display: none;
|
||||
}
|
||||
body .footer,
|
||||
html .footer {
|
||||
width: 19.2rem;
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
background-color: #313229;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 0.2rem;
|
||||
color: #fff;
|
||||
}
|
||||
body .footer p:nth-child(2),
|
||||
html .footer p:nth-child(2) {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
body .pop_up,
|
||||
html .pop_up {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
body .pop_up .pop_up_in,
|
||||
html .pop_up .pop_up_in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8rem;
|
||||
min-height: 2.933333rem;
|
||||
background: #fff;
|
||||
border-radius: 0.32rem;
|
||||
text-align: center;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #333;
|
||||
}
|
||||
body .pop_up .pop_up_in b,
|
||||
html .pop_up .pop_up_in b {
|
||||
width: 100%;
|
||||
height: 1.5466666667rem;
|
||||
line-height: 1.5466666667rem;
|
||||
}
|
||||
body .pop_up .pop_up_in p,
|
||||
html .pop_up .pop_up_in p {
|
||||
width: 100%;
|
||||
height: 1.0666666667rem;
|
||||
line-height: 1.0666666667rem;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
body .stance,
|
||||
html .stance {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
body .stance .picture,
|
||||
html .stance .picture {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
background: url(../images/null.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
}
|
||||
body .stance .picture span,
|
||||
html .stance .picture span {
|
||||
font-size: 0.64rem;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -1.5rem;
|
||||
transform: translateX(-56%);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/* placeholder颜色 */
|
||||
color: #929198;
|
||||
/* placeholder字体大小 */
|
||||
font-size: 0.32rem;
|
||||
/* placeholder位置 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
442
view/molistar/modules/payPc/css/index.scss
Normal file
442
view/molistar/modules/payPc/css/index.scss
Normal file
@@ -0,0 +1,442 @@
|
||||
@import '../../../common/css/flex.scss';
|
||||
|
||||
@function px2rem($px, $rem: 75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
// // 隐藏横向滚动条
|
||||
// * {
|
||||
// scrollbar-width: none; /* Firefox */
|
||||
// -ms-overflow-style: none; /* IE 10+ */
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// } /* Chrome Safari */
|
||||
|
||||
// }
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
background: #F3F5FA;
|
||||
overflow-x: hidden;
|
||||
|
||||
.logingActive {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// min-width: 2rem;
|
||||
width: 50%;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: px2rem(36, );
|
||||
text-align: center;
|
||||
border-radius: px2rem(10, );
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
z-index: 999;
|
||||
padding: 0 px2rem(15, );
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wx_skip {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .8);
|
||||
z-index: 9999999999;
|
||||
display: none;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
height: 5.373333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 19.2rem;
|
||||
height: 10rem;
|
||||
margin: 0 auto;
|
||||
background: url(../images/payBg.png) no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
.header_top {
|
||||
// width: 20%;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding-top: 1.38rem;
|
||||
padding-left: 2.4rem;
|
||||
|
||||
img {
|
||||
// width: 80px;
|
||||
// height: 80px;
|
||||
// margin-right: 10px;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
b {
|
||||
color: #ffffff;
|
||||
// font-size: 28px;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 14.4rem;
|
||||
height: 7.26rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.18rem 0.18rem 0.18rem 0.18rem;
|
||||
margin: 1rem auto 0;
|
||||
position: relative;
|
||||
|
||||
.user {
|
||||
width: 4rem;
|
||||
// height: 0.38rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.4rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
padding: 0.2rem 0.4rem;
|
||||
// text-align: center;
|
||||
font-size: 0.12rem;
|
||||
display: inline-block;
|
||||
margin: 0.43rem 0 0 0.5rem;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/*WebKit browsers*/
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
|
||||
.area {
|
||||
position: absolute;
|
||||
right: 0.8rem;
|
||||
top: 0.6rem;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 0.22rem;
|
||||
height: 0.22rem;
|
||||
}
|
||||
|
||||
b {
|
||||
// width: 0.32rem;
|
||||
height: 0.22rem;
|
||||
font-size: 0.16rem;
|
||||
color: #1F1A4E;
|
||||
line-height: 0.22rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pay_method {
|
||||
// width: 13.04rem;
|
||||
width: 12.8rem;
|
||||
// height: 1.34rem;
|
||||
margin: 0.5rem auto;
|
||||
|
||||
p {
|
||||
font-size: 0.2rem;
|
||||
color: #1F1A4E;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
/*禁止复制*/
|
||||
.no_copy {
|
||||
-moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.methodBox {
|
||||
width: 100%;
|
||||
height: 1.4rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.methods {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
span {
|
||||
width: 1.84rem;
|
||||
height: 0.96rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.06rem;
|
||||
position: relative;
|
||||
margin-right: 0.4rem;
|
||||
// box-sizing: border-box;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.78rem;
|
||||
height: 0.78rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #B3B3C3;
|
||||
font-size: 0.1rem;
|
||||
width: 100%;
|
||||
height: 0.2rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
// border: 2px solid #BB43FF;
|
||||
// box-sizing: border-box;
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
p {
|
||||
color: #9168FA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pay_number {
|
||||
width: 12.8rem;
|
||||
margin: 0 auto;
|
||||
|
||||
p {
|
||||
font-size: 0.2rem;
|
||||
color: #1F1A4E;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
/*禁止复制*/
|
||||
.no_copy {
|
||||
-moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 100%;
|
||||
height: 0.96rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
width: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
min-width: 1.84rem;
|
||||
height: 0.96rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.08rem;
|
||||
position: relative;
|
||||
margin-right: 0.4rem;
|
||||
// margin-bottom: px2rem(40, );
|
||||
|
||||
b {
|
||||
position: absolute;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.25rem;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
color: #6D6B89;
|
||||
font-size: 0.13rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0.25rem;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.but1 {
|
||||
width: 4.74rem;
|
||||
height: 0.77rem;
|
||||
color: #B3B3C3;
|
||||
font-size: 0.24rem;
|
||||
border-radius: 0.1rem;
|
||||
line-height: 0.77rem;
|
||||
margin: 0.7rem 0 0 0.7rem;
|
||||
text-align: center;
|
||||
// background: url('../images/noBut.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
background: #E6E6F0;
|
||||
}
|
||||
|
||||
.but2 {
|
||||
width: 4.74rem;
|
||||
height: 0.77rem;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.24rem;
|
||||
border-radius: 0.1rem;
|
||||
line-height: 0.77rem;
|
||||
margin: 0.7rem 0 0 0.7rem;
|
||||
text-align: center;
|
||||
// background: url('../images/but.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 19.2rem;
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
background-color: #313229;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 0.2rem;
|
||||
color: #fff;
|
||||
|
||||
p {
|
||||
&:nth-child(2) {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pop_up {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
|
||||
.pop_up_in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(600, );
|
||||
min-height: 2.933333rem;
|
||||
background: #fff;
|
||||
border-radius: px2rem(24, );
|
||||
text-align: center;
|
||||
font-size: px2rem(32, );
|
||||
color: #333;
|
||||
|
||||
b {
|
||||
width: 100%;
|
||||
height: px2rem(116, );
|
||||
line-height: px2rem(116, );
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
height: px2rem(80, );
|
||||
line-height: px2rem(80, );
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stance {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.picture {
|
||||
width: px2rem(600, );
|
||||
height: px2rem(600, );
|
||||
background: url(../images/null.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
font-size: 0.64rem;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -1.5rem;
|
||||
transform: translateX(-56%);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/* placeholder颜色 */
|
||||
color: #929198;
|
||||
/* placeholder字体大小 */
|
||||
font-size: px2rem(24, );
|
||||
/* placeholder位置 */
|
||||
text-align: center;
|
||||
}
|
||||
BIN
view/molistar/modules/payPc/images/active.png
Normal file
BIN
view/molistar/modules/payPc/images/active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
view/molistar/modules/payPc/images/but.png
Normal file
BIN
view/molistar/modules/payPc/images/but.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
view/molistar/modules/payPc/images/header.png
Normal file
BIN
view/molistar/modules/payPc/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
view/molistar/modules/payPc/images/jvxing.png
Normal file
BIN
view/molistar/modules/payPc/images/jvxing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
view/molistar/modules/payPc/images/logo.png
Normal file
BIN
view/molistar/modules/payPc/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
view/molistar/modules/payPc/images/more.png
Normal file
BIN
view/molistar/modules/payPc/images/more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
BIN
view/molistar/modules/payPc/images/noActive.png
Normal file
BIN
view/molistar/modules/payPc/images/noActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
view/molistar/modules/payPc/images/noBut.png
Normal file
BIN
view/molistar/modules/payPc/images/noBut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
view/molistar/modules/payPc/images/null.png
Normal file
BIN
view/molistar/modules/payPc/images/null.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
view/molistar/modules/payPc/images/payBg.png
Normal file
BIN
view/molistar/modules/payPc/images/payBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
BIN
view/molistar/modules/payPc/images/wx_skip.png
Normal file
BIN
view/molistar/modules/payPc/images/wx_skip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
view/molistar/modules/payPc/images/wx_skip_ar.png
Normal file
BIN
view/molistar/modules/payPc/images/wx_skip_ar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
view/molistar/modules/payPc/images/wx_skip_en.png
Normal file
BIN
view/molistar/modules/payPc/images/wx_skip_en.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
view/molistar/modules/payPc/images/wx_skip_in.png
Normal file
BIN
view/molistar/modules/payPc/images/wx_skip_in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
108
view/molistar/modules/payPc/index.html
Normal file
108
view/molistar/modules/payPc/index.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title id="pay_title">充值</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta http-equiv="cache-control" content="no-cache">
|
||||
<meta http-equiv="expires" content="">
|
||||
<!-- <script src="../../common/js/flexible.js"></script> -->
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="css/index.css?v=1.1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 充值提示 -->
|
||||
<div class="logingActive" style="font-size: 0.35rem;"></div>
|
||||
|
||||
<div class="header">
|
||||
<!-- logo -->
|
||||
<div class="header_top">
|
||||
<img src="./images/logo.png" alt="">
|
||||
<b id="pay_header_t_l">MoliStar儲值中心</b>
|
||||
</div>
|
||||
<!-- 充值区域 -->
|
||||
<div class="main">
|
||||
<!-- 输入框 -->
|
||||
<input class="user" type="text" id="pay_user_id" placeholder="請輸入MoliStar賬號ID">
|
||||
<!-- 地区 -->
|
||||
<div class="area">
|
||||
<img src="./images/more.png" alt=""><b></b>
|
||||
</div>
|
||||
<!-- 选择支付方式 -->
|
||||
<div class="pay_method">
|
||||
<p id="pay_method_p">请选择儲值方式:</p>
|
||||
<div class="methodBox no_copy">
|
||||
<!-- <div class="methods methods0">
|
||||
<span>
|
||||
<img src="./images/header.png" alt="">
|
||||
<p>迪迦奥特曼</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="methods methods1">
|
||||
<span>
|
||||
<img src="" alt="">
|
||||
<p>迪迦奥特曼</p>
|
||||
</span>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择充值金额 -->
|
||||
<div class="pay_number">
|
||||
<p id="pay_number_sd">請選擇您的儲值金額:</p>
|
||||
<div class="number no_copy">
|
||||
<!-- <span class="active">
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span>
|
||||
<span>
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付按钮 -->
|
||||
<div class="but1 pay_but">立即支付</div>
|
||||
<div class="but2 pay_but">立即支付</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>HONGKONG MOLIXING TECHNOLOGY CO.,LIMITED</p>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<div class="pop_up">
|
||||
<div class="pop_up_in">
|
||||
<b id="pop_up_in_b">請選擇儲值地區</b>
|
||||
<!-- <p countryCode="TW" id="pop_up_in_p1">臺灣</p>
|
||||
<p countryCode="CN" id="pop_up_in_p2">大陸</p> -->
|
||||
<!-- <p>香港</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="stance">
|
||||
<div class="picture">
|
||||
<span id="pay_stance_picture">儲值服務即將開放，請耐心等待</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wx_skip">
|
||||
<img id="wx_skip_img" src="./images/wx_skip.png" alt="">
|
||||
</div>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<!-- <script src="../../common/js/flexible.js"></script> -->
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/pingpp.js"></script>
|
||||
<script src="../../common/js/common2.js?v=8.0"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="./js/index.js?v=1.2"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
346
view/molistar/modules/payPc/js/index.js
Normal file
346
view/molistar/modules/payPc/js/index.js
Normal file
@@ -0,0 +1,346 @@
|
||||
var browser = checkVersion();
|
||||
const urlPrefix = getUrlPrefix();
|
||||
const urlTest = "https://api.molistarlive.com";
|
||||
const urlProduct = "http://beta.api.molistarlive.com";
|
||||
let arr = [];
|
||||
let arr2 = [];
|
||||
let countryCode = "";//选择区号
|
||||
var channelType;//参数值4：鉆石充值 || 参数值5：贵族vip充值 || 6：首充充值
|
||||
let erbanNo;//账号
|
||||
let chargeProdId;//金额:tw_payermax_1003_1000
|
||||
let openId;
|
||||
let payChannel;//付款方式
|
||||
let paymentType;//付款码
|
||||
var host = window.location.host;
|
||||
// let successUrl = `${window.location.protocol}//${host}/molistar/modules/pay/index.html`;//支付成功回调路径
|
||||
let successUrl = window.location.href;//支付成功回调路径
|
||||
let uid;
|
||||
let modeOfPayment = false;//判断是否有选择支付方式
|
||||
let paymentAmount = false;//判断是否有选择付款金额
|
||||
var deviceId;//型号ID
|
||||
|
||||
$(function () {
|
||||
|
||||
if (EnvCheck() == 'test') {//degBug
|
||||
new VConsole();
|
||||
}
|
||||
getInfoFromClient();//请求依赖
|
||||
setTimeout(function () {
|
||||
listChargeAreaInfo();
|
||||
if (browser.app) {
|
||||
erbanNo == null;
|
||||
$('body .pay_method, html .pay_method').css('margin', '-4.5rem auto 0');
|
||||
$('body .header .user, html .header .user').hide();
|
||||
$('.but1').hide();
|
||||
$('.but2').show();
|
||||
}
|
||||
}, 100)
|
||||
function get_param(param) {
|
||||
var query = location.search.substring(1).split('&');
|
||||
for (var i = 0; i < query.length; i++) {
|
||||
var kv = query[i].split('=');
|
||||
if (kv[0] == param) {
|
||||
return kv[1];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
// if (get_param('countryCodeURL') == "TW") {
|
||||
// countryCode = "TW";
|
||||
// $('.area b').text(langReplace(localLang.demoModule.pop_up_in_p1));//'臺灣'
|
||||
// } else if (get_param('countryCodeURL') == "CN") {
|
||||
// if (EnvCheck() == 'test') {
|
||||
// if (host != "anan.uat.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/molistar/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// } else {
|
||||
// if (host != "anan.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/molistar/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// }
|
||||
// countryCode = "CN";
|
||||
// $('.area b').text(langReplace(localLang.demoModule.pop_up_in_p2));//'大陸'
|
||||
// }
|
||||
$('.logingActive').hide();
|
||||
if (browser.weixin) {
|
||||
$('.wx_skip').show();
|
||||
} else {
|
||||
$('.wx_skip').hide();
|
||||
}
|
||||
function getChargePageInfoForH5(countryCode) {
|
||||
deviceId = get_param('deviceId')
|
||||
channelType = get_param('channelType');
|
||||
let is_CN = countryCode == "CN" ? true : false;
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/charge/getChargePageInfoForH5',
|
||||
data: { countryCode, channelType, },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.methods').remove();
|
||||
$('.methods span').remove();
|
||||
console.log(res)
|
||||
let strT = '';
|
||||
let strB = '';
|
||||
// $('.methods0 p').text(res.data.chargeGroups[0].groupName ? res.data.chargeGroups[0].groupName : '');
|
||||
// $('.methods1 p').text(res.data.chargeGroups[1] ? res.data.chargeGroups[1].groupName : '');
|
||||
res.data.chargeGroups.forEach((res1, index1) => {
|
||||
arr = res.data.chargeGroups;
|
||||
// strB +=
|
||||
$('.pay_method .methodBox').append(`
|
||||
<div class="methods methods${index1}">
|
||||
<p style="width: 100%;color: #000;height: 0.8rem;display: none;">${res1.groupName}</p>
|
||||
</div>
|
||||
`);
|
||||
res.data.chargeGroups[index1].chargeWays.forEach((res, index) => {
|
||||
// arr[index] = res.chargeProds;
|
||||
// strT +=
|
||||
$(`.methods${index1}`).append(`
|
||||
<span index=${index} type='${index1}' desc="${res.desc}" paymentType="${res.paymentType}" payChannel="${res.payChannel}">
|
||||
<img src="${res.logo}" alt="">
|
||||
<p>${res.desc}</p>
|
||||
</span>
|
||||
`);
|
||||
});
|
||||
|
||||
});
|
||||
coloursFun(0, 0);
|
||||
// 选择支付方式按钮
|
||||
$('.methods span').click(function () {
|
||||
modeOfPayment = true;
|
||||
console.log($(this))
|
||||
paymentType = $(this).attr('paymentType');
|
||||
payChannel = $(this).attr('payChannel');
|
||||
// $(this).parent().addClass('active').siblings().removeClass('active');
|
||||
$('.methods span').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
coloursFun($(this).attr('index'), $(this).attr('type'));
|
||||
})
|
||||
console.log(countryCode)
|
||||
$('.but2').off();
|
||||
$('.but2').on('click', function () {
|
||||
console.log(countryCode)
|
||||
if (modeOfPayment == false) {
|
||||
logingFun("請選擇儲值方式")//''
|
||||
} else if (paymentAmount == false) {
|
||||
logingFun("請選擇您的儲值金額")//''
|
||||
} else {
|
||||
console.log(countryCode)
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/charge/apply2New',
|
||||
data: { erbanNo, chargeProdId, countryCode, openId, payChannel, paymentType, successUrl, uid, deviceId: deviceId },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
$('.logingActive').text("請稍等");//""
|
||||
$('.logingActive').show();
|
||||
window.location.replace(res.data.payInfo.mweb_url);
|
||||
} else {
|
||||
logingFun(res.message)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
} else if (res.code == 1900) {
|
||||
countryCode = "TW";
|
||||
getChargePageInfoForH5(countryCode);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function listChargeAreaInfo() {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/charge/listChargeAreaInfo',
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
var str = ``;
|
||||
res.data.forEach(res => {
|
||||
str += `
|
||||
<p countryCode="${res.areaCode}" id="pop_up_in_p2">${res.areaName}</p>
|
||||
`
|
||||
})
|
||||
let localCode = JSON.parse(localStorage.getItem('localCode'));
|
||||
if (localCode) {
|
||||
console.log(localCode, 'localCode');
|
||||
$('.area b').text(localCode.areaName);
|
||||
$('.pop_up_in').append(str)
|
||||
getChargePageInfoForH5(localCode.countryCode);
|
||||
} else {
|
||||
countryCode = res.data[0].areaCode;
|
||||
areaName = res.data[0].areaName;
|
||||
localStorage.setItem('localCode', JSON.stringify({countryCode,areaName}))
|
||||
$('.area b').text(res.data[0].areaName);
|
||||
$('.pop_up_in').append(str)
|
||||
getChargePageInfoForH5(res.data[0].areaCode);
|
||||
}
|
||||
|
||||
$('.pop_up_in p').click(function () {
|
||||
$('.area b').text($(this).text());
|
||||
countryCode = $(this).attr("countryCode");
|
||||
areaName = $(this).text();
|
||||
localStorage.setItem('localCode', JSON.stringify({countryCode,areaName}))
|
||||
$('.pop_up').hide();
|
||||
// if (countryCode == "CN") {
|
||||
// if (EnvCheck() == 'test') {
|
||||
// if (host != "anan.uat.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/molistar/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// } else {
|
||||
// if (host != "anan.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/molistar/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
// window.location.href = urlPrefix + '/molistar/modules/pay/index.html?countryCodeURL=' + countryCode;
|
||||
// }
|
||||
getChargePageInfoForH5(countryCode);
|
||||
})
|
||||
} else {
|
||||
logingFun(res.message)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
$('.area').click(function () {
|
||||
$('.pop_up').show();
|
||||
});
|
||||
$('.pop_up').click(function () {
|
||||
$('.pop_up').hide();
|
||||
})
|
||||
|
||||
function coloursFun(index, type) {
|
||||
$('.pay_number .number span').remove();
|
||||
var str = '';
|
||||
console.log(arr[type]);
|
||||
arr[type].chargeWays[index].chargeProds.forEach(res => {//金幣
|
||||
// <b>${res.chargeGoldNum.toLocaleString()} ${"金幣"}</b>
|
||||
str += `
|
||||
<span channel="${res.channel}" chargeProdId="${res.chargeProdId}" seqNo="${res.seqNo}">
|
||||
<b>${res.chargeGoldNum}金幣</b>
|
||||
<i>${res.currencySign} ${res.money.toLocaleString()}</i>
|
||||
</span>
|
||||
`
|
||||
})
|
||||
$('.pay_number .number').append(str);
|
||||
// 选择支付金额按钮
|
||||
$('.pay_number .number span').click(function () {
|
||||
paymentAmount = true;
|
||||
console.log($(this));
|
||||
chargeProdId = $(this).attr('chargeProdId');
|
||||
$(this).addClass('active').siblings().removeClass('active');
|
||||
})
|
||||
}
|
||||
$('.user').on('input', function () {
|
||||
var val = $(this).val();
|
||||
// console.log(val)
|
||||
if (isNumber(val)) {
|
||||
console.log('不是数字')
|
||||
$(this).val("");
|
||||
al = $(this).val();
|
||||
$('.but1').show();
|
||||
$('.but2').hide();
|
||||
} else {
|
||||
if (val != '') {
|
||||
$('.but1').hide();
|
||||
$('.but2').show();
|
||||
erbanNo = val;
|
||||
} else {
|
||||
$('.but1').show();
|
||||
$('.but2').hide();
|
||||
}
|
||||
}
|
||||
})
|
||||
function isNumber(string) {
|
||||
var r = string.match(/^[0-9]*$/);
|
||||
if (r == null) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
function logingFun(res) {
|
||||
$('.logingActive').text(res.message == undefined ? res : res.message);
|
||||
$('.logingActive').show();
|
||||
setTimeout(function () {
|
||||
$('.logingActive').hide();
|
||||
}, 1500)
|
||||
}
|
||||
function ifCNFun() {
|
||||
var envChecks;
|
||||
const url = window.location.href;
|
||||
console.log(url)
|
||||
if (!url) return undefined;
|
||||
if (url.match(/uat/) || url.match(/127.0.0.1:/) || (url.match(/beta.api/))) { envChecks = "test" } else { envChecks = "live" };
|
||||
if (!envChecks) return undefined;
|
||||
return envChecks === 'live' ? urlProduct : urlTest;
|
||||
}
|
||||
})
|
||||
|
||||
$(function () {
|
||||
$(document).ready(function () {
|
||||
var deviceWidth = document.documentElement.clientWidth;
|
||||
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
|
||||
});
|
||||
window.onresize = function () {
|
||||
var deviceWidth = document.documentElement.clientWidth;
|
||||
// var deviceWidth = document.body.clientWidth;
|
||||
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
|
||||
// alert(document.documentElement.style.fontSize)
|
||||
}
|
||||
dragMoveX('.methodBox');
|
||||
dragMoveX('.number');
|
||||
})
|
||||
|
||||
/**
|
||||
* 拖动内容横向滚动
|
||||
* @param {string} container 需要拖动的面板
|
||||
*/
|
||||
function dragMoveX(container) {
|
||||
var flag;
|
||||
var downX;
|
||||
var scrollLeft;
|
||||
//鼠标按下
|
||||
$(document.body).on("mousedown", container, function (event) {
|
||||
// console.log('mousedown')
|
||||
flag = true;
|
||||
downX = event.clientX;
|
||||
scrollLeft = $(this).scrollLeft();
|
||||
});
|
||||
//鼠标移动
|
||||
$(container).on("mousemove", function (event) {
|
||||
// console.log('mousemove',flag)
|
||||
if (flag) {
|
||||
var moveX = event.clientX;
|
||||
var scrollX = moveX - downX;
|
||||
// console.log("moveX" + moveX);
|
||||
// console.log("scrollX" + scrollX);
|
||||
if (scrollX < 0 && scrollLeft > 0) {
|
||||
$(this).scrollLeft(scrollLeft - scrollX)
|
||||
}
|
||||
else {
|
||||
$(this).scrollLeft(scrollLeft - scrollX)
|
||||
}
|
||||
}
|
||||
});
|
||||
//鼠标释放
|
||||
$(container).on("mouseup", function () {
|
||||
// console.log('mouseup')
|
||||
flag = false;
|
||||
});
|
||||
/**
|
||||
* 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
|
||||
* 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
|
||||
* */
|
||||
//鼠标移出元素
|
||||
$(container).on("mouseleave", function (event) {
|
||||
// console.log('mouseleave',event.pageX,document.body.offsetWidth)
|
||||
flag = false;
|
||||
if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
|
||||
console.log('在元素上移出')
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
21
view/molistar/modules/payPc/local/ar.js
Normal file
21
view/molistar/modules/payPc/local/ar.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 阿拉伯
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/molistar/modules/payPc/local/en.js
Normal file
21
view/molistar/modules/payPc/local/en.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 英文
|
||||
langEn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/molistar/modules/payPc/local/in.js
Normal file
21
view/molistar/modules/payPc/local/in.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 印尼语
|
||||
langIn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/molistar/modules/payPc/local/zh-CN.js
Normal file
21
view/molistar/modules/payPc/local/zh-CN.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 简体中文
|
||||
langZhCN = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/molistar/modules/payPc/local/zh-TW.js
Normal file
21
view/molistar/modules/payPc/local/zh-TW.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 繁体中文
|
||||
langZhTW = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user