diff --git a/view/molistar/activity/rechargeNew/css/index.css b/view/molistar/activity/rechargeNew/css/index.css
new file mode 100644
index 0000000..e646cb2
--- /dev/null
+++ b/view/molistar/activity/rechargeNew/css/index.css
@@ -0,0 +1,1001 @@
+html,
+body {
+  width: 100%;
+  background: #260006;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.86667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.header {
+  width: 10rem;
+  height: 16.13333rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+.header .rule_icon {
+  width: 1.86667rem;
+  height: 0.66667rem;
+  line-height: 0.66667rem;
+  text-align: center;
+  position: absolute;
+  right: 0;
+  top: 6.85333rem;
+  background: url(../images/rule_iconBg.png) no-repeat;
+  background-size: 100% 100%;
+  color: #3A0600;
+  font-size: 0.37333rem;
+  font-weight: 500;
+}
+
+.header .time {
+  width: 100%;
+  height: 1.62667rem;
+  box-sizing: border-box;
+  padding: 0 0.66667rem;
+  margin: 13.48rem auto 0;
+}
+
+.header .time div {
+  float: left;
+  width: 1.62667rem;
+  height: 1.62667rem;
+  background: url(../images/timeBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  text-align: center;
+  line-height: 1.62667rem;
+}
+
+.header .time div b {
+  color: #FFF783;
+  font-size: 0.58667rem;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+
+.header .time div span {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -1.13333rem;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  font-family: PingFang SC;
+}
+
+.header .time .day {
+  background: url(../images/timeBgAct.png) no-repeat;
+  background-size: 100% 100%;
+  margin-right: 0.62667rem;
+}
+
+.header .time .colon {
+  width: 0.21333rem;
+  height: 0.53333rem;
+  background: url(../images/icon1.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 0.22667rem;
+  margin-top: 0.54667rem;
+}
+
+.myRecharge {
+  width: 10rem;
+  height: 8.34667rem;
+  background: url(../images/myRechargeBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -0.26667rem auto 0.37333rem;
+  position: relative;
+}
+
+.myRecharge .title {
+  width: 6.8rem;
+  height: 1.38667rem;
+  line-height: 1.13333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.74667rem;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.myRecharge p {
+  width: 100%;
+  height: 1.06667rem;
+  line-height: 1.06667rem;
+  position: absolute;
+  text-align: center;
+  left: 0;
+  top: 3.4rem;
+}
+
+.myRecharge p b {
+  color: #FFF783;
+  font-size: 1.14667rem;
+  font-weight: 600;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.myRecharge p img {
+  display: inline-block;
+  width: 0.66667rem;
+  height: 0.66667rem;
+  vertical-align: middle;
+  margin: 0 0.13333rem;
+}
+
+.myRecharge .but {
+  width: 5.09333rem;
+  height: 1.28rem;
+  line-height: 1.22667rem;
+  text-align: center;
+  color: #292601;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4.82667rem;
+  background: url(../images/myRechargeBut.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge10 {
+  width: 10rem;
+  margin: 0 auto 0;
+}
+
+.recharge10 .top {
+  width: 100%;
+  height: 3.72rem;
+  background: url(../images/bgTop.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge10 .top .title {
+  width: 6.8rem;
+  height: 1.38667rem;
+  line-height: 1.13333rem;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.08rem;
+}
+
+.recharge10 .bottom {
+  width: 100%;
+  height: 2.48rem;
+  background: url(../images/bgBottom.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge10 .bottom .but {
+  width: 4.12rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #292601;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  background: url(../images/but.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge10 .bottom .act {
+  background: url(../images/butAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge10 .content {
+  width: 100%;
+  background: url(../images/bgCentent.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge10 .content img {
+  display: block;
+  width: 9.06667rem;
+  height: 3.38667rem;
+  margin: 0 auto 0;
+}
+
+.recharge100 {
+  width: 10rem;
+  margin: 0 auto 0;
+}
+
+.recharge100 .top {
+  width: 100%;
+  height: 3.72rem;
+  background: url(../images/bgTop.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge100 .top .title {
+  width: 6.8rem;
+  height: 1.38667rem;
+  line-height: 1.13333rem;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.08rem;
+}
+
+.recharge100 .bottom {
+  width: 100%;
+  height: 2.48rem;
+  background: url(../images/bgBottom.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge100 .bottom .but {
+  width: 4.12rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #292601;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  background: url(../images/but.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge100 .bottom .act {
+  background: url(../images/butAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge100 .content {
+  width: 100%;
+  background: url(../images/bgCentent.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge100 .content img {
+  display: block;
+  width: 9.06667rem;
+  height: 3.38667rem;
+  margin: 0 auto 0;
+}
+
+.recharge300 {
+  width: 10rem;
+  margin: 0 auto 0;
+}
+
+.recharge300 .top {
+  width: 100%;
+  height: 3.72rem;
+  background: url(../images/bgTop.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge300 .top .title {
+  width: 6.8rem;
+  height: 1.38667rem;
+  line-height: 1.13333rem;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.08rem;
+}
+
+.recharge300 .bottom {
+  width: 100%;
+  height: 2.48rem;
+  background: url(../images/bgBottom.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge300 .bottom .but {
+  width: 4.12rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #292601;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  background: url(../images/but.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge300 .bottom .act {
+  background: url(../images/butAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge300 .content {
+  width: 100%;
+  background: url(../images/bgCentent.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge300 .content .rewardImg {
+  display: block;
+  width: 9.06667rem;
+  height: 9.76rem;
+  margin: 0 auto 0;
+}
+
+.recharge300 .content .topTitle {
+  width: 100%;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  display: flex;
+  justify-content: center;
+}
+
+.recharge300 .content .topTitle img {
+  display: inline-block;
+  width: 2.76rem;
+  height: 0.22667rem;
+  vertical-align: middle;
+}
+
+.recharge300 .content .topTitle b {
+  display: inline-block;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 600;
+  margin: 0 0.14667rem;
+  vertical-align: middle;
+}
+
+.recharge300 .content .topBox {
+  width: 78%;
+  height: 2.66667rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.85333rem auto 0;
+}
+
+.recharge300 .content .topBox div {
+  width: 2.05333rem;
+  height: 2.13333rem;
+  position: relative;
+}
+
+.recharge300 .content .topBox div .tx {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.recharge300 .content .topBox div .ts {
+  width: 0.93333rem;
+  height: 0.93333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.62667rem;
+}
+
+.recharge300 .content .topBox .no2 .tx {
+  border: 0.02667rem solid #BEC6CD;
+}
+
+.recharge300 .content .topBox .no3 .tx {
+  border: 0.02667rem solid #FCB98D;
+}
+
+.recharge300 .content .topBox .no1 .tx {
+  width: 2.21333rem;
+  height: 2.26667rem;
+  border: 0.02667rem solid #FFDB00;
+}
+
+.recharge300 .content .topBox .no1 .ts {
+  top: -0.65333rem;
+}
+
+.recharge500 {
+  width: 10rem;
+  margin: 0 auto 0;
+}
+
+.recharge500 .top {
+  width: 100%;
+  height: 3.72rem;
+  background: url(../images/bgTop.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge500 .top .title {
+  width: 6.8rem;
+  height: 1.38667rem;
+  line-height: 1.13333rem;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.08rem;
+}
+
+.recharge500 .bottom {
+  width: 100%;
+  height: 2.48rem;
+  background: url(../images/bgBottom.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge500 .bottom .but {
+  width: 4.12rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #292601;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  background: url(../images/but.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge500 .bottom .act {
+  background: url(../images/butAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge500 .content {
+  width: 100%;
+  background: url(../images/bgCentent.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge500 .content .rewardImg {
+  display: block;
+  width: 9.06667rem;
+  height: 9.76rem;
+  margin: 0 auto 0;
+}
+
+.recharge500 .content .topTitle {
+  width: 100%;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  display: flex;
+  justify-content: center;
+}
+
+.recharge500 .content .topTitle img {
+  display: inline-block;
+  width: 2.76rem;
+  height: 0.22667rem;
+  vertical-align: middle;
+}
+
+.recharge500 .content .topTitle b {
+  display: inline-block;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 600;
+  margin: 0 0.14667rem;
+  vertical-align: middle;
+}
+
+.recharge500 .content .topBox {
+  width: 78%;
+  height: 2.66667rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.85333rem auto 0;
+}
+
+.recharge500 .content .topBox div {
+  width: 2.05333rem;
+  height: 2.13333rem;
+  position: relative;
+}
+
+.recharge500 .content .topBox div .tx {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.recharge500 .content .topBox div .ts {
+  width: 0.93333rem;
+  height: 0.93333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.62667rem;
+}
+
+.recharge500 .content .topBox .no2 .tx {
+  border: 0.02667rem solid #BEC6CD;
+}
+
+.recharge500 .content .topBox .no3 .tx {
+  border: 0.02667rem solid #FCB98D;
+}
+
+.recharge500 .content .topBox .no1 .tx {
+  width: 2.21333rem;
+  height: 2.26667rem;
+  border: 0.02667rem solid #FFDB00;
+}
+
+.recharge500 .content .topBox .no1 .ts {
+  top: -0.65333rem;
+}
+
+.recharge1000 {
+  width: 10rem;
+  margin: 0 auto 0;
+}
+
+.recharge1000 .top {
+  width: 100%;
+  height: 3.72rem;
+  background: url(../images/bgTop.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge1000 .top .title {
+  width: 6.8rem;
+  height: 1.38667rem;
+  line-height: 1.13333rem;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.08rem;
+}
+
+.recharge1000 .bottom {
+  width: 100%;
+  height: 2.48rem;
+  background: url(../images/bgBottom.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge1000 .bottom .but {
+  width: 4.12rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #292601;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  background: url(../images/but.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge1000 .bottom .act {
+  background: url(../images/butAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge1000 .content {
+  width: 100%;
+  background: url(../images/bgCentent.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge1000 .content .rewardImg {
+  display: block;
+  width: 9.06667rem;
+  height: 9.76rem;
+  margin: 0 auto 0;
+}
+
+.recharge1000 .content .topTitle {
+  width: 100%;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  display: flex;
+  justify-content: center;
+}
+
+.recharge1000 .content .topTitle img {
+  display: inline-block;
+  width: 2.76rem;
+  height: 0.22667rem;
+  vertical-align: middle;
+}
+
+.recharge1000 .content .topTitle b {
+  display: inline-block;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 600;
+  margin: 0 0.14667rem;
+  vertical-align: middle;
+}
+
+.recharge1000 .content .topBox {
+  width: 78%;
+  height: 2.66667rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.85333rem auto 0;
+}
+
+.recharge1000 .content .topBox div {
+  width: 2.05333rem;
+  height: 2.13333rem;
+  position: relative;
+}
+
+.recharge1000 .content .topBox div .tx {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.recharge1000 .content .topBox div .ts {
+  width: 0.93333rem;
+  height: 0.93333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.62667rem;
+}
+
+.recharge1000 .content .topBox .no2 .tx {
+  border: 0.02667rem solid #BEC6CD;
+}
+
+.recharge1000 .content .topBox .no3 .tx {
+  border: 0.02667rem solid #FCB98D;
+}
+
+.recharge1000 .content .topBox .no1 .tx {
+  width: 2.21333rem;
+  height: 2.26667rem;
+  border: 0.02667rem solid #FFDB00;
+}
+
+.recharge1000 .content .topBox .no1 .ts {
+  top: -0.65333rem;
+}
+
+.recharge3000 {
+  width: 10rem;
+  margin: 0 auto 0;
+}
+
+.recharge3000 .top {
+  width: 100%;
+  height: 3.72rem;
+  background: url(../images/bgTop.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge3000 .top .title {
+  width: 6.8rem;
+  height: 1.38667rem;
+  line-height: 1.13333rem;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.08rem;
+}
+
+.recharge3000 .bottom {
+  width: 100%;
+  height: 2.48rem;
+  background: url(../images/bgBottom.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.recharge3000 .bottom .but {
+  width: 4.12rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #292601;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  background: url(../images/but.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge3000 .bottom .act {
+  background: url(../images/butAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge3000 .content {
+  width: 100%;
+  background: url(../images/bgCentent.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.recharge3000 .content .rewardImg {
+  display: block;
+  width: 9.06667rem;
+  height: 14.66667rem;
+  margin: 0 auto 0;
+}
+
+.recharge3000 .content .topTitle {
+  width: 100%;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  display: flex;
+  justify-content: center;
+}
+
+.recharge3000 .content .topTitle img {
+  display: inline-block;
+  width: 2.76rem;
+  height: 0.22667rem;
+  vertical-align: middle;
+}
+
+.recharge3000 .content .topTitle b {
+  display: inline-block;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 600;
+  margin: 0 0.14667rem;
+  vertical-align: middle;
+}
+
+.recharge3000 .content .topBox {
+  width: 78%;
+  height: 2.66667rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.85333rem auto 0;
+}
+
+.recharge3000 .content .topBox div {
+  width: 2.05333rem;
+  height: 2.13333rem;
+  position: relative;
+}
+
+.recharge3000 .content .topBox div .tx {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.recharge3000 .content .topBox div .ts {
+  width: 0.93333rem;
+  height: 0.93333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.62667rem;
+}
+
+.recharge3000 .content .topBox .no2 .tx {
+  border: 0.02667rem solid #BEC6CD;
+}
+
+.recharge3000 .content .topBox .no3 .tx {
+  border: 0.02667rem solid #FCB98D;
+}
+
+.recharge3000 .content .topBox .no1 .tx {
+  width: 2.21333rem;
+  height: 2.26667rem;
+  border: 0.02667rem solid #FFDB00;
+}
+
+.recharge3000 .content .topBox .no1 .ts {
+  top: -0.65333rem;
+}
+
+.pub {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: none;
+}
+
+.pub .pub_in {
+  width: 9.2rem;
+  height: 9.64rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: url(../images/pubBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.pub .pub_in .close {
+  width: 0.90667rem;
+  height: 0.90667rem;
+  position: absolute;
+  right: 0.30667rem;
+  top: -0.45333rem;
+}
+
+.pub .pub_in .title {
+  width: 6rem;
+  height: 1.16rem;
+  line-height: 0.97333rem;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/pubTitle.png) no-repeat;
+  background-size: 100% 100%;
+  top: 0.88rem;
+}
+
+.pub .pub_in .centent {
+  width: 100%;
+  height: 5.46667rem;
+  overflow-y: scroll;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.72rem;
+  box-sizing: border-box;
+  padding: 0 1.2rem;
+}
+
+.pub .pub_in .centent::-webkit-scrollbar {
+  display: none;
+}
+
+.pub .pub_in .centent p {
+  color: #FFF784;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  line-height: 0.45rem;
+  margin-bottom: 0.2rem;
+  width: 100%;
+}
+
+.pub .pub_in .myRechargeText {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: center;
+}
+
+.pub .pub_in .myRechargeText p {
+  padding-bottom: 0.5rem;
+}
+
+.arabic .back img {
+  left: auto;
+  right: 0.24rem;
+  transform: rotate(180deg);
+}
+
+.arabic .header {
+  background: url(../images/header-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .header .time .day,
+.arabic .header .time .hour,
+.arabic .header .time .colon,
+.arabic .header .time .min,
+.arabic .header .time .sec {
+  float: right;
+}
+
+.arabic .header .time .day {
+  margin-right: 0;
+  margin-left: 0.62667rem;
+}
diff --git a/view/molistar/activity/rechargeNew/css/index.scss b/view/molistar/activity/rechargeNew/css/index.scss
new file mode 100644
index 0000000..9ba83a6
--- /dev/null
+++ b/view/molistar/activity/rechargeNew/css/index.scss
@@ -0,0 +1,1031 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #260006;
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(65);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+    }
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(1210);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+
+    .rule_icon {
+        width: px2rem(140);
+        height: px2rem(50);
+        line-height: px2rem(50);
+        text-align: center;
+        position: absolute;
+        right: 0;
+        top: px2rem(514);
+        background: url(../images/rule_iconBg.png) no-repeat;
+        background-size: 100% 100%;
+        color: #3A0600;
+        font-size: px2rem(28);
+        font-weight: 500;
+    }
+
+    .time {
+        width: 100%;
+        height: px2rem(122);
+        box-sizing: border-box;
+        padding: 0 px2rem(50);
+        margin: px2rem(1011) auto 0;
+
+        div {
+            float: left;
+            width: px2rem(122);
+            height: px2rem(122);
+            background: url(../images/timeBg.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            text-align: center;
+            line-height: px2rem(122);
+
+            b {
+                color: #FFF783;
+                font-size: px2rem(44);
+                font-weight: 600;
+                font-family: PingFang SC;
+            }
+
+            span {
+                width: 100%;
+                position: absolute;
+                left: 0;
+                bottom: px2rem(-85);
+                text-align: center;
+                color: #FFF783;
+                font-size: px2rem(28);
+                font-weight: 400;
+                font-family: PingFang SC;
+            }
+        }
+
+        .day {
+            background: url(../images/timeBgAct.png) no-repeat;
+            background-size: 100% 100%;
+            margin-right: px2rem(47);
+        }
+
+        .colon {
+            width: px2rem(16);
+            height: px2rem(40);
+            background: url(../images/icon1.png) no-repeat;
+            background-size: 100% 100%;
+            margin: 0 px2rem(17);
+            margin-top: px2rem(41);
+        }
+    }
+}
+
+.myRecharge {
+    width: px2rem(750);
+    height: px2rem(626);
+    background: url(../images/myRechargeBg.png) no-repeat;
+    background-size: 100% 100%;
+    margin: px2rem(-20) auto px2rem(28);
+    position: relative;
+
+    .title {
+        width: px2rem(510);
+        height: px2rem(104);
+        line-height: px2rem(85);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(56);
+        text-align: center;
+        color: #FFF783;
+        font-size: px2rem(34);
+        font-weight: 600;
+        background: url(../images/title.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    p {
+        width: 100%;
+        height: px2rem(80);
+        line-height: px2rem(80);
+        position: absolute;
+        text-align: center;
+        left: 0;
+        top: px2rem(255);
+
+        b {
+            color: #FFF783;
+            font-size: px2rem(86);
+            font-weight: 600;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        img {
+            display: inline-block;
+            width: px2rem(50);
+            height: px2rem(50);
+            vertical-align: middle;
+            margin: 0 px2rem(10);
+        }
+    }
+
+    .but {
+        width: px2rem(382);
+        height: px2rem(96);
+        line-height: px2rem(92);
+        text-align: center;
+        color: #292601;
+        font-size: px2rem(32);
+        font-weight: 600;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(362);
+        background: url(../images/myRechargeBut.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.recharge10 {
+    width: px2rem(750);
+    margin: 0 auto 0;
+
+    .top {
+        width: 100%;
+        height: px2rem(279);
+        background: url(../images/bgTop.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .title {
+            width: px2rem(510);
+            height: px2rem(104);
+            line-height: px2rem(85);
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            color: #FFF783;
+            font-size: px2rem(34);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(81);
+        }
+    }
+
+    .bottom {
+        width: 100%;
+        height: px2rem(186);
+        background: url(../images/bgBottom.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .but {
+            width: px2rem(309);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #292601;
+            font-size: px2rem(32);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-0);
+            background: url(../images/but.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act {
+            background: url(../images/butAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .content {
+        width: 100%;
+        background: url(../images/bgCentent.png) no-repeat;
+        background-size: 100% 100%;
+
+        img {
+            display: block;
+            width: px2rem(680);
+            height: px2rem(254);
+            margin: 0 auto 0;
+        }
+    }
+}
+
+.recharge100 {
+    width: px2rem(750);
+    margin: 0 auto 0;
+
+    .top {
+        width: 100%;
+        height: px2rem(279);
+        background: url(../images/bgTop.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .title {
+            width: px2rem(510);
+            height: px2rem(104);
+            line-height: px2rem(85);
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            color: #FFF783;
+            font-size: px2rem(34);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(81);
+        }
+    }
+
+    .bottom {
+        width: 100%;
+        height: px2rem(186);
+        background: url(../images/bgBottom.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .but {
+            width: px2rem(309);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #292601;
+            font-size: px2rem(32);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-0);
+            background: url(../images/but.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act {
+            background: url(../images/butAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .content {
+        width: 100%;
+        background: url(../images/bgCentent.png) no-repeat;
+        background-size: 100% 100%;
+
+        img {
+            display: block;
+            width: px2rem(680);
+            height: px2rem(254);
+            margin: 0 auto 0;
+        }
+    }
+}
+
+.recharge300 {
+    width: px2rem(750);
+    margin: 0 auto 0;
+
+    .top {
+        width: 100%;
+        height: px2rem(279);
+        background: url(../images/bgTop.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .title {
+            width: px2rem(510);
+            height: px2rem(104);
+            line-height: px2rem(85);
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            color: #FFF783;
+            font-size: px2rem(34);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(81);
+        }
+    }
+
+    .bottom {
+        width: 100%;
+        height: px2rem(186);
+        background: url(../images/bgBottom.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .but {
+            width: px2rem(309);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #292601;
+            font-size: px2rem(32);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-0);
+            background: url(../images/but.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act {
+            background: url(../images/butAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .content {
+        width: 100%;
+        background: url(../images/bgCentent.png) no-repeat;
+        background-size: 100% 100%;
+
+        .rewardImg {
+            display: block;
+            width: px2rem(680);
+            height: px2rem(732);
+            margin: 0 auto 0;
+        }
+
+        .topTitle {
+            width: 100%;
+            height: px2rem(30);
+            line-height: px2rem(30);
+            display: flex;
+            justify-content: center;
+
+            img {
+                display: inline-block;
+                width: px2rem(207);
+                height: px2rem(17);
+                vertical-align: middle;
+            }
+
+            b {
+                display: inline-block;
+                color: #FFF783;
+                font-size: px2rem(30);
+                font-weight: 600;
+                margin: 0 px2rem(11);
+                vertical-align: middle;
+            }
+        }
+
+        .topBox {
+            width: 78%;
+            height: px2rem(200);
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(64) auto 0;
+
+            div {
+                width: px2rem(154);
+                height: px2rem(160);
+                position: relative;
+
+                .tx {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+
+                .ts {
+                    width: px2rem(70);
+                    height: px2rem(70);
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    top: px2rem(-47);
+                }
+            }
+
+            .no2 {
+                .tx {
+                    border: px2rem(2) solid #BEC6CD;
+                }
+            }
+
+            .no3 {
+                .tx {
+                    border: px2rem(2) solid #FCB98D;
+                }
+            }
+
+            .no1 {
+                .tx {
+                    width: px2rem(166);
+                    height: px2rem(170);
+                    border: px2rem(2) solid #FFDB00;
+                }
+
+                .ts {
+                    top: px2rem(-49);
+                }
+            }
+        }
+    }
+}
+
+.recharge500 {
+    width: px2rem(750);
+    margin: 0 auto 0;
+
+    .top {
+        width: 100%;
+        height: px2rem(279);
+        background: url(../images/bgTop.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .title {
+            width: px2rem(510);
+            height: px2rem(104);
+            line-height: px2rem(85);
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            color: #FFF783;
+            font-size: px2rem(34);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(81);
+        }
+    }
+
+    .bottom {
+        width: 100%;
+        height: px2rem(186);
+        background: url(../images/bgBottom.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .but {
+            width: px2rem(309);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #292601;
+            font-size: px2rem(32);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-0);
+            background: url(../images/but.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act {
+            background: url(../images/butAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .content {
+        width: 100%;
+        background: url(../images/bgCentent.png) no-repeat;
+        background-size: 100% 100%;
+
+        .rewardImg {
+            display: block;
+            width: px2rem(680);
+            height: px2rem(732);
+            margin: 0 auto 0;
+        }
+
+        .topTitle {
+            width: 100%;
+            height: px2rem(30);
+            line-height: px2rem(30);
+            display: flex;
+            justify-content: center;
+
+            img {
+                display: inline-block;
+                width: px2rem(207);
+                height: px2rem(17);
+                vertical-align: middle;
+            }
+
+            b {
+                display: inline-block;
+                color: #FFF783;
+                font-size: px2rem(30);
+                font-weight: 600;
+                margin: 0 px2rem(11);
+                vertical-align: middle;
+            }
+        }
+
+        .topBox {
+            width: 78%;
+            height: px2rem(200);
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(64) auto 0;
+
+            div {
+                width: px2rem(154);
+                height: px2rem(160);
+                position: relative;
+
+                .tx {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+
+                .ts {
+                    width: px2rem(70);
+                    height: px2rem(70);
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    top: px2rem(-47);
+                }
+            }
+
+            .no2 {
+                .tx {
+                    border: px2rem(2) solid #BEC6CD;
+                }
+            }
+
+            .no3 {
+                .tx {
+                    border: px2rem(2) solid #FCB98D;
+                }
+            }
+
+            .no1 {
+                .tx {
+                    width: px2rem(166);
+                    height: px2rem(170);
+                    border: px2rem(2) solid #FFDB00;
+                }
+
+                .ts {
+                    top: px2rem(-49);
+                }
+            }
+        }
+    }
+}
+
+.recharge1000 {
+    width: px2rem(750);
+    margin: 0 auto 0;
+
+    .top {
+        width: 100%;
+        height: px2rem(279);
+        background: url(../images/bgTop.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .title {
+            width: px2rem(510);
+            height: px2rem(104);
+            line-height: px2rem(85);
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            color: #FFF783;
+            font-size: px2rem(34);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(81);
+        }
+    }
+
+    .bottom {
+        width: 100%;
+        height: px2rem(186);
+        background: url(../images/bgBottom.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .but {
+            width: px2rem(309);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #292601;
+            font-size: px2rem(32);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-0);
+            background: url(../images/but.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act {
+            background: url(../images/butAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .content {
+        width: 100%;
+        background: url(../images/bgCentent.png) no-repeat;
+        background-size: 100% 100%;
+
+        .rewardImg {
+            display: block;
+            width: px2rem(680);
+            height: px2rem(732);
+            margin: 0 auto 0;
+        }
+
+        .topTitle {
+            width: 100%;
+            height: px2rem(30);
+            line-height: px2rem(30);
+            display: flex;
+            justify-content: center;
+
+            img {
+                display: inline-block;
+                width: px2rem(207);
+                height: px2rem(17);
+                vertical-align: middle;
+            }
+
+            b {
+                display: inline-block;
+                color: #FFF783;
+                font-size: px2rem(30);
+                font-weight: 600;
+                margin: 0 px2rem(11);
+                vertical-align: middle;
+            }
+        }
+
+        .topBox {
+            width: 78%;
+            height: px2rem(200);
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(64) auto 0;
+
+            div {
+                width: px2rem(154);
+                height: px2rem(160);
+                position: relative;
+
+                .tx {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+
+                .ts {
+                    width: px2rem(70);
+                    height: px2rem(70);
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    top: px2rem(-47);
+                }
+            }
+
+            .no2 {
+                .tx {
+                    border: px2rem(2) solid #BEC6CD;
+                }
+            }
+
+            .no3 {
+                .tx {
+                    border: px2rem(2) solid #FCB98D;
+                }
+            }
+
+            .no1 {
+                .tx {
+                    width: px2rem(166);
+                    height: px2rem(170);
+                    border: px2rem(2) solid #FFDB00;
+                }
+
+                .ts {
+                    top: px2rem(-49);
+                }
+            }
+        }
+    }
+}
+
+.recharge3000 {
+    width: px2rem(750);
+    margin: 0 auto 0;
+
+    .top {
+        width: 100%;
+        height: px2rem(279);
+        background: url(../images/bgTop.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .title {
+            width: px2rem(510);
+            height: px2rem(104);
+            line-height: px2rem(85);
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            color: #FFF783;
+            font-size: px2rem(34);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(81);
+        }
+    }
+
+    .bottom {
+        width: 100%;
+        height: px2rem(186);
+        background: url(../images/bgBottom.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .but {
+            width: px2rem(309);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #292601;
+            font-size: px2rem(32);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-0);
+            background: url(../images/but.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act {
+            background: url(../images/butAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .content {
+        width: 100%;
+        background: url(../images/bgCentent.png) no-repeat;
+        background-size: 100% 100%;
+
+        .rewardImg {
+            display: block;
+            width: px2rem(680);
+            height: px2rem(1100);
+            margin: 0 auto 0;
+        }
+
+        .topTitle {
+            width: 100%;
+            height: px2rem(30);
+            line-height: px2rem(30);
+            display: flex;
+            justify-content: center;
+
+            img {
+                display: inline-block;
+                width: px2rem(207);
+                height: px2rem(17);
+                vertical-align: middle;
+            }
+
+            b {
+                display: inline-block;
+                color: #FFF783;
+                font-size: px2rem(30);
+                font-weight: 600;
+                margin: 0 px2rem(11);
+                vertical-align: middle;
+            }
+        }
+
+        .topBox {
+            width: 78%;
+            height: px2rem(200);
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(64) auto 0;
+
+            div {
+                width: px2rem(154);
+                height: px2rem(160);
+                position: relative;
+
+                .tx {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+
+                .ts {
+                    width: px2rem(70);
+                    height: px2rem(70);
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    top: px2rem(-47);
+                }
+            }
+
+            .no2 {
+                .tx {
+                    border: px2rem(2) solid #BEC6CD;
+                }
+            }
+
+            .no3 {
+                .tx {
+                    border: px2rem(2) solid #FCB98D;
+                }
+            }
+
+            .no1 {
+                .tx {
+                    width: px2rem(166);
+                    height: px2rem(170);
+                    border: px2rem(2) solid #FFDB00;
+                }
+
+                .ts {
+                    top: px2rem(-49);
+                }
+            }
+        }
+    }
+}
+
+.pub {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
+    display: none;
+
+    .pub_in {
+        width: px2rem(690);
+        height: px2rem(723);
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background: url(../images/pubBg.png) no-repeat;
+        background-size: 100% 100%;
+
+        .close {
+            width: px2rem(68);
+            height: px2rem(68);
+            position: absolute;
+            right: px2rem(23);
+            top: px2rem(-34);
+        }
+
+        .title {
+            width: px2rem(450);
+            height: px2rem(87);
+            line-height: px2rem(73);
+            text-align: center;
+            color: #FFF783;
+            font-size: px2rem(30);
+            font-weight: 600;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            background: url(../images/pubTitle.png) no-repeat;
+            background-size: 100% 100%;
+            top: px2rem(66);
+        }
+
+        .centent {
+            width: 100%;
+            height: px2rem(410);
+            overflow-y: scroll;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(204);
+            box-sizing: border-box;
+            padding: 0 px2rem(90);
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            p {
+                color: #FFF784;
+                font-size: px2rem(28);
+                font-weight: 400;
+                line-height: 0.45rem;
+                margin-bottom: 0.2rem;
+                width: 100%;
+            }
+        }
+
+        .myRechargeText {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-content: center;
+
+            p {
+                padding-bottom: 0.5rem;
+            }
+        }
+    }
+}
+
+.arabic {
+    .back img {
+        left: auto;
+        right: 0.24rem;
+        transform: rotate(180deg);
+    }
+
+    .header {
+        background: url(../images/header-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .header .time .day,
+    .header .time .hour,
+    .header .time .colon,
+    .header .time .min,
+    .header .time .sec {
+        float: right;
+    }
+
+    .header .time .day {
+        margin-right: 0;
+        margin-left: 0.62667rem;
+    }
+}
\ No newline at end of file
diff --git a/view/molistar/activity/rechargeNew/images/bgBottom.png b/view/molistar/activity/rechargeNew/images/bgBottom.png
new file mode 100644
index 0000000..ce9d24b
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/bgBottom.png differ
diff --git a/view/molistar/activity/rechargeNew/images/bgCentent.png b/view/molistar/activity/rechargeNew/images/bgCentent.png
new file mode 100644
index 0000000..90cca0e
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/bgCentent.png differ
diff --git a/view/molistar/activity/rechargeNew/images/bgTop.png b/view/molistar/activity/rechargeNew/images/bgTop.png
new file mode 100644
index 0000000..9e33b4e
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/bgTop.png differ
diff --git a/view/molistar/activity/rechargeNew/images/but.png b/view/molistar/activity/rechargeNew/images/but.png
new file mode 100644
index 0000000..ab481cf
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/but.png differ
diff --git a/view/molistar/activity/rechargeNew/images/butAct.png b/view/molistar/activity/rechargeNew/images/butAct.png
new file mode 100644
index 0000000..55b03c7
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/butAct.png differ
diff --git a/view/molistar/activity/rechargeNew/images/close.png b/view/molistar/activity/rechargeNew/images/close.png
new file mode 100644
index 0000000..acc799c
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/close.png differ
diff --git a/view/molistar/activity/rechargeNew/images/header-ar.png b/view/molistar/activity/rechargeNew/images/header-ar.png
new file mode 100644
index 0000000..0c530d0
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/header-ar.png differ
diff --git a/view/molistar/activity/rechargeNew/images/header.png b/view/molistar/activity/rechargeNew/images/header.png
new file mode 100644
index 0000000..8433d1f
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/header.png differ
diff --git a/view/molistar/activity/rechargeNew/images/icon1.png b/view/molistar/activity/rechargeNew/images/icon1.png
new file mode 100644
index 0000000..d5cc834
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/icon1.png differ
diff --git a/view/molistar/activity/rechargeNew/images/left.png b/view/molistar/activity/rechargeNew/images/left.png
new file mode 100644
index 0000000..63677c4
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/left.png differ
diff --git a/view/molistar/activity/rechargeNew/images/logo.png b/view/molistar/activity/rechargeNew/images/logo.png
new file mode 100644
index 0000000..15bde56
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/logo.png differ
diff --git a/view/molistar/activity/rechargeNew/images/myRechargeBg.png b/view/molistar/activity/rechargeNew/images/myRechargeBg.png
new file mode 100644
index 0000000..822df43
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/myRechargeBg.png differ
diff --git a/view/molistar/activity/rechargeNew/images/myRechargeBut.png b/view/molistar/activity/rechargeNew/images/myRechargeBut.png
new file mode 100644
index 0000000..9f0f0a7
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/myRechargeBut.png differ
diff --git a/view/molistar/activity/rechargeNew/images/pubBg.png b/view/molistar/activity/rechargeNew/images/pubBg.png
new file mode 100644
index 0000000..c45348a
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/pubBg.png differ
diff --git a/view/molistar/activity/rechargeNew/images/pubTitle.png b/view/molistar/activity/rechargeNew/images/pubTitle.png
new file mode 100644
index 0000000..e9efd29
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/pubTitle.png differ
diff --git a/view/molistar/activity/rechargeNew/images/recharge10.png b/view/molistar/activity/rechargeNew/images/recharge10.png
new file mode 100644
index 0000000..e5c8448
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/recharge10.png differ
diff --git a/view/molistar/activity/rechargeNew/images/recharge100.png b/view/molistar/activity/rechargeNew/images/recharge100.png
new file mode 100644
index 0000000..e5c8448
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/recharge100.png differ
diff --git a/view/molistar/activity/rechargeNew/images/recharge1000.png b/view/molistar/activity/rechargeNew/images/recharge1000.png
new file mode 100644
index 0000000..502a0bf
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/recharge1000.png differ
diff --git a/view/molistar/activity/rechargeNew/images/recharge300.png b/view/molistar/activity/rechargeNew/images/recharge300.png
new file mode 100644
index 0000000..41adcee
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/recharge300.png differ
diff --git a/view/molistar/activity/rechargeNew/images/recharge3000.png b/view/molistar/activity/rechargeNew/images/recharge3000.png
new file mode 100644
index 0000000..15bb2c7
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/recharge3000.png differ
diff --git a/view/molistar/activity/rechargeNew/images/recharge500.png b/view/molistar/activity/rechargeNew/images/recharge500.png
new file mode 100644
index 0000000..502a0bf
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/recharge500.png differ
diff --git a/view/molistar/activity/rechargeNew/images/right.png b/view/molistar/activity/rechargeNew/images/right.png
new file mode 100644
index 0000000..ca8980e
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/right.png differ
diff --git a/view/molistar/activity/rechargeNew/images/rule_iconBg.png b/view/molistar/activity/rechargeNew/images/rule_iconBg.png
new file mode 100644
index 0000000..0210519
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/rule_iconBg.png differ
diff --git a/view/molistar/activity/rechargeNew/images/timeBg.png b/view/molistar/activity/rechargeNew/images/timeBg.png
new file mode 100644
index 0000000..f9a3c1c
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/timeBg.png differ
diff --git a/view/molistar/activity/rechargeNew/images/timeBgAct.png b/view/molistar/activity/rechargeNew/images/timeBgAct.png
new file mode 100644
index 0000000..9b8cce6
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/timeBgAct.png differ
diff --git a/view/molistar/activity/rechargeNew/images/title.png b/view/molistar/activity/rechargeNew/images/title.png
new file mode 100644
index 0000000..b7c6e54
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/title.png differ
diff --git a/view/molistar/activity/rechargeNew/images/top1.png b/view/molistar/activity/rechargeNew/images/top1.png
new file mode 100644
index 0000000..c83b4ab
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/top1.png differ
diff --git a/view/molistar/activity/rechargeNew/images/top2.png b/view/molistar/activity/rechargeNew/images/top2.png
new file mode 100644
index 0000000..bd8fb30
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/top2.png differ
diff --git a/view/molistar/activity/rechargeNew/images/top3.png b/view/molistar/activity/rechargeNew/images/top3.png
new file mode 100644
index 0000000..ad78a67
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/top3.png differ
diff --git a/view/molistar/activity/rechargeNew/images/travel/back.png b/view/molistar/activity/rechargeNew/images/travel/back.png
new file mode 100644
index 0000000..2b3812d
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/travel/back.png differ
diff --git a/view/molistar/activity/rechargeNew/images/travel/backB.png b/view/molistar/activity/rechargeNew/images/travel/backB.png
new file mode 100644
index 0000000..92e190c
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/travel/backB.png differ
diff --git a/view/molistar/activity/rechargeNew/images/why.png b/view/molistar/activity/rechargeNew/images/why.png
new file mode 100644
index 0000000..103efc8
Binary files /dev/null and b/view/molistar/activity/rechargeNew/images/why.png differ
diff --git a/view/molistar/activity/rechargeNew/index.html b/view/molistar/activity/rechargeNew/index.html
new file mode 100644
index 0000000..6f836b4
--- /dev/null
+++ b/view/molistar/activity/rechargeNew/index.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <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>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 头部 -->
+    <div class="header">
+        <div class="rule_icon text2"></div>
+        <!-- 倒计时 -->
+        <div class="time">
+            <div class="day">
+                <b>0</b>
+                <span class="text3"></span>
+            </div>
+            <div class="hour">
+                <b>0</b>
+                <span class="text4"></span>
+            </div>
+            <div class="colon"></div>
+            <div class="min">
+                <b>0</b>
+                <span class="text5"></span>
+            </div>
+            <div class="colon"></div>
+            <div class="sec">
+                <b>0</b>
+                <span class="text6"></span>
+            </div>
+        </div>
+    </div>
+    <!-- 我的充值 -->
+    <div class="myRecharge">
+        <div class="title text7"></div>
+        <p><b>$0</b><img src="./images/why.png" alt=""></p>
+        <div class="but text8"></div>
+    </div>
+    <!-- 充值档位到达10 -->
+    <div class="recharge10 recharge1 recharges">
+        <div class="top">
+            <div class="title text9"></div>
+        </div>
+        <div class="content">
+            <img src="./images/recharge10.png" alt="">
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
+    <!-- 充值档位到达100 -->
+    <div class="recharge100 recharge2 recharges">
+        <div class="top">
+            <div class="title text11"></div>
+        </div>
+        <div class="content">
+            <img src="./images/recharge10.png" alt="">
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
+    <!-- 充值档位到达300 -->
+    <div class="recharge300 recharge3 recharges">
+        <div class="top">
+            <div class="title text12"></div>
+        </div>
+        <div class="content">
+            <!-- 奖励图片 -->
+            <img src="./images/recharge300.png" alt="" class="rewardImg">
+            <!-- 前三标题 -->
+            <div class="topTitle">
+                <img src="./images/left.png" alt="" class="left">
+                <b class="text13"></b>
+                <img src="./images/right.png" alt="" class="right">
+            </div>
+            <!-- 前三信息 -->
+            <div class="topBox">
+                <div class="no2">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top2.png" alt="" class="ts">
+                </div>
+                <div class="no1">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top1.png" alt="" class="ts">
+                </div>
+                <div class="no3">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top3.png" alt="" class="ts">
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
+    <!-- 充值档位到达500 -->
+    <div class="recharge500 recharge4 recharges">
+        <div class="top">
+            <div class="title text14"></div>
+        </div>
+        <div class="content">
+            <!-- 奖励图片 -->
+            <img src="./images/recharge500.png" alt="" class="rewardImg">
+            <!-- 前三标题 -->
+            <div class="topTitle">
+                <img src="./images/left.png" alt="" class="left">
+                <b class="text13"></b>
+                <img src="./images/right.png" alt="" class="right">
+            </div>
+            <!-- 前三信息 -->
+            <div class="topBox">
+                <div class="no2">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top2.png" alt="" class="ts">
+                </div>
+                <div class="no1">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top1.png" alt="" class="ts">
+                </div>
+                <div class="no3">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top3.png" alt="" class="ts">
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
+    <!-- 充值档位到达1000 -->
+    <div class="recharge1000 recharge5 recharges">
+        <div class="top">
+            <div class="title text15"></div>
+        </div>
+        <div class="content">
+            <!-- 奖励图片 -->
+            <img src="./images/recharge1000.png" alt="" class="rewardImg">
+            <!-- 前三标题 -->
+            <div class="topTitle">
+                <img src="./images/left.png" alt="" class="left">
+                <b class="text13"></b>
+                <img src="./images/right.png" alt="" class="right">
+            </div>
+            <!-- 前三信息 -->
+            <div class="topBox">
+                <div class="no2">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top2.png" alt="" class="ts">
+                </div>
+                <div class="no1">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top1.png" alt="" class="ts">
+                </div>
+                <div class="no3">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top3.png" alt="" class="ts">
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
+    <!-- 充值档位到达3000 -->
+    <div class="recharge3000 recharge6 recharges">
+        <div class="top">
+            <div class="title text16"></div>
+        </div>
+        <div class="content">
+            <!-- 奖励图片 -->
+            <img src="./images/recharge3000.png" alt="" class="rewardImg">
+            <!-- 前三标题 -->
+            <!-- <div class="topTitle">
+                <img src="./images/left.png" alt="" class="left">
+                <b>Top 3 Winner</b>
+                <img src="./images/right.png" alt="" class="right">
+            </div> -->
+            <!-- 前三信息 -->
+            <!-- <div class="topBox">
+                <div class="no2">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top2.png" alt="" class="ts">
+                </div>
+                <div class="no1">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top1.png" alt="" class="ts">
+                </div>
+                <div class="no3">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top3.png" alt="" class="ts">
+                </div>
+            </div> -->
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
+    <!-- 弹窗 -->
+    <div class="pub">
+        <div class="pub_in">
+            <img src="./images/close.png" alt="" class="close">
+            <div class="title">Rules </div>
+            <div class="centent">
+                <p>1、Recharge activity time: 0:00:00 on the 1st of each month to 23:59:59 on the last day of the month
+                    (GMT+3).</p>
+                <p>2、You can only get each grade reward once.</p>
+                <p>3、Each round of activities end, the rewards will automatically expire.</p>
+                <p>4、Contact our official customer service to get your unique ID!</p>
+                <p>5、Recharge agent can not join the activity.</p>
+            </div>
+        </div>
+    </div>
+</body>
+
+</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="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>
\ No newline at end of file
diff --git a/view/molistar/activity/rechargeNew/js/index.js b/view/molistar/activity/rechargeNew/js/index.js
new file mode 100644
index 0000000..b5f4626
--- /dev/null
+++ b/view/molistar/activity/rechargeNew/js/index.js
@@ -0,0 +1,250 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == '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'
+    })
+}
+var countupTime;//倒计时容器
+var isLock = true;
+var page = 1;
+var wealth;
+var limitWealth;
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getConfig();
+    }, 100)
+})
+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').text(langReplace(localLang.demoModule.text6));
+    $('.text7').text(langReplace(localLang.demoModule.text7));
+    $('.text8').text(langReplace(localLang.demoModule.text8));
+    $('.text9').text(langReplace(localLang.demoModule.text9));
+    $('.text10').text(langReplace(localLang.demoModule.text10));
+    $('.text11').text(langReplace(localLang.demoModule.text11));
+    $('.text12').text(langReplace(localLang.demoModule.text12));
+    $('.text13').text(langReplace(localLang.demoModule.text13));
+    $('.text14').text(langReplace(localLang.demoModule.text14));
+    $('.text15').text(langReplace(localLang.demoModule.text15));
+    $('.text16').text(langReplace(localLang.demoModule.text16));
+}
+// 配置接口
+function getConfig() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/activity/h5/charge/rank',
+        data: { uid: pubInfo.uid },
+        success(res) {
+            if (res.code === 200) {
+                wealth = res.data.wealth;
+                limitWealth = res.data.limitWealth;
+                // 处理倒计时
+                countup(res.data.endTime - res.timestamp);
+                // 处理当前余额
+                $('.myRecharge p b').text('$' + res.data.usb);
+                // 渲染档位
+                res.data.activityLevelUserVo.forEach((res, i) => {
+                    $(`.recharge${i + 1} .bottom .but`).attr('level', res.level);
+                    // 处理按钮状态
+                    if (res.receiveStatus == false) {
+                        console.log(i);
+                        if (res.receiveSwitch) {
+                            $(`.recharge${i + 1} .bottom .but`).attr('click', 1);
+                            $(`.recharge${i + 1} .bottom .but`).addClass('act');
+                        } else {
+                            $(`.recharge${i + 1} .bottom .but`).attr('click', 0);
+                            $(`.recharge${i + 1} .bottom .but`).removeClass('act');
+                        }
+                    } else {
+                        $(`.recharge${i + 1} .bottom .but`).attr('click', 0);
+                        $(`.recharge${i + 1} .bottom .but`).removeClass('act');
+                    }
+                    // 处理前三
+                    if (wealth < limitWealth) {
+                        res.userVos.forEach((val, index) => {
+                            $(`.recharge${i + 1} .content .topBox .no${index + 1} .tx`).attr('src', val.avatar);
+                        })
+                    } else {
+                        $(`.recharge${i + 1} .content .topTitle`).hide();
+                        $(`.recharge${i + 1} .content .topBox`).hide();
+                    }
+                })
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 跳转充值
+$('.myRecharge .but').click(function () {
+    if (browser.android) {
+        let channel = pubInfo.deviceInfo.channel;
+        console.log(pubInfo.deviceInfo);
+        if (channel == "google") {
+            window.androidJsObj.openChargePage(6);
+        } else {
+            window.androidJsObj.openChargePage(6);
+            window.location.href = urlPrefix + '/molistar/modules/pay/index.html?channelType=4';
+        }
+    } else if (browser.ios) {
+        let channel = pubInfo.deviceInfo.channel;
+        if (channel == "appstore") {
+            window.webkit.messageHandlers.openChargePage.postMessage(null);
+        } else {
+            window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
+            window.location.href = urlPrefix + '/molistar/modules/pay/index.html?channelType=4';
+        }
+    }
+})
+// 打开规则弹窗
+$('.header .rule_icon').click(function () {
+    $('.pub .pub_in .title').html(langReplace(localLang.demoModule.text17));
+    $('.pub .pub_in .centent').html(langReplace(localLang.demoModule.text18));
+    $('.pub ').show();
+    bodyScroolFun(true);
+})
+// 打开我的充值弹窗
+$('.myRecharge p img').click(function () {
+    $('.pub .pub_in .centent').addClass('myRechargeText');
+    $('.pub .pub_in .title').html(langReplace(localLang.demoModule.text19));
+    $('.pub .pub_in .centent').html(langReplace(localLang.demoModule.text20));
+    $('.pub ').show();
+    bodyScroolFun(true);
+})
+// 打开定制礼物弹窗
+$('').click(function () {
+    $('.pub .pub_in .centent').addClass('myRechargeText');
+    $('.pub .pub_in .title').html(langReplace(localLang.demoModule.text21));
+    $('.pub .pub_in .centent').html(langReplace(localLang.demoModule.text22));
+    $('.pub ').show();
+    bodyScroolFun(true);
+})
+// 关闭弹窗
+$('.pub .pub_in .close').click(function () {
+    $('.pub .pub_in .centent').removeClass('myRechargeText');
+    $('.pub ').hide();
+    bodyScroolFun(false);
+})
+// 倒計時
+function countup(leftTime) {
+    clearTimeout(countupTime)
+    //獲取當前時間
+    // var now = nowTime;
+    var d = 0;
+    var h = 0;
+    var m = 0;
+    var s = 0;
+    //定義變數 d,h,m,s保存倒計時的時間
+    var d, h, m, s;
+    //遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果 
+    if (leftTime > 0) {
+        d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
+        h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
+        m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
+        s = getzf(Math.floor(leftTime / 1000 % 60));
+        //將倒計時賦值到div中
+        $('.header .time .day b').text(d);
+        $('.header .time .hour b').text(h);
+        $('.header .time .min b').text(m);
+        $('.header .time .sec b').text(s);
+    } else {
+        getConfig();
+    }
+    if (leftTime > 0) {
+        leftTime = leftTime - 1000;
+    }
+    countupTime = setTimeout(function () {
+        countup(leftTime);
+    }, 1000);
+}
+//补0操作  
+function getzf(num) {
+    if (parseInt(num) < 10) {
+        num = '0' + num;
+    }
+    return num;
+}
+// 领取按钮
+$('.recharges .bottom .but').click(function () {
+    var level = $(this).attr('level');
+    var click = $(this).attr('click');
+    if (click == 1) {
+        showLoading()
+        networkRequest({
+            type: 'get',
+            url: urlPrefix + '/activity/h5/charge/recv',
+            data: { uid: pubInfo.uid, level },
+            success(res) {
+                if (res.code === 200) {
+                    getConfig();
+                } else {
+                    toastMsg(res.message)
+                }
+                hideLoading(layerIndex)
+            },
+            error(err) {
+                hideLoading(layerIndex)
+                toastMsg(langReplace(localLang.demoModule.layerIndex3))
+            }
+        })
+    }
+})
\ No newline at end of file
diff --git a/view/molistar/activity/rechargeNew/local/ar.js b/view/molistar/activity/rechargeNew/local/ar.js
new file mode 100644
index 0000000..40beb7c
--- /dev/null
+++ b/view/molistar/activity/rechargeNew/local/ar.js
@@ -0,0 +1,40 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `جار التحميل...`,
+        layerIndex2: `نجاح`,
+        layerIndex3: `خطأ في الشبكة`,
+        text1: `إعادة شحن شهرية`,
+        text2: `القواعد`,
+        text3: `يوم`,
+        text4: `ساعة`,
+        text5: `دقيقة`,
+        text6: `ثانية`,
+        text7: `إعادة شحني`,
+        text8: `انتقل إلى إعادة الشحن`,
+        text9: `إعادة شحن $10`,
+        text10: `احصل على مكافأة`,
+        text11: `إعادة شحن $100`,
+        text12: `إعادة شحن $300`,
+        text13: `أفضل 3 فائزين`,
+        text14: `إعادة شحن $500`,
+        text15: `إعادة شحن $1000`,
+        text16: `إعادة شحن $3000`,
+        text17: `القواعد`,
+        text18: `
+        <p>1، وقت نشاط إعادة الشحن: من 00:00:00 في اليوم الأول من كل شهر إلى 23:59:59 في اليوم الأخير من الشهر (GMT+3).</p>
+        <p>2، يمكنك الحصول على مكافأة كل درجة مرة واحدة فقط.</p>
+        <p>3، عند انتهاء كل جولة من الأنشطة، ستنتهي المكافآت تلقائيًا.</p>
+        <p>4، اتصل بخدمة العملاء الرسمية للحصول على معرفك الفريد!</p>
+        <p>5، لا يمكن لوكيل الشحن الانضمام إلى النشاط.</p>
+        `,
+        text19: `إعادة شحن شهريتي`,
+        text20: `
+        <p>1، تشمل طرق إعادة الشحن Google وApple الداخلية وما إلى ذلك.</p>
+        <p>2، لا يمكن لوكيل الشحن الانضمام إلى النشاط.</p>
+        `,
+        text21: `هدية مخصصة`,
+        text22: `<p>يمكنك إرسال الفيديو الخاص بك إلى خدمة العملاء لدينا للحصول على هديتك المخصصة.</p>`,
+    }
+}
\ No newline at end of file
diff --git a/view/molistar/activity/rechargeNew/local/en.js b/view/molistar/activity/rechargeNew/local/en.js
new file mode 100644
index 0000000..872b373
--- /dev/null
+++ b/view/molistar/activity/rechargeNew/local/en.js
@@ -0,0 +1,38 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        text1: `Monthoy recharge`,
+        text2: `rules`,
+        text3: `Day`,
+        text4: `Hour`,
+        text5: `Min`,
+        text6: `Sec`,
+        text7: `My Recharge`,
+        text8: `Go to Recharge`,
+        text9: `Recharge $10`,
+        text10: `Get reward`,
+        text11: `Recharge $100`,
+        text12: `Recharge $300`,
+        text13: `Top 3 Winner`,
+        text14: `Recharge $500`,
+        text15: `Recharge $1000`,
+        text16: `Recharge $3000`,
+        text17: `Rules`,
+        text18: `
+        <p>1、Recharge activity time: 0:00:00 on the 1st of each month to 23:59:59 on the last day of the month (GMT+3).</p>
+        <p>2、You can only get each grade reward once.</p>
+        <p>3、Each round of activities end, the rewards will automatically expire.</p>
+        <p>4、Contact our official customer service to get your unique ID!</p>
+        <p>5、Recharge agent can not join the activity.</p>
+    `,
+        text19: `My Monthly Recharge`,
+        text20: `
+        <p>1、Recharge methods include Google, Apple internal purchase and so on.</p>
+        <p>2、Recharge agent can not join the activity.</p>
+    `,
+        text21: `Customized Gift`,
+        text22: `<p>You can send your special video to our customer service to get your customized gift.</p>`,
+    }
+}
diff --git a/view/molistar/activity/rechargeNew/local/zh.js b/view/molistar/activity/rechargeNew/local/zh.js
new file mode 100644
index 0000000..872164f
--- /dev/null
+++ b/view/molistar/activity/rechargeNew/local/zh.js
@@ -0,0 +1,40 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加载中...`,
+        layerIndex2: `成功`,
+        layerIndex3: `网络错误`,
+        text1: `月度充值`,
+        text2: `规则`,
+        text3: `天`,
+        text4: `小时`,
+        text5: `分钟`,
+        text6: `秒`,
+        text7: `我的充值`,
+        text8: `前往充值`,
+        text9: `充值 $10`,
+        text10: `获得奖励`,
+        text11: `充值 $100`,
+        text12: `充值 $300`,
+        text13: `前三名获奖者`,
+        text14: `充值 $500`,
+        text15: `充值 $1000`,
+        text16: `充值 $3000`,
+        text17: `规则`,
+        text18: `
+        <p>1、充值活动时间：每月1日00:00:00到每月最后一天23:59:59（GMT+3）。</p>
+        <p>2、每个等级的奖励只能获得一次。</p>
+        <p>3、每轮活动结束后，奖励将自动过期。</p>
+        <p>4、联系客服获取您的唯一ID！</p>
+        <p>5、充值代理不能参加活动。</p>
+        `,
+        text19: `我的月度充值`,
+        text20: `
+        <p>1、充值方式包括Google、Apple内购等。</p>
+        <p>2、充值代理不能参加活动。</p>
+        `,
+        text21: `定制礼品`,
+        text22: `<p>您可以将您的特别视频发送给我们的客服，以获取定制礼品。</p>`,
+    }
+}
\ No newline at end of file