(仅支持公爵以上贵族等级哦)
+
请选择儲值方式:
+請選擇您的儲值金額:
+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 @@ + + + + +
+ + + + +
+
+
+
天
+天
++ + ${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}
`) : '' + } + +剩余${item.expireDays}天
++ ${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}
`) : '' + } + +请选择儲值方式:
+請選擇您的儲值金額:
+${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