diff --git a/view/molistar/activity/act-nameplateNew/css/index.css b/view/molistar/activity/act-nameplateNew/css/index.css new file mode 100644 index 0000000..e760ffb --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/css/index.css @@ -0,0 +1,516 @@ +@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: 34.02667rem; + background: url("../images/max.png?v=1.0") no-repeat; + background-size: 100% 100%; + font-family: 'pingfang-bold'; +} + +.max .record { + position: absolute; + position: absolute; + top: 6.61333rem; + right: 0; + width: 1.64rem; + height: 0.57333rem; +} + +.max .record img { + width: 100%; + height: 100%; +} + +.max .btn { + position: absolute; + top: 16.1rem; + left: 1.61rem; + width: 2.94667rem; + height: 1.46667rem; +} + +.max .btn.basics-receive { + left: 5rem; +} + +.max .btn.advance-send { + top: 23.34667rem; +} + +.max .btn.advance-receive { + top: 23.34667rem; + left: 5rem; +} + +.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: 6.37333rem; + height: 0.82667rem; + 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: 6.37333rem; + height: 0.82667rem; + background: url("../images/apply-new.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: 6.37333rem; + height: 0.82667rem; + background: url("../images/apply-new.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; +} + +.english .max { + height: 35.76rem; +} diff --git a/view/molistar/activity/act-nameplateNew/css/index.scss b/view/molistar/activity/act-nameplateNew/css/index.scss new file mode 100644 index 0000000..467da2f --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/css/index.scss @@ -0,0 +1,434 @@ +@function px2rem($px) { + @return $px / 75+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(2552); + background: url('../images/max.png?v=1.0') no-repeat; + background-size: 100% 100%; + font-family: 'pingfang-bold'; + + .record { + position: absolute; + position: absolute; + top: px2rem(496); + right: 0; + width: px2rem(123); + height: px2rem(43); + + img { + width: 100%; + height: 100%; + } + } + + .btn { + position: absolute; + top: 16.1rem; + left: 1.61rem; + width: px2rem(221); + height: px2rem(110); + + &.basics-receive { + left: 5rem; + } + + &.advance-send { + top: 23.34667rem; + } + + &.advance-receive { + top: 23.34667rem; + left: 5rem; + } + + 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(478); + height: px2rem(62); + 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(478); + height: px2rem(62); + background: url('../images/apply-new.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(478); + height: px2rem(62); + background: url('../images/apply-new.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; +} + +.english{ + .max{ + height: px2rem(2682); + } +} \ No newline at end of file diff --git a/view/molistar/activity/act-nameplateNew/css/nobleHighRank.css b/view/molistar/activity/act-nameplateNew/css/nobleHighRank.css new file mode 100644 index 0000000..8b64753 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/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-nameplateNew/css/nobleHighRank.scss b/view/molistar/activity/act-nameplateNew/css/nobleHighRank.scss new file mode 100644 index 0000000..1915a50 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/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-nameplateNew/css/record.css b/view/molistar/activity/act-nameplateNew/css/record.css new file mode 100644 index 0000000..2c49a08 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/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-nameplateNew/css/record.scss b/view/molistar/activity/act-nameplateNew/css/record.scss new file mode 100644 index 0000000..d18d7ce --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/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-nameplateNew/images/apply-btn-basics-ar.png b/view/molistar/activity/act-nameplateNew/images/apply-btn-basics-ar.png new file mode 100644 index 0000000..def2091 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/apply-btn-basics-ar.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/apply-btn-basics-en.png b/view/molistar/activity/act-nameplateNew/images/apply-btn-basics-en.png new file mode 100644 index 0000000..6951946 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/apply-btn-basics-en.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/apply-btn-basics.png b/view/molistar/activity/act-nameplateNew/images/apply-btn-basics.png new file mode 100644 index 0000000..0182062 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/apply-btn-basics.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/apply-new-ar.png b/view/molistar/activity/act-nameplateNew/images/apply-new-ar.png new file mode 100644 index 0000000..6e9210f Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/apply-new-ar.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/apply-new-en.png b/view/molistar/activity/act-nameplateNew/images/apply-new-en.png new file mode 100644 index 0000000..4fd92f5 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/apply-new-en.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/apply-new.png b/view/molistar/activity/act-nameplateNew/images/apply-new.png new file mode 100644 index 0000000..3eababb Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/apply-new.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/close.png b/view/molistar/activity/act-nameplateNew/images/close.png new file mode 100644 index 0000000..0cea635 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/close.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/confirm.png b/view/molistar/activity/act-nameplateNew/images/confirm.png new file mode 100644 index 0000000..8c7da06 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/confirm.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/decrease.png b/view/molistar/activity/act-nameplateNew/images/decrease.png new file mode 100644 index 0000000..98ab114 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/decrease.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/default.png b/view/molistar/activity/act-nameplateNew/images/default.png new file mode 100644 index 0000000..b1af654 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/default.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/default1.png b/view/molistar/activity/act-nameplateNew/images/default1.png new file mode 100644 index 0000000..4eaa4d3 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/default1.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/delay-bg.png b/view/molistar/activity/act-nameplateNew/images/delay-bg.png new file mode 100644 index 0000000..d32e9d5 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/delay-bg.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/delay-btn-ar.png b/view/molistar/activity/act-nameplateNew/images/delay-btn-ar.png new file mode 100644 index 0000000..00c638b Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/delay-btn-ar.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/delay-btn-en.png b/view/molistar/activity/act-nameplateNew/images/delay-btn-en.png new file mode 100644 index 0000000..6a61fdb Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/delay-btn-en.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/delay-btn.png b/view/molistar/activity/act-nameplateNew/images/delay-btn.png new file mode 100644 index 0000000..d31c62a Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/delay-btn.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/disabled-btn-ar.png b/view/molistar/activity/act-nameplateNew/images/disabled-btn-ar.png new file mode 100644 index 0000000..c7e33ec Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/disabled-btn-ar.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/disabled-btn-en.png b/view/molistar/activity/act-nameplateNew/images/disabled-btn-en.png new file mode 100644 index 0000000..146a121 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/disabled-btn-en.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/disabled-btn.png b/view/molistar/activity/act-nameplateNew/images/disabled-btn.png new file mode 100644 index 0000000..a45fc39 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/disabled-btn.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/gocrystal.png b/view/molistar/activity/act-nameplateNew/images/gocrystal.png new file mode 100644 index 0000000..2694258 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/gocrystal.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/godiamond.png b/view/molistar/activity/act-nameplateNew/images/godiamond.png new file mode 100644 index 0000000..7e0feda Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/godiamond.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/increase.png b/view/molistar/activity/act-nameplateNew/images/increase.png new file mode 100644 index 0000000..b527cf7 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/increase.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/max-ar.png b/view/molistar/activity/act-nameplateNew/images/max-ar.png new file mode 100644 index 0000000..0452cb3 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/max-ar.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/max-en.png b/view/molistar/activity/act-nameplateNew/images/max-en.png new file mode 100644 index 0000000..47145f3 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/max-en.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/max.png b/view/molistar/activity/act-nameplateNew/images/max.png new file mode 100644 index 0000000..2b02371 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/max.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/new-bg-ar.png b/view/molistar/activity/act-nameplateNew/images/new-bg-ar.png new file mode 100644 index 0000000..8f3218d Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/new-bg-ar.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/new-bg-en.png b/view/molistar/activity/act-nameplateNew/images/new-bg-en.png new file mode 100644 index 0000000..5f25664 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/new-bg-en.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/new-bg.png b/view/molistar/activity/act-nameplateNew/images/new-bg.png new file mode 100644 index 0000000..7eb59e0 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/new-bg.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/noble/applicationRecord.png b/view/molistar/activity/act-nameplateNew/images/noble/applicationRecord.png new file mode 100644 index 0000000..b5cbd1c Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/noble/applicationRecord.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/noble/d_bg.png b/view/molistar/activity/act-nameplateNew/images/noble/d_bg.png new file mode 100644 index 0000000..090031d Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/noble/d_bg.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/noble/g_bg.png b/view/molistar/activity/act-nameplateNew/images/noble/g_bg.png new file mode 100644 index 0000000..c3aff45 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/noble/g_bg.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/noble/header.png b/view/molistar/activity/act-nameplateNew/images/noble/header.png new file mode 100644 index 0000000..25b31b8 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/noble/header.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/noble/minpai_bg.png b/view/molistar/activity/act-nameplateNew/images/noble/minpai_bg.png new file mode 100644 index 0000000..35abe07 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/noble/minpai_bg.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/noble/q_bg.png b/view/molistar/activity/act-nameplateNew/images/noble/q_bg.png new file mode 100644 index 0000000..e9262e7 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/noble/q_bg.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/noble/s_bg.png b/view/molistar/activity/act-nameplateNew/images/noble/s_bg.png new file mode 100644 index 0000000..c95e3be Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/noble/s_bg.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/record-ar.png b/view/molistar/activity/act-nameplateNew/images/record-ar.png new file mode 100644 index 0000000..eb06550 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/record-ar.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/record-en.png b/view/molistar/activity/act-nameplateNew/images/record-en.png new file mode 100644 index 0000000..588c09e Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/record-en.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/record.png b/view/molistar/activity/act-nameplateNew/images/record.png new file mode 100644 index 0000000..9ca3d9e Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/record.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/select-bg-ar.png b/view/molistar/activity/act-nameplateNew/images/select-bg-ar.png new file mode 100644 index 0000000..8e71000 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/select-bg-ar.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/select-bg-en.png b/view/molistar/activity/act-nameplateNew/images/select-bg-en.png new file mode 100644 index 0000000..dff3e56 Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/select-bg-en.png differ diff --git a/view/molistar/activity/act-nameplateNew/images/select-bg.png b/view/molistar/activity/act-nameplateNew/images/select-bg.png new file mode 100644 index 0000000..ccc153f Binary files /dev/null and b/view/molistar/activity/act-nameplateNew/images/select-bg.png differ diff --git a/view/molistar/activity/act-nameplateNew/index.html b/view/molistar/activity/act-nameplateNew/index.html new file mode 100644 index 0000000..e51424f --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/index.html @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+
+
+
+ + +
+
+ +
    + +
+
+
+
+
+ + +
+
+ +
+ 铭牌样式： +
+

+ + +

+
+
+
+ 申请时长： +
+ +

天

+ +
+
+
+
+
+
+ + +
+
+ +
+ +
    + +
+
+
+ + +
+
+ +
+ +

+ +
+
+
+
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/view/molistar/activity/act-nameplateNew/js/nobleHighRank.js b/view/molistar/activity/act-nameplateNew/js/nobleHighRank.js new file mode 100644 index 0000000..0252913 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/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-nameplateNew/js/nobleHighRank_record.js b/view/molistar/activity/act-nameplateNew/js/nobleHighRank_record.js new file mode 100644 index 0000000..9b22637 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/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-nameplateNew/js/public.js b/view/molistar/activity/act-nameplateNew/js/public.js new file mode 100644 index 0000000..45add9d --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/js/public.js @@ -0,0 +1,468 @@ + +let urlPrefix = getUrlPrefix(); +var browser = checkVersion(); +var info = {}; +if (EnvCheck() === 'test') new VConsole +// 封裝layer消息提醒框 +let layerIndex; +var langReplace; +var localLang; +const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => { + layer.open({ + type: 2, + shadeClose: false, + content, + success(e) { + layerIndex = $(e).attr('index') + } + }) +} +const hideLoading = (index) => { + layer.close(index) +} +const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => { + layer.open({ + content, + time, + skin: 'msg' + }) +} + +let delayLock = false, newApplyLock = false +let btnStatus = [] +var partitionId = null; +$(function () { + getInfoFromClient() + fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言 + setTimeout(() => { + langReplace = window.lang.replace; + localLang = window.lang; + fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言 + translateFun(); + getUserNameplateInfo() + userGet() + }, 50) + function translateFun() { + var langReplace = window.lang.replace; + var localLang = window.lang; + $('.max').attr('style', langReplace(localLang.demoModule.max)) + $('.max .shade-mask-new .shade-content-new').attr('style', langReplace(localLang.demoModule.img4)) + $('.max .shade-mask .shade-content, .max .shade-mask-delay .shade-content-delay').attr('style', langReplace(localLang.demoModule.img44)) + $('.apply-btn').attr('style', langReplace(localLang.demoModule.img5)) + $('.max .btn img').attr('src', langReplace(localLang.demoModule.img2)) + $('.max .record img').attr('src', langReplace(localLang.demoModule.img6)) + $('.title_t').html(langReplace(localLang.demoModule.title_t)); + $('.text1').html(langReplace(localLang.demoModule.text1)); + $('.text2').html(langReplace(localLang.demoModule.text2)); + $('.text3').html(langReplace(localLang.demoModule.text3)); + $('.text4').html(langReplace(localLang.demoModule.text4)); + $('.text5').attr('placeholder', langReplace(localLang.demoModule.text5)); + } + 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(langReplace(localLang.demoModule.text6)) + } + $('.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(langReplace(localLang.demoModule.text7)) + } 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(langReplace(localLang.demoModule.text6)) + } + $('.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(langReplace(localLang.demoModule.text7)) + } 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() + let ipt = $('.text5').val(); + if (!newNameplateId) { + toastMsg(langReplace(localLang.demoModule.text8)); + return + } + if (!ipt) { + toastMsg(langReplace(localLang.demoModule.text9)); + return + } + // else { + // if (ipt.length !== 4) { + // toastMsg(langReplace(localLang.demoModule.text10)); + // 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) + } + }) + +}); +// 獲取用戶銘牌狀態 +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(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} +const userGet = () => { + showLoading() + networkRequest({ + type: 'GET', + url: urlPrefix + '/user/get', + data: { + uid: pubInfo.uid + }, + success(res) { + hideLoading(layerIndex); + if (res.code === 200) { + partitionId = res.data.partitionId + if (partitionId == 1 || partitionId == 2) { + $('.text5').attr('maxlength', 13); + } else { + $('.text5').attr('maxlength', 4); + } + renderBtnStatus() + } else { + toastMsg(res.message) + } + }, + error() { + hideLoading(layerIndex); + toastMsg(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} + +// 渲染首頁按鈕狀態 +const renderBtnStatus = () => { + btnStatus.map((item, index) => { + if (index > 1) { + // 進階款式 + $('.btn').eq(index).find('img').attr('src', `${item > 0 ? langReplace(localLang.demoModule.img3) : langReplace(localLang.demoModule.img2)}`) + if (item > 0) { + $('.btn').eq(index).on('click', () => { + getUserNameplateList(index + 1) + }) + } + } else { + // 基礎款式 + $('.btn').eq(index).find('img').attr('src', `${item > 0 ? langReplace(localLang.demoModule.img3) : langReplace(localLang.demoModule.img2)}`) + 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(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} + +// 渲染銘牌列錶(選擇彈窗) +const renderNameplateList = () => { + let str = '' + userNameplateList.map(item => { + str += ` +
  • +

    ${langReplace(localLang.demoModule.text13)}${item.expireDays}${langReplace(localLang.demoModule.text3)}

    +
    + + ${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(langReplace(localLang.demoModule.text11)) + return + } + newNameplateList = res.data + renderNewNameplateList() + } else { + toastMsg(res.message) + } + }, + error() { + hideLoading(layerIndex); + toastMsg(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} + +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(langReplace(localLang.demoModule.text12)) + $('.shade-mask-delay').hide() + $('body').css('overflow', 'auto') + delayLock = false + setTimeout(() => { + location.reload() + }, 500) + } else { + toastMsg(res.message) + } + }, + error() { + hideLoading(layerIndex); + toastMsg(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} + +// 確認申請新銘牌 +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(langReplace(localLang.demoModule.text12)) + $('.shade-mask-new').hide() + $('body').css('overflow', 'auto') + newApplyLock = false + setTimeout(() => { + location.reload() + }, 500) + } else { + newApplyLock = false + toastMsg(res.message) + } + }, + error() { + hideLoading(layerIndex); + toastMsg(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} + + diff --git a/view/molistar/activity/act-nameplateNew/js/record.js b/view/molistar/activity/act-nameplateNew/js/record.js new file mode 100644 index 0000000..6c91cd7 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/js/record.js @@ -0,0 +1,131 @@ +let urlPrefix = getUrlPrefix(); +if (EnvCheck() === 'test') new VConsole + +// 封裝layer消息提醒框 +let layerIndex; +var langReplace; +var localLang; +const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => { + layer.open({ + type: 2, + shadeClose: false, + content, + success(e) { + layerIndex = $(e).attr('index') + } + }) +} +const hideLoading = (index) => { + layer.close(index) +} +const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), 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(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} +// 渲染申请记录 +const renderRecord = () => { + let str = ''; + recordList.map(item => { + str += ` +
  • +
    +
    + ${item.text} +

    + ${item.applyType === 1 ? langReplace(localLang.demoModule.text16) : langReplace(localLang.demoModule.text17)}${item.applyDay}${langReplace(localLang.demoModule.text3)} + ${dateFormat(item.createTime, "yyyy-MM-dd")} +

    +
    +
    +

    ${item.auditType === 0 ? langReplace(localLang.demoModule.text18) : (item.auditType === 1 ? langReplace(localLang.demoModule.text19) : langReplace(localLang.demoModule.text20))}

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

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

    ` : `

    ${item.remark}

    `) : '' + } + +
    +
    • + ` + }) + $('.max').html(str) +} + +$(function () { + getInfoFromClient() + fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言 + setTimeout(() => { + langReplace = window.lang.replace; + localLang = window.lang; + fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言 + translateFun(); + getUserApplyRecord() + }, 50) + function translateFun() { + var langReplace = window.lang.replace; + var localLang = window.lang; + $('.text14').text(langReplace(localLang.demoModule.text14)); + $('.text15').text(langReplace(localLang.demoModule.text15)); + } + + // 监听滚动 + $('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-nameplateNew/local/ar.js b/view/molistar/activity/act-nameplateNew/local/ar.js new file mode 100644 index 0000000..2b17b19 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/local/ar.js @@ -0,0 +1,40 @@ +// 阿拉伯 +langAr = { + // 模块 + demoModule: { + layerIndex1: `التحميل...`, + layerIndex2: `اكتمال العملية`, + layerIndex3: `خطأ في الشبكة`, + max: `background:url("./images/max-ar.png?v=1.0") no-repeat;background-size:100% 100%;`, + img4: `background-image: url(./images/new-bg-ar.png?v=1.0);`, + img44: `background-image: url(./images/select-bg-ar.png?v=1.0);`, + img5: `background: url('./images/apply-new-ar.png?v=1.0') no-repeat 0 0/100% 100%;`, + img2: `./images/disabled-btn-ar.png?v=1.0`, + img3: `./images/apply-btn-basics-ar.png?v=1.0`, + img6: `./images/record-ar.png?v=1.0`, + img7: `./images/delay-btn-ar.png?v=1.0`, + title_t: `مخصص`, + text1: `نمط اللوحة:`, + text2: `مدة التطبيق:`, + text3: `أيام`, + text4: `نص اللوحة:`, + text5: `الرجاء إدخال...`, + text55: `13`, + text6: `يجب تطبيق اللوحة لمدة 7 أيام على الأقل`, + text7: `تم بلوغ أقصى مدة للتطبيق`, + text8: `يرجى اختيار نمط`, + text9: `يرجى إضافة نص اللوحة`, + text10: `يرجى إضافة نص اللوحة من 4 أحرف`, + text11: `لا توجد لوحات متاحة حالياً`, + text12: `تم التطبيق بنجاح`, + text13: 'متبقٍ', + text14: 'سجل الطلبات', + text15: 'لا توجد سجلات للطلبات', + text16: 'تقديم الطلب', + text17: 'تمديد', + text18: 'قيد الطلب', + text19: 'لم يتم القبول', + text20: 'تم القبول' + } + +} \ No newline at end of file diff --git a/view/molistar/activity/act-nameplateNew/local/en.js b/view/molistar/activity/act-nameplateNew/local/en.js new file mode 100644 index 0000000..9131b7d --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/local/en.js @@ -0,0 +1,40 @@ +// 英文 +langEn = { + // 模块 + demoModule: { + layerIndex1: `Loading...`, + layerIndex2: `Operation completed`, + layerIndex3: `Network error`, + max: `background:url("./images/max-en.png?v=1.0") no-repeat;background-size:100% 100%;`, + img4: `background-image: url(./images/new-bg-en.png?v=1.0);`, + img44: `background-image: url(./images/select-bg-en.png?v=1.0);`, + img5: `background: url('./images/apply-new-en.png?v=1.0') no-repeat 0 0/100% 100%;`, + img2: `./images/disabled-btn-en.png?v=1.0`, + img3: `./images/apply-btn-basics-en.png?v=1.0`, + img6: `./images/record-en.png?v=1.0`, + img7: `./images/delay-btn-en.png?v=1.0`, + title_t: `Customized`, + text1: `Style: `, + text2: `Duration: `, + text3: `days`, + text4: `Text: `, + text5: `please enter...`, + text55: `13`, + text6: `Minimum 7 days required`, + text7: `Maximum duration reached`, + text8: `Select a style`, + text9: `Add text`, + text10: `Add 4 characters of text`, + text11: `No nameplates available`, + text12: `Successful`, + text13: 'Remaining', + text14: 'Application Records', + text15: 'No Application Records', + text16: 'Apply', + text17: 'Extend', + text18: 'In Progress', + text19: 'Rejected', + text20: 'Approved', + } + +} \ No newline at end of file diff --git a/view/molistar/activity/act-nameplateNew/local/zh.js b/view/molistar/activity/act-nameplateNew/local/zh.js new file mode 100644 index 0000000..dc55127 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/local/zh.js @@ -0,0 +1,39 @@ +// 中文 +langZh = { + // 模塊 + demoModule: { + layerIndex1: `加載中...`, + layerIndex2: `操作完成`, + layerIndex3: `網路錯誤`, + max: `background:url("./images/max.png?v=1.0") no-repeat;background-size:100% 100%;`, + img4: `background-image: url(./images/new-bg.png?v=1.0);`, + img44: `background-image: url(./images/select-bg.png?v=1.0);`, + img5: `background: url('./images/apply-new.png?v=1.0') no-repeat 0 0/100% 100%;`, + img2: `./images/disabled-btn.png?v=1.0`, + img3: `./images/apply-btn-basics.png?v=1.0`, + img6: `./images/record.png?v=1.0`, + img7: `./images/delay-btn.png?v=1.0`, + title_t: `私人訂製`, + text1: `銘牌樣式：`, + text2: `申請時長：`, + text3: `天`, + text4: `銘牌文字：`, + text5: `請輸入4個字`, + text55: `4`, + text6: `銘牌至少申請7天`, + text7: `已達最大申請時長`, + text8: `請選擇樣式`, + text9: `請添加銘牌文字`, + text10: `請添加4個字的銘牌文字`, + text11: `暫時沒有銘牌可申請`, + text12: `申請成功`, + text13: `剩余`, + text14: `申请记录`, + text15: `暂无申请记录`, + text16: `申请`, + text17: `延长`, + text18: `申请中`, + text19: `不通过`, + text20: `已通过`, + } +} \ No newline at end of file diff --git a/view/molistar/activity/act-nameplateNew/nobleHighRank.html b/view/molistar/activity/act-nameplateNew/nobleHighRank.html new file mode 100644 index 0000000..93768e5 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/nobleHighRank.html @@ -0,0 +1,65 @@ + + + + + + + + 定制贵族专属铭牌 + + + + + + +
    +
    +
    + 贵族可以支持铭牌内容自定义啦～ +

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

    +
    +
    + + + + + + + + + + \ No newline at end of file diff --git a/view/molistar/activity/act-nameplateNew/nobleHighRank_record.html b/view/molistar/activity/act-nameplateNew/nobleHighRank_record.html new file mode 100644 index 0000000..90c9e5c --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/nobleHighRank_record.html @@ -0,0 +1,29 @@ + + + + + + + + 申请记录 + + + + + + + +
    + + 暂无申请记录 +
    + + + + + + + + \ No newline at end of file diff --git a/view/molistar/activity/act-nameplateNew/record.html b/view/molistar/activity/act-nameplateNew/record.html new file mode 100644 index 0000000..a941f88 --- /dev/null +++ b/view/molistar/activity/act-nameplateNew/record.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + +
    + + +
    + + + + + + + + + + + + \ No newline at end of file