Browse Source

feat:报名弹框静态页面

jianghaili 3 days ago
parent
commit
b71e6e93e7
1 changed files with 64 additions and 1 deletions
  1. 64 1
      src/pages/trade/index.vue

+ 64 - 1
src/pages/trade/index.vue

@@ -77,7 +77,7 @@
             >
           </view>
         </up-count-down>
-        <view class="start-btn">未报名</view>
+        <view class="start-btn" @click="showGameBm=true">未报名</view>
         <view class="num-txt"
           >奖池数量:<text>${{ gameDetail.counts }}</text>
         </view>
@@ -156,6 +156,38 @@
         </view>
       </view>
     </up-popup>
+    <up-popup
+      :show="showGameBm"
+      :round="10"
+      mode="center"
+      :closeOnClickOverlay="true"
+      @close="showGameBm = false"
+    >
+      <view class="show-game-msg" style="height:40vh;">
+        <image
+        class="close-img"
+          src="@/static/image/home/alert-pay-close.png"
+          mode="scaleToFill"
+           @click="showGameBm=false"
+        />
+        <view class="show-game-title">
+          <text>赛程</text>报名
+        </view>
+        <view class="show-game-content">
+          <view class="desc-title" style="color:red;">报名方式①:</view>
+          <view class="game-msg" style="font-weight:400;">消耗 <text style="color:#d4ac27;">0.25U</text> 等值WGT:</view>
+          <view class="game-msg">≈<text>0.0012</text>WGT<text style="color:#d4ac27;font-size: 20rpx;">(钱包扣除)</text></view>
+          <view class="dest-item" style="color: #aaa;">(WGT钱包余额0.0002)</view>
+          <view class="desc-title" style="color:red;">报名方式②:</view>
+          <view class="game-msg">消耗0.25U <text style="color:#d4ac27; font-size:20rpx;">(钱包扣除)</text></view>
+          <view class="dest-item" style="color: #aaa;">(STT钱包余额0.0002)</view>
+        </view>
+        <view class="show-game-bottom">
+          <view class="show-game-btn-wgt">WGT报名</view>
+          <view class="show-game-btn-stt">STT报名</view>
+        </view>
+      </view>
+    </up-popup>
   </view>
 </template>
   
@@ -247,6 +279,10 @@ const showGameMsg = ref(false);
 const openGamePopup = () => {
   showGameMsg.value = true;
 };
+const showGameBm=ref(false)
+const openBmPopup=()=>{
+  showGameBm.value=true;
+}
 </script>
   
   <style lang="scss" scoped>
@@ -635,7 +671,12 @@ const openGamePopup = () => {
   .show-game-bottom {
     width: 100%;
     flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24rpx;
     .show-game-btn{
+      width: 100%;
       background: linear-gradient(90deg, rgba(0, 179, 170, .7) 0, #00b3aa);
       color: #fff;
       height: 80rpx;
@@ -644,6 +685,28 @@ const openGamePopup = () => {
       justify-content: center;
       align-items: center;
     }
+    .show-game-btn-wgt{
+      width: 100%;
+      background: linear-gradient(90deg, #ef602c83 0, #EF612C);
+      color: #fff;
+      height: 80rpx;
+      border-radius:8rpx ;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .show-game-btn-stt{
+      width: 100%;
+      background: linear-gradient(90deg, #0190c470 0, #0191C4);
+      color: #fff;
+      height: 80rpx;
+      border-radius:8rpx ;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      // EF612C
+    }
+
   }
 }
 </style>