布局调整

src/views/HaveJoinedGame.vue

 <template>
   <div class="have-joined-game-page">
     <Title class="page-title" @goback="goback" show_back="true" v-if="currentPage()==='HaveJoinedGame'"></Title>
-    <div class="game-rule-container" @click="goOtherPage('Rule')">
-      <img src="../images/ChallengeDetail/ic_que.png">
-      活动规则
-    </div>
     <!-- 右上角复活卡 -->
     <Reborn class="reborn-container"></Reborn>
     <div class="game-bonus-container">
@@ -67,6 +63,10 @@
     <div class="func-btn green-btn" @click="inviteFriend" v-if="record_list.length&&record_list[0].status === 0">邀请好友来参赛</div>
     <div class="func-btn" @click="changeXcxPopup()" v-else>提交今日步数</div>
     <div class="next-func-btn" :style="next_period?'background: #5f95e7;':''" v-if="next_signup" @click="joinNextGame()">{{next_period?`已报名${String(next_period).slice(4,8)}期`:'报名下一期'}}</div>
+    <div class="game-rule-container" @click="goOtherPage('Rule')">
+      <img src="../images/HaveJoinedGame/que1.png">
+      <div>活动规则</div>
+    </div>
     <!-- 报名成功弹框 -->
     <div class="game-status-popup" v-if="userHavePaidGame">
       <div class="game-status-container">
@@ -168,7 +168,7 @@ export default {
       showSwiper: false,
       bet_bonus: "0.00",
       next_signup: false,
-      next_period: '',
+      next_period: "",
       period_end: "",
       period_start: "",
       total_signup: 0,
@@ -407,25 +407,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.swiper-container {
-  /*margin-left: 0 !important;*/
-}
-
-.swiper-slide {
-  width: 5.1rem;
-  height: 2.68rem;
-}
-
-.swiper-slide img {
-  width: 5.1rem;
-  height: 2.68rem;
-}
-
 .have-joined-game-page {
   width: 100%;
   min-height: 100vh;
   background-color: rgb(70, 88, 149);
-  background-image: url(../images/SignUp/sy_beijing.png);
+  background-image: url(../images/HaveJoinedGame/page_bg.png);
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center top;
@@ -442,26 +428,11 @@ export default {
     top: 0;
     z-index: 2;
   }
-  .game-rule-container {
-    display: flex;
-    align-items: center;
-    position: fixed;
-    top: 0.34rem;
-    right: 0.22rem;
-    font-size: 0.26rem;
-    line-height: 1;
-    color: #465895;
-    z-index: 3;
-    img {
-      width: 0.3rem;
-      height: 0.3rem;
-      margin-right: 0.1rem;
-    }
-  }
   .reborn-container {
     position: absolute;
-    top: 1rem;
-    right: .28rem;
+    top: 0.42rem;
+    right: 0.3rem;
+    z-index: 3;
   }
   .game-bonus-container {
     width: 6.4rem;
@@ -469,7 +440,7 @@ export default {
     box-sizing: border-box;
     background: url("../images/SignUp/shadow-bg.png") no-repeat center center;
     background-size: contain;
-    margin-top: 2.38rem;
+    margin-top: 1.76rem;
     .bonus-title {
       font-size: 0.3rem;
       line-height: 1;
@@ -542,10 +513,21 @@ export default {
     overflow-x: scroll;
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
+
     &::-webkit-scrollbar {
       display: none;
     }
 
+    .swiper-slide {
+      width: 5.1rem;
+      height: 2.68rem;
+
+      img {
+        width: 5.1rem;
+        height: 2.68rem;
+      }
+    }
+
     .game-scroll-item {
       width: 5.1rem;
       height: 2.68rem;
@@ -667,7 +649,7 @@ export default {
     color: #fff;
     font-weight: bold;
     text-align: center;
-    margin-top: 1.2rem;
+    margin-top: 0.5rem;
   }
   .green-btn {
     background: #1fdbb1;
@@ -684,6 +666,21 @@ export default {
     text-align: center;
     margin-top: 0.3rem;
   }
+
+  .game-rule-container {
+    display: flex;
+    align-items: center;
+    font-size: 0.26rem;
+    line-height: 1;
+    color: #91A2DE;
+    margin-top: 0.6rem;
+
+    img {
+      width: 0.3rem;
+      height: 0.3rem;
+      margin-right: 0.1rem;
+    }
+  }
 }
 
 .game-status-popup {