diff --git a/view/molistar/modules/levelNew/css/index.css b/view/molistar/modules/levelNew/css/index.css new file mode 100644 index 0000000..ac0dde9 --- /dev/null +++ b/view/molistar/modules/levelNew/css/index.css @@ -0,0 +1,163 @@ +html, +body { + width: 100%; + background: #0F0900; +} + +.back { + width: 10rem; + height: 6.96rem; + position: fixed; + left: 50%; + transform: translateX(-50%); + top: 0rem; + z-index: 10; + overflow: hidden; + background: url(../images/top.png) no-repeat; + background-size: 100% 100%; +} + +.back .backIcon { + width: 0.58667rem; + height: 0.58667rem; + position: absolute; + left: 0.4rem; + top: 1.46667rem; + z-index: 2; +} + +.back .tab { + width: 80%; + height: 0.64rem; + line-height: 0.64rem; + display: flex; + justify-content: space-between; + position: absolute; + top: 1.36rem; + left: 50%; + transform: translateX(-50%); + color: rgba(255, 255, 255, 0.5); + font-size: 0.45333rem; + font-weight: 400; + z-index: 2; +} + +.back .tab div { + width: 50%; + text-align: center; +} + +.back .tab .act { + color: #fff; + font-weight: 500; +} + +.back .myInfo { + width: 9.02667rem; + height: 4.57333rem; + background: url(../images/myInfoBg.png) no-repeat; + background-size: 100% 100%; + margin: 2.4rem auto; + position: relative; +} + +.back .myInfo .tx { + width: 1.68rem; + height: 1.68rem; + border-radius: 50%; + position: absolute; + top: 0.72rem; + left: 0.56rem; +} + +.back .myInfo .top { + position: absolute; + top: 0.90667rem; + left: 2.48rem; + height: 0.66667rem; + line-height: 0.66667rem; + width: 3rem; +} + +.back .myInfo .top .level { + color: #613B00; + font-size: 0.48rem; + font-weight: 600; + display: inline-block; +} + +.back .myInfo .top .levelIcon { + display: inline-block; + width: 1.30667rem; + height: 0.66667rem; +} + +.back .myInfo .bootom { + position: absolute; + left: 2.48rem; + font-size: 0.34667rem; + color: #613B00; + font-weight: 500; + top: 1.70667rem; +} + +.back .myInfo .lineBox { + width: 7.92rem; + height: 0.16rem; + border-radius: 0.16rem; + background: #fff; + position: absolute; + top: 3.12rem; + left: 50%; + transform: translateX(-50%); +} + +.back .myInfo .lineBox .line { + width: 5%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%); + border-radius: 0.16rem; +} + +.back .myInfo .lineBox .thisLevel { + color: #613B00; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + left: 0; + top: -0.50667rem; +} + +.back .myInfo .lineBox .thisLevel b { + font-size: 0.32rem; + font-weight: 500; +} + +.back .myInfo .lineBox .nextLevel { + color: #613B00; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + right: 0; + top: -0.50667rem; +} + +.back .myInfo .lineBox .nextLevel b { + font-size: 0.32rem; + font-weight: 500; +} + +.back .myInfo p { + text-align: center; + color: #613B00; + font-size: 0.32rem; + font-weight: 5.33333rem; + width: 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.44rem; +} diff --git a/view/molistar/modules/levelNew/css/index.scss b/view/molistar/modules/levelNew/css/index.scss new file mode 100644 index 0000000..1aca506 --- /dev/null +++ b/view/molistar/modules/levelNew/css/index.scss @@ -0,0 +1,167 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + background: #0F0900; +} + +.back { + width: px2rem(750); + height: px2rem(522); + position: fixed; + left: 50%; + transform: translateX(-50%); + top: px2rem(0); + z-index: 10; + overflow: hidden; + background: url(../images/top.png) no-repeat; + background-size: 100% 100%; + + .backIcon { + width: px2rem(44); + height: px2rem(44); + position: absolute; + left: px2rem(30); + top: px2rem(110); + z-index: 2; + } + + .tab { + width: 80%; + height: px2rem(48); + line-height: px2rem(48); + display: flex; + justify-content: space-between; + position: absolute; + top: px2rem(102); + left: 50%; + transform: translateX(-50%); + color: rgba(255, 255, 255, .5); + font-size: px2rem(34); + font-weight: 400; + z-index: 2; + + div { + width: 50%; + text-align: center; + } + + .act { + color: #fff; + font-weight: 500; + } + } + + .myInfo { + width: px2rem(677); + height: px2rem(343); + background: url(../images/myInfoBg.png) no-repeat; + background-size: 100% 100%; + margin: px2rem(180) auto; + position: relative; + + .tx { + width: px2rem(126); + height: px2rem(126); + border-radius: 50%; + position: absolute; + top: px2rem(54); + left: px2rem(42); + } + + .top { + position: absolute; + top: px2rem(68); + left: px2rem(186); + height: px2rem(50); + line-height: px2rem(50); + width: 3rem; + + .level { + color: #613B00; + font-size: px2rem(36); + font-weight: 600; + display: inline-block; + } + + .levelIcon { + display: inline-block; + width: px2rem(98); + height: px2rem(50); + } + } + + .bootom { + position: absolute; + left: px2rem(186); + font-size: px2rem(26); + color: #613B00; + font-weight: 500; + top: px2rem(128); + } + + .lineBox { + width: px2rem(594); + height: px2rem(12); + border-radius: px2rem(12); + background: #fff; + position: absolute; + top: px2rem(234); + left: 50%; + transform: translateX(-50%); + + .line { + width: 5%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%); + border-radius: px2rem(12); + } + + .thisLevel { + color: #613B00; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + left: 0; + top: px2rem(-38); + + b { + font-size: px2rem(24); + font-weight: 500; + } + } + + .nextLevel { + color: #613B00; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + right: 0; + top: px2rem(-38); + + b { + font-size: px2rem(24); + font-weight: 500; + } + } + } + + p { + text-align: center; + color: #613B00; + font-size: px2rem(24); + font-weight: px2rem(400); + width: 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(258); + } + } +} \ No newline at end of file diff --git a/view/molistar/modules/levelNew/images/myInfoBg.png b/view/molistar/modules/levelNew/images/myInfoBg.png new file mode 100644 index 0000000..f0bcc7c Binary files /dev/null and b/view/molistar/modules/levelNew/images/myInfoBg.png differ diff --git a/view/molistar/modules/levelNew/images/null.png b/view/molistar/modules/levelNew/images/null.png new file mode 100644 index 0000000..7c2c4ae Binary files /dev/null and b/view/molistar/modules/levelNew/images/null.png differ diff --git a/view/molistar/modules/levelNew/images/top.png b/view/molistar/modules/levelNew/images/top.png new file mode 100644 index 0000000..2e2fd4d Binary files /dev/null and b/view/molistar/modules/levelNew/images/top.png differ diff --git a/view/molistar/modules/levelNew/images/travel/back.png b/view/molistar/modules/levelNew/images/travel/back.png new file mode 100644 index 0000000..2b3812d Binary files /dev/null and b/view/molistar/modules/levelNew/images/travel/back.png differ diff --git a/view/molistar/modules/levelNew/images/travel/backB.png b/view/molistar/modules/levelNew/images/travel/backB.png new file mode 100644 index 0000000..92e190c Binary files /dev/null and b/view/molistar/modules/levelNew/images/travel/backB.png differ diff --git a/view/molistar/modules/levelNew/index.html b/view/molistar/modules/levelNew/index.html new file mode 100644 index 0000000..b547198 --- /dev/null +++ b/view/molistar/modules/levelNew/index.html @@ -0,0 +1,50 @@ + + + +
+ + +Wealth Value Required for upgrade:267338
+