diff --git a/view/molistar/activity/act-nameplate/css/index.css b/view/molistar/activity/act-nameplate/css/index.css new file mode 100644 index 0000000..a9b9f5f --- /dev/null +++ b/view/molistar/activity/act-nameplate/css/index.css @@ -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; +} diff --git a/view/molistar/activity/act-nameplate/css/index.scss b/view/molistar/activity/act-nameplate/css/index.scss new file mode 100644 index 0000000..5e9b0b8 --- /dev/null +++ b/view/molistar/activity/act-nameplate/css/index.scss @@ -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; +} \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/css/nobleHighRank.css b/view/molistar/activity/act-nameplate/css/nobleHighRank.css new file mode 100644 index 0000000..8b64753 --- /dev/null +++ b/view/molistar/activity/act-nameplate/css/nobleHighRank.css @@ -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; +} diff --git a/view/molistar/activity/act-nameplate/css/nobleHighRank.scss b/view/molistar/activity/act-nameplate/css/nobleHighRank.scss new file mode 100644 index 0000000..1915a50 --- /dev/null +++ b/view/molistar/activity/act-nameplate/css/nobleHighRank.scss @@ -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); + } +} \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/css/record.css b/view/molistar/activity/act-nameplate/css/record.css new file mode 100644 index 0000000..2c49a08 --- /dev/null +++ b/view/molistar/activity/act-nameplate/css/record.css @@ -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; +} diff --git a/view/molistar/activity/act-nameplate/css/record.scss b/view/molistar/activity/act-nameplate/css/record.scss new file mode 100644 index 0000000..d18d7ce --- /dev/null +++ b/view/molistar/activity/act-nameplate/css/record.scss @@ -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); + } +} \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/images/apply-btn-basics.png b/view/molistar/activity/act-nameplate/images/apply-btn-basics.png new file mode 100644 index 0000000..2589762 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/apply-btn-basics.png differ diff --git a/view/molistar/activity/act-nameplate/images/apply-new.png b/view/molistar/activity/act-nameplate/images/apply-new.png new file mode 100644 index 0000000..0902445 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/apply-new.png differ diff --git a/view/molistar/activity/act-nameplate/images/close.png b/view/molistar/activity/act-nameplate/images/close.png new file mode 100644 index 0000000..0cea635 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/close.png differ diff --git a/view/molistar/activity/act-nameplate/images/confirm.png b/view/molistar/activity/act-nameplate/images/confirm.png new file mode 100644 index 0000000..8c7da06 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/confirm.png differ diff --git a/view/molistar/activity/act-nameplate/images/decrease.png b/view/molistar/activity/act-nameplate/images/decrease.png new file mode 100644 index 0000000..98ab114 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/decrease.png differ diff --git a/view/molistar/activity/act-nameplate/images/default.png b/view/molistar/activity/act-nameplate/images/default.png new file mode 100644 index 0000000..b1af654 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/default.png differ diff --git a/view/molistar/activity/act-nameplate/images/default1.png b/view/molistar/activity/act-nameplate/images/default1.png new file mode 100644 index 0000000..4eaa4d3 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/default1.png differ diff --git a/view/molistar/activity/act-nameplate/images/delay-bg.png b/view/molistar/activity/act-nameplate/images/delay-bg.png new file mode 100644 index 0000000..d32e9d5 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/delay-bg.png differ diff --git a/view/molistar/activity/act-nameplate/images/delay-btn.png b/view/molistar/activity/act-nameplate/images/delay-btn.png new file mode 100644 index 0000000..1aea494 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/delay-btn.png differ diff --git a/view/molistar/activity/act-nameplate/images/disabled-btn.png b/view/molistar/activity/act-nameplate/images/disabled-btn.png new file mode 100644 index 0000000..032e012 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/disabled-btn.png differ diff --git a/view/molistar/activity/act-nameplate/images/gocrystal.png b/view/molistar/activity/act-nameplate/images/gocrystal.png new file mode 100644 index 0000000..2694258 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/gocrystal.png differ diff --git a/view/molistar/activity/act-nameplate/images/godiamond.png b/view/molistar/activity/act-nameplate/images/godiamond.png new file mode 100644 index 0000000..7e0feda Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/godiamond.png differ diff --git a/view/molistar/activity/act-nameplate/images/increase.png b/view/molistar/activity/act-nameplate/images/increase.png new file mode 100644 index 0000000..b527cf7 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/increase.png differ diff --git a/view/molistar/activity/act-nameplate/images/max.png b/view/molistar/activity/act-nameplate/images/max.png new file mode 100644 index 0000000..57353d2 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/max.png differ diff --git a/view/molistar/activity/act-nameplate/images/new-bg.png b/view/molistar/activity/act-nameplate/images/new-bg.png new file mode 100644 index 0000000..09b31dc Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/new-bg.png differ diff --git a/view/molistar/activity/act-nameplate/images/noble/applicationRecord.png b/view/molistar/activity/act-nameplate/images/noble/applicationRecord.png new file mode 100644 index 0000000..b5cbd1c Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/noble/applicationRecord.png differ diff --git a/view/molistar/activity/act-nameplate/images/noble/d_bg.png b/view/molistar/activity/act-nameplate/images/noble/d_bg.png new file mode 100644 index 0000000..090031d Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/noble/d_bg.png differ diff --git a/view/molistar/activity/act-nameplate/images/noble/g_bg.png b/view/molistar/activity/act-nameplate/images/noble/g_bg.png new file mode 100644 index 0000000..c3aff45 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/noble/g_bg.png differ diff --git a/view/molistar/activity/act-nameplate/images/noble/header.png b/view/molistar/activity/act-nameplate/images/noble/header.png new file mode 100644 index 0000000..25b31b8 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/noble/header.png differ diff --git a/view/molistar/activity/act-nameplate/images/noble/minpai_bg.png b/view/molistar/activity/act-nameplate/images/noble/minpai_bg.png new file mode 100644 index 0000000..35abe07 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/noble/minpai_bg.png differ diff --git a/view/molistar/activity/act-nameplate/images/noble/q_bg.png b/view/molistar/activity/act-nameplate/images/noble/q_bg.png new file mode 100644 index 0000000..e9262e7 Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/noble/q_bg.png differ diff --git a/view/molistar/activity/act-nameplate/images/noble/s_bg.png b/view/molistar/activity/act-nameplate/images/noble/s_bg.png new file mode 100644 index 0000000..c95e3be Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/noble/s_bg.png differ diff --git a/view/molistar/activity/act-nameplate/images/select-bg.png b/view/molistar/activity/act-nameplate/images/select-bg.png new file mode 100644 index 0000000..6c80ecf Binary files /dev/null and b/view/molistar/activity/act-nameplate/images/select-bg.png differ diff --git a/view/molistar/activity/act-nameplate/index.html b/view/molistar/activity/act-nameplate/index.html new file mode 100644 index 0000000..cba817f --- /dev/null +++ b/view/molistar/activity/act-nameplate/index.html @@ -0,0 +1,120 @@ + + + + + + + + + + 精美铭牌送不停 + + + + + + + + +
+
+ +
+ +
+
+
+
+ + +
+
+ +
    + +
+
+
+
+
+ + +
+
+ +
+ 铭牌样式: +
+

+ + +

+
+
+
+ 申请时长: +
+ +

+ +
+
+
+
+
+
+ + +
+
+ +
+ 铭牌样式: +
    + +
+
+
+ 铭牌文字: + +
+
+ 申请时长: +
+ +

+ +
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/js/nobleHighRank.js b/view/molistar/activity/act-nameplate/js/nobleHighRank.js new file mode 100644 index 0000000..0252913 --- /dev/null +++ b/view/molistar/activity/act-nameplate/js/nobleHighRank.js @@ -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('暂不可申请'); + } + } +}) \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/js/nobleHighRank_record.js b/view/molistar/activity/act-nameplate/js/nobleHighRank_record.js new file mode 100644 index 0000000..9b22637 --- /dev/null +++ b/view/molistar/activity/act-nameplate/js/nobleHighRank_record.js @@ -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 += ` +
  • +
    +
    + ${item.text} +

    + + ${dateFormat(item.createTime, "yyyy-MM-dd")} +

    +
    +
    +

    ${item.auditType === 0 ? '申请中' : (item.auditType === 1 ? '不通过' : '已通过')}

    + ${item.remark ? (item.remark.length > 8 ? `

    ${item.remark.slice(0, 8) + '...'}

    ` : `

    ${item.remark}

    `) : '' + } + +
    +
  • + ` + }) + $('.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 + } + } + } + }) +}) \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/js/public.js b/view/molistar/activity/act-nameplate/js/public.js new file mode 100644 index 0000000..8319819 --- /dev/null +++ b/view/molistar/activity/act-nameplate/js/public.js @@ -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 += ` +
  • +

    剩余${item.expireDays}天

    +
    + + ${item.word} +
    +
    + +
    +
  • + ` + }) + $('.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 += ` +
  • +
    + +
    +
  • + ` + }) + $('.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) + } + }) + +}); + diff --git a/view/molistar/activity/act-nameplate/js/record.js b/view/molistar/activity/act-nameplate/js/record.js new file mode 100644 index 0000000..6ccabbb --- /dev/null +++ b/view/molistar/activity/act-nameplate/js/record.js @@ -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 += ` +
  • +
    +
    + ${item.text} +

    + ${item.applyType === 1 ? '申请' : '延长'}${item.applyDay}天 + ${dateFormat(item.createTime, "yyyy-MM-dd")} +

    +
    +
    +

    ${item.auditType === 0 ? '申请中' : (item.auditType === 1 ? '不通过' : '已通过')}

    + ${ + item.remark ? (item.remark.length > 8 ? `

    ${item.remark.slice(0, 8) + '...'}

    ` : `

    ${item.remark}

    `) : '' + } + +
    +
  • + ` + }) + $('.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 + } + } + } + }) +}) \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/nobleHighRank.html b/view/molistar/activity/act-nameplate/nobleHighRank.html new file mode 100644 index 0000000..93768e5 --- /dev/null +++ b/view/molistar/activity/act-nameplate/nobleHighRank.html @@ -0,0 +1,65 @@ + + + + + + + + 定制贵族专属铭牌 + + + + + + +
    +
    +
    + 贵族可以支持铭牌内容自定义啦~ +

    (仅支持公爵以上贵族等级哦)

    +
    +
    + + + + + + + + + + \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/nobleHighRank_record.html b/view/molistar/activity/act-nameplate/nobleHighRank_record.html new file mode 100644 index 0000000..90c9e5c --- /dev/null +++ b/view/molistar/activity/act-nameplate/nobleHighRank_record.html @@ -0,0 +1,29 @@ + + + + + + + + 申请记录 + + + + + + + +
    + + 暂无申请记录 +
    + + + + + + + + \ No newline at end of file diff --git a/view/molistar/activity/act-nameplate/record.html b/view/molistar/activity/act-nameplate/record.html new file mode 100644 index 0000000..6d2762f --- /dev/null +++ b/view/molistar/activity/act-nameplate/record.html @@ -0,0 +1,35 @@ + + + + + + + + + + 申请记录 + + + + + + + + + +
    + + 暂无申请记录 +
    + + + + + + + + \ No newline at end of file diff --git a/view/molistar/modules/payPc/css/index.css b/view/molistar/modules/payPc/css/index.css new file mode 100644 index 0000000..6d9bf8d --- /dev/null +++ b/view/molistar/modules/payPc/css/index.css @@ -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 */ diff --git a/view/molistar/modules/payPc/css/index.scss b/view/molistar/modules/payPc/css/index.scss new file mode 100644 index 0000000..f1d0f86 --- /dev/null +++ b/view/molistar/modules/payPc/css/index.scss @@ -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; +} \ No newline at end of file diff --git a/view/molistar/modules/payPc/images/active.png b/view/molistar/modules/payPc/images/active.png new file mode 100644 index 0000000..0fb061b Binary files /dev/null and b/view/molistar/modules/payPc/images/active.png differ diff --git a/view/molistar/modules/payPc/images/but.png b/view/molistar/modules/payPc/images/but.png new file mode 100644 index 0000000..3007b0e Binary files /dev/null and b/view/molistar/modules/payPc/images/but.png differ diff --git a/view/molistar/modules/payPc/images/header.png b/view/molistar/modules/payPc/images/header.png new file mode 100644 index 0000000..b2e69c7 Binary files /dev/null and b/view/molistar/modules/payPc/images/header.png differ diff --git a/view/molistar/modules/payPc/images/jvxing.png b/view/molistar/modules/payPc/images/jvxing.png new file mode 100644 index 0000000..08d4f87 Binary files /dev/null and b/view/molistar/modules/payPc/images/jvxing.png differ diff --git a/view/molistar/modules/payPc/images/logo.png b/view/molistar/modules/payPc/images/logo.png new file mode 100644 index 0000000..f9ca1be Binary files /dev/null and b/view/molistar/modules/payPc/images/logo.png differ diff --git a/view/molistar/modules/payPc/images/more.png b/view/molistar/modules/payPc/images/more.png new file mode 100644 index 0000000..5a077cd Binary files /dev/null and b/view/molistar/modules/payPc/images/more.png differ diff --git a/view/molistar/modules/payPc/images/noActive.png b/view/molistar/modules/payPc/images/noActive.png new file mode 100644 index 0000000..4e36929 Binary files /dev/null and b/view/molistar/modules/payPc/images/noActive.png differ diff --git a/view/molistar/modules/payPc/images/noBut.png b/view/molistar/modules/payPc/images/noBut.png new file mode 100644 index 0000000..7500d3a Binary files /dev/null and b/view/molistar/modules/payPc/images/noBut.png differ diff --git a/view/molistar/modules/payPc/images/null.png b/view/molistar/modules/payPc/images/null.png new file mode 100644 index 0000000..2f6f634 Binary files /dev/null and b/view/molistar/modules/payPc/images/null.png differ diff --git a/view/molistar/modules/payPc/images/payBg.png b/view/molistar/modules/payPc/images/payBg.png new file mode 100644 index 0000000..c006abe Binary files /dev/null and b/view/molistar/modules/payPc/images/payBg.png differ diff --git a/view/molistar/modules/payPc/images/wx_skip.png b/view/molistar/modules/payPc/images/wx_skip.png new file mode 100644 index 0000000..b60e05b Binary files /dev/null and b/view/molistar/modules/payPc/images/wx_skip.png differ diff --git a/view/molistar/modules/payPc/images/wx_skip_ar.png b/view/molistar/modules/payPc/images/wx_skip_ar.png new file mode 100644 index 0000000..70a1716 Binary files /dev/null and b/view/molistar/modules/payPc/images/wx_skip_ar.png differ diff --git a/view/molistar/modules/payPc/images/wx_skip_en.png b/view/molistar/modules/payPc/images/wx_skip_en.png new file mode 100644 index 0000000..27ec2a5 Binary files /dev/null and b/view/molistar/modules/payPc/images/wx_skip_en.png differ diff --git a/view/molistar/modules/payPc/images/wx_skip_in.png b/view/molistar/modules/payPc/images/wx_skip_in.png new file mode 100644 index 0000000..923e992 Binary files /dev/null and b/view/molistar/modules/payPc/images/wx_skip_in.png differ diff --git a/view/molistar/modules/payPc/index.html b/view/molistar/modules/payPc/index.html new file mode 100644 index 0000000..05fec71 --- /dev/null +++ b/view/molistar/modules/payPc/index.html @@ -0,0 +1,108 @@ + + + + + + 充值 + + + + + + + + + + + + + + +
    + +
    + +
    + + MoliStar儲值中心 +
    + +
    + + + +
    + +
    + +
    +

    请选择儲值方式:

    +
    + + +
    +
    + + +
    +

    請選擇您的儲值金額:

    +
    + +
    +
    + +
    立即支付
    +
    立即支付
    +
    + + +
    + + +
    +
    + 請選擇儲值地區 + + +
    +
    +
    +
    + 儲值服務即將開放,請耐心等待 +
    +
    +
    + +
    + + + + + + + + + + \ No newline at end of file diff --git a/view/molistar/modules/payPc/js/index.js b/view/molistar/modules/payPc/js/index.js new file mode 100644 index 0000000..5046a17 --- /dev/null +++ b/view/molistar/modules/payPc/js/index.js @@ -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(` +
    +

    ${res1.groupName}

    +
    + `); + res.data.chargeGroups[index1].chargeWays.forEach((res, index) => { + // arr[index] = res.chargeProds; + // strT += + $(`.methods${index1}`).append(` + + +

    ${res.desc}

    +
    + `); + }); + + }); + 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 += ` +

    ${res.areaName}

    + ` + }) + 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 => {//金幣 + // ${res.chargeGoldNum.toLocaleString()} ${"金幣"} + str += ` + + ${res.chargeGoldNum}金幣 + ${res.currencySign} ${res.money.toLocaleString()} + + ` + }) + $('.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; + } + }); +} \ No newline at end of file diff --git a/view/molistar/modules/payPc/local/ar.js b/view/molistar/modules/payPc/local/ar.js new file mode 100644 index 0000000..39323bc --- /dev/null +++ b/view/molistar/modules/payPc/local/ar.js @@ -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', + } +} \ No newline at end of file diff --git a/view/molistar/modules/payPc/local/en.js b/view/molistar/modules/payPc/local/en.js new file mode 100644 index 0000000..d5e2f1a --- /dev/null +++ b/view/molistar/modules/payPc/local/en.js @@ -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', + } +} \ No newline at end of file diff --git a/view/molistar/modules/payPc/local/in.js b/view/molistar/modules/payPc/local/in.js new file mode 100644 index 0000000..176c26c --- /dev/null +++ b/view/molistar/modules/payPc/local/in.js @@ -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', + } +} \ No newline at end of file diff --git a/view/molistar/modules/payPc/local/zh-CN.js b/view/molistar/modules/payPc/local/zh-CN.js new file mode 100644 index 0000000..e3cb87b --- /dev/null +++ b/view/molistar/modules/payPc/local/zh-CN.js @@ -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', + } +} \ No newline at end of file diff --git a/view/molistar/modules/payPc/local/zh-TW.js b/view/molistar/modules/payPc/local/zh-TW.js new file mode 100644 index 0000000..3a9d90e --- /dev/null +++ b/view/molistar/modules/payPc/local/zh-TW.js @@ -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', + } +} \ No newline at end of file