参与挑战页面在普通页面和tabbar页面的展示

src/views/PartakeChallenge.vue

 <template>
   <div class="partake-challenge-page">
-    <Title class="page-title" title="　" v-on:goback="goback" show_back="true"></Title>
+    <Title class="page-title" title="　" v-on:goback="goback" show_back="true" v-if="currentPage()==='PartakeChallenge'"></Title>
     <div class="game-title">5000步七日耐力赛</div>
     <div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div>
     <div class="game-cost">本期运动契约金：<span>21.00元/人</span></div>
@@ -30,8 +30,17 @@
           <div class="content-text">次日结算前日比赛，达标者获得对应奖励金；总奖励金为用户每日达标奖金之和。</div>
         </div>
       </div>
+      <div class="game-introduce-join-container" v-if="currentPage()!=='PartakeChallenge'">
+        <div class="auth-container">
+          <img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="true">
+          <div class="auth-uncheck" v-else></div>
+          <div class="text1">我同意</div>
+          <div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
+        </div>
+        <div class="partake-btn">立即报名</div>
+      </div>
     </div>
-    <div class="footer-container">
+    <div class="footer-container" v-if="currentPage()==='PartakeChallenge'">
       <div class="auth-container">
         <img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="true">
         <div class="auth-uncheck" v-else></div>
@@ -63,6 +72,9 @@
       goOtherPage(pageName) {
         this.$router.push({name: pageName});
       },
+      currentPage() {
+        return this.$router.history.current.name;
+      }
     }
   }
 </script>
@@ -111,7 +123,7 @@
     .game-introduce-container {
       width: 7.1rem;
       border-radius: .08rem;
-      padding: .36rem .28rem .2rem;
+      padding: .36rem .28rem .3rem;
       box-sizing: border-box;
       background: #fff;
       margin-top: .34rem;
@@ -162,42 +174,29 @@
           }
         }
       }
+      .game-introduce-join-container {
+        .auth-container {
+          background: transparent;
+          margin-top: .26rem;
+        }
+        .partake-btn {
+          width: 5.6rem;
+          height: .92rem;
+          border-radius: .92rem;
+          background: #FABD21;
+          font-size: .4rem;
+          line-height: .92rem;
+          color: #fff;
+          font-weight: bold;
+          text-align: center;
+        }
+      }
     }
     .footer-container {
       width: 100%;
       position: fixed;
       left: 0;
       bottom: 0;
-      .auth-container {
-        width: 100%;
-        height: .52rem;
-        background: #F2F2F2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .auth-checked {
-          width: .24rem;
-          height: .24rem;
-        }
-        .auth-uncheck {
-          width: .24rem;
-          height: .24rem;
-          border: .01rem solid #BFBFBF;
-          box-sizing: border-box;
-          border-radius: 50%;
-        }
-        .text1 {
-          font-size: .24rem;
-          line-height: 1;
-          color: #999;
-          margin: 0 .1rem;
-        }
-        .text2 {
-          font-size: .24rem;
-          line-height: 1;
-          color: #576B95;
-        }
-      }
       .partake-btn {
         width: 100%;
         background: #FABD21;
@@ -208,5 +207,35 @@
         text-align: center;
       }
     }
+    .auth-container {
+      width: 100%;
+      height: .52rem;
+      background: #F2F2F2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .auth-checked {
+        width: .24rem;
+        height: .24rem;
+      }
+      .auth-uncheck {
+        width: .24rem;
+        height: .24rem;
+        border: .01rem solid #BFBFBF;
+        box-sizing: border-box;
+        border-radius: 50%;
+      }
+      .text1 {
+        font-size: .24rem;
+        line-height: 1;
+        color: #999;
+        margin: 0 .1rem;
+      }
+      .text2 {
+        font-size: .24rem;
+        line-height: 1;
+        color: #576B95;
+      }
+    }
   }
 </style>