重构等级

2024-11-20 15:34:14 +08:00
parent b32b5e7b90
commit 163f49ad8b
51 changed files with 1438 additions and 809 deletions
--- a/view/molistar/modules/level/css/index.css
+++ b/view/molistar/modules/level/css/index.css
@@ -1,245 +1,308 @@
 html,
 body {
  width: 100%;
+  background: #0F0900;
+}
+
+html .page1 .back,
+body .page1 .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%;
+}
+
+html .page1 .back .backIcon,
+body .page1 .back .backIcon {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.4rem;
+  top: 1.46667rem;
+  z-index: 2;
+}
+
+html .page1 .back .tab,
+body .page1 .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;
+}
+
+html .page1 .back .tab div,
+body .page1 .back .tab div {
+  width: 50%;
+  text-align: center;
+}
+
+html .page1 .back .tab .act,
+body .page1 .back .tab .act {
+  color: #fff;
+  font-weight: 500;
+}
+
+html .page1 .back .myInfo,
+body .page1 .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;
+}
+
+html .page1 .back .myInfo .tx,
+body .page1 .back .myInfo .tx {
+  width: 1.68rem;
+  height: 1.68rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.72rem;
+  left: 0.56rem;
+}
+
+html .page1 .back .myInfo .top,
+body .page1 .back .myInfo .top {
+  position: absolute;
+  top: 0.90667rem;
+  left: 2.48rem;
+  height: 0.66667rem;
+  line-height: 0.66667rem;
+  width: 3rem;
+}
+
+html .page1 .back .myInfo .top .level,
+body .page1 .back .myInfo .top .level {
+  color: #613B00;
+  font-size: 0.48rem;
+  font-weight: 600;
+  display: inline-block;
+}
+
+html .page1 .back .myInfo .top .levelIcon,
+body .page1 .back .myInfo .top .levelIcon {
+  display: inline-block;
+  width: 1.30667rem;
+  height: 0.66667rem;
+}
+
+html .page1 .back .myInfo .bootom,
+body .page1 .back .myInfo .bootom {
+  position: absolute;
+  left: 2.48rem;
+  font-size: 0.34667rem;
+  color: #613B00;
+  font-weight: 500;
+  top: 1.70667rem;
+}
+
+html .page1 .back .myInfo .lineBox,
+body .page1 .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%);
+}
+
+html .page1 .back .myInfo .lineBox .line,
+body .page1 .back .myInfo .lineBox .line {
+  width: 0%;
  height: 100%;
-  background-color: #F4F4FB;
-}
-
-img {
-  width: 100%;
-  vertical-align: top;
-}
-
-.level-head {
-  width: 100%;
-  height: 1.33333rem;
+  position: absolute;
  top: 0;
  left: 0;
-  z-index: 9;
-  display: flex;
-  display: -moz-box;
-  position: fixed;
-  background: #F4F4FB;
+  background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
+  border-radius: 0.16rem;
 }

-.level-head .level {
-  position: relative;
-  display: flex;
-  display: -moz-box;
-  -ms-justify-content: center;
-  justify-content: center;
-  -ms-align-items: center;
-  align-items: center;
-  width: 50%;
-  height: 1.06667rem;
-  font-size: 0.42667rem;
-  color: #999999;
+html .page1 .back .myInfo .lineBox .thisLevel,
+body .page1 .back .myInfo .lineBox .thisLevel {
+  color: #613B00;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0;
+  top: -0.50667rem;
 }

-.level-head .level.active {
-  font-weight: bold;
-  color: #333333;
+html .page1 .back .myInfo .lineBox .thisLevel b,
+body .page1 .back .myInfo .lineBox .thisLevel b {
+  font-size: 0.32rem;
+  font-weight: 500;
 }

-.level-head .level.active span {
+html .page1 .back .myInfo .lineBox .nextLevel,
+body .page1 .back .myInfo .lineBox .nextLevel {
+  color: #613B00;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  right: 0;
+  top: -0.50667rem;
+}
+
+html .page1 .back .myInfo .lineBox .nextLevel b,
+body .page1 .back .myInfo .lineBox .nextLevel b {
+  font-size: 0.32rem;
+  font-weight: 500;
+}
+
+html .page1 .back .myInfo p,
+body .page1 .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%);
-  bottom: 0;
-  width: 0.24rem;
-  height: 0.13333rem;
-  background-color: #FFA936;
-  border-radius: 0.06667rem;
+  top: 3.44rem;
 }

-.swiper-container {
-  margin-top: 1.33333rem;
+html .page1 .rule,
+body .page1 .rule {
+  width: 100%;
+  margin-top: 7.3rem;
 }

-.user-content,
-.user-charm {
-  width: 8.93333rem;
-  margin: 0 auto 1.01333rem;
-}
-
-.user-content .user-head,
-.user-charm .user-head {
-  height: 2.66667rem;
-  display: flex;
-  display: -moz-box;
-  -ms-justify-content: center;
-  justify-content: center;
-  -ms-align-items: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.user-content .user-head .user-avatar,
-.user-charm .user-head .user-avatar {
-  width: 1.6rem;
-  height: 1.6rem;
-  border-radius: 50%;
-  border: 0.08rem solid #FFA027;
-}
-
-.user-content .treasure,
-.user-charm .treasure {
-  font-size: 0.29333rem;
-  display: flex;
-  display: -moz-box;
-  justify-content: space-between;
-}
-
-.user-content .treasure .treasure-now,
-.user-charm .treasure .treasure-now {
-  color: #B15C00;
-}
-
-.user-content .treasure .treasure-upgrade,
-.user-charm .treasure .treasure-upgrade {
-  color: #666;
-}
-
-.user-content .progress-bar,
-.user-charm .progress-bar {
+html .page1 .rule .ruleText,
+body .page1 .rule .ruleText {
+  width: 9.2rem;
+  padding: 0.98667rem 0.32rem 0.42667rem;
  position: relative;
-  width: 8.93333rem;
-  height: 0.42667rem;
-  background: #FFF0CC;
-  border-radius: 0.25333rem;
-  margin-bottom: 0.32rem;
+  background: linear-gradient(180deg, #432405 0%, #201201 100%);
+  border: 0.01333rem solid #C98853;
+  border-radius: 0.26667rem;
+  margin: 0 auto 0.50667rem;
+  box-sizing: border-box;
 }

-.user-content .progress-bar .treasure-now,
-.user-charm .progress-bar .treasure-now {
+html .page1 .rule .ruleText .title,
+body .page1 .rule .ruleText .title {
  position: absolute;
+  top: 0;
  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 0.32rem;
-  color: #B15C00;
+  transform: translateX(-50%);
+  padding: 0rem 0.45333rem;
+  text-align: center;
+  color: #3E2000;
+  height: 0.69333rem;
+  line-height: 0.64rem;
+  background: linear-gradient(270deg, #FFB761 0%, #FFE8CC 47%, #FFB761 100%);
+  border-top-left-radius: 0rem;
+  border-top-right-radius: 0rem;
+  border-bottom-left-radius: 0.26667rem;
+  border-bottom-right-radius: 0.26667rem;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  white-space: nowrap;
 }

-.user-content .progress-bar .progress-bar-now,
-.user-charm .progress-bar .progress-bar-now {
-  width: 10%;
-  float: left;
+html .page1 .rule .ruleText p,
+body .page1 .rule .ruleText p {
+  color: #FCD19D;
+  font-weight: 400;
+  font-size: 0.34667rem;
+  line-height: 0.48rem;
+}
+
+html .page1 .rule .ruleText img,
+body .page1 .rule .ruleText img {
  display: block;
-  height: inherit;
-  border-radius: inherit;
-  background: #FFB606;
+  margin: 0.37333rem auto 0rem;
+  width: 8.56rem;
 }

-.user-content .grade,
-.user-charm .grade {
-  position: relative;
-  display: flex;
-  display: -moz-box;
-  justify-content: space-between;
-  font-size: 0.32rem;
-  color: #999;
+html .page1 .rule .ruleText .img2,
+body .page1 .rule .ruleText .img2 {
+  width: 7.14667rem;
+  margin: 0.37333rem 0 0 0;
 }

-.user-content .grade .treasure-upgrade,
-.user-charm .grade .treasure-upgrade {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+html .page2 .back,
+body .page2 .back {
+  background: url(../images/top2.png) no-repeat;
+  background-size: 100% 100%;
 }

-.user-content .grade .treasure-upgrade .num,
-.user-charm .grade .treasure-upgrade .num {
-  color: #FFAE45;
+html .page2 .back .myInfo,
+body .page2 .back .myInfo {
+  background: url(../images/myInfoBg2.png) no-repeat;
+  background-size: 100% 100%;
 }

-.user-content .grade .grade-now,
-.user-charm .grade .grade-now {
-  height: 0.42667rem;
-  line-height: 0.42667rem;
-  border-radius: 0.21333rem;
-  padding: 0 0.24rem;
-  background-color: #FFF0CC;
-  color: #FFA027;
+html .page2 .back .myInfo .top .level,
+body .page2 .back .myInfo .top .level {
+  color: #571E6D;
 }

-.user-content .grade .grade-next,
-.user-charm .grade .grade-next {
-  height: 0.42667rem;
-  line-height: 0.42667rem;
-  border-radius: 0.21333rem;
-  padding: 0 0.24rem;
-  background-image: linear-gradient(to right, #FFDCBB, #FFB810);
-  color: #FFFFFF;
+html .page2 .back .myInfo .bootom,
+body .page2 .back .myInfo .bootom {
+  color: #571E6D;
 }

-.user-content.user-charm .user-head .user-avatar,
-.user-charm.user-charm .user-head .user-avatar {
-  border: 0.08rem solid #BD80FF;
+html .page2 .back .myInfo .lineBox .line,
+body .page2 .back .myInfo .lineBox .line {
+  background: linear-gradient(90deg, #A964FF 0%, #CC99FF 98%);
 }

-.user-content.user-charm .progress-bar,
-.user-charm.user-charm .progress-bar {
-  background: #EFECFF;
+html .page2 .back .myInfo .lineBox .thisLevel,
+body .page2 .back .myInfo .lineBox .thisLevel {
+  color: #571E6D;
 }

-.user-content.user-charm .progress-bar .treasure-now,
-.user-charm.user-charm .progress-bar .treasure-now {
-  color: #8400AC;
+html .page2 .back .myInfo .lineBox .nextLevel,
+body .page2 .back .myInfo .lineBox .nextLevel {
+  color: #571E6D;
 }

-.user-content.user-charm .progress-bar .progress-bar-now,
-.user-charm.user-charm .progress-bar .progress-bar-now {
-  background: #BD80FF;
+html .page2 .back .myInfo p,
+body .page2 .back .myInfo p {
+  color: #571E6D;
 }

-.user-content.user-charm .grade,
-.user-charm.user-charm .grade {
-  position: relative;
-  display: flex;
-  display: -moz-box;
-  justify-content: space-between;
-  font-size: 0.32rem;
-  color: #999;
+html .page2 .rule2,
+body .page2 .rule2 {
+  display: none;
 }

-.user-content.user-charm .grade .treasure-upgrade .num,
-.user-charm.user-charm .grade .treasure-upgrade .num {
-  color: #BD80FF;
+html .page2 .rule2 .ruleText,
+body .page2 .rule2 .ruleText {
+  background: linear-gradient(180deg, #220543 0%, #160120 100%);
+  border: 0.01333rem solid #7E53C9;
 }

-.user-content.user-charm .grade .grade-now,
-.user-charm.user-charm .grade .grade-now {
-  background-color: #EFECFF;
-  color: #D16FF2;
+html .page2 .rule2 .ruleText .title,
+body .page2 .rule2 .ruleText .title {
+  background: linear-gradient(270deg, #D0B1FF 3%, #F8F4FF 47%, #D0B1FF 100%);
 }

-.user-content.user-charm .grade .grade-next,
-.user-charm.user-charm .grade .grade-next {
-  background-image: linear-gradient(to right, #E1DBFF, #BD80FF);
+html .page2 .rule2 .ruleText p,
+body .page2 .rule2 .ruleText p {
+  color: #E7B8FF;
 }

-.explain {
-  width: 9.04rem;
-  margin: 0.53333rem auto 0;
-}
-
-.explain .explain-tit {
-  font-size: 0.4rem;
-  color: #333;
-}
-
-.explain .explain-title {
-  margin-top: 0.13333rem;
-  font-size: 0.29333rem;
-  color: #666;
-  line-height: 0.53333rem;
-}
-
-.explain-img {
-  margin-top: 0.26667rem;
-}
-
-.effects-img {
-  margin-top: 0.53333rem;
+.rule2 {
+  display: none;
 }
--- a/view/molistar/modules/level/css/index.scss
+++ b/view/molistar/modules/level/css/index.scss
@@ -1,223 +1,287 @@
-@function px2rem($px, $rem:75) {
-  @return $px / $rem+rem
+@function px2rem($px) {
+    @return $px / 75+rem;
 }

 html,
 body {
-  width: 100%;
-  height: 100%;
-  background-color: #F4F4FB;
-}
+    width: 100%;
+    background: #0F0900;

-img {
-  width: 100%;
-  vertical-align: top;
-}
+    .page1 {
+        .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%;

-@import '../../../common/css/flex.scss';
+            .backIcon {
+                width: px2rem(44);
+                height: px2rem(44);
+                position: absolute;
+                left: px2rem(30);
+                top: px2rem(110);
+                z-index: 2;
+            }

-.level-head {
-  width: 100%;
-  height: px2rem(100);
-  top: 0;
-  left: 0;
-  z-index: 9;
-  @include flex();
-  position: fixed;
-  background: #F4F4FB;
+            .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;

-  .level {
-    position: relative;
-    @include flex();
-    @include flex-justify-center();
-    @include flex-align-center();
-    width: 50%;
-    height: px2rem(80);
-    font-size: px2rem(32);
-    color: #999999;
+                div {
+                    width: 50%;
+                    text-align: center;
+                }

-    &.active {
-      font-weight: bold;
-      color: #333333;
+                .act {
+                    color: #fff;
+                    font-weight: 500;
+                }
+            }

-      span {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 0;
-        width: px2rem(18);
-        height: px2rem(10);
-        background-color: #FFA936;
-        border-radius: px2rem(5);
-      }
-    }
-  }
-}
+            .myInfo {
+                width: px2rem(677);
+                height: px2rem(343);
+                background: url(../images/myInfoBg.png) no-repeat;
+                background-size: 100% 100%;
+                margin: px2rem(180) auto;
+                position: relative;

-.swiper-container{
-  margin-top: px2rem(100);
-}
-.user-content,
-.user-charm {
+                .tx {
+                    width: px2rem(126);
+                    height: px2rem(126);
+                    border-radius: 50%;
+                    position: absolute;
+                    top: px2rem(54);
+                    left: px2rem(42);
+                }

-  width: px2rem(670);
-  // height: px2rem(340);
-  margin: 0 auto px2rem(76, );
-  .user-head {
-    height: px2rem(200);
-    @include flex();
-    @include flex-justify-center();
-    @include flex-align-center();
-    flex-direction: column;
+                .top {
+                    position: absolute;
+                    top: px2rem(68);
+                    left: px2rem(186);
+                    height: px2rem(50);
+                    line-height: px2rem(50);
+                    width: 3rem;

-    .user-avatar {
-      width: px2rem(120);
-      height: px2rem(120);
-      border-radius: 50%;
-      border: px2rem(6) solid #FFA027;
-    }
-  }
+                    .level {
+                        color: #613B00;
+                        font-size: px2rem(36);
+                        font-weight: 600;
+                        display: inline-block;
+                    }

-  .treasure {
-    font-size: px2rem(22);
-    @include flex();
-    justify-content: space-between;
-    // margin-bottom: px2rem(19);
+                    .levelIcon {
+                        display: inline-block;
+                        width: px2rem(98);
+                        height: px2rem(50);
+                    }
+                }

-    .treasure-now {
-      color: #B15C00;
-    }
+                .bootom {
+                    position: absolute;
+                    left: px2rem(186);
+                    font-size: px2rem(26);
+                    color: #613B00;
+                    font-weight: 500;
+                    top: px2rem(128);
+                }

-    .treasure-upgrade {
-      color: #666;
-    }
-  }
+                .lineBox {
+                    width: px2rem(594);
+                    height: px2rem(12);
+                    border-radius: px2rem(12);
+                    background: #fff;
+                    position: absolute;
+                    top: px2rem(234);
+                    left: 50%;
+                    transform: translateX(-50%);

-  .progress-bar {
-    position: relative;
-    width: px2rem(670);
-    height: px2rem(32);
-    background: #FFF0CC;
-    border-radius: px2rem(19);
-    margin-bottom: px2rem(24);
+                    .line {
+                        width: 0%;
+                        height: 100%;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
+                        border-radius: px2rem(12);
+                    }

-    .treasure-now {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      font-size: px2rem(24, );
-      color: #B15C00;
-    }
+                    .thisLevel {
+                        color: #613B00;
+                        font-size: px2rem(24);
+                        font-weight: 500;
+                        position: absolute;
+                        left: 0;
+                        top: px2rem(-38);

-    .progress-bar-now {
-      width: 10%;
-      float: left;
-      display: block;
-      height: inherit;
-      border-radius: inherit;
-      background: #FFB606;
-    }
-  }
+                        b {
+                            font-size: px2rem(24);
+                            font-weight: 500;
+                        }
+                    }

-  .grade {
-    position: relative;
-    @include flex();
-    justify-content: space-between;
-    font-size: px2rem(24, );
-    color: #999;
-    .treasure-upgrade{
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      .num{
-        color: #FFAE45;
-      }
-    }
-    .grade-now{
-      height: px2rem(32, );
-      line-height: px2rem(32, );
-      border-radius: px2rem(16, );
-      padding: 0 px2rem(18, );
-      background-color: #FFF0CC;
-      color: #FFA027;
-    }
-    .grade-next{
-      height: px2rem(32, );
-      line-height: px2rem(32, );
-      border-radius: px2rem(16, );
-      padding: 0 px2rem(18, );
-      background-image: linear-gradient(to right, #FFDCBB, #FFB810);
-      color: #FFFFFF;
-    }
-  }
+                    .nextLevel {
+                        color: #613B00;
+                        font-size: px2rem(24);
+                        font-weight: 500;
+                        position: absolute;
+                        right: 0;
+                        top: px2rem(-38);

-  &.user-charm{
-    .user-head {
-      .user-avatar {
-        border: px2rem(6) solid #BD80FF;
-      }
-    }
-    .progress-bar {
-      background: #EFECFF;
-  
-      .treasure-now {
-        color: #8400AC;
-      }
-  
-      .progress-bar-now {
-        background: #BD80FF;
-      }
-    }
-    .grade {
-      position: relative;
-      @include flex();
-      justify-content: space-between;
-      font-size: px2rem(24, );
-      color: #999;
-      .treasure-upgrade{
-        .num{
-          color: #BD80FF;
+                        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);
+                }
+            }
+        }
+
+        .rule {
+            width: 100%;
+            margin-top: 7.3rem;
+            // display: none;
+            .ruleText {
+                width: px2rem(690);
+                padding: px2rem(74) px2rem(24) px2rem(32);
+                position: relative;
+                background: linear-gradient(180deg, #432405 0%, #201201 100%);
+                border: px2rem(1) solid #C98853;
+                border-radius: px2rem(20);
+                margin: 0 auto px2rem(38);
+                box-sizing: border-box;
+
+                .title {
+                    position: absolute;
+                    top: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    padding: px2rem(0) px2rem(34);
+                    text-align: center;
+                    color: #3E2000;
+                    height: px2rem(52);
+                    line-height: px2rem(48);
+                    background: linear-gradient(270deg, #FFB761 0%, #FFE8CC 47%, #FFB761 100%);
+                    border-top-left-radius: px2rem(0);
+                    border-top-right-radius: px2rem(0);
+                    border-bottom-left-radius: px2rem(20);
+                    border-bottom-right-radius: px2rem(20);
+                    font-size: px2rem(28);
+                    font-weight: 500;
+                    white-space: nowrap;
+                }
+
+                p {
+                    color: #FCD19D;
+                    font-weight: 400;
+                    font-size: px2rem(26);
+                    line-height: px2rem(36);
+                }
+
+                img {
+                    display: block;
+                    margin: px2rem(28) auto px2rem(0);
+                    width: px2rem(642);
+                }
+
+                .img2 {
+                    width: px2rem(536);
+                    margin: px2rem(28) 0 0 0;
+                }
+            }
+        }
+    }
+
+    .page2 {
+        .back {
+            background: url(../images/top2.png) no-repeat;
+            background-size: 100% 100%;
+
+            .myInfo {
+                background: url(../images/myInfoBg2.png) no-repeat;
+                background-size: 100% 100%;
+
+                .tx {}
+
+                .top {
+
+                    .level {
+                        color: #571E6D;
+                    }
+                }
+
+                .bootom {
+                    color: #571E6D;
+                }
+
+                .lineBox {
+
+                    .line {
+                        background: linear-gradient(90deg, #A964FF 0%, #CC99FF 98%);
+                    }
+
+                    .thisLevel {
+                        color: #571E6D;
+                    }
+
+                    .nextLevel {
+                        color: #571E6D;
+                    }
+                }
+
+                p {
+                    color: #571E6D;
+                }
+            }
+        }
+
+        .rule2 {
+            display: none;
+
+            .ruleText {
+                background: linear-gradient(180deg, #220543 0%, #160120 100%);
+                border: px2rem(1) solid #7E53C9;
+
+                .title {
+                    background: linear-gradient(270deg, #D0B1FF 3%, #F8F4FF 47%, #D0B1FF 100%);
+                }
+
+                p {
+                    color: #E7B8FF;
+                }
+            }
        }
-      }
-      .grade-now{
-        background-color: #EFECFF;
-        color: #D16FF2;
-      }
-      .grade-next{
-        background-image: linear-gradient(to right, #E1DBFF, #BD80FF);
-      }
    }
-  }
 }
-
-.explain {
-  width: px2rem(678);
-  margin: px2rem(40) auto 0;
-
-  .explain-tit {
-    font-size: px2rem(30);
-    color: #333;
-  }
-
-  .explain-title {
-    margin-top: px2rem(10);
-    font-size: px2rem(22);
-    color: #666;
-    line-height: px2rem(40);
-  }
-}
-
-.explain-img{
-  margin-top: px2rem(20);
-}
-.effects-img{
-  margin-top: px2rem(40);
-}
-
-// .swiper-slide{
-//   height: px2rem(1900);
-//   overflow: auto;
-// }
-
+.rule2{
+    display: none;
+}
--- a/view/molistar/modules/level/images/charm-ar.png
+++ b/view/molistar/modules/level/images/charm-ar.png
--- a/view/molistar/modules/level/images/charm-en.png
+++ b/view/molistar/modules/level/images/charm-en.png
--- a/view/molistar/modules/level/images/charm.png
+++ b/view/molistar/modules/level/images/charm.png
--- a/view/molistar/modules/level/images/effects.png
+++ b/view/molistar/modules/level/images/effects.png
--- a/view/molistar/modules/level/images/effects1.png
+++ b/view/molistar/modules/level/images/effects1.png
--- a/view/molistar/modules/level/images/explain.png
+++ b/view/molistar/modules/level/images/explain.png
--- a/view/molistar/modules/level/images/img3-ar.png
+++ b/view/molistar/modules/level/images/img3-ar.png
--- a/view/molistar/modules/level/images/img3-zh.png
+++ b/view/molistar/modules/level/images/img3-zh.png
--- a/view/molistar/modules/level/images/img3.png
+++ b/view/molistar/modules/level/images/img3.png
--- a/view/molistar/modules/level/images/leve1-ar.png
+++ b/view/molistar/modules/level/images/leve1-ar.png
--- a/view/molistar/modules/level/images/leve1-zh.png
+++ b/view/molistar/modules/level/images/leve1-zh.png
--- a/view/molistar/modules/level/images/leve1.png
+++ b/view/molistar/modules/level/images/leve1.png
--- a/view/molistar/modules/level/images/leve2.png
+++ b/view/molistar/modules/level/images/leve2.png
--- a/view/molistar/modules/level/images/myInfoBg.png
+++ b/view/molistar/modules/level/images/myInfoBg.png
--- a/view/molistar/modules/level/images/myInfoBg2.png
+++ b/view/molistar/modules/level/images/myInfoBg2.png
--- a/view/molistar/modules/level/images/null.png
+++ b/view/molistar/modules/level/images/null.png
--- a/view/molistar/modules/level/images/people.png
+++ b/view/molistar/modules/level/images/people.png
--- a/view/molistar/modules/level/images/top.png
+++ b/view/molistar/modules/level/images/top.png
--- a/view/molistar/modules/level/images/top2.png
+++ b/view/molistar/modules/level/images/top2.png
--- a/view/molistar/modules/level/images/travel/back.png
+++ b/view/molistar/modules/level/images/travel/back.png
--- a/view/molistar/modules/level/images/travel/backB.png
+++ b/view/molistar/modules/level/images/travel/backB.png
--- a/view/molistar/modules/level/images/user.png
+++ b/view/molistar/modules/level/images/user.png
--- a/view/molistar/modules/level/images/wealth-ar.png
+++ b/view/molistar/modules/level/images/wealth-ar.png
--- a/view/molistar/modules/level/images/wealth-en.png
+++ b/view/molistar/modules/level/images/wealth-en.png
--- a/view/molistar/modules/level/images/wealth.png
+++ b/view/molistar/modules/level/images/wealth.png
--- a/view/molistar/modules/level/index.html
+++ b/view/molistar/modules/level/index.html
@@ -2,102 +2,56 @@
 <html lang="en">

 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title id="title"></title>
-  <!-- 等级说明 -->
-  <link rel="stylesheet" href="../../common/css/reset.css">
-  <link rel="stylesheet" href="../../common/css/swiper.min.css">
-  <link rel="stylesheet" href="css/index.css?v=1.1">
-  <script src="../../common/js/flexible.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="text1"></title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
 </head>

-<body id="body" style="display: none;">
-  <div class="level-head">
-    <div class="level active">
-      <div class="user-box" id="text1"></div>
-      <span></span>
-    </div>
-    <div class="level">
-      <div class="charm-box" id="text2"></div>
-      <span></span>
-    </div>
-  </div>
-  <!--用户等级start-->
-  <div class="swiper-container">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide">
-        <div class="user-content">
-          <div class="user-head">
-            <img class="user-avatar" onerror="imgErrorLoad(this)" src="./images/people.png" alt="">
-          </div>
-          <p class="treasure">
-          </p>
-          <p class="progress-bar">
-            <span class="treasure-now"></span>
-            <span class="progress-bar-now"></span>
-          </p>
-          <p class="grade">
-            <span class="treasure-upgrade" style="text-align: center;line-height: 0.4rem;"><span class="num">0</span></span>
-            <span class="grade-now">LV.0</span>
-            <span class="grade-next">LV.1</span>
-          </p>
+<body class="page1">
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img class="backIcon" src="./images/travel/back.png" alt="">
+        <div class="tab">
+            <div class="act text2"></div>
+            <div class="text3"></div>
        </div>
-
-        <!-- <div class="explain">
-          <p class="explain-tit">等级说明</p>
-          <p class="explain-title">用户等级是您的成长属性，每消费1个鉆石购买礼物可以累计1个经验值，随着您的等级上升，您的等级标志会有相应的颜色变化。</p>
+        <!-- 自己信息 -->
+        <div class="myInfo">
+            <img src="./images/null.png" alt="" class="tx">
+            <div class="top">
+                <div class="level">LV.<b>0</b></div>
+                <img src="" alt="" class="levelIcon">
+            </div>
+            <div class="bootom"><b class="text4"></b><strong>0</strong></div>
+            <div class="lineBox">
+                <div class="thisLevel">LV.<b>0</b></div>
+                <div class="line"></div>
+                <div class="nextLevel">LV.<b>0</b></div>
+            </div>
+            <p><b class="text5"></b><strong>0</strong></p>
        </div>
-        <img class="explain-img" src="./images/user.png" alt=""> -->
-
-        <!-- <img class="explain-img" src="./images/explain.png" alt="">
-        <img src="./images/user.png" alt="">
-        <img class="effects-img" src="./images/effects1.png" alt=""> -->
-
-        <img id="img1" src="" alt="">
-        <!-- ./images/wealth.png -->
-      </div>
-      <div class="swiper-slide">
-        <div class="user-charm">
-          <div class="user-head">
-            <img class="user-avatar" onerror="imgErrorLoad2(this)" src="./images/people.png" alt="">
-          </div>
-          <p class="treasure">
-          </p>
-          <p class="progress-bar">
-            <span class="treasure-now"></span>
-            <span class="progress-bar-now"></span>
-          </p>
-          <p class="grade">
-            <span class="treasure-upgrade" style="text-align: center;line-height: 0.4rem;"><span class="num">0</span></span>
-            <span class="grade-now">LV.0</span>
-            <span class="grade-next">LV.1</span>
-          </p>
-        </div>
-        <!-- <div class="explain">
-          <p class="explain-tit">等级说明</p>
-          <p class="explain-title">魅力等级是您在molistar个人魅力的成长属性，每收到1个鉆石的礼物，积累一点魅力值，随着您的等级上升，您的等级标致会有相应的颜色变化。</p>
-        </div> -->
-        <img id="img2" class="explain-img" src="" alt="">
-        <!-- ./images/charm.png -->
-      </div>
    </div>
-  </div>
-  <!--用户等级end-->
-  <!--魅力等级start-->
-
-  <!--魅力等级end-->
-  <script src="../../common/js/jquery-3.2.1.min.js"></script>
-  <script src="../../common/js/common2.js"></script>
-  <script src="../../common/js/vconsole.min.js"></script>
-  <script src="../../common/js/swiper.min.js"></script>
-  <script src="./local/en.js"></script>
-  <script src="./local/zh.js"></script>
-  <script src="./local/ar.js"></script>
-  <script src="js/index.js?v=1.1"></script>
-  <script src="../../common/local/langHandler.js"></script>
+    <!-- 内容部分 -->
+    <div class="rule rule1 text6">
+        
+    </div>
+    <div class="rule rule2 text7">
+       
+    </div>
 </body>

-</html>
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>
--- a/view/molistar/modules/level/js/index.js
+++ b/view/molistar/modules/level/js/index.js
@@ -1,143 +1,158 @@
-let info = {};
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
 var langReplace;
 var localLang;
-var mySwiper;
-$(function () {
-  let browser = checkVersion();
-  let api = getUrlPrefix();
-  if (EnvCheck() == 'test') { let vConsole = new VConsole };
-  let locateObj = getQueryString();
-
-  //type=user  用戶等級（財富等級）   type = charm    魅力等級
-  if (locateObj.type == 'user') {
-    $('.level').eq(0).addClass('active').siblings().removeClass('active');
-    $('.user-content').eq(0).show().siblings('.user-content').hide();
-    console.log("user")
-  } else if (locateObj.type == 'charm') {
-    $('.level').eq(1).addClass('active').siblings().removeClass('active');
-    $('.user-content').eq(1).show().siblings('.user-content').hide();
-    console.log("charm")
-  }
-
-  getInfoFromClient()
-  fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
-
-  if (browser.app) {
-    if (browser.ios) {
-      info.uid = tools.cookieUtils.get('uid');
-      window.webkit.messageHandlers.getTicket.postMessage(null);
-    } else if (browser.android) {
-      if (androidJsObj && typeof androidJsObj === 'object') {
-        info.uid = parseInt(window.androidJsObj.getUid());
-        info.ticket = window.androidJsObj.getTicket();
-      }
-    }
-  } else {
-    info.uid = 936365;
-    info.ticket = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjo5MzYzNjUsInRpY2tldF9pZCI6IjcxYTVkNmM1LTZiZGYtNDQxYS1iMjg5LTE5MzU0MmQ4NjU0MiIsImV4cCI6MzYwMCwiY2xpZW50X2lkIjoiZXJiYW4tY2xpZW50In0.mmTJQ5rI5wEBmj5VN1YkSv0MO5aqy8z7W4XTPN-Jx04"
-  }
-
-  //等級數據渲染
-  const renderUser = (data) => {
-    let $user = $('.user-content');
-    $user.find('.user-head .user-avatar').attr('src', data.avatar);
-    $user.find('.grade .grade-now').html('LV.' + data.userLevelExperience.levelExperience.levelSeq);
-    $user.find('.grade .grade-next').html('LV.' + data.userLevelExperience.nextLevelExperience.levelSeq);
-    $user.find('.treasure-now').html(langReplace(localLang.demoModule.text3) + data.userLevelExperience.amount);
-    var barWidth = (data.userLevelExperience.amount / data.userLevelExperience.nextLevelExperience.amount) * 100;
-    // console.log(barWidth);
-    barWidth = barWidth >= 100 ? 100 : barWidth
-    $user.find('.progress-bar .progress-bar-now').css({
-      width: barWidth + '%'
-    })
-    let dis = data.userLevelExperience.nextLevelExperience.amount - data.userLevelExperience.amount;
-    if (dis <= 0) {
-      dis = '∞';
-    }
-    $user.find('.treasure-upgrade').html(langReplace(localLang.demoModule.text4) + `<span class="num">${dis}</span>`);
-  }
-  //魅力數據渲染
-  const renderCharm = (data) => {
-    let $user = $('.user-charm');
-    $user.find('.user-head .user-avatar').attr('src', data.avatar);
-    $user.find('.grade .grade-now').html('LV.' + data.userLevelCharm.levelCharm.levelSeq);
-    $user.find('.grade .grade-next').html('LV.' + data.userLevelCharm.nextLevelCharm.levelSeq);
-    $user.find('.treasure-now').html(langReplace(localLang.demoModule.text5) + data.userLevelCharm.amount);
-    let barWidth = (data.userLevelCharm.amount / data.userLevelCharm.nextLevelCharm.amount) * 100;
-    barWidth = barWidth >= 100 ? 100 : barWidth
-    $user.find('.progress-bar .progress-bar-now').css({
-      width: barWidth + '%'
-    })
-    let dis = data.userLevelCharm.nextLevelCharm.amount - data.userLevelCharm.amount;
-    if (dis <= 0) {
-      dis = '∞';
-    }
-    $user.find('.treasure-upgrade').html(langReplace(localLang.demoModule.text6) + `<span class="num">${dis}</span>`);
-  }
-
-  const getMsg = () => {
-    $.get(api + '/userLevel/getUserExper', { uid: info.uid, ticket: info.ticket }, function (res) {
-      if (res.code == 200) {
-        console.log(res.data);
-        renderUser(res.data);
-      }
-    })
-    $.get(api + '/userLevel/getUserCharm', { uid: info.uid, ticket: info.ticket }, function (res) {
-      if (res.code == 200) {
-        console.log(res.data);
-        renderCharm(res.data);
-      }
-    })
-  }
-  setTimeout(function () {
-    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
-    langReplace = window.lang.replace;
-    localLang = window.lang;
-    translateFun();
-    getMsg();
-    setTimeout(function () {
-      $('#body').show();
-      mySwiper = new Swiper('.swiper-container', {
-        autoHeight: true,
-        onSlideChangeStart: function (swiper) {
-          let index = swiper.activeIndex;
-          $('.level-head .level').eq(index).addClass('active').siblings('.level').removeClass('active');
-          $('.user-content').eq(index).show().siblings('.user-content').hide();
-          $(window).scrollTop(0)
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success(e) {
+            layerIndex = $(e).attr('index')
        }
-      })
-    }, 300)
-  }, 100)
-  function translateFun() {
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var userExper;
+var userCharm;
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back .backIcon').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getUserExper();
+        getUserCharm();
+    }, 100)
+})
+function translateFun() {
    var langReplace = window.lang.replace;
    var localLang = window.lang;
-    $('#title').html(langReplace(localLang.demoModule.title));
-    $('#text1').text(langReplace(localLang.demoModule.text1));
-    $('#text2').text(langReplace(localLang.demoModule.text2));
-    $('#img1').attr('src', langReplace(localLang.demoModule.img1));
-    $('#img2').attr('src', langReplace(localLang.demoModule.img2));
-  }
-  function convertName(name) {
-    return name.split('L')[0];
-  }
-  //用戶等級和魅力等級切換
-  $('.level-head').on('click', '.level', function () {
-    if ($(this).hasClass('active')) return;
-    mySwiper.slideTo($(this).index(), 400, false)
-    $(this).addClass('active').siblings('.level').removeClass('active');
-    var index = $(this).index();
-    $('.user-content').eq(index).show().siblings('.user-content').hide();
-    $(window).scrollTop(0)
-  })
-})
-// function getMessage(key, value) {
-//   info[key] = value;
-// }
-function imgErrorLoad(image) {
-  // 当图片加载失败时执行的函数
-  image.src = './images/people.png';  // 可以替换为备用图片的URL
+    $('.text1').text(langReplace(localLang.demoModule.text1));
+    $('.text2').text(langReplace(localLang.demoModule.text2));
+    $('.text3').text(langReplace(localLang.demoModule.text3));
+    $('.text4').text(langReplace(localLang.demoModule.text4));
+    $('.text5').text(langReplace(localLang.demoModule.text5));
+    $('.text6').html(langReplace(localLang.demoModule.text6));
+    $('.text7').html(langReplace(localLang.demoModule.text7));
 }
-function imgErrorLoad2(image) {
-  // 当图片加载失败时执行的函数
-  image.src = './images/people.png';  // 可以替换为备用图片的URL
-}
+// 配置接口
+function getUserExper() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/userLevel/getUserExper',
+        data: { uid: pubInfo.uid, ticket: pubInfo.ticket },
+        success(res) {
+            if (res.code === 200) {
+                userExper = res.data;
+                dataFun(1);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 配置接口
+function getUserCharm() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/userLevel/getUserCharm',
+        data: { uid: pubInfo.uid, ticket: pubInfo.ticket },
+        success(res) {
+            if (res.code === 200) {
+                userCharm = res.data;
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+function dataFun(type) {
+    if (type == 1) {
+        $('.myInfo .tx').attr('src', userExper.avatar);
+        $('.myInfo .levelIcon').attr('src', userExper.userLevelExperience.levelExperience.url1);
+        $('.myInfo .level b').text(userExper.userLevelExperience.levelExperience.levelSeq);
+        $('.myInfo .bootom strong').text(userExper.userLevelExperience.amount);
+
+        var amount = userExper.userLevelExperience.nextLevelExperience.amount - userExper.userLevelExperience.levelExperience.amount;
+        $('.myInfo p strong').text(userExper.userLevelExperience.levelExperience.levelSeq >= 100 ? '∞' : amount);
+
+        $('.myInfo .lineBox .thisLevel b').text(userExper.userLevelExperience.levelExperience.levelSeq);
+        $('.myInfo .lineBox .nextLevel b').text(userExper.userLevelExperience.levelExperience.levelSeq >= 100 ? 100 : userExper.userLevelExperience.nextLevelExperience.levelSeq);
+        var cssNum = userExper.userLevelExperience.levelExperience.levelSeq >= 100 ? 100 : (userExper.userLevelExperience.levelExperience.amount / userExper.userLevelExperience.nextLevelExperience.amount) * 100;
+        $('.lineBox .line').css('width', cssNum + '%');
+    } else {
+        $('.myInfo .tx').attr('src', userCharm.avatar);
+        $('.myInfo .levelIcon').attr('src', userCharm.userLevelCharm.levelCharm.url1);
+        $('.myInfo .level b').text(userCharm.userLevelCharm.levelCharm.levelSeq);
+        $('.myInfo .bootom strong').text(userCharm.userLevelCharm.amount);
+
+        var amount = userCharm.userLevelCharm.nextLevelCharm.amount - userCharm.userLevelCharm.levelCharm.amount;
+        $('.myInfo p strong').text(userCharm.userLevelCharm.levelCharm.levelSeq >= 100 ? '∞' : amount);
+
+        $('.myInfo .lineBox .thisLevel b').text(userCharm.userLevelCharm.levelCharm.levelSeq);
+        $('.myInfo .lineBox .nextLevel b').text(userCharm.userLevelCharm.levelCharm.levelSeq >= 100 ? 100 : userCharm.userLevelCharm.nextLevelCharm.levelSeq);
+        var cssNum = userCharm.userLevelCharm.levelCharm.levelSeq >= 100 ? 100 : (userCharm.userLevelCharm.levelCharm.amount / userCharm.userLevelCharm.nextLevelCharm.amount) * 100;
+        $('.lineBox .line').css('width', cssNum + '%');
+    }
+
+}
+// 切换
+$('.back .tab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');;
+    if (i == 1) {
+        $('body').removeClass('page2');
+    } else {
+        $('body').addClass('page2');
+    }
+    $('.rule1,.rule2').hide();
+    $(`.rule${i}`).show()
+    dataFun(i);
+})
--- a/view/molistar/modules/level/local/ar.js
+++ b/view/molistar/modules/level/local/ar.js
@@ -2,14 +2,45 @@
 langAr = {
    // 模块
    demoModule: {
-        img1:'./images/wealth-ar.png',
-        img2:'./images/charm-ar.png',
-        title: 'شرح المستويات',
-        text1: 'مستوى الثروة',
-        text2: 'مستوى الجاذبية',
-        text3: 'قيمة الثروة:',
-        text4: 'قيمة الثروة المطلوبة للترقية:',
-        text5: 'قيمة الجاذبية:',
-        text6: 'قيمة الجاذبية المطلوبة للترقية:',
+        layerIndex1: `جاري التحميل...`,
+        layerIndex2: `نجاح`,
+        layerIndex3: `خطأ في الشبكة`,
+        text1: `المستوى`,
+        text2: `مستوى الثروة`,
+        text3: `مستوى الجاذبية`,
+        text4: `قيمة الثروة:`,
+        text5: `قيمة الثروة المطلوبة للترقية:`,
+        text6: `
+        <div class="ruleText">
+            <div class="title">كيفية الترقية</div>
+            <p>لكل هدية تساوي 1 عملة ذهبية، يمكنك جمع نقطة خبرة واحدة. كلما زادت نقاط الخبرة التي تجمعها، زاد مستواك.</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">شروط الحصول</div>
+            <p>1. يمكن للمستخدمين من المستوى 1 وما فوق الحصول على شارة المستوى.</p>
+            <p>2. يمكن للمستخدمين من المستوى 30 وما فوق فتح امتيازات المستوى (تأثيرات دخول مذهلة للغرفة).</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">وصف رمز المستوى</div>
+            <p>سيتم عرض رمز المستوى على شاشة الغرفة وصفحة الملف الشخصي وأماكن أخرى. كلما كان المستوى أعلى، كلما كان الرمز أكثر روعة.</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">وصف اختيار مستوى الثروة الخاص</div>
+            <p>يشمل مستوى الثروة ترقية تأثيرات دخول الغرفة المذهلة. كلما كان المستوى أعلى، كانت التأثيرات أكثر روعة.</p>
+            <img src="./images/leve1-ar.png" alt="">
+        </div>
+        <div class="ruleText">
+            <div class="title">فتح امتيازات مستوى الثروة</div>
+            <p>عند الوصول إلى المستوى 30 وما فوق، سيكون لكل دخول للغرفة تأثيرات مذهلة.</p>
+            <img src="./images/leve2.png" alt="" class="img2">
+        </div>
+        `,
+        text7: `
+        <div class="ruleText">
+            <div class="title">وصف مستوى الثروة</div>
+            <p>مستوى الجاذبية هو السمة التي تعبر عن نمو جاذبيتك الشخصية على هذه المنصة. لكل هدية تساوي 1 عملة ذهبية، تجمع نقطة جاذبية واحدة. كلما زاد مستواك، سيتغير لون شارة المستوى وفقًا لذلك!</p>
+            <img src="./images/img3-ar.png" alt="">
+        </div>
+        `,
    }
 }
--- a/view/molistar/modules/level/local/en.js
+++ b/view/molistar/modules/level/local/en.js
@@ -1,15 +1,47 @@
-// 英文
 langEn = {
-    // 模块
    demoModule: {
-        img1:'./images/wealth-en.png',
-        img2:'./images/charm-en.png',
-        title: 'Level Description',
-        text1: 'Wealth Level',
-        text2: 'Charm Level',
-        text3: 'Wealth Value:',
-        text4: 'Wealth Value Required for Upgrade:',
-        text5: 'Charm Value:',
-        text6: 'Charm Value Required for Upgrade:',
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        text1:`Level`,
+        text2:`Wealth Level`,
+        text3:`Charm Level`,
+        text4:`Wealth Value:`,
+        text5:`Wealth Value Required for upgrade:`,
+        text6:`
+        <div class="ruleText">
+            <div class="title">How to upgrade</div>
+            <p>For every gift of 1 gold coins, you can accumulate 1 experience point. The more experience points you
+                accumulate, the higher your level will be.</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">Obtaining Conditions</div>
+            <p>1. Users at Lv.1 and above can receive a levelbadge.</p>
+            <p>2. Users at Lv.30 and above can unlock level privileges (room entry dazzling special effects).</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">Level lcon Description</div>
+            <p>The level icon will be displayed on the room screen, personal profle page, and other places.The higher
+                the level, the cooler the icon.</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">Wealth Level Special Selection Description</div>
+            <p>Wealth level includes upgrading room entry dazzling special effects. The higher the level,the cooler the
+                entry special effects.</p>
+            <img src="./images/leve1.png" alt="">
+        </div>
+        <div class="ruleText">
+            <div class="title">Unlock wealth level privileges</div>
+            <p>Upon reaching Lv.30 and above, each room entry will have dazzling special effects.</p>
+            <img src="./images/leve2.png" alt="" class="img2">
+        </div>
+        `,
+        text7:`
+        <div class="ruleText">
+            <div class="title">Wealth Level Description</div>
+            <p>Charm level is the growth attribute of your personal charm on this platform. For every gold coins gift received, you accumulate one charmpoint. As your level increases, your level badge will change color accordingly!</p>
+            <img src="./images/img3.png" alt="">
+        </div>
+        `,
    }
 }
--- a/view/molistar/modules/level/local/zh.js
+++ b/view/molistar/modules/level/local/zh.js
@@ -2,14 +2,45 @@
 langZh = {
    // 模塊
    demoModule: {
-        img1:'./images/wealth.png',
-        img2:'./images/charm.png',
-        title:'等级说明',
-        text1:'财富等级',
-        text2:'魅力等级',
-        text3:'財富值：',
-        text4:'升級所需財富值：',
-        text5:'魅力值：',
-        text6:'升級所需魅力值：',
+        layerIndex1: `加载中...`,
+        layerIndex2: `成功`,
+        layerIndex3: `网络错误`,
+        text1: `等級`,
+        text2: `財富等級`,
+        text3: `魅力等級`,
+        text4: `財富值：`,
+        text5: `升級所需財富值：`,
+        text6: `
+        <div class="ruleText">
+            <div class="title">如何升級</div>
+            <p>每贈送 1 金幣禮物，可累積 1 點經驗值。累積的經驗值越多，等級越高。</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">獲得條件</div>
+            <p>1. 等級達 Lv.1 及以上用戶可獲得等級徽章。</p>
+            <p>2. 等級達 Lv.30 及以上用戶可解鎖等級特權（進房間時炫酷特效）。</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">等級圖標描述</div>
+            <p>等級圖標會顯示在房間屏幕、個人檔案頁面等位置。等級越高，圖標越酷炫。</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">財富等級特殊選項描述</div>
+            <p>財富等級包括升級房間進入炫酷特效。等級越高，進入特效越酷炫。</p>
+            <img src="./images/leve1-zh.png" alt="">
+        </div>
+        <div class="ruleText">
+            <div class="title">解鎖財富等級特權</div>
+            <p>達到 Lv.30 及以上時，每次進房間將有炫酷特效。</p>
+            <img src="./images/leve2.png" alt="" class="img2">
+        </div>
+        `,
+        text7: `
+        <div class="ruleText">
+            <div class="title">財富等級描述</div>
+            <p>魅力等級是您在此平台上的個人魅力成長屬性。每收到 1 金幣禮物，可累積 1 魅力值。隨著等級提升，等級徽章的顏色將相應改變！</p>
+            <img src="./images/img3-zh.png" alt="">
+        </div>
+        `,
    }
 }
--- a/view/molistar/modules/levelNew/css/index.css
+++ b/view/molistar/modules/levelNew/css/index.css
@@ -4,7 +4,8 @@ body {
  background: #0F0900;
 }

-.back {
+html .page1 .back,
+body .page1 .back {
  width: 10rem;
  height: 6.96rem;
  position: fixed;
@@ -17,7 +18,8 @@ body {
  background-size: 100% 100%;
 }

-.back .backIcon {
+html .page1 .back .backIcon,
+body .page1 .back .backIcon {
  width: 0.58667rem;
  height: 0.58667rem;
  position: absolute;
@@ -26,7 +28,8 @@ body {
  z-index: 2;
 }

-.back .tab {
+html .page1 .back .tab,
+body .page1 .back .tab {
  width: 80%;
  height: 0.64rem;
  line-height: 0.64rem;
@@ -42,17 +45,20 @@ body {
  z-index: 2;
 }

-.back .tab div {
+html .page1 .back .tab div,
+body .page1 .back .tab div {
  width: 50%;
  text-align: center;
 }

-.back .tab .act {
+html .page1 .back .tab .act,
+body .page1 .back .tab .act {
  color: #fff;
  font-weight: 500;
 }

-.back .myInfo {
+html .page1 .back .myInfo,
+body .page1 .back .myInfo {
  width: 9.02667rem;
  height: 4.57333rem;
  background: url(../images/myInfoBg.png) no-repeat;
@@ -61,7 +67,8 @@ body {
  position: relative;
 }

-.back .myInfo .tx {
+html .page1 .back .myInfo .tx,
+body .page1 .back .myInfo .tx {
  width: 1.68rem;
  height: 1.68rem;
  border-radius: 50%;
@@ -70,7 +77,8 @@ body {
  left: 0.56rem;
 }

-.back .myInfo .top {
+html .page1 .back .myInfo .top,
+body .page1 .back .myInfo .top {
  position: absolute;
  top: 0.90667rem;
  left: 2.48rem;
@@ -79,20 +87,23 @@ body {
  width: 3rem;
 }

-.back .myInfo .top .level {
+html .page1 .back .myInfo .top .level,
+body .page1 .back .myInfo .top .level {
  color: #613B00;
  font-size: 0.48rem;
  font-weight: 600;
  display: inline-block;
 }

-.back .myInfo .top .levelIcon {
+html .page1 .back .myInfo .top .levelIcon,
+body .page1 .back .myInfo .top .levelIcon {
  display: inline-block;
  width: 1.30667rem;
  height: 0.66667rem;
 }

-.back .myInfo .bootom {
+html .page1 .back .myInfo .bootom,
+body .page1 .back .myInfo .bootom {
  position: absolute;
  left: 2.48rem;
  font-size: 0.34667rem;
@@ -101,7 +112,8 @@ body {
  top: 1.70667rem;
 }

-.back .myInfo .lineBox {
+html .page1 .back .myInfo .lineBox,
+body .page1 .back .myInfo .lineBox {
  width: 7.92rem;
  height: 0.16rem;
  border-radius: 0.16rem;
@@ -112,8 +124,9 @@ body {
  transform: translateX(-50%);
 }

-.back .myInfo .lineBox .line {
-  width: 5%;
+html .page1 .back .myInfo .lineBox .line,
+body .page1 .back .myInfo .lineBox .line {
+  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
@@ -122,7 +135,8 @@ body {
  border-radius: 0.16rem;
 }

-.back .myInfo .lineBox .thisLevel {
+html .page1 .back .myInfo .lineBox .thisLevel,
+body .page1 .back .myInfo .lineBox .thisLevel {
  color: #613B00;
  font-size: 0.32rem;
  font-weight: 500;
@@ -131,12 +145,14 @@ body {
  top: -0.50667rem;
 }

-.back .myInfo .lineBox .thisLevel b {
+html .page1 .back .myInfo .lineBox .thisLevel b,
+body .page1 .back .myInfo .lineBox .thisLevel b {
  font-size: 0.32rem;
  font-weight: 500;
 }

-.back .myInfo .lineBox .nextLevel {
+html .page1 .back .myInfo .lineBox .nextLevel,
+body .page1 .back .myInfo .lineBox .nextLevel {
  color: #613B00;
  font-size: 0.32rem;
  font-weight: 500;
@@ -145,12 +161,14 @@ body {
  top: -0.50667rem;
 }

-.back .myInfo .lineBox .nextLevel b {
+html .page1 .back .myInfo .lineBox .nextLevel b,
+body .page1 .back .myInfo .lineBox .nextLevel b {
  font-size: 0.32rem;
  font-weight: 500;
 }

-.back .myInfo p {
+html .page1 .back .myInfo p,
+body .page1 .back .myInfo p {
  text-align: center;
  color: #613B00;
  font-size: 0.32rem;
@@ -161,3 +179,130 @@ body {
  transform: translateX(-50%);
  top: 3.44rem;
 }
+
+html .page1 .rule,
+body .page1 .rule {
+  width: 100%;
+  margin-top: 7.3rem;
+}
+
+html .page1 .rule .ruleText,
+body .page1 .rule .ruleText {
+  width: 9.2rem;
+  padding: 0.98667rem 0.32rem 0.42667rem;
+  position: relative;
+  background: linear-gradient(180deg, #432405 0%, #201201 100%);
+  border: 0.01333rem solid #C98853;
+  border-radius: 0.26667rem;
+  margin: 0 auto 0.50667rem;
+  box-sizing: border-box;
+}
+
+html .page1 .rule .ruleText .title,
+body .page1 .rule .ruleText .title {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0rem 0.45333rem;
+  text-align: center;
+  color: #3E2000;
+  height: 0.69333rem;
+  line-height: 0.64rem;
+  background: linear-gradient(270deg, #FFB761 0%, #FFE8CC 47%, #FFB761 100%);
+  border-top-left-radius: 0rem;
+  border-top-right-radius: 0rem;
+  border-bottom-left-radius: 0.26667rem;
+  border-bottom-right-radius: 0.26667rem;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+html .page1 .rule .ruleText p,
+body .page1 .rule .ruleText p {
+  color: #FCD19D;
+  font-weight: 400;
+  font-size: 0.34667rem;
+  line-height: 0.48rem;
+}
+
+html .page1 .rule .ruleText img,
+body .page1 .rule .ruleText img {
+  display: block;
+  margin: 0.37333rem auto 0rem;
+  width: 8.56rem;
+}
+
+html .page1 .rule .ruleText .img2,
+body .page1 .rule .ruleText .img2 {
+  width: 7.14667rem;
+  margin: 0.37333rem 0 0 0;
+}
+
+html .page2 .back,
+body .page2 .back {
+  background: url(../images/top2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+html .page2 .back .myInfo,
+body .page2 .back .myInfo {
+  background: url(../images/myInfoBg2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+html .page2 .back .myInfo .top .level,
+body .page2 .back .myInfo .top .level {
+  color: #571E6D;
+}
+
+html .page2 .back .myInfo .bootom,
+body .page2 .back .myInfo .bootom {
+  color: #571E6D;
+}
+
+html .page2 .back .myInfo .lineBox .line,
+body .page2 .back .myInfo .lineBox .line {
+  background: linear-gradient(90deg, #A964FF 0%, #CC99FF 98%);
+}
+
+html .page2 .back .myInfo .lineBox .thisLevel,
+body .page2 .back .myInfo .lineBox .thisLevel {
+  color: #571E6D;
+}
+
+html .page2 .back .myInfo .lineBox .nextLevel,
+body .page2 .back .myInfo .lineBox .nextLevel {
+  color: #571E6D;
+}
+
+html .page2 .back .myInfo p,
+body .page2 .back .myInfo p {
+  color: #571E6D;
+}
+
+html .page2 .rule2,
+body .page2 .rule2 {
+  display: none;
+}
+
+html .page2 .rule2 .ruleText,
+body .page2 .rule2 .ruleText {
+  background: linear-gradient(180deg, #220543 0%, #160120 100%);
+  border: 0.01333rem solid #7E53C9;
+}
+
+html .page2 .rule2 .ruleText .title,
+body .page2 .rule2 .ruleText .title {
+  background: linear-gradient(270deg, #D0B1FF 3%, #F8F4FF 47%, #D0B1FF 100%);
+}
+
+html .page2 .rule2 .ruleText p,
+body .page2 .rule2 .ruleText p {
+  color: #E7B8FF;
+}
+
+.rule2 {
+  display: none;
+}
--- a/view/molistar/modules/levelNew/css/index.scss
+++ b/view/molistar/modules/levelNew/css/index.scss
@@ -6,162 +6,282 @@ 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);
+    .page1 {
+        .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%;

-            .line {
-                width: 5%;
-                height: 100%;
+            .backIcon {
+                width: px2rem(44);
+                height: px2rem(44);
                position: absolute;
-                top: 0;
-                left: 0;
-                background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
-                border-radius: px2rem(12);
+                left: px2rem(30);
+                top: px2rem(110);
+                z-index: 2;
            }

-            .thisLevel {
-                color: #613B00;
-                font-size: px2rem(24);
-                font-weight: 500;
+            .tab {
+                width: 80%;
+                height: px2rem(48);
+                line-height: px2rem(48);
+                display: flex;
+                justify-content: space-between;
                position: absolute;
-                left: 0;
-                top: px2rem(-38);
+                top: px2rem(102);
+                left: 50%;
+                transform: translateX(-50%);
+                color: rgba(255, 255, 255, .5);
+                font-size: px2rem(34);
+                font-weight: 400;
+                z-index: 2;

-                b {
-                    font-size: px2rem(24);
+                div {
+                    width: 50%;
+                    text-align: center;
+                }
+
+                .act {
+                    color: #fff;
                    font-weight: 500;
                }
            }

-            .nextLevel {
-                color: #613B00;
-                font-size: px2rem(24);
-                font-weight: 500;
-                position: absolute;
-                right: 0;
-                top: px2rem(-38);
+            .myInfo {
+                width: px2rem(677);
+                height: px2rem(343);
+                background: url(../images/myInfoBg.png) no-repeat;
+                background-size: 100% 100%;
+                margin: px2rem(180) auto;
+                position: relative;

-                b {
-                    font-size: px2rem(24);
+                .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: 0%;
+                        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);
                }
            }
        }

-        p {
-            text-align: center;
-            color: #613B00;
-            font-size: px2rem(24);
-            font-weight: px2rem(400);
+        .rule {
            width: 100%;
-            position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-            top: px2rem(258);
+            margin-top: 7.3rem;
+            // display: none;
+            .ruleText {
+                width: px2rem(690);
+                padding: px2rem(74) px2rem(24) px2rem(32);
+                position: relative;
+                background: linear-gradient(180deg, #432405 0%, #201201 100%);
+                border: px2rem(1) solid #C98853;
+                border-radius: px2rem(20);
+                margin: 0 auto px2rem(38);
+                box-sizing: border-box;
+
+                .title {
+                    position: absolute;
+                    top: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    padding: px2rem(0) px2rem(34);
+                    text-align: center;
+                    color: #3E2000;
+                    height: px2rem(52);
+                    line-height: px2rem(48);
+                    background: linear-gradient(270deg, #FFB761 0%, #FFE8CC 47%, #FFB761 100%);
+                    border-top-left-radius: px2rem(0);
+                    border-top-right-radius: px2rem(0);
+                    border-bottom-left-radius: px2rem(20);
+                    border-bottom-right-radius: px2rem(20);
+                    font-size: px2rem(28);
+                    font-weight: 500;
+                    white-space: nowrap;
+                }
+
+                p {
+                    color: #FCD19D;
+                    font-weight: 400;
+                    font-size: px2rem(26);
+                    line-height: px2rem(36);
+                }
+
+                img {
+                    display: block;
+                    margin: px2rem(28) auto px2rem(0);
+                    width: px2rem(642);
+                }
+
+                .img2 {
+                    width: px2rem(536);
+                    margin: px2rem(28) 0 0 0;
+                }
+            }
        }
    }
+
+    .page2 {
+        .back {
+            background: url(../images/top2.png) no-repeat;
+            background-size: 100% 100%;
+
+            .myInfo {
+                background: url(../images/myInfoBg2.png) no-repeat;
+                background-size: 100% 100%;
+
+                .tx {}
+
+                .top {
+
+                    .level {
+                        color: #571E6D;
+                    }
+                }
+
+                .bootom {
+                    color: #571E6D;
+                }
+
+                .lineBox {
+
+                    .line {
+                        background: linear-gradient(90deg, #A964FF 0%, #CC99FF 98%);
+                    }
+
+                    .thisLevel {
+                        color: #571E6D;
+                    }
+
+                    .nextLevel {
+                        color: #571E6D;
+                    }
+                }
+
+                p {
+                    color: #571E6D;
+                }
+            }
+        }
+
+        .rule2 {
+            display: none;
+
+            .ruleText {
+                background: linear-gradient(180deg, #220543 0%, #160120 100%);
+                border: px2rem(1) solid #7E53C9;
+
+                .title {
+                    background: linear-gradient(270deg, #D0B1FF 3%, #F8F4FF 47%, #D0B1FF 100%);
+                }
+
+                p {
+                    color: #E7B8FF;
+                }
+            }
+        }
+    }
+}
+.rule2{
+    display: none;
 }
--- a/view/molistar/modules/levelNew/images/img3-ar.png
+++ b/view/molistar/modules/levelNew/images/img3-ar.png
--- a/view/molistar/modules/levelNew/images/img3-zh.png
+++ b/view/molistar/modules/levelNew/images/img3-zh.png
--- a/view/molistar/modules/levelNew/images/img3.png
+++ b/view/molistar/modules/levelNew/images/img3.png
--- a/view/molistar/modules/levelNew/images/leve1-ar.png
+++ b/view/molistar/modules/levelNew/images/leve1-ar.png
--- a/view/molistar/modules/levelNew/images/leve1-zh.png
+++ b/view/molistar/modules/levelNew/images/leve1-zh.png
--- a/view/molistar/modules/levelNew/images/leve1.png
+++ b/view/molistar/modules/levelNew/images/leve1.png
--- a/view/molistar/modules/levelNew/images/leve2.png
+++ b/view/molistar/modules/levelNew/images/leve2.png
--- a/view/molistar/modules/levelNew/images/myInfoBg.png
+++ b/view/molistar/modules/levelNew/images/myInfoBg.png
--- a/view/molistar/modules/levelNew/images/myInfoBg2.png
+++ b/view/molistar/modules/levelNew/images/myInfoBg2.png
--- a/view/molistar/modules/levelNew/images/null.png
+++ b/view/molistar/modules/levelNew/images/null.png
--- a/view/molistar/modules/levelNew/images/top.png
+++ b/view/molistar/modules/levelNew/images/top.png
--- a/view/molistar/modules/levelNew/images/top2.png
+++ b/view/molistar/modules/levelNew/images/top2.png
--- a/view/molistar/modules/levelNew/index.html
+++ b/view/molistar/modules/levelNew/index.html
@@ -4,18 +4,18 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Level</title>
+    <title class="text1"></title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
 </head>

-<body>
+<body class="page1">
    <!-- 頂部返回 -->
    <div class="back">
        <img class="backIcon" src="./images/travel/back.png" alt="">
        <div class="tab">
-            <div class="act">Wealth Level</div>
-            <div class="">Charm Level</div>
+            <div class="act text2"></div>
+            <div class="text3"></div>
        </div>
        <!-- 自己信息 -->
        <div class="myInfo">
@@ -24,15 +24,22 @@
                <div class="level">LV.<b>0</b></div>
                <img src="" alt="" class="levelIcon">
            </div>
-            <div class="bootom"><b>Wealth Value:</b><strong>14380162</strong></div>
+            <div class="bootom"><b class="text4"></b><strong>0</strong></div>
            <div class="lineBox">
                <div class="thisLevel">LV.<b>0</b></div>
                <div class="line"></div>
                <div class="nextLevel">LV.<b>0</b></div>
            </div>
-            <p><b>Wealth Value Required for upgrade:</b><strong>267338</strong></p>
+            <p><b class="text5"></b><strong>0</strong></p>
        </div>
    </div>
+    <!-- 内容部分 -->
+    <div class="rule rule1 text6">
+        
+    </div>
+    <div class="rule rule2 text7">
+       
+    </div>
 </body>

 </html>
--- a/view/molistar/modules/levelNew/js/index.js
+++ b/view/molistar/modules/levelNew/js/index.js
@@ -28,6 +28,8 @@ const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time
        skin: 'msg'
    })
 }
+var userExper;
+var userCharm;
 // 初始化函數
 $(function () {
    getInfoFromClient();
@@ -61,6 +63,12 @@ function translateFun() {
    var langReplace = window.lang.replace;
    var localLang = window.lang;
    $('.text1').text(langReplace(localLang.demoModule.text1));
+    $('.text2').text(langReplace(localLang.demoModule.text2));
+    $('.text3').text(langReplace(localLang.demoModule.text3));
+    $('.text4').text(langReplace(localLang.demoModule.text4));
+    $('.text5').text(langReplace(localLang.demoModule.text5));
+    $('.text6').html(langReplace(localLang.demoModule.text6));
+    $('.text7').html(langReplace(localLang.demoModule.text7));
 }
 // 配置接口
 function getUserExper() {
@@ -71,6 +79,8 @@ function getUserExper() {
        data: { uid: pubInfo.uid, ticket: pubInfo.ticket },
        success(res) {
            if (res.code === 200) {
+                userExper = res.data;
+                dataFun(1);
            } else {
                toastMsg(res.message)
            }
@@ -91,7 +101,7 @@ function getUserCharm() {
        data: { uid: pubInfo.uid, ticket: pubInfo.ticket },
        success(res) {
            if (res.code === 200) {
-
+                userCharm = res.data;
            } else {
                toastMsg(res.message)
            }
@@ -102,4 +112,47 @@ function getUserCharm() {
            toastMsg(langReplace(localLang.demoModule.layerIndex3))
        }
    })
-}
+}
+function dataFun(type) {
+    if (type == 1) {
+        $('.myInfo .tx').attr('src', userExper.avatar);
+        $('.myInfo .levelIcon').attr('src', userExper.userLevelExperience.levelExperience.url1);
+        $('.myInfo .level b').text(userExper.userLevelExperience.levelExperience.levelSeq);
+        $('.myInfo .bootom strong').text(userExper.userLevelExperience.amount);
+
+        var amount = userExper.userLevelExperience.nextLevelExperience.amount - userExper.userLevelExperience.levelExperience.amount;
+        $('.myInfo p strong').text(userExper.userLevelExperience.levelExperience.levelSeq >= 100 ? '∞' : amount);
+
+        $('.myInfo .lineBox .thisLevel b').text(userExper.userLevelExperience.levelExperience.levelSeq);
+        $('.myInfo .lineBox .nextLevel b').text(userExper.userLevelExperience.levelExperience.levelSeq >= 100 ? 100 : userExper.userLevelExperience.nextLevelExperience.levelSeq);
+        var cssNum = userExper.userLevelExperience.levelExperience.levelSeq >= 100 ? 100 : (userExper.userLevelExperience.levelExperience.amount / userExper.userLevelExperience.nextLevelExperience.amount) * 100;
+        $('.lineBox .line').css('width', cssNum + '%');
+    } else {
+        $('.myInfo .tx').attr('src', userCharm.avatar);
+        $('.myInfo .levelIcon').attr('src', userCharm.userLevelCharm.levelCharm.url1);
+        $('.myInfo .level b').text(userCharm.userLevelCharm.levelCharm.levelSeq);
+        $('.myInfo .bootom strong').text(userCharm.userLevelCharm.amount);
+
+        var amount = userCharm.userLevelCharm.nextLevelCharm.amount - userCharm.userLevelCharm.levelCharm.amount;
+        $('.myInfo p strong').text(userCharm.userLevelCharm.levelCharm.levelSeq >= 100 ? '∞' : amount);
+
+        $('.myInfo .lineBox .thisLevel b').text(userCharm.userLevelCharm.levelCharm.levelSeq);
+        $('.myInfo .lineBox .nextLevel b').text(userCharm.userLevelCharm.levelCharm.levelSeq >= 100 ? 100 : userCharm.userLevelCharm.nextLevelCharm.levelSeq);
+        var cssNum = userCharm.userLevelCharm.levelCharm.levelSeq >= 100 ? 100 : (userCharm.userLevelCharm.levelCharm.amount / userCharm.userLevelCharm.nextLevelCharm.amount) * 100;
+        $('.lineBox .line').css('width', cssNum + '%');
+    }
+
+}
+// 切换
+$('.back .tab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');;
+    if (i == 1) {
+        $('body').removeClass('page2');
+    } else {
+        $('body').addClass('page2');
+    }
+    $('.rule1,.rule2').hide();
+    $(`.rule${i}`).show()
+    dataFun(i);
+})
--- a/view/molistar/modules/levelNew/local/ar.js
+++ b/view/molistar/modules/levelNew/local/ar.js
@@ -5,5 +5,42 @@ langAr = {
        layerIndex1: `جاري التحميل...`,
        layerIndex2: `نجاح`,
        layerIndex3: `خطأ في الشبكة`,
+        text1: `المستوى`,
+        text2: `مستوى الثروة`,
+        text3: `مستوى الجاذبية`,
+        text4: `قيمة الثروة:`,
+        text5: `قيمة الثروة المطلوبة للترقية:`,
+        text6: `
+        <div class="ruleText">
+            <div class="title">كيفية الترقية</div>
+            <p>لكل هدية تساوي 1 عملة ذهبية، يمكنك جمع نقطة خبرة واحدة. كلما زادت نقاط الخبرة التي تجمعها، زاد مستواك.</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">شروط الحصول</div>
+            <p>1. يمكن للمستخدمين من المستوى 1 وما فوق الحصول على شارة المستوى.</p>
+            <p>2. يمكن للمستخدمين من المستوى 30 وما فوق فتح امتيازات المستوى (تأثيرات دخول مذهلة للغرفة).</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">وصف رمز المستوى</div>
+            <p>سيتم عرض رمز المستوى على شاشة الغرفة وصفحة الملف الشخصي وأماكن أخرى. كلما كان المستوى أعلى، كلما كان الرمز أكثر روعة.</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">وصف اختيار مستوى الثروة الخاص</div>
+            <p>يشمل مستوى الثروة ترقية تأثيرات دخول الغرفة المذهلة. كلما كان المستوى أعلى، كانت التأثيرات أكثر روعة.</p>
+            <img src="./images/leve1-ar.png" alt="">
+        </div>
+        <div class="ruleText">
+            <div class="title">فتح امتيازات مستوى الثروة</div>
+            <p>عند الوصول إلى المستوى 30 وما فوق، سيكون لكل دخول للغرفة تأثيرات مذهلة.</p>
+            <img src="./images/leve2.png" alt="" class="img2">
+        </div>
+        `,
+        text7: `
+        <div class="ruleText">
+            <div class="title">وصف مستوى الثروة</div>
+            <p>مستوى الجاذبية هو السمة التي تعبر عن نمو جاذبيتك الشخصية على هذه المنصة. لكل هدية تساوي 1 عملة ذهبية، تجمع نقطة جاذبية واحدة. كلما زاد مستواك، سيتغير لون شارة المستوى وفقًا لذلك!</p>
+            <img src="./images/img3-ar.png" alt="">
+        </div>
+        `,
    }
 }
--- a/view/molistar/modules/levelNew/local/en.js
+++ b/view/molistar/modules/levelNew/local/en.js
@@ -3,5 +3,45 @@ langEn = {
        layerIndex1: `Loading...`,
        layerIndex2: `Success`,
        layerIndex3: `Network error`,
+        text1:`Level`,
+        text2:`Wealth Level`,
+        text3:`Charm Level`,
+        text4:`Wealth Value:`,
+        text5:`Wealth Value Required for upgrade:`,
+        text6:`
+        <div class="ruleText">
+            <div class="title">How to upgrade</div>
+            <p>For every gift of 1 gold coins, you can accumulate 1 experience point. The more experience points you
+                accumulate, the higher your level will be.</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">Obtaining Conditions</div>
+            <p>1. Users at Lv.1 and above can receive a levelbadge.</p>
+            <p>2. Users at Lv.30 and above can unlock level privileges (room entry dazzling special effects).</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">Level lcon Description</div>
+            <p>The level icon will be displayed on the room screen, personal profle page, and other places.The higher
+                the level, the cooler the icon.</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">Wealth Level Special Selection Description</div>
+            <p>Wealth level includes upgrading room entry dazzling special effects. The higher the level,the cooler the
+                entry special effects.</p>
+            <img src="./images/leve1.png" alt="">
+        </div>
+        <div class="ruleText">
+            <div class="title">Unlock wealth level privileges</div>
+            <p>Upon reaching Lv.30 and above, each room entry will have dazzling special effects.</p>
+            <img src="./images/leve2.png" alt="" class="img2">
+        </div>
+        `,
+        text7:`
+        <div class="ruleText">
+            <div class="title">Wealth Level Description</div>
+            <p>Charm level is the growth attribute of your personal charm on this platform. For every gold coins gift received, you accumulate one charmpoint. As your level increases, your level badge will change color accordingly!</p>
+            <img src="./images/img3.png" alt="">
+        </div>
+        `,
    }
 }
--- a/view/molistar/modules/levelNew/local/zh.js
+++ b/view/molistar/modules/levelNew/local/zh.js
@@ -5,5 +5,42 @@ langZh = {
        layerIndex1: `加载中...`,
        layerIndex2: `成功`,
        layerIndex3: `网络错误`,
+        text1: `等級`,
+        text2: `財富等級`,
+        text3: `魅力等級`,
+        text4: `財富值：`,
+        text5: `升級所需財富值：`,
+        text6: `
+        <div class="ruleText">
+            <div class="title">如何升級</div>
+            <p>每贈送 1 金幣禮物，可累積 1 點經驗值。累積的經驗值越多，等級越高。</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">獲得條件</div>
+            <p>1. 等級達 Lv.1 及以上用戶可獲得等級徽章。</p>
+            <p>2. 等級達 Lv.30 及以上用戶可解鎖等級特權（進房間時炫酷特效）。</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">等級圖標描述</div>
+            <p>等級圖標會顯示在房間屏幕、個人檔案頁面等位置。等級越高，圖標越酷炫。</p>
+        </div>
+        <div class="ruleText">
+            <div class="title">財富等級特殊選項描述</div>
+            <p>財富等級包括升級房間進入炫酷特效。等級越高，進入特效越酷炫。</p>
+            <img src="./images/leve1-zh.png" alt="">
+        </div>
+        <div class="ruleText">
+            <div class="title">解鎖財富等級特權</div>
+            <p>達到 Lv.30 及以上時，每次進房間將有炫酷特效。</p>
+            <img src="./images/leve2.png" alt="" class="img2">
+        </div>
+        `,
+        text7: `
+        <div class="ruleText">
+            <div class="title">財富等級描述</div>
+            <p>魅力等級是您在此平台上的個人魅力成長屬性。每收到 1 金幣禮物，可累積 1 魅力值。隨著等級提升，等級徽章的顏色將相應改變！</p>
+            <img src="./images/img3-zh.png" alt="">
+        </div>
+        `,
    }
 }