ft活动上线

activeFt/queen/css/index.css

+.bg-en .banner {
+  background: url(../images/en/banner.png) no-repeat !important;
+  background-size: 100% 100% !important;
+}
+.bg-en .gift-box {
+  background: url(../images/en/gift-box.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .top-btn1 {
+  background: url(../images/en/top-btn1.png) no-repeat;
+  background-size: 100% 100%;
+  margin-left: 0;
+}
+.bg-en .top-btn2 {
+  background: url(../images/en/top-btn2.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .k6 {
+  background: url(../images/en/k6.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .k5 {
+  background: url(../images/en/k5.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .k4 {
+  background: url(../images/en/k4.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .k3 {
+  background: url(../images/en/k3.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .k2 {
+  background: url(../images/en/k2.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .k1 {
+  background: url(../images/en/k1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .lucky-name {
+  background: url(../images/en/lucky-name.png) no-repeat;
+  background-size: 100% 100%;
+  width: 7.37rem;
+  height: 3rem;
+}
+.bg-en .task1 {
+  top: 3.4rem;
+}
+.bg-en .task2 {
+  top: 5.35rem;
+}
+.bg-en .task3 {
+  top: 6.4rem;
+}
+.bg-en .task4 {
+  top: 8.3rem;
+}
+.bg-en .task5 {
+  top: 9.9rem;
+}
+.bg-en .task-img1 {
+  background: url(../images/en/task1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .task-img2 {
+  background: url(../images/en/task2.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .task-img3 {
+  background: url(../images/en/task3.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .task-img4 {
+  background: url(../images/en/task4.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .task-img5 {
+  background: url(../images/en/task5.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .task-box {
+  height: 11.94rem;
+  background: url(../images/en/task-box.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .extract1 {
+  background: url(../images/en/extract1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .extract10 {
+  background: url(../images/en/extract10.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .lucky-gift-box {
+  background: url(../images/en/lucky-gift-box.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .layer-fans {
+  background: url(../images/en/layer-fans.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .record-btn {
+  background: url(../images/en/record.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .layer-result {
+  background: url(../images/en/layer-result.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .layer-gift1 {
+  background: url(../images/en/layer-gift1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-en .layer-gift10 {
+  background: url(../images/en/layer-gift2.png) no-repeat;
+  background-size: 100% 100%;
+}
 .bg {
   margin: 0 auto;
   position: relative;
@@ -9,8 +128,38 @@
 .ref {
   width: 0.73rem;
   position: fixed;
+  left: 0;
+  top: 5.5rem;
+  z-index: 500;
+}
+.rule-bg {
+  position: relative;
+  width: 10rem;
+  height: 31.866rem;
+  background: url(../images/rule-bg.png) no-repeat;
+  background-size: 100% auto;
+  margin: 0 auto;
+}
+.rule-bg-en {
+  position: relative;
+  width: 10rem;
+  height: 39.44rem;
+  background: url(../images/en/rule-bg.png) no-repeat;
+  background-size: 100% auto;
+  margin: 0 auto;
+}
+.back {
+  position: fixed;
+  top: 5.5rem;
+  right: 0;
+  width: 1.72rem;
+  z-index: 500;
+}
+.rule-btn {
+  position: fixed;
+  top: 5.5rem;
   right: 0;
-  top: 5rem;
+  width: 1.72rem;
   z-index: 500;
 }
 .banner {
@@ -181,6 +330,11 @@
 .lucky-box .floor {
   top: -0.5rem;
 }
+.helo {
+  width: 10rem;
+  position: absolute;
+  top: 6rem;
+}
 .lucky-name {
   width: 6.2rem;
   height: 2.666rem;
@@ -211,6 +365,45 @@
   width: 4rem;
   top: 3.3rem;
   left: 3rem;
+  opacity: 0.5;
+}
+.arm-show {
+  animation: armShow 4s  infinite linear;
+}
+.arm-show2 {
+  animation: armShow2 2.5s 1 linear forwards;
+}
+@keyframes armShow {
+  0% {
+    opacity: 0.5;
+    transform: scale(1) translateY(0);
+  }
+  70% {
+    opacity: 0.1;
+    transform: scale(1.05) translateY(-0.1rem);
+  }
+  100% {
+    opacity: 0.5;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes armShow2 {
+  0% {
+    opacity: 0;
+    transform: scale(1) translateY(2rem);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.05) translateY(-0.1rem);
+  }
+  90% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 .task-btn {
   position: absolute;
@@ -365,7 +558,6 @@
   background: url(../images/layer-fans.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
-  margin-bottom: 5rem;
   overflow: hidden;
 }
 .layer-fans-ul {
@@ -397,6 +589,15 @@
   position: relative;
   color: #efd9ff;
   font-size: 0.38rem;
+  text-indent: 0.8rem;
+}
+.layer-fans-ul .layer-fans-box2 > a img {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  left: -0.38rem;
+  position: absolute;
+  top: 0.25rem;
 }
 .layer-fans-ul .layer-fans-box3 {
   width: 3.4rem;
@@ -406,6 +607,7 @@
   position: relative;
   color: #efd9ff;
   font-size: 0.38rem;
+  text-indent: 0.2rem;
 }
 .mc-nav {
   position: fixed;
@@ -504,3 +706,61 @@
   text-align: center;
   padding-top: 0.35rem;
 }
+.callKF {
+  width: 10rem;
+  position: absolute;
+  bottom: 0.3rem;
+  height: 0.8rem;
+  color: #FBF3FF;
+  text-align: center;
+  font-size: 0.33rem;
+}
+.callKF > span {
+  height: 0.5rem;
+  padding: 0.08rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  background: #f3f3f3;
+  border-radius: 0.1rem;
+  color: #FF3CFF;
+}
+.record-btn {
+  width: 1.56rem;
+  height: 0.573rem;
+  background: url(../images/record.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  right: 0.3rem;
+  top: 0.6rem;
+}
+.layer-result {
+  position: relative;
+  width: 9.626rem;
+  height: 7.8rem;
+  background: url(../images/layer-result.png) no-repeat;
+  background-size: 100% 100%;
+}
+.layer-result-ul {
+  width: 9.2rem;
+  height: 4.9rem;
+  left: 0.213rem;
+  position: absolute;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  top: 2rem;
+}
+.layer-result-ul li {
+  height: 1rem;
+  width: 9.2rem;
+  position: relative;
+}
+.layer-result-ul li div {
+  width: 50%;
+  height: 1rem;
+  line-height: 1rem;
+  float: left;
+  position: relative;
+  font-size: 0.35rem;
+  color: #fff;
+  text-align: center;
+}

activeFt/queen/css/index.less

+.bg-en{
+  .banner{
+    background: url(../images/en/banner.png) no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+  .gift-box{
+    background: url(../images/en/gift-box.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .top-btn1{
+    background: url(../images/en/top-btn1.png) no-repeat;
+    background-size: 100% 100%;
+    margin-left: 0;
+  }
+  .top-btn2{
+    background: url(../images/en/top-btn2.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .k6{
+    background: url(../images/en/k6.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .k5{
+    background: url(../images/en/k5.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .k4{
+    background: url(../images/en/k4.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .k3{
+    background: url(../images/en/k3.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .k2{
+    background: url(../images/en/k2.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .k1{
+    background: url(../images/en/k1.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .lucky-name{
+    background: url(../images/en/lucky-name.png)no-repeat;
+    background-size: 100% 100%;
+    width: 7.37rem;
+    height: 3rem;
+  }
+  .task1{
+    top: 3.4rem;
+  }
+  .task2{
+    top: 5.35rem;
+  }
+  .task3{
+    top: 6.4rem;
+  }
+  .task4{
+    top: 8.3rem;
+  }
+  .task5{
+    top: 9.9rem;
+  }
+  .task-img1{
+    background:url(../images/en/task1.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .task-img2{
+    background:url(../images/en/task2.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .task-img3{
+    background:url(../images/en/task3.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .task-img4{
+    background:url(../images/en/task4.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .task-img5{
+    background:url(../images/en/task5.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .task-box{
+    height: 11.94rem;
+    background: url(../images/en/task-box.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .extract1{
+    background: url(../images/en/extract1.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .extract10{
+    background: url(../images/en/extract10.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .lucky-gift-box{
+    background: url(../images/en/lucky-gift-box.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .layer-fans{
+    background: url(../images/en/layer-fans.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .record-btn{
+    background: url(../images/en/record.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .layer-result{
+    background: url(../images/en/layer-result.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .layer-gift1{
+    background: url(../images/en/layer-gift1.png)no-repeat;
+    background-size: 100% 100%;
+  }
+  .layer-gift10{
+    background: url(../images/en/layer-gift2.png)no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
 .bg{
   margin: 0 auto;
   position: relative;
@@ -9,8 +131,38 @@
 .ref{
   width: 0.73rem;
   position: fixed;
+  left: 0;
+  top: 5.5rem;
+  z-index: 500;
+}
+.rule-bg{
+  position: relative;
+  width: 10rem;
+  height: 31.866rem;  
+  background: url(../images/rule-bg.png)no-repeat;
+  background-size: 100% auto;
+  margin: 0 auto;
+}
+.rule-bg-en{
+  position: relative;
+  width: 10rem;
+  height: 39.44rem;
+  background: url(../images/en/rule-bg.png)no-repeat;
+  background-size: 100% auto;
+  margin: 0 auto;
+}
+.back{
+  position: fixed;
+  top: 5.5rem;
   right: 0;
-  top: 5rem;
+  width: 1.72rem;
+  z-index: 500;
+}
+.rule-btn{
+  position: fixed;
+  top: 5.5rem;
+  right: 0;
+  width: 1.72rem;
   z-index: 500;
 }
 .banner{
@@ -183,6 +335,11 @@
     top: -0.5rem;
   }
 }
+.helo{
+  width: 10rem;
+  position: absolute;
+  top: 6rem;
+}
 .lucky-name{
   width: 6.2rem;
   height: 2.666rem;
@@ -213,6 +370,46 @@
   width: 4rem;
   top: 3.3rem;
   left: 3rem;
+  opacity: 0.5;
+  
+}
+.arm-show{
+  animation: armShow 4s  infinite linear;
+}
+.arm-show2{
+  animation: armShow2 2.5s  1 linear forwards;
+}
+@keyframes armShow{
+  0%{
+    opacity: 0.5;
+    transform: scale(1) translateY(0);
+  }
+  70%{
+    opacity: 0.1;
+    transform: scale(1.05)translateY(-0.1rem);
+  }
+  100%{
+    opacity: 0.5;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes armShow2{
+  0%{
+    opacity: 0;
+    transform: scale(1) translateY(2rem);
+  }
+  50%{
+    opacity: 0.6;
+    transform: scale(1.05)translateY(-0.1rem);
+  }
+  90%{
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  100%{
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 .task-btn{
   position: absolute;
@@ -372,7 +569,7 @@
   background: url(../images/layer-fans.png)no-repeat;
   background-size: 100% 100%;
   position: relative;
-  margin-bottom: 5rem;
+  // margin-bottom: 5rem;
   overflow: hidden;
 }
 .layer-fans-ul{
@@ -403,6 +600,16 @@
     position: relative;
     color: #efd9ff;
     font-size: 0.38rem;
+    text-indent: 0.8rem;
+    >a img{
+      width: 0.8rem;
+      height: 0.8rem;
+      border-radius: 50%;
+      left: -0.38rem;
+      position: absolute;
+      top: 0.25rem;
+    }
+    
   }
   .layer-fans-box3{
     width: 3.4rem;
@@ -412,6 +619,7 @@
     position: relative;
     color: #efd9ff;
     font-size: 0.38rem;
+    text-indent: 0.2rem;
   }
 }
 .mc-nav{
@@ -512,3 +720,63 @@
   text-align: center;
   padding-top: 0.35rem;
 }
+.callKF{
+  width: 10rem;
+  position: absolute;
+  bottom: 0.3rem;
+  height: 0.8rem;
+  color: #FBF3FF;
+  text-align: center;
+  font-size: 0.33rem;
+  >span{
+    height: 0.5rem;
+    padding: 0.08rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    background: #f3f3f3;
+    border-radius: 0.1rem;
+    color: #FF3CFF;
+  }
+}
+.record-btn{
+  width: 1.56rem;
+  height: 0.573rem;
+  background: url(../images/record.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  right: 0.3rem;
+  top: 0.6rem;
+}
+.layer-result{
+  position: relative;
+  width: 9.626rem;
+  height: 7.8rem;
+  background: url(../images/layer-result.png)no-repeat;
+  background-size: 100% 100%;
+}
+.layer-result-ul{
+  width: 9.2rem;
+  height: 4.9rem;
+  // background: pink;
+  left: 0.213rem;
+  position: absolute;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  top: 2rem;
+  li{
+    height: 1rem;
+    width: 9.2rem;
+    position: relative;
+
+    div{
+      width: 50%;
+      height: 1rem;
+      line-height: 1rem;
+      float: left;
+      position: relative;
+      font-size: 0.35rem;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
\ No newline at end of file